'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-6377956f.js');

const eclIconEcCss = ".ecl-icon.sc-ecl-icon-ec{fill:currentcolor;margin:0;transition:transform 300ms ease-in-out}.ecl-icon--2xs.sc-ecl-icon-ec{height:0.75rem;width:0.75rem}.ecl-icon--xs.sc-ecl-icon-ec{height:1rem;width:1rem}.ecl-icon--s.sc-ecl-icon-ec{height:1.25rem;width:1.25rem}.ecl-icon--m.sc-ecl-icon-ec{height:1.5rem;width:1.5rem}.ecl-icon--l.sc-ecl-icon-ec{height:2rem;width:2rem}.ecl-icon--xl.sc-ecl-icon-ec{height:2.5rem;width:2.5rem}.ecl-icon--2xl.sc-ecl-icon-ec{height:3rem;width:3rem}.ecl-icon--fluid.sc-ecl-icon-ec{height:1em;width:1em}.ecl-icon--primary.sc-ecl-icon-ec{fill:#004494}.ecl-icon--inverted.sc-ecl-icon-ec{fill:#fff}.ecl-icon--rotate-90.sc-ecl-icon-ec{transform:rotateZ(90deg)}.ecl-icon--rotate-180.sc-ecl-icon-ec{transform:rotateZ(180deg)}.ecl-icon--rotate-270.sc-ecl-icon-ec{transform:rotateZ(270deg)}.ecl-icon--flip-horizontal.sc-ecl-icon-ec{transform:scaleX(-1)}.ecl-icon--flip-vertical.sc-ecl-icon-ec{transform:scaleY(-1)}";

const eclIconEuCss = ".ecl-icon.sc-ecl-icon-eu{fill:currentcolor;margin:0;transition:transform 300ms ease-in-out}.ecl-icon--2xs.sc-ecl-icon-eu{height:0.75rem;width:0.75rem}.ecl-icon--xs.sc-ecl-icon-eu{height:1rem;width:1rem}.ecl-icon--s.sc-ecl-icon-eu{height:1.25rem;width:1.25rem}.ecl-icon--m.sc-ecl-icon-eu{height:1.5rem;width:1.5rem}.ecl-icon--l.sc-ecl-icon-eu{height:2rem;width:2rem}.ecl-icon--xl.sc-ecl-icon-eu{height:2.5rem;width:2.5rem}.ecl-icon--2xl.sc-ecl-icon-eu{height:3rem;width:3rem}.ecl-icon--fluid.sc-ecl-icon-eu{height:1em;width:1em}.ecl-icon--primary.sc-ecl-icon-eu{fill:#0e47cb}.ecl-icon--inverted.sc-ecl-icon-eu{fill:#fff}.ecl-icon--rotate-90.sc-ecl-icon-eu{transform:rotateZ(90deg)}.ecl-icon--rotate-180.sc-ecl-icon-eu{transform:rotateZ(180deg)}.ecl-icon--rotate-270.sc-ecl-icon-eu{transform:rotateZ(270deg)}.ecl-icon--flip-horizontal.sc-ecl-icon-eu{transform:scaleX(-1)}.ecl-icon--flip-vertical.sc-ecl-icon-eu{transform:scaleY(-1)}";

const EclIcon = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.styleClass = '';
    this.icon = '';
    this.size = 'xs';
    this.color = '';
    this.path = undefined;
    this.transform = '';
    this.theme = 'ec';
    this.sprite = '';
  }
  componentWillLoad() {
    if (!this.sprite) {
      this.path = index.getAssetPath(`./build/images/${this.theme}/icons.svg`);
    }
    else {
      this.path = index.getAssetPath(`./build/images/${this.theme}/${this.sprite}.svg`);
    }
  }
  getClass() {
    const styleClasses = [
      `ecl-icon`,
      `ecl-icon--${this.size}`,
      this.styleClass,
    ];
    if (this.color) {
      styleClasses.push(`ecl-icon--${this.color}`);
    }
    if (this.transform) {
      styleClasses.push(`ecl-icon--${this.transform}`);
    }
    return styleClasses.join(' ');
  }
  render() {
    return (index.h("svg", { class: this.getClass() }, index.h("use", { xlinkHref: `${this.path}#${this.icon}` })));
  }
  static get assetsDirs() { return ["build"]; }
};
EclIcon.style = {
  ec: eclIconEcCss,
  eu: eclIconEuCss
};

exports.ecl_icon = EclIcon;

//# sourceMappingURL=ecl-icon.cjs.entry.js.map