OwlCyberSecurity - MANAGER
Edit File: presto-player-skeleton.entry.js.map
{"file":"presto-player-skeleton.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,i1BAAi1B,CAAC;AAC52B,mCAAe,iBAAiB;;MCMnB,cAAc;;;sBACoB,OAAO;;IAEpD,MAAM;QACJ,QACE,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,iBAAiB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;gBAC1C,iBAAiB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;aAC3C,eACS,MAAM,eACN,QAAQ,IAElB,4DAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,qBAAqB,GAAO,CACpD,EACN;KACH;;;;;;","names":[],"sources":["src/components/ui/presto-skeleton/presto-skeleton.scss?tag=presto-player-skeleton&encapsulation=shadow","src/components/ui/presto-skeleton/presto-skeleton.tsx"],"sourcesContent":[":host {\n position: relative;\n box-sizing: border-box;\n\n & *,\n & *:before,\n & *:after {\n box-sizing: inherit;\n }\n}\n\n/**\n * @prop --border-radius: The skeleton's border radius.\n * @prop --color: The color of the skeleton.\n * @prop --sheen-color: The sheen color when the skeleton is in its loading state.\n */\n:host {\n --border-radius: var(--presto-player-border-radius-pill);\n --color: #e5e7eb;\n --sheen-color: #f3f4f6;\n\n display: block;\n position: relative;\n}\n\n.skeleton {\n display: flex;\n width: 100%;\n height: 100%;\n min-height: 1rem;\n}\n\n.skeleton__indicator {\n flex: 1 1 auto;\n background: var(--color);\n border-radius: var(--border-radius);\n}\n\n.skeleton--sheen .skeleton__indicator {\n background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));\n background-size: 400% 100%;\n background-size: 400% 100%;\n animation: sheen 8s ease-in-out infinite;\n}\n\n.skeleton--pulse .skeleton__indicator {\n animation: pulse 2s ease-in-out 0.5s infinite;\n}\n\n@keyframes sheen {\n 0% {\n background-position: 200% 0;\n }\n to {\n background-position: -200% 0;\n }\n}\n\n@keyframes pulse {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 1;\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'presto-player-skeleton',\n styleUrl: 'presto-skeleton.scss',\n shadow: true,\n})\nexport class PrestoSkeleton {\n @Prop() effect: 'pulse' | 'sheen' | 'none' = 'sheen';\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'skeleton': true,\n 'skeleton--pulse': this.effect === 'pulse',\n 'skeleton--sheen': this.effect === 'sheen',\n }}\n aria-busy=\"true\"\n aria-live=\"polite\"\n >\n <div part=\"indicator\" class=\"skeleton__indicator\"></div>\n </div>\n );\n }\n}\n"],"version":3}