@patternfly/pfelement - npm Package Compare versions

Comparing version 1.0.0-prerelease.28 to 1.0.0-prerelease.31

dist/pfelement.js

@@ -31,3 +31,3 @@ let logger = () => null;
 /*!
- * PatternFly Elements: PFElement 1.0.0-prerelease.28
+ * PatternFly Elements: PFElement 1.0.0-prerelease.31
  * @license
@@ -86,4 +86,8 @@ * Copyright 2019 Red Hat, Inc.
   }
+
+  static get observedAttributes() {
+    return ["pfe-theme"];
+  }
   
-  static get randomId() {
+  get randomId() {
     return Math.random().toString(36).substr(2, 9);
@@ -104,2 +108,10 @@ }
 
+  cssVariable( name, value, element = this ) {
+    name = (name.substr(0, 2) !== "--") ? "--" + name : name;
+    if (value) {
+      element.style.setProperty(name, value);
+    }
+    return window.getComputedStyle(element).getPropertyValue(name).trim();
+  }
+
   // Returns a single element assigned to that slot; if multiple, it returns the first
@@ -115,2 +127,42 @@ has_slot(name) {
 
+  // Update the theme context for self and children
+  context_update() {
+    const children = this.querySelectorAll("[pfelement]");
+    let theme = this.cssVariable("theme");
+    
+    // Manually adding `pfe-theme` overrides the css variable
+    if (this.hasAttribute("pfe-theme")) {
+      theme = this.getAttribute("pfe-theme");
+      // Update the css variable to match the data attribute
+      this.cssVariable("theme", theme);
+    }
+    
+    // Update theme for self
+    this.context_set(theme);
+
+    // For each nested, already upgraded component
+    // set the context based on the child's value of --theme
+    // Note: this prevents contexts from parents overriding
+    // the child's context should it exist
+    [...children].map(child => {
+      if (child.connected) {
+        child.context_set(theme);
+      }
+    });
+  }
+
+  // Get the theme variable if it exists, set it as an attribute
+  context_set(fallback) {
+    let theme = this.cssVariable("theme");
+    if (!theme) {
+      theme = this.getAttribute("pfe-theme");
+    }
+    if (!theme && fallback) {
+      theme = fallback;
+    }
+    if (theme) {
+      this.setAttribute("on", theme);
+    }
+  }
+
   constructor(pfeClass, { type = null, delayRender = false } = {}) {
@@ -179,2 +231,7 @@ super();
 
+    // Initialize the on attribute if a theme variable is set
+    // do not update the on attribute if a user has manually added it
+    // then trigger an update in nested components
+    this.context_update();
+
     this.log(`Connected.`);
@@ -200,2 +257,6 @@ }
     }
+
+    if (attr === "pfe-theme") {
+      this.context_update();
+    }
   }
@@ -202,0 +263,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")}
 /*!
- * PatternFly Elements: PFElement 1.0.0-prerelease.28
+ * PatternFly Elements: PFElement 1.0.0-prerelease.31
  * @license
@@ -25,3 +25,3 @@ * Copyright 2019 Red Hat, Inc.
  * 
-*/const s="pfe-";class o extends HTMLElement{static create(t){window.customElements.define(t.tag,t)}static debugLog(t=null){return null!==t&&(o._debugLog=!!t),o._debugLog}static log(...t){o.debugLog()&&console.log(...t)}static get PfeTypes(){return{Container:"container",Content:"content",Combo:"combo"}}static get version(){return"{{version}}"}static get randomId(){return Math.random().toString(36).substr(2,9)}get version(){return this._pfeClass.version}get pfeType(){return this.getAttribute(`${s}type`)}set pfeType(t){this.setAttribute(`${s}type`,t)}has_slot(t){return this.querySelector(`[slot='${t}']`)}has_slots(t){return[...this.querySelectorAll(`[slot='${t}']`)]}constructor(t,{type:e=null,delayRender:s=!1}={}){super(),this.connected=!1,this._pfeClass=t,this.tag=t.tag,this.props=t.properties,this.slots=t.slots,this._queue=[],this.template=document.createElement("template"),this.log("Constructing..."),this.attachShadow({mode:"open"}),e&&this._queueAction({type:"setProperty",data:{name:"pfeType",value:e}}),s||(this.log("Render..."),this.render(),this.log("Rendered.")),this.log("Constructed.")}connectedCallback(){this.connected=!0,this.log("Connecting..."),window.ShadyCSS&&(this.log("Styling..."),window.ShadyCSS.styleElement(this),this.log("Styled.")),this.classList.add("PFElement"),this.setAttribute("pfelement",""),"object"==typeof this.props&&(this._mapSchemaToProperties(this.tag,this.props),this.log("Properties attached.")),"object"==typeof this.slots&&(this._mapSchemaToSlots(this.tag,this.slots),this.log("Slots attached.")),this._queue.length&&this._processQueue(),this.log("Connected.")}disconnectedCallback(){this.log("Disconnecting..."),this.connected=!1,this.log("Disconnected.")}attributeChangedCallback(t,e,s){if(!this._pfeClass.cascadingAttributes)return;const o=this._pfeClass.cascadingAttributes[t];o&&this._copyAttribute(t,o)}_copyAttribute(t,e){const s=[...this.querySelectorAll(e),...this.shadowRoot.querySelectorAll(e)],o=this.getAttribute(t),i=null==o?"removeAttribute":"setAttribute";for(const e of s)e[i](t,o)}_mapSchemaToProperties(t,e){this.log("Mapping properties..."),Object.keys(e).forEach(o=>{let i=e[o];if("object"==typeof i){let e=!0,n=o;if(this[o]=i,this[o].value=null,void 0!==this[o].prefixed&&(e=this[o].prefixed),e&&(n=`${s}${o}`),this.hasAttribute(n))this[o].value=this.getAttribute(n);else if(i.default){const e=this._hasDependency(t,i.options),s=!i.options||i.options&&!i.options.dependencies.length;(e||s)&&(this.setAttribute(n,i.default),this[o].value=i.default)}}}),this.log("Properties mapped.")}_hasDependency(t,e){let o=e?e.dependencies:[],i=!1;for(let e=0;e<o.length;e+=1){const n="slot"===o[e].type&&this.has_slots(`${t}--${o[e].id}`).length>0,l="attribute"===o[e].type&&this.getAttribute(`${s}${o[e].id}`);if(n||l){i=!0;break}}return i}_mapSchemaToSlots(t,e){this.log("Validate slots..."),Object.keys(e).forEach(s=>{let o=e[s];if("object"==typeof o){let e=!1,i=[];o.namedSlot?((i=this.has_slots(`${t}--${s}`)).length>0&&(o.nodes=i,e=!0),(i=this.has_slots(`${s}`)).length>0&&(o.nodes=i,e=!0)):(i=[...this.children].filter(t=>!t.hasAttribute("slot"))).length>0&&(o.nodes=i,e=!0),e?this.setAttribute(`has_${s}`,""):this.removeAttribute(`has_${s}`)}}),this.log("Slots validated.")}_queueAction(t){this._queue.push(t)}_processQueue(){this._queue.forEach(t=>{this[`_${t.type}`](t.data)}),this._queue=[]}_setProperty({name:t,value:e}){this[t]=e}static var(t,e=document.body){return window.getComputedStyle(e).getPropertyValue(t).trim()}var(t){return o.var(t,this)}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))}log(...t){o.log(`[${this.tag}]`,...t)}}!function(s){t=s;const o=window.WebComponents,i=o&&window.WebComponents.ready;!o||i?e():window.addEventListener("WebComponentsReady",e)}(o.log);export default o;
+*/const s="pfe-";class i extends HTMLElement{static create(t){window.customElements.define(t.tag,t)}static debugLog(t=null){return null!==t&&(i._debugLog=!!t),i._debugLog}static log(...t){i.debugLog()&&console.log(...t)}static get PfeTypes(){return{Container:"container",Content:"content",Combo:"combo"}}static get version(){return"{{version}}"}static get observedAttributes(){return["pfe-theme"]}get randomId(){return Math.random().toString(36).substr(2,9)}get version(){return this._pfeClass.version}get pfeType(){return this.getAttribute(`${s}type`)}set pfeType(t){this.setAttribute(`${s}type`,t)}cssVariable(t,e,s=this){return t="--"!==t.substr(0,2)?"--"+t:t,e&&s.style.setProperty(t,e),window.getComputedStyle(s).getPropertyValue(t).trim()}has_slot(t){return this.querySelector(`[slot='${t}']`)}has_slots(t){return[...this.querySelectorAll(`[slot='${t}']`)]}context_update(){const t=this.querySelectorAll("[pfelement]");let e=this.cssVariable("theme");this.hasAttribute("pfe-theme")&&(e=this.getAttribute("pfe-theme"),this.cssVariable("theme",e)),this.context_set(e),[...t].map(t=>{t.connected&&t.context_set(e)})}context_set(t){let e=this.cssVariable("theme");e||(e=this.getAttribute("pfe-theme")),!e&&t&&(e=t),e&&this.setAttribute("on",e)}constructor(t,{type:e=null,delayRender:s=!1}={}){super(),this.connected=!1,this._pfeClass=t,this.tag=t.tag,this.props=t.properties,this.slots=t.slots,this._queue=[],this.template=document.createElement("template"),this.log("Constructing..."),this.attachShadow({mode:"open"}),e&&this._queueAction({type:"setProperty",data:{name:"pfeType",value:e}}),s||(this.log("Render..."),this.render(),this.log("Rendered.")),this.log("Constructed.")}connectedCallback(){this.connected=!0,this.log("Connecting..."),window.ShadyCSS&&(this.log("Styling..."),window.ShadyCSS.styleElement(this),this.log("Styled.")),this.classList.add("PFElement"),this.setAttribute("pfelement",""),"object"==typeof this.props&&(this._mapSchemaToProperties(this.tag,this.props),this.log("Properties attached.")),"object"==typeof this.slots&&(this._mapSchemaToSlots(this.tag,this.slots),this.log("Slots attached.")),this._queue.length&&this._processQueue(),this.context_update(),this.log("Connected.")}disconnectedCallback(){this.log("Disconnecting..."),this.connected=!1,this.log("Disconnected.")}attributeChangedCallback(t,e,s){if(!this._pfeClass.cascadingAttributes)return;const i=this._pfeClass.cascadingAttributes[t];i&&this._copyAttribute(t,i),"pfe-theme"===t&&this.context_update()}_copyAttribute(t,e){const s=[...this.querySelectorAll(e),...this.shadowRoot.querySelectorAll(e)],i=this.getAttribute(t),o=null==i?"removeAttribute":"setAttribute";for(const e of s)e[o](t,i)}_mapSchemaToProperties(t,e){this.log("Mapping properties..."),Object.keys(e).forEach(i=>{let o=e[i];if("object"==typeof o){let e=!0,n=i;if(this[i]=o,this[i].value=null,void 0!==this[i].prefixed&&(e=this[i].prefixed),e&&(n=`${s}${i}`),this.hasAttribute(n))this[i].value=this.getAttribute(n);else if(o.default){const e=this._hasDependency(t,o.options),s=!o.options||o.options&&!o.options.dependencies.length;(e||s)&&(this.setAttribute(n,o.default),this[i].value=o.default)}}}),this.log("Properties mapped.")}_hasDependency(t,e){let i=e?e.dependencies:[],o=!1;for(let e=0;e<i.length;e+=1){const n="slot"===i[e].type&&this.has_slots(`${t}--${i[e].id}`).length>0,r="attribute"===i[e].type&&this.getAttribute(`${s}${i[e].id}`);if(n||r){o=!0;break}}return o}_mapSchemaToSlots(t,e){this.log("Validate slots..."),Object.keys(e).forEach(s=>{let i=e[s];if("object"==typeof i){let e=!1,o=[];i.namedSlot?((o=this.has_slots(`${t}--${s}`)).length>0&&(i.nodes=o,e=!0),(o=this.has_slots(`${s}`)).length>0&&(i.nodes=o,e=!0)):(o=[...this.children].filter(t=>!t.hasAttribute("slot"))).length>0&&(i.nodes=o,e=!0),e?this.setAttribute(`has_${s}`,""):this.removeAttribute(`has_${s}`)}}),this.log("Slots validated.")}_queueAction(t){this._queue.push(t)}_processQueue(){this._queue.forEach(t=>{this[`_${t.type}`](t.data)}),this._queue=[]}_setProperty({name:t,value:e}){this[t]=e}static var(t,e=document.body){return window.getComputedStyle(e).getPropertyValue(t).trim()}var(t){return i.var(t,this)}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))}log(...t){i.log(`[${this.tag}]`,...t)}}!function(s){t=s;const i=window.WebComponents,o=i&&window.WebComponents.ready;!i||o?e():window.addEventListener("WebComponentsReady",e)}(i.log);export default i;
 //# sourceMappingURL=pfelement.min.js.map

