@patternfly/pfelement - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

dist/pfelement.js

@@ -118,3 +118,3 @@ let logger = () => null;
 /*!
- * PatternFly Elements: PFElement 1.1.1
+ * PatternFly Elements: PFElement 1.2.0
  * @license
@@ -445,2 +445,6 @@ * Copyright 2021 Red Hat, Inc.
 
+    // Tracks if the component has been initially rendered. Useful if for debouncing
+    // template updates.
+    this._rendered = false;
+
     if (!delayRender) this.render();
@@ -533,2 +537,4 @@ }
     this.resetContext();
+
+    this._rendered = true;
   }
@@ -535,0 +541,0 @@

dist/pfelement.min.js

 let t=()=>null;function e(){t("[reveal] web components ready"),t("[reveal] elements ready, revealing the body"),window.document.body.removeAttribute("unresolved")}function s(t){return t.hasOwnProperty("default")&&t.default.constructor===t.type}Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{value:function(t,e){if(null==this)throw new TypeError('"this" is null or not defined');var s=Object(this),r=s.length>>>0;if(0===r)return!1;var i,a,o=0|e,n=Math.max(o>=0?o:r-Math.abs(o),0);for(;n<r;){if((i=s[n])===(a=t)||"number"==typeof i&&"number"==typeof a&&isNaN(i)&&isNaN(a))return!0;n++}return!1}}),Object.entries||(Object.entries=function(t){for(var e=Object.keys(t),s=e.length,r=new Array(s);s--;)r[s]=[e[s],t[e[s]]];return r})
 /*!
- * PatternFly Elements: PFElement 1.1.1
+ * PatternFly Elements: PFElement 1.2.0
  * @license
@@ -25,3 +25,3 @@ * Copyright 2021 Red Hat, Inc.
  * 
-*/;const r="pfe";class i extends HTMLElement{static debugLog(t=null){return null!==t&&(i._debugLog=!!t),i._debugLog}static log(...t){i.debugLog()&&console.log(...t)}log(...t){i.log(`[${this.tag}${this.id?`#${this.id}`:""}]: ${t.join(", ")}`)}static warn(...t){console.warn(...t)}warn(...t){i.warn(`[${this.tag}${this.id?`#${this.id}`:""}]: ${t.join(", ")}`)}static error(...t){throw new Error([...t].join(" "))}error(...t){i.error(`[${this.tag}${this.id?`#${this.id}`:""}]:`,...t)}static get PfeTypes(){return{Container:"container",Content:"content",Combo:"combo"}}static get version(){return"{{version}}"}get version(){return this._pfeClass.version}static get properties(){return{pfelement:{title:"Upgraded flag",type:Boolean,default:!0,observer:"_upgradeObserver"},on:{title:"Context",description:"Describes the visual context (backgrounds).",type:String,values:["light","dark","saturated"],default:t=>t.contextVariable,observer:"_onObserver"},context:{title:"Context hook",description:"Lets you override the system-set context.",type:String,values:["light","dark","saturated"],observer:"_contextObserver"},oldTheme:{type:String,values:["light","dark","saturated"],alias:"context",attr:"pfe-theme"},_style:{title:"Custom styles",type:String,attr:"style",observer:"_inlineStyleObserver"},type:{title:"Component type",type:String,values:["container","content","combo"]}}}static get observedAttributes(){const t=this.allProperties;if(t){return[...Object.keys(t).filter(e=>t[e].observer||t[e].cascade||t[e].alias).map(t=>this._convertPropNameToAttrName(t))]}}get randomId(){return`${r}-`+Math.random().toString(36).substr(2,9)}set contextVariable(t){this.cssVariable("context",t)}get contextVariable(){return this.cssVariable("context")||this.cssVariable("theme")}hasLightDOM(){return this.children.length||this.textContent.trim().length}hasSlot(t){if(t)switch(typeof t){case"string":return[...this.children].filter(e=>e.hasAttribute("slot")&&e.getAttribute("slot")===t).length>0;case"array":return t.reduce(t=>[...this.children].filter(e=>e.hasAttribute("slot")&&e.getAttribute("slot")===t).length>0);default:return void this.warn("Did not recognize the type of the name provided to hasSlot; this funciton can accept a string or an array.")}else this.warn("Please provide at least one slot name for which to search.")}getSlot(t="unassigned"){return"unassigned"!==t?[...this.children].filter(e=>e.hasAttribute("slot")&&e.getAttribute("slot")===t):[...this.children].filter(t=>!t.hasAttribute("slot"))}cssVariable(t,e,s=this){return t="--"!==t.substr(0,2)?"--"+t:t,e?(s.style.setProperty(t,e),e):window.getComputedStyle(s).getPropertyValue(t).trim()||null}contextUpdate(){[...this.querySelectorAll("*"),...this.shadowRoot.querySelectorAll("*")].filter(t=>t.tagName.toLowerCase().slice(0,4)===`${r}-`).map(t=>{this.log(`Update context of ${t.tag}`),Promise.all([customElements.whenDefined(t.tagName.toLowerCase())]).then(()=>{t.resetContext(this.on)})})}resetContext(t){this.log(`Resetting context on ${this.tag}`);let e=this.context||this.contextVariable||t;this.on=e}constructor(t,{type:e=null,delayRender:s=!1}={}){super(),this._pfeClass=t,this.tag=t.tag,this._parseObserver=this._parseObserver.bind(this),this.schemaProps=t.schemaProperties,this.slots=t.slots,this.template=document.createElement("template"),e&&this._pfeClass.allProperties.type&&(this._pfeClass.allProperties.type.default=e),this._initializeProperties(),this.attachShadow({mode:"open"}),s||this.render()}connectedCallback(){this._initializeAttributeDefaults(),window.ShadyCSS&&window.ShadyCSS.styleElement(this),"object"==typeof this.slots&&(this._slotsObserver=new MutationObserver(()=>this._initializeSlots(this.tag,this.slots)),this._slotsObserver.observe(this,{childList:!0}),this._initializeSlots(this.tag,this.slots)),this._cascadeObserver&&this._cascadeObserver.observe(this,{attributes:!0,childList:!0,subtree:!0})}disconnectedCallback(){this._cascadeObserver&&this._cascadeObserver.disconnect(),this._slotsObserver&&this._slotsObserver.disconnect()}attributeChangedCallback(t,e,s){if(!this._pfeClass.allProperties)return;let r=this._pfeClass._attr2prop(t);const i=this._pfeClass.allProperties[r];if(i){if(i.alias){const t=this._pfeClass.allProperties[i.alias],e=this._pfeClass._prop2attr(i.alias);this.getAttribute(e)!==s&&(this[i.alias]=this._castPropertyValue(t,s))}i.observer&&this[i.observer](this._castPropertyValue(i,e),this._castPropertyValue(i,s)),i.cascade&&this._copyAttribute(t,this._pfeClass._convertSelectorsToArray(i.cascade))}}render(){this.shadowRoot.innerHTML="",this.template.innerHTML=this.html,window.ShadyCSS&&window.ShadyCSS.prepareTemplate(this.template,this.tag),this.shadowRoot.appendChild(this.template.content.cloneNode(!0)),this.log("render"),this.resetContext()}emitEvent(t,{bubbles:e=!0,cancelable:s=!1,composed:r=!1,detail:i={}}={}){this.log(`Custom event: ${t}`),this.dispatchEvent(new CustomEvent(t,{bubbles:e,cancelable:s,composed:r,detail:i}))}cascadeProperties(t){const e=this._pfeClass._getCache("cascadingProperties");if(e){window.ShadyCSS&&this._cascadeObserver&&this._cascadeObserver.disconnect();let s=Object.keys(e);if(t&&(s=[],[...t].forEach(t=>{Object.keys(e).map(e=>{t.matches&&t.matches(e)&&s.push(e)})})),s){const t=s.filter(t=>t.slice(0,r.length+1)===`${r}-`).map(t=>customElements.whenDefined(t));t?Promise.all(t).then(()=>{this._copyAttributes(s,e)}):this._copyAttributes(s,e)}window.ShadyCSS&&this._cascadeObserver&&this._cascadeObserver.observe(this,{attributes:!0,childList:!0,subtree:!0})}}_upgradeObserver(){this.classList.add("PFElement")}_contextObserver(t,e){e&&(t&&t!==e||!t)&&(this.on=e,this.cssVariable("context",e))}_onObserver(t,e){(t&&t!==e||e&&!t)&&this.contextUpdate()}_inlineStyleObserver(t,e){this.log(`Style observer activated on ${this.tag}`);let s="";let r=/--(?:context|theme):\s*(?:\"*(light|dark|saturated)\"*)/gi.exec(e);r&&((s=r[1])===this.on||this.context||(this.on=s))}_parseObserver(t){for(let e of t)"childList"===e.type&&e.addedNodes.length&&this.cascadeProperties(e.addedNodes)}static _validateProperties(){for(let t in this.allProperties){const e=this.allProperties[t];[String,Number,Boolean].includes(e.type||String)||this.error(`Property "${t}" on ${this.name} must have type String, Number, or Boolean.`),/^[a-z_]/.test(t)||this.error(`Property ${this.name}.${t} defined, but prop names must begin with a lower-case letter or an underscore`);const r="function"==typeof e.default;!e.default||s(e)||r||this.error(`[${this.name}] The default value \`${e.default}\` does not match the assigned type ${e.type.name} for the '${t}' property`)}}_castPropertyValue(t,e){switch(t.type){case Number:return{[e]:Number(e),null:null,NaN:NaN,undefined:void 0}[e];case Boolean:return null!==e;case String:return{[e]:e,undefined:void 0}[e];default:return e}}_assignValueToAttribute(t,e,s){t.type===Boolean&&!s||null===s||void 0===s?this.removeAttribute(e):t.type===Boolean&&"boolean"==typeof s?this.setAttribute(e,""):(t.values&&this._validateAttributeValue(t,e,s),this.setAttribute(e,s))}_initializeSlots(t,e){this.log("Validate slots..."),window.ShadyCSS&&this._slotsObserver&&this._slotsObserver.disconnect(),Object.keys(e).forEach(s=>{let r=e[s];if("object"==typeof r){let e=!1,i=[];r.namedSlot?((i=this.getSlot(`${t}--${s}`)).length>0&&(r.nodes=i,e=!0),(i=this.getSlot(`${s}`)).length>0&&(r.nodes=i,e=!0)):(i=[...this.children].filter(t=>!t.hasAttribute("slot"))).length>0&&(r.nodes=i,e=!0),e?this.setAttribute(`has_${s}`,""):this.removeAttribute(`has_${s}`)}}),this.log("Slots validated."),window.ShadyCSS&&this._slotsObserver&&this._slotsObserver.observe(this,{childList:!0})}_initializeProperties(){const t=this._pfeClass.allProperties;let e=!1;for(let s in t){const r=t[s];if(void 0!==this[s])this.log(`Property "${s}" on ${this.constructor.name} cannot be defined because the property name is reserved`);else{const t=this._pfeClass._prop2attr(s);r.cascade&&(e=!0),Object.defineProperty(this,s,{get:()=>{const e=this.getAttribute(t);return this._castPropertyValue(r,e)},set:e=>(this._assignValueToAttribute(r,t,e),e),writeable:!0,enumerable:!0,configurable:!1})}}e&&(this._cascadeObserver=new MutationObserver(this._parseObserver))}_initializeAttributeDefaults(){const t=this._pfeClass.allProperties;for(let e in t){const s=t[e],r=this._pfeClass._prop2attr(e);if(s.hasOwnProperty("default")){let t=s.default;"function"==typeof s.default&&(t=s.default(this)),this.hasAttribute(r)||this._assignValueToAttribute(s,r,t)}}}_validateAttributeValue(t,e,s){return Array.isArray(t.values)&&t.values.length>0&&!t.values.includes(s)&&this.warn(`${s} is not a valid value for ${e}. Please provide one of the following values: ${t.values.join(", ")}`),s}static _prop2attr(t){return this._getCache("prop2attr")[t]}static _attr2prop(t){return this._getCache("attr2prop")[t]}static _convertPropNameToAttrName(t){const e=this.allProperties[t];return e.attr?e.attr:t.replace(/^_/,"").replace(/^[A-Z]/,t=>t.toLowerCase()).replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}static _convertAttrNameToPropName(t){for(let e in this.allProperties)if(this.allProperties[e].attr===t)return e;return t.replace(/-([A-Za-z])/g,t=>t[1].toUpperCase())}_copyAttributes(t,e){t.forEach(t=>{e[t].forEach(e=>{this._copyAttribute(e,t)})})}_copyAttribute(t,e){const s=[...this.querySelectorAll(e),...this.shadowRoot.querySelectorAll(e)],r=this.getAttribute(t),i=null==r?"removeAttribute":"setAttribute";for(const e of s)e[i](t,r)}static _convertSelectorsToArray(t){if(t){if("string"==typeof t)return t.split(",");if("array"==typeof t||"object"==typeof t)return t;this.warn(`selectors should be provided as a string, array, or object; received: ${typeof t}.`)}}static _parsePropertiesForCascade(t){let e={};for(const[s,r]of Object.entries(t)){let t=this._convertSelectorsToArray(r.cascade);t&&t.map(t=>{let r=this._prop2attr(s);e[t]?e[t].push(r):e[t]=[r]})}return e}static create(t){t._createCache(),t._populateCache(t),t._validateProperties(),window.customElements.define(t.tag,t)}static _createCache(){this._cache={properties:{},globalProperties:{},componentProperties:{},cascadingProperties:{},attr2prop:{},prop2attr:{}}}static _setCache(t,e){this._cache[t]=e}static _getCache(t){return t?this._cache[t]:this._cache}static _populateCache(t){const e={...t.properties,...i.properties};t._setCache("componentProperties",t.properties),t._setCache("globalProperties",i.properties),t._setCache("properties",e);const s={},r={};for(let t in e){const e=this._convertPropNameToAttrName(t);s[t]=e,r[e]=t}t._setCache("attr2prop",r),t._setCache("prop2attr",s);const a=this._parsePropertiesForCascade(e);Object.keys(a)&&t._setCache("cascadingProperties",a)}static get allProperties(){return this._getCache("properties")}static get cascadingProperties(){return this._getCache("cascadingProperties")}}!function(s){t=s;const r=window.WebComponents,i=r&&window.WebComponents.ready;!r||i?e():window.addEventListener("WebComponentsReady",e)}(i.log);export default i;
+*/;const r="pfe";class i extends HTMLElement{static debugLog(t=null){return null!==t&&(i._debugLog=!!t),i._debugLog}static log(...t){i.debugLog()&&console.log(...t)}log(...t){i.log(`[${this.tag}${this.id?`#${this.id}`:""}]: ${t.join(", ")}`)}static warn(...t){console.warn(...t)}warn(...t){i.warn(`[${this.tag}${this.id?`#${this.id}`:""}]: ${t.join(", ")}`)}static error(...t){throw new Error([...t].join(" "))}error(...t){i.error(`[${this.tag}${this.id?`#${this.id}`:""}]:`,...t)}static get PfeTypes(){return{Container:"container",Content:"content",Combo:"combo"}}static get version(){return"{{version}}"}get version(){return this._pfeClass.version}static get properties(){return{pfelement:{title:"Upgraded flag",type:Boolean,default:!0,observer:"_upgradeObserver"},on:{title:"Context",description:"Describes the visual context (backgrounds).",type:String,values:["light","dark","saturated"],default:t=>t.contextVariable,observer:"_onObserver"},context:{title:"Context hook",description:"Lets you override the system-set context.",type:String,values:["light","dark","saturated"],observer:"_contextObserver"},oldTheme:{type:String,values:["light","dark","saturated"],alias:"context",attr:"pfe-theme"},_style:{title:"Custom styles",type:String,attr:"style",observer:"_inlineStyleObserver"},type:{title:"Component type",type:String,values:["container","content","combo"]}}}static get observedAttributes(){const t=this.allProperties;if(t){return[...Object.keys(t).filter(e=>t[e].observer||t[e].cascade||t[e].alias).map(t=>this._convertPropNameToAttrName(t))]}}get randomId(){return`${r}-`+Math.random().toString(36).substr(2,9)}set contextVariable(t){this.cssVariable("context",t)}get contextVariable(){return this.cssVariable("context")||this.cssVariable("theme")}hasLightDOM(){return this.children.length||this.textContent.trim().length}hasSlot(t){if(t)switch(typeof t){case"string":return[...this.children].filter(e=>e.hasAttribute("slot")&&e.getAttribute("slot")===t).length>0;case"array":return t.reduce(t=>[...this.children].filter(e=>e.hasAttribute("slot")&&e.getAttribute("slot")===t).length>0);default:return void this.warn("Did not recognize the type of the name provided to hasSlot; this funciton can accept a string or an array.")}else this.warn("Please provide at least one slot name for which to search.")}getSlot(t="unassigned"){return"unassigned"!==t?[...this.children].filter(e=>e.hasAttribute("slot")&&e.getAttribute("slot")===t):[...this.children].filter(t=>!t.hasAttribute("slot"))}cssVariable(t,e,s=this){return t="--"!==t.substr(0,2)?"--"+t:t,e?(s.style.setProperty(t,e),e):window.getComputedStyle(s).getPropertyValue(t).trim()||null}contextUpdate(){[...this.querySelectorAll("*"),...this.shadowRoot.querySelectorAll("*")].filter(t=>t.tagName.toLowerCase().slice(0,4)===`${r}-`).map(t=>{this.log(`Update context of ${t.tag}`),Promise.all([customElements.whenDefined(t.tagName.toLowerCase())]).then(()=>{t.resetContext(this.on)})})}resetContext(t){this.log(`Resetting context on ${this.tag}`);let e=this.context||this.contextVariable||t;this.on=e}constructor(t,{type:e=null,delayRender:s=!1}={}){super(),this._pfeClass=t,this.tag=t.tag,this._parseObserver=this._parseObserver.bind(this),this.schemaProps=t.schemaProperties,this.slots=t.slots,this.template=document.createElement("template"),e&&this._pfeClass.allProperties.type&&(this._pfeClass.allProperties.type.default=e),this._initializeProperties(),this.attachShadow({mode:"open"}),this._rendered=!1,s||this.render()}connectedCallback(){this._initializeAttributeDefaults(),window.ShadyCSS&&window.ShadyCSS.styleElement(this),"object"==typeof this.slots&&(this._slotsObserver=new MutationObserver(()=>this._initializeSlots(this.tag,this.slots)),this._slotsObserver.observe(this,{childList:!0}),this._initializeSlots(this.tag,this.slots)),this._cascadeObserver&&this._cascadeObserver.observe(this,{attributes:!0,childList:!0,subtree:!0})}disconnectedCallback(){this._cascadeObserver&&this._cascadeObserver.disconnect(),this._slotsObserver&&this._slotsObserver.disconnect()}attributeChangedCallback(t,e,s){if(!this._pfeClass.allProperties)return;let r=this._pfeClass._attr2prop(t);const i=this._pfeClass.allProperties[r];if(i){if(i.alias){const t=this._pfeClass.allProperties[i.alias],e=this._pfeClass._prop2attr(i.alias);this.getAttribute(e)!==s&&(this[i.alias]=this._castPropertyValue(t,s))}i.observer&&this[i.observer](this._castPropertyValue(i,e),this._castPropertyValue(i,s)),i.cascade&&this._copyAttribute(t,this._pfeClass._convertSelectorsToArray(i.cascade))}}render(){this.shadowRoot.innerHTML="",this.template.innerHTML=this.html,window.ShadyCSS&&window.ShadyCSS.prepareTemplate(this.template,this.tag),this.shadowRoot.appendChild(this.template.content.cloneNode(!0)),this.log("render"),this.resetContext(),this._rendered=!0}emitEvent(t,{bubbles:e=!0,cancelable:s=!1,composed:r=!1,detail:i={}}={}){this.log(`Custom event: ${t}`),this.dispatchEvent(new CustomEvent(t,{bubbles:e,cancelable:s,composed:r,detail:i}))}cascadeProperties(t){const e=this._pfeClass._getCache("cascadingProperties");if(e){window.ShadyCSS&&this._cascadeObserver&&this._cascadeObserver.disconnect();let s=Object.keys(e);if(t&&(s=[],[...t].forEach(t=>{Object.keys(e).map(e=>{t.matches&&t.matches(e)&&s.push(e)})})),s){const t=s.filter(t=>t.slice(0,r.length+1)===`${r}-`).map(t=>customElements.whenDefined(t));t?Promise.all(t).then(()=>{this._copyAttributes(s,e)}):this._copyAttributes(s,e)}window.ShadyCSS&&this._cascadeObserver&&this._cascadeObserver.observe(this,{attributes:!0,childList:!0,subtree:!0})}}_upgradeObserver(){this.classList.add("PFElement")}_contextObserver(t,e){e&&(t&&t!==e||!t)&&(this.on=e,this.cssVariable("context",e))}_onObserver(t,e){(t&&t!==e||e&&!t)&&this.contextUpdate()}_inlineStyleObserver(t,e){this.log(`Style observer activated on ${this.tag}`);let s="";let r=/--(?:context|theme):\s*(?:\"*(light|dark|saturated)\"*)/gi.exec(e);r&&((s=r[1])===this.on||this.context||(this.on=s))}_parseObserver(t){for(let e of t)"childList"===e.type&&e.addedNodes.length&&this.cascadeProperties(e.addedNodes)}static _validateProperties(){for(let t in this.allProperties){const e=this.allProperties[t];[String,Number,Boolean].includes(e.type||String)||this.error(`Property "${t}" on ${this.name} must have type String, Number, or Boolean.`),/^[a-z_]/.test(t)||this.error(`Property ${this.name}.${t} defined, but prop names must begin with a lower-case letter or an underscore`);const r="function"==typeof e.default;!e.default||s(e)||r||this.error(`[${this.name}] The default value \`${e.default}\` does not match the assigned type ${e.type.name} for the '${t}' property`)}}_castPropertyValue(t,e){switch(t.type){case Number:return{[e]:Number(e),null:null,NaN:NaN,undefined:void 0}[e];case Boolean:return null!==e;case String:return{[e]:e,undefined:void 0}[e];default:return e}}_assignValueToAttribute(t,e,s){t.type===Boolean&&!s||null===s||void 0===s?this.removeAttribute(e):t.type===Boolean&&"boolean"==typeof s?this.setAttribute(e,""):(t.values&&this._validateAttributeValue(t,e,s),this.setAttribute(e,s))}_initializeSlots(t,e){this.log("Validate slots..."),window.ShadyCSS&&this._slotsObserver&&this._slotsObserver.disconnect(),Object.keys(e).forEach(s=>{let r=e[s];if("object"==typeof r){let e=!1,i=[];r.namedSlot?((i=this.getSlot(`${t}--${s}`)).length>0&&(r.nodes=i,e=!0),(i=this.getSlot(`${s}`)).length>0&&(r.nodes=i,e=!0)):(i=[...this.children].filter(t=>!t.hasAttribute("slot"))).length>0&&(r.nodes=i,e=!0),e?this.setAttribute(`has_${s}`,""):this.removeAttribute(`has_${s}`)}}),this.log("Slots validated."),window.ShadyCSS&&this._slotsObserver&&this._slotsObserver.observe(this,{childList:!0})}_initializeProperties(){const t=this._pfeClass.allProperties;let e=!1;for(let s in t){const r=t[s];if(void 0!==this[s])this.log(`Property "${s}" on ${this.constructor.name} cannot be defined because the property name is reserved`);else{const t=this._pfeClass._prop2attr(s);r.cascade&&(e=!0),Object.defineProperty(this,s,{get:()=>{const e=this.getAttribute(t);return this._castPropertyValue(r,e)},set:e=>(this._assignValueToAttribute(r,t,e),e),writeable:!0,enumerable:!0,configurable:!1})}}e&&(this._cascadeObserver=new MutationObserver(this._parseObserver))}_initializeAttributeDefaults(){const t=this._pfeClass.allProperties;for(let e in t){const s=t[e],r=this._pfeClass._prop2attr(e);if(s.hasOwnProperty("default")){let t=s.default;"function"==typeof s.default&&(t=s.default(this)),this.hasAttribute(r)||this._assignValueToAttribute(s,r,t)}}}_validateAttributeValue(t,e,s){return Array.isArray(t.values)&&t.values.length>0&&!t.values.includes(s)&&this.warn(`${s} is not a valid value for ${e}. Please provide one of the following values: ${t.values.join(", ")}`),s}static _prop2attr(t){return this._getCache("prop2attr")[t]}static _attr2prop(t){return this._getCache("attr2prop")[t]}static _convertPropNameToAttrName(t){const e=this.allProperties[t];return e.attr?e.attr:t.replace(/^_/,"").replace(/^[A-Z]/,t=>t.toLowerCase()).replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}static _convertAttrNameToPropName(t){for(let e in this.allProperties)if(this.allProperties[e].attr===t)return e;return t.replace(/-([A-Za-z])/g,t=>t[1].toUpperCase())}_copyAttributes(t,e){t.forEach(t=>{e[t].forEach(e=>{this._copyAttribute(e,t)})})}_copyAttribute(t,e){const s=[...this.querySelectorAll(e),...this.shadowRoot.querySelectorAll(e)],r=this.getAttribute(t),i=null==r?"removeAttribute":"setAttribute";for(const e of s)e[i](t,r)}static _convertSelectorsToArray(t){if(t){if("string"==typeof t)return t.split(",");if("array"==typeof t||"object"==typeof t)return t;this.warn(`selectors should be provided as a string, array, or object; received: ${typeof t}.`)}}static _parsePropertiesForCascade(t){let e={};for(const[s,r]of Object.entries(t)){let t=this._convertSelectorsToArray(r.cascade);t&&t.map(t=>{let r=this._prop2attr(s);e[t]?e[t].push(r):e[t]=[r]})}return e}static create(t){t._createCache(),t._populateCache(t),t._validateProperties(),window.customElements.define(t.tag,t)}static _createCache(){this._cache={properties:{},globalProperties:{},componentProperties:{},cascadingProperties:{},attr2prop:{},prop2attr:{}}}static _setCache(t,e){this._cache[t]=e}static _getCache(t){return t?this._cache[t]:this._cache}static _populateCache(t){const e={...t.properties,...i.properties};t._setCache("componentProperties",t.properties),t._setCache("globalProperties",i.properties),t._setCache("properties",e);const s={},r={};for(let t in e){const e=this._convertPropNameToAttrName(t);s[t]=e,r[e]=t}t._setCache("attr2prop",r),t._setCache("prop2attr",s);const a=this._parsePropertiesForCascade(e);Object.keys(a)&&t._setCache("cascadingProperties",a)}static get allProperties(){return this._getCache("properties")}static get cascadingProperties(){return this._getCache("cascadingProperties")}}!function(s){t=s;const r=window.WebComponents,i=r&&window.WebComponents.ready;!r||i?e():window.addEventListener("WebComponentsReady",e)}(i.log);export default i;
 //# sourceMappingURL=pfelement.min.js.map

dist/pfelement.umd.js

@@ -257,3 +257,3 @@ (function (global, factory) {
   /*!
-   * PatternFly Elements: PFElement 1.1.1
+   * PatternFly Elements: PFElement 1.2.0
    * @license
@@ -676,2 +676,6 @@ * Copyright 2021 Red Hat, Inc.
 
+      // Tracks if the component has been initially rendered. Useful if for debouncing
+      // template updates.
+      _this._rendered = false;
+
       if (!delayRender) _this.render();
@@ -781,2 +785,4 @@ return _this;
         this.resetContext();
+
+        this._rendered = true;
       }
@@ -783,0 +789,0 @@

dist/pfelement.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).PFElement=t()}(this,function(){"use strict";var r=function(){return null};function n(){r("[reveal] web components ready"),r("[reveal] elements ready, revealing the body"),window.document.body.removeAttribute("unresolved")}Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{value:function(e,t){if(null==this)throw new TypeError('"this" is null or not defined');var r=Object(this),n=r.length>>>0;if(0==n)return!1;var o,i,t=0|t,a=Math.max(0<=t?t:n-Math.abs(t),0);for(;a<n;){if((o=r[a])===(i=e)||"number"==typeof o&&"number"==typeof i&&isNaN(o)&&isNaN(i))return!0;a++}return!1}}),Object.entries||(Object.entries=function(e){for(var t=Object.keys(e),r=t.length,n=new Array(r);r--;)n[r]=[t[r],e[t[r]]];return n});var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},e=function(e,t,r){return t&&i(e.prototype,t),r&&i(e,r),e};function i(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r,n=arguments[t];for(r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},h=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(n=(a=s.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&s.return&&s.return()}finally{if(o)throw i}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},f="pfe",e=(function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(p,HTMLElement),e(p,[{key:"log",value:function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];p.log("["+this.tag+(this.id?"#"+this.id:"")+"]: "+t.join(", "))}},{key:"warn",value:function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];p.warn("["+this.tag+(this.id?"#"+this.id:"")+"]: "+t.join(", "))}},{key:"error",value:function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];p.error.apply(p,["["+this.tag+(this.id?"#"+this.id:"")+"]:"].concat(t))}},{key:"hasLightDOM",value:function(){return this.children.length||this.textContent.trim().length}},{key:"hasSlot",value:function(t){var e=this;if(t)switch(void 0===t?"undefined":s(t)){case"string":return 0<[].concat(c(this.children)).filter(function(e){return e.hasAttribute("slot")&&e.getAttribute("slot")===t}).length;case"array":return t.reduce(function(t){return 0<[].concat(c(e.children)).filter(function(e){return e.hasAttribute("slot")&&e.getAttribute("slot")===t}).length});default:return void this.warn("Did not recognize the type of the name provided to hasSlot; this funciton can accept a string or an array.")}else this.warn("Please provide at least one slot name for which to search.")}},{key:"getSlot",value:function(e){var t=0<arguments.length&&void 0!==e?e:"unassigned";return"unassigned"!==t?[].concat(c(this.children)).filter(function(e){return e.hasAttribute("slot")&&e.getAttribute("slot")===t}):[].concat(c(this.children)).filter(function(e){return!e.hasAttribute("slot")})}},{key:"cssVariable",value:function(e,t,r){r=2<arguments.length&&void 0!==r?r:this;return e="--"!==e.substr(0,2)?"--"+e:e,t?(r.style.setProperty(e,t),t):window.getComputedStyle(r).getPropertyValue(e).trim()||null}},{key:"contextUpdate",value:function(){var t=this;[].concat(c(this.querySelectorAll("*")),c(this.shadowRoot.querySelectorAll("*"))).filter(function(e){return e.tagName.toLowerCase().slice(0,4)===f+"-"}).map(function(e){t.log("Update context of "+e.tag),Promise.all([customElements.whenDefined(e.tagName.toLowerCase())]).then(function(){e.resetContext(t.on)})})}},{key:"resetContext",value:function(e){this.log("Resetting context on "+this.tag);e=this.context||this.contextVariable||e;this.on=e}},{key:"version",get:function(){return this._pfeClass.version}},{key:"randomId",get:function(){return f+"-"+Math.random().toString(36).substr(2,9)}},{key:"contextVariable",set:function(e){this.cssVariable("context",e)},get:function(){return this.cssVariable("context")||this.cssVariable("theme")}}],[{key:"debugLog",value:function(e){e=0<arguments.length&&void 0!==e?e:null;return null!==e&&(p._debugLog=!!e),p._debugLog}},{key:"log",value:function(){var e;p.debugLog()&&(e=console).log.apply(e,arguments)}},{key:"warn",value:function(){var e;(e=console).warn.apply(e,arguments)}},{key:"error",value:function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];throw new Error([].concat(t).join(" "))}},{key:"PfeTypes",get:function(){return{Container:"container",Content:"content",Combo:"combo"}}},{key:"version",get:function(){return"{{version}}"}},{key:"properties",get:function(){return{pfelement:{title:"Upgraded flag",type:Boolean,default:!0,observer:"_upgradeObserver"},on:{title:"Context",description:"Describes the visual context (backgrounds).",type:String,values:["light","dark","saturated"],default:function(e){return e.contextVariable},observer:"_onObserver"},context:{title:"Context hook",description:"Lets you override the system-set context.",type:String,values:["light","dark","saturated"],observer:"_contextObserver"},oldTheme:{type:String,values:["light","dark","saturated"],alias:"context",attr:"pfe-theme"},_style:{title:"Custom styles",type:String,attr:"style",observer:"_inlineStyleObserver"},type:{title:"Component type",type:String,values:["container","content","combo"]}}}},{key:"observedAttributes",get:function(){var t=this,r=this.allProperties;if(r){var e=Object.keys(r).filter(function(e){return r[e].observer||r[e].cascade||r[e].alias}).map(function(e){return t._convertPropNameToAttrName(e)});return[].concat(c(e))}}}]),e(p,[{key:"connectedCallback",value:function(){var e=this;this._initializeAttributeDefaults(),window.ShadyCSS&&window.ShadyCSS.styleElement(this),"object"===s(this.slots)&&(this._slotsObserver=new MutationObserver(function(){return e._initializeSlots(e.tag,e.slots)}),this._slotsObserver.observe(this,{childList:!0}),this._initializeSlots(this.tag,this.slots)),this._cascadeObserver&&this._cascadeObserver.observe(this,{attributes:!0,childList:!0,subtree:!0})}},{key:"disconnectedCallback",value:function(){this._cascadeObserver&&this._cascadeObserver.disconnect(),this._slotsObserver&&this._slotsObserver.disconnect()}},{key:"attributeChangedCallback",value:function(e,t,r){var n,o,i;this._pfeClass.allProperties&&(i=this._pfeClass._attr2prop(e),(n=this._pfeClass.allProperties[i])&&(n.alias&&(o=this._pfeClass.allProperties[n.alias],i=this._pfeClass._prop2attr(n.alias),this.getAttribute(i)!==r&&(this[n.alias]=this._castPropertyValue(o,r))),n.observer&&this[n.observer](this._castPropertyValue(n,t),this._castPropertyValue(n,r)),n.cascade&&this._copyAttribute(e,this._pfeClass._convertSelectorsToArray(n.cascade))))}},{key:"render",value:function(){this.shadowRoot.innerHTML="",this.template.innerHTML=this.html,window.ShadyCSS&&window.ShadyCSS.prepareTemplate(this.template,this.tag),this.shadowRoot.appendChild(this.template.content.cloneNode(!0)),this.log("render"),this.resetContext()}},{key:"emitEvent",value:function(e,t){var r=1<arguments.length&&void 0!==t?t:{},n=r.bubbles,o=void 0===n||n,t=r.cancelable,n=void 0!==t&&t,t=r.composed,t=void 0!==t&&t,r=r.detail,r=void 0===r?{}:r;this.log("Custom event: "+e),this.dispatchEvent(new CustomEvent(e,{bubbles:o,cancelable:n,composed:t,detail:r}))}},{key:"cascadeProperties",value:function(e){var r,t=this,n=this._pfeClass._getCache("cascadingProperties");n&&(window.ShadyCSS&&this._cascadeObserver&&this._cascadeObserver.disconnect(),r=Object.keys(n),e&&(r=[],[].concat(c(e)).forEach(function(t){Object.keys(n).map(function(e){t.matches&&t.matches(e)&&r.push(e)})})),r&&((e=r.filter(function(e){return e.slice(0,f.length+1)===f+"-"}).map(function(e){return customElements.whenDefined(e)}))?Promise.all(e).then(function(){t._copyAttributes(r,n)}):this._copyAttributes(r,n)),window.ShadyCSS&&this._cascadeObserver&&this._cascadeObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}))}},{key:"_upgradeObserver",value:function(){this.classList.add("PFElement")}},{key:"_contextObserver",value:function(e,t){t&&(e&&e!==t||!e)&&(this.on=t,this.cssVariable("context",t))}},{key:"_onObserver",value:function(e,t){(e&&e!==t||t&&!e)&&this.contextUpdate()}},{key:"_inlineStyleObserver",value:function(e,t){this.log("Style observer activated on "+this.tag);var r,t=/--(?:context|theme):\s*(?:\"*(light|dark|saturated)\"*)/gi.exec(t);t&&((r=t[1])===this.on||this.context||(this.on=r))}},{key:"_parseObserver",value:function(e){var t=!0,r=!1,n=void 0;try{for(var o=e[Symbol.iterator]();!(t=(i=o.next()).done);t=!0){var i=i.value;"childList"===i.type&&i.addedNodes.length&&this.cascadeProperties(i.addedNodes)}}catch(e){r=!0,n=e}finally{try{!t&&o.return&&o.return()}finally{if(r)throw n}}}},{key:"_castPropertyValue",value:function(e,t){var r;switch(e.type){case Number:return a(r={},t,Number(t)),a(r,"null",null),a(r,"NaN",NaN),a(r,"undefined",void 0),r[t];case Boolean:return null!==t;case String:return a(r={},t,t),a(r,"undefined",void 0),r[t];default:return t}}},{key:"_assignValueToAttribute",value:function(e,t,r){e.type===Boolean&&!r||null===r||void 0===r?this.removeAttribute(t):e.type===Boolean&&"boolean"==typeof r?this.setAttribute(t,""):(e.values&&this._validateAttributeValue(e,t,r),this.setAttribute(t,r))}},{key:"_initializeSlots",value:function(o,i){var a=this;this.log("Validate slots..."),window.ShadyCSS&&this._slotsObserver&&this._slotsObserver.disconnect(),Object.keys(i).forEach(function(e){var t,r,n=i[e];"object"===(void 0===n?"undefined":s(n))&&(t=!1,r=[],n.namedSlot?(0<(r=a.getSlot(o+"--"+e)).length&&(n.nodes=r,t=!0),0<(r=a.getSlot(""+e)).length&&(n.nodes=r,t=!0)):0<(r=[].concat(c(a.children)).filter(function(e){return!e.hasAttribute("slot")})).length&&(n.nodes=r,t=!0),t?a.setAttribute("has_"+e,""):a.removeAttribute("has_"+e))}),this.log("Slots validated."),window.ShadyCSS&&this._slotsObserver&&this._slotsObserver.observe(this,{childList:!0})}},{key:"_initializeProperties",value:function(){var e,n=this,o=this._pfeClass.allProperties,i=!1;for(e in o)!function(e){var t,r=o[e];void 0!==n[e]?n.log('Property "'+e+'" on '+n.constructor.name+" cannot be defined because the property name is reserved"):(t=n._pfeClass._prop2attr(e),r.cascade&&(i=!0),Object.defineProperty(n,e,{get:function(){var e=n.getAttribute(t);return n._castPropertyValue(r,e)},set:function(e){return n._assignValueToAttribute(r,t,e),e},writeable:!0,enumerable:!0,configurable:!1}))}(e);i&&(this._cascadeObserver=new MutationObserver(this._parseObserver))}},{key:"_initializeAttributeDefaults",value:function(){var e,t=this._pfeClass.allProperties;for(e in t){var r,n=t[e],o=this._pfeClass._prop2attr(e);n.hasOwnProperty("default")&&(r=n.default,"function"==typeof n.default&&(r=n.default(this)),this.hasAttribute(o)||this._assignValueToAttribute(n,o,r))}}},{key:"_validateAttributeValue",value:function(e,t,r){return Array.isArray(e.values)&&0<e.values.length&&!e.values.includes(r)&&this.warn(r+" is not a valid value for "+t+". Please provide one of the following values: "+e.values.join(", ")),r}},{key:"_copyAttributes",value:function(e,r){var n=this;e.forEach(function(t){r[t].forEach(function(e){n._copyAttribute(e,t)})})}},{key:"_copyAttribute",value:function(e,t){var r=[].concat(c(this.querySelectorAll(t)),c(this.shadowRoot.querySelectorAll(t))),n=this.getAttribute(e),o=null==n?"removeAttribute":"setAttribute",i=!0,a=!1,s=void 0;try{for(var l,u=r[Symbol.iterator]();!(i=(l=u.next()).done);i=!0)l.value[o](e,n)}catch(e){a=!0,s=e}finally{try{!i&&u.return&&u.return()}finally{if(a)throw s}}}}],[{key:"_validateProperties",value:function(){for(var e in this.allProperties){var t=this.allProperties[e];[String,Number,Boolean].includes(t.type||String)||this.error('Property "'+e+'" on '+this.name+" must have type String, Number, or Boolean."),/^[a-z_]/.test(e)||this.error("Property "+this.name+"."+e+" defined, but prop names must begin with a lower-case letter or an underscore");var r="function"==typeof t.default;!t.default||(n=t).hasOwnProperty("default")&&n.default.constructor===n.type||r||this.error("["+this.name+"] The default value `"+t.default+"` does not match the assigned type "+t.type.name+" for the '"+e+"' property")}var n}},{key:"_prop2attr",value:function(e){return this._getCache("prop2attr")[e]}},{key:"_attr2prop",value:function(e){return this._getCache("attr2prop")[e]}},{key:"_convertPropNameToAttrName",value:function(e){var t=this.allProperties[e];return t.attr||e.replace(/^_/,"").replace(/^[A-Z]/,function(e){return e.toLowerCase()}).replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()})}},{key:"_convertAttrNameToPropName",value:function(e){for(var t in this.allProperties)if(this.allProperties[t].attr===e)return t;return e.replace(/-([A-Za-z])/g,function(e){return e[1].toUpperCase()})}},{key:"_convertSelectorsToArray",value:function(e){if(e){if("string"==typeof e)return e.split(",");if("array"==typeof e||"object"===(void 0===e?"undefined":s(e)))return e;this.warn("selectors should be provided as a string, array, or object; received: "+(void 0===e?"undefined":s(e))+".")}}},{key:"_parsePropertiesForCascade",value:function(e){var n=this,o={},t=!0,r=!1,i=void 0;try{for(var a=Object.entries(e)[Symbol.iterator]();!(t=(s=a.next()).done);t=!0){var s=s.value,s=h(s,2);!function(r,e){e=n._convertSelectorsToArray(e.cascade);e&&e.map(function(e){var t=n._prop2attr(r);o[e]?o[e].push(t):o[e]=[t]})}(s[0],s[1])}}catch(e){r=!0,i=e}finally{try{!t&&a.return&&a.return()}finally{if(r)throw i}}return o}},{key:"create",value:function(e){e._createCache(),e._populateCache(e),e._validateProperties(),window.customElements.define(e.tag,e)}},{key:"_createCache",value:function(){this._cache={properties:{},globalProperties:{},componentProperties:{},cascadingProperties:{},attr2prop:{},prop2attr:{}}}},{key:"_setCache",value:function(e,t){this._cache[e]=t}},{key:"_getCache",value:function(e){return e?this._cache[e]:this._cache}},{key:"_populateCache",value:function(e){var t=l({},e.properties,p.properties);e._setCache("componentProperties",e.properties),e._setCache("globalProperties",p.properties),e._setCache("properties",t);var r,n={},o={};for(r in t){var i=this._convertPropNameToAttrName(r);o[n[r]=i]=r}e._setCache("attr2prop",o),e._setCache("prop2attr",n);t=this._parsePropertiesForCascade(t);Object.keys(t)&&e._setCache("cascadingProperties",t)}},{key:"allProperties",get:function(){return this._getCache("properties")}},{key:"cascadingProperties",get:function(){return this._getCache("cascadingProperties")}}]),p);function p(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},r=t.type,n=void 0===r?null:r,r=t.delayRender,t=void 0!==r&&r;o(this,p);r=u(this,(p.__proto__||Object.getPrototypeOf(p)).call(this));return r._pfeClass=e,r.tag=e.tag,r._parseObserver=r._parseObserver.bind(r),r.schemaProps=e.schemaProperties,r.slots=e.slots,r.template=document.createElement("template"),n&&r._pfeClass.allProperties.type&&(r._pfeClass.allProperties.type.default=n),r._initializeProperties(),r.attachShadow({mode:"open"}),t||r.render(),r}return function(e){r=e;var t=window.WebComponents,e=t&&window.WebComponents.ready;!t||e?n():window.addEventListener("WebComponentsReady",n)}(e.log),e});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).PFElement=t()}(this,function(){"use strict";var r=function(){return null};function n(){r("[reveal] web components ready"),r("[reveal] elements ready, revealing the body"),window.document.body.removeAttribute("unresolved")}Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{value:function(e,t){if(null==this)throw new TypeError('"this" is null or not defined');var r=Object(this),n=r.length>>>0;if(0==n)return!1;var o,i,t=0|t,a=Math.max(0<=t?t:n-Math.abs(t),0);for(;a<n;){if((o=r[a])===(i=e)||"number"==typeof o&&"number"==typeof i&&isNaN(o)&&isNaN(i))return!0;a++}return!1}}),Object.entries||(Object.entries=function(e){for(var t=Object.keys(e),r=t.length,n=new Array(r);r--;)n[r]=[t[r],e[t[r]]];return n});var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},e=function(e,t,r){return t&&i(e.prototype,t),r&&i(e,r),e};function i(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r,n=arguments[t];for(r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},h=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(n=(a=s.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&s.return&&s.return()}finally{if(o)throw i}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},f="pfe",e=(function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(p,HTMLElement),e(p,[{key:"log",value:function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];p.log("["+this.tag+(this.id?"#"+this.id:"")+"]: "+t.join(", "))}},{key:"warn",value:function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];p.warn("["+this.tag+(this.id?"#"+this.id:"")+"]: "+t.join(", "))}},{key:"error",value:function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];p.error.apply(p,["["+this.tag+(this.id?"#"+this.id:"")+"]:"].concat(t))}},{key:"hasLightDOM",value:function(){return this.children.length||this.textContent.trim().length}},{key:"hasSlot",value:function(t){var e=this;if(t)switch(void 0===t?"undefined":s(t)){case"string":return 0<[].concat(c(this.children)).filter(function(e){return e.hasAttribute("slot")&&e.getAttribute("slot")===t}).length;case"array":return t.reduce(function(t){return 0<[].concat(c(e.children)).filter(function(e){return e.hasAttribute("slot")&&e.getAttribute("slot")===t}).length});default:return void this.warn("Did not recognize the type of the name provided to hasSlot; this funciton can accept a string or an array.")}else this.warn("Please provide at least one slot name for which to search.")}},{key:"getSlot",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"unassigned";return"unassigned"!==t?[].concat(c(this.children)).filter(function(e){return e.hasAttribute("slot")&&e.getAttribute("slot")===t}):[].concat(c(this.children)).filter(function(e){return!e.hasAttribute("slot")})}},{key:"cssVariable",value:function(e,t){var r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:this;return e="--"!==e.substr(0,2)?"--"+e:e,t?(r.style.setProperty(e,t),t):window.getComputedStyle(r).getPropertyValue(e).trim()||null}},{key:"contextUpdate",value:function(){var t=this;[].concat(c(this.querySelectorAll("*")),c(this.shadowRoot.querySelectorAll("*"))).filter(function(e){return e.tagName.toLowerCase().slice(0,4)===f+"-"}).map(function(e){t.log("Update context of "+e.tag),Promise.all([customElements.whenDefined(e.tagName.toLowerCase())]).then(function(){e.resetContext(t.on)})})}},{key:"resetContext",value:function(e){this.log("Resetting context on "+this.tag);e=this.context||this.contextVariable||e;this.on=e}},{key:"version",get:function(){return this._pfeClass.version}},{key:"randomId",get:function(){return f+"-"+Math.random().toString(36).substr(2,9)}},{key:"contextVariable",set:function(e){this.cssVariable("context",e)},get:function(){return this.cssVariable("context")||this.cssVariable("theme")}}],[{key:"debugLog",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null;return p._debugLog=null!==e?!!e:p._debugLog}},{key:"log",value:function(){var e;p.debugLog()&&(e=console).log.apply(e,arguments)}},{key:"warn",value:function(){var e;(e=console).warn.apply(e,arguments)}},{key:"error",value:function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];throw new Error([].concat(t).join(" "))}},{key:"PfeTypes",get:function(){return{Container:"container",Content:"content",Combo:"combo"}}},{key:"version",get:function(){return"{{version}}"}},{key:"properties",get:function(){return{pfelement:{title:"Upgraded flag",type:Boolean,default:!0,observer:"_upgradeObserver"},on:{title:"Context",description:"Describes the visual context (backgrounds).",type:String,values:["light","dark","saturated"],default:function(e){return e.contextVariable},observer:"_onObserver"},context:{title:"Context hook",description:"Lets you override the system-set context.",type:String,values:["light","dark","saturated"],observer:"_contextObserver"},oldTheme:{type:String,values:["light","dark","saturated"],alias:"context",attr:"pfe-theme"},_style:{title:"Custom styles",type:String,attr:"style",observer:"_inlineStyleObserver"},type:{title:"Component type",type:String,values:["container","content","combo"]}}}},{key:"observedAttributes",get:function(){var t=this,r=this.allProperties;if(r){var e=Object.keys(r).filter(function(e){return r[e].observer||r[e].cascade||r[e].alias}).map(function(e){return t._convertPropNameToAttrName(e)});return[].concat(c(e))}}}]),e(p,[{key:"connectedCallback",value:function(){var e=this;this._initializeAttributeDefaults(),window.ShadyCSS&&window.ShadyCSS.styleElement(this),"object"===s(this.slots)&&(this._slotsObserver=new MutationObserver(function(){return e._initializeSlots(e.tag,e.slots)}),this._slotsObserver.observe(this,{childList:!0}),this._initializeSlots(this.tag,this.slots)),this._cascadeObserver&&this._cascadeObserver.observe(this,{attributes:!0,childList:!0,subtree:!0})}},{key:"disconnectedCallback",value:function(){this._cascadeObserver&&this._cascadeObserver.disconnect(),this._slotsObserver&&this._slotsObserver.disconnect()}},{key:"attributeChangedCallback",value:function(e,t,r){var n,o,i;this._pfeClass.allProperties&&(i=this._pfeClass._attr2prop(e),(n=this._pfeClass.allProperties[i])&&(n.alias&&(o=this._pfeClass.allProperties[n.alias],i=this._pfeClass._prop2attr(n.alias),this.getAttribute(i)!==r&&(this[n.alias]=this._castPropertyValue(o,r))),n.observer&&this[n.observer](this._castPropertyValue(n,t),this._castPropertyValue(n,r)),n.cascade&&this._copyAttribute(e,this._pfeClass._convertSelectorsToArray(n.cascade))))}},{key:"render",value:function(){this.shadowRoot.innerHTML="",this.template.innerHTML=this.html,window.ShadyCSS&&window.ShadyCSS.prepareTemplate(this.template,this.tag),this.shadowRoot.appendChild(this.template.content.cloneNode(!0)),this.log("render"),this.resetContext(),this._rendered=!0}},{key:"emitEvent",value:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},r=t.bubbles,n=void 0===r||r,o=t.cancelable,r=void 0!==o&&o,o=t.composed,o=void 0!==o&&o,t=t.detail,t=void 0===t?{}:t;this.log("Custom event: "+e),this.dispatchEvent(new CustomEvent(e,{bubbles:n,cancelable:r,composed:o,detail:t}))}},{key:"cascadeProperties",value:function(e){var r,t=this,n=this._pfeClass._getCache("cascadingProperties");n&&(window.ShadyCSS&&this._cascadeObserver&&this._cascadeObserver.disconnect(),r=Object.keys(n),e&&(r=[],[].concat(c(e)).forEach(function(t){Object.keys(n).map(function(e){t.matches&&t.matches(e)&&r.push(e)})})),r&&((e=r.filter(function(e){return e.slice(0,f.length+1)===f+"-"}).map(function(e){return customElements.whenDefined(e)}))?Promise.all(e).then(function(){t._copyAttributes(r,n)}):this._copyAttributes(r,n)),window.ShadyCSS&&this._cascadeObserver&&this._cascadeObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}))}},{key:"_upgradeObserver",value:function(){this.classList.add("PFElement")}},{key:"_contextObserver",value:function(e,t){t&&(e&&e!==t||!e)&&(this.on=t,this.cssVariable("context",t))}},{key:"_onObserver",value:function(e,t){(e&&e!==t||t&&!e)&&this.contextUpdate()}},{key:"_inlineStyleObserver",value:function(e,t){this.log("Style observer activated on "+this.tag);var r,t=/--(?:context|theme):\s*(?:\"*(light|dark|saturated)\"*)/gi.exec(t);t&&((r=t[1])===this.on||this.context||(this.on=r))}},{key:"_parseObserver",value:function(e){var t=!0,r=!1,n=void 0;try{for(var o=e[Symbol.iterator]();!(t=(i=o.next()).done);t=!0){var i=i.value;"childList"===i.type&&i.addedNodes.length&&this.cascadeProperties(i.addedNodes)}}catch(e){r=!0,n=e}finally{try{!t&&o.return&&o.return()}finally{if(r)throw n}}}},{key:"_castPropertyValue",value:function(e,t){var r;switch(e.type){case Number:return a(r={},t,Number(t)),a(r,"null",null),a(r,"NaN",NaN),a(r,"undefined",void 0),r[t];case Boolean:return null!==t;case String:return a(r={},t,t),a(r,"undefined",void 0),r[t];default:return t}}},{key:"_assignValueToAttribute",value:function(e,t,r){e.type===Boolean&&!r||null===r||void 0===r?this.removeAttribute(t):e.type===Boolean&&"boolean"==typeof r?this.setAttribute(t,""):(e.values&&this._validateAttributeValue(e,t,r),this.setAttribute(t,r))}},{key:"_initializeSlots",value:function(o,i){var a=this;this.log("Validate slots..."),window.ShadyCSS&&this._slotsObserver&&this._slotsObserver.disconnect(),Object.keys(i).forEach(function(e){var t,r,n=i[e];"object"===(void 0===n?"undefined":s(n))&&(t=!1,r=[],n.namedSlot?(0<(r=a.getSlot(o+"--"+e)).length&&(n.nodes=r,t=!0),0<(r=a.getSlot(""+e)).length&&(n.nodes=r,t=!0)):0<(r=[].concat(c(a.children)).filter(function(e){return!e.hasAttribute("slot")})).length&&(n.nodes=r,t=!0),t?a.setAttribute("has_"+e,""):a.removeAttribute("has_"+e))}),this.log("Slots validated."),window.ShadyCSS&&this._slotsObserver&&this._slotsObserver.observe(this,{childList:!0})}},{key:"_initializeProperties",value:function(){var e,n=this,o=this._pfeClass.allProperties,i=!1;for(e in o)!function(e){var t,r=o[e];void 0!==n[e]?n.log('Property "'+e+'" on '+n.constructor.name+" cannot be defined because the property name is reserved"):(t=n._pfeClass._prop2attr(e),r.cascade&&(i=!0),Object.defineProperty(n,e,{get:function(){var e=n.getAttribute(t);return n._castPropertyValue(r,e)},set:function(e){return n._assignValueToAttribute(r,t,e),e},writeable:!0,enumerable:!0,configurable:!1}))}(e);i&&(this._cascadeObserver=new MutationObserver(this._parseObserver))}},{key:"_initializeAttributeDefaults",value:function(){var e,t=this._pfeClass.allProperties;for(e in t){var r,n=t[e],o=this._pfeClass._prop2attr(e);n.hasOwnProperty("default")&&(r=n.default,"function"==typeof n.default&&(r=n.default(this)),this.hasAttribute(o)||this._assignValueToAttribute(n,o,r))}}},{key:"_validateAttributeValue",value:function(e,t,r){return Array.isArray(e.values)&&0<e.values.length&&!e.values.includes(r)&&this.warn(r+" is not a valid value for "+t+". Please provide one of the following values: "+e.values.join(", ")),r}},{key:"_copyAttributes",value:function(e,r){var n=this;e.forEach(function(t){r[t].forEach(function(e){n._copyAttribute(e,t)})})}},{key:"_copyAttribute",value:function(e,t){var r=[].concat(c(this.querySelectorAll(t)),c(this.shadowRoot.querySelectorAll(t))),n=this.getAttribute(e),o=null==n?"removeAttribute":"setAttribute",i=!0,a=!1,s=void 0;try{for(var l,u=r[Symbol.iterator]();!(i=(l=u.next()).done);i=!0)l.value[o](e,n)}catch(e){a=!0,s=e}finally{try{!i&&u.return&&u.return()}finally{if(a)throw s}}}}],[{key:"_validateProperties",value:function(){for(var e in this.allProperties){var t=this.allProperties[e];[String,Number,Boolean].includes(t.type||String)||this.error('Property "'+e+'" on '+this.name+" must have type String, Number, or Boolean."),/^[a-z_]/.test(e)||this.error("Property "+this.name+"."+e+" defined, but prop names must begin with a lower-case letter or an underscore");var r="function"==typeof t.default;!t.default||(n=t).hasOwnProperty("default")&&n.default.constructor===n.type||r||this.error("["+this.name+"] The default value `"+t.default+"` does not match the assigned type "+t.type.name+" for the '"+e+"' property")}var n}},{key:"_prop2attr",value:function(e){return this._getCache("prop2attr")[e]}},{key:"_attr2prop",value:function(e){return this._getCache("attr2prop")[e]}},{key:"_convertPropNameToAttrName",value:function(e){var t=this.allProperties[e];return t.attr||e.replace(/^_/,"").replace(/^[A-Z]/,function(e){return e.toLowerCase()}).replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()})}},{key:"_convertAttrNameToPropName",value:function(e){for(var t in this.allProperties)if(this.allProperties[t].attr===e)return t;return e.replace(/-([A-Za-z])/g,function(e){return e[1].toUpperCase()})}},{key:"_convertSelectorsToArray",value:function(e){if(e){if("string"==typeof e)return e.split(",");if("array"==typeof e||"object"===(void 0===e?"undefined":s(e)))return e;this.warn("selectors should be provided as a string, array, or object; received: "+(void 0===e?"undefined":s(e))+".")}}},{key:"_parsePropertiesForCascade",value:function(e){var n=this,o={},t=!0,r=!1,i=void 0;try{for(var a=Object.entries(e)[Symbol.iterator]();!(t=(s=a.next()).done);t=!0){var s=s.value,s=h(s,2);!function(r,e){(e=n._convertSelectorsToArray(e.cascade))&&e.map(function(e){var t=n._prop2attr(r);o[e]?o[e].push(t):o[e]=[t]})}(s[0],s[1])}}catch(e){r=!0,i=e}finally{try{!t&&a.return&&a.return()}finally{if(r)throw i}}return o}},{key:"create",value:function(e){e._createCache(),e._populateCache(e),e._validateProperties(),window.customElements.define(e.tag,e)}},{key:"_createCache",value:function(){this._cache={properties:{},globalProperties:{},componentProperties:{},cascadingProperties:{},attr2prop:{},prop2attr:{}}}},{key:"_setCache",value:function(e,t){this._cache[e]=t}},{key:"_getCache",value:function(e){return e?this._cache[e]:this._cache}},{key:"_populateCache",value:function(e){var t=l({},e.properties,p.properties);e._setCache("componentProperties",e.properties),e._setCache("globalProperties",p.properties),e._setCache("properties",t);var r,n={},o={};for(r in t){var i=this._convertPropNameToAttrName(r);o[n[r]=i]=r}e._setCache("attr2prop",o),e._setCache("prop2attr",n);t=this._parsePropertiesForCascade(t);Object.keys(t)&&e._setCache("cascadingProperties",t)}},{key:"allProperties",get:function(){return this._getCache("properties")}},{key:"cascadingProperties",get:function(){return this._getCache("cascadingProperties")}}]),p);function p(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},r=t.type,n=void 0===r?null:r,r=t.delayRender,t=void 0!==r&&r;o(this,p);r=u(this,(p.__proto__||Object.getPrototypeOf(p)).call(this));return r._pfeClass=e,r.tag=e.tag,r._parseObserver=r._parseObserver.bind(r),r.schemaProps=e.schemaProperties,r.slots=e.slots,r.template=document.createElement("template"),n&&r._pfeClass.allProperties.type&&(r._pfeClass.allProperties.type.default=n),r._initializeProperties(),r.attachShadow({mode:"open"}),r._rendered=!1,t||r.render(),r}return function(e){r=e;var t=window.WebComponents,e=t&&window.WebComponents.ready;!t||e?n():window.addEventListener("WebComponentsReady",n)}(e.log),e});
 //# sourceMappingURL=pfelement.umd.min.js.map

package.json

@@ -13,3 +13,3 @@ {
   },
-  "version": "1.1.1",
+  "version": "1.2.0",
   "publishConfig": {
@@ -28,2 +28,11 @@ "access": "public"
   },
+  "engines": {
+    "node": ">=10 <13"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "Firefox >= 78",
+    "iOS >= 8",
+    "ie 11"
+  ],
   "main": "./dist/pfelement.umd.js",
@@ -60,3 +69,3 @@ "module": "./dist/pfelement.js",
   },
-  "gitHead": "b9507e719b7c4e4ee3311eeebcee447adc4d5bf9"
+  "gitHead": "db67dc4ce94b993024e4f8125f1bd4abfbd763f4"
 }

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

351266

increased by0.09%

Lines of code

2388

increased by0.34%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes