@patternfly/pfelement
Advanced tools
@patternfly/pfelement - npm Package Compare versions
Comparing version 1.0.0-prerelease.9 to 1.0.0-prerelease.10
@@ -7,3 +7,3 @@ { | ||
| }, | ||
| "version": "1.0.0-prerelease.9", | ||
| "version": "1.0.0-prerelease.10", | ||
| "publishConfig": { | ||
@@ -30,3 +30,3 @@ "access": "public" | ||
| "generator-pfelement-version": "0.3.4", | ||
| "gitHead": "2afa7eb77db4973d5d46090414a4d12932cc735b" | ||
| "gitHead": "b49b74a24aebabbf0987be9e694f119d63e1246e" | ||
| } |
296
pfelement.js
@@ -1,2 +0,296 @@ | ||
| 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; | ||
| /* | ||
| * 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. | ||
| * | ||
| */ | ||
| const prefix = "pfe-"; | ||
| 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", | ||
| Combo: "combo" | ||
| }; | ||
| } | ||
| get pfeType() { | ||
| return this.getAttribute(`${prefix}type`); | ||
| } | ||
| set pfeType(value) { | ||
| this.setAttribute(`${prefix}type`, value); | ||
| } | ||
| has_slot(name) { | ||
| return this.querySelector(`[slot='${name}']`); | ||
| } | ||
| 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 = []; | ||
| 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() { | ||
| this.connected = true; | ||
| if (window.ShadyCSS) { | ||
| window.ShadyCSS.styleElement(this); | ||
| } | ||
| this.classList.add("PFElement"); | ||
| if (typeof this.props === "object") { | ||
| this._mapSchemaToProperties(this.tag, this.props); | ||
| } | ||
| if (this._queue.length) { | ||
| this._processQueue(); | ||
| } | ||
| } | ||
| disconnectedCallback() { | ||
| this.connected = false; | ||
| } | ||
| 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); | ||
| } | ||
| } | ||
| // 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) { | ||
| this._queue.push(action); | ||
| } | ||
| _processQueue() { | ||
| this._queue.forEach(action => { | ||
| this[`_${action.type}`](action.data); | ||
| }); | ||
| this._queue = []; | ||
| } | ||
| _setProperty({ name, value }) { | ||
| this[name] = value; | ||
| } | ||
| static var(name, element = document.body) { | ||
| return window | ||
| .getComputedStyle(element) | ||
| .getPropertyValue(name) | ||
| .trim(); | ||
| } | ||
| var(name) { | ||
| return PFElement.var(name, this); | ||
| } | ||
| 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; | ||
| //# sourceMappingURL=pfelement.js.map |
@@ -1,2 +0,435 @@ | ||
| !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}); | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| typeof define === 'function' && define.amd ? define(factory) : | ||
| (global.PFElement = factory()); | ||
| }(this, (function () { 'use strict'; | ||
| var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
| return typeof obj; | ||
| } : function (obj) { | ||
| return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; | ||
| }; | ||
| var classCallCheck = function (instance, Constructor) { | ||
| if (!(instance instanceof Constructor)) { | ||
| throw new TypeError("Cannot call a class as a function"); | ||
| } | ||
| }; | ||
| var createClass = function () { | ||
| function defineProperties(target, props) { | ||
| for (var i = 0; i < props.length; i++) { | ||
| var descriptor = props[i]; | ||
| descriptor.enumerable = descriptor.enumerable || false; | ||
| descriptor.configurable = true; | ||
| if ("value" in descriptor) descriptor.writable = true; | ||
| Object.defineProperty(target, descriptor.key, descriptor); | ||
| } | ||
| } | ||
| return function (Constructor, protoProps, staticProps) { | ||
| if (protoProps) defineProperties(Constructor.prototype, protoProps); | ||
| if (staticProps) defineProperties(Constructor, staticProps); | ||
| return Constructor; | ||
| }; | ||
| }(); | ||
| var inherits = function (subClass, superClass) { | ||
| if (typeof superClass !== "function" && superClass !== null) { | ||
| throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); | ||
| } | ||
| subClass.prototype = Object.create(superClass && superClass.prototype, { | ||
| constructor: { | ||
| value: subClass, | ||
| enumerable: false, | ||
| writable: true, | ||
| configurable: true | ||
| } | ||
| }); | ||
| if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; | ||
| }; | ||
| var possibleConstructorReturn = function (self, call) { | ||
| if (!self) { | ||
| throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); | ||
| } | ||
| return call && (typeof call === "object" || typeof call === "function") ? call : self; | ||
| }; | ||
| var toConsumableArray = function (arr) { | ||
| if (Array.isArray(arr)) { | ||
| for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; | ||
| return arr2; | ||
| } else { | ||
| return Array.from(arr); | ||
| } | ||
| }; | ||
| /* | ||
| * Copyright 2019 Red Hat, Inc. | ||
| * | ||
| * Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| * of this software and associated documentation files (the "Software"), to deal | ||
| * in the Software without restriction, including without limitation the rights | ||
| * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| * copies of the Software, and to permit persons to whom the Software is | ||
| * furnished to do so, subject to the following conditions: | ||
| * | ||
| * The above copyright notice and this permission notice shall be included in | ||
| * all copies or substantial portions of the Software. | ||
| * | ||
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| * SOFTWARE. | ||
| * | ||
| */ | ||
| var logger = function logger() { | ||
| return 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 | ||
| var polyfillPresent = window.WebComponents; | ||
| var 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. | ||
| * | ||
| */ | ||
| var prefix = "pfe-"; | ||
| var PFElement = function (_HTMLElement) { | ||
| inherits(PFElement, _HTMLElement); | ||
| createClass(PFElement, [{ | ||
| key: "has_slot", | ||
| value: function has_slot(name) { | ||
| return this.querySelector("[slot='" + name + "']"); | ||
| } | ||
| }, { | ||
| key: "has_slot", | ||
| value: function has_slot(name) { | ||
| return this.querySelector("[slot='" + name + "']"); | ||
| } | ||
| }, { | ||
| key: "pfeType", | ||
| get: function get$$1() { | ||
| return this.getAttribute(prefix + "type"); | ||
| }, | ||
| set: function set$$1(value) { | ||
| this.setAttribute(prefix + "type", value); | ||
| } | ||
| }], [{ | ||
| key: "create", | ||
| value: function create(pfe) { | ||
| window.customElements.define(pfe.tag, pfe); | ||
| } | ||
| }, { | ||
| key: "debugLog", | ||
| value: function debugLog() { | ||
| var preference = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; | ||
| if (preference !== null) { | ||
| PFElement._debugLog = !!preference; | ||
| } | ||
| return PFElement._debugLog; | ||
| } | ||
| }, { | ||
| key: "log", | ||
| value: function log() { | ||
| if (PFElement.debugLog()) { | ||
| var _console; | ||
| (_console = console).log.apply(_console, arguments); | ||
| } | ||
| } | ||
| }, { | ||
| key: "PfeTypes", | ||
| get: function get$$1() { | ||
| return { | ||
| Container: "container", | ||
| Content: "content", | ||
| Combo: "combo" | ||
| }; | ||
| } | ||
| }]); | ||
| function PFElement(pfeClass) { | ||
| var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, | ||
| _ref$type = _ref.type, | ||
| type = _ref$type === undefined ? null : _ref$type, | ||
| _ref$delayRender = _ref.delayRender, | ||
| delayRender = _ref$delayRender === undefined ? false : _ref$delayRender; | ||
| classCallCheck(this, PFElement); | ||
| var _this = possibleConstructorReturn(this, (PFElement.__proto__ || Object.getPrototypeOf(PFElement)).call(this)); | ||
| _this.connected = false; | ||
| _this._pfeClass = pfeClass; | ||
| _this.tag = pfeClass.tag; | ||
| _this.props = pfeClass.properties; | ||
| _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(); | ||
| } | ||
| return _this; | ||
| } | ||
| createClass(PFElement, [{ | ||
| key: "connectedCallback", | ||
| value: function connectedCallback() { | ||
| this.connected = true; | ||
| if (window.ShadyCSS) { | ||
| window.ShadyCSS.styleElement(this); | ||
| } | ||
| this.classList.add("PFElement"); | ||
| if (_typeof(this.props) === "object") { | ||
| this._mapSchemaToProperties(this.tag, this.props); | ||
| } | ||
| if (this._queue.length) { | ||
| this._processQueue(); | ||
| } | ||
| } | ||
| }, { | ||
| key: "disconnectedCallback", | ||
| value: function disconnectedCallback() { | ||
| this.connected = false; | ||
| } | ||
| }, { | ||
| key: "attributeChangedCallback", | ||
| value: function attributeChangedCallback(attr, oldVal, newVal) { | ||
| if (!this._pfeClass.cascadingAttributes) { | ||
| return; | ||
| } | ||
| var cascadeTo = this._pfeClass.cascadingAttributes[attr]; | ||
| if (cascadeTo) { | ||
| this._copyAttribute(attr, cascadeTo); | ||
| } | ||
| } | ||
| }, { | ||
| key: "_copyAttribute", | ||
| value: function _copyAttribute(name, to) { | ||
| var recipients = [].concat(toConsumableArray(this.querySelectorAll(to)), toConsumableArray(this.shadowRoot.querySelectorAll(to))); | ||
| var value = this.getAttribute(name); | ||
| var fname = value == null ? "removeAttribute" : "setAttribute"; | ||
| var _iteratorNormalCompletion = true; | ||
| var _didIteratorError = false; | ||
| var _iteratorError = undefined; | ||
| try { | ||
| for (var _iterator = recipients[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { | ||
| var node = _step.value; | ||
| node[fname](name, value); | ||
| } | ||
| } catch (err) { | ||
| _didIteratorError = true; | ||
| _iteratorError = err; | ||
| } finally { | ||
| try { | ||
| if (!_iteratorNormalCompletion && _iterator.return) { | ||
| _iterator.return(); | ||
| } | ||
| } finally { | ||
| if (_didIteratorError) { | ||
| throw _iteratorError; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| // 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 | ||
| }, { | ||
| key: "_mapSchemaToProperties", | ||
| value: function _mapSchemaToProperties(tag, properties) { | ||
| var _this2 = this; | ||
| // Loop over the properties provided by the schema | ||
| Object.keys(properties).forEach(function (attr) { | ||
| var data = properties[attr]; | ||
| // Set the attribute's property equal to the schema input | ||
| _this2[attr] = data; | ||
| // Initialize the value to null | ||
| _this2[attr].value = null; | ||
| // If the attribute exists on the host | ||
| if (_this2.hasAttribute("" + prefix + attr)) { | ||
| // Set property value based on the existing attribute | ||
| _this2[attr].value = _this2.getAttribute("" + prefix + attr); | ||
| } | ||
| // Otherwise, look for a default and use that instead | ||
| else if (data.default) { | ||
| var dependency_exists = _this2._hasDependency(tag, data.options); | ||
| var 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) { | ||
| _this2.setAttribute("" + prefix + attr, data.default); | ||
| _this2[attr].value = data.default; | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| // Test whether expected dependencies exist | ||
| }, { | ||
| key: "_hasDependency", | ||
| value: function _hasDependency(tag, opts) { | ||
| // Get any possible dependencies for this attribute to exist | ||
| var dependencies = opts ? opts.dependencies : []; | ||
| // Initialize the dependency return value | ||
| var hasDependency = false; | ||
| // Check that dependent item exists | ||
| // Loop through the dependencies defined | ||
| for (var i = 0; i < dependencies.length; i += 1) { | ||
| var slot_exists = dependencies[i].type === "slot" && this.has_slot(tag + "--" + dependencies[i].id); | ||
| var 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; | ||
| } | ||
| }, { | ||
| key: "_queueAction", | ||
| value: function _queueAction(action) { | ||
| this._queue.push(action); | ||
| } | ||
| }, { | ||
| key: "_processQueue", | ||
| value: function _processQueue() { | ||
| var _this3 = this; | ||
| this._queue.forEach(function (action) { | ||
| _this3["_" + action.type](action.data); | ||
| }); | ||
| this._queue = []; | ||
| } | ||
| }, { | ||
| key: "_setProperty", | ||
| value: function _setProperty(_ref2) { | ||
| var name = _ref2.name, | ||
| value = _ref2.value; | ||
| this[name] = value; | ||
| } | ||
| }, { | ||
| key: "var", | ||
| value: function _var(name) { | ||
| return PFElement.var(name, this); | ||
| } | ||
| }, { | ||
| key: "render", | ||
| value: function 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)); | ||
| } | ||
| }, { | ||
| key: "log", | ||
| value: function log() { | ||
| for (var _len = arguments.length, msgs = Array(_len), _key = 0; _key < _len; _key++) { | ||
| msgs[_key] = arguments[_key]; | ||
| } | ||
| PFElement.log.apply(PFElement, ["[" + this.tag + "]"].concat(msgs)); | ||
| } | ||
| }], [{ | ||
| key: "var", | ||
| value: function _var(name) { | ||
| var element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body; | ||
| return window.getComputedStyle(element).getPropertyValue(name).trim(); | ||
| } | ||
| }]); | ||
| return PFElement; | ||
| }(HTMLElement); | ||
| autoReveal(PFElement.log); | ||
| return PFElement; | ||
| }))); | ||
| //# sourceMappingURL=pfelement.umd.js.map |
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 by72.93%
128141
- Number of package files
- increased by12.9%
35
- Lines of code
- increased by129.47%
1129
No dependency changes