chunk.ESB2FSU7.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import {
  2. e as e2
  3. } from "./chunk.YXKHB4AC.js";
  4. import {
  5. T,
  6. e,
  7. h,
  8. n,
  9. r
  10. } from "./chunk.5PIDMFOE.js";
  11. import {
  12. __decorateClass
  13. } from "./chunk.IHGPZX35.js";
  14. // _uyihdawu1:/Users/claviska/Projects/shoelace/src/components/skeleton/skeleton.scss
  15. var skeleton_default = ":host {\n position: relative;\n box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n box-sizing: inherit;\n}\n\n[hidden] {\n display: none !important;\n}\n\n:host {\n --border-radius: var(--sl-border-radius-pill);\n --color: var(--sl-color-gray-200);\n --sheen-color: var(--sl-color-gray-100);\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@keyframes pulse {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 1;\n }\n}";
  16. // src/components/skeleton/skeleton.ts
  17. var SlSkeleton = class extends h {
  18. constructor() {
  19. super(...arguments);
  20. this.effect = "sheen";
  21. }
  22. render() {
  23. return T`
  24. <div
  25. part="base"
  26. class=${e2({
  27. skeleton: true,
  28. "skeleton--pulse": this.effect === "pulse",
  29. "skeleton--sheen": this.effect === "sheen"
  30. })}
  31. aria-busy="true"
  32. aria-live="polite"
  33. >
  34. <div part="indicator" class="skeleton__indicator"></div>
  35. </div>
  36. `;
  37. }
  38. };
  39. SlSkeleton.styles = r(skeleton_default);
  40. __decorateClass([
  41. e()
  42. ], SlSkeleton.prototype, "effect", 2);
  43. SlSkeleton = __decorateClass([
  44. n("sl-skeleton")
  45. ], SlSkeleton);
  46. var skeleton_default2 = SlSkeleton;
  47. export {
  48. skeleton_default2 as skeleton_default
  49. };