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

Comparing version 4.0.24 to 4.0.25

a11y-gif-player.stories.js

@@ -1,4 +0,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import { A11yGifPlayer } from "@lrnwebcomponents/a11y-gif-player/a11y-gif-player.js";
-import { withKnobs, withWebComponentsKnobs } from "@open-wc/demoing-storybook";
+import { withKnobs } from "@open-wc/demoing-storybook";
 import { StorybookUtilities } from "@lrnwebcomponents/storybook-utilities/storybook-utilities.js";
@@ -9,3 +9,3 @@
   component: "a11y-gif-player",
-  decorators: [withKnobs, withWebComponentsKnobs],
+  decorators: [withKnobs],
   parameters: {
@@ -12,0 +12,0 @@ options: { selectedPanel: "storybookjs/knobs/panel" },

custom-elements.json

 {
-  "version": "experimental",
+  "version": 1,
   "tags": [
     {
       "name": "a11y-gif-player",
-      "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\n\nAttributes:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `described-by` {`string`} - other id's to add to aria-describedby\n\n  * `longdesc` {`string`} - longer image description for accesibility\n\n  * `src` {`string`} - Source of animated gif\n\n  * `src-without-animation` {`string`} - Source of static version of image\n\n  * `tooltip-playing` {`string`} - tooltip when playing\n\n  * `__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `t` - \n\n  * `element-visible` {`boolean`} - \n\n  * `schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility\n\nProperties:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `describedBy` {`string`} - other id's to add to aria-describedby\n\n  * `longdesc` {`string`} - longer image description for accesibility\n\n  * `src` {`string`} - Source of animated gif\n\n  * `srcWithoutAnimation` {`string`} - Source of static version of image\n\n  * `tooltipPlaying` {`string`} - tooltip when playing\n\n  * `observer` - mutation observer for a11y-details\n\n  * `__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `t` - \n\n  * `elementVisible` {`boolean`} - \n\n  * `IOThresholds` {`number[]`} - \n\n  * `IORootMargin` {`string`} - \n\n  * `IOVisibleLimit` {`number`} - \n\n  * `IORemoveOnVisible` {`boolean`} - \n\n  * `IODelay` {`number`} - \n\n  * `IORoot` - \n\n  * `schemaResourceID` {`string`} - \n\n  * `schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility",
       "attributes": [
         {
           "name": "alt",
-          "description": "Alt text of gif",
-          "type": "string"
+          "description": "`alt` {`string`} - Alt text of gif\n\nProperty: alt"
         },
         {
-          "name": "disabled",
-          "description": "Whether button is disabled",
-          "type": "boolean",
-          "default": "false"
+          "name": "described-by",
+          "description": "`described-by` {`string`} - other id's to add to aria-describedby\n\nProperty: describedBy"
         },
         {
+          "name": "longdesc",
+          "description": "`longdesc` {`string`} - longer image description for accesibility\n\nProperty: longdesc"
+        },
+        {
           "name": "src",
-          "description": "Source of animated gif",
-          "type": "string"
+          "description": "`src` {`string`} - Source of animated gif\n\nProperty: src"
         },
         {
-          "name": "tooltip",
-          "description": "default tooltip",
-          "type": "string",
-          "default": "\"Toggle animation\""
+          "name": "src-without-animation",
+          "description": "`src-without-animation` {`string`} - Source of static version of image\n\nProperty: srcWithoutAnimation"
         },
         {
           "name": "tooltip-playing",
-          "description": "tooltip when playing",
-          "type": "string"
+          "description": "`tooltip-playing` {`string`} - tooltip when playing\n\nProperty: tooltipPlaying"
         },
         {
-          "name": "src-without-animation",
-          "description": "Source of static version of image",
-          "type": "string"
+          "name": "__gifLoaded",
+          "description": "`__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\nProperty: __gifLoaded\n\nDefault: false",
+          "valueSet": "v"
         },
         {
-          "name": "noImage",
-          "description": "Boolean for if theres a source image or not",
-          "type": "boolean",
-          "default": "true"
-        }
-      ],
-      "properties": [
-        {
-          "name": "alt",
-          "attribute": "alt",
-          "description": "Alt text of gif",
-          "type": "string"
-        },
-        {
           "name": "disabled",
-          "attribute": "disabled",
-          "description": "Whether button is disabled",
-          "type": "boolean",
-          "default": "false"
+          "description": "`disabled` {`boolean`} - Whether button is disabled\n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
         },
         {
-          "name": "src",
-          "attribute": "src",
-          "description": "Source of animated gif",
-          "type": "string"
+          "name": "tooltip",
+          "description": "`tooltip` {`string`} - default tooltip\n\nProperty: tooltip\n\nDefault: "
         },
         {
-          "name": "tooltip",
-          "attribute": "tooltip",
-          "description": "default tooltip",
-          "type": "string",
-          "default": "\"Toggle animation\""
+          "name": "__playing",
+          "description": "`__playing` {`boolean`} - whether GIF is playing\n\nProperty: __playing\n\nDefault: false",
+          "valueSet": "v"
         },
         {
-          "name": "tooltipPlaying",
-          "attribute": "tooltip-playing",
-          "description": "tooltip when playing",
-          "type": "string"
+          "name": "t",
+          "description": "`t` - \n\nProperty: t\n\nDefault: [object Object]"
         },
         {
-          "name": "srcWithoutAnimation",
-          "attribute": "src-without-animation",
-          "description": "Source of static version of image",
-          "type": "string"
+          "name": "element-visible",
+          "description": "`element-visible` {`boolean`} - \n\nProperty: elementVisible\n\nDefault: false",
+          "valueSet": "v"
         },
         {
-          "name": "noImage",
-          "attribute": "noImage",
-          "description": "Boolean for if theres a source image or not",
-          "type": "boolean",
-          "default": "true"
+          "name": "schemaMap",
+          "description": "`schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility\n\nProperty: schemaMap\n\nDefault: [object Object]"
         }
@@ -97,186 +68,65 @@ ]
       "name": "a11y-gif-player",
-      "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\n\nAttributes:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `described-by` {`string`} - other id's to add to aria-describedby\n\n  * `longdesc` {`string`} - longer image description for accesibility\n\n  * `src` {`string`} - Source of animated gif\n\n  * `src-without-animation` {`string`} - Source of static version of image\n\n  * `tooltip-playing` {`string`} - tooltip when playing\n\n  * `__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `t` - \n\n  * `element-visible` {`boolean`} - \n\n  * `schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility\n\nProperties:\n\n  * `alt` {`string`} - Alt text of gif\n\n  * `describedBy` {`string`} - other id's to add to aria-describedby\n\n  * `longdesc` {`string`} - longer image description for accesibility\n\n  * `src` {`string`} - Source of animated gif\n\n  * `srcWithoutAnimation` {`string`} - Source of static version of image\n\n  * `tooltipPlaying` {`string`} - tooltip when playing\n\n  * `observer` - mutation observer for a11y-details\n\n  * `__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\n  * `disabled` {`boolean`} - Whether button is disabled\n\n  * `tooltip` {`string`} - default tooltip\n\n  * `__playing` {`boolean`} - whether GIF is playing\n\n  * `t` - \n\n  * `elementVisible` {`boolean`} - \n\n  * `IOThresholds` {`number[]`} - \n\n  * `IORootMargin` {`string`} - \n\n  * `IOVisibleLimit` {`number`} - \n\n  * `IORemoveOnVisible` {`boolean`} - \n\n  * `IODelay` {`number`} - \n\n  * `IORoot` - \n\n  * `schemaResourceID` {`string`} - \n\n  * `schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility",
       "attributes": [
         {
           "name": "alt",
-          "description": "Alt text of gif",
-          "type": "string"
+          "description": "`alt` {`string`} - Alt text of gif\n\nProperty: alt"
         },
         {
-          "name": "disabled",
-          "description": "Whether button is disabled",
-          "type": "boolean",
-          "default": "false"
+          "name": "described-by",
+          "description": "`described-by` {`string`} - other id's to add to aria-describedby\n\nProperty: describedBy"
         },
         {
-          "name": "src",
-          "description": "Source of animated gif",
-          "type": "string"
+          "name": "longdesc",
+          "description": "`longdesc` {`string`} - longer image description for accesibility\n\nProperty: longdesc"
         },
         {
-          "name": "tooltip",
-          "description": "default tooltip",
-          "type": "string",
-          "default": "\"Toggle animation\""
+          "name": "src",
+          "description": "`src` {`string`} - Source of animated gif\n\nProperty: src"
         },
         {
-          "name": "tooltip-playing",
-          "description": "tooltip when playing",
-          "type": "string"
-        },
-        {
           "name": "src-without-animation",
-          "description": "Source of static version of image",
-          "type": "string"
+          "description": "`src-without-animation` {`string`} - Source of static version of image\n\nProperty: srcWithoutAnimation"
         },
         {
-          "name": "noImage",
-          "description": "Boolean for if theres a source image or not",
-          "type": "boolean",
-          "default": "true"
-        }
-      ],
-      "properties": [
-        {
-          "name": "alt",
-          "attribute": "alt",
-          "description": "Alt text of gif",
-          "type": "string"
+          "name": "tooltip-playing",
+          "description": "`tooltip-playing` {`string`} - tooltip when playing\n\nProperty: tooltipPlaying"
         },
         {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Whether button is disabled",
-          "type": "boolean",
-          "default": "false"
+          "name": "__gifLoaded",
+          "description": "`__gifLoaded` {`boolean`} - if the gif source is loaded to avoid jarring on load\n\nProperty: __gifLoaded\n\nDefault: false",
+          "valueSet": "v"
         },
         {
-          "name": "src",
-          "attribute": "src",
-          "description": "Source of animated gif",
-          "type": "string"
-        },
-        {
-          "name": "tooltip",
-          "attribute": "tooltip",
-          "description": "default tooltip",
-          "type": "string",
-          "default": "\"Toggle animation\""
-        },
-        {
-          "name": "tooltipPlaying",
-          "attribute": "tooltip-playing",
-          "description": "tooltip when playing",
-          "type": "string"
-        },
-        {
-          "name": "srcWithoutAnimation",
-          "attribute": "src-without-animation",
-          "description": "Source of static version of image",
-          "type": "string"
-        },
-        {
-          "name": "noImage",
-          "attribute": "noImage",
-          "description": "Boolean for if theres a source image or not",
-          "type": "boolean",
-          "default": "true"
-        }
-      ]
-    },
-    {
-      "name": "tag"
-    },
-    {
-      "name": "a11y-gif-player",
-      "description": "`a11y-gif-player`",
-      "attributes": [
-        {
-          "name": "alt",
-          "description": "Alt text of gif",
-          "type": "string"
-        },
-        {
           "name": "disabled",
-          "description": "Whether button is disabled",
-          "type": "boolean",
-          "default": "false"
+          "description": "`disabled` {`boolean`} - Whether button is disabled\n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
         },
         {
-          "name": "src",
-          "description": "Source of animated gif",
-          "type": "string"
-        },
-        {
           "name": "tooltip",
-          "description": "default tooltip",
-          "type": "string",
-          "default": "\"Toggle animation\""
+          "description": "`tooltip` {`string`} - default tooltip\n\nProperty: tooltip\n\nDefault: "
         },
         {
-          "name": "tooltip-playing",
-          "description": "tooltip when playing",
-          "type": "string"
+          "name": "__playing",
+          "description": "`__playing` {`boolean`} - whether GIF is playing\n\nProperty: __playing\n\nDefault: false",
+          "valueSet": "v"
         },
         {
-          "name": "src-without-animation",
-          "description": "Source of static version of image",
-          "type": "string"
+          "name": "t",
+          "description": "`t` - \n\nProperty: t\n\nDefault: [object Object]"
         },
         {
-          "name": "noImage",
-          "description": "Boolean for if theres a source image or not",
-          "type": "boolean",
-          "default": "true"
-        }
-      ],
-      "properties": [
-        {
-          "name": "alt",
-          "attribute": "alt",
-          "description": "Alt text of gif",
-          "type": "string"
+          "name": "element-visible",
+          "description": "`element-visible` {`boolean`} - \n\nProperty: elementVisible\n\nDefault: false",
+          "valueSet": "v"
         },
         {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Whether button is disabled",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "src",
-          "attribute": "src",
-          "description": "Source of animated gif",
-          "type": "string"
-        },
-        {
-          "name": "tooltip",
-          "attribute": "tooltip",
-          "description": "default tooltip",
-          "type": "string",
-          "default": "\"Toggle animation\""
-        },
-        {
-          "name": "tooltipPlaying",
-          "attribute": "tooltip-playing",
-          "description": "tooltip when playing",
-          "type": "string"
-        },
-        {
-          "name": "srcWithoutAnimation",
-          "attribute": "src-without-animation",
-          "description": "Source of static version of image",
-          "type": "string"
-        },
-        {
-          "name": "noImage",
-          "attribute": "noImage",
-          "description": "Boolean for if theres a source image or not",
-          "type": "boolean",
-          "default": "true"
+          "name": "schemaMap",
+          "description": "`schemaMap` - Schema Map for the element, used to generate a valid prefix on the fly\nProps set for Polymer compatibility\n\nProperty: schemaMap\n\nDefault: [object Object]"
         }
       ]
     }
-  ]
-}
+  ],
+  "globalAttributes": [],
+  "valueSets": []
+}

