chunk.VRQNGGI3.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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/responsive-media/responsive-media.scss
  15. var responsive_media_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 display: block;\n}\n\n.responsive-media {\n position: relative;\n}\n.responsive-media ::slotted(*) {\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n}\n\n.responsive-media--cover ::slotted(embed),\n.responsive-media--cover ::slotted(iframe),\n.responsive-media--cover ::slotted(img),\n.responsive-media--cover ::slotted(video) {\n object-fit: cover !important;\n}\n\n.responsive-media--contain ::slotted(embed),\n.responsive-media--contain ::slotted(iframe),\n.responsive-media--contain ::slotted(img),\n.responsive-media--contain ::slotted(video) {\n object-fit: contain !important;\n}";
  16. // src/components/responsive-media/responsive-media.ts
  17. var SlResponsiveMedia = class extends h {
  18. constructor() {
  19. super(...arguments);
  20. this.aspectRatio = "16:9";
  21. this.fit = "cover";
  22. }
  23. render() {
  24. const split = this.aspectRatio.split(":");
  25. const x = parseInt(split[0]);
  26. const y = parseInt(split[1]);
  27. const paddingBottom = x && y ? `${y / x * 100}%` : "0";
  28. return T`
  29. <div
  30. class=${e2({
  31. "responsive-media": true,
  32. "responsive-media--cover": this.fit === "cover",
  33. "responsive-media--contain": this.fit === "contain"
  34. })}
  35. style="padding-bottom: ${paddingBottom}"
  36. >
  37. <slot></slot>
  38. </div>
  39. `;
  40. }
  41. };
  42. SlResponsiveMedia.styles = r(responsive_media_default);
  43. __decorateClass([
  44. e({ attribute: "aspect-ratio" })
  45. ], SlResponsiveMedia.prototype, "aspectRatio", 2);
  46. __decorateClass([
  47. e()
  48. ], SlResponsiveMedia.prototype, "fit", 2);
  49. SlResponsiveMedia = __decorateClass([
  50. n("sl-responsive-media")
  51. ], SlResponsiveMedia);
  52. var responsive_media_default2 = SlResponsiveMedia;
  53. export {
  54. responsive_media_default2 as responsive_media_default
  55. };