@patternfly/pfelement
Advanced tools
@patternfly/pfelement - npm Package Compare versions
Comparing version 1.0.0-prerelease.8 to 1.0.0-prerelease.9
@@ -7,3 +7,3 @@ { | ||
| }, | ||
| "version": "1.0.0-prerelease.8", | ||
| "version": "1.0.0-prerelease.9", | ||
| "publishConfig": { | ||
@@ -30,3 +30,3 @@ "access": "public" | ||
| "generator-pfelement-version": "0.3.4", | ||
| "gitHead": "d60adb94c4945f22c939f7806cf7d0718987bddb" | ||
| "gitHead": "2afa7eb77db4973d5d46090414a4d12932cc735b" | ||
| } |
209
pfelement.js
@@ -1,209 +0,2 @@ | ||
| /* | ||
| * Copyright 2019 Red Hat, Inc. | ||
| * | ||
| * Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| * of this software and associated documentation files (the "Software"), to deal | ||
| * in the Software without restriction, including without limitation the rights | ||
| * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| * copies of the Software, and to permit persons to whom the Software is | ||
| * furnished to do so, subject to the following conditions: | ||
| * | ||
| * The above copyright notice and this permission notice shall be included in | ||
| * all copies or substantial portions of the Software. | ||
| * | ||
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| * SOFTWARE. | ||
| * | ||
| */ | ||
| let logger = () => null; | ||
| function reveal() { | ||
| logger(`[reveal] elements ready, revealing the body`); | ||
| window.document.body.removeAttribute("unresolved"); | ||
| } | ||
| function autoReveal(logFunction) { | ||
| logger = logFunction; | ||
| // If Web Components are already ready, run the handler right away. If they | ||
| // are not yet ready, wait. | ||
| // | ||
| // see https://github.com/github/webcomponentsjs#webcomponents-loaderjs for | ||
| // info about web component readiness events | ||
| const polyfillPresent = window.WebComponents; | ||
| const polyfillReady = polyfillPresent && window.WebComponents.ready; | ||
| if (!polyfillPresent || polyfillReady) { | ||
| handleWebComponentsReady(); | ||
| } else { | ||
| window.addEventListener("WebComponentsReady", handleWebComponentsReady); | ||
| } | ||
| } | ||
| function handleWebComponentsReady() { | ||
| logger("[reveal] web components ready"); | ||
| reveal(); | ||
| } | ||
| /* | ||
| * Copyright 2019 Red Hat, Inc. | ||
| * | ||
| * Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| * of this software and associated documentation files (the "Software"), to deal | ||
| * in the Software without restriction, including without limitation the rights | ||
| * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| * copies of the Software, and to permit persons to whom the Software is | ||
| * furnished to do so, subject to the following conditions: | ||
| * | ||
| * The above copyright notice and this permission notice shall be included in | ||
| * all copies or substantial portions of the Software. | ||
| * | ||
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| * SOFTWARE. | ||
| * | ||
| */ | ||
| class PFElement extends HTMLElement { | ||
| static create(pfe) { | ||
| window.customElements.define(pfe.tag, pfe); | ||
| } | ||
| static debugLog(preference = null) { | ||
| if (preference !== null) { | ||
| PFElement._debugLog = !!preference; | ||
| } | ||
| return PFElement._debugLog; | ||
| } | ||
| static log(...msgs) { | ||
| if (PFElement.debugLog()) { | ||
| console.log(...msgs); | ||
| } | ||
| } | ||
| static get PfeTypes() { | ||
| return { | ||
| Container: "container", | ||
| Content: "content", | ||
| Pattern: "pattern" | ||
| }; | ||
| } | ||
| get pfeType() { | ||
| return this.getAttribute("pfe-type"); | ||
| } | ||
| set pfeType(value) { | ||
| this.setAttribute("pfe-type", value); | ||
| } | ||
| has_slot(name) { | ||
| return this.querySelector(`[slot='${name}']`); | ||
| } | ||
| constructor(pfeClass, { type = null, delayRender = false } = {}) { | ||
| super(); | ||
| this._pfeClass = pfeClass; | ||
| this.tag = pfeClass.tag; | ||
| this._queue = []; | ||
| this.template = document.createElement("template"); | ||
| this.attachShadow({ mode: "open" }); | ||
| if (type) { | ||
| this._queueAction({ | ||
| type: "setProperty", | ||
| data: { | ||
| name: "pfeType", | ||
| value: type | ||
| } | ||
| }); | ||
| } | ||
| if (!delayRender) { | ||
| this.render(); | ||
| } | ||
| } | ||
| connectedCallback() { | ||
| if (window.ShadyCSS) { | ||
| window.ShadyCSS.styleElement(this); | ||
| } | ||
| this.classList.add("PFElement"); | ||
| if (this._queue.length) { | ||
| this._processQueue(); | ||
| } | ||
| } | ||
| attributeChangedCallback(attr, oldVal, newVal) { | ||
| if (!this._pfeClass.cascadingAttributes) { | ||
| return; | ||
| } | ||
| const cascadeTo = this._pfeClass.cascadingAttributes[attr]; | ||
| if (cascadeTo) { | ||
| this._copyAttribute(attr, cascadeTo); | ||
| } | ||
| } | ||
| _copyAttribute(name, to) { | ||
| const recipients = [ | ||
| ...this.querySelectorAll(to), | ||
| ...this.shadowRoot.querySelectorAll(to) | ||
| ]; | ||
| const value = this.getAttribute(name); | ||
| const fname = value == null ? "removeAttribute" : "setAttribute"; | ||
| for (const node of recipients) { | ||
| node[fname](name, value); | ||
| } | ||
| } | ||
| _queueAction(action) { | ||
| this._queue.push(action); | ||
| } | ||
| _processQueue() { | ||
| this._queue.forEach(action => { | ||
| this[`_${action.type}`](action.data); | ||
| }); | ||
| this._queue = []; | ||
| } | ||
| _setProperty({ name, value }) { | ||
| this[name] = value; | ||
| } | ||
| render() { | ||
| this.shadowRoot.innerHTML = ""; | ||
| this.template.innerHTML = this.html; | ||
| if (window.ShadyCSS) { | ||
| window.ShadyCSS.prepareTemplate(this.template, this.tag); | ||
| } | ||
| this.shadowRoot.appendChild(this.template.content.cloneNode(true)); | ||
| } | ||
| log(...msgs) { | ||
| PFElement.log(`[${this.tag}]`, ...msgs); | ||
| } | ||
| } | ||
| autoReveal(PFElement.log); | ||
| export default PFElement; | ||
| let t=()=>null;function e(){t("[reveal] web components ready"),t("[reveal] elements ready, revealing the body"),window.document.body.removeAttribute("unresolved")}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"}}get pfeType(){return this.getAttribute(`${s}type`)}set pfeType(t){this.setAttribute(`${s}type`,t)}has_slot(t){return this.querySelector(`[slot='${t}']`)}has_slot(t){return this.querySelector(`[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._queue=[],this.template=document.createElement("template"),this.attachShadow({mode:"open"}),e&&this._queueAction({type:"setProperty",data:{name:"pfeType",value:e}}),s||this.render()}connectedCallback(){this.connected=!0,window.ShadyCSS&&window.ShadyCSS.styleElement(this),this.classList.add("PFElement"),"object"==typeof this.props&&this._mapSchemaToProperties(this.tag,this.props),this._queue.length&&this._processQueue()}disconnectedCallback(){this.connected=!1}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){Object.keys(e).forEach(o=>{let i=e[o];if(this[o]=i,this[o].value=null,this.hasAttribute(`${s}${o}`))this[o].value=this.getAttribute(`${s}${o}`);else if(i.default){const e=this._hasDependency(t,i.options),n=!i.options||i.options&&!i.options.dependencies.length;(e||n)&&(this.setAttribute(`${s}${o}`,i.default),this[o].value=i.default)}})}_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_slot(`${t}--${o[e].id}`),r="attribute"===o[e].type&&this.getAttribute(`${s}${o[e].id}`);if(n||r){i=!0;break}}return i}_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; | ||
| //# sourceMappingURL=pfelement.js.map |
@@ -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 t=function(){function o(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)}}return function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}}(),s=function(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)},e=function(e){function u(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,u);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,(u.__proto__||Object.getPrototypeOf(u)).call(this));return a._pfeClass=e,a.tag=e.tag,a._queue=[],a.template=document.createElement("template"),a.attachShadow({mode:"open"}),o&&a._queueAction({type:"setProperty",data:{name:"pfeType",value:o}}),i||a.render(),a}return 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)}(u,HTMLElement),t(u,[{key:"has_slot",value:function(e){return this.querySelector("[slot='"+e+"']")}},{key:"pfeType",get:function(){return this.getAttribute("pfe-type")},set:function(e){this.setAttribute("pfe-type",e)}}],[{key:"create",value:function(e){window.customElements.define(e.tag,e)}},{key:"debugLog",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null;return null!==e&&(u._debugLog=!!e),u._debugLog}},{key:"log",value:function(){var e;u.debugLog()&&(e=console).log.apply(e,arguments)}},{key:"PfeTypes",get:function(){return{Container:"container",Content:"content",Pattern:"pattern"}}}]),t(u,[{key:"connectedCallback",value:function(){window.ShadyCSS&&window.ShadyCSS.styleElement(this),this.classList.add("PFElement"),this._queue.length&&this._processQueue()}},{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(s(this.querySelectorAll(t)),s(this.shadowRoot.querySelectorAll(t))),o=this.getAttribute(e),r=null==o?"removeAttribute":"setAttribute",i=!0,a=!1,u=void 0;try{for(var l,c=n[Symbol.iterator]();!(i=(l=c.next()).done);i=!0){l.value[r](e,o)}}catch(e){a=!0,u=e}finally{try{!i&&c.return&&c.return()}finally{if(a)throw u}}}},{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:"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];u.log.apply(u,["["+this.tag+"]"].concat(t))}}]),u}();return function(e){o=e;var t=window.WebComponents,n=t&&window.WebComponents.ready;!t||n?r():window.addEventListener("WebComponentsReady",r)}(e.log),e}); | ||
| !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 t="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},n=function(){function o(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)}}return function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}}(),c=function(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)},l="pfe-",e=function(e){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 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}(this,(a.__proto__||Object.getPrototypeOf(a)).call(this));return u.connected=!1,u._pfeClass=e,u.tag=e.tag,u.props=e.properties,u._queue=[],u.template=document.createElement("template"),u.attachShadow({mode:"open"}),o&&u._queueAction({type:"setProperty",data:{name:"pfeType",value:o}}),i||u.render(),u}return 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),n(a,[{key:"has_slot",value:function(e){return this.querySelector("[slot='"+e+"']")}},{key:"has_slot",value:function(e){return this.querySelector("[slot='"+e+"']")}},{key:"pfeType",get:function(){return this.getAttribute(l+"type")},set:function(e){this.setAttribute(l+"type",e)}}],[{key:"create",value:function(e){window.customElements.define(e.tag,e)}},{key:"debugLog",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null;return null!==e&&(a._debugLog=!!e),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"}}}]),n(a,[{key:"connectedCallback",value:function(){this.connected=!0,window.ShadyCSS&&window.ShadyCSS.styleElement(this),this.classList.add("PFElement"),"object"===t(this.props)&&this._mapSchemaToProperties(this.tag,this.props),this._queue.length&&this._processQueue()}},{key:"disconnectedCallback",value:function(){this.connected=!1}},{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,u=!1,a=void 0;try{for(var l,s=n[Symbol.iterator]();!(i=(l=s.next()).done);i=!0){l.value[r](e,o)}}catch(e){u=!0,a=e}finally{try{!i&&s.return&&s.return()}finally{if(u)throw a}}}},{key:"_mapSchemaToProperties",value:function(r,i){var u=this;Object.keys(i).forEach(function(e){var t=i[e];if(u[e]=t,u[e].value=null,u.hasAttribute(""+l+e))u[e].value=u.getAttribute(""+l+e);else if(t.default){var n=u._hasDependency(r,t.options),o=!t.options||t.options&&!t.options.dependencies.length;(n||o)&&(u.setAttribute(""+l+e,t.default),u[e].value=t.default)}})}},{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&&this.has_slot(e+"--"+n[r].id),u="attribute"===n[r].type&&this.getAttribute(""+l+n[r].id);if(i||u){o=!0;break}}return o}},{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){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:document.body;return window.getComputedStyle(t).getPropertyValue(e).trim()}}]),a}();return function(e){o=e;var t=window.WebComponents,n=t&&window.WebComponents.ready;!t||n?r():window.addEventListener("WebComponentsReady",r)}(e.log),e}); | ||
| //# sourceMappingURL=pfelement.umd.js.map |
| import { autoReveal } from "./reveal.js"; | ||
| const prefix = "pfe-"; | ||
@@ -25,3 +26,3 @@ class PFElement extends HTMLElement { | ||
| Content: "content", | ||
| Pattern: "pattern" | ||
| Combo: "combo" | ||
| }; | ||
@@ -31,7 +32,7 @@ } | ||
| get pfeType() { | ||
| return this.getAttribute("pfe-type"); | ||
| return this.getAttribute(`${prefix}type`); | ||
| } | ||
| set pfeType(value) { | ||
| this.setAttribute("pfe-type", value); | ||
| this.setAttribute(`${prefix}type`, value); | ||
| } | ||
@@ -43,7 +44,13 @@ | ||
| has_slot(name) { | ||
| return this.querySelector(`[slot='${name}']`); | ||
| } | ||
| constructor(pfeClass, { type = null, delayRender = false } = {}) { | ||
| super(); | ||
| this.connected = false; | ||
| this._pfeClass = pfeClass; | ||
| this.tag = pfeClass.tag; | ||
| this.props = pfeClass.properties; | ||
| this._queue = []; | ||
@@ -70,2 +77,4 @@ this.template = document.createElement("template"); | ||
| connectedCallback() { | ||
| this.connected = true; | ||
| if (window.ShadyCSS) { | ||
@@ -77,2 +86,6 @@ window.ShadyCSS.styleElement(this); | ||
| if (typeof this.props === "object") { | ||
| this._mapSchemaToProperties(this.tag, this.props); | ||
| } | ||
| if (this._queue.length) { | ||
@@ -83,2 +96,6 @@ this._processQueue(); | ||
| disconnectedCallback() { | ||
| this.connected = false; | ||
| } | ||
| attributeChangedCallback(attr, oldVal, newVal) { | ||
@@ -107,2 +124,61 @@ if (!this._pfeClass.cascadingAttributes) { | ||
| // Map the imported properties json to real props on the element | ||
| // @notice static getter of properties is built via tooling | ||
| // to edit modify src/element.json | ||
| _mapSchemaToProperties(tag, properties) { | ||
| // Loop over the properties provided by the schema | ||
| Object.keys(properties).forEach(attr => { | ||
| let data = properties[attr]; | ||
| // Set the attribute's property equal to the schema input | ||
| this[attr] = data; | ||
| // Initialize the value to null | ||
| this[attr].value = null; | ||
| // If the attribute exists on the host | ||
| if (this.hasAttribute(`${prefix}${attr}`)) { | ||
| // Set property value based on the existing attribute | ||
| this[attr].value = this.getAttribute(`${prefix}${attr}`); | ||
| } | ||
| // Otherwise, look for a default and use that instead | ||
| else if (data.default) { | ||
| const dependency_exists = this._hasDependency(tag, data.options); | ||
| const no_dependencies = | ||
| !data.options || (data.options && !data.options.dependencies.length); | ||
| // If the dependency exists or there are no dependencies, set the default | ||
| if (dependency_exists || no_dependencies) { | ||
| this.setAttribute(`${prefix}${attr}`, data.default); | ||
| this[attr].value = data.default; | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| // Test whether expected dependencies exist | ||
| _hasDependency(tag, opts) { | ||
| // Get any possible dependencies for this attribute to exist | ||
| let dependencies = opts ? opts.dependencies : []; | ||
| // Initialize the dependency return value | ||
| let hasDependency = false; | ||
| // Check that dependent item exists | ||
| // Loop through the dependencies defined | ||
| for (let i = 0; i < dependencies.length; i += 1) { | ||
| const slot_exists = | ||
| dependencies[i].type === "slot" && | ||
| this.has_slot(`${tag}--${dependencies[i].id}`); | ||
| const attribute_exists = | ||
| dependencies[i].type === "attribute" && | ||
| this.getAttribute(`${prefix}${dependencies[i].id}`); | ||
| // If the type is slot, check that it exists OR | ||
| // if the type is an attribute, check if the attribute is defined | ||
| if (slot_exists || attribute_exists) { | ||
| // If the slot does exist, add the attribute with the default value | ||
| hasDependency = true; | ||
| // Exit the loop | ||
| break; | ||
| } | ||
| } | ||
| // Return a boolean if the dependency exists | ||
| return hasDependency; | ||
| } | ||
| _queueAction(action) { | ||
@@ -124,2 +200,13 @@ this._queue.push(action); | ||
| static var(name, element = document.body) { | ||
| return window | ||
| .getComputedStyle(element) | ||
| .getPropertyValue(name) | ||
| .trim(); | ||
| } | ||
| var(name) { | ||
| return PFElement.var(name, this); | ||
| } | ||
| render() { | ||
@@ -126,0 +213,0 @@ this.shadowRoot.innerHTML = ""; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by13.9%
74102
Worsened metrics
- Lines of code
- decreased by-13.84%
492
No dependency changes