import { r as registerInstance, h, c as getElement } from './index-0a3acb15.js';

const eclListIllustrationEcCss = ".ecl-list-illustration.sc-ecl-list-illustration-ec{margin:0}.ecl-list-illustration__item.sc-ecl-list-illustration-ec{display:flex;flex-direction:column;margin-bottom:2rem}.ecl-list-illustration__item.sc-ecl-list-illustration-ec:last-child{margin-bottom:0}.ecl-list-illustration__image.sc-ecl-list-illustration-ec{background-position:0 0;background-repeat:no-repeat;background-size:contain;display:block;flex-shrink:0;height:auto;margin-bottom:1rem}.ecl-list-illustration__image.sc-ecl-list-illustration-ec::before{content:\"\";display:block;padding-top:66.6666666667%;width:100%}.ecl-list-illustration__image--square.sc-ecl-list-illustration-ec{background-position:center;background-size:cover;height:100px;width:100px}.ecl-list-illustration__image--square.sc-ecl-list-illustration-ec::before{padding-top:100%}.ecl-list-illustration__title-container.sc-ecl-list-illustration-ec{color:#404040;display:flex;flex-direction:row;font:normal normal 400 1.25rem/1.75rem arial, sans-serif}.ecl-list-illustration__description.sc-ecl-list-illustration-ec{color:#404040;font:normal normal 400 1rem/1.5rem arial, sans-serif;margin-top:0.5rem;max-width:80ch}.ecl-list-illustration__icon.sc-ecl-list-illustration-ec{flex-shrink:0;-webkit-margin-end:1rem;margin-inline-end:1rem}.ecl-list-illustration__icon.sc-ecl-list-illustration-ec+.ecl-list-illustration__title.sc-ecl-list-illustration-ec{margin-top:0.5rem}.ecl-list-illustration--zebra.sc-ecl-list-illustration-ec .ecl-list-illustration__item.sc-ecl-list-illustration-ec{margin-bottom:0;padding:1rem}.ecl-list-illustration--zebra.sc-ecl-list-illustration-ec .ecl-list-illustration__item.sc-ecl-list-illustration-ec:nth-child(even){background-color:#f5f5f5}@media (min-width: 768px){.ecl-list-illustration__item.sc-ecl-list-illustration-ec{flex-direction:row;margin-bottom:0;padding:1rem}.ecl-list-illustration__title-container.sc-ecl-list-illustration-ec{margin-top:0}.ecl-list-illustration__image.sc-ecl-list-illustration-ec{margin-bottom:0;-webkit-margin-end:1rem;margin-inline-end:1rem}.ecl-list-illustration__image.sc-ecl-list-illustration-ec:not(.ecl-list-illustration__image--square){width:15.875rem}.ecl-list-illustration--col-2.sc-ecl-list-illustration-ec,.ecl-list-illustration--col-3.sc-ecl-list-illustration-ec,.ecl-list-illustration--col-4.sc-ecl-list-illustration-ec{display:grid;grid-auto-rows:auto;grid-column-gap:2rem;grid-row-gap:2rem;width:100%}.ecl-list-illustration--col-2.sc-ecl-list-illustration-ec .ecl-list-illustration__item.sc-ecl-list-illustration-ec,.ecl-list-illustration--col-3.sc-ecl-list-illustration-ec .ecl-list-illustration__item.sc-ecl-list-illustration-ec,.ecl-list-illustration--col-4.sc-ecl-list-illustration-ec .ecl-list-illustration__item.sc-ecl-list-illustration-ec{flex-direction:column;padding:0}.ecl-list-illustration--col-2.sc-ecl-list-illustration-ec .ecl-list-illustration__image.sc-ecl-list-illustration-ec,.ecl-list-illustration--col-3.sc-ecl-list-illustration-ec .ecl-list-illustration__image.sc-ecl-list-illustration-ec,.ecl-list-illustration--col-4.sc-ecl-list-illustration-ec .ecl-list-illustration__image.sc-ecl-list-illustration-ec{-webkit-margin-end:0;margin-inline-end:0;margin-bottom:1rem}.ecl-list-illustration--col-2.sc-ecl-list-illustration-ec .ecl-list-illustration__image.sc-ecl-list-illustration-ec:not(.ecl-list-illustration__image--square),.ecl-list-illustration--col-3.sc-ecl-list-illustration-ec .ecl-list-illustration__image.sc-ecl-list-illustration-ec:not(.ecl-list-illustration__image--square),.ecl-list-illustration--col-4.sc-ecl-list-illustration-ec .ecl-list-illustration__image.sc-ecl-list-illustration-ec:not(.ecl-list-illustration__image--square){width:100%}.ecl-list-illustration--col-2.sc-ecl-list-illustration-ec{grid-template-columns:repeat(2, 1fr)}.ecl-list-illustration--col-3.sc-ecl-list-illustration-ec{grid-template-columns:repeat(3, 1fr)}.ecl-list-illustration--col-4.sc-ecl-list-illustration-ec{grid-template-columns:repeat(4, 1fr)}}";

