├── .eslintrc ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── build-demo.sh ├── demo ├── add-remove.html ├── auto-focus.html ├── base.html ├── css │ ├── demo.css │ └── third-party │ │ └── prism.css ├── custom-navigation.html ├── custom-pagination.html ├── disable-drag.html ├── es5.html ├── events.html ├── images │ └── arrow-left-alt.svg ├── index.html ├── js │ ├── demo.js │ └── third-party │ │ ├── custom-elements-es5-adapter.js │ │ ├── focus-visible.js │ │ ├── inert.min.js │ │ ├── polyfill.min.js │ │ ├── prism.js │ │ ├── webcomponents-bundle.js │ │ ├── webcomponents-bundle.js.map │ │ └── webcomponents-loader.js ├── layout.html ├── loop.html ├── navigation.html ├── no-slides.html ├── pagination.html ├── pre-defined-styles.html ├── reduced-motion.html ├── responsive.html └── slides-per-view.html ├── dist ├── macro-carousel.es5.min.js ├── macro-carousel.js └── macro-carousel.min.js ├── docs ├── macro-carousel-nav-button.md ├── macro-carousel-pagination-indicator.md └── macro-carousel.md ├── karma.conf.js ├── package-lock.json ├── package.json ├── rollup-config ├── rollup-base.config.js ├── rollup-dev-serve.config.js ├── rollup-dev.config.js ├── rollup-es5.config.js ├── rollup-prod.config.js └── rollup-test.config.js ├── src ├── arrow-left.svg ├── enums.js ├── index.js ├── macro-carousel-button │ └── macro-carousel-button.js ├── macro-carousel-nav-button │ ├── macro-carousel-nav-button.css │ ├── macro-carousel-nav-button.html │ └── macro-carousel-nav-button.js ├── macro-carousel-pagination-indicator │ ├── macro-carousel-pagination-indicator.css │ ├── macro-carousel-pagination-indicator.html │ └── macro-carousel-pagination-indicator.js ├── macro-carousel │ ├── macro-carousel.css │ ├── macro-carousel.html │ └── macro-carousel.js ├── passiveEventListeners.js └── utils.js └── test ├── a11y.js ├── attrs.js ├── defaults.js ├── event-selected.js ├── helpers └── testing-helper.js ├── infinite-loop.js ├── init.js ├── navigation-buttons.js ├── no-slides.js ├── pagination-indicators.js ├── previous-next.js ├── props.js ├── reflect-attrs-to-props.js ├── reflect-props-to-attrs.js ├── resize.js ├── selected-add-remove-slides.js ├── selected-slides-per-view.js ├── sizes.js ├── swipe.js └── utils.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "mocha": true, 6 | "node": true 7 | }, 8 | "parserOptions": { 9 | "ecmaVersion": 8, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["google"], 13 | "rules": { 14 | "max-len": ["error", {"ignoreComments": true}], 15 | "arrow-parens": 0, 16 | "valid-jsdoc": "off", 17 | "require-jsdoc": 0, 18 | "keyword-spacing": ["error"], 19 | "no-console": ["error", {"allow": ["warn", "error"]}], 20 | "no-extra-semi": ["error"], 21 | "nonblock-statement-body-position": ["error", "below"], 22 | "no-invalid-this": "off", 23 | "func-style": "off" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vscode 3 | npm-debug.log.* 4 | node_modules 5 | coverage 6 | dist/macro-carousel-test.js 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | os: osx 2 | 3 | language: node_js 4 | node_js: 5 | - "node" 6 | 7 | install: 8 | - npm i -g npm@5.7.1 9 | - npm ci 10 | 11 | addons: 12 | chrome: stable 13 | firefox: latest 14 | 15 | # keep the npm cache around to speed up installs 16 | cache: 17 | directories: 18 | - "$HOME/.npm" 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Marco Ciampini 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `` · [![npm version](https://img.shields.io/npm/v/macro-carousel.svg?style=flat)](https://www.npmjs.com/package/macro-carousel) [![Build Status](https://travis-ci.org/ciampo/macro-carousel.svg?branch=master)](https://travis-ci.org/ciampo/macro-carousel) [![Coverage Status](https://coveralls.io/repos/github/ciampo/macro-carousel/badge.svg)](https://coveralls.io/github/ciampo/macro-carousel) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/ciampo/macro-carousel/blob/master/LICENSE) 2 | 3 | `` is a carousel (*vanilla*) Web Component. 4 | 5 | **[DEMOS](https://ciampo.github.io/macro-carousel/demo/)** | **[DOCS](https://github.com/ciampo/macro-carousel/blob/master/docs/macro-carousel.md)** 6 | 7 | - Compatible with every framework 8 | - Public APIs exposed as methods, events and properties/attributes 9 | - Mouse and touch events 10 | - Previous and next buttons 11 | - Pagination indicators 12 | - Multiple slides per view 13 | - Customisable styles though CSS custom properties 14 | - Focused on a11y 15 | - no external dependencies 16 | 17 | ## Installation 18 | 19 | **`npm install --save macro-carousel`** 20 | 21 | It is reccommended to install the [`inert`](https://github.com/WICG/inert) and [`focus-visible`](https://github.com/WICG/focus-visible) polyfills (listed as `peerDependencies`). 22 | 23 | 24 | ### Running the project locally 25 | 26 | Run `npm install` to install all local dependencies. 27 | 28 | Run `npm start` and open the [`http://localhost:8080/demo/`](http://localhost:8080/demo/) page in your browser. 29 | 30 | ## Usage 31 | 32 | Please read the [full documentation](./docs/macro-carousel.md) 33 | 34 | ```html 35 | 36 |
First slide
37 |
Second slide
38 |
Third slide
39 | 40 | 41 | 42 | ``` 43 | 44 | For more examples, look at the demos ([Live demo](https://ciampo.github.io/macro-carousel/demo/), [Demo code](./demo/)) 45 | 46 | ## Browser support 47 | 48 | ### WebComponent Polyfills suite 49 | 50 | In order for this Web Component to work on all evergreen browsers, you may need to add the [WebComponent polyfills suite](https://github.com/webcomponents/webcomponentsjs) to your page. (*Please note that this repository focuses on the `macro-carousel` Web Component, and not on the polyfills*) 51 | 52 | All the demos in this repository already make use of the polyfills (by using [`webcomponents-loader.js`](https://github.com/webcomponents/webcomponentsjs#webcomponents-loaderjs)). The source code of the `macro-carousel` Web Component also makes optional calls to the `ShadyCSS` polyfill. 53 | 54 | Because of the [`ShadyCSS` polyfill limitations](https://github.com/webcomponents/shadycss#limitations), certain style rules are not applied in polyfilled browsers: 55 | 56 | - all the rules that rely on the `:host-context()` selector are not polyfilled correctly (these rules are mainly around using the `focus-visible` polyfill) 57 | - some of the more complex selectors using `:host()` are also not supported. This mainly impact the hover/focus states on navigation buttons. 58 | - normally, external styles have the priority over the internal Web Component styles. But sometimes, after the polyfill's transformation, some internal selectors end up having a higher specificity then the external ones. This is quite an edge case, but keep an eye for it (e.g.: the [custom navigation demo](./demo/custom-navigation.html) uses the `!important` keyword to force some styles). 59 | 60 | For browsers not supporting ES6 classes, the tranpiled ES5 version can be used instead (`macro-carousel.es5.min.js`), together with the [`custom-elements-es5-adapter.js`](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) polyfill. The [es5 demo](./demo/es5.html) shows how to do that. 61 | 62 | As browser support grows and the polyfills improve, these limitations should become less and less frequent and problematic. 63 | 64 | ### Other known cross-browser limitations 65 | 66 | In order to change the color of the navigation button arrow, this project makes use of the `mask-image` CSS property. Unofruntaly, when this CSS feature is not supported, the color defined through `--macro-carousel-navigation-color-focus` is not going to be applied correctly to the arrow. 67 | 68 | ## Test 69 | 70 | Run `npm test` to run all tests. 71 | 72 | ## Whishlist 73 | 74 | Please have a look at [the backlog](https://github.com/ciampo/macro-carousel/milestone/2) to see the plan for the next releases. 75 | 76 | If you have a feature request, feel free to open an issue! 77 | -------------------------------------------------------------------------------- /build-demo.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | mkdir -p demo/js/third-party 3 | mkdir -p demo/css/third-party 4 | 5 | # Add WC polyfills 6 | cp node_modules/@webcomponents/webcomponentsjs/*.js demo/js/third-party 7 | cp node_modules/@webcomponents/webcomponentsjs/*.map demo/js/third-party 8 | rm -rf demo/js/third-party/gulpfile.js 9 | 10 | # Add inert polyfill 11 | cp node_modules/wicg-inert/dist/inert.min.js demo/js/third-party 12 | 13 | # Add focus-visible polyfill 14 | cp node_modules/focus-visible/dist/focus-visible.js demo/js/third-party 15 | 16 | # Add prism.js 17 | cp node_modules/prismjs/prism.js demo/js/third-party 18 | cp node_modules/prismjs/themes/prism.css demo/css/third-party 19 | 20 | # Add babel polyfill 21 | cp node_modules/@babel/polyfill/dist/polyfill.min.js demo/js/third-party 22 | -------------------------------------------------------------------------------- /demo/add-remove.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Add/Remove slide - macro-carousel demo 8 | 9 | 10 | 11 | 12 | 13 |

Add/Remove slides

14 | See all demos 15 | 16 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /demo/auto-focus.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Auto focus - macro-carousel demo 8 | 9 | 10 | 11 | 12 | 13 |

Auto focus

14 | See all demos 15 | 16 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /demo/base.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Basic Usage - macro-carousel demo 8 | 9 | 10 | 11 | 12 | 13 |

Basic usage

14 | See all demos 15 | 16 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /demo/css/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0 auto; 3 | max-width: 960px; 4 | } 5 | 6 | .js-focus-visible :focus:not(:active):not(:hover):not(.focus-visible) { 7 | outline: 0; 8 | } 9 | 10 | pre { 11 | padding-left: 2em; 12 | padding-right: 2em; 13 | margin-top: 60px !important; 14 | font-size: 14px; 15 | } 16 | 17 | pre > code { 18 | display: block; 19 | margin-left: 3em; 20 | } 21 | 22 | h1 { 23 | padding-left: 1rem; 24 | padding-right: 12rem; 25 | } 26 | 27 | h1 code { 28 | background-color: #eee; 29 | padding: .3em .6em; 30 | } 31 | 32 | #backToIndex, 33 | #backToCode { 34 | position: absolute; 35 | top: 0; 36 | right: 0; 37 | 38 | padding: 1em; 39 | border: 1px dashed currentColor; 40 | font-family: monospace; 41 | font-size: 1.25rem; 42 | 43 | color: inherit; 44 | } 45 | -------------------------------------------------------------------------------- /demo/css/third-party/prism.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js default theme for JavaScript, CSS and HTML 3 | * Based on dabblet (http://dabblet.com) 4 | * @author Lea Verou 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: black; 10 | background: none; 11 | text-shadow: 0 1px white; 12 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 13 | font-size: 1em; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 32 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 33 | text-shadow: none; 34 | background: #b3d4fc; 35 | } 36 | 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 39 | text-shadow: none; 40 | background: #b3d4fc; 41 | } 42 | 43 | @media print { 44 | code[class*="language-"], 45 | pre[class*="language-"] { 46 | text-shadow: none; 47 | } 48 | } 49 | 50 | /* Code blocks */ 51 | pre[class*="language-"] { 52 | padding: 1em; 53 | margin: .5em 0; 54 | overflow: auto; 55 | } 56 | 57 | :not(pre) > code[class*="language-"], 58 | pre[class*="language-"] { 59 | background: #f5f2f0; 60 | } 61 | 62 | /* Inline code */ 63 | :not(pre) > code[class*="language-"] { 64 | padding: .1em; 65 | border-radius: .3em; 66 | white-space: normal; 67 | } 68 | 69 | .token.comment, 70 | .token.prolog, 71 | .token.doctype, 72 | .token.cdata { 73 | color: slategray; 74 | } 75 | 76 | .token.punctuation { 77 | color: #999; 78 | } 79 | 80 | .namespace { 81 | opacity: .7; 82 | } 83 | 84 | .token.property, 85 | .token.tag, 86 | .token.boolean, 87 | .token.number, 88 | .token.constant, 89 | .token.symbol, 90 | .token.deleted { 91 | color: #905; 92 | } 93 | 94 | .token.selector, 95 | .token.attr-name, 96 | .token.string, 97 | .token.char, 98 | .token.builtin, 99 | .token.inserted { 100 | color: #690; 101 | } 102 | 103 | .token.operator, 104 | .token.entity, 105 | .token.url, 106 | .language-css .token.string, 107 | .style .token.string { 108 | color: #9a6e3a; 109 | background: hsla(0, 0%, 100%, .5); 110 | } 111 | 112 | .token.atrule, 113 | .token.attr-value, 114 | .token.keyword { 115 | color: #07a; 116 | } 117 | 118 | .token.function, 119 | .token.class-name { 120 | color: #DD4A68; 121 | } 122 | 123 | .token.regex, 124 | .token.important, 125 | .token.variable { 126 | color: #e90; 127 | } 128 | 129 | .token.important, 130 | .token.bold { 131 | font-weight: bold; 132 | } 133 | .token.italic { 134 | font-style: italic; 135 | } 136 | 137 | .token.entity { 138 | cursor: help; 139 | } 140 | -------------------------------------------------------------------------------- /demo/custom-navigation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Custom navigation - macro-carousel demo 8 | 9 | 10 | 11 | 12 | 13 |

Custom navigation (previous/next buttons)

14 | See all demos 15 | 16 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /demo/custom-pagination.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Custom pagination - macro-carousel demo 8 | 9 | 10 | 11 | 12 | 13 |

Custom pagination (dots)

14 | See all demos 15 | 16 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /demo/disable-drag.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Disable Pointer Events (a.k.a. drag) - macro-carousel demo 8 | 9 | 10 | 11 | 12 | 13 |

Disable pointer events (a.k.a. drag)

14 | See all demos 15 | 16 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /demo/es5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Basic Usage - macro-carousel demo 8 | 9 | 10 | 11 | 12 | 13 |

Basic usage

14 |

In order to make this demo work with older browsers, this demo is slightly different from the rest of the demos: (have a look at this page's source code)

15 | 20 | See all demos 21 | 22 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /demo/events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Events- macro-carousel demo 8 | 9 | 10 | 11 | 12 | 13 |

The macro-carousel-selected-changed event

14 | See all demos 15 | 16 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /demo/images/arrow-left-alt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | macro-carousel demos 8 | 9 | 35 | 36 | 37 |

macro-carousel demos

38 | 57 | Back to code 58 | 59 | 60 | -------------------------------------------------------------------------------- /demo/js/demo.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-var */ 2 | var getQueryParamValue = function(paramName, url) { 3 | var url = url || window.location.href; 4 | var paramName = paramName.replace(/[\[\]]/g, '\\$&'); 5 | var regex = new RegExp('[?&]' + paramName + '(=([^&#]*)|&|#|$)'); 6 | var results = regex.exec(url); 7 | if (!results) { 8 | return null; 9 | } 10 | if (!results[2]) { 11 | return ''; 12 | } 13 | return decodeURIComponent(results[2].replace(/\+/g, ' ')); 14 | }; 15 | 16 | // See https://github.com/PolymerElements/marked-element/ 17 | var unindent = function(text) { 18 | if (!text) { 19 | return text; 20 | } 21 | 22 | var lines = text.replace(/\t/g, ' ').split('\n'); 23 | var indent = lines.reduce(function(prev, line) { 24 | // Compvarely ignore blank lines. 25 | if (/^\s*$/.test(line)) { 26 | return prev; 27 | } 28 | var lineIndent = line.match(/^(\s*)/)[0].length; 29 | if (prev === null) { 30 | return lineIndent; 31 | } 32 | return lineIndent < prev ? lineIndent : prev; 33 | }, null); 34 | 35 | return lines.map(function(l) { 36 | return l.substr(indent); 37 | }).join('\n'); 38 | }; 39 | 40 | var stampTemplate = function(template) { 41 | // Append the first time to initialise the carousel. 42 | document.body.appendChild(template.content.cloneNode(true)); 43 | 44 | if (window.ShadyCSS && window.ShadyCSS.CustomStyleInterface) { 45 | var styleElement = document.body.querySelector('style'); 46 | window.ShadyCSS.CustomStyleInterface.addCustomStyle(styleElement); 47 | } 48 | 49 | // Append a second time to show the highlighted code snippet. 50 | // For some reason, prismjs doesn't automatically get the `macro-carousel` 51 | // tagName, so to work around the problem I use its APIs imperatively 52 | // and I use innerHTML to get the right text to highlight. 53 | var pre = document.createElement('pre'); 54 | pre.classList.add('language-markup'); 55 | var code = document.createElement('code'); 56 | code.classList.add('language-markup'); 57 | // Remove empty attribute values (ie `=""`) for boolean attributes. 58 | code.innerHTML = Prism.highlight( 59 | unindent(template.innerHTML).replace(/=""/g, ''), 60 | Prism.languages.markup); 61 | pre.appendChild(code); 62 | document.body.appendChild(pre); 63 | }; 64 | 65 | // Download macro-carousel once the WebCompomnents polyfills have downloaded. 66 | var onWCReady = function() { 67 | var demoTemplate = document.querySelector('#demoTemplate'); 68 | stampTemplate(demoTemplate); 69 | 70 | var script = document.createElement('script'); 71 | var useEs5 = /es5/.test(window.location.href); 72 | var useDev = /localhost/.test(window.location.href) || 73 | getQueryParamValue('dev') === 'true'; 74 | var filename = 'macro-carousel'; 75 | if (useEs5) { 76 | filename += '.es5'; 77 | } 78 | if (!useDev || useEs5) { 79 | filename += '.min'; 80 | } 81 | script.src = '../dist/' + filename + '.js'; 82 | script.defer = true; 83 | 84 | document.head.appendChild(script); 85 | }; 86 | 87 | if (window.WebComponents && window.WebComponents.ready === true) { 88 | onWCReady(); 89 | } else { 90 | window.addEventListener('WebComponentsReady', onWCReady); 91 | } 92 | -------------------------------------------------------------------------------- /demo/js/third-party/custom-elements-es5-adapter.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license @nocompile 3 | Copyright (c) 2018 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7 | Code distributed by Google as part of the polymer project is also 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9 | */ 10 | (function () { 11 | 'use strict'; 12 | 13 | (function(){if(void 0===window.Reflect||void 0===window.customElements||window.customElements.polyfillWrapFlushCallback)return;const a=HTMLElement;window.HTMLElement=function HTMLElement(){return Reflect.construct(a,[],this.constructor)},HTMLElement.prototype=a.prototype,HTMLElement.prototype.constructor=HTMLElement,Object.setPrototypeOf(HTMLElement,a);})(); 14 | 15 | }()); 16 | -------------------------------------------------------------------------------- /demo/js/third-party/inert.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define("inert",t):t()}(0,function(){"use strict";var e=function(){function i(e,t){for(var n=0;n elements before custom elements 71 | if (window.HTMLTemplateElement && HTMLTemplateElement.bootstrap) { 72 | HTMLTemplateElement.bootstrap(window.document); 73 | } 74 | polyfillsLoaded = true; 75 | runWhenLoadedFns().then(fireEvent); 76 | } 77 | 78 | function runWhenLoadedFns() { 79 | allowUpgrades = false; 80 | var fnsMap = whenLoadedFns.map(function(fn) { 81 | return fn instanceof Function ? fn() : fn; 82 | }); 83 | whenLoadedFns = []; 84 | return Promise.all(fnsMap).then(function() { 85 | allowUpgrades = true; 86 | flushFn && flushFn(); 87 | }).catch(function(err) { 88 | console.error(err); 89 | }); 90 | } 91 | 92 | window.WebComponents = window.WebComponents || {}; 93 | window.WebComponents.ready = window.WebComponents.ready || false; 94 | window.WebComponents.waitFor = window.WebComponents.waitFor || function(waitFn) { 95 | if (!waitFn) { 96 | return; 97 | } 98 | whenLoadedFns.push(waitFn); 99 | if (polyfillsLoaded) { 100 | runWhenLoadedFns(); 101 | } 102 | }; 103 | window.WebComponents._batchCustomElements = batchCustomElements; 104 | 105 | var name = 'webcomponents-loader.js'; 106 | // Feature detect which polyfill needs to be imported. 107 | var polyfills = []; 108 | if (!('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype) || 109 | (window.ShadyDOM && window.ShadyDOM.force)) { 110 | polyfills.push('sd'); 111 | } 112 | if (!window.customElements || window.customElements.forcePolyfill) { 113 | polyfills.push('ce'); 114 | } 115 | 116 | var needsTemplate = (function() { 117 | // no real