import { r as registerInstance, e as createEvent, h, f as getElement, H as Host } from './index-e0adbd54.js';
import { i as index_min } from './index.min-3591c16e.js';
import { p as popoverController } from './overlays-b83a89c7.js';
import { c as config, g as getIonMode } from './ionic-global-3272af31.js';
import { b as clamp } from './helpers-06537f39.js';
import { c as createColorClasses } from './theme-7ef00c83.js';
import './_commonjsHelpers-44457d8d.js';

const Checklist = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ionChange = createEvent(this, "ionChange", 7);
    this.options = [];
    this.name = undefined;
    this.value = [];
    this.disabled = false;
  }
  render() {
    return (h("ion-list", null, (this.options || []).map((option) => (h("ion-item", null, h("ion-checkbox", { onIonChange: (event) => {
        var _a, _b;
        event.stopImmediatePropagation();
        if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.checked) &&
          !(this.value || []).includes(option === null || option === void 0 ? void 0 : option.value))
          this.value = [...this.value, option === null || option === void 0 ? void 0 : option.value];
        if (!((_b = event === null || event === void 0 ? void 0 : event.detail) === null || _b === void 0 ? void 0 : _b.checked) &&
          (this.value || []).includes(option === null || option === void 0 ? void 0 : option.value))
          this.value = this.value.filter((value) => (option === null || option === void 0 ? void 0 : option.value) !== value);
        this.ionChange.emit({
          value: this.value,
        });
      }, disabled: this.disabled, value: option === null || option === void 0 ? void 0 : option.value, checked: option === null || option === void 0 ? void 0 : option.checked, name: this.name, slot: "start" }), h("ion-label", null, (option === null || option === void 0 ? void 0 : option.label) || (option === null || option === void 0 ? void 0 : option.value) || ""))))));
  }
};

const flowCss = "fireenjin-flow .flow-controls{display:flex;justify-content:space-between}";

const Flow = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.currentIndex = 0;
    this.name = undefined;
    this.formData = {};
    this.nextButton = {
      label: "Next",
      color: "primary",
      fill: "clear",
      icon: "chevron-forward-circle-outline",
    };
    this.prevButton = {
      label: "Back",
      color: "medium",
      fill: "clear",
      icon: "chevron-back-circle-outline",
    };
    this.saveButton = {
      label: "Save",
      fill: "solid",
      color: "primary",
    };
    this.hideControls = false;
    this.endpoint = undefined;
    this.documentId = undefined;
    this.excludeData = [];
    this.beforeSubmit = undefined;
    this.disableLoader = false;
    this.loading = false;
    this.disableEnterButton = false;
    this.confirmExit = false;
    this.hasChanged = false;
    this.method = "post";
    this.action = undefined;
    this.fetch = undefined;
    this.fetchParams = undefined;
    this.fetchDataMap = undefined;
    this.fetchKey = undefined;
    this.filterData = undefined;
    this.slidesOptions = { autoHeight: true, allowTouchMove: false };
    this.pager = false;
    this.scrollbar = false;
    this.steps = [];
    this.googleMapsKey = undefined;
    this.stripeKey = undefined;
    this.stripeElements = undefined;
    this.disableRequiredCheck = false;
    this.cacheKey = undefined;
    this.showSuccess = false;
    this.showSave = false;
  }
  async onKeydown(event) {
    if ((event === null || event === void 0 ? void 0 : event.key) !== "Enter" || this.disableEnterButton)
      return;
    this.slideNext();
  }
  async onSlideChange() {
    this.currentIndex = await this.getActiveIndex();
    this.currentStep = this.steps[this.currentIndex];
    if (this.currentIndex === this.steps.length - 1) {
      this.hideControls = true;
      this.showSave = true;
    }
    else {
      this.hideControls = false;
      this.showSave = false;
    }
    if (this.currentIndex === 0 && this.prevButton) {
      this.prevButton = Object.assign(Object.assign({}, this.prevButton), { disabled: true });
    }
    else {
      this.prevButton = Object.assign(Object.assign({}, this.prevButton), { disabled: false });
    }
  }
  onSubmit(event) {
    var _a;
    if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) !== this.endpoint)
      return;
    this.showSuccess = false;
  }
  onSuccess(event) {
    var _a;
    if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) !== this.endpoint)
      return;
    this.showSuccess = true;
  }
  async getActiveIndex() {
    return this.slidesEl.getActiveIndex();
  }
  async getSwiper() {
    return this.slidesEl.getSwiper();
  }
  async isBeginning() {
    return this.slidesEl.isBeginning();
  }
  async isEnd() {
    return this.slidesEl.isEnd();
  }
  async length() {
    return this.slidesEl.length();
  }
  async lockSwipeToNext(lock) {
    return this.slidesEl.lockSwipeToNext(lock);
  }
  async lockSwipeToPrev(lock) {
    return this.slidesEl.lockSwipeToPrev(lock);
  }
  async lockSwipes(lock) {
    return this.slidesEl.lockSwipes(lock);
  }
  async slideNext(speed, runCallbacks) {
    console.log(await this.checkStepValidity());
    if (!this.disableRequiredCheck && !(await this.checkStepValidity()))
      return;
    return this.slidesEl.slideNext(speed, runCallbacks);
  }
  async slidePrev(speed, runCallbacks) {
    if (this.hideControls)
      this.hideControls = false;
    return this.slidesEl.slidePrev(speed, runCallbacks);
  }
  async slideTo(index, speed, runCallbacks) {
    return this.slidesEl.slideTo(index, speed, runCallbacks);
  }
  async startAutoplay() {
    return this.slidesEl.startAutoplay();
  }
  async stopAutoplay() {
    return this.slidesEl.stopAutoplay();
  }
  async update() {
    return this.slidesEl.update();
  }
  async updateAutoHeight(speed) {
    return this.slidesEl.updateAutoHeight(speed);
  }
  async reportFormValidity() {
    this.formEl.reportFormValidity();
  }
  async setFormData(data) {
    this.formEl.setFormData(data);
  }
  async checkFormValidity(reportValidity) {
    this.formEl.checkFormValidity(reportValidity);
  }
  async reset(event) {
    this.formEl.reset(event);
    if (this.prevButton)
      this.prevButton.disabled = true;
  }
  async submit(event, options) {
    this.formEl.submit(event, options);
  }
  async checkStepValidity() {
    let response = true;
    await new Promise((resolve, reject) => {
      try {
        const requiredEls = this.flowEl.querySelectorAll(`ion-slide:nth-of-type(${this.currentIndex + 1}) [required]`);
        if (!requiredEls.length)
          resolve(true);
        (requiredEls || []).forEach((el, index) => {
          var _a;
          if ((typeof (el === null || el === void 0 ? void 0 : el.reportValidity) === "function" &&
            !(el === null || el === void 0 ? void 0 : el.reportValidity())) ||
            (typeof (el === null || el === void 0 ? void 0 : el.checkValidity) === "function" && !(el === null || el === void 0 ? void 0 : el.checkValidity())) ||
            el.value === null ||
            el.value === undefined ||
            (typeof el.value === "string" && ((_a = el.value) === null || _a === void 0 ? void 0 : _a.length) <= 0))
            response = false;
          if (index === requiredEls.length - 1)
            resolve(response);
        });
      }
      catch (e) {
        console.log(e);
        reject();
      }
    });
    return response;
  }
  componentWillLoad() {
    if (this.prevButton)
      this.prevButton.disabled = true;
  }
  renderField(field) {
    if ((field === null || field === void 0 ? void 0 : field.type) === "file") {
      return (h("fireenjin-input-file", { path: field === null || field === void 0 ? void 0 : field.path, icon: field === null || field === void 0 ? void 0 : field.icon, label: field === null || field === void 0 ? void 0 : field.label, fileName: field === null || field === void 0 ? void 0 : field.fileName, name: field === null || field === void 0 ? void 0 : field.name, accept: field === null || field === void 0 ? void 0 : field.accept, defaultValue: field === null || field === void 0 ? void 0 : field.defaultValue, value: field === null || field === void 0 ? void 0 : field.value, documentId: field === null || field === void 0 ? void 0 : field.documentId, endpoint: field === null || field === void 0 ? void 0 : field.endpoint, uploadData: field === null || field === void 0 ? void 0 : field.uploadData, disabled: !!(field === null || field === void 0 ? void 0 : field.disabled), innerHTML: field.innerHTML }));
    }
    else if ((field === null || field === void 0 ? void 0 : field.type) === "photo") {
      return (h("fireenjin-input-photo", { path: field === null || field === void 0 ? void 0 : field.path, fileName: field === null || field === void 0 ? void 0 : field.fileName, name: field === null || field === void 0 ? void 0 : field.name, value: field === null || field === void 0 ? void 0 : field.value, documentId: field === null || field === void 0 ? void 0 : field.documentId, endpoint: field === null || field === void 0 ? void 0 : field.endpoint, disabled: !!(field === null || field === void 0 ? void 0 : field.disabled), fallback: field === null || field === void 0 ? void 0 : field.fallback, showButton: !!(field === null || field === void 0 ? void 0 : field.showButton), buttonText: field === null || field === void 0 ? void 0 : field.buttonText, initials: field === null || field === void 0 ? void 0 : field.initials, multiple: !!(field === null || field === void 0 ? void 0 : field.multiple), resize: !!(field === null || field === void 0 ? void 0 : field.resize), loading: !!(field === null || field === void 0 ? void 0 : field.loading), innerHTML: field.innerHTML }));
    }
    else if ((field === null || field === void 0 ? void 0 : field.type) === "address") {
      return (h("fireenjin-input-address", { googleMapsKey: (field === null || field === void 0 ? void 0 : field.googleMapsKey) || this.googleMapsKey, placeholder: field === null || field === void 0 ? void 0 : field.placeholder, value: field === null || field === void 0 ? void 0 : field.value, label: field === null || field === void 0 ? void 0 : field.label, required: !!(field === null || field === void 0 ? void 0 : field.required), name: field === null || field === void 0 ? void 0 : field.name, lines: field === null || field === void 0 ? void 0 : field.lines, labelPosition: field === null || field === void 0 ? void 0 : field.labelPosition, innerHTML: field.innerHTML }));
    }
    else if ((field === null || field === void 0 ? void 0 : field.type) === "select") {
      return (h("fireenjin-select", { disabled: !!(field === null || field === void 0 ? void 0 : field.disabled), cancelText: field === null || field === void 0 ? void 0 : field.cancelText, okText: field === null || field === void 0 ? void 0 : field.okText, placeholder: field === null || field === void 0 ? void 0 : field.placeholder, name: field === null || field === void 0 ? void 0 : field.name, selectedText: field === null || field === void 0 ? void 0 : field.selectedText, multiple: !!(field === null || field === void 0 ? void 0 : field.multiple), interface: field === null || field === void 0 ? void 0 : field.interface, interfaceOptions: field === null || field === void 0 ? void 0 : field.interfaceOptions, compareWith: field === null || field === void 0 ? void 0 : field.compareWith, value: field === null || field === void 0 ? void 0 : field.value, endpoint: field === null || field === void 0 ? void 0 : field.endpoint, header: field === null || field === void 0 ? void 0 : field.header, subHeader: field === null || field === void 0 ? void 0 : field.subHeader, message: field === null || field === void 0 ? void 0 : field.message, orderBy: field === null || field === void 0 ? void 0 : field.orderBy, dataPropsMap: field === null || field === void 0 ? void 0 : field.dataPropsMap, optionEl: field === null || field === void 0 ? void 0 : field.optionEl, limit: field === null || field === void 0 ? void 0 : field.limit, params: field === null || field === void 0 ? void 0 : field.params, query: field === null || field === void 0 ? void 0 : field.query, label: field === null || field === void 0 ? void 0 : field.label, options: field === null || field === void 0 ? void 0 : field.options, required: !!(field === null || field === void 0 ? void 0 : field.required), resultsKey: field === null || field === void 0 ? void 0 : field.resultsKey, labelPosition: field === null || field === void 0 ? void 0 : field.labelPosition, lines: field === null || field === void 0 ? void 0 : field.lines, innerHTML: field.innerHTML }));
    }
    else if ((field === null || field === void 0 ? void 0 : field.type) === "radios") {
      return (h("fireenjin-radios", { disabled: !!(field === null || field === void 0 ? void 0 : field.disabled), name: field === null || field === void 0 ? void 0 : field.name, value: field === null || field === void 0 ? void 0 : field.value, endpoint: field === null || field === void 0 ? void 0 : field.endpoint, orderBy: field === null || field === void 0 ? void 0 : field.orderBy, dataPropsMap: field === null || field === void 0 ? void 0 : field.dataPropsMap, optionEl: field === null || field === void 0 ? void 0 : field.optionEl, limit: field === null || field === void 0 ? void 0 : field.limit, params: field === null || field === void 0 ? void 0 : field.params, query: field === null || field === void 0 ? void 0 : field.query, label: field === null || field === void 0 ? void 0 : field.label, options: field === null || field === void 0 ? void 0 : field.options, required: !!(field === null || field === void 0 ? void 0 : field.required), resultsKey: field === null || field === void 0 ? void 0 : field.resultsKey, labelPosition: field === null || field === void 0 ? void 0 : field.labelPosition, lines: field === null || field === void 0 ? void 0 : field.lines, innerHTML: field.innerHTML }));
    }
    else if ((field === null || field === void 0 ? void 0 : field.type) === "search") {
      return (h("fireenjin-input-search", { name: field === null || field === void 0 ? void 0 : field.name, label: field === null || field === void 0 ? void 0 : field.label, placeholder: field === null || field === void 0 ? void 0 : field.placeholder, value: field === null || field === void 0 ? void 0 : field.value, required: !!(field === null || field === void 0 ? void 0 : field.required), autofocus: !!(field === null || field === void 0 ? void 0 : field.autofocus), disabled: !!(field === null || field === void 0 ? void 0 : field.disabled), endpoint: field === null || field === void 0 ? void 0 : field.endpoint, dataPropsMap: field === null || field === void 0 ? void 0 : field.dataPropsMap, template: field === null || field === void 0 ? void 0 : field.template, searchParams: field === null || field === void 0 ? void 0 : field.searchParams, iconEnd: field === null || field === void 0 ? void 0 : field.iconRight, iconStart: field === null || field === void 0 ? void 0 : field.iconLeft, results: field === null || field === void 0 ? void 0 : field.results, resultsKey: field === null || field === void 0 ? void 0 : field.resultsKey, lines: field === null || field === void 0 ? void 0 : field.lines, labelPosition: field === null || field === void 0 ? void 0 : field.labelPosition, innerHTML: field.innerHTML }));
    }
    else if ((field === null || field === void 0 ? void 0 : field.type) === "checklist") {
      return (h("fireenjin-checklist", { name: field === null || field === void 0 ? void 0 : field.name, value: field === null || field === void 0 ? void 0 : field.value, options: (field === null || field === void 0 ? void 0 : field.options) || [], disabled: field === null || field === void 0 ? void 0 : field.disabled, innerHTML: field.innerHTML }));
    }
    else {
      return (h("fireenjin-input", { type: (field === null || field === void 0 ? void 0 : field.type) || "text", stripeKey: (field === null || field === void 0 ? void 0 : field.stripeKey) || this.stripeKey, placeholder: field === null || field === void 0 ? void 0 : field.placeholder, label: field === null || field === void 0 ? void 0 : field.label, value: field === null || field === void 0 ? void 0 : field.value, required: !!(field === null || field === void 0 ? void 0 : field.required), name: field === null || field === void 0 ? void 0 : field.name, autocomplete: field === null || field === void 0 ? void 0 : field.autocomplete, autocapitalize: field === null || field === void 0 ? void 0 : field.autocapitalize, autocorrect: field === null || field === void 0 ? void 0 : field.autocorrect, autofocus: field === null || field === void 0 ? void 0 : field.autofocus, minlength: field === null || field === void 0 ? void 0 : field.minlength, maxlength: field === null || field === void 0 ? void 0 : field.maxlength, disabled: !!(field === null || field === void 0 ? void 0 : field.disabled), info: field === null || field === void 0 ? void 0 : field.info, edit: !!(field === null || field === void 0 ? void 0 : field.edit), min: field === null || field === void 0 ? void 0 : field.min, max: field === null || field === void 0 ? void 0 : field.max, silence: field === null || field === void 0 ? void 0 : field.silence, step: field === null || field === void 0 ? void 0 : field.step, actionOptions: field === null || field === void 0 ? void 0 : field.actionOptions, pattern: field === null || field === void 0 ? void 0 : field.pattern, clearInput: field === null || field === void 0 ? void 0 : field.clearInput, multiple: !!(field === null || field === void 0 ? void 0 : field.multiple), readOnly: !!(field === null || field === void 0 ? void 0 : field.readOnly), spellCheck: !!(field === null || field === void 0 ? void 0 : field.spellCheck), inputMode: field === null || field === void 0 ? void 0 : field.inputMode, stripeElements: (field === null || field === void 0 ? void 0 : field.stripeElements) || this.stripeElements, lines: field === null || field === void 0 ? void 0 : field.lines, labelPosition: field === null || field === void 0 ? void 0 : field.labelPosition, innerHTML: field.innerHTML }));
    }
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17;
    return (h("fireenjin-form", { ref: (el) => (this.formEl = el), name: this.name, formData: this.formData, submitButton: null, resetButton: null, documentId: this.documentId, endpoint: this.endpoint, hideControls: this.hideControls, filterData: this.filterData, beforeSubmit: this.beforeSubmit, disableLoader: this.disableLoader, loading: this.loading, disableEnterButton: true, confirmExit: this.confirmExit, hasChanged: this.hasChanged, method: this.method, action: this.action, fetch: this.fetch, fetchParams: this.fetchParams, fetchDataMap: this.fetchDataMap, fetchKey: this.fetchKey, cacheKey: this.cacheKey }, h("ion-slides", { ref: (el) => (this.slidesEl = el), pager: this.pager, options: this.slidesOptions, scrollbar: this.scrollbar, style: {
        transition: "all ease 0.5s",
        height: !this.showSuccess ? "auto" : "0",
        opacity: !this.showSuccess ? "1" : "0",
      } }, (this.steps || []).map((step) => {
      const StepComponent = (step === null || step === void 0 ? void 0 : step.component) || null;
      return (h("ion-slide", null, h("div", { style: {
          width: "100%",
        } }, (step === null || step === void 0 ? void 0 : step.beforeHTML) && h("div", { innerHTML: step.beforeHTML }), StepComponent && (h(StepComponent, Object.assign({}, ((step === null || step === void 0 ? void 0 : step.componentProps) || {})))), (step === null || step === void 0 ? void 0 : step.innerHTML) && h("div", { innerHTML: step === null || step === void 0 ? void 0 : step.innerHTML }), ((step === null || step === void 0 ? void 0 : step.fields) || []).map((field) => [
        (field === null || field === void 0 ? void 0 : field.beforeHTML) && h("div", { innerHTML: field.beforeHTML }),
        this.renderField(field),
        (field === null || field === void 0 ? void 0 : field.afterHTML) && h("div", { innerHTML: field.afterHTML }),
      ])), (step === null || step === void 0 ? void 0 : step.afterHTML) && h("div", { innerHTML: step.afterHTML })));
    })), h("div", { class: "flow-controls control-pager", style: {
        display: this.hideControls ? "none" : "flex",
      } }, h("ion-button", { expand: (_a = this.prevButton) === null || _a === void 0 ? void 0 : _a.expand, shape: (_b = this.prevButton) === null || _b === void 0 ? void 0 : _b.shape, disabled: !!((_c = this.prevButton) === null || _c === void 0 ? void 0 : _c.disabled), color: (_d = this.prevButton) === null || _d === void 0 ? void 0 : _d.color, fill: (_e = this.prevButton) === null || _e === void 0 ? void 0 : _e.fill, size: (_f = this.prevButton) === null || _f === void 0 ? void 0 : _f.size, onClick: (event) => {
        var _a;
        return typeof ((_a = this.prevButton) === null || _a === void 0 ? void 0 : _a.onClick) === "function"
          ? this.prevButton.onClick(event)
          : this.slidePrev();
      } }, ((_g = this.prevButton) === null || _g === void 0 ? void 0 : _g.icon) && (h("ion-icon", { slot: ((_h = this.prevButton) === null || _h === void 0 ? void 0 : _h.iconSlot) || "start", name: this.prevButton.icon })), ((_j = this.prevButton) === null || _j === void 0 ? void 0 : _j.label) && (h("ion-label", null, this.prevButton.label))), h("ion-button", { expand: (_k = this.nextButton) === null || _k === void 0 ? void 0 : _k.expand, disabled: !!((_l = this.nextButton) === null || _l === void 0 ? void 0 : _l.disabled), color: (_m = this.nextButton) === null || _m === void 0 ? void 0 : _m.color, fill: (_o = this.nextButton) === null || _o === void 0 ? void 0 : _o.fill, size: (_p = this.nextButton) === null || _p === void 0 ? void 0 : _p.size, shape: (_q = this.nextButton) === null || _q === void 0 ? void 0 : _q.shape, onClick: (event) => {
        var _a;
        return typeof ((_a = this.nextButton) === null || _a === void 0 ? void 0 : _a.onClick) === "function"
          ? this.nextButton.onClick(event)
          : this.slideNext();
      } }, ((_r = this.nextButton) === null || _r === void 0 ? void 0 : _r.icon) && (h("ion-icon", { slot: ((_s = this.nextButton) === null || _s === void 0 ? void 0 : _s.iconSlot) || "end", name: this.nextButton.icon })), ((_t = this.nextButton) === null || _t === void 0 ? void 0 : _t.label) && (h("ion-label", null, this.nextButton.label)))), h("div", { class: "flow-controls control-confirmation", style: {
        display: this.showSave && !this.showSuccess ? "flex" : "none",
      } }, h("ion-button", { expand: (_u = this.prevButton) === null || _u === void 0 ? void 0 : _u.expand, disabled: !!((_v = this.prevButton) === null || _v === void 0 ? void 0 : _v.disabled), color: (_w = this.prevButton) === null || _w === void 0 ? void 0 : _w.color, fill: (_x = this.prevButton) === null || _x === void 0 ? void 0 : _x.fill, size: (_y = this.prevButton) === null || _y === void 0 ? void 0 : _y.size, shape: (_z = this.prevButton) === null || _z === void 0 ? void 0 : _z.shape, onClick: (event) => {
        var _a;
        return typeof ((_a = this.prevButton) === null || _a === void 0 ? void 0 : _a.onClick) === "function"
          ? this.prevButton.onClick(event)
          : this.slidePrev();
      } }, ((_0 = this.prevButton) === null || _0 === void 0 ? void 0 : _0.icon) && (h("ion-icon", { slot: ((_1 = this.prevButton) === null || _1 === void 0 ? void 0 : _1.iconSlot) || "start", name: this.prevButton.icon })), ((_2 = this.prevButton) === null || _2 === void 0 ? void 0 : _2.label) && (h("ion-label", null, this.prevButton.label))), h("ion-button", { expand: ((_3 = this.saveButton) === null || _3 === void 0 ? void 0 : _3.expand) || ((_4 = this.nextButton) === null || _4 === void 0 ? void 0 : _4.expand), disabled: !!((_5 = this.saveButton) === null || _5 === void 0 ? void 0 : _5.disabled), color: ((_6 = this.saveButton) === null || _6 === void 0 ? void 0 : _6.color) || ((_7 = this.nextButton) === null || _7 === void 0 ? void 0 : _7.color), fill: ((_8 = this.saveButton) === null || _8 === void 0 ? void 0 : _8.fill) || ((_9 = this.nextButton) === null || _9 === void 0 ? void 0 : _9.fill), shape: (_11 = (_10 = this.nextButton) === null || _10 === void 0 ? void 0 : _10.shape) !== null && _11 !== void 0 ? _11 : (_12 = this.nextButton) === null || _12 === void 0 ? void 0 : _12.shape, type: "submit", size: ((_13 = this.saveButton) === null || _13 === void 0 ? void 0 : _13.size) || ((_14 = this.nextButton) === null || _14 === void 0 ? void 0 : _14.size), onClick: (event) => {
        var _a;
        return typeof ((_a = this.saveButton) === null || _a === void 0 ? void 0 : _a.onClick) === "function"
          ? this.saveButton.onClick(event)
          : null;
      } }, ((_15 = this.saveButton) === null || _15 === void 0 ? void 0 : _15.icon) && (h("ion-icon", { slot: ((_16 = this.saveButton) === null || _16 === void 0 ? void 0 : _16.iconSlot) || "end", name: this.saveButton.icon })), ((_17 = this.saveButton) === null || _17 === void 0 ? void 0 : _17.label) && (h("ion-label", null, this.saveButton.label)))), h("div", { class: "flow-success", style: {
        transition: "all ease 0.5s",
        height: this.showSuccess ? "auto" : "0",
        opacity: this.showSuccess ? "1" : "0",
      } }, h("slot", null))));
  }
  get flowEl() { return getElement(this); }
};
Flow.style = flowCss;

