@lrnwebcomponents/a11y-gif-player - npm Package Compare versions

Comparing version 2.4.0 to 2.4.1

a11y-gif-player.es6.js

@@ -9,3 +9,2 @@ /**
  * `a11y-gif-player`
- * @customElement a11y-gif-player
  * plays gifs in an accessible way by having the user click to play their animation
@@ -35,2 +34,3 @@ ### Styling
  * @demo ./demo/index.html
+ * @customElement a11y-gif-player
  */
@@ -48,3 +48,3 @@ class A11yGifPlayer extends SchemaBehaviors(LitElement) {
     this.noImage = true;
-    import("@polymer/paper-tooltip/paper-tooltip.js");
+    import("@lrnwebcomponents/simple-tooltip/simple-tooltip.js");
     import("@polymer/iron-image/iron-image.js");
@@ -129,7 +129,7 @@ }
         }
-        paper-tooltip {
-          --paper-tooltip-background: #000000;
-          --paper-tooltip-opacity: 1;
-          --paper-tooltip-text-color: #ffffff;
-          --paper-tooltip-delay-in: 0;
+        simple-tooltip {
+          --simple-tooltip-background: #000000;
+          --simple-tooltip-opacity: 1;
+          --simple-tooltip-text-color: #ffffff;
+          --simple-tooltip-delay-in: 0;
         }
@@ -175,7 +175,7 @@ `
 
-      <paper-tooltip for="button" offset="30" animation-delay="0">
+      <simple-tooltip for="button" offset="30" animation-delay="0">
         ${this.__playing && this.tooltipPlaying
           ? this.tooltipPlaying
           : this.tooltip}
-      </paper-tooltip>
+      </simple-tooltip>
     `;
@@ -182,0 +182,0 @@ }

a11y-gif-player.js

@@ -9,3 +9,2 @@ /**
  * `a11y-gif-player`
- * @customElement a11y-gif-player
  * plays gifs in an accessible way by having the user click to play their animation
@@ -35,2 +34,3 @@ ### Styling
  * @demo ./demo/index.html
+ * @customElement a11y-gif-player
  */
@@ -48,3 +48,3 @@ class A11yGifPlayer extends SchemaBehaviors(LitElement) {
     this.noImage = true;
-    import("@polymer/paper-tooltip/paper-tooltip.js");
+    import("@lrnwebcomponents/simple-tooltip/simple-tooltip.js");
     import("@polymer/iron-image/iron-image.js");
@@ -129,7 +129,7 @@ }
         }
-        paper-tooltip {
-          --paper-tooltip-background: #000000;
-          --paper-tooltip-opacity: 1;
-          --paper-tooltip-text-color: #ffffff;
-          --paper-tooltip-delay-in: 0;
+        simple-tooltip {
+          --simple-tooltip-background: #000000;
+          --simple-tooltip-opacity: 1;
+          --simple-tooltip-text-color: #ffffff;
+          --simple-tooltip-delay-in: 0;
         }
@@ -175,7 +175,7 @@ `
 
-      <paper-tooltip for="button" offset="30" animation-delay="0">
+      <simple-tooltip for="button" offset="30" animation-delay="0">
         ${this.__playing && this.tooltipPlaying
           ? this.tooltipPlaying
           : this.tooltip}
-      </paper-tooltip>
+      </simple-tooltip>
     `;
@@ -182,0 +182,0 @@ }

