{"version":3,"sources":["../src/container-picture.ts"],"sourcesContent":["class ContainerPicture extends HTMLElement {\n  divs: HTMLDivElement[] = [];\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: \"open\" });\n    // Add style tag\n    const style = document.createElement(\"style\");\n    style.setAttribute(\"type\", \"text/css\");\n    this.shadowRoot?.appendChild(style);\n    // Add slot to listen to slot change and update the shadow DOM\n    const slot = document.createElement(\"slot\");\n    this.shadowRoot?.appendChild(slot);\n    this.shadowRoot?.addEventListener(\"slotchange\", () => {\n      this.updateStyle();\n      this.transformSource();\n    });\n  }\n\n  connectedCallback(): void {\n    this.updateStyle();\n    this.transformSource();\n  }\n\n  transformSource(): void {\n    for (const div of this.divs) {\n      div.remove();\n    }\n    const images = this.querySelectorAll<HTMLImageElement | HTMLSourceElement>(\n      \"source, img\",\n    );\n    for (let i = 0; i < images.length; i++) {\n      const div = document.createElement(\"div\");\n      this.shadowRoot?.appendChild(div);\n      this.divs.push(div);\n    }\n  }\n\n  updateStyle(): void {\n    const images = this.querySelectorAll<HTMLImageElement | HTMLSourceElement>(\n      \"source, img\",\n    );\n\n    let css = `\n:host {\n  display: inline-block;\n}\nslot {\n  display: none;\n}`;\n    for (let i = 0; i < images.length; i++) {\n      const image = images[i];\n      const container = image.getAttribute(\"container\");\n      css += `\n:nth-child(${Number(i) + 3}) {\n  background: url(${image.src || image.srcset});\n  width: ${image.width ? image.width + \"px\" : \"auto\"};\n  height: ${image.height ? image.height + \"px\" : \"auto\"};\n  ${container ? \"display: none\" : \"display: inline-block\"};\n}`;\n    }\n\n    for (let i = images.length; i > 0; i--) {\n      const image = images[i - 1];\n      const container = image.getAttribute(\"container\");\n      if (container) {\n        css += `\n@container ${container} {\n  :nth-child(${i + 2}) {\n    display: inline-block;\n  }\n  :not(:nth-child(${i + 2})) {\n    display: none;\n  }\n}`;\n      }\n    }\n\n    const style = this.shadowRoot?.querySelector(\"style\");\n    if (style) {\n      style.textContent = css;\n    }\n  }\n}\n\ncustomElements.define(\"container-picture\", ContainerPicture);\n"],"mappings":";;;;;;AAAA,IAAM,mBAAN,cAA+B,YAAY;AAAA,EAGzC,cAAc;AACZ,UAAM;AAHR,gCAAyB,CAAC;AAIxB,SAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAElC,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,aAAa,QAAQ,UAAU;AACrC,SAAK,YAAY,YAAY,KAAK;AAElC,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,YAAY,YAAY,IAAI;AACjC,SAAK,YAAY,iBAAiB,cAAc,MAAM;AACpD,WAAK,YAAY;AACjB,WAAK,gBAAgB;AAAA,IACvB,CAAC;AAAA,EACH;AAAA,EAEA,oBAA0B;AACxB,SAAK,YAAY;AACjB,SAAK,gBAAgB;AAAA,EACvB;AAAA,EAEA,kBAAwB;AACtB,eAAW,OAAO,KAAK,MAAM;AAC3B,UAAI,OAAO;AAAA,IACb;AACA,UAAM,SAAS,KAAK;AAAA,MAClB;AAAA,IACF;AACA,aAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,WAAK,YAAY,YAAY,GAAG;AAChC,WAAK,KAAK,KAAK,GAAG;AAAA,IACpB;AAAA,EACF;AAAA,EAEA,cAAoB;AAClB,UAAM,SAAS,KAAK;AAAA,MAClB;AAAA,IACF;AAEA,QAAI,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOV,aAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,YAAM,QAAQ,OAAO,CAAC;AACtB,YAAM,YAAY,MAAM,aAAa,WAAW;AAChD,aAAO;AAAA,aACA,OAAO,CAAC,IAAI,CAAC;AAAA,oBACN,MAAM,OAAO,MAAM,MAAM;AAAA,WAClC,MAAM,QAAQ,MAAM,QAAQ,OAAO,MAAM;AAAA,YACxC,MAAM,SAAS,MAAM,SAAS,OAAO,MAAM;AAAA,IACnD,YAAY,kBAAkB,uBAAuB;AAAA;AAAA,IAErD;AAEA,aAAS,IAAI,OAAO,QAAQ,IAAI,GAAG,KAAK;AACtC,YAAM,QAAQ,OAAO,IAAI,CAAC;AAC1B,YAAM,YAAY,MAAM,aAAa,WAAW;AAChD,UAAI,WAAW;AACb,eAAO;AAAA,aACF,SAAS;AAAA,eACP,IAAI,CAAC;AAAA;AAAA;AAAA,oBAGA,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA,IACF;AAEA,UAAM,QAAQ,KAAK,YAAY,cAAc,OAAO;AACpD,QAAI,OAAO;AACT,YAAM,cAAc;AAAA,IACtB;AAAA,EACF;AACF;AAEA,eAAe,OAAO,qBAAqB,gBAAgB;","names":[]}