const inputFileCss = "fireenjin-input-file ion-card{width:95%;margin:15px auto;background-color:var(--ion-color-light-tint);--background-color:var(--ion-color-light-tint);padding:0}fireenjin-input-file ion-card.drag-over{opacity:0.8}fireenjin-input-file ion-card ion-item{padding:5px 0;background-color:var(--ion-color-light-tint);--ion-color-base:var(--ion-color-light-tint);--background:var(--ion-color-light-tint);pointer-events:none}fireenjin-input-file ion-card ion-item ion-icon{height:50px;width:50px;color:var(--ion-color-medium)}fireenjin-input-file ion-card ion-item h2{font-size:20px;color:var(--ion-color-dark);margin:0}fireenjin-input-file ion-card ion-item p{color:var(--ion-color-darker-grey);margin:0}fireenjin-input-file ion-card:hover{cursor:pointer}fireenjin-input-file ion-card:hover h2{color:var(--ion-color-primary)}fireenjin-input-file ion-card:hover ion-icon{color:var(--ion-color-primary)}fireenjin-input-file input{float:left;height:0;width:0;visibility:hidden}";

const InputFile = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.fireenjinUpload = createEvent(this, "fireenjinUpload", 7);
    this.ionInput = createEvent(this, "ionInput", 7);
    this.path = undefined;
    this.icon = undefined;
    this.label = undefined;
    this.fileName = undefined;
    this.name = undefined;
    this.accept = undefined;
    this.defaultValue = undefined;
    this.value = undefined;
    this.type = "file";
    this.documentId = undefined;
    this.disabled = false;
    this.endpoint = "upload";
    this.uploadData = {};
    this.isLoading = undefined;
    this.fileUrl = undefined;
    this.selectedFile = undefined;
    this.dragOver = false;
  }
  onFileChange() {
    if (!this.value)
      return false;
    this.ionInput.emit({
      name: this.name,
      value: this.value,
    });
  }
  async openFile() {
    const fileInputEl = this.fileUploaderEl.querySelector('input[type="file"]');
    fileInputEl.click();
    return fileInputEl;
  }
  uploadFile(file) {
    this.isLoading = true;
    if (!window.FileReader)
      return;
    const reader = new FileReader();
    reader.onload = async (event) => {
      if (event.target.readyState != 2)
        return;
      if (event.target.error) {
        alert("Error while reading file");
        return;
      }
      this.fireenjinUpload.emit({
        event,
        name: this.name,
        endpoint: this.endpoint,
        data: Object.assign({
          id: this.documentId,
          type: this.type,
          fileName: this.fileName,
          file,
          path: this.path,
          encodedContent: event.target.result,
        }, this.uploadData),
      });
    };
    reader.readAsDataURL(file);
  }
  selectFile(event) {
    this.isLoading = true;
    const file = event.target.files[0];
    this.selectedFile = file.name;
    this.uploadFile(file);
  }
  onDrop(event) {
    event.preventDefault();
    if (event.dataTransfer.items) {
      // Use DataTransferItemList interface to access the file(s)
      for (var i = 0; i < event.dataTransfer.items.length; i++) {
        // If dropped items aren't files, reject them
        if (event.dataTransfer.items[i].kind === "file") {
          var file = event.dataTransfer.items[i].getAsFile();
          this.selectedFile = file.name;
          this.uploadFile(file);
        }
      }
    }
    else {
      // Use DataTransfer interface to access the file(s)
      for (var i = 0; i < event.dataTransfer.files.length; i++) {
        const file = event.dataTransfer.files[i];
        this.selectedFile = file.name;
        this.uploadFile(file);
        console.log("... file[" + i + "].name = " + file.name);
      }
    }
    this.dragOver = false;
  }
  onDrag(event) {
    event.preventDefault();
  }
  onDragOver(event) {
    event.preventDefault();
  }
  onDragEnter(event) {
    console.log("Show UI to drop file", event);
    this.dragOver = true;
  }
  onDragLeave(event) {
    console.log("Hide UI to drop file", event);
    this.dragOver = false;
  }
  render() {
    return (h("ion-card", { disabled: this.disabled, class: { "drag-over": this.dragOver }, onDragEnter: (event) => this.onDragEnter(event), onDragOver: (event) => this.onDragOver(event), onDrag: (event) => this.onDrag(event), onDrop: (event) => this.onDrop(event), onDragLeave: (event) => this.onDragLeave(event), onClick: () => this.openFile() }, h("ion-item", { lines: "none" }, h("ion-icon", { name: this.icon ? this.icon : "document", slot: "start" }), h("div", null, h("h2", null, this.dragOver
      ? "Drop File Here"
      : this.label
        ? this.label
        : "Upload a File"), h("p", null, this.selectedFile
      ? this.selectedFile
      : this.defaultValue
        ? this.defaultValue
        : "Select a letterhead"))), h("input", { disabled: this.disabled, type: "file", onChange: (event) => this.selectFile(event), accept: this.accept ? this.accept : null, value: "blah" })));
  }
  get fileUploaderEl() { return getElement(this); }
  static get watchers() { return {
    "value": ["onFileChange"]
  }; }
};
InputFile.style = inputFileCss;

/**
 * Get the value from an object using a dot notation string.
 *
 * @param obj The object you are searching through
 * @param path The dot noation path to the value
 * @returns The value of the path in the object
 */
function pathToValue(obj, path) {
  return path.split(".").reduce((o, i) => o[i], obj);
}

const inputSearchCss = "fireenjin-input-search .search-input ion-label{color:var(--ion-color-medium) !important;font-size:12px;font-weight:bold;text-transform:uppercase;font-family:arial;display:block;background:transparent;text-align:left;padding:0 0 8px 0;font-family:var(--ion-font-family)}fireenjin-input-search ion-icon{color:var(--ion-text-color)}fireenjin-input-search .search-input ion-icon[slot=\"start\"]{margin-right:5px}fireenjin-input-search .search-input [slot=\"end\"]{margin-left:5px}fireenjin-input-search .invalid{--border-color:var(--ion-color-danger) !important}fireenjin-input-search .invalid ion-label{color:var(--ion-color-danger) !important}fireenjin-input-search .valid{--border-color:var(--ion-color-success) !important}fireenjin-input-search .valid ion-label{color:var(--ion-color-success) !important}";

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
    r = Reflect.decorate(decorators, target, key, desc);
  else
    for (var i = decorators.length - 1; i >= 0; i--)
      if (d = decorators[i])
        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const InputSearch = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ionInput = createEvent(this, "ionInput", 7);
    this.fireenjinFetch = createEvent(this, "fireenjinFetch", 7);
    this.name = undefined;
    this.label = undefined;
    this.placeholder = undefined;
    this.value = undefined;
    this.required = false;
    this.autofocus = undefined;
    this.disabled = undefined;
    this.endpoint = undefined;
    this.dataPropsMap = undefined;
    this.template = undefined;
    this.type = "text";
    this.searchParams = {};
    this.disableSearch = false;
    this.mode = "popover";
    this.iconEnd = undefined;
    this.iconStart = undefined;
    this.results = [];
    this.resultsKey = undefined;
    this.lines = undefined;
    this.labelPosition = undefined;
  }
  async checkValidity(options) {
    if (this.required || (options && options.setValidationClass)) {
      await this.setValidationClass(options && options.validationClassOptions
        ? options.validationClassOptions
        : null);
    }
    return this.inputEl
      ? await (await this.inputEl.getInputElement()).checkValidity()
      : true;
  }
  async reportValidity() {
    const isValid = this.inputEl
      ? await (await this.inputEl.getInputElement()).reportValidity()
      : true;
    this.inputEl.classList[isValid ? "remove" : "add"]("invalid");
    await this.setValidationClass();
    return isValid;
  }
  async onBlur() {
    const isValid = await this.checkValidity();
    this.inputEl.classList[isValid ? "remove" : "add"]("invalid");
    await this.setValidationClass();
  }
  async onSuccess(event) {
    var _a, _b;
    if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) !== this.endpoint || !((_b = event === null || event === void 0 ? void 0 : event.detail) === null || _b === void 0 ? void 0 : _b.data))
      return;
    this.results = await pathToValue(event.detail.data, this.resultsKey ? this.resultsKey : "searchUsers.results");
    if (this.mode === "popover") {
      this.resultsPopover = await popoverController.create({
        translucent: true,
        showBackdrop: false,
        event: event.detail.event,
        component: "fireenjin-input-search-popover",
        componentProps: {
          results: this.results,
          template: this.template,
        },
      });
      this.resultsPopover.present();
    }
  }
  onInput(event) {
    var _a, _b;
    if (this.disableSearch || ((_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) <= 1)
      return;
    this.fireenjinFetch.emit({
      event,
      endpoint: this.endpoint,
      params: {
        data: Object.assign({ query: event.target.value }, this.searchParams),
      },
      dataPropsMap: this.dataPropsMap,
    });
  }
  async clearResults() {
    return (this.results = []);
  }
  async closePopover() {
    return this.resultsPopover.dismiss();
  }
  async openPopover() {
    return this.resultsPopover.present();
  }
  async setValidationClass(options) {
    const classList = Object.values(this.itemEl.classList);
    if (classList.indexOf("invalid") >= 0) {
      this.itemEl.classList.remove("invalid");
    }
    if (classList.indexOf("valid") >= 0) {
      this.itemEl.classList.remove("valid");
    }
    const isValid = await (await this.inputEl.getInputElement()).checkValidity();
    if (!options ||
      !options.ignoreInvalid ||
      (options && options.ignoreInvalid && isValid)) {
      this.itemEl.classList.add(isValid ? "valid" : "invalid");
    }
  }
  render() {
    var _a;
    return [
      h("ion-item", { lines: this.lines, class: "search-input", ref: (el) => (this.itemEl = el), onClick: (event) => this.onInput(event) }, h("slot", { name: "start" }), this.iconStart && h("ion-icon", { name: this.iconStart, slot: "start" }), this.label && (h("ion-label", { position: this.labelPosition }, this.label)), h("ion-input", { onInput: (event) => this.onInput(event), ref: (el) => (this.inputEl = el), disabled: this.disabled, type: this.type, name: this.name, placeholder: this.placeholder, required: this.required, autofocus: this.autofocus, value: this.value }), this.iconEnd && h("ion-icon", { name: this.iconEnd, slot: "end" }), h("slot", { name: "end" })),
      this.mode === "inline" && ((_a = this.results) === null || _a === void 0 ? void 0 : _a.length)
        ? this.results.map((result) => this.template(result))
        : null,
    ];
  }
};
__decorate([
  index_min.debounce(1000)
], InputSearch.prototype, "onInput", null);
InputSearch.style = inputSearchCss;

const radiosCss = "";

const Radios = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.fireenjinFetch = createEvent(this, "fireenjinFetch", 7);
    this.label = undefined;
    this.value = undefined;
    this.required = false;
    this.pattern = undefined;
    this.options = undefined;
    this.name = undefined;
    this.disabled = false;
    this.allowEmptySelection = false;
    this.lines = "none";
    this.labelPosition = "stacked";
    this.endpoint = undefined;
    this.orderBy = undefined;
    this.dataPropsMap = undefined;
    this.optionEl = undefined;
    this.limit = 15;
    this.params = undefined;
    this.query = undefined;
    this.resultsKey = undefined;
    this.radioSlot = "start";
    this.color = undefined;
    this.mode = undefined;
    this.results = [];
  }
  onChange(event) {
    var _a, _b;
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.name) !== this.name)
      return;
    this.value = ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.value) || null;
  }
  onSuccess(event) {
    var _a, _b, _c;
    if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.name) !== "radios" ||
      event.detail.endpoint !== this.endpoint)
      return;
    this.results = ((_c = (_b = event === null || event === void 0 ? void 0 : event.detail) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.results)
      ? event.detail.data.results
      : [];
    setTimeout(() => {
      this.value = this.value;
    }, 200);
  }
  fetchData() {
    if (!this.endpoint)
      return;
    this.fireenjinFetch.emit({
      name: "radios",
      endpoint: this.endpoint,
      dataPropsMap: this.dataPropsMap
        ? this.dataPropsMap
        : this.resultsKey
          ? { [this.resultsKey]: "results" }
          : null,
      params: Object.assign({ data: Object.assign(Object.assign(Object.assign({}, (this.query ? { query: this.query } : {})), (this.orderBy ? { orderBy: this.orderBy } : {})), { limit: this.limit ? this.limit : 15 }) }, (this.params ? this.params : {})),
    });
  }
  componentWillLoad() {
    this.fetchData();
  }
  render() {
    return (h("ion-list", null, h("ion-radio-group", { name: this.name, value: this.value, allowEmptySelection: this.allowEmptySelection }, h("ion-list-header", null, this.label), (this.options ? this.options : []).map((option) => this.optionEl ? (this.optionEl(option)) : (h("ion-item", { lines: this.lines }, h("ion-label", null, (option === null || option === void 0 ? void 0 : option.label) || (option === null || option === void 0 ? void 0 : option.value)), h("ion-radio", { mode: this.mode, color: (option === null || option === void 0 ? void 0 : option.color) || this.color, disabled: this.disabled || option.disabled, slot: (option === null || option === void 0 ? void 0 : option.slot) || this.radioSlot, value: (option === null || option === void 0 ? void 0 : option.value) || null })))), (this.results ? this.results : []).map((result) => this.optionEl ? (this.optionEl(result)) : (h("ion-item", { lines: this.lines }, h("ion-label", { position: this.labelPosition }, (result === null || result === void 0 ? void 0 : result.label) || (result === null || result === void 0 ? void 0 : result.name) || (result === null || result === void 0 ? void 0 : result.value) || (result === null || result === void 0 ? void 0 : result.id)), h("ion-radio", { mode: this.mode, color: (result === null || result === void 0 ? void 0 : result.color) || this.color, disabled: this.disabled || (result === null || result === void 0 ? void 0 : result.disabled), slot: (result === null || result === void 0 ? void 0 : result.slot) || this.radioSlot, value: (result === null || result === void 0 ? void 0 : result.value) || (result === null || result === void 0 ? void 0 : result.id) || null }))))), h("input", { style: {
        opacity: "0",
        height: "0",
        width: "0",
        float: "left",
        margin: "0",
        padding: "0",
      }, type: "text", pattern: this.pattern, value: this.value, required: this.required })));
  }
};
Radios.style = radiosCss;

const progressBarIosCss = ":host{--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);--progress-background:var(--ion-color-primary, #3880ff);--buffer-background:var(--background);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.buffer-circles-container,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute}.buffer-circles{right:-10px;left:-10px;}.progress,.progress-buffer-bar,.buffer-circles-container{transform-origin:left top;transition:transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:var(--buffer-background);z-index:1}.buffer-circles-container{overflow:hidden}.indeterminate-bar-primary{top:0;right:0;bottom:0;left:-145.166611%;animation:primary-indeterminate-translate 2s infinite linear}.indeterminate-bar-primary .progress-indeterminate{animation:primary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.indeterminate-bar-secondary{top:0;right:0;bottom:0;left:-54.888891%;animation:secondary-indeterminate-translate 2s infinite linear}.indeterminate-bar-secondary .progress-indeterminate{animation:secondary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.buffer-circles{background-image:radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);background-repeat:repeat-x;background-position:5px center;background-size:10px 10px;z-index:0;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed){transform:scaleX(-1)}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{animation-play-state:paused}:host(.ion-color) .progress-buffer-bar{background:rgba(var(--ion-color-base-rgb), 0.3)}:host(.ion-color) .buffer-circles{background-image:radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%)}:host(.ion-color) .progress,:host(.ion-color) .progress-indeterminate{background:var(--ion-color-base)}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{to{transform:translateX(-10px)}}:host{height:3px}";

