{"mappings":"AACA,cAAc,sBAAiC;AAG/C,SAAS,mBAA+C;;;;;;;;AAYxD,cAwCM,iBAAiB,YAAY;;;;CAIjC,AACA;CAEA,UAAU,UAAU,eAAe;;AAUrC,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/skeleton/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\n\nimport { GlobalStyle, cssGlobalVars, scopePrefix } from \"../../internal/global-style.js\";\n\nconst protoName = \"skeleton\";\nconst cssScope = scopePrefix(protoName);\n\n/**\n * {@linkcode Skeleton} renders a skeleton screen.\n *\n * @slot loading - The content if loading is true.\n * @slot - The content if loading is false.\n * @category feedback\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    ${cssScope}--from: var(${cssGlobalVars.background});\n    ${cssScope}--to: var(${cssGlobalVars.passive});\n    ${cssScope}--deg: 95deg;\n    ${cssScope}--duration: 2s;\n    height: 2em;\n    width: 100%;\n    flex-shrink: 0;\n    overflow: hidden;\n    background-color: transparent;\n    background-size: 200% 100%;\n    background-image: linear-gradient(\n      var(${cssScope}--deg),\n      var(${cssScope}--from) 36%,\n      var(${cssScope}--to) 50%,\n      var(${cssScope}--from) 64%\n    );\n    animation: _ var(${cssScope}--duration) ease-in-out infinite none running;\n  }\n\n  @keyframes _ {\n    from {\n      background-position: 150% center;\n    }\n    to {\n      background-position: -50% center;\n    }\n  }\n\n  [part=\"root\"] {\n    display: contents;\n  }\n\n  :host,\n  :host([contents]) [part=\"root\"] {\n    display: block;\n  }\n`)\nclass Skeleton extends GlobalStyle {\n  /**\n   * If false, render slot only.\n   */\n  @state()\n  loading = true;\n\n  protected render(): TemplateResult<1> {\n    if (!this.loading) {\n      return htmlSlot();\n    }\n    return html`\n      <div part=\"root\">${htmlSlot(\"loading\")}</div>\n    `;\n  }\n}\n\nexport default Skeleton;\nexport { Skeleton };\n"],"version":3,"file":"component.d.ts"}