@lrnwebcomponents/responsive-utility - npm Package Compare versions

Comparing version 2.7.10 to 2.8.0

analysis.json

@@ -15,3 +15,3 @@ {
         "end": {
-          "line": 117,
+          "line": 122,
           "column": 1
@@ -54,7 +54,7 @@ }
             "start": {
-              "line": 34,
+              "line": 22,
               "column": 2
             },
             "end": {
-              "line": 46,
+              "line": 34,
               "column": 3
@@ -75,7 +75,7 @@ }
             "start": {
-              "line": 47,
+              "line": 35,
               "column": 2
             },
             "end": {
-              "line": 58,
+              "line": 46,
               "column": 3
@@ -96,7 +96,7 @@ }
             "start": {
-              "line": 65,
+              "line": 53,
               "column": 2
             },
             "end": {
-              "line": 79,
+              "line": 67,
               "column": 3
@@ -123,7 +123,7 @@ }
             "start": {
-              "line": 81,
+              "line": 69,
               "column": 2
             },
             "end": {
-              "line": 92,
+              "line": 80,
               "column": 3
@@ -145,7 +145,7 @@ }
             "start": {
-              "line": 97,
+              "line": 85,
               "column": 2
             },
             "end": {
-              "line": 99,
+              "line": 87,
               "column": 3
@@ -176,3 +176,3 @@ }
         "end": {
-          "line": 126,
+          "line": 114,
           "column": 1
@@ -214,7 +214,7 @@ }
             "start": {
-              "line": 82,
+              "line": 83,
               "column": 4
             },
             "end": {
-              "line": 101,
+              "line": 104,
               "column": 5
@@ -235,7 +235,7 @@ }
             "start": {
-              "line": 105,
+              "line": 108,
               "column": 4
             },
             "end": {
-              "line": 115,
+              "line": 120,
               "column": 5
@@ -260,3 +260,3 @@ }
         "end": {
-          "line": 116,
+          "line": 121,
           "column": 3
@@ -263,0 +263,0 @@ }

lib/responsive-utility-behaviors.js

@@ -1,3 +0,3 @@
-import { LitElement, html, css } from "lit-element/lit-element.js";
-import { ResponsiveUtility } from "../responsive-utility.js";
+import { html } from "lit-element/lit-element.js";
+import "../responsive-utility.js";
 /**
@@ -69,3 +69,3 @@ * `responsive-utility-behaviors`
     render() {
-      return html` <slot></slot> `;
+      return html`<slot></slot>`;
     }
@@ -80,2 +80,3 @@
       this.xl = 1500;
+      this.disableResponsive = false;
     }
@@ -87,19 +88,21 @@ /**
       super.firstUpdated();
-      window.ResponsiveUtility.requestAvailability();
-      this.dispatchEvent(
-        new CustomEvent("responsive-element", {
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-          detail: {
-            attribute: "responsive-size",
-            custom: "responsive-width",
-            element: this,
-            sm: this.sm,
-            md: this.md,
-            lg: this.lg,
-            xl: this.xl,
-          },
-        })
-      );
+      if (!this.disableResponsive) {
+        window.ResponsiveUtility.requestAvailability();
+        this.dispatchEvent(
+          new CustomEvent("responsive-element", {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: {
+              attribute: "responsive-size",
+              custom: "responsive-width",
+              element: this,
+              sm: this.sm,
+              md: this.md,
+              lg: this.lg,
+              xl: this.xl,
+            },
+          })
+        );
+      }
     }
@@ -110,10 +113,12 @@ /**
     disconnectedCallback() {
-      this.dispatchEvent(
-        new CustomEvent("responsive-element-deleted", {
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-          detail: this,
-        })
-      );
+      if (!this.disableResponsive) {
+        this.dispatchEvent(
+          new CustomEvent("responsive-element-deleted", {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: this,
+          })
+        );
+      }
       super.disconnectedCallback();
@@ -120,0 +125,0 @@ }

package.json

@@ -15,3 +15,3 @@ {
   },
-  "version": "2.7.10",
+  "version": "2.8.0",
   "description": "Automated conversion of responsive-utility/",
@@ -45,3 +45,3 @@ "repository": {
     "@lrnwebcomponents/deduping-fix": "^2.7.7",
-    "@lrnwebcomponents/storybook-utilities": "^2.7.10",
+    "@lrnwebcomponents/storybook-utilities": "^2.8.0",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
@@ -64,3 +64,3 @@ "@polymer/iron-demo-helpers": "3.1.0",
   ],
-  "gitHead": "5b8d225cec2bf64160b4f4cab0630b187fdcd2d8"
+  "gitHead": "3d847eff4969998e9c52c0246a81453e99749f66"
 }

responsive-utility.js

@@ -23,14 +23,2 @@ import { LitElement, html, css } from "lit-element/lit-element.js";
   }
-
-  static get properties() {
-    return {
-      ...super.properties,
-      /**
-       * Array of details provided by responsive elements
-       */
-      details: {
-        type: Array,
-      },
-    };
-  }
   connectedCallback() {
@@ -37,0 +25,0 @@ super.connectedCallback();

responsive-utility.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lit-element/lit-element.js"),require("@juggle/resize-observer")):"function"==typeof define&&define.amd?define(["exports","lit-element/lit-element.js","@juggle/resize-observer"],t):t((e=e||self).ResponsiveUtility={},e.litElement_js,e.resizeObserver)}(this,function(e,t,n){"use strict";function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,i)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach(function(t){r(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function l(e){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function c(e,t){return(c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function a(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(e){return!1}}();return function(){var n,i,r,o=l(e);if(t){var s=l(this).constructor;n=Reflect.construct(o,arguments,s)}else n=o.apply(this,arguments);return i=this,!(r=n)||"object"!=typeof r&&"function"!=typeof r?u(i):r}}function f(e,t,n){return(f="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var i=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=l(e)););return e}(e,t);if(i){var r=Object.getOwnPropertyDescriptor(i,t);return r.get?r.get.call(n):r.value}})(e,t,n||e)}function p(){var e,t,n=(e=[" <slot></slot> "],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return p=function(){return n},n}window.ResponsiveUtility={},window.ResponsiveUtility.instance=null;var d=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&c(e,t)}(b,t.LitElement);var r,o,d,v=a(b);function b(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,b),(e=v.call(this)).details=[],null==window.ResponsiveUtility.instance&&(window.ResponsiveUtility.instance=u(e)),e}return r=b,d=[{key:"tag",get:function(){return"responsive-utility"}},{key:"properties",get:function(){return s(s({},f(l(b),"properties",this)),{},{details:{type:Array}})}}],(o=[{key:"render",value:function(){return t.html(p())}},{key:"connectedCallback",value:function(){f(l(b.prototype),"connectedCallback",this).call(this),window.addEventListener("responsive-element",this.responiveElementEvent.bind(this)),window.addEventListener("delete-responsive-element",this.deleteResponiveElementEvent.bind(this))}},{key:"disconnectedCallback",value:function(){window.removeEventListener("responsive-element",this.responiveElementEvent.bind(this)),window.removeEventListener("delete-responsive-element",this.deleteResponiveElementEvent.bind(this)),f(l(b.prototype),"disconnectedCallback",this).call(this)}},{key:"responiveElementEvent",value:function(e){var t={element:e.detail.element,attribute:e.detail.attribute||"responsive-size",sm:e.detail.sm||900,md:e.detail.md||1200,lg:e.detail.lg||1500,xl:e.detail.xl||1800,custom:e.detail.custom||"responsive-width"};t.observer=this._getObserver(t),t.observer.observe(t.element),this.details.push(t),window.ResponsiveUtility.setSize(t)}},{key:"_getObserver",value:function(e){return new n.ResizeObserver(function(t){return t.forEach(function(t){return window.ResponsiveUtility.setSize(e,t.contentBoxSize||t.borderBoxSize||t.contentRect||t.target?t.target.offsetWidth:0)})})}},{key:"deleteResponiveElementEvent",value:function(e){this.details=this.details.filter(function(t){return e.detail!==t})}}])&&i(r.prototype,o),d&&i(r,d),b}();window.customElements.define(d.tag,d),window.ResponsiveUtility.requestAvailability=function(){null==window.ResponsiveUtility.instance&&(window.ResponsiveUtility.instance=document.createElement("responsive-utility")),document.body.appendChild(window.ResponsiveUtility.instance)},window.ResponsiveUtility.setSize=function(e){var t,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=e.element,r=e.attribute,o=e.custom;t=n<e.sm?"xs":n<e.md?"sm":n<e.lg?"md":n<e.xl?"lg":"xl",i.getAttribute(o)&&n===i.getAttribute(o)||i.setAttribute(o,n),i.getAttribute(r)&&t===i.getAttribute(r)||i.setAttribute(r,t)},e.ResponsiveUtility=d,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lit-element/lit-element.js"),require("@juggle/resize-observer")):"function"==typeof define&&define.amd?define(["exports","lit-element/lit-element.js","@juggle/resize-observer"],t):t((e=e||self).ResponsiveUtility={},e.litElement_js,e.resizeObserver)}(this,function(e,t,n){"use strict";function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function r(e){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function o(e,t){return(o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function l(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(e){return!1}}();return function(){var n,i,o,l=r(e);if(t){var u=r(this).constructor;n=Reflect.construct(l,arguments,u)}else n=l.apply(this,arguments);return i=this,!(o=n)||"object"!=typeof o&&"function"!=typeof o?s(i):o}}function u(e,t,n){return(u="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var i=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=r(e)););return e}(e,t);if(i){var o=Object.getOwnPropertyDescriptor(i,t);return o.get?o.get.call(n):o.value}})(e,t,n||e)}function c(){var e,t,n=(e=[" <slot></slot> "],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return c=function(){return n},n}window.ResponsiveUtility={},window.ResponsiveUtility.instance=null;var a=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&o(e,t)}(v,t.LitElement);var a,f,d,p=l(v);function v(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,v),(e=p.call(this)).details=[],null==window.ResponsiveUtility.instance&&(window.ResponsiveUtility.instance=s(e)),e}return a=v,d=[{key:"tag",get:function(){return"responsive-utility"}}],(f=[{key:"render",value:function(){return t.html(c())}},{key:"connectedCallback",value:function(){u(r(v.prototype),"connectedCallback",this).call(this),window.addEventListener("responsive-element",this.responiveElementEvent.bind(this)),window.addEventListener("delete-responsive-element",this.deleteResponiveElementEvent.bind(this))}},{key:"disconnectedCallback",value:function(){window.removeEventListener("responsive-element",this.responiveElementEvent.bind(this)),window.removeEventListener("delete-responsive-element",this.deleteResponiveElementEvent.bind(this)),u(r(v.prototype),"disconnectedCallback",this).call(this)}},{key:"responiveElementEvent",value:function(e){var t={element:e.detail.element,attribute:e.detail.attribute||"responsive-size",sm:e.detail.sm||900,md:e.detail.md||1200,lg:e.detail.lg||1500,xl:e.detail.xl||1800,custom:e.detail.custom||"responsive-width"};t.observer=this._getObserver(t),t.observer.observe(t.element),this.details.push(t),window.ResponsiveUtility.setSize(t)}},{key:"_getObserver",value:function(e){return new n.ResizeObserver(function(t){return t.forEach(function(t){return window.ResponsiveUtility.setSize(e,t.contentBoxSize||t.borderBoxSize||t.contentRect||t.target?t.target.offsetWidth:0)})})}},{key:"deleteResponiveElementEvent",value:function(e){this.details=this.details.filter(function(t){return e.detail!==t})}}])&&i(a.prototype,f),d&&i(a,d),v}();window.customElements.define(a.tag,a),window.ResponsiveUtility.requestAvailability=function(){null==window.ResponsiveUtility.instance&&(window.ResponsiveUtility.instance=document.createElement("responsive-utility")),document.body.appendChild(window.ResponsiveUtility.instance)},window.ResponsiveUtility.setSize=function(e){var t,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=e.element,r=e.attribute,o=e.custom;t=n<e.sm?"xs":n<e.md?"sm":n<e.lg?"md":n<e.xl?"lg":"xl",i.getAttribute(o)&&n===i.getAttribute(o)||i.setAttribute(o,n),i.getAttribute(r)&&t===i.getAttribute(r)||i.setAttribute(r,t)},e.ResponsiveUtility=a,Object.defineProperty(e,"__esModule",{value:!0})});