a11y-gif-player.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("lit-element/lit-element.js"),require("@lrnwebcomponents/schema-behaviors/schema-behaviors.js")):"function"==typeof define&&define.amd?define(["exports","lit-element/lit-element.js","@lrnwebcomponents/schema-behaviors/schema-behaviors.js"],e):e((t=t||self).A11YGifPlayer={},t.litElement_js,t.schemaBehaviors_js)}(this,function(t,e,n){"use strict";function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function o(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,i)}return n}function a(t){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function l(t,e){return(l=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function u(t,e,n){return(u="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var i=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=a(t)););return t}(t,e);if(i){var o=Object.getOwnPropertyDescriptor(i,e);return o.get?o.get.call(n):o.value}})(t,e,n||t)}function c(t,e){return e||(e=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}function p(){var t=c(['\n        :host {\n          display: inline-flex;\n        }\n        *[hidden] {\n          display: none;\n        }\n        button {\n          padding: 0;\n          display: flex;\n          align-items: stretch;\n          position: relative;\n          width: auto;\n          border: var(--a11y-gif-player-border, none);\n          border-radius: var(--a11y-gif-player-border-radius, 0);\n        }\n        button:active,\n        button:focus,\n        button:hover {\n          border: var(--a11y-gif-player-focus-border, none);\n          cursor: var(--a11y-gif-player-cursor, pointer);\n          outline: var(--a11y-gif-player-outline, 3px solid);\n        }\n        button[disabled] {\n          cursor: var(--a11y-gif-player-disabled-cursor, not-allowed);\n        }\n        button > * {\n          width: 100%;\n          min-width: 100%;\n          min-height: 100%;\n          flex: 1 1 100%;\n        }\n        div {\n          display: flex;\n          align-items: center;\n          flex-direction: column;\n          position: absolute;\n        }\n        svg {\n          flex: 1 1 100%;\n          width: var(--a11y-gif-player-arrow-size, 30%);\n          height: var(--a11y-gif-player-arrow-size, 30%);\n        }\n        g {\n          opacity: var(--a11y-gif-player-arrow-opacity, 0.5);\n        }\n        button:not([disabled]):active g,\n        button:not([disabled]):hover g,\n        button:not([disabled]):focus g {\n          opacity: var(--a11y-gif-player-button-focus-opacity, 0.7);\n        }\n        polygon {\n          fill: var(--a11y-gif-player-button-color, #000000);\n          stroke: var(--a11y-gif-player-arrow-border-color, #ffffff);\n          stroke-width: var(--a11y-gif-player-arrow-border-width, 15px);\n        }\n        text {\n          fill: var(--a11y-gif-player-button-text-color, #ffffff);\n        }\n        img {\n          position: absolute;\n        }\n        button[aria-pressed="true"] svg,\n        button[aria-pressed="true"] img {\n          opacity: 0;\n        }\n        button[data-no-image] .button-bg {\n          background-color: var(--a11y-gif-player-button-bg, #cccccc);\n        }\n        button[aria-pressed="true"][data-no-image] .button-bg {\n          background-color: transparent;\n        }\n        paper-tooltip {\n          --paper-tooltip-background: #000000;\n          --paper-tooltip-opacity: 1;\n          --paper-tooltip-text-color: #ffffff;\n          --paper-tooltip-delay-in: 0;\n        }\n      ']);return p=function(){return t},t}function f(){var t=c([""]);return f=function(){return t},t}function y(){var t=c(['\n              <img\n                id="static"\n                loading="lazy"\n                alt="','"\n                src="','"\n              />\n            ']);return y=function(){return t},t}function d(){var t=c(['\n      <button\n        id="button"\n        aria-controls="gif"\n        aria-pressed="','"\n        @click="','"\n        ?data-no-image="','"\n        ?disabled="','"\n      >\n        <iron-image id="gif" src="','" ?hidden="','">\n        </iron-image>\n        ','\n        <div class="button-bg">\n          <svg\n            id="svg"\n            xmlns="http://www.w3.org/2000/svg"\n            viewBox="0 0 200 200"\n          >\n            <g>\n              <polygon points="30,20 30,180 170,100"></polygon>\n              <text x="50" y="115" font-size="40px">GIF</text>\n            </g>\n          </svg>\n        </div>\n      </button>\n\n      <paper-tooltip for="button" offset="30" animation-delay="0">\n        ',"\n      </paper-tooltip>\n    "]);return d=function(){return t},t}var g=function(t){function c(){var t;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,c),(t=s(this,a(c).call(this))).alt=null,t.disabled=!1,t.src=null,t.tooltip="Toggle animation",t.tooltipPlaying=null,t.srcWithoutAnimation=null,t.__playing=!1,t.noImage=!0,import("@polymer/paper-tooltip/paper-tooltip.js"),import("@polymer/iron-image/iron-image.js"),t}var g,b,h;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&l(t,e)}(c,n.SchemaBehaviors(e.LitElement)),g=c,h=[{key:"styles",get:function(){return[e.css(p())]}},{key:"tag",get:function(){return"a11y-gif-player"}},{key:"properties",get:function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?r(Object(n),!0).forEach(function(e){o(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}({},u(a(c),"properties",this),{alt:{type:String},disabled:{type:Boolean},src:{type:String},srcWithoutAnimation:{type:String,attribute:"src-without-animation"},tooltip:{type:String},tooltipPlaying:{type:String,attribute:"tooltip-playing"},__playing:{type:Boolean},noImage:{type:Boolean}})}},{key:"haxProperties",get:function(){return{canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Accessible GIF",description:"Makes animated GIFs accessible.",icon:"gif",color:"grey",groups:["Images","Media"],handles:[{type:"image",source:"src",source2:"srcWithoutAnimation",alt:"alt"}],meta:{author:"ELMS:LN"}},settings:{quick:[{property:"src",title:"Animated GIF",description:"The URL to your animated GIF.",inputMethod:"textfield",icon:"link",validationType:"url",required:!0},{property:"srcWithoutAnimation",title:"Still Image",description:"The URL to a still image version of your GIF.",inputMethod:"textfield",icon:"link",validationType:"url",required:!0},{property:"alt",title:"Alt Text",description:"Alternative text for the image.",inputMethod:"textfield",icon:"accessibility",required:!0}],configure:[{property:"src",title:"Animated GIF",description:"The URL to your animated GIF.",inputMethod:"haxupload",icon:"link",validationType:"url",required:!0},{property:"srcWithoutAnimation",title:"Still Image",description:"The URL to a still image version of your GIF.",inputMethod:"haxupload",icon:"link",validationType:"url",required:!0},{property:"alt",title:"Alt Text",description:"Alternative text for the image.",inputMethod:"alt",icon:"accessibility",required:!0}],advanced:[]}}}}],(b=[{key:"render",value:function(){return e.html(d(),this.__playing?"true":"false",this.toggle,this.noImage,this.disabled||!this.src,this.src,!this.src,this.noImage?e.html(f()):e.html(y(),this.alt,this.srcWithoutAnimation),this.__playing&&this.tooltipPlaying?this.tooltipPlaying:this.tooltip)}},{key:"updated",value:function(t){var e=this;t.forEach(function(t,n){"srcWithoutAnimation"==n&&(null!=e[n]&&""!=e[n]?e.noImage=!1:e.noImage=!0)})}},{key:"play",value:function(){this.__playing=!0}},{key:"stop",value:function(){this.__playing=!1}},{key:"toggle",value:function(){this.__playing?this.stop():this.play()}},{key:"toggleAnimation",value:function(){this.__playing?this.stop():this.play()}}])&&i(g.prototype,b),h&&i(g,h),c}();window.customElements.define(g.tag,g),t.A11yGifPlayer=g,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("lit-element/lit-element.js"),require("@lrnwebcomponents/schema-behaviors/schema-behaviors.js")):"function"==typeof define&&define.amd?define(["exports","lit-element/lit-element.js","@lrnwebcomponents/schema-behaviors/schema-behaviors.js"],e):e((t=t||self).A11YGifPlayer={},t.litElement_js,t.schemaBehaviors_js)}(this,function(t,e,n){"use strict";function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function o(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,i)}return n}function a(t){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function l(t,e){return(l=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function u(t,e,n){return(u="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var i=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=a(t)););return t}(t,e);if(i){var o=Object.getOwnPropertyDescriptor(i,e);return o.get?o.get.call(n):o.value}})(t,e,n||t)}function c(t,e){return e||(e=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}function p(){var t=c(['\n        :host {\n          display: inline-flex;\n        }\n        *[hidden] {\n          display: none;\n        }\n        button {\n          padding: 0;\n          display: flex;\n          align-items: stretch;\n          position: relative;\n          width: auto;\n          border: var(--a11y-gif-player-border, none);\n          border-radius: var(--a11y-gif-player-border-radius, 0);\n        }\n        button:active,\n        button:focus,\n        button:hover {\n          border: var(--a11y-gif-player-focus-border, none);\n          cursor: var(--a11y-gif-player-cursor, pointer);\n          outline: var(--a11y-gif-player-outline, 3px solid);\n        }\n        button[disabled] {\n          cursor: var(--a11y-gif-player-disabled-cursor, not-allowed);\n        }\n        button > * {\n          width: 100%;\n          min-width: 100%;\n          min-height: 100%;\n          flex: 1 1 100%;\n        }\n        div {\n          display: flex;\n          align-items: center;\n          flex-direction: column;\n          position: absolute;\n        }\n        svg {\n          flex: 1 1 100%;\n          width: var(--a11y-gif-player-arrow-size, 30%);\n          height: var(--a11y-gif-player-arrow-size, 30%);\n        }\n        g {\n          opacity: var(--a11y-gif-player-arrow-opacity, 0.5);\n        }\n        button:not([disabled]):active g,\n        button:not([disabled]):hover g,\n        button:not([disabled]):focus g {\n          opacity: var(--a11y-gif-player-button-focus-opacity, 0.7);\n        }\n        polygon {\n          fill: var(--a11y-gif-player-button-color, #000000);\n          stroke: var(--a11y-gif-player-arrow-border-color, #ffffff);\n          stroke-width: var(--a11y-gif-player-arrow-border-width, 15px);\n        }\n        text {\n          fill: var(--a11y-gif-player-button-text-color, #ffffff);\n        }\n        img {\n          position: absolute;\n        }\n        button[aria-pressed="true"] svg,\n        button[aria-pressed="true"] img {\n          opacity: 0;\n        }\n        button[data-no-image] .button-bg {\n          background-color: var(--a11y-gif-player-button-bg, #cccccc);\n        }\n        button[aria-pressed="true"][data-no-image] .button-bg {\n          background-color: transparent;\n        }\n        simple-tooltip {\n          --simple-tooltip-background: #000000;\n          --simple-tooltip-opacity: 1;\n          --simple-tooltip-text-color: #ffffff;\n          --simple-tooltip-delay-in: 0;\n        }\n      ']);return p=function(){return t},t}function f(){var t=c([""]);return f=function(){return t},t}function y(){var t=c(['\n              <img\n                id="static"\n                loading="lazy"\n                alt="','"\n                src="','"\n              />\n            ']);return y=function(){return t},t}function d(){var t=c(['\n      <button\n        id="button"\n        aria-controls="gif"\n        aria-pressed="','"\n        @click="','"\n        ?data-no-image="','"\n        ?disabled="','"\n      >\n        <iron-image id="gif" src="','" ?hidden="','">\n        </iron-image>\n        ','\n        <div class="button-bg">\n          <svg\n            id="svg"\n            xmlns="http://www.w3.org/2000/svg"\n            viewBox="0 0 200 200"\n          >\n            <g>\n              <polygon points="30,20 30,180 170,100"></polygon>\n              <text x="50" y="115" font-size="40px">GIF</text>\n            </g>\n          </svg>\n        </div>\n      </button>\n\n      <simple-tooltip for="button" offset="30" animation-delay="0">\n        ',"\n      </simple-tooltip>\n    "]);return d=function(){return t},t}var g=function(t){function c(){var t;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,c),(t=s(this,a(c).call(this))).alt=null,t.disabled=!1,t.src=null,t.tooltip="Toggle animation",t.tooltipPlaying=null,t.srcWithoutAnimation=null,t.__playing=!1,t.noImage=!0,import("@lrnwebcomponents/simple-tooltip/simple-tooltip.js"),import("@polymer/iron-image/iron-image.js"),t}var g,b,h;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&l(t,e)}(c,n.SchemaBehaviors(e.LitElement)),g=c,h=[{key:"styles",get:function(){return[e.css(p())]}},{key:"tag",get:function(){return"a11y-gif-player"}},{key:"properties",get:function(){return function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?r(Object(n),!0).forEach(function(e){o(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}({},u(a(c),"properties",this),{alt:{type:String},disabled:{type:Boolean},src:{type:String},srcWithoutAnimation:{type:String,attribute:"src-without-animation"},tooltip:{type:String},tooltipPlaying:{type:String,attribute:"tooltip-playing"},__playing:{type:Boolean},noImage:{type:Boolean}})}},{key:"haxProperties",get:function(){return{canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Accessible GIF",description:"Makes animated GIFs accessible.",icon:"gif",color:"grey",groups:["Images","Media"],handles:[{type:"image",source:"src",source2:"srcWithoutAnimation",alt:"alt"}],meta:{author:"ELMS:LN"}},settings:{quick:[{property:"src",title:"Animated GIF",description:"The URL to your animated GIF.",inputMethod:"textfield",icon:"link",validationType:"url",required:!0},{property:"srcWithoutAnimation",title:"Still Image",description:"The URL to a still image version of your GIF.",inputMethod:"textfield",icon:"link",validationType:"url",required:!0},{property:"alt",title:"Alt Text",description:"Alternative text for the image.",inputMethod:"textfield",icon:"accessibility",required:!0}],configure:[{property:"src",title:"Animated GIF",description:"The URL to your animated GIF.",inputMethod:"haxupload",icon:"link",validationType:"url",required:!0},{property:"srcWithoutAnimation",title:"Still Image",description:"The URL to a still image version of your GIF.",inputMethod:"haxupload",icon:"link",validationType:"url",required:!0},{property:"alt",title:"Alt Text",description:"Alternative text for the image.",inputMethod:"alt",icon:"accessibility",required:!0}],advanced:[]}}}}],(b=[{key:"render",value:function(){return e.html(d(),this.__playing?"true":"false",this.toggle,this.noImage,this.disabled||!this.src,this.src,!this.src,this.noImage?e.html(f()):e.html(y(),this.alt,this.srcWithoutAnimation),this.__playing&&this.tooltipPlaying?this.tooltipPlaying:this.tooltip)}},{key:"updated",value:function(t){var e=this;t.forEach(function(t,n){"srcWithoutAnimation"==n&&(null!=e[n]&&""!=e[n]?e.noImage=!1:e.noImage=!0)})}},{key:"play",value:function(){this.__playing=!0}},{key:"stop",value:function(){this.__playing=!1}},{key:"toggle",value:function(){this.__playing?this.stop():this.play()}},{key:"toggleAnimation",value:function(){this.__playing?this.stop():this.play()}}])&&i(g.prototype,b),h&&i(g,h),c}();window.customElements.define(g.tag,g),t.A11yGifPlayer=g,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=a11y-gif-player.umd.js.map

analysis.json

@@ -5,3 +5,3 @@ {
     {
-      "description": "`a11y-gif-player`",
+      "description": "`a11y-gif-player`\nplays gifs in an accessible way by having the user click to play their animation\n### Styling\n\n`<a11y-gif-player>` provides the following custom properties\nfor styling:\n\nCustom property | Description | Default\n----------------|-------------|----------\n`--a11y-gif-player-border` | border around player/button | none\n`--a11y-gif-player-border-radius` | border-radius for player/button | 0\n`--a11y-gif-player-focus-border` | border-radius for player/button when hovered or focused | none\n`--a11y-gif-player-cursor` | cursor for player/button when hovered or focused | pointer\n`--a11y-gif-player-outline` | outline for player/button when hovered or focused | \n`--a11y-gif-player-disabled-cursor` | cursor for player/button when disabled | not-allowed\n`--a11y-gif-player-arrow-size` | arrow icon size | 30%\n`--a11y-gif-player-arrow-opacity` | default arrow icon opacity | 0.5\n`--a11y-gif-player-button-focus-opacity` | arrow icon opacity when hovered or focused | 0.7\n`--a11y-gif-player-button-color` | arrow icon color | #000000\n`--a11y-gif-player-arrow-border-color` | arrow icon border color | #ffffff\n`--a11y-gif-player-arrow-border-width` | arrow icon border width | 15px\n`--a11y-gif-player-button-text-color` | arrow icon text color | #ffffff\n`--a11y-gif-player-button-bg` | button background color when no static image | #cccccc",
       "summary": "",
@@ -443,5 +443,5 @@ "path": "a11y-gif-player.js",
       "slots": [],
-      "tagname": "a11y-gif-player\nplays gifs in an accessible way by having the user click to play their animation\n### Styling\n\n`<a11y-gif-player>` provides the following custom properties\nfor styling:\n\nCustom property | Description | Default\n----------------|-------------|----------\n`--a11y-gif-player-border` | border around player/button | none\n`--a11y-gif-player-border-radius` | border-radius for player/button | 0\n`--a11y-gif-player-focus-border` | border-radius for player/button when hovered or focused | none\n`--a11y-gif-player-cursor` | cursor for player/button when hovered or focused | pointer\n`--a11y-gif-player-outline` | outline for player/button when hovered or focused | \n`--a11y-gif-player-disabled-cursor` | cursor for player/button when disabled | not-allowed\n`--a11y-gif-player-arrow-size` | arrow icon size | 30%\n`--a11y-gif-player-arrow-opacity` | default arrow icon opacity | 0.5\n`--a11y-gif-player-button-focus-opacity` | arrow icon opacity when hovered or focused | 0.7\n`--a11y-gif-player-button-color` | arrow icon color | #000000\n`--a11y-gif-player-arrow-border-color` | arrow icon border color | #ffffff\n`--a11y-gif-player-arrow-border-width` | arrow icon border width | 15px\n`--a11y-gif-player-button-text-color` | arrow icon text color | #ffffff\n`--a11y-gif-player-button-bg` | button background color when no static image | #cccccc"
+      "tagname": "a11y-gif-player"
     }
   ]
 }

gulpfile.js

@@ -63,21 +63,3 @@ const gulp = require("gulp");
           }
-          let styleRegex = /\/\*[\s]*LIST SHARED STYLES BELOW[\s]*((?:(?:\w+)[\s,]*)*)\*\//g,
-            styleArray =
-              cssResult.match(styleRegex) &&
-              cssResult.match(styleRegex).length > 0
-                ? cssResult
-                    .match(styleRegex)[0]
-                    .replace(styleRegex, "$1")
-                    .match(/(\w+)[\s,]*/g)
-                : [];
-          sharedStyles =
-            styleArray && styleArray.length > 0
-              ? styleArray.map(style =>
-                  style.replace(
-                    /(\w+)[\s,]*/g,
-                    `
-        $1`
-                  )
-                )
-              : ``;
+
           cssResult = stripCssComments(cssResult).trim();
@@ -90,3 +72,9 @@ let litResult =
   static get styles() {
-    return  [${sharedStyles ? `${sharedStyles},` : ``}
+    return  [
+      ${
+        packageJson.wcfactory.sharedStyles &&
+        packageJson.wcfactory.sharedStyles.length > 0
+          ? `${packageJson.wcfactory.sharedStyles.join(",")},`
+          : ``
+      }
       css\`
@@ -93,0 +81,0 @@ ${cssResult}

package.json

@@ -12,5 +12,6 @@ {
       "js": "src/a11y-gif-player.js"
-    }
+    },
+    "sharedStyles": []
   },
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Play gifs in an accessible way by having the user click to play their animation",
@@ -29,5 +30,5 @@ "repository": {
     "build": "../../node_modules/.bin/gulp && ../../node_modules/.bin/rollup -c && ../../node_modules/.bin/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\"",
+    "dev": "../../node_modules/.bin/concurrently --kill-others \"yarn run watch\" \"yarn run serve\"",
     "watch": "../../node_modules/.bin/gulp dev",
-    "serve": "polymer serve --npm --module-resolution=node --open",
+    "serve": "../../node_modules/.bin/es-dev-server -c ../../es-dev-server.config.js",
     "lighthouse": "../../node_modules/.bin/gulp lighthouse"
@@ -40,5 +41,5 @@ },
   "dependencies": {
-    "@lrnwebcomponents/schema-behaviors": "^2.4.0",
+    "@lrnwebcomponents/schema-behaviors": "^2.4.1",
+    "@lrnwebcomponents/simple-tooltip": "^2.4.1",
     "@polymer/iron-image": "^3.0.0",
-    "@polymer/paper-tooltip": "^3.0.1",
     "lit-element": "2.2.1"
@@ -48,3 +49,3 @@ },
     "@lrnwebcomponents/deduping-fix": "^2.4.0",
-    "@lrnwebcomponents/storybook-utilities": "^2.4.0",
+    "@lrnwebcomponents/storybook-utilities": "^2.4.1",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
@@ -69,3 +70,3 @@ "@polymer/iron-demo-helpers": "3.1.0",
   ],
-  "gitHead": "d3bc01d12a0d042ba1fdb4f0dda36cfa5824047f"
+  "gitHead": "27af689f6d96197fba00cc508a953cdd008f21b1"
 }

src/a11y-gif-player.js

@@ -9,3 +9,2 @@ /**
  * `a11y-gif-player`
- * @customElement a11y-gif-player
  * plays gifs in an accessible way by having the user click to play their animation
@@ -35,2 +34,3 @@ ### Styling
  * @demo ./demo/index.html
+ * @customElement a11y-gif-player
  */
@@ -48,3 +48,3 @@ class A11yGifPlayer extends SchemaBehaviors(LitElement) {
     this.noImage = true;
-    import("@polymer/paper-tooltip/paper-tooltip.js");
+    import("@lrnwebcomponents/simple-tooltip/simple-tooltip.js");
     import("@polymer/iron-image/iron-image.js");
@@ -129,7 +129,7 @@ }
         }
-        paper-tooltip {
-          --paper-tooltip-background: #000000;
-          --paper-tooltip-opacity: 1;
-          --paper-tooltip-text-color: #ffffff;
-          --paper-tooltip-delay-in: 0;
+        simple-tooltip {
+          --simple-tooltip-background: #000000;
+          --simple-tooltip-opacity: 1;
+          --simple-tooltip-text-color: #ffffff;
+          --simple-tooltip-delay-in: 0;
         }
@@ -175,7 +175,7 @@ `
 
-      <paper-tooltip for="button" offset="30" animation-delay="0">
+      <simple-tooltip for="button" offset="30" animation-delay="0">
         ${this.__playing && this.tooltipPlaying
           ? this.tooltipPlaying
           : this.tooltip}
-      </paper-tooltip>
+      </simple-tooltip>
     `;
@@ -182,0 +182,0 @@ }

vscode-html-custom-data.json

@@ -6,3 +6,3 @@ {
       "name": "a11y-gif-player",
-      "description": "`a11y-gif-player`\n\nAttributes:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `src` {`string`} - Source of animated gif\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `tooltip-playing` {`string`} - tooltip when playing\n\n  * `src-without-animation` {`string`} - Source of static version of image\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `noImage` {`boolean`} - Boolean for if theres a source image or not\n\nProperties:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `src` {`string`} - Source of animated gif\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `tooltipPlaying` {`string`} - tooltip when playing\n\n  * `srcWithoutAnimation` {`string`} - Source of static version of image\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `noImage` {`boolean`} - Boolean for if theres a source image or not",
+      "description": "`a11y-gif-player`\nplays gifs in an accessible way by having the user click to play their animation\n### Styling\n\n`<a11y-gif-player>` provides the following custom properties\nfor styling:\n\nCustom property | Description | Default\n----------------|-------------|----------\n`--a11y-gif-player-border` | border around player/button | none\n`--a11y-gif-player-border-radius` | border-radius for player/button | 0\n`--a11y-gif-player-focus-border` | border-radius for player/button when hovered or focused | none\n`--a11y-gif-player-cursor` | cursor for player/button when hovered or focused | pointer\n`--a11y-gif-player-outline` | outline for player/button when hovered or focused | \n`--a11y-gif-player-disabled-cursor` | cursor for player/button when disabled | not-allowed\n`--a11y-gif-player-arrow-size` | arrow icon size | 30%\n`--a11y-gif-player-arrow-opacity` | default arrow icon opacity | 0.5\n`--a11y-gif-player-button-focus-opacity` | arrow icon opacity when hovered or focused | 0.7\n`--a11y-gif-player-button-color` | arrow icon color | #000000\n`--a11y-gif-player-arrow-border-color` | arrow icon border color | #ffffff\n`--a11y-gif-player-arrow-border-width` | arrow icon border width | 15px\n`--a11y-gif-player-button-text-color` | arrow icon text color | #ffffff\n`--a11y-gif-player-button-bg` | button background color when no static image | #cccccc\n\nAttributes:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `src` {`string`} - Source of animated gif\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `tooltip-playing` {`string`} - tooltip when playing\n\n  * `src-without-animation` {`string`} - Source of static version of image\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `noImage` {`boolean`} - Boolean for if theres a source image or not\n\nProperties:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `src` {`string`} - Source of animated gif\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `tooltipPlaying` {`string`} - tooltip when playing\n\n  * `srcWithoutAnimation` {`string`} - Source of static version of image\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `noImage` {`boolean`} - Boolean for if theres a source image or not",
       "attributes": [
@@ -48,3 +48,3 @@ {
       "name": "a11y-gif-player",
-      "description": "`a11y-gif-player`\n\nAttributes:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `src` {`string`} - Source of animated gif\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `tooltip-playing` {`string`} - tooltip when playing\n\n  * `src-without-animation` {`string`} - Source of static version of image\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `noImage` {`boolean`} - Boolean for if theres a source image or not\n\nProperties:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `src` {`string`} - Source of animated gif\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `tooltipPlaying` {`string`} - tooltip when playing\n\n  * `srcWithoutAnimation` {`string`} - Source of static version of image\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `noImage` {`boolean`} - Boolean for if theres a source image or not",
+      "description": "`a11y-gif-player`\nplays gifs in an accessible way by having the user click to play their animation\n### Styling\n\n`<a11y-gif-player>` provides the following custom properties\nfor styling:\n\nCustom property | Description | Default\n----------------|-------------|----------\n`--a11y-gif-player-border` | border around player/button | none\n`--a11y-gif-player-border-radius` | border-radius for player/button | 0\n`--a11y-gif-player-focus-border` | border-radius for player/button when hovered or focused | none\n`--a11y-gif-player-cursor` | cursor for player/button when hovered or focused | pointer\n`--a11y-gif-player-outline` | outline for player/button when hovered or focused | \n`--a11y-gif-player-disabled-cursor` | cursor for player/button when disabled | not-allowed\n`--a11y-gif-player-arrow-size` | arrow icon size | 30%\n`--a11y-gif-player-arrow-opacity` | default arrow icon opacity | 0.5\n`--a11y-gif-player-button-focus-opacity` | arrow icon opacity when hovered or focused | 0.7\n`--a11y-gif-player-button-color` | arrow icon color | #000000\n`--a11y-gif-player-arrow-border-color` | arrow icon border color | #ffffff\n`--a11y-gif-player-arrow-border-width` | arrow icon border width | 15px\n`--a11y-gif-player-button-text-color` | arrow icon text color | #ffffff\n`--a11y-gif-player-button-bg` | button background color when no static image | #cccccc\n\nAttributes:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `src` {`string`} - Source of animated gif\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `tooltip-playing` {`string`} - tooltip when playing\n\n  * `src-without-animation` {`string`} - Source of static version of image\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `noImage` {`boolean`} - Boolean for if theres a source image or not\n\nProperties:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `src` {`string`} - Source of animated gif\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `tooltipPlaying` {`string`} - tooltip when playing\n\n  * `srcWithoutAnimation` {`string`} - Source of static version of image\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `noImage` {`boolean`} - Boolean for if theres a source image or not",
       "attributes": [
@@ -94,3 +94,3 @@ {
       "name": "a11y-gif-player",
-      "description": "`a11y-gif-player`\n\nAttributes:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `src` {`string`} - Source of animated gif\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `tooltip-playing` {`string`} - tooltip when playing\n\n  * `src-without-animation` {`string`} - Source of static version of image\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `noImage` {`boolean`} - Boolean for if theres a source image or not\n\nProperties:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `src` {`string`} - Source of animated gif\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `tooltipPlaying` {`string`} - tooltip when playing\n\n  * `srcWithoutAnimation` {`string`} - Source of static version of image\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `noImage` {`boolean`} - Boolean for if theres a source image or not",
+      "description": "`a11y-gif-player`\nplays gifs in an accessible way by having the user click to play their animation\n### Styling\n\n`<a11y-gif-player>` provides the following custom properties\nfor styling:\n\nCustom property | Description | Default\n----------------|-------------|----------\n`--a11y-gif-player-border` | border around player/button | none\n`--a11y-gif-player-border-radius` | border-radius for player/button | 0\n`--a11y-gif-player-focus-border` | border-radius for player/button when hovered or focused | none\n`--a11y-gif-player-cursor` | cursor for player/button when hovered or focused | pointer\n`--a11y-gif-player-outline` | outline for player/button when hovered or focused | \n`--a11y-gif-player-disabled-cursor` | cursor for player/button when disabled | not-allowed\n`--a11y-gif-player-arrow-size` | arrow icon size | 30%\n`--a11y-gif-player-arrow-opacity` | default arrow icon opacity | 0.5\n`--a11y-gif-player-button-focus-opacity` | arrow icon opacity when hovered or focused | 0.7\n`--a11y-gif-player-button-color` | arrow icon color | #000000\n`--a11y-gif-player-arrow-border-color` | arrow icon border color | #ffffff\n`--a11y-gif-player-arrow-border-width` | arrow icon border width | 15px\n`--a11y-gif-player-button-text-color` | arrow icon text color | #ffffff\n`--a11y-gif-player-button-bg` | button background color when no static image | #cccccc\n\nAttributes:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `src` {`string`} - Source of animated gif\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `tooltip-playing` {`string`} - tooltip when playing\n\n  * `src-without-animation` {`string`} - Source of static version of image\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `noImage` {`boolean`} - Boolean for if theres a source image or not\n\nProperties:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `src` {`string`} - Source of animated gif\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `tooltipPlaying` {`string`} - tooltip when playing\n\n  * `srcWithoutAnimation` {`string`} - Source of static version of image\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `noImage` {`boolean`} - Boolean for if theres a source image or not",
       "attributes": [
@@ -97,0 +97,0 @@ {

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112174

increased by3.35%

Lines of code

2288

increased by0.09%

Dependency changes

• + Added@lrnwebcomponents/simple-tooltip@^2.4.1

• + Added@lrnwebcomponents/simple-tooltip@2.8.0(transitive)

• + Addedlit-element@2.4.0(transitive)

• - Removed@polymer/paper-tooltip@^3.0.1

• - Removed@polymer/font-roboto@3.0.2(transitive)

• - Removed@polymer/iron-flex-layout@3.0.1(transitive)

• - Removed@polymer/paper-styles@3.0.1(transitive)

• - Removed@polymer/paper-tooltip@3.0.1(transitive)

• Updated@lrnwebcomponents/schema-behaviors@^2.4.1