├── src ├── index.ts ├── components │ └── fast-morph │ │ ├── readme.md │ │ ├── fast-morph.css │ │ └── fast-morph.tsx ├── utils │ ├── utils.ts │ └── utils.spec.ts ├── components.d.ts └── index.html ├── gifs ├── motion-ui-card.gif └── motion-ui-sign-in.gif ├── .editorconfig ├── .gitignore ├── stencil.config.ts ├── tsconfig.json ├── LICENSE ├── package.json ├── readme.md └── www ├── index.html └── build └── fast-morph.js /src/index.ts: -------------------------------------------------------------------------------- 1 | export { Components } from './components'; 2 | -------------------------------------------------------------------------------- /gifs/motion-ui-card.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matteobortolazzo/fast-morph/HEAD/gifs/motion-ui-card.gif -------------------------------------------------------------------------------- /gifs/motion-ui-sign-in.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matteobortolazzo/fast-morph/HEAD/gifs/motion-ui-sign-in.gif -------------------------------------------------------------------------------- /src/components/fast-morph/readme.md: -------------------------------------------------------------------------------- 1 | # fast-morph 2 | 3 | 4 | 5 | 6 | 7 | 8 | ---------------------------------------------- 9 | 10 | *Built with [StencilJS](https://stenciljs.com/)* 11 | -------------------------------------------------------------------------------- /src/utils/utils.ts: -------------------------------------------------------------------------------- 1 | 2 | export function format(first: string, middle: string, last: string): string { 3 | return ( 4 | (first || '') + 5 | (middle ? ` ${middle}` : '') + 6 | (last ? ` ${last}` : '') 7 | ); 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /src/components/fast-morph/fast-morph.css: -------------------------------------------------------------------------------- 1 | [slot] { 2 | will-change: opacity; 3 | contain: layout; 4 | } 5 | 6 | .will-transform { 7 | will-change: transform; 8 | transform-origin: left top 0px; 9 | transform: translateX(0) translateY(0) scaleX(1) scaleY(1); 10 | transition: transform 600ms cubic-bezier(0.645, 0.045, 0.355, 1); 11 | } 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | www/ 3 | loader/ 4 | 5 | *~ 6 | *.sw[mnpcod] 7 | *.log 8 | *.lock 9 | *.tmp 10 | *.tmp.* 11 | log.txt 12 | *.sublime-project 13 | *.sublime-workspace 14 | 15 | .stencil/ 16 | .idea/ 17 | .vscode/ 18 | .sass-cache/ 19 | .versions/ 20 | node_modules/ 21 | $RECYCLE.BIN/ 22 | 23 | .DS_Store 24 | Thumbs.db 25 | UserInterfaceState.xcuserstate 26 | .env 27 | -------------------------------------------------------------------------------- /stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { Config } from '@stencil/core'; 2 | 3 | export const config: Config = { 4 | namespace: 'fast-morph', 5 | outputTargets: [ 6 | { 7 | type: 'dist', 8 | esmLoaderPath: '../loader' 9 | }, 10 | { 11 | type: 'docs-readme' 12 | }, 13 | { 14 | type: 'www', 15 | serviceWorker: null // disable service workers 16 | } 17 | ] 18 | }; 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "allowUnreachableCode": false, 5 | "declaration": false, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2017" 10 | ], 11 | "moduleResolution": "node", 12 | "module": "esnext", 13 | "target": "es2017", 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "jsx": "react", 17 | "jsxFactory": "h" 18 | }, 19 | "include": [ 20 | "src", 21 | "types/jsx.d.ts" 22 | ], 23 | "exclude": [ 24 | "node_modules" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /src/utils/utils.spec.ts: -------------------------------------------------------------------------------- 1 | import { format } from './utils'; 2 | 3 | describe('format', () => { 4 | it('returns empty string for no names defined', () => { 5 | expect(format(undefined, undefined, undefined)).toEqual(''); 6 | }); 7 | 8 | it('formats just first names', () => { 9 | expect(format('Joseph', undefined, undefined)).toEqual('Joseph'); 10 | }); 11 | 12 | it('formats first and last names', () => { 13 | expect(format('Joseph', undefined, 'Publique')).toEqual('Joseph Publique'); 14 | }); 15 | 16 | it('formats first, middle and last names', () => { 17 | expect(format('Joseph', 'Quincy', 'Publique')).toEqual( 18 | 'Joseph Quincy Publique' 19 | ); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 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 | -------------------------------------------------------------------------------- /src/components.d.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /** 3 | * This is an autogenerated file created by the Stencil compiler. 4 | * It contains typing information for all components that exist in this project. 5 | */ 6 | 7 | 8 | import { HTMLStencilElement, JSXBase } from '@stencil/core/internal'; 9 | 10 | 11 | export namespace Components { 12 | interface FastMorph {} 13 | } 14 | 15 | declare global { 16 | 17 | 18 | interface HTMLFastMorphElement extends Components.FastMorph, HTMLStencilElement {} 19 | var HTMLFastMorphElement: { 20 | prototype: HTMLFastMorphElement; 21 | new (): HTMLFastMorphElement; 22 | }; 23 | interface HTMLElementTagNameMap { 24 | 'fast-morph': HTMLFastMorphElement; 25 | } 26 | } 27 | 28 | declare namespace LocalJSX { 29 | interface FastMorph extends JSXBase.HTMLAttributes {} 30 | 31 | interface IntrinsicElements { 32 | 'fast-morph': FastMorph; 33 | } 34 | } 35 | 36 | export { LocalJSX as JSX }; 37 | 38 | 39 | declare module "@stencil/core" { 40 | export namespace JSX { 41 | interface IntrinsicElements extends LocalJSX.IntrinsicElements {} 42 | } 43 | } 44 | 45 | 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@matteobortolazzo/fast-morph", 3 | "version": "1.1.0", 4 | "description": "A fast Morphing UI web component", 5 | "main": "dist/index.js", 6 | "module": "dist/index.mjs", 7 | "es2015": "dist/esm/index.mjs", 8 | "es2017": "dist/esm/index.mjs", 9 | "types": "dist/types/index.d.ts", 10 | "collection": "dist/collection/collection-manifest.json", 11 | "collection:main": "dist/collection/index.js", 12 | "unpkg": "dist/fast-morph/fast-morph.js", 13 | "files": [ 14 | "dist/", 15 | "loader/" 16 | ], 17 | "scripts": { 18 | "build": "stencil build --docs", 19 | "start": "stencil build --dev --watch --serve", 20 | "test": "stencil test --spec --e2e", 21 | "test.watch": "stencil test --spec --e2e --watchAll" 22 | }, 23 | "devDependencies": { 24 | "@stencil/core": "latest" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "git+https://github.com/matteobortolazzo/fast-morph.git" 29 | }, 30 | "author": "Matteo Bortolazzo", 31 | "license": "MIT", 32 | "bugs": { 33 | "url": "https://github.com/matteobortolazzo/fast-morph" 34 | }, 35 | "homepage": "https://github.com/matteobortolazzo/fast-morph" 36 | } 37 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Fast Morph 2 | 3 | **A Morphing UI web component built with StencilJS** 4 | 5 | Inspired by brunnolou's [react-morph](https://github.com/brunnolou/react-morph) 6 | 7 | ![Sign-In example](https://raw.githubusercontent.com/matteobortolazzo/fast-morph/master/gifs/motion-ui-sign-in.gif) 8 | 9 | 10 | ## Install 11 | ``` 12 | npm i @matteobortolazzo/fast-morph --save 13 | ``` 14 | 15 | ## Usage 16 | 17 | **Pure HTML** 18 | ``` 19 | 20 | ``` 21 | 22 | **Frameworks** 23 | 24 | Please visit [https://stenciljs.com/docs/overview](https://stenciljs.com/docs/overview) 25 | 26 | 27 | ## Example 28 | 29 | 1. Create two states (HTML) 30 | 2. Wrap both in one fast-morph component (using slot="state-0" and slot="state-1") 31 | 3. Label the elements you want to morph with itemprop="fm-\" 32 | 4. Label the elements you want to use to change state with itemprop="fm-activator" 33 | 34 | ```html 35 | 36 |
37 |
38 | 39 |
Sign In
40 |
41 |
42 |
43 |
44 |
45 |
46 |
Email
47 | 48 |
Password
49 | 50 |
51 | 52 |
Cancel
53 |
54 |
55 |
56 | 57 | ``` 58 | 59 | ## Keep in mind 60 | (this section is from [**brunnolou**'s react-morph](https://github.com/brunnolou/react-morph)) 61 | 62 | * You need to remove extra whitespace, to match the real element's width, the solution is display: inline-block or a wrapping element to the content. 63 | * Margins are always tricky because they create extra white space. You can either wrap the content in another element and animate it or be sure to match both the margins in both states. 64 | * Sometimes it's necessary to create a placeholder element for the transition to avoid child distortion. 65 | * List items could be miscalculated; a simple solution is: list-style: none;. 66 | * Sometimes you need extra layers instead of nested children. 67 | * Avoid animating both the parent and children to avoid unpredicted results. 68 | 69 | ![Card example](https://raw.githubusercontent.com/matteobortolazzo/fast-morph/master/gifs/motion-ui-card.gif) 70 | -------------------------------------------------------------------------------- /www/index.html: -------------------------------------------------------------------------------- 1 | Stencil Component Starter
Sign In
Email
Password

Cancel
-------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Stencil Component Starter 7 | 8 | 9 | 10 | 11 | 12 | 13 | 90 |
91 | 92 |
93 |
94 | 95 |
Sign In
96 |
97 |
98 |
99 |
100 |
101 |
102 |
Email
103 | 104 |
Password
105 | 106 |
107 | 108 |
Cancel
109 |
110 |
111 |
112 | 113 |
114 | 115 | 116 | -------------------------------------------------------------------------------- /src/components/fast-morph/fast-morph.tsx: -------------------------------------------------------------------------------- 1 | import {Component, Element, h} from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'fast-morph', 5 | styleUrl: 'fast-morph.css' 6 | }) 7 | export class FastMorph { 8 | 9 | @Element() fastMorphEl: HTMLElement; 10 | 11 | state: boolean; 12 | animationSpeed: number = 600; 13 | 14 | slot0: HTMLElement; 15 | slot1: HTMLElement; 16 | 17 | elementsToTransform: { el0: { el: HTMLElement, transform: string }, el1: { el: HTMLElement, transform: string }}[] = []; 18 | 19 | componentDidLoad() { 20 | // Get the ref of the two div states 21 | this.slot0 = this.fastMorphEl.querySelector('[slot=state-0]') as HTMLElement; 22 | this.slot1 = this.fastMorphEl.querySelector('[slot=state-1]') as HTMLElement; 23 | // Hide the second state 24 | this.slot1.style.opacity = '0'; 25 | this.slot1.style.pointerEvents = 'none'; 26 | this.slot1.style.visibility = 'none'; 27 | // Add event listeners to the change state activators 28 | this.slot0.querySelector("[itemprop=fm-activator]").addEventListener('click', () => this.switchSlot()); 29 | this.slot1.querySelector("[itemprop=fm-activator]").addEventListener('click', () => this.switchSlot()); 30 | // Find the elements to transform 31 | let slot0Elements = Array.from(this.slot0.querySelectorAll("[itemprop^=fm-]")); 32 | let slot1Elements = Array.from(this.slot1.querySelectorAll("[itemprop^=fm-]")); 33 | let elementsToAnimate: { element0: HTMLElement, element1: HTMLElement }[] = []; 34 | // Check that every element has its "twin" 35 | for(let i = 0; i < slot0Elements.length; i++) { 36 | let slot0El = slot0Elements[i] as HTMLElement; 37 | // If it's not the activator element 38 | if(slot0El.getAttribute("itemprop") != "fm-activator") { 39 | for (let j = 0; j < slot1Elements.length; j++) { 40 | let slot1El = slot1Elements[j] as HTMLElement; 41 | // Checks if there's a "twin" 42 | if (slot0El.getAttribute("itemprop") == slot1El.getAttribute("itemprop")) 43 | elementsToAnimate.push({element0: slot0El as HTMLElement, element1: slot1El as HTMLElement}); 44 | } 45 | } 46 | } 47 | // For every element to morph 48 | for(let elements of elementsToAnimate) { 49 | let el0 = elements.element0; 50 | let el1 = elements.element1; 51 | // Get their bounds 52 | let bound1 = el0.getBoundingClientRect(); 53 | let bound2 = el1.getBoundingClientRect(); 54 | // Calculate the differences between the two elements 55 | let translateX = bound1.left - bound2.left; 56 | let translateY = bound1.top - bound2.top; 57 | let scaleX = bound1.width / bound2.width; 58 | let scaleY = bound1.height / bound2.height; 59 | // Concat the transform properties 60 | let transformStyle1 = `translateX(${translateX}px) translateY(${translateY}px) scaleX(${scaleX}) scaleY(${scaleY})`; 61 | let transformStyle0 = `translateX(${-translateX}px) translateY(${-translateY}px) scaleX(${1/scaleX}) scaleY(${1/scaleY})`; 62 | // Assign the style 63 | el0.classList.add('will-transform'); 64 | el1.style.transform = transformStyle1; 65 | el1.classList.add('will-transform'); 66 | // Store the styles 67 | this.elementsToTransform.push({ 68 | el0: { 69 | el: el0, 70 | transform: transformStyle0 71 | }, 72 | el1: { 73 | el: el1, 74 | transform: transformStyle1 75 | } 76 | }); 77 | } 78 | this.goToState0(); 79 | } 80 | 81 | transitioning: boolean = false; 82 | switchSlot() { 83 | if(this.transitioning) return; 84 | this.transitioning = true; 85 | 86 | this.state = !this.state; 87 | 88 | if(this.state) { 89 | this.goToState1(); 90 | this.hideSlot(this.slot0); 91 | this.showSlot(this.slot1); 92 | } 93 | else { 94 | this.goToState0(); 95 | this.hideSlot(this.slot1); 96 | this.showSlot(this.slot0); 97 | } 98 | 99 | setTimeout(() => this.transitioning = false, this.animationSpeed) 100 | } 101 | 102 | goToState0() { 103 | for (let elGroup of this.elementsToTransform) { 104 | elGroup.el0.el.removeAttribute("style"); 105 | elGroup.el1.el.style.transform = elGroup.el1.transform; 106 | } 107 | } 108 | 109 | goToState1() { 110 | for (let elGroup of this.elementsToTransform) { 111 | elGroup.el0.el.style.transform = elGroup.el0.transform; 112 | elGroup.el1.el.removeAttribute("style"); 113 | } 114 | } 115 | 116 | hideSlot(slot: HTMLElement) { 117 | slot.style.transition = `opacity ${this.animationSpeed / 3}ms cubic-bezier(0.215, 0.61, 0.355, 1)`; 118 | slot.style.pointerEvents = 'none'; 119 | setTimeout(() => slot.style.visibility = 'none', this.animationSpeed); 120 | setTimeout(() => slot.style.opacity = '0', this.animationSpeed / 3); 121 | } 122 | 123 | showSlot(slot: HTMLElement) { 124 | slot.style.transition = `opacity ${this.animationSpeed / 3}ms cubic-bezier(0.55, 0.055, 0.675, 0.19)`; 125 | slot.style.visibility = 'visible'; 126 | slot.style.pointerEvents = 'auto'; 127 | slot.style.opacity = '1'; 128 | } 129 | 130 | render() { 131 | return( 132 |
133 | 134 | 135 |
136 | ); 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /www/build/fast-morph.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict'; 3 | /** 4 | * core-js 3.0.1 5 | * https://github.com/zloirock/core-js 6 | * License: http://rock.mit-license.org 7 | * © 2019 Denis Pushkarev (zloirock.ru) 8 | */ 9 | !function(Ut){"use strict";!function(e){var n={};function __webpack_require__(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,__webpack_require__),r.l=!0,r.exports}__webpack_require__.m=e,__webpack_require__.c=n,__webpack_require__.d=function(t,r,e){__webpack_require__.o(t,r)||Object.defineProperty(t,r,{enumerable:!0,get:e})},__webpack_require__.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},__webpack_require__.t=function(r,t){if(1&t&&(r=__webpack_require__(r)),8&t)return r;if(4&t&&"object"==typeof r&&r&&r.__esModule)return r;var e=Object.create(null);if(__webpack_require__.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:r}),2&t&&"string"!=typeof r)for(var n in r)__webpack_require__.d(e,n,function(t){return r[t]}.bind(null,n));return e},__webpack_require__.n=function(t){var r=t&&t.__esModule?function getDefault(){return t["default"]}:function getModuleExports(){return t};return __webpack_require__.d(r,"a",r),r},__webpack_require__.o=function(t,r){return Object.prototype.hasOwnProperty.call(t,r)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=0)}([function(t,r,e){e(1),e(55),e(56),e(57),e(58),e(59),e(60),e(61),e(62),e(63),e(64),e(65),e(66),e(67),e(68),e(73),e(76),e(81),e(83),e(84),e(85),e(86),e(88),e(89),e(91),e(99),e(100),e(101),e(102),e(110),e(111),e(113),e(114),e(115),e(117),e(118),e(119),e(120),e(121),e(122),e(125),e(126),e(127),e(128),e(134),e(135),e(137),e(138),e(139),e(141),e(142),e(144),e(145),e(147),e(148),e(149),e(150),e(157),e(159),e(160),e(161),e(163),e(164),e(166),e(167),e(169),e(170),e(171),e(172),e(173),e(174),e(175),e(176),e(177),e(178),e(179),e(182),e(183),e(185),e(187),e(188),e(189),e(190),e(191),e(193),e(195),e(198),e(199),e(201),e(202),e(204),e(205),e(206),e(207),e(209),e(210),e(211),e(212),e(213),e(214),e(215),e(217),e(218),e(219),e(220),e(221),e(222),e(223),e(224),e(225),e(226),e(228),e(229),e(230),e(231),e(239),e(240),e(241),e(242),e(243),e(244),e(245),e(246),e(247),e(248),e(249),e(250),e(251),e(252),e(253),e(256),e(258),e(259),e(260),e(261),e(263),e(266),e(267),e(268),e(269),e(273),e(276),e(277),e(278),e(279),e(280),e(281),e(282),e(283),e(285),e(286),e(287),e(290),e(291),e(292),e(293),e(294),e(295),e(296),e(297),e(298),e(299),e(300),e(301),e(302),e(307),e(308),e(309),e(310),e(311),e(312),e(313),e(314),e(315),e(316),e(317),e(318),e(319),e(320),e(321),e(322),e(323),e(324),e(325),e(326),e(327),e(328),e(329),e(330),e(331),e(332),e(333),e(334),e(335),e(336),e(337),e(338),e(339),e(340),e(342),e(343),e(344),e(345),e(346),e(348),e(349),e(350),e(352),e(355),e(356),e(357),e(358),e(360),e(361),e(363),e(364),e(365),e(366),e(367),e(368),e(370),e(371),e(372),e(373),e(374),e(375),e(376),e(378),e(379),e(380),e(381),e(382),e(383),e(384),e(385),e(386),e(387),e(388),e(389),e(390),e(391),e(392),e(394),e(395),e(396),e(397),e(398),e(399),e(400),e(401),e(402),e(404),e(405),e(406),e(408),e(409),e(410),e(411),e(412),e(413),e(414),e(415),e(416),e(417),e(418),e(419),e(420),e(421),e(422),e(423),e(424),e(425),e(426),e(427),e(428),e(429),e(430),e(431),e(432),e(433),e(434),e(435),e(436),e(438),e(439),e(440),e(441),e(442),e(446),t.exports=e(445)},function(t,r,e){var n=e(2),a=e(3),o=e(4),i=e(6),u=e(7),c=e(22),f=e(30),s=e(5),l=e(25),h=e(42),p=e(29),g=e(43),v=e(45),d=e(46),y=e(48),b=e(50),m=e(21),x=e(16),w=e(11),S=e(15),A=e(10),E=e(51),O=e(54),I=e(8),M=e(20),R=e(9),_=e(19),P=e(49),j=e(28)("hidden"),k=e(26),T="Symbol",F=k.set,L=k.getterFor(T),N=I.f,U=M.f,D=O.f,C=n.Symbol,B=n.JSON,q=B&&B.stringify,z="prototype",W=g("toPrimitive"),V=R.f,G=l("symbol-registry"),K=l("symbols"),Y=l("op-symbols"),$=l("wks"),J=Object[z],X=n.QObject,H=e(44),Q=!X||!X[z]||!X[z].findChild,Z=o&&s(function(){return 7!=E(U({},"a",{get:function(){return U(this,"a",{value:7}).a}})).a})?function(t,r,e){var n=N(J,r);n&&delete J[r],U(t,r,e),n&&t!==J&&U(J,r,n)}:U,tt=function(t,r){var e=K[t]=E(C[z]);return F(e,{type:T,tag:t,description:r}),o||(e.description=r),e},rt=H&&"symbol"==typeof C.iterator?function(t){return"symbol"==typeof t}:function(t){return Object(t)instanceof C},et=function defineProperty(t,r,e){return t===J&&et(Y,r,e),m(t),r=S(r,!0),m(e),a(K,r)?(e.enumerable?(a(t,j)&&t[j][r]&&(t[j][r]=!1),e=E(e,{enumerable:A(0,!1)})):(a(t,j)||U(t,j,A(1,{})),t[j][r]=!0),Z(t,r,e)):U(t,r,e)},nt=function defineProperties(t,r){m(t);for(var e,n=y(r=w(r)),o=0,i=n.length;odocument.F=Object"),t.close(),l=t.F;e--;)delete l[f][i[e]];return l()};t.exports=Object.create||function create(t,r){var e;return null!==t?(s[f]=n(t),e=new s,s[f]=null,e[c]=t):e=l(),r===Ut?e:o(e,r)},e(30)[c]=!0},function(t,r,e){var n=e(4),a=e(20),u=e(21),c=e(49);t.exports=n?Object.defineProperties:function defineProperties(t,r){u(t);for(var e,n=c(r),o=n.length,i=0;i>1,s=23===r?P(2,-24)-P(2,-77):0,l=t<0||0===t&&1/t<0?1:0,h=0;for((t=_(t))!=t||t===1/0?(o=t!=t?1:0,n=c):(n=j(k(t)/T),t*(i=P(2,-n))<1&&(n--,i*=2),2<=(t+=1<=n+f?s/i:s*P(2,1-f))*i&&(n++,i/=2),c<=n+f?(o=0,n=c):1<=n+f?(o=(t*i-1)*P(2,r),n+=f):(o=t*P(2,f-1)*P(2,r),n=0));8<=r;a[h++]=255&o,o/=256,r-=8);for(n=n<>1,u=o-7,c=n-1,f=t[c--],s=127&f;for(f>>=7;0>=-u,u+=r;0>8&255]},C=function(t){return[255&t,t>>8&255,t>>16&255,t>>24&255]},B=function(t){return F(t,23,4)},q=function(t){return F(t,52,8)},z=function(t,r){g(t[S],r,{get:function(){return b(this)[r]}})},W=function(t,r,e,n){var o=h(+e),i=b(t);if(i.byteLength>24)},setUint8:function setUint8(t,r){X.call(this,t,r<<24>>24)}},{unsafe:!0})}else O=function ArrayBuffer(t){f(this,O,x);var r=h(t);m(this,{bytes:v.call(new Array(r),0),byteLength:r}),i||(this.byteLength=r)},I=function DataView(t,r,e){f(this,I,w),f(t,O,w);var n=b(t).byteLength,o=s(r);if(o<0||n>24},getUint8:function getUint8(t){return W(this,1,t)[0]},getInt16:function getInt16(t){var r=W(this,2,t,arguments[1]);return(r[1]<<8|r[0])<<16>>16},getUint16:function getUint16(t){var r=W(this,2,t,arguments[1]);return r[1]<<8|r[0]},getInt32:function getInt32(t){return N(W(this,4,t,arguments[1]))},getUint32:function getUint32(t){return N(W(this,4,t,arguments[1]))>>>0},getFloat32:function getFloat32(t){return L(W(this,4,t,arguments[1]),23)},getFloat64:function getFloat64(t){return L(W(this,8,t,arguments[1]),52)},setInt8:function setInt8(t,r){V(this,1,t,U,r)},setUint8:function setUint8(t,r){V(this,1,t,U,r)},setInt16:function setInt16(t,r){V(this,2,t,D,r,arguments[2])},setUint16:function setUint16(t,r){V(this,2,t,D,r,arguments[2])},setInt32:function setInt32(t,r){V(this,4,t,C,r,arguments[2])},setUint32:function setUint32(t,r){V(this,4,t,C,r,arguments[2])},setFloat32:function setFloat32(t,r){V(this,4,t,B,r,arguments[2])},setFloat64:function setFloat64(t,r){V(this,8,t,q,r,arguments[2])}});d(O,x),d(I,w),r[x]=O,r[w]=I},function(t,r,e){var n,a=e(4),u=e(2),o=e(16),c=e(3),i=e(98),f=e(19),s=e(22),l=e(20).f,h=e(106),p=e(108),g=e(43)("toStringTag"),v=e(29)("TYPED_ARRAY_TAG"),d=u.DataView,y=d&&d.prototype,b=u.Int8Array,m=b&&b.prototype,x=u.Uint8ClampedArray,w=x&&x.prototype,S=b&&h(b),A=m&&h(m),E=Object.prototype,O=E.isPrototypeOf,I=!(!u.ArrayBuffer||!u.DataView),M=I&&!!p,R=!1,_={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},P=function P(t){var r=i(t);return"DataView"===r||c(_,r)},j=function(t){return o(t)&&c(_,i(t))};for(n in _)u[n]||(M=!1);if((!M||"function"!=typeof S||S===Function.prototype)&&(S=function S(){throw TypeError("Incorrect invocation")},M))for(n in _)u[n]&&p(u[n],S);if((!M||!A||A===E)&&(A=S.prototype,M))for(n in _)u[n]&&p(u[n].prototype,A);if(M&&h(w)!==A&&p(w,A),a&&!c(A,g))for(n in R=!0,l(A,g,{get:function(){return o(this)?this[v]:Ut}}),_)u[n]&&f(u[n],v,n);I&&p&&h(y)!==E&&p(y,E),t.exports={NATIVE_ARRAY_BUFFER:I,NATIVE_ARRAY_BUFFER_VIEWS:M,TYPED_ARRAY_TAG:R&&v,aTypedArray:function(t){if(j(t))return t;throw TypeError("Target is not a typed array")},aTypedArrayConstructor:function(t){if(p){if(O.call(S,t))return t}else for(var r in _)if(c(_,n)){var e=u[r];if(e&&(t===e||O.call(e,t)))return t}throw TypeError("Target is not a typed array constructor")},exportProto:function(t,r,e){if(a){if(e)for(var n in _){var o=u[n];o&&c(o.prototype,t)&&delete o.prototype[t]}A[t]&&!e||s(A,t,e?r:M&&m[t]||r)}},exportStatic:function(t,r,e){var n,o;if(a){if(p){if(e)for(n in _)(o=u[n])&&c(o,t)&&delete o[t];if(S[t]&&!e)return;try{return s(S,t,e?r:M&&b[t]||r)}catch(i){}}for(n in _)!(o=u[n])||o[t]&&!e||s(o,t,r)}},isView:P,isTypedArray:j,TypedArray:S,TypedArrayPrototype:A}},function(t,r,e){var o=e(22);t.exports=function(t,r,e){for(var n in r)o(t,n,r[n],e);return t}},function(t,r){t.exports=function(t,r,e){if(!(t instanceof r))throw TypeError("Incorrect "+(e?e+" ":"")+"invocation");return t}},function(t,r,e){var n=e(37),o=e(36);t.exports=function(t){if(t===Ut)return 0;var r=n(t),e=o(r);if(r!==e)throw RangeError("Wrong length or index");return e}},function(t,r,e){var n=e(130),o=n.NATIVE_ARRAY_BUFFER_VIEWS;e(7)({target:"ArrayBuffer",stat:!0,forced:!o},{isView:n.isView})},function(t,r,e){var n=e(129),f=e(21),s=e(38),l=e(36),h=e(136),p=n.ArrayBuffer,g=n.DataView,v=p.prototype.slice,o=e(5)(function(){return!new p(2).slice(1,Ut).byteLength});e(7)({target:"ArrayBuffer",proto:!0,unsafe:!0,forced:o},{slice:function slice(t,r){if(v!==Ut&&r===Ut)return v.call(f(this),t);for(var e=f(this).byteLength,n=s(t,e),o=s(r===Ut?e:r,e),i=new(h(this,p))(l(o-n)),a=new g(this),u=new g(i),c=0;n>>=0)?31-n(o(t+.5)*i):32}})},function(t,r,e){var n=e(165),o=Math.cosh,i=Math.abs,a=Math.E;e(7)({target:"Math",stat:!0,forced:!o||o(710)===Infinity},{cosh:function cosh(t){var r=n(i(t)-1)+1;return(r+1/(r*a*a))*(a/2)}})},function(t,r){var e=Math.expm1;t.exports=!e||22025.465794806718>>16)*a+i*(e&o>>>16)<<16>>>0)}})},function(t,r,e){var n=Math.log,o=Math.LOG10E;e(7)({target:"Math",stat:!0},{log10:function log10(t){return n(t)*o}})},function(t,r,e){e(7)({target:"Math",stat:!0},{log1p:e(158)})},function(t,r,e){var n=Math.log,o=Math.LN2;e(7)({target:"Math",stat:!0},{log2:function log2(t){return n(t)/o}})},function(t,r,e){e(7)({target:"Math",stat:!0},{sign:e(162)})},function(t,r,e){var n=e(165),o=Math.abs,i=Math.exp,a=Math.E,u=e(5)(function(){return-2e-17!=Math.sinh(-2e-17)});e(7)({target:"Math",stat:!0,forced:u},{sinh:function sinh(t){return o(t=+t)<1?(n(t)-n(-t))/2:(i(t-1)-i(-t-1))*(a/2)}})},function(t,r,e){var n=e(165),o=Math.exp;e(7)({target:"Math",stat:!0},{tanh:function tanh(t){var r=n(t=+t),e=n(-t);return r==Infinity?1:e==Infinity?-1:(r-e)/(o(t)+o(-t))}})},function(t,r,e){e(42)(Math,"Math",!0)},function(t,r,e){var n=Math.ceil,o=Math.floor;e(7)({target:"Math",stat:!0},{trunc:function trunc(t){return(0>>0||(a.test(e)?16:10))}:n},function(t,r,e){var f=e(37),s=e(196),l=e(197),n=1..toFixed,o=Math.floor,i=[0,0,0,0,0,0],h=function(t,r){for(var e=-1,n=r;++e<6;)i[e]=(n+=t*i[e])%1e7,n=o(n/1e7)},p=function(t){for(var r=6,e=0;0<=--r;)i[r]=o((e+=i[r])/t),e=e%t*1e7},g=function(){for(var t=6,r="";0<=--t;)if(""!==r||0===t||0!==i[t]){var e=String(i[t]);r=""===r?e:r+l.call("0",7-e.length)+e}return r},v=function(t,r,e){return 0===r?e:r%2==1?v(t,r-1,e*t):v(t*t,r/2,e)};e(7)({target:"Number",proto:!0,forced:n&&("0.000"!==8e-5.toFixed(3)||"1"!==.9.toFixed(0)||"1.25"!==1.255.toFixed(2)||"1000000000000000128"!==(0xde0b6b3a7640080).toFixed(0))||!e(5)(function(){n.call({})})},{toFixed:function toFixed(t){var r,e,n,o,i=s(this),a=f(t),u="",c="0";if(a<0||20>>=1)&&(r+=r))1&n&&(e+=r);return e}},function(t,r,e){var n=e(5),o=e(196),i=1..toPrecision;e(7)({target:"Number",proto:!0,forced:n(function(){return"1"!==i.call(1,Ut)})||!n(function(){i.call({})})},{toPrecision:function toPrecision(t){return t===Ut?i.call(o(this)):i.call(o(this),t)}})},function(t,r,e){var n=e(200);e(7)({target:"Object",stat:!0,forced:Object.assign!==n},{assign:n})},function(t,r,e){var h=e(49),p=e(40),g=e(9),v=e(69),d=e(12),o=Object.assign;t.exports=!o||e(5)(function(){var t={},r={},e=Symbol(),n="abcdefghijklmnopqrst";return t[e]=7,n.split("").forEach(function(t){r[t]=t}),7!=o({},t)[e]||h(o({},r)).join("")!=n})?function assign(t,r){for(var e=v(t),n=arguments.length,o=1,i=p.f,a=g.f;o>10),r%1024+56320))}return e.join("")}})},function(t,r,e){var n=e(264),o="includes",i=e(265)(o);e(7)({target:"String",proto:!0,forced:!i},{includes:function includes(t){return!!~n(this,t,o).indexOf(t,1")}),y=!h(function(){var t=/(?:)/,r=t.exec;t.exec=function(){return r.apply(this,arguments)};var e="ab".split(t);return 2!==e.length||"a"!==e[0]||"b"!==e[1]});t.exports=function(e,t,r,n){var o=p(e),i=!h(function(){var t={};return t[o]=function(){return 7},7!=""[e](t)}),a=i&&!h(function(){var t=!1,r=/a/;return r.exec=function(){return t=!0,null},"split"===e&&(r.constructor={},r.constructor[v]=function(){return r}),r[o](""),!t});if(!i||!a||"replace"===e&&!d||"split"===e&&!y){var u=/./[o],c=r(o,""[e],function(t,r,e,n,o){return r.exec===g?i&&!o?{done:!0,value:u.call(r,e,n)}:{done:!0,value:t.call(e,r,n)}:{done:!1}}),f=c[1];l(String.prototype,e,c[0]),l(RegExp.prototype,o,2==t?function(t,r){return f.call(t,this,r)}:function(t){return f.call(t,this)}),n&&s(RegExp.prototype[o],"sham",!0)}}},function(t,r,e){var n=e(274),o=e(275);e(7)({target:"String",proto:!0,forced:o},{padEnd:function padEnd(t){return n(this,t,1]*>)/g,g=/\$([$&`']|\d\d?)/g;e(272)("replace",2,function(o,w,S){return[function replace(t,r){var e=i(this),n=t==Ut?Ut:t[o];return n!==Ut?n.call(t,e,r):w.call(String(e),t,r)},function(t,r){var e=S(w,t,this,r);if(e.done)return e.value;var n=A(t),o=String(this),i="function"==typeof r;i||(r=String(r));var a=n.global;if(a){var u=n.unicode;n.lastIndex=0}for(var c=[];;){var f=M(n,o);if(null===f)break;if(c.push(f),!a)break;""===String(f[0])&&(n.lastIndex=I(o,E(n.lastIndex),u))}for(var s,l="",h=0,p=0;p>>0;if(0==n)return[];if(t===Ut)return[e];if(!s(t))return v.call(e,t,n);for(var o,i,a,u=[],c=0,f=new RegExp(t.source,(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":"")+"g");(o=h.call(f,e))&&!(c<(i=f.lastIndex)&&(u.push(e.slice(c,o.index)),1>>0;if(0==c)return[];if(0===o.length)return null===S(u,o)?[o]:[];for(var f=0,s=0,l=[];s"+o+""}},function(t,r,e){var n=e(5);t.exports=function(r){return n(function(){var t=""[r]('"');return t!==t.toLowerCase()||3>>0,i=e>>>0;return(r>>>0)+(n>>>0)+((o&i|(o|i)&~(o+i>>>0))>>>31)|0}})},function(t,r,e){e(7)({target:"Math",stat:!0},{imulh:function imulh(t,r){var e=+t,n=+r,o=65535&e,i=65535&n,a=e>>16,u=n>>16,c=(a*i>>>0)+(o*i>>>16);return a*u+(c>>16)+((o*u>>>0)+(65535&c)>>16)}})},function(t,r,e){e(7)({target:"Math",stat:!0},{isubh:function isubh(t,r,e,n){var o=t>>>0,i=e>>>0;return(r>>>0)-(n>>>0)-((~o&i|~(o^i)&o-i>>>0)>>>31)|0}})},function(t,r,e){e(7)({target:"Math",stat:!0},{RAD_PER_DEG:180/Math.PI})},function(t,r,e){var n=Math.PI/180;e(7)({target:"Math",stat:!0},{radians:function radians(t){return t*n}})},function(t,r,e){e(7)({target:"Math",stat:!0},{scale:e(377)})},function(t,r,e){var n=e(21),o=e(184),i=e(104),a="Seeded Random",u=a+" Generator",c=e(26),f=c.set,s=c.getterFor(u),l=i(function SeededRandomGenerator(t){f(this,{type:u,seed:t%2147483647})},a,function next(){var t=s(this);return{value:(1073741823&(t.seed=(1103515245*t.seed+12345)%2147483647))/1073741823,done:!1}});e(7)({target:"Math",stat:!0,forced:!0},{seededPRNG:function seededPRNG(t){var r=n(t).seed;if(!o(r))throw TypeError('Math.seededPRNG() argument should have a "seed" field with a finite value.');return new l(r)}})},function(t,r,e){e(7)({target:"Math",stat:!0},{signbit:function signbit(t){return(t=+t)!=t?t:0==t?1/t==Infinity:0>>16,u=n>>>16,c=(a*i>>>0)+(o*i>>>16);return a*u+(c>>>16)+((o*u>>>0)+(65535&c)>>>16)}})},function(t,r,e){var i=e(37),a=e(194),u="Invalid number representation",c=/^[0-9a-z]+$/;e(7)({target:"Number",stat:!0},{fromString:function fromString(t,r){var e,n,o=1;if("string"!=typeof t)throw TypeError(u);if(!t.length)throw SyntaxError(u);if("-"==t.charAt(0)&&(o=-1,!(t=t.slice(1)).length))throw SyntaxError(u);if((e=r===Ut?10:i(r))<2||36=b(256,5-r))return null}else if(255":1,"`":1}),z=u({},q,{"#":1,"?":1,"{":1,"}":1}),W=u({},z,{"/":1,":":1,";":1,"=":1,"@":1,"[":1,"\\":1,"]":1,"^":1,"|":1}),V=function(t,r){var e=c(t,0);return 32>1,t+=m(t/r);455m((y-a)/l))throw RangeError(b);for(a+=(s-i)*l,i=s,r=0;ry)throw RangeError(b);if(e==i){for(var h=a,p=36;;p+=36){var g=p<=u?1:u+26<=p?26:p-u;if(h-1};function n(t){if("string"!=typeof t&&(t=String(t)),/[^a-z0-9\-#$%&'*+.^_`|~]/i.test(t))throw new TypeError("Invalid character in header field name");return t.toLowerCase()}function i(t){return"string"!=typeof t&&(t=String(t)),t}function s(t){var r={next:function(){var e=t.shift();return{done:void 0===e,value:e}}};return e.iterable&&(r[Symbol.iterator]=function(){return r}),r}function a(t){this.map={},t instanceof a?t.forEach(function(t,e){this.append(e,t)},this):Array.isArray(t)?t.forEach(function(t){this.append(t[0],t[1])},this):t&&Object.getOwnPropertyNames(t).forEach(function(e){this.append(e,t[e])},this)}function h(t){if(t.bodyUsed)return Promise.reject(new TypeError("Already read"));t.bodyUsed=!0}function f(t){return new Promise(function(e,r){t.onload=function(){e(t.result)},t.onerror=function(){r(t.error)}})}function u(t){var e=new FileReader,r=f(e);return e.readAsArrayBuffer(t),r}function d(t){if(t.slice)return t.slice(0);var e=new Uint8Array(t.byteLength);return e.set(new Uint8Array(t)),e.buffer}function c(){return this.bodyUsed=!1,this._initBody=function(t){var r;this._bodyInit=t,t?"string"==typeof t?this._bodyText=t:e.blob&&Blob.prototype.isPrototypeOf(t)?this._bodyBlob=t:e.formData&&FormData.prototype.isPrototypeOf(t)?this._bodyFormData=t:e.searchParams&&URLSearchParams.prototype.isPrototypeOf(t)?this._bodyText=t.toString():e.arrayBuffer&&e.blob&&(r=t)&&DataView.prototype.isPrototypeOf(r)?(this._bodyArrayBuffer=d(t.buffer),this._bodyInit=new Blob([this._bodyArrayBuffer])):e.arrayBuffer&&(ArrayBuffer.prototype.isPrototypeOf(t)||o(t))?this._bodyArrayBuffer=d(t):this._bodyText=t=Object.prototype.toString.call(t):this._bodyText="",this.headers.get("content-type")||("string"==typeof t?this.headers.set("content-type","text/plain;charset=UTF-8"):this._bodyBlob&&this._bodyBlob.type?this.headers.set("content-type",this._bodyBlob.type):e.searchParams&&URLSearchParams.prototype.isPrototypeOf(t)&&this.headers.set("content-type","application/x-www-form-urlencoded;charset=UTF-8"))},e.blob&&(this.blob=function(){var t=h(this);if(t)return t;if(this._bodyBlob)return Promise.resolve(this._bodyBlob);if(this._bodyArrayBuffer)return Promise.resolve(new Blob([this._bodyArrayBuffer]));if(this._bodyFormData)throw new Error("could not read FormData body as blob");return Promise.resolve(new Blob([this._bodyText]))},this.arrayBuffer=function(){return this._bodyArrayBuffer?h(this)||Promise.resolve(this._bodyArrayBuffer):this.blob().then(u)}),this.text=function(){var t,e,r,o=h(this);if(o)return o;if(this._bodyBlob)return t=this._bodyBlob,r=f(e=new FileReader),e.readAsText(t),r;if(this._bodyArrayBuffer)return Promise.resolve(function(t){for(var e=new Uint8Array(t),r=new Array(e.length),o=0;o-1?o:r),this.mode=e.mode||this.mode||null,this.signal=e.signal||this.signal,this.referrer=null,("GET"===this.method||"HEAD"===this.method)&&n)throw new TypeError("Body not allowed for GET or HEAD requests");this._initBody(n)}function p(t){var e=new FormData;return t.trim().split("&").forEach(function(t){if(t){var r=t.split("="),o=r.shift().replace(/\+/g," "),n=r.join("=").replace(/\+/g," ");e.append(decodeURIComponent(o),decodeURIComponent(n))}}),e}function b(t,e){e||(e={}),this.type="default",this.status=void 0===e.status?200:e.status,this.ok=this.status>=200&&this.status<300,this.statusText="statusText"in e?e.statusText:"OK",this.headers=new a(e.headers),this.url=e.url||"",this._initBody(t)}y.prototype.clone=function(){return new y(this,{body:this._bodyInit})},c.call(y.prototype),c.call(b.prototype),b.prototype.clone=function(){return new b(this._bodyInit,{status:this.status,statusText:this.statusText,headers:new a(this.headers),url:this.url})},b.error=function(){var t=new b(null,{status:0,statusText:""});return t.type="error",t};var m=[301,302,303,307,308];b.redirect=function(t,e){if(-1===m.indexOf(e))throw new RangeError("Invalid status code");return new b(null,{status:e,headers:{location:t}})},t.DOMException=self.DOMException;try{new t.DOMException}catch(e){t.DOMException=function(t,e){this.message=t,this.name=e;var r=Error(t);this.stack=r.stack},t.DOMException.prototype=Object.create(Error.prototype),t.DOMException.prototype.constructor=t.DOMException}function w(r,o){return new Promise(function(n,i){var s=new y(r,o);if(s.signal&&s.signal.aborted)return i(new t.DOMException("Aborted","AbortError"));var h=new XMLHttpRequest;function f(){h.abort()}h.onload=function(){var t,e,r={status:h.status,statusText:h.statusText,headers:(t=h.getAllResponseHeaders()||"",e=new a,t.replace(/\r?\n[\t ]+/g," ").split(/\r?\n/).forEach(function(t){var r=t.split(":"),o=r.shift().trim();if(o){var n=r.join(":").trim();e.append(o,n)}}),e)};r.url="responseURL"in h?h.responseURL:r.headers.get("X-Request-URL");var o="response"in h?h.response:h.responseText;n(new b(o,r))},h.onerror=function(){i(new TypeError("Network request failed"))},h.ontimeout=function(){i(new TypeError("Network request failed"))},h.onabort=function(){i(new t.DOMException("Aborted","AbortError"))},h.open(s.method,s.url,!0),"include"===s.credentials?h.withCredentials=!0:"omit"===s.credentials&&(h.withCredentials=!1),"responseType"in h&&e.blob&&(h.responseType="blob"),s.headers.forEach(function(t,e){h.setRequestHeader(e,t)}),s.signal&&(s.signal.addEventListener("abort",f),h.onreadystatechange=function(){4===h.readyState&&s.signal.removeEventListener("abort",f)}),h.send(void 0===s._bodyInit?null:s._bodyInit)})}w.polyfill=!0,self.fetch||(self.fetch=w,self.Headers=a,self.Request=y,self.Response=b),t.Headers=a,t.Request=y,t.Response=b,t.fetch=w,Object.defineProperty(t,"__esModule",{value:!0})}); 18 | (function(){ 19 | /* 20 | 21 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 22 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 23 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 24 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 25 | Code distributed by Google as part of the polymer project is also 26 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 27 | */ 28 | 'use strict';var aa=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function g(a){var b=aa.has(a);a=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(a);return!b&&a}function l(a){var b=a.isConnected;if(void 0!==b)return b;for(;a&&!(a.__CE_isImportDocument||a instanceof Document);)a=a.parentNode||(window.ShadowRoot&&a instanceof ShadowRoot?a.host:void 0);return!(!a||!(a.__CE_isImportDocument||a instanceof Document))} 29 | function n(a,b){for(;b&&b!==a&&!b.nextSibling;)b=b.parentNode;return b&&b!==a?b.nextSibling:null} 30 | function p(a,b,d){d=void 0===d?new Set:d;for(var c=a;c;){if(c.nodeType===Node.ELEMENT_NODE){var e=c;b(e);var f=e.localName;if("link"===f&&"import"===e.getAttribute("rel")){c=e.import;if(c instanceof Node&&!d.has(c))for(d.add(c),c=c.firstChild;c;c=c.nextSibling)p(c,b,d);c=n(a,e);continue}else if("template"===f){c=n(a,e);continue}if(e=e.__CE_shadowRoot)for(e=e.firstChild;e;e=e.nextSibling)p(e,b,d)}c=c.firstChild?c.firstChild:n(a,c)}}function r(a,b,d){a[b]=d};function u(){this.a=new Map;this.g=new Map;this.c=[];this.f=[];this.b=!1}function ba(a,b,d){a.a.set(b,d);a.g.set(d.constructorFunction,d)}function ca(a,b){a.b=!0;a.c.push(b)}function da(a,b){a.b=!0;a.f.push(b)}function v(a,b){a.b&&p(b,function(b){return w(a,b)})}function w(a,b){if(a.b&&!b.__CE_patched){b.__CE_patched=!0;for(var d=0;d0?e.setAttribute("class",t.join(" ")):e.removeAttribute("class")}return""===t[0]&&t.splice(0,1),t.toggle=function(e,i){void 0!==i?i?t.add(e):t.remove(e):-1!==t.indexOf(e)?t.splice(t.indexOf(e),1):t.push(e),n()},t.add=function(){for(var e=[].slice.call(arguments),i=0,s=e.length;i 0 ? fallback.join(',').trim() : undefined 345 | }; 346 | } 347 | function compileVar(cssText, template, offset) { 348 | var varMeta = parseVar(cssText, offset); 349 | if (!varMeta) { 350 | template.push(cssText.substring(offset, cssText.length)); 351 | return cssText.length; 352 | } 353 | var propName = varMeta.propName; 354 | var fallback = varMeta.fallback != null ? compileTemplate(varMeta.fallback) : undefined; 355 | template.push(cssText.substring(offset, varMeta.start), function (params) { return resolveVar(params, propName, fallback); }); 356 | return varMeta.end; 357 | } 358 | function executeTemplate(template, props) { 359 | var final = ''; 360 | for (var i = 0; i < template.length; i++) { 361 | var s = template[i]; 362 | final += (typeof s === 'string') 363 | ? s 364 | : s(props); 365 | } 366 | return final; 367 | } 368 | function findEndValue(cssText, offset) { 369 | var onStr = false; 370 | var double = false; 371 | var i = offset; 372 | for (; i < cssText.length; i++) { 373 | var c = cssText[i]; 374 | if (onStr) { 375 | if (double && c === '"') { 376 | onStr = false; 377 | } 378 | if (!double && c === '\'') { 379 | onStr = false; 380 | } 381 | } 382 | else { 383 | if (c === '"') { 384 | onStr = true; 385 | double = true; 386 | } 387 | else if (c === '\'') { 388 | onStr = true; 389 | double = false; 390 | } 391 | else if (c === ';') { 392 | return i + 1; 393 | } 394 | else if (c === '}') { 395 | return i; 396 | } 397 | } 398 | } 399 | return i; 400 | } 401 | function removeCustomAssigns(cssText) { 402 | var final = ''; 403 | var offset = 0; 404 | while (true) { 405 | var assignPos = findRegex(VAR_ASSIGN_START, cssText, offset); 406 | var start = assignPos ? assignPos.start : cssText.length; 407 | final += cssText.substring(offset, start); 408 | if (assignPos) { 409 | offset = findEndValue(cssText, start); 410 | } 411 | else { 412 | break; 413 | } 414 | } 415 | return final; 416 | } 417 | function compileTemplate(cssText) { 418 | var index = 0; 419 | cssText = cssText.replace(COMMENTS, ''); 420 | cssText = removeCustomAssigns(cssText) 421 | .replace(TRAILING_LINES, ''); 422 | var segments = []; 423 | while (index < cssText.length) { 424 | index = compileVar(cssText, segments, index); 425 | } 426 | return segments; 427 | } 428 | function resolveValues(selectors) { 429 | var props = {}; 430 | selectors.forEach(function (selector) { 431 | selector.declarations.forEach(function (dec) { 432 | props[dec.prop] = dec.value; 433 | }); 434 | }); 435 | var propsValues = {}; 436 | var entries = Object.entries(props); 437 | var _loop_1 = function (i) { 438 | var dirty = false; 439 | entries.forEach(function (_a) { 440 | var key = _a[0], value = _a[1]; 441 | var propValue = executeTemplate(value, propsValues); 442 | if (propValue !== propsValues[key]) { 443 | propsValues[key] = propValue; 444 | dirty = true; 445 | } 446 | }); 447 | if (!dirty) { 448 | return "break"; 449 | } 450 | }; 451 | for (var i = 0; i < 10; i++) { 452 | var state_1 = _loop_1(i); 453 | if (state_1 === "break") 454 | break; 455 | } 456 | return propsValues; 457 | } 458 | function getSelectors(root, index) { 459 | if (index === void 0) { index = 0; } 460 | if (!root.rules) { 461 | return []; 462 | } 463 | var selectors = []; 464 | root.rules 465 | .filter(function (rule) { return rule.type === types.STYLE_RULE; }) 466 | .forEach(function (rule) { 467 | var declarations = getDeclarations(rule.cssText); 468 | if (declarations.length > 0) { 469 | rule.parsedSelector.split(',').forEach(function (selector) { 470 | selector = selector.trim(); 471 | selectors.push({ 472 | selector: selector, 473 | declarations: declarations, 474 | specificity: computeSpecificity(), 475 | nu: index 476 | }); 477 | }); 478 | } 479 | index++; 480 | }); 481 | return selectors; 482 | } 483 | function computeSpecificity(_selector) { 484 | return 1; 485 | } 486 | var IMPORTANT = '!important'; 487 | var FIND_DECLARATIONS = /(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm; 488 | function getDeclarations(cssText) { 489 | var declarations = []; 490 | var xArray; 491 | while (xArray = FIND_DECLARATIONS.exec(cssText.trim())) { 492 | var _a = normalizeValue(xArray[2]), value = _a.value, important = _a.important; 493 | declarations.push({ 494 | prop: xArray[1].trim(), 495 | value: compileTemplate(value), 496 | important: important, 497 | }); 498 | } 499 | return declarations; 500 | } 501 | function normalizeValue(value) { 502 | var regex = /\s+/gim; 503 | value = value.replace(regex, ' ').trim(); 504 | var important = value.endsWith(IMPORTANT); 505 | if (important) { 506 | value = value.substr(0, value.length - IMPORTANT.length).trim(); 507 | } 508 | return { 509 | value: value, 510 | important: important 511 | }; 512 | } 513 | function getActiveSelectors(hostEl, hostScopeMap, globalScopes) { 514 | // computes the css scopes that might affect this particular element 515 | var scopes = globalScopes.concat(getScopesForElement(hostScopeMap, hostEl)); 516 | // each scope might have an array of associated selectors 517 | // let's flatten the complete array of selectors from all the scopes 518 | var selectorSet = getSelectorsForScopes(scopes); 519 | // we filter to only the selectors that matches the hostEl 520 | var activeSelectors = selectorSet.filter(function (selector) { return matches(hostEl, selector.selector); }); 521 | // sort selectors by specifity 522 | return sortSelectors(activeSelectors); 523 | } 524 | function getScopesForElement(hostTemplateMap, node) { 525 | var scopes = []; 526 | while (node) { 527 | var scope = hostTemplateMap.get(node); 528 | if (scope) { 529 | scopes.push(scope); 530 | } 531 | node = node.parentElement; 532 | } 533 | return scopes; 534 | } 535 | function getSelectorsForScopes(scopes) { 536 | var selectors = []; 537 | scopes.forEach(function (scope) { 538 | selectors.push.apply(selectors, scope.selectors); 539 | }); 540 | return selectors; 541 | } 542 | function sortSelectors(selectors) { 543 | selectors.sort(function (a, b) { 544 | if (a.specificity === b.specificity) { 545 | return a.nu - b.nu; 546 | } 547 | return a.specificity - b.specificity; 548 | }); 549 | return selectors; 550 | } 551 | function matches(el, selector) { 552 | return el.matches(selector); 553 | } 554 | function parseCSS(original) { 555 | var ast = parse(original); 556 | var template = compileTemplate(original); 557 | var selectors = getSelectors(ast); 558 | return { 559 | original: original, 560 | template: template, 561 | selectors: selectors, 562 | isDynamic: template.length > 1 563 | }; 564 | } 565 | function addGlobalStyle(globalScopes, styleEl) { 566 | var css = parseCSS(styleEl.innerHTML); 567 | css.styleEl = styleEl; 568 | globalScopes.push(css); 569 | } 570 | function updateGlobalScopes(scopes) { 571 | var selectors = getSelectorsForScopes(scopes); 572 | var props = resolveValues(selectors); 573 | scopes.forEach(function (scope) { 574 | if (scope.isDynamic) { 575 | scope.styleEl.innerHTML = executeTemplate(scope.template, props); 576 | } 577 | }); 578 | } 579 | function reScope(scope, cssScopeId) { 580 | var template = scope.template.map(function (segment) { 581 | return (typeof segment === 'string') 582 | ? replaceScope(segment, scope.cssScopeId, cssScopeId) 583 | : segment; 584 | }); 585 | var selectors = scope.selectors.map(function (sel) { 586 | return Object.assign({}, sel, { selector: replaceScope(sel.selector, scope.cssScopeId, cssScopeId) }); 587 | }); 588 | return Object.assign({}, scope, { template: template, 589 | selectors: selectors, 590 | cssScopeId: cssScopeId }); 591 | } 592 | function replaceScope(original, oldScopeId, newScopeId) { 593 | original = replaceAll(original, "\\." + oldScopeId, "." + newScopeId); 594 | return original; 595 | } 596 | function replaceAll(input, find, replace) { 597 | return input.replace(new RegExp(find, 'g'), replace); 598 | } 599 | function loadDocument(doc, globalScopes) { 600 | return loadDocumentLinks(doc, globalScopes).then(function () { 601 | loadDocumentStyles(doc, globalScopes); 602 | }); 603 | } 604 | function loadDocumentLinks(doc, globalScopes) { 605 | var promises = []; 606 | var linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]'); 607 | for (var i = 0; i < linkElms.length; i++) { 608 | promises.push(addGlobalLink(doc, globalScopes, linkElms[i])); 609 | } 610 | return Promise.all(promises); 611 | } 612 | function loadDocumentStyles(doc, globalScopes) { 613 | var styleElms = doc.querySelectorAll('style'); 614 | for (var i = 0; i < styleElms.length; i++) { 615 | addGlobalStyle(globalScopes, styleElms[i]); 616 | } 617 | } 618 | function addGlobalLink(doc, globalScopes, linkElm) { 619 | var url = linkElm.href; 620 | return fetch(url).then(function (rsp) { return rsp.text(); }).then(function (text) { 621 | if (hasCssVariables(text) && linkElm.parentNode) { 622 | if (hasRelativeUrls(text)) { 623 | text = fixRelativeUrls(text, url); 624 | } 625 | var styleEl = doc.createElement('style'); 626 | styleEl.innerHTML = text; 627 | addGlobalStyle(globalScopes, styleEl); 628 | linkElm.parentNode.insertBefore(styleEl, linkElm); 629 | linkElm.remove(); 630 | } 631 | }).catch(function (err) { 632 | console.error(err); 633 | }); 634 | } 635 | // This regexp tries to determine when a variable is declared, for example: 636 | // 637 | // .my-el { --highlight-color: green; } 638 | // 639 | // but we don't want to trigger when a classname uses "--" or a pseudo-class is 640 | // used. We assume that the only characters that can preceed a variable 641 | // declaration are "{", from an opening block, ";" from a preceeding rule, or a 642 | // space. This prevents the regexp from matching a word in a selector, since 643 | // they would need to start with a "." or "#". (We assume element names don't 644 | // start with "--"). 645 | var CSS_VARIABLE_REGEXP = /[\s;{]--[-a-zA-Z0-9]+\s*:/m; 646 | function hasCssVariables(css) { 647 | return css.indexOf('var(') > -1 || CSS_VARIABLE_REGEXP.test(css); 648 | } 649 | // This regexp find all url() usages with relative urls 650 | var CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?![http|/])([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim; 651 | function hasRelativeUrls(css) { 652 | CSS_URL_REGEXP.lastIndex = 0; 653 | return CSS_URL_REGEXP.test(css); 654 | } 655 | function fixRelativeUrls(css, originalUrl) { 656 | // get the basepath from the original import url 657 | var basePath = originalUrl.replace(/[^/]*$/, ''); 658 | // replace the relative url, with the new relative url 659 | return css.replace(CSS_URL_REGEXP, function (fullMatch, url) { 660 | // rhe new relative path is the base path + uri 661 | // TODO: normalize relative URL 662 | var relativeUrl = basePath + url; 663 | return fullMatch.replace(url, relativeUrl); 664 | }); 665 | } 666 | var CustomStyle = /** @class */ (function () { 667 | function CustomStyle(win, doc) { 668 | this.win = win; 669 | this.doc = doc; 670 | this.count = 0; 671 | this.hostStyleMap = new WeakMap(); 672 | this.hostScopeMap = new WeakMap(); 673 | this.globalScopes = []; 674 | this.scopesMap = new Map(); 675 | } 676 | CustomStyle.prototype.initShim = function () { 677 | var _this = this; 678 | return new Promise(function (resolve) { 679 | _this.win.requestAnimationFrame(function () { 680 | loadDocument(_this.doc, _this.globalScopes).then(function () { return resolve(); }); 681 | }); 682 | }); 683 | }; 684 | CustomStyle.prototype.addLink = function (linkEl) { 685 | var _this = this; 686 | return addGlobalLink(this.doc, this.globalScopes, linkEl).then(function () { 687 | _this.updateGlobal(); 688 | }); 689 | }; 690 | CustomStyle.prototype.addGlobalStyle = function (styleEl) { 691 | addGlobalStyle(this.globalScopes, styleEl); 692 | this.updateGlobal(); 693 | }; 694 | CustomStyle.prototype.createHostStyle = function (hostEl, cssScopeId, cssText) { 695 | if (this.hostScopeMap.has(hostEl)) { 696 | throw new Error('host style already created'); 697 | } 698 | var baseScope = this.registerHostTemplate(cssText, cssScopeId); 699 | var isDynamicScoped = !!(baseScope.isDynamic && baseScope.cssScopeId); 700 | var needStyleEl = isDynamicScoped || !baseScope.styleEl; 701 | var styleEl = this.doc.createElement('style'); 702 | if (!needStyleEl) { 703 | styleEl.innerHTML = cssText; 704 | } 705 | else { 706 | if (isDynamicScoped) { 707 | styleEl['s-sc'] = cssScopeId = baseScope.cssScopeId + "-" + this.count; 708 | styleEl.innerHTML = '/*needs update*/'; 709 | this.hostStyleMap.set(hostEl, styleEl); 710 | this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId)); 711 | this.count++; 712 | } 713 | else { 714 | baseScope.styleEl = styleEl; 715 | if (!baseScope.isDynamic) { 716 | styleEl.innerHTML = executeTemplate(baseScope.template, {}); 717 | } 718 | this.globalScopes.push(baseScope); 719 | this.updateGlobal(); 720 | this.hostScopeMap.set(hostEl, baseScope); 721 | } 722 | } 723 | return styleEl; 724 | }; 725 | CustomStyle.prototype.removeHost = function (hostEl) { 726 | var css = this.hostStyleMap.get(hostEl); 727 | if (css) { 728 | css.remove(); 729 | } 730 | this.hostStyleMap.delete(hostEl); 731 | this.hostScopeMap.delete(hostEl); 732 | }; 733 | CustomStyle.prototype.updateHost = function (hostEl) { 734 | var scope = this.hostScopeMap.get(hostEl); 735 | if (scope && scope.isDynamic && scope.cssScopeId) { 736 | var styleEl = this.hostStyleMap.get(hostEl); 737 | if (styleEl) { 738 | var selectors = getActiveSelectors(hostEl, this.hostScopeMap, this.globalScopes); 739 | var props = resolveValues(selectors); 740 | styleEl.innerHTML = executeTemplate(scope.template, props); 741 | } 742 | } 743 | }; 744 | CustomStyle.prototype.updateGlobal = function () { 745 | updateGlobalScopes(this.globalScopes); 746 | }; 747 | CustomStyle.prototype.registerHostTemplate = function (cssText, scopeId) { 748 | var scope = this.scopesMap.get(scopeId); 749 | if (!scope) { 750 | scope = parseCSS(cssText); 751 | scope.cssScopeId = scopeId; 752 | this.scopesMap.set(scopeId, scope); 753 | } 754 | return scope; 755 | }; 756 | return CustomStyle; 757 | }()); 758 | var win = window; 759 | function needsShim() { 760 | return !(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)')); 761 | } 762 | if (!win.__stencil_cssshim && needsShim()) { 763 | win.__stencil_cssshim = new CustomStyle(win, document); 764 | } 765 | 766 | var doc = document; 767 | var allScripts = doc.querySelectorAll('script'); 768 | var scriptElm; 769 | for (var x = allScripts.length - 1; x >= 0; x--) { 770 | scriptElm = allScripts[x]; 771 | if (scriptElm.src || scriptElm.hasAttribute('data-resources-url')) { 772 | break; 773 | } 774 | } 775 | var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : ''; 776 | var start = function() { 777 | var url = new URL('./p-e02fcade.system.js', resourcesUrl); 778 | System.import(url.href); 779 | }; 780 | 781 | if (win.__stencil_cssshim) { 782 | win.__stencil_cssshim.initShim().then(start); 783 | } else { 784 | start(); 785 | } 786 | --------------------------------------------------------------------------------