import { i as S, P as d, r as A, n as r } from "./plus-base-1920dd44.mjs";
import { e as P } from "./custom-element-eaccb8d2.mjs";
import { o as V } from "./style-map-628a6643.mjs";
import { n as p } from "./static-be5c3b1c.mjs";
import { l as _, c as z } from "./label.style-1b60b221.mjs";
import { s as I } from "./index-975d3293.mjs";
import "./directive-daf4e9b6.mjs";
const T = I({
  slots: {
    host: ["antialiased font-sans flex flex-col w-full font-medium text-default"],
    progress: ["w-full rounded-full bg-color-default transition-colors duration-400 ease-in-out progress relative"],
    progressLine: ["h-full rounded-full"],
    infoArea: ["flex flex-row items-center justify-center gap-2 font-medium"]
  },
  variants: {
    size: {
      sm: {
        host: ["text-xs gap-0.5"],
        progress: ["h-2"]
      },
      md: {
        host: ["text-sm gap-1"],
        progress: ["h-2.5"]
      },
      lg: {
        host: ["text-base gap-1.5"],
        progress: ["h-3"]
      }
    },
    status: {
      success: {
        progressLine: ["bg-color-success"],
        infoArea: ["text-color-success"]
      },
      warning: {
        progressLine: ["bg-color-warning"],
        infoArea: ["text-color-warning"]
      },
      error: {
        progressLine: ["bg-color-error"],
        infoArea: ["text-color-error"]
      },
      info: {
        progressLine: ["bg-color-info"],
        infoArea: ["text-color-info"]
      },
      default: {
        progressLine: ["bg-color-invert-default"],
        infoArea: ["text-color-default"]
      }
    },
    disabled: {
      true: ""
    },
    error: {
      true: ""
    },
    indeterminate: {
      true: {
        progress: ["overflow-hidden"],
        progressLine: ["!w-full animate-progress-indeterminate"]
      }
    }
  },
  compoundVariants: [
    {
      disabled: !0,
      class: {
        host: ["text-color-disabled cursor-not-allowed"],
        progress: ["bg-color-disabled"],
        progressLine: ["bg-color-disabled"],
        infoArea: ["text-color-disabled"]
      }
    }
  ],
  defaultVariants: {
    size: "md",
    status: "default",
    disabled: !1,
    error: !1,
    indeterminate: !1
  }
});
var j = Object.defineProperty, B = Object.getOwnPropertyDescriptor, t = (o, a, i, n) => {
  for (var s = n > 1 ? void 0 : n ? B(a, i) : a, l = o.length - 1, c; l >= 0; l--)
    (c = o[l]) && (s = (n ? c(a, i, s) : c(s)) || s);
  return n && s && j(a, i, s), s;
};
const f = {
  success: "fa-solid fa-circle-check",
  warning: "fa-solid fa-triangle-exclamation",
  error: "fa-solid fa-circle-xmark",
  info: "fa-solid fa-circle-info"
};
let e = class extends d {
  constructor() {
    super(...arguments), this.size = "md", this.valueFormat = "percent", this.error = !1, this.status = "default", this.statusIcon = !1, this.maxValue = 100, this.indeterminate = !1;
  }
  render() {
    const { size: o, label: a, caption: i, required: n, error: s, status: l, valueFormat: c, disabled: u, indeterminate: m } = this, { host: g, progress: h, progressLine: b, infoArea: v } = T({ size: o, status: l, disabled: u, indeterminate: m }), x = () => a ? p`<label class=${_({ required: n, size: o, disabled: u })} @click=${this.focus}>${a}</label>` : null, y = () => i ? p`<div class=${z({ error: s, size: o, disabled: u })}>${i}</div>` : null, $ = () => p`<span>${+this.value / +this.maxValue * 100}%</span>`, w = () => p`<span>${this.value} / ${this.maxValue}</span>`, L = () => p`<i class=${f[l]}></i>`;
    return p`
      <div class=${g()}>
        <div class="flex flex-row items-start justify-between">
          ${x()}
          <div class=${v()}>${c === "percent" ? $() : w()} ${this.statusIcon && f[l] ? L() : null}</div>
        </div>
        <div class=${h()}>
          <div
            class=${b()}
            style=${V({
      width: `${+this.value / +this.maxValue * 100}%`
    })}
          ></div>
        </div>
        ${y()}
      </div>
    `;
  }
};
e.host = S`
    :host {
      display: block;
      width: 100%;
    }
  `;
e.styles = [...d.styles, A(e.host)];
t([
  r({ type: String })
], e.prototype, "size", 2);
t([
  r({ type: String, attribute: "value-format" })
], e.prototype, "valueFormat", 2);
t([
  r({ type: String })
], e.prototype, "label", 2);
t([
  r({ type: String })
], e.prototype, "caption", 2);
t([
  r({ type: Boolean, converter: (o) => o != "false" })
], e.prototype, "error", 2);
t([
  r({ type: String })
], e.prototype, "status", 2);
t([
  r({ type: Boolean, reflect: !0, attribute: "status-icon" })
], e.prototype, "statusIcon", 2);
t([
  r({ type: Number, attribute: "max-value" })
], e.prototype, "maxValue", 2);
t([
  r({ type: Boolean })
], e.prototype, "indeterminate", 2);
e = t([
  P("plus-progress")
], e);
export {
  e as ProgressComponent
};
