import './es.number.constructor-e21aea90.js';
import './es.array.includes-4e9a9edc.js';
import './regexp-exec-abstract-944a9b6c.js';
import './es.string.replace-1135723d.js';
import BaseIcon from './BaseIcon-7b5c99e9.js';
import { n as normalizeComponent } from './normalize-component-43ce05b9.js';

/**
 * Progress bar including file upload features (display filename or file size)
 * and remove functionality
 */

var script = {
  name: 'BaseProgressBar',
  components: {
    BaseIcon: BaseIcon
  },
  props: {
    /**
     * filename that will be displayed in the bar
     */
    fileName: {
      type: String,
      default: ''
    },

    /**
     * filesize that will be displayed in the bar
     */
    fileSize: {
      type: String,
      default: ''
    },

    /**
     * progress of the upload (percentage)
     * @values 0-100
     */
    progress: {
      type: [Number, String],
      default: 0,
      validator: function validator(val) {
        return val >= 0 && val <= 100;
      }
    },

    /**
     * indicate the success or fail of an upload <br>
     *   @values success, fail, ''
     */
    status: {
      type: String,
      default: '',
      validator: function validator(val) {
        return ['success', 'fail', ''].includes(val);
      }
    },

    /**
     * show an remove icon
     */
    showRemove: {
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    return {
      fadeOutDarkWidth: 30,
      showFadeOut: true,
      showDarkFadeOut: false
    };
  },
  watch: {
    progress: function progress(val) {
      // check if all of this is even necessary --> fade out is displayed
      if (this.showFadeOut) {
        // get the fade out with (currently set with 30px but be flexible)
        var fadeOutWidth = this.$refs.progressBarFadeOut.clientWidth; // get the width of the progress bar

        var progressInPixels = Math.ceil(this.$refs.progressBar.clientWidth / 100 * val); // get content padding

        var progressContent = this.$refs.progressBarContent;
        var contentStyle = window.getComputedStyle(progressContent);
        var contentPadding = Number(contentStyle.getPropertyValue('padding-left').replace('px', '')); // get the position of the fade out element

        var fadeOutPosition = this.$refs.progressBarFadeOut.offsetLeft + contentPadding; // check if the progress is bigger than fade out position

        if (progressInPixels >= fadeOutPosition) {
          this.showDarkFadeOut = true; // if yes calculate how much is the overlap

          var fadeOutOverlap = progressInPixels - fadeOutPosition; // if the overlap is bigger than the actual fade-out element size
          // - assume the actual width of fade out element - else set calculated size

          this.fadeOutDarkWidth = fadeOutOverlap > fadeOutWidth ? 0 : fadeOutWidth - fadeOutOverlap;
        } else {
          this.fadeOutDarkWidth = fadeOutWidth;
          this.showDarkFadeOut = false;
        }
      }
    }
  },
  mounted: function mounted() {
    if (this.$refs && this.$refs.progressBarFileName) {
      this.showFadeOut = this.$refs.progressBarFileName.scrollWidth > this.$refs.progressBarFileName.clientWidth;
    }
  },
  methods: {
    remove: function remove() {
      /**
       * event triggered on remove icon click
       *
       * @event remove-item
       */
      this.$emit('remove-item');
    }
  }
};

/* script */
var __vue_script__ = script;
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    ref: "progressBar",
    staticClass: "base-progress-bar",
    attrs: {
      "aria-valuenow": _vm.progress,
      "role": "progressbar",
      "aria-valuemin": "0",
      "aria-valuemax": "100"
    }
  }, [_c('div', {
    ref: "progressBarProgress",
    staticClass: "base-progress-bar__progress",
    style: {
      width: _vm.progress + "%"
    }
  }), _vm._v(" "), _c('div', {
    ref: "progressBarContent",
    staticClass: "base-progress-bar__content"
  }, [_c('div', {
    ref: "progressBarFileName",
    staticClass: "base-progress-bar__file-name"
  }, [_vm._v("\n      " + _vm._s(_vm.fileName) + "\n      "), _vm.showFadeOut ? _c('div', {
    ref: "progressBarFadeOut",
    class: ['base-progress-bar__fade-out', {
      'base-progress-bar__fade-out-hide': _vm.fadeOutDarkWidth === 0
    }]
  }) : _vm._e(), _vm._v(" "), _vm.showFadeOut ? _c('div', {
    class: ['base-progress-bar__fade-out-dark-window', {
      'base-progress-bar__fade-out-dark-window-show': _vm.showDarkFadeOut
    }]
  }, [_c('div', {
    staticClass: "base-progress-bar__fade-out-dark-cover",
    style: {
      transform: "translateX(-" + _vm.fadeOutDarkWidth + "px)"
    }
  }, [_c('div', {
    staticClass: "base-progress-bar__fade-out-dark",
    style: {
      transform: "translateX(" + _vm.fadeOutDarkWidth + "px)"
    }
  })])]) : _vm._e()]), _vm._v(" "), _vm.fileSize ? _c('span', {
    staticClass: "base-progress-bar__file-size"
  }, [_vm._v("\n      " + _vm._s(_vm.fileSize) + "\n    ")]) : _vm._e(), _vm._v(" "), _vm.status === 'success' ? _c('base-icon', {
    staticClass: "base-progress-bar__status-icon base-progress-bar__status-icon-success",
    attrs: {
      "name": "success"
    }
  }) : _vm._e(), _vm._v(" "), _vm.status === 'fail' ? _c('base-icon', {
    staticClass: "base-progress-bar__status-icon base-progress-bar__status-icon-fail",
    attrs: {
      "name": "attention"
    }
  }) : _vm._e(), _vm._v(" "), _vm.showRemove ? _c('base-icon', {
    staticClass: "base-progress-bar__status-icon base-progress-bar__status-icon-remove",
    attrs: {
      "name": "remove"
    },
    on: {
      "click": _vm.remove
    }
  }) : _vm._e()], 1)]);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-1e13e573";
/* module identifier */

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);

var BaseProgressBar = __vue_component__;

export { BaseProgressBar as B };