src/responsive-utility.js

@@ -23,14 +23,2 @@ import { LitElement, html, css } from "lit-element/lit-element.js";
   }
-
-  static get properties() {
-    return {
-      ...super.properties,
-      /**
-       * Array of details provided by responsive elements
-       */
-      details: {
-        type: Array,
-      },
-    };
-  }
   connectedCallback() {
@@ -37,0 +25,0 @@ super.connectedCallback();

vscode-html-custom-data.json

@@ -6,3 +6,3 @@ {
       "name": "responsive-utility-element",
-      "description": "`responsive-utility-element`\nA simpler way to use responsive utility.\n\nEvents:\n\n  * `responsive-element` {`CustomEvent<{ attribute: string; custom: string; element: this; sm: number; md: number; lg: number; xl: number; }>`} - \n\n  * `responsive-element-deleted` {`CustomEvent<this>`} - \n\nAttributes:\n\n  * `responsive-width` {`number`} - width in pixels\n\n  * `responsive-size` {`string`} - size for responsive styling: xs, sm, md, lg, xl\n\n  * `sm` {`number`} - Miniumum value for small breakpoint\n\n  * `md` {`number`} - Miniumum value for medium breakpoint\n\n  * `lg` {`number`} - Miniumum value for large breakpoint\n\n  * `xl` {`number`} - Miniumum value for extra-large breakpoint\n\nProperties:\n\n  * `responsiveWidth` {`number`} - width in pixels\n\n  * `responsiveSize` {`string`} - size for responsive styling: xs, sm, md, lg, xl\n\n  * `sm` {`number`} - Miniumum value for small breakpoint\n\n  * `md` {`number`} - Miniumum value for medium breakpoint\n\n  * `lg` {`number`} - Miniumum value for large breakpoint\n\n  * `xl` {`number`} - Miniumum value for extra-large breakpoint",
+      "description": "`responsive-utility-element`\nA simpler way to use responsive utility.\n\nEvents:\n\n  * `responsive-element` {`CustomEvent<{ attribute: string; custom: string; element: this; sm: number; md: number; lg: number; xl: number; }>`} - \n\n  * `responsive-element-deleted` {`CustomEvent<this>`} - \n\nAttributes:\n\n  * `responsive-width` {`number`} - width in pixels\n\n  * `responsive-size` {`string`} - size for responsive styling: xs, sm, md, lg, xl\n\n  * `sm` {`number`} - Miniumum value for small breakpoint\n\n  * `md` {`number`} - Miniumum value for medium breakpoint\n\n  * `lg` {`number`} - Miniumum value for large breakpoint\n\n  * `xl` {`number`} - Miniumum value for extra-large breakpoint\n\nProperties:\n\n  * `responsiveWidth` {`number`} - width in pixels\n\n  * `responsiveSize` {`string`} - size for responsive styling: xs, sm, md, lg, xl\n\n  * `sm` {`number`} - Miniumum value for small breakpoint\n\n  * `md` {`number`} - Miniumum value for medium breakpoint\n\n  * `lg` {`number`} - Miniumum value for large breakpoint\n\n  * `xl` {`number`} - Miniumum value for extra-large breakpoint\n\n  * `disableResponsive` {`boolean`} - ",
       "attributes": [
@@ -45,19 +45,9 @@ {
       "name": "responsive-utility",
-      "description": "Attributes:\n\n  * `details` {`any[]`} - Array of details provided by responsive elements\n\nProperties:\n\n  * `details` {`any[]`} - Array of details provided by responsive elements",
-      "attributes": [
-        {
-          "name": "details",
-          "description": "`details` {`any[]`} - Array of details provided by responsive elements\n\nProperty: details\n\nDefault: "
-        }
-      ]
+      "description": "Properties:\n\n  * `details` {`never[]`} - ",
+      "attributes": []
     },
     {
       "name": "responsive-utility",
-      "description": "Attributes:\n\n  * `details` {`any[]`} - Array of details provided by responsive elements\n\nProperties:\n\n  * `details` {`any[]`} - Array of details provided by responsive elements",
-      "attributes": [
-        {
-          "name": "details",
-          "description": "`details` {`any[]`} - Array of details provided by responsive elements\n\nProperty: details\n\nDefault: "
-        }
-      ]
+      "description": "Properties:\n\n  * `details` {`never[]`} - ",
+      "attributes": []
     }
@@ -64,0 +54,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

Worsened metrics

Total package byte prevSize

72481

decreased by-2.27%

Lines of code

1169

decreased by-2.5%

No dependency changes