'use strict';

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

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

const progressBarCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex;width:100%}.progress-bar{height:16px;bottom:0;right:0;top:0;left:0;display:flex;height:16px;border-radius:1px;width:100%;overflow:hidden;background-color:#EEEDED;font-family:var(--ifx-font-family, sans-serif)}.progress-bar .label{height:17px;border-radius:1px 0px 0px 1px}.progress-bar.s{height:4px}.progress-bar .progress{height:100%;background-color:#0A8276;position:relative;transition:width 0.2s ease}.progress-bar .progress:after{content:\"\";background-color:#EEEDED;height:100%;position:absolute}.progress-bar .label{display:flex;align-items:center;justify-content:center;position:absolute;font-style:normal;font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#FFFFFF;top:0;bottom:0;left:0;right:0}";

const ProgressBar = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.value = 0;
    this.label = '';
    this.size = undefined;
    this.showLabel = false;
    this.internalValue = undefined;
  }
  valueChanged(newValue, oldValue) {
    if (newValue !== oldValue) {
      this.internalValue = newValue;
    }
  }
  componentWillLoad() {
    this.internalValue = this.value;
  }
  render() {
    return (index.h("div", { "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, index.h("div", { class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && index.h("span", { class: "label" }, `${this.internalValue}%`))));
  }
  static get watchers() { return {
    "value": ["valueChanged"]
  }; }
};
ProgressBar.style = progressBarCss;

exports.ifx_progress_bar = ProgressBar;

//# sourceMappingURL=ifx-progress-bar.cjs.entry.js.map