'use strict';

var index = require('./index-Bkm7eeWO.js');

const eclIconEcCss = () => `.ecl-icon.sc-ecl-icon-ec{fill:currentcolor;margin:0;transition:transform .3s ease-in-out}.ecl-icon--2xs.sc-ecl-icon-ec{height:1rem;width:1rem}.ecl-icon--xs.sc-ecl-icon-ec{height:1.125rem;width:1.125rem}.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:var(--cm-on-surface-primary,var(--c-p))}.ecl-icon--inverted.sc-ecl-icon-ec{fill:#fff}.ecl-icon--rotate-0.sc-ecl-icon-ec{transform:rotate(0deg)}.ecl-icon--rotate-90.sc-ecl-icon-ec{transform:rotate(90deg)}.ecl-icon--rotate-90.sc-ecl-icon-ec:dir(rtl){transform:rotate(270deg)}.ecl-icon--rotate-180.sc-ecl-icon-ec{transform:rotate(180deg)}.ecl-icon--rotate-270.sc-ecl-icon-ec{transform:rotate(270deg)}.ecl-icon--rotate-270.sc-ecl-icon-ec:dir(rtl){transform:rotate(90deg)}.ecl-icon--flip-horizontal.sc-ecl-icon-ec{transform:scaleX(-1)}.ecl-icon--flip-vertical.sc-ecl-icon-ec{transform:scaleY(-1)}[style-class="ecl-breadcrumb__icon sc-ecl-breadcrumb-ec"].sc-ecl-icon-ec-h{display:contents}`;

const eclIconEuCss = () => `.ecl-icon.sc-ecl-icon-eu{fill:currentcolor;margin:0;transition:transform .3s ease-in-out}.ecl-icon--2xs.sc-ecl-icon-eu{height:.75rem;width:.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:var(--cm-on-surface-primary,var(--c-p))}.ecl-icon--inverted.sc-ecl-icon-eu{fill:#fff}.ecl-icon--rotate-0.sc-ecl-icon-eu{transform:rotate(0deg)}.ecl-icon--rotate-90.sc-ecl-icon-eu{transform:rotate(90deg)}.ecl-icon--rotate-90.sc-ecl-icon-eu:dir(rtl){transform:rotate(270deg)}.ecl-icon--rotate-180.sc-ecl-icon-eu{transform:rotate(180deg)}.ecl-icon--rotate-270.sc-ecl-icon-eu{transform:rotate(270deg)}.ecl-icon--rotate-270.sc-ecl-icon-eu:dir(rtl){transform:rotate(90deg)}.ecl-icon--flip-horizontal.sc-ecl-icon-eu{transform:scaleX(-1)}.ecl-icon--flip-vertical.sc-ecl-icon-eu{transform:scaleY(-1)}[style-class="ecl-breadcrumb__icon sc-ecl-breadcrumb-eu"].sc-ecl-icon-eu-h{display:contents}`;

const EclIcon = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.styleClass = '';
        this.icon = '';
        this.size = 'xs';
        this.family = '';
        this.titleTag = '';
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    getClass() {
        const baseClass = this.sprite
            ? 'ecl-icon'
            : `wt-icon${this.family ? `-${this.family}` : ''}--${this.icon}`;
        const pref = this.sprite ? 'ecl' : 'wt';
        const styleClasses = [
            baseClass,
            ...(this.sprite ? [] : ['ecl-icon']),
            `ecl-icon--${this.size}`,
            this.styleClass,
        ];
        if (this.color) {
            styleClasses.push(`${pref}-icon--${this.color}`);
        }
        if (this.flip) {
            styleClasses.push(`${pref}-icon--flip-${this.flip}`);
        }
        if (this.rotate) {
            styleClasses.push(`${pref}-icon--rotate-${this.rotate}`);
        }
        if (pref === 'wt') {
            styleClasses.push(`wt-icon--placeholder`);
        }
        return styleClasses.join(' ');
    }
    render() {
        return (Object.assign({}, this.sprite ? (index.h("svg", { class: this.getClass() }, this.titleTag ? index.h("title", null, this.titleTag) : '', index.h("use", { xlinkHref: `${this.sprite}#${this.icon}` }))) : (index.h("span", { class: this.getClass() }))));
    }
};
EclIcon.style = {
    ec: eclIconEcCss(),
    eu: eclIconEuCss()
};

/**
 * @param {HTMLElement} element DOM element for component instantiation and scope
 * @param {Object} options
 */
class Indicator {
  /**
   * @static
   * Shorthand for instance creation and initialisation.
   *
   * @param {HTMLElement} root DOM element for component instantiation and scope
   *
   * @return {Indicator} An instance of Indicator.
   */
  static autoInit(root, { INDICATOR: defaultOptions = {} } = {}) {
    const indicator = new Indicator(root, defaultOptions);
    indicator.init();
    root.ECLIndicator = indicator;
    return indicator;
  }

  constructor(element) {
    // Check element
    if (!element || element.nodeType !== Node.ELEMENT_NODE) {
      throw new TypeError(
        'DOM element should be given to initialize this widget.',
      );
    }

    this.element = element;

    // Options

    // Private variables
    this.value = 0;

    // Bind `this` for use in callbacks
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
    this.getValue = this.getValue.bind(this);
    this.setValue = this.setValue.bind(this);
    this.clearValue = this.clearValue.bind(this);
  }

  /**
   * Initialise component.
   */
  init() {
    if (!ECL) {
      throw new TypeError('Called init but ECL is not present');
    }
    ECL.components = ECL.components || new Map();

    // Get current value
    this.getValue();

    // Set ecl initialized attribute
    this.element.setAttribute('data-ecl-auto-initialized', 'true');
    ECL.components.set(this.element, this);
  }

  /**
   * Destroy component.
   */
  destroy() {
    this.element.removeAttribute('data-ecl-auto-initialized');
    ECL.components.delete(this.element);
  }

  /**
   * Get current value
   */
  getValue() {
    if (this.element.innerHTML.trim() === '') {
      this.value = '';
    } else {
      this.value = parseInt(this.element.innerHTML, 10);
    }
  }

  /**
   * Increment the indicator value.
   *
   * @param {int} modifier: value to be added
   */
  increment(modifier = 1) {
    if (this.value === '' || Number.isNaN(this.value)) return false;

    this.value += modifier;
    this.element.innerHTML = this.value;
    return true;
  }

  /**
   * Decrement the indicator value.
   *
   * @param {int} modifier: value to be substracted
   */
  decrement(modifier = 1) {
    if (this.value === '' || Number.isNaN(this.value)) return false;

    this.value -= modifier;
    this.element.innerHTML = this.value;
    return true;
  }

  /**
   * Set a specific value.
   *
   * @param {int} target: value to be used
   */
  setValue(target) {
    if (Number.isNaN(target)) return false;

    this.value = target;
    this.element.innerHTML = this.value;
    return true;
  }

  /**
   * Remove the indicator value.
   */
  clearValue() {
    this.value = '';
    this.element.innerHTML = this.value;
  }
}

const eclIndicatorEcCss = () => `.ecl-u-sr-only.sc-ecl-indicator-ec{border:0!important;clip-path:rect(0,0,0,0)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.ecl-indicator.sc-ecl-indicator-ec{align-items:center;background-color:var(--cm-surface-status-error,var(--c-er));border-radius:50%;color:#fff;content:"";display:flex;font:var(--f-xs);height:22px;justify-content:center;overflow:hidden;position:absolute;right:-18px;top:-16px;width:22px}.ecl-indicator.sc-ecl-indicator-ec:not(:has(.ecl-indicator__value)){height:12px;right:-8px;top:-10px;width:12px}.ecl-indicator__label.sc-ecl-indicator-ec{border:0!important;clip-path:rect(0,0,0,0)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`;

const eclIndicatorEuCss = () => `.ecl-u-sr-only.sc-ecl-indicator-eu{border:0!important;clip-path:rect(0,0,0,0)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.ecl-indicator.sc-ecl-indicator-eu{align-items:center;background-color:var(--cm-surface-status-error,var(--c-er));border-radius:50%;color:#fff;content:"";display:flex;font:var(--f-xs);height:22px;justify-content:center;overflow:hidden;position:absolute;right:-18px;top:-16px;width:22px}.ecl-indicator.sc-ecl-indicator-eu:not(:has(.ecl-indicator__value)){height:12px;right:-8px;top:-10px;width:12px}.ecl-indicator__label.sc-ecl-indicator-eu{border:0!important;clip-path:rect(0,0,0,0)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`;

const EclIndicator = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.value = '';
        this.noScript = false;
        this.srLabel = '';
        this.styleClass = '';
    }
    getClass() {
        const styleClasses = ['ecl-indicator', this.styleClass];
        return styleClasses.join(' ').trim();
    }
    componentDidRender() {
        if (!this.noScript) {
            window.ECL = window.ECL || {};
            ECL.Indicator = Indicator;
            const indicator = new Indicator(this.el.firstElementChild);
            indicator.init();
        }
    }
    render() {
        return (index.h("span", { key: '79473f3934e0282e54c85f563640f71969083258', class: this.getClass(), "data-ecl-indicator": true }, index.h("span", { key: '2fc97601ef02f3895c85292e8ac62550e1526bbd', class: "ecl-indicator__value" }, this.value), this.srLabel &&
            index.h("span", { key: 'e9f96e6fa81280713b67c25c0a272852d5d65f52', class: "ecl-indicator__label" }, this.srLabel)));
    }
    static get assetsDirs() { return ["build"]; }
    get el() { return index.getElement(this); }
};
EclIndicator.style = {
    ec: eclIndicatorEcCss(),
    eu: eclIndicatorEuCss()
};

exports.ecl_icon = EclIcon;
exports.ecl_indicator = EclIndicator;
