@lrnwebcomponents/responsive-utility - npm Package Compare versions

Comparing version 3.0.6 to 4.0.0

analysis.json

@@ -15,3 +15,3 @@ {
         "end": {
-          "line": 122,
+          "line": 126,
           "column": 1
@@ -191,7 +191,7 @@ }
             "start": {
-              "line": 67,
+              "line": 71,
               "column": 4
             },
             "end": {
-              "line": 69,
+              "line": 73,
               "column": 5
@@ -209,7 +209,7 @@ }
             "start": {
-              "line": 83,
+              "line": 87,
               "column": 4
             },
             "end": {
-              "line": 104,
+              "line": 108,
               "column": 5
@@ -230,7 +230,7 @@ }
             "start": {
-              "line": 108,
+              "line": 112,
               "column": 4
             },
             "end": {
-              "line": 120,
+              "line": 124,
               "column": 5
@@ -255,3 +255,3 @@ }
         "end": {
-          "line": 121,
+          "line": 125,
           "column": 3
@@ -258,0 +258,0 @@ }

lib/responsive-utility-behaviors.js

@@ -1,2 +0,2 @@
-import { html } from "lit-element/lit-element.js";
+import { html } from "lit";
 import "../responsive-utility.js";
@@ -21,2 +21,6 @@ /**
         ...props,
+        disableResponsive: {
+          type: Boolean,
+          attribute: "disable-responsive",
+        },
         /*
@@ -23,0 +27,0 @@ * size for responsive styling: xs, sm, md, lg, xl

lib/responsive-utility-element.js

@@ -1,2 +0,2 @@
-import { LitElement, html, css } from "lit-element/lit-element.js";
+import { LitElement, html, css } from "lit";
 import { ResponsiveUtilityBehaviors } from "./responsive-utility-behaviors.js";
@@ -3,0 +3,0 @@ /**

package.json

@@ -15,3 +15,3 @@ {
   },
-  "version": "3.0.6",
+  "version": "4.0.0",
   "description": "Automated conversion of responsive-utility/",
@@ -27,9 +27,11 @@ "repository": {
   "scripts": {
-    "test": "wct --configFile ../../wct.conf.json node_modules/@lrnwebcomponents/responsive-utility/test/",
     "start": "yarn run dev",
-    "build": "gulp --gulpfile=gulpfile.cjs && rollup -c && prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && wca analyze \"**/*.js\" --format vscode --outFile vscode-html-custom-data.json",
+    "build": "gulp --gulpfile=gulpfile.cjs && node --experimental-json-modules ../../node_modules/.bin/rollup --config && prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && wca analyze \"**/*.js\" --format vscode --outFile vscode-html-custom-data.json",
     "dev": "concurrently --kill-others \"yarn run watch\" \"yarn run serve\"",
     "watch": "gulp dev --gulpfile=gulpfile.cjs",
     "serve": "es-dev-server -c ../../es-dev-server.config.js",
-    "lighthouse": "gulp lighthouse --gulpfile=gulpfile.cjs"
+    "lighthouse": "gulp lighthouse --gulpfile=gulpfile.cjs",
+    "test": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs",
+    "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --watch",
+    "test:browsers": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --playwright --browsers chromium firefox webkit"
   },
@@ -42,13 +44,18 @@ "author": {
     "@juggle/resize-observer": "^3.0.0",
-    "lit-element": "2.4.0"
+    "lit": "2.0.0-rc.2"
   },
   "devDependencies": {
-    "@lrnwebcomponents/deduping-fix": "^3.0.0",
-    "@lrnwebcomponents/storybook-utilities": "^3.0.6",
+    "@lrnwebcomponents/deduping-fix": "^4.0.0",
+    "@lrnwebcomponents/storybook-utilities": "^4.0.0",
+    "@open-wc/testing": "2.5.33",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
     "@polymer/iron-demo-helpers": "3.1.0",
+    "@web/test-runner": "0.13.5",
+    "@web/test-runner-commands": "0.4.5",
+    "@web/test-runner-playwright": "0.8.6",
+    "@web/test-runner-puppeteer": "0.10.0",
     "@webcomponents/webcomponentsjs": "2.5.0",
     "concurrently": "5.3.0",
     "gulp-babel": "8.0.0",
-    "lodash": "4.17.19",
+    "lodash": "^4.17.21",
     "polymer-cli": "1.9.11",
@@ -65,3 +72,3 @@ "wct-browser-legacy": "1.0.2"
   ],
-  "gitHead": "ce5d24bc5829a7d5ea73218759db007619359682"
+  "gitHead": "e877f54ece91fb0b2f7aba62f9f9fd15060600f2"
 }

responsive-utility.js

@@ -1,2 +0,2 @@
-import { LitElement, html, css } from "lit-element/lit-element.js";
+import { LitElement, html, css } from "lit";
 import { ResizeObserver } from "@juggle/resize-observer";
@@ -3,0 +3,0 @@

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){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})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lit"),require("@juggle/resize-observer")):"function"==typeof define&&define.amd?define(["exports","lit","@juggle/resize-observer"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ResponsiveUtility={},e.lit,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,t){return!t||"object"!=typeof t&&"function"!=typeof t?s(e):t}function u(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 Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,i=r(e);if(t){var o=r(this).constructor;n=Reflect.construct(i,arguments,o)}else n=i.apply(this,arguments);return l(this,n)}}function c(e,t,n){return(c="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)}var a;window.ResponsiveUtility={},window.ResponsiveUtility.instance=null;var f=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)}(p,e);var l,f,d,v=u(p);function p(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,p),(e=v.call(this)).details=[],null==window.ResponsiveUtility.instance&&(window.ResponsiveUtility.instance=s(e)),e}return l=p,d=[{key:"tag",get:function(){return"responsive-utility"}}],(f=[{key:"render",value:function(){return t.html(a||(e=[" <slot></slot> "],n||(n=e.slice(0)),a=Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))));var e,n}},{key:"connectedCallback",value:function(){c(r(p.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)),c(r(p.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(l.prototype,f),d&&i(l,d),p}(t.LitElement);window.customElements.define(f.tag,f),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=f,Object.defineProperty(e,"__esModule",{value:!0})}));

src/responsive-utility.js

@@ -1,2 +0,2 @@
-import { LitElement, html, css } from "lit-element/lit-element.js";
+import { LitElement, html, css } from "lit";
 import { ResizeObserver } from "@juggle/resize-observer";
@@ -3,0 +3,0 @@

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\n\n  * `disableResponsive` {`boolean`} - ",
+      "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\n  * `disable-responsive` {`boolean`} - \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": [
@@ -34,2 +34,7 @@ {
         {
+          "name": "disable-responsive",
+          "description": "`disable-responsive` {`boolean`} - \n\nProperty: disableResponsive\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
           "name": "onresponsive-element",
@@ -36,0 +41,0 @@ "description": "`responsive-element` {`CustomEvent<{ attribute: string; custom: string; element: this; sm: number; md: number; lg: number; xl: number; }>`} - "

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

73862

increased by1.91%

Lines of code

1260

increased by7.78%

Worsened metrics

Dev dependency count

15

increased by50%

Number of package files

22

decreased by-4.35%

Dependency changes

• + Addedlit@2.0.0-rc.2

• + Added@lit-labs/ssr-dom-shim@1.2.1(transitive)

• + Added@lit/reactive-element@1.6.3(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedlit@2.0.0-rc.2(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)

• - Removedlit-element@2.4.0

• - Removedlit-element@2.4.0(transitive)

• - Removedlit-html@1.4.1(transitive)