package.json

@@ -15,3 +15,3 @@ {
   },
-  "version": "4.0.24",
+  "version": "4.0.25",
   "description": "Play gifs in an accessible way by having the user click to play their animation",
@@ -28,6 +28,6 @@ "repository": {
     "start": "yarn run dev",
-    "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",
+    "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 custom-elements.json",
     "dev": "concurrently --kill-others \"yarn run watch\" \"yarn run serve\"",
     "watch": "gulp dev --gulpfile=gulpfile.cjs",
-    "serve": "web-dev-server -c ../../web-dev-server.config.js",
+    "serve": "web-dev-server -c ../../web-dev-server.config.mjs",
     "lighthouse": "gulp lighthouse --gulpfile=gulpfile.cjs",
@@ -42,15 +42,15 @@ "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --playwright --browsers chromium firefox --watch",
   "dependencies": {
-    "@lrnwebcomponents/a11y-details": "^4.0.24",
+    "@lrnwebcomponents/a11y-details": "^4.0.25",
     "@lrnwebcomponents/intersection-element": "^4.0.4",
-    "@lrnwebcomponents/schema-behaviors": "^4.0.24",
-    "@lrnwebcomponents/simple-tooltip": "^4.0.24",
-    "lit": "^2.2.2"
+    "@lrnwebcomponents/schema-behaviors": "^4.0.25",
+    "@lrnwebcomponents/simple-tooltip": "^4.0.25",
+    "lit": "^2.2.5"
   },
   "devDependencies": {
     "@lrnwebcomponents/deduping-fix": "^4.0.0",
-    "@lrnwebcomponents/storybook-utilities": "^4.0.24",
+    "@lrnwebcomponents/storybook-utilities": "^4.0.25",
     "@open-wc/testing": "3.0.4",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
     "@polymer/iron-demo-helpers": "3.1.0",
-    "@web/dev-server": "0.1.30",
+    "@web/dev-server": "0.1.31",
     "@webcomponents/webcomponentsjs": "2.6.0",
@@ -72,3 +72,3 @@ "concurrently": "7.0.0",
   ],
-  "gitHead": "dfb2cd70d6c85d3ac0792679b3120c20923d5ada"
+  "gitHead": "0af870d14d29af2e5f834389cc9b00a5d250b4da"
 }

vscode-html-custom-data.json

@@ -131,2 +131,2 @@ {
   "valueSets": []
-}
+}

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

106921

increased by3.82%

Worsened metrics

Lines of code

1744

decreased by-6.84%

Dependency changes

• Updated@lrnwebcomponents/a11y-details@^4.0.25

• Updated@lrnwebcomponents/schema-behaviors@^4.0.25

• Updated@lrnwebcomponents/simple-tooltip@^4.0.25

• Updatedlit@^2.2.5