dist/pfelement.umd.js

@@ -103,3 +103,3 @@ (function (global, factory) {
   /*!
-   * PatternFly Elements: PFElement 1.0.0-prerelease.28
+   * PatternFly Elements: PFElement 1.0.0-prerelease.31
    * @license
@@ -132,6 +132,17 @@ * Copyright 2019 Red Hat, Inc.
     createClass(PFElement, [{
-      key: "has_slot",
+      key: "cssVariable",
+      value: function cssVariable(name, value) {
+        var element = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this;
 
+        name = name.substr(0, 2) !== "--" ? "--" + name : name;
+        if (value) {
+          element.style.setProperty(name, value);
+        }
+        return window.getComputedStyle(element).getPropertyValue(name).trim();
+      }
 
       // Returns a single element assigned to that slot; if multiple, it returns the first
+
+    }, {
+      key: "has_slot",
       value: function has_slot(name) {
@@ -148,3 +159,54 @@ return this.querySelector("[slot='" + name + "']");
       }
+
+      // Update the theme context for self and children
+
     }, {
+      key: "context_update",
+      value: function context_update() {
+        var children = this.querySelectorAll("[pfelement]");
+        var theme = this.cssVariable("theme");
+
+        // Manually adding `pfe-theme` overrides the css variable
+        if (this.hasAttribute("pfe-theme")) {
+          theme = this.getAttribute("pfe-theme");
+          // Update the css variable to match the data attribute
+          this.cssVariable("theme", theme);
+        }
+
+        // Update theme for self
+        this.context_set(theme);
+
+        // For each nested, already upgraded component
+        // set the context based on the child's value of --theme
+        // Note: this prevents contexts from parents overriding
+        // the child's context should it exist
+        [].concat(toConsumableArray(children)).map(function (child) {
+          if (child.connected) {
+            child.context_set(theme);
+          }
+        });
+      }
+
+      // Get the theme variable if it exists, set it as an attribute
+
+    }, {
+      key: "context_set",
+      value: function context_set(fallback) {
+        var theme = this.cssVariable("theme");
+        if (!theme) {
+          theme = this.getAttribute("pfe-theme");
+        }
+        if (!theme && fallback) {
+          theme = fallback;
+        }
+        if (theme) {
+          this.setAttribute("on", theme);
+        }
+      }
+    }, {
+      key: "randomId",
+      get: function get$$1() {
+        return Math.random().toString(36).substr(2, 9);
+      }
+    }, {
       key: "version",
@@ -201,5 +263,5 @@ get: function get$$1() {
     }, {
-      key: "randomId",
+      key: "observedAttributes",
       get: function get$$1() {
-        return Math.random().toString(36).substr(2, 9);
+        return ["pfe-theme"];
       }
@@ -282,2 +344,7 @@ }]);
 
+        // Initialize the on attribute if a theme variable is set
+        // do not update the on attribute if a user has manually added it
+        // then trigger an update in nested components
+        this.context_update();
+
         this.log("Connected.");
@@ -305,2 +372,6 @@ }
         }
+
+        if (attr === "pfe-theme") {
+          this.context_update();
+        }
       }
@@ -307,0 +378,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.PFElement=t()}(this,function(){"use strict";var o=function(){return null};function r(){o("[reveal] web components ready"),o("[reveal] elements ready, revealing the body"),window.document.body.removeAttribute("unresolved")}var u="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},e=function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e};function i(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function c(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}var h="pfe-",t=(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)}(s,HTMLElement),e(s,[{key:"has_slot",value:function(e){return this.querySelector("[slot='"+e+"']")}},{key:"has_slots",value:function(e){return[].concat(c(this.querySelectorAll("[slot='"+e+"']")))}},{key:"version",get:function(){return this._pfeClass.version}},{key:"pfeType",get:function(){return this.getAttribute(h+"type")},set:function(e){this.setAttribute(h+"type",e)}}],[{key:"create",value:function(e){window.customElements.define(e.tag,e)}},{key:"debugLog",value:function(e){var t=0<arguments.length&&void 0!==e?e:null;return null!==t&&(s._debugLog=!!t),s._debugLog}},{key:"log",value:function(){var e;s.debugLog()&&(e=console).log.apply(e,arguments)}},{key:"PfeTypes",get:function(){return{Container:"container",Content:"content",Combo:"combo"}}},{key:"version",get:function(){return"{{version}}"}},{key:"randomId",get:function(){return Math.random().toString(36).substr(2,9)}}]),e(s,[{key:"connectedCallback",value:function(){this.connected=!0,this.log("Connecting..."),window.ShadyCSS&&(this.log("Styling..."),window.ShadyCSS.styleElement(this),this.log("Styled.")),this.classList.add("PFElement"),this.setAttribute("pfelement",""),"object"===u(this.props)&&(this._mapSchemaToProperties(this.tag,this.props),this.log("Properties attached.")),"object"===u(this.slots)&&(this._mapSchemaToSlots(this.tag,this.slots),this.log("Slots attached.")),this._queue.length&&this._processQueue(),this.log("Connected.")}},{key:"disconnectedCallback",value:function(){this.log("Disconnecting..."),this.connected=!1,this.log("Disconnected.")}},{key:"attributeChangedCallback",value:function(e,t,n){if(this._pfeClass.cascadingAttributes){var o=this._pfeClass.cascadingAttributes[e];o&&this._copyAttribute(e,o)}}},{key:"_copyAttribute",value:function(e,t){var n=[].concat(c(this.querySelectorAll(t)),c(this.shadowRoot.querySelectorAll(t))),o=this.getAttribute(e),r=null==o?"removeAttribute":"setAttribute",i=!0,a=!1,s=void 0;try{for(var l,u=n[Symbol.iterator]();!(i=(l=u.next()).done);i=!0)l.value[r](e,o)}catch(e){a=!0,s=e}finally{try{!i&&u.return&&u.return()}finally{if(a)throw s}}}},{key:"_mapSchemaToProperties",value:function(a,s){var l=this;this.log("Mapping properties..."),Object.keys(s).forEach(function(e){var t=s[e];if("object"===(void 0===t?"undefined":u(t))){var n=!0,o=e;if(l[e]=t,l[e].value=null,void 0!==l[e].prefixed&&(n=l[e].prefixed),n&&(o=h+e),l.hasAttribute(o))l[e].value=l.getAttribute(o);else if(t.default){var r=l._hasDependency(a,t.options),i=!t.options||t.options&&!t.options.dependencies.length;(r||i)&&(l.setAttribute(o,t.default),l[e].value=t.default)}}}),this.log("Properties mapped.")}},{key:"_hasDependency",value:function(e,t){for(var n=t?t.dependencies:[],o=!1,r=0;r<n.length;r+=1){var i="slot"===n[r].type&&0<this.has_slots(e+"--"+n[r].id).length,a="attribute"===n[r].type&&this.getAttribute(h+n[r].id);if(i||a){o=!0;break}}return o}},{key:"_mapSchemaToSlots",value:function(r,i){var a=this;this.log("Validate slots..."),Object.keys(i).forEach(function(e){var t=i[e];if("object"===(void 0===t?"undefined":u(t))){var n=!1,o=[];t.namedSlot?(0<(o=a.has_slots(r+"--"+e)).length&&(t.nodes=o,n=!0),0<(o=a.has_slots(""+e)).length&&(t.nodes=o,n=!0)):0<(o=[].concat(c(a.children)).filter(function(e){return!e.hasAttribute("slot")})).length&&(t.nodes=o,n=!0),n?a.setAttribute("has_"+e,""):a.removeAttribute("has_"+e)}}),this.log("Slots validated.")}},{key:"_queueAction",value:function(e){this._queue.push(e)}},{key:"_processQueue",value:function(){var t=this;this._queue.forEach(function(e){t["_"+e.type](e.data)}),this._queue=[]}},{key:"_setProperty",value:function(e){var t=e.name,n=e.value;this[t]=n}},{key:"var",value:function(e){return s.var(e,this)}},{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))}},{key:"log",value:function(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];s.log.apply(s,["["+this.tag+"]"].concat(t))}}],[{key:"var",value:function(e,t){var n=1<arguments.length&&void 0!==t?t:document.body;return window.getComputedStyle(n).getPropertyValue(e).trim()}}]),s);function s(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},n=t.type,o=void 0===n?null:n,r=t.delayRender,i=void 0!==r&&r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s);var a=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}(this,(s.__proto__||Object.getPrototypeOf(s)).call(this));return a.connected=!1,a._pfeClass=e,a.tag=e.tag,a.props=e.properties,a.slots=e.slots,a._queue=[],a.template=document.createElement("template"),a.log("Constructing..."),a.attachShadow({mode:"open"}),o&&a._queueAction({type:"setProperty",data:{name:"pfeType",value:o}}),i||(a.log("Render..."),a.render(),a.log("Rendered.")),a.log("Constructed."),a}return function(e){o=e;var t=window.WebComponents,n=t&&window.WebComponents.ready;!t||n?r():window.addEventListener("WebComponentsReady",r)}(t.log),t});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.PFElement=t()}(this,function(){"use strict";var o=function(){return null};function r(){o("[reveal] web components ready"),o("[reveal] elements ready, revealing the body"),window.document.body.removeAttribute("unresolved")}var l="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},e=function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e};function i(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function c(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}var h="pfe-",t=(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)}(a,HTMLElement),e(a,[{key:"cssVariable",value:function(e,t,n){var o=2<arguments.length&&void 0!==n?n:this;return e="--"!==e.substr(0,2)?"--"+e:e,t&&o.style.setProperty(e,t),window.getComputedStyle(o).getPropertyValue(e).trim()}},{key:"has_slot",value:function(e){return this.querySelector("[slot='"+e+"']")}},{key:"has_slots",value:function(e){return[].concat(c(this.querySelectorAll("[slot='"+e+"']")))}},{key:"context_update",value:function(){var e=this.querySelectorAll("[pfelement]"),t=this.cssVariable("theme");this.hasAttribute("pfe-theme")&&(t=this.getAttribute("pfe-theme"),this.cssVariable("theme",t)),this.context_set(t),[].concat(c(e)).map(function(e){e.connected&&e.context_set(t)})}},{key:"context_set",value:function(e){var t=this.cssVariable("theme");!(t=t||this.getAttribute("pfe-theme"))&&e&&(t=e),t&&this.setAttribute("on",t)}},{key:"randomId",get:function(){return Math.random().toString(36).substr(2,9)}},{key:"version",get:function(){return this._pfeClass.version}},{key:"pfeType",get:function(){return this.getAttribute(h+"type")},set:function(e){this.setAttribute(h+"type",e)}}],[{key:"create",value:function(e){window.customElements.define(e.tag,e)}},{key:"debugLog",value:function(e){var t=0<arguments.length&&void 0!==e?e:null;return null!==t&&(a._debugLog=!!t),a._debugLog}},{key:"log",value:function(){var e;a.debugLog()&&(e=console).log.apply(e,arguments)}},{key:"PfeTypes",get:function(){return{Container:"container",Content:"content",Combo:"combo"}}},{key:"version",get:function(){return"{{version}}"}},{key:"observedAttributes",get:function(){return["pfe-theme"]}}]),e(a,[{key:"connectedCallback",value:function(){this.connected=!0,this.log("Connecting..."),window.ShadyCSS&&(this.log("Styling..."),window.ShadyCSS.styleElement(this),this.log("Styled.")),this.classList.add("PFElement"),this.setAttribute("pfelement",""),"object"===l(this.props)&&(this._mapSchemaToProperties(this.tag,this.props),this.log("Properties attached.")),"object"===l(this.slots)&&(this._mapSchemaToSlots(this.tag,this.slots),this.log("Slots attached.")),this._queue.length&&this._processQueue(),this.context_update(),this.log("Connected.")}},{key:"disconnectedCallback",value:function(){this.log("Disconnecting..."),this.connected=!1,this.log("Disconnected.")}},{key:"attributeChangedCallback",value:function(e,t,n){if(this._pfeClass.cascadingAttributes){var o=this._pfeClass.cascadingAttributes[e];o&&this._copyAttribute(e,o),"pfe-theme"===e&&this.context_update()}}},{key:"_copyAttribute",value:function(e,t){var n=[].concat(c(this.querySelectorAll(t)),c(this.shadowRoot.querySelectorAll(t))),o=this.getAttribute(e),r=null==o?"removeAttribute":"setAttribute",i=!0,s=!1,a=void 0;try{for(var u,l=n[Symbol.iterator]();!(i=(u=l.next()).done);i=!0)u.value[r](e,o)}catch(e){s=!0,a=e}finally{try{!i&&l.return&&l.return()}finally{if(s)throw a}}}},{key:"_mapSchemaToProperties",value:function(s,a){var u=this;this.log("Mapping properties..."),Object.keys(a).forEach(function(e){var t=a[e];if("object"===(void 0===t?"undefined":l(t))){var n=!0,o=e;if(u[e]=t,u[e].value=null,void 0!==u[e].prefixed&&(n=u[e].prefixed),n&&(o=h+e),u.hasAttribute(o))u[e].value=u.getAttribute(o);else if(t.default){var r=u._hasDependency(s,t.options),i=!t.options||t.options&&!t.options.dependencies.length;(r||i)&&(u.setAttribute(o,t.default),u[e].value=t.default)}}}),this.log("Properties mapped.")}},{key:"_hasDependency",value:function(e,t){for(var n=t?t.dependencies:[],o=!1,r=0;r<n.length;r+=1){var i="slot"===n[r].type&&0<this.has_slots(e+"--"+n[r].id).length,s="attribute"===n[r].type&&this.getAttribute(h+n[r].id);if(i||s){o=!0;break}}return o}},{key:"_mapSchemaToSlots",value:function(r,i){var s=this;this.log("Validate slots..."),Object.keys(i).forEach(function(e){var t=i[e];if("object"===(void 0===t?"undefined":l(t))){var n=!1,o=[];t.namedSlot?(0<(o=s.has_slots(r+"--"+e)).length&&(t.nodes=o,n=!0),0<(o=s.has_slots(""+e)).length&&(t.nodes=o,n=!0)):0<(o=[].concat(c(s.children)).filter(function(e){return!e.hasAttribute("slot")})).length&&(t.nodes=o,n=!0),n?s.setAttribute("has_"+e,""):s.removeAttribute("has_"+e)}}),this.log("Slots validated.")}},{key:"_queueAction",value:function(e){this._queue.push(e)}},{key:"_processQueue",value:function(){var t=this;this._queue.forEach(function(e){t["_"+e.type](e.data)}),this._queue=[]}},{key:"_setProperty",value:function(e){var t=e.name,n=e.value;this[t]=n}},{key:"var",value:function(e){return a.var(e,this)}},{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))}},{key:"log",value:function(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];a.log.apply(a,["["+this.tag+"]"].concat(t))}}],[{key:"var",value:function(e,t){var n=1<arguments.length&&void 0!==t?t:document.body;return window.getComputedStyle(n).getPropertyValue(e).trim()}}]),a);function a(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},n=t.type,o=void 0===n?null:n,r=t.delayRender,i=void 0!==r&&r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a);var s=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}(this,(a.__proto__||Object.getPrototypeOf(a)).call(this));return s.connected=!1,s._pfeClass=e,s.tag=e.tag,s.props=e.properties,s.slots=e.slots,s._queue=[],s.template=document.createElement("template"),s.log("Constructing..."),s.attachShadow({mode:"open"}),o&&s._queueAction({type:"setProperty",data:{name:"pfeType",value:o}}),i||(s.log("Render..."),s.render(),s.log("Rendered.")),s.log("Constructed."),s}return function(e){o=e;var t=window.WebComponents,n=t&&window.WebComponents.ready;!t||n?r():window.addEventListener("WebComponentsReady",r)}(t.log),t});
 //# sourceMappingURL=pfelement.umd.min.js.map

package.json

@@ -11,3 +11,3 @@ {
   },
-  "version": "1.0.0-prerelease.28",
+  "version": "1.0.0-prerelease.31",
   "publishConfig": {
@@ -56,3 +56,3 @@ "access": "public"
   },
-  "gitHead": "85dcba0573380e525a479c779c7f1b2b7343164b"
+  "gitHead": "e096af5ec20ebe8d07d42b0a10c0d9ff6f95586e"
 }

README.md

@@ -50,2 +50,80 @@ # PFElement Element
 
+## Tooling / functions
+
+The base class has a set of tools available for use inside all web components extending it.
+
+### Types
+
+Define the type of your web component by extending the PfeTypes getter.  A component can be classified as container, content, or combo.  These are defined in more detail in the documentation.
+
+```
+  // Declare the type of this component
+  static get PfeType() {
+    return PFElement.PfeTypes.Container;
+  }
+```
+
+### Theme
+
+All components automatically observe and react to the attribute `pfe-theme` which can equal 1 of 3 possible contexts:
+
+- `light`
+- `dark`
+- `saturated`
+
+Theme context is automatically passed down from parent components to their children (often being defined by container elements and observed and acted upon by content components) without manual intervention by a developer.
+
+Adding the `pfe-theme` attribute to any component will **break that inheritance** and manually invoke your preferred theme.  This is a way to **opt-out** of the contexts provided by parent elements.  Only add this attribute if you want to walk away from inherited theme.
+
+### Random ID
+
+Need to set a random ID on any part of your web component?  Use the randomId getter:
+
+```
+  this.newId = this.randomId;
+```
+
+### CSS Variables
+
+You can query for or set the value of a CSS variable using the `cssVariable` function.  It has 3 possible inputs:
+
+1) `name`: The name of the CSS variable you are querying for (you can omit the `--` at the beginning).
+2) `value`: This input is _optional_.  By passing in a value to the function, you are opting to set the variable name you provided equal to the value you have passed in.
+3) `element`: This defaults to the `this` context of the web component calling the function but you can pass in any element. This is useful if you want to attach a specific CSS Variable to a shadow element in your template for example.
+
+Querying for a variable's value:
+```
+this.cssVariable("pfe-cta--Color");
+```
+
+Setting a value for a variable:
+```
+this.cssVariable("pfe-cta--Color", "#333");
+```
+
+Setting a value for a variable on a template element:
+```
+this.cssVariable("pfe-cta--Color", "#333", this.shadowRoot.querySelector(".pfe-cta--arrow"));
+```
+
+### Querying for a slot(s)
+
+There are 2 functions, `has_slot` and `has_slots` which allow you to query for the existence of a slot in the light DOM. These are useful in the templates as a means of avoiding printing empty slots or wrappers.
+
+- `has_slot`: Accepts the name of the slot you are querying for (does not work for default slots yet) and returns a NodeElement of that slot if it exists and null if it does not.
+
+- `has_slots`: Accepts the name of the slot you are querying for (does not work for default slots yet) and returns a NodeList of all elements assigned to that slot, if they exist, and null if they do not.
+
+### Context set and update
+
+There are 2 functions for updating the theme context of a component.  The first, `context_set`, will update the theme of the component calling the function using the following logic:
+
+1. Check that element for the value of the `--theme` variable, if it exists.
+2. If it does not exist, the component then checks for a `pfe-theme` attribute.
+3. Finally, if neither has a value, the optional feedback input value is used.
+
+If a theme value is defined at any point of this flow, an `on` attribute will be attached and assigned that value.
+
+The `context_update` function will use much the same logic except it updates the theme context for the component calling the function and triggers an update for all of it's pfelement children.
+
 ## Test
@@ -52,0 +130,0 @@

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

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

140329

increased by16.79%

Lines of code

1007

increased by13.27%

Number of lines in readme file

150

increased by108.33%

No dependency changes