/
var
/
www
/
html
/
wordpress
/
wp-content
/
plugins
/
presto-player
/
dist
/
components
/
web-components
/
Upload File
HOME
{"version":3,"file":"presto-player-skeleton.entry.esm.js","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"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,i1BAAi1B;;MCO91B,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAM,CAAA,MAAA,GAA+B,OAAO;AAkBrD;IAhBC,MAAM,GAAA;AACJ,QAAA,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,IAAI;AAChB,gBAAA,iBAAiB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;AAC1C,gBAAA,iBAAiB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;AAC3C,aAAA,EACS,WAAA,EAAA,MAAM,eACN,QAAQ,EAAA,EAElB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,qBAAqB,EAAA,CAAO,CACpD;;;;;;;"}