const progressBarMdCss = ":host{--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);--progress-background:var(--ion-color-primary, #3880ff);--buffer-background:var(--background);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.buffer-circles-container,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute}.buffer-circles{right:-10px;left:-10px;}.progress,.progress-buffer-bar,.buffer-circles-container{transform-origin:left top;transition:transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:var(--buffer-background);z-index:1}.buffer-circles-container{overflow:hidden}.indeterminate-bar-primary{top:0;right:0;bottom:0;left:-145.166611%;animation:primary-indeterminate-translate 2s infinite linear}.indeterminate-bar-primary .progress-indeterminate{animation:primary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.indeterminate-bar-secondary{top:0;right:0;bottom:0;left:-54.888891%;animation:secondary-indeterminate-translate 2s infinite linear}.indeterminate-bar-secondary .progress-indeterminate{animation:secondary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.buffer-circles{background-image:radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);background-repeat:repeat-x;background-position:5px center;background-size:10px 10px;z-index:0;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed){transform:scaleX(-1)}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{animation-play-state:paused}:host(.ion-color) .progress-buffer-bar{background:rgba(var(--ion-color-base-rgb), 0.3)}:host(.ion-color) .buffer-circles{background-image:radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%)}:host(.ion-color) .progress,:host(.ion-color) .progress-indeterminate{background:var(--ion-color-base)}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{to{transform:translateX(-10px)}}:host{height:4px}";

const ProgressBar = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * The state of the progress bar, based on if the time the process takes is known or not.
     * Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
     */
    this.type = 'determinate';
    /**
     * If true, reverse the progress bar direction.
     */
    this.reversed = false;
    /**
     * The value determines how much of the active bar should display when the
     * `type` is `"determinate"`.
     * The value should be between [0, 1].
     */
    this.value = 0;
    /**
     * If the buffer and value are smaller than 1, the buffer circles will show.
     * The buffer should be between [0, 1].
     */
    this.buffer = 1;
  }
  render() {
    const { color, type, reversed, value, buffer } = this;
    const paused = config.getBoolean('_testing');
    const mode = getIonMode(this);
    return (h(Host, { role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
        [mode]: true,
        [`progress-bar-${type}`]: true,
        'progress-paused': paused,
        'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
      }) }, type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)));
  }
};
const renderIndeterminate = () => {
  return (h("div", { part: "track", class: "progress-buffer-bar" }, h("div", { class: "indeterminate-bar-primary" }, h("span", { part: "progress", class: "progress-indeterminate" })), h("div", { class: "indeterminate-bar-secondary" }, h("span", { part: "progress", class: "progress-indeterminate" }))));
};
const renderProgress = (value, buffer) => {
  const finalValue = clamp(0, value, 1);
  const finalBuffer = clamp(0, buffer, 1);
  return [
    h("div", { part: "progress", class: "progress", style: { transform: `scaleX(${finalValue})` } }),
    /**
     * Buffer circles with two container to move
     * the circles behind the buffer progress
     * with respecting the animation.
     * When finalBuffer === 1, we use display: none
     * instead of removing the element to avoid flickering.
     */
    h("div", { class: { 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }, style: { transform: `translateX(${finalBuffer * 100}%)` } }, h("div", { class: "buffer-circles-container", style: { transform: `translateX(-${finalBuffer * 100}%)` } }, h("div", { part: "stream", class: "buffer-circles" }))),
    h("div", { part: "track", class: "progress-buffer-bar", style: { transform: `scaleX(${finalBuffer})` } }),
  ];
};
ProgressBar.style = {
  ios: progressBarIosCss,
  md: progressBarMdCss
};

export { Checklist as fireenjin_checklist, Flow as fireenjin_flow, InputFile as fireenjin_input_file, InputSearch as fireenjin_input_search, Radios as fireenjin_radios, ProgressBar as ion_progress_bar };