const eclListIllustrationEuCss = ".ecl-list-illustration.sc-ecl-list-illustration-eu{margin:0}.ecl-list-illustration__item.sc-ecl-list-illustration-eu{display:flex;flex-direction:column;margin-bottom:2rem}.ecl-list-illustration__item.sc-ecl-list-illustration-eu:last-child{margin-bottom:0}.ecl-list-illustration__image.sc-ecl-list-illustration-eu{background-position:0 0;background-repeat:no-repeat;background-size:contain;display:block;flex-shrink:0;height:auto;margin-bottom:1rem}.ecl-list-illustration__image.sc-ecl-list-illustration-eu::before{content:\"\";display:block;padding-top:66.6666666667%;width:100%}.ecl-list-illustration__image--square.sc-ecl-list-illustration-eu{background-position:center;background-size:cover;height:100px;width:100px}.ecl-list-illustration__image--square.sc-ecl-list-illustration-eu::before{padding-top:100%}.ecl-list-illustration__title-container.sc-ecl-list-illustration-eu{color:#171a22;display:flex;flex-direction:row;font:normal normal 400 1.25rem/1.75rem arial, sans-serif}.ecl-list-illustration__description.sc-ecl-list-illustration-eu{color:#515560;font:normal normal 400 1rem/1.5rem arial, sans-serif;margin-top:0.5rem;max-width:80ch}.ecl-list-illustration__icon.sc-ecl-list-illustration-eu{flex-shrink:0;-webkit-margin-end:1rem;margin-inline-end:1rem}.ecl-list-illustration__icon.sc-ecl-list-illustration-eu+.ecl-list-illustration__title.sc-ecl-list-illustration-eu{margin-top:0.5rem}.ecl-list-illustration--zebra.sc-ecl-list-illustration-eu .ecl-list-illustration__item.sc-ecl-list-illustration-eu{margin-bottom:0;padding:1rem}.ecl-list-illustration--zebra.sc-ecl-list-illustration-eu .ecl-list-illustration__item.sc-ecl-list-illustration-eu:nth-child(even){background-color:#f3f6fc}@media (min-width: 768px){.ecl-list-illustration__item.sc-ecl-list-illustration-eu{flex-direction:row;margin-bottom:0;padding:1rem}.ecl-list-illustration__title-container.sc-ecl-list-illustration-eu{margin-top:0}.ecl-list-illustration__image.sc-ecl-list-illustration-eu{margin-bottom:0;-webkit-margin-end:1rem;margin-inline-end:1rem}.ecl-list-illustration__image.sc-ecl-list-illustration-eu:not(.ecl-list-illustration__image--square){width:15.875rem}.ecl-list-illustration--col-2.sc-ecl-list-illustration-eu,.ecl-list-illustration--col-3.sc-ecl-list-illustration-eu,.ecl-list-illustration--col-4.sc-ecl-list-illustration-eu{display:grid;grid-auto-rows:auto;grid-column-gap:2rem;grid-row-gap:2rem;width:100%}.ecl-list-illustration--col-2.sc-ecl-list-illustration-eu .ecl-list-illustration__item.sc-ecl-list-illustration-eu,.ecl-list-illustration--col-3.sc-ecl-list-illustration-eu .ecl-list-illustration__item.sc-ecl-list-illustration-eu,.ecl-list-illustration--col-4.sc-ecl-list-illustration-eu .ecl-list-illustration__item.sc-ecl-list-illustration-eu{flex-direction:column;padding:0}.ecl-list-illustration--col-2.sc-ecl-list-illustration-eu .ecl-list-illustration__image.sc-ecl-list-illustration-eu,.ecl-list-illustration--col-3.sc-ecl-list-illustration-eu .ecl-list-illustration__image.sc-ecl-list-illustration-eu,.ecl-list-illustration--col-4.sc-ecl-list-illustration-eu .ecl-list-illustration__image.sc-ecl-list-illustration-eu{-webkit-margin-end:0;margin-inline-end:0;margin-bottom:1rem}.ecl-list-illustration--col-2.sc-ecl-list-illustration-eu .ecl-list-illustration__image.sc-ecl-list-illustration-eu:not(.ecl-list-illustration__image--square),.ecl-list-illustration--col-3.sc-ecl-list-illustration-eu .ecl-list-illustration__image.sc-ecl-list-illustration-eu:not(.ecl-list-illustration__image--square),.ecl-list-illustration--col-4.sc-ecl-list-illustration-eu .ecl-list-illustration__image.sc-ecl-list-illustration-eu:not(.ecl-list-illustration__image--square){width:100%}.ecl-list-illustration--col-2.sc-ecl-list-illustration-eu{grid-template-columns:repeat(2, 1fr)}.ecl-list-illustration--col-3.sc-ecl-list-illustration-eu{grid-template-columns:repeat(3, 1fr)}.ecl-list-illustration--col-4.sc-ecl-list-illustration-eu{grid-template-columns:repeat(4, 1fr)}}";

const EclListIllustration = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.theme = 'ec';
    this.variant = 'image';
    this.zebra = false;
    this.column = 1;
    this.styleClass = undefined;
  }
  getClass() {
    const styleClasses = [
      `ecl-list-illustration`,
      `ecl-list-illustration--col-${this.column}`,
      this.styleClass
    ];
    if (this.zebra) {
      styleClasses.push('ecl-list-illustration--zebra');
    }
    return styleClasses.join(' ');
  }
  componentDidRender() {
    // Clean the html to make the zebra work,.
    const items = this.el.querySelectorAll('.ecl-list-illustration__item');
    if (items) {
      this.el.querySelector('.ecl-list-illustration').innerHTML = '';
      this.el.querySelector('.ecl-list-illustration').append(...items);
    }
  }
  render() {
    return (h("div", { class: this.getClass() }, h("slot", null)));
  }
  get el() { return getElement(this); }
};
EclListIllustration.style = {
  ec: eclListIllustrationEcCss,
  eu: eclListIllustrationEuCss
};

export { EclListIllustration as ecl_list_illustration };

//# sourceMappingURL=ecl-list-illustration.entry.js.map