Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@lrnwebcomponents/responsive-utility
Advanced tools
@lrnwebcomponents/responsive-utility - npm Package Compare versions
Comparing version 2.0.9 to 2.0.10
@@ -10,23 +10,52 @@ { | ||
| { | ||
| "name": "_template", | ||
| "type": "Object", | ||
| "description": "", | ||
| "name": "_parentResizable", | ||
| "type": "Object | null | undefined", | ||
| "description": "The closest ancestor element that implements `IronResizableBehavior`.", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 7, | ||
| "column": 2 | ||
| "line": 41, | ||
| "column": 4 | ||
| }, | ||
| "end": { | ||
| "line": 14, | ||
| "column": 3 | ||
| "line": 44, | ||
| "column": 5 | ||
| } | ||
| }, | ||
| "metadata": { | ||
| "polymer": {} | ||
| } | ||
| "polymer": { | ||
| "observer": "\"_parentResizableChanged\"", | ||
| "attributeType": "Object" | ||
| } | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "_notifyingDescendant", | ||
| "type": "boolean | null | undefined", | ||
| "description": "True if this element is currently notifying its descendant elements of\nresize.", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 50, | ||
| "column": 4 | ||
| }, | ||
| "end": { | ||
| "line": 53, | ||
| "column": 5 | ||
| } | ||
| }, | ||
| "metadata": { | ||
| "polymer": { | ||
| "attributeType": "Boolean" | ||
| } | ||
| }, | ||
| "defaultValue": "false", | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "details", | ||
| "type": "Array", | ||
| "type": "Array | null | undefined", | ||
| "description": "Stores", | ||
@@ -45,3 +74,5 @@ "privacy": "public", | ||
| "metadata": { | ||
| "polymer": {} | ||
| "polymer": { | ||
| "attributeType": "Array" | ||
| } | ||
| }, | ||
@@ -67,5 +98,381 @@ "defaultValue": "[]" | ||
| "metadata": {}, | ||
| "params": [] | ||
| "params": [], | ||
| "return": { | ||
| "type": "void" | ||
| } | ||
| }, | ||
| { | ||
| "name": "attached", | ||
| "description": "", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 68, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 70, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "detached", | ||
| "description": "", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 72, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 81, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "notifyResize", | ||
| "description": "Can be called to manually notify a resizable and its descendant\nresizables of a resize change.", | ||
| "privacy": "public", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 87, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 99, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "assignParentResizable", | ||
| "description": "Used to assign the closest resizable ancestor to this resizable\nif the ancestor detects a request for notifications.", | ||
| "privacy": "public", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 105, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 117, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [ | ||
| { | ||
| "name": "parentResizable" | ||
| } | ||
| ], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "stopResizeNotificationsFor", | ||
| "description": "Used to remove a resizable descendant from the list of descendants\nthat should be notified of a resize change.", | ||
| "privacy": "public", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 123, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 130, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [ | ||
| { | ||
| "name": "target" | ||
| } | ||
| ], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "_subscribeIronResize", | ||
| "description": "Subscribe this element to listen to iron-resize events on the given target.\n\nPreferred over target.listen because the property renamer does not\nunderstand to rename when the target is not specifically \"this\"", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 140, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 142, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [ | ||
| { | ||
| "name": "target", | ||
| "type": "!HTMLElement", | ||
| "description": "Element to listen to for iron-resize events." | ||
| } | ||
| ], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "_unsubscribeIronResize", | ||
| "description": "Unsubscribe this element from listening to to iron-resize events on the\ngiven target.\n\nPreferred over target.unlisten because the property renamer does not\nunderstand to rename when the target is not specifically \"this\"", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 153, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 156, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [ | ||
| { | ||
| "name": "target", | ||
| "type": "!HTMLElement", | ||
| "description": "Element to listen to for iron-resize events." | ||
| } | ||
| ], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "resizerShouldNotify", | ||
| "description": "This method can be overridden to filter nested elements that should or\nshould not be notified by the current element. Return true if an element\nshould be notified, or false if it should not be notified.", | ||
| "privacy": "public", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 167, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 169, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [ | ||
| { | ||
| "name": "element", | ||
| "type": "HTMLElement", | ||
| "description": "A candidate descendant element that\nimplements `IronResizableBehavior`." | ||
| } | ||
| ], | ||
| "return": { | ||
| "type": "boolean", | ||
| "desc": "True if the `element` should be notified of resize." | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "_onDescendantIronResize", | ||
| "description": "", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 171, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 181, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [ | ||
| { | ||
| "name": "event" | ||
| } | ||
| ], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "_fireResize", | ||
| "description": "", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 183, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 185, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "_onIronRequestResizeNotifications", | ||
| "description": "", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 187, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 197, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [ | ||
| { | ||
| "name": "event" | ||
| } | ||
| ], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "_parentResizableChanged", | ||
| "description": "", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 199, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 203, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [ | ||
| { | ||
| "name": "parentResizable" | ||
| } | ||
| ], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "_notifyDescendant", | ||
| "description": "", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 205, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 216, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [ | ||
| { | ||
| "name": "descendant" | ||
| } | ||
| ], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "_requestResizeNotifications", | ||
| "description": "", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 218, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 257, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "_findParent", | ||
| "description": "", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "file": "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js", | ||
| "start": { | ||
| "line": 259, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 271, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [], | ||
| "return": { | ||
| "type": "void" | ||
| }, | ||
| "inheritedFrom": "IronResizableBehavior" | ||
| }, | ||
| { | ||
| "name": "_onIronResize", | ||
@@ -85,3 +492,6 @@ "description": "On resize, sets sizes of any detail element that has changed.", | ||
| "metadata": {}, | ||
| "params": [] | ||
| "params": [], | ||
| "return": { | ||
| "type": "void" | ||
| } | ||
| } | ||
@@ -120,3 +530,3 @@ ], | ||
| "metadata": {}, | ||
| "type": "Array" | ||
| "type": "Array | null | undefined" | ||
| } | ||
@@ -123,0 +533,0 @@ ], |
@@ -14,3 +14,3 @@ { | ||
| }, | ||
| "version": "2.0.9", | ||
| "version": "2.0.10", | ||
| "description": "Automated conversion of responsive-utility/", | ||
@@ -40,10 +40,10 @@ "repository": { | ||
| "@polymer/iron-resizable-behavior": "^3.0.1", | ||
| "@polymer/polymer": "^3.0.5" | ||
| "@polymer/polymer": "^3.2.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@lrnwebcomponents/deduping-fix": "^2.0.9", | ||
| "@lrnwebcomponents/storybook-utilities": "^2.0.9", | ||
| "@lrnwebcomponents/storybook-utilities": "^2.0.10", | ||
| "@polymer/iron-component-page": "github:PolymerElements/iron-component-page", | ||
| "@polymer/iron-demo-helpers": "3.0.2", | ||
| "@webcomponents/webcomponentsjs": "2.2.4", | ||
| "@polymer/iron-demo-helpers": "^3.1.0", | ||
| "@webcomponents/webcomponentsjs": "^2.2.9", | ||
| "concurrently": "4.1.0", | ||
@@ -53,4 +53,3 @@ "gulp-babel": "8.0.0", | ||
| "lodash": "4.17.11", | ||
| "polymer-build": "3.1.1", | ||
| "polymer-cli": "1.9.5", | ||
| "polymer-cli": "1.9.8", | ||
| "wct-browser-legacy": "1.0.2" | ||
@@ -66,3 +65,3 @@ }, | ||
| ], | ||
| "gitHead": "3ba5daaa4388a0e09b103784f482d49b14fb52d5" | ||
| "gitHead": "8571f08ce381877be732c2b5407233bcc3c58d99" | ||
| } |
@@ -1,1 +0,33 @@ | ||
| define(["exports","./node_modules/@polymer/polymer/polymer-legacy.js","./node_modules/@polymer/polymer/lib/utils/async.js","./node_modules/@polymer/iron-resizable-behavior/iron-resizable-behavior.js"],function(_exports,_polymerLegacy,async,_ironResizableBehavior){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.ResponsiveUtility=void 0;async=babelHelpers.interopRequireWildcard(async);function _templateObject_7c136b60459211e9ac5963cfb9d28b4e(){var data=babelHelpers.taggedTemplateLiteral(["\n <style>\n :host {\n display: inline;\n }\n </style>\n <slot></slot>\n "]);_templateObject_7c136b60459211e9ac5963cfb9d28b4e=function _templateObject_7c136b60459211e9ac5963cfb9d28b4e(){return data};return data}window.ResponsiveUtility={};window.ResponsiveUtility.instance=null;var ResponsiveUtility=(0,_polymerLegacy.Polymer)({_template:(0,_polymerLegacy.html)(_templateObject_7c136b60459211e9ac5963cfb9d28b4e()),is:"responsive-utility",behaviors:[_ironResizableBehavior.IronResizableBehavior],listeners:{"iron-resize":"_onIronResize"},properties:{details:{type:Array,value:[]}},created:function created(){var root=this;if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=root}window.addEventListener("responsive-element",function(e){var detail={element:e.detail.element,attribute:e.detail.attribute!==void 0&&null!==e.detail.attribute?e.detail.attribute:"responsive-size",relativeToParent:e.detail.relativeToParent!==void 0&&null!==e.detail.relativeToParent?e.detail.relativeToParent:!0,sm:e.detail.sm!==void 0&&null!==e.detail.sm?e.detail.sm:900,md:e.detail.md!==void 0&&null!==e.detail.md?e.detail.md:1200,lg:e.detail.lg!==void 0&&null!==e.detail.lg?e.detail.lg:1500,xl:e.detail.xl!==void 0&&null!==e.detail.xl?e.detail.lg:1800};if("ResizeObserver"in window&&!0===detail.relativeToParent){var resize=new ResizeObserver(function(){window.ResponsiveUtility.setSize(detail)}),observable=e.detail.parentNode!==void 0&&null!==e.detail.parentNode?e.detail.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?e.detail.element.parentNode.host:e.detail.element.parentNode:e.detail.element;resize.observe(observable)}root.push("details",detail);window.ResponsiveUtility.setSize(detail)});window.addEventListener("delete-responsive-element",function(e){for(var i=0;i<this.details.length;i++){if(e.detail===detail[i])root.splice("details",i,1)}})},_onIronResize:function _onIronResize(){for(var i=0;i<this.details.length;i++){window.ResponsiveUtility.setSize(this.details[i])}}});_exports.ResponsiveUtility=ResponsiveUtility;window.ResponsiveUtility.requestAvailability=function(){if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=document.createElement("responsive-utility")}document.body.appendChild(window.ResponsiveUtility.instance)};window.ResponsiveUtility.setSize=function(detail){var size,width=window.ResponsiveUtility._getWidth(detail);if(width<detail.sm){size="xs"}else if(width<detail.md){size="sm"}else if(width<detail.lg){size="md"}else if(width<detail.xl){size="lg"}else{size="xl"}if(detail.element.getAttribute(detail.attribute)===void 0||size!==detail.element.getAttribute(detail.attribute)){detail.element.setAttribute(detail.attribute,size)}};window.ResponsiveUtility._getWidth=function(detail){var el=detail.element;if(!0===detail.relativeToParent){if(el.offsetWidth!==void 0&&null!==el.offsetWidth&&0<el.offsetWidth){return el.offsetWidth}else if(null!==el.parentNode){return el.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?el.parentNode.host.offsetWidth:el.parentNode.offsetWidth}}return window.outerWidth}}); | ||
| define(["exports","./node_modules/@polymer/polymer/polymer-legacy.js","./node_modules/@polymer/polymer/lib/utils/async.js","./node_modules/@polymer/iron-resizable-behavior/iron-resizable-behavior.js"],function(_exports,_polymerLegacy,async,_ironResizableBehavior){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.ResponsiveUtility=void 0;async=babelHelpers.interopRequireWildcard(async);function _templateObject_3649ff706a8311e9abd379fd47c19cec(){var data=babelHelpers.taggedTemplateLiteral(["\n <style>\n :host {\n display: inline;\n }\n </style>\n <slot></slot>\n "]);_templateObject_3649ff706a8311e9abd379fd47c19cec=function _templateObject_3649ff706a8311e9abd379fd47c19cec(){return data};return data}window.ResponsiveUtility={};window.ResponsiveUtility.instance=null;var ResponsiveUtility=(0,_polymerLegacy.Polymer)({_template:(0,_polymerLegacy.html)(_templateObject_3649ff706a8311e9abd379fd47c19cec()),is:"responsive-utility",behaviors:[_ironResizableBehavior.IronResizableBehavior],listeners:{"iron-resize":"_onIronResize"},properties:{/** | ||
| * Stores | ||
| */details:{type:Array,value:[]}},/** | ||
| * An array of objects. Each object is contains data about an element | ||
| * that will be updated with responsive values. | ||
| * | ||
| * To add an element to this array, fire a 'responsive-element' event | ||
| * with the following data: | ||
| * | ||
| * { | ||
| * "element": (the element itself), | ||
| * "attribute": (the attribute that will be set with the size), | ||
| * "relativeToParent": (true for @element query instead of @media query), | ||
| * "sm": (optional custom sm breakpoint, default is 600), | ||
| * "md": (optional custom md breakpoint, default is 900), | ||
| * "lg": (optional custom lg breakpoint, default is 1200), | ||
| * "xl": (optional custom xl breakpoint, default is 1500), | ||
| * } | ||
| * | ||
| */ /** | ||
| * Makes sure there is a utility ready and listening for elements. | ||
| */created:function created(){var root=this;if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=root}/* handle element registration */window.addEventListener("responsive-element",function(e){var detail={element:e.detail.element,attribute:e.detail.attribute!==void 0&&null!==e.detail.attribute?e.detail.attribute:"responsive-size",relativeToParent:e.detail.relativeToParent!==void 0&&null!==e.detail.relativeToParent?e.detail.relativeToParent:!0,sm:e.detail.sm!==void 0&&null!==e.detail.sm?e.detail.sm:900,md:e.detail.md!==void 0&&null!==e.detail.md?e.detail.md:1200,lg:e.detail.lg!==void 0&&null!==e.detail.lg?e.detail.lg:1500,xl:e.detail.xl!==void 0&&null!==e.detail.xl?e.detail.lg:1800};if("ResizeObserver"in window&&!0===detail.relativeToParent){var resize=new ResizeObserver(function(){window.ResponsiveUtility.setSize(detail)}),observable=e.detail.parentNode!==void 0&&null!==e.detail.parentNode?e.detail.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?e.detail.element.parentNode.host:e.detail.element.parentNode:e.detail.element;resize.observe(observable)}root.push("details",detail);window.ResponsiveUtility.setSize(detail)});/* handle element deregistration */window.addEventListener("delete-responsive-element",function(e){for(var i=0;i<this.details.length;i++){if(e.detail===detail[i])root.splice("details",i,1)}})},/** | ||
| * On resize, sets sizes of any detail element that has changed. | ||
| */_onIronResize:function _onIronResize(){for(var i=0;i<this.details.length;i++){window.ResponsiveUtility.setSize(this.details[i])}}});/** | ||
| * Checks to see if there is an instance available, and if not appends one | ||
| */_exports.ResponsiveUtility=ResponsiveUtility;window.ResponsiveUtility.requestAvailability=function(){if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=document.createElement("responsive-utility")}document.body.appendChild(window.ResponsiveUtility.instance)};/** | ||
| * Sets responsive size of detail. | ||
| */window.ResponsiveUtility.setSize=function(detail){var size,width=window.ResponsiveUtility._getWidth(detail);if(width<detail.sm){size="xs"}else if(width<detail.md){size="sm"}else if(width<detail.lg){size="md"}else if(width<detail.xl){size="lg"}else{size="xl"}if(detail.element.getAttribute(detail.attribute)===void 0||size!==detail.element.getAttribute(detail.attribute)){detail.element.setAttribute(detail.attribute,size)}};/** | ||
| * Returns width of detail. | ||
| * | ||
| * @param {object} the HTML element to check | ||
| * @returns {number} the width of the element or its parent node | ||
| */window.ResponsiveUtility._getWidth=function(detail){var el=detail.element;if(!0===detail.relativeToParent){if(el.offsetWidth!==void 0&&null!==el.offsetWidth&&0<el.offsetWidth){return el.offsetWidth}else if(null!==el.parentNode){return el.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?el.parentNode.host.offsetWidth:el.parentNode.offsetWidth}}return window.outerWidth}}); |
@@ -8,2 +8,34 @@ import{html,Polymer}from"./node_modules/@polymer/polymer/polymer-legacy.js";import*as async from"./node_modules/@polymer/polymer/lib/utils/async.js";import{IronResizableBehavior}from"./node_modules/@polymer/iron-resizable-behavior/iron-resizable-behavior.js";window.ResponsiveUtility={};window.ResponsiveUtility.instance=null;let ResponsiveUtility=Polymer({_template:html` | ||
| <slot></slot> | ||
| `,is:"responsive-utility",behaviors:[IronResizableBehavior],listeners:{"iron-resize":"_onIronResize"},properties:{details:{type:Array,value:[]}},created:function(){let root=this;if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=root}window.addEventListener("responsive-element",function(e){let detail={element:e.detail.element,attribute:e.detail.attribute!==void 0&&null!==e.detail.attribute?e.detail.attribute:"responsive-size",relativeToParent:e.detail.relativeToParent!==void 0&&null!==e.detail.relativeToParent?e.detail.relativeToParent:!0,sm:e.detail.sm!==void 0&&null!==e.detail.sm?e.detail.sm:900,md:e.detail.md!==void 0&&null!==e.detail.md?e.detail.md:1200,lg:e.detail.lg!==void 0&&null!==e.detail.lg?e.detail.lg:1500,xl:e.detail.xl!==void 0&&null!==e.detail.xl?e.detail.lg:1800};if("ResizeObserver"in window&&!0===detail.relativeToParent){let resize=new ResizeObserver(function(){window.ResponsiveUtility.setSize(detail)}),observable=e.detail.parentNode!==void 0&&null!==e.detail.parentNode?e.detail.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?e.detail.element.parentNode.host:e.detail.element.parentNode:e.detail.element;resize.observe(observable)}root.push("details",detail);window.ResponsiveUtility.setSize(detail)});window.addEventListener("delete-responsive-element",function(e){for(let i=0;i<this.details.length;i++){if(e.detail===detail[i])root.splice("details",i,1)}})},_onIronResize:function(){for(let i=0;i<this.details.length;i++){window.ResponsiveUtility.setSize(this.details[i])}}});window.ResponsiveUtility.requestAvailability=function(){if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=document.createElement("responsive-utility")}document.body.appendChild(window.ResponsiveUtility.instance)};window.ResponsiveUtility.setSize=function(detail){let size,width=window.ResponsiveUtility._getWidth(detail);if(width<detail.sm){size="xs"}else if(width<detail.md){size="sm"}else if(width<detail.lg){size="md"}else if(width<detail.xl){size="lg"}else{size="xl"}if(detail.element.getAttribute(detail.attribute)===void 0||size!==detail.element.getAttribute(detail.attribute)){detail.element.setAttribute(detail.attribute,size)}};window.ResponsiveUtility._getWidth=function(detail){let el=detail.element;if(!0===detail.relativeToParent){if(el.offsetWidth!==void 0&&null!==el.offsetWidth&&0<el.offsetWidth){return el.offsetWidth}else if(null!==el.parentNode){return el.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?el.parentNode.host.offsetWidth:el.parentNode.offsetWidth}}return window.outerWidth};export{ResponsiveUtility}; | ||
| `,is:"responsive-utility",behaviors:[IronResizableBehavior],listeners:{"iron-resize":"_onIronResize"},properties:{/** | ||
| * Stores | ||
| */details:{type:Array,value:[]}},/** | ||
| * An array of objects. Each object is contains data about an element | ||
| * that will be updated with responsive values. | ||
| * | ||
| * To add an element to this array, fire a 'responsive-element' event | ||
| * with the following data: | ||
| * | ||
| * { | ||
| * "element": (the element itself), | ||
| * "attribute": (the attribute that will be set with the size), | ||
| * "relativeToParent": (true for @element query instead of @media query), | ||
| * "sm": (optional custom sm breakpoint, default is 600), | ||
| * "md": (optional custom md breakpoint, default is 900), | ||
| * "lg": (optional custom lg breakpoint, default is 1200), | ||
| * "xl": (optional custom xl breakpoint, default is 1500), | ||
| * } | ||
| * | ||
| */ /** | ||
| * Makes sure there is a utility ready and listening for elements. | ||
| */created:function(){let root=this;if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=root}/* handle element registration */window.addEventListener("responsive-element",function(e){let detail={element:e.detail.element,attribute:e.detail.attribute!==void 0&&null!==e.detail.attribute?e.detail.attribute:"responsive-size",relativeToParent:e.detail.relativeToParent!==void 0&&null!==e.detail.relativeToParent?e.detail.relativeToParent:!0,sm:e.detail.sm!==void 0&&null!==e.detail.sm?e.detail.sm:900,md:e.detail.md!==void 0&&null!==e.detail.md?e.detail.md:1200,lg:e.detail.lg!==void 0&&null!==e.detail.lg?e.detail.lg:1500,xl:e.detail.xl!==void 0&&null!==e.detail.xl?e.detail.lg:1800};if("ResizeObserver"in window&&!0===detail.relativeToParent){let resize=new ResizeObserver(function(){window.ResponsiveUtility.setSize(detail)}),observable=e.detail.parentNode!==void 0&&null!==e.detail.parentNode?e.detail.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?e.detail.element.parentNode.host:e.detail.element.parentNode:e.detail.element;resize.observe(observable)}root.push("details",detail);window.ResponsiveUtility.setSize(detail)});/* handle element deregistration */window.addEventListener("delete-responsive-element",function(e){for(let i=0;i<this.details.length;i++){if(e.detail===detail[i])root.splice("details",i,1)}})},/** | ||
| * On resize, sets sizes of any detail element that has changed. | ||
| */_onIronResize:function(){for(let i=0;i<this.details.length;i++){window.ResponsiveUtility.setSize(this.details[i])}}});/** | ||
| * Checks to see if there is an instance available, and if not appends one | ||
| */window.ResponsiveUtility.requestAvailability=function(){if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=document.createElement("responsive-utility")}document.body.appendChild(window.ResponsiveUtility.instance)};/** | ||
| * Sets responsive size of detail. | ||
| */window.ResponsiveUtility.setSize=function(detail){let size,width=window.ResponsiveUtility._getWidth(detail);if(width<detail.sm){size="xs"}else if(width<detail.md){size="sm"}else if(width<detail.lg){size="md"}else if(width<detail.xl){size="lg"}else{size="xl"}if(detail.element.getAttribute(detail.attribute)===void 0||size!==detail.element.getAttribute(detail.attribute)){detail.element.setAttribute(detail.attribute,size)}};/** | ||
| * Returns width of detail. | ||
| * | ||
| * @param {object} the HTML element to check | ||
| * @returns {number} the width of the element or its parent node | ||
| */window.ResponsiveUtility._getWidth=function(detail){let el=detail.element;if(!0===detail.relativeToParent){if(el.offsetWidth!==void 0&&null!==el.offsetWidth&&0<el.offsetWidth){return el.offsetWidth}else if(null!==el.parentNode){return el.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?el.parentNode.host.offsetWidth:el.parentNode.offsetWidth}}return window.outerWidth};export{ResponsiveUtility}; |
@@ -7,3 +7,3 @@ import { ResponsiveUtility } from "./responsive-utility.js"; | ||
| /** | ||
| * add to the pattern library | ||
| * add to the pattern library | ||
| */ | ||
@@ -22,4 +22,4 @@ /*const Pattern = { | ||
| /*const Story = { | ||
| "of": "a11y-collpase", //component folder | ||
| "name": "a11y-collpase", //component tag | ||
| "of": "Web Components", //component folder | ||
| "name": "a11y-collapse", //component tag | ||
| "props": A11yCollapse.properties, //component properties that will become knobs | ||
@@ -37,2 +37,2 @@ "slots": { //slots that will become knobs | ||
| } | ||
| window.StorybookUtilities.instance.addLiveDemo(Story);*/ | ||
| window.StorybookUtilities.instance.addLiveDemo(Story);*/ |
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
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 3 instances 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 by47.62%
99561
- Dev dependency count
- decreased by-8.33%
11
- Number of package files
- increased by8.7%
25
- Lines of code
- increased by52.98%
1285
Worsened metrics
- Number of medium supply chain risk alerts
- increased by150%
5
Dependency changes
Updated@polymer/polymer@^3.2.0