import { a as TailwindElement, x } from '../../index-2f5488b6.js';
import { n, e } from '../../query-assigned-elements-5d94572f.js';
import { o } from '../../style-map-88b4d8ad.js';
import { c as customClassMap } from '../../index-5e194caf.js';
import '../../directive-2bb7789e.js';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
let LuksoProgress = class extends TailwindElement {
  constructor() {
    super(...arguments);
    this.min = 0;
    this.max = 100;
    this.current = 0;
    this.variant = "success";
  }
  progressWidth() {
    return this.current / this.max * 100;
  }
  render() {
    return x`
      <div
        data-testid="progress"
        class='w-full h-[12px] shadow-neutral-inner-shadow rounded-24 bg-neutral-95'
      >
        <div
          class="h-[12px] rounded-s-24 rounded-e-16 border border-solid transition-all w-[1%] ${customClassMap(
      {
        "bg-green-85 border-green-54": !!this.variant || this.variant === "success",
        "bg-red-85 border-red-65": this.variant === "error"
      }
    )}"
          style=${o({
      width: `${this.progressWidth()}%`
    })}
        >
          </div>
        </div>
      </div>
    `;
  }
};
__decorateClass([
  n({ type: Number })
], LuksoProgress.prototype, "min", 2);
__decorateClass([
  n({ type: Number })
], LuksoProgress.prototype, "max", 2);
__decorateClass([
  n({ type: Number })
], LuksoProgress.prototype, "current", 2);
__decorateClass([
  n({ type: String })
], LuksoProgress.prototype, "variant", 2);
LuksoProgress = __decorateClass([
  e("lukso-progress")
], LuksoProgress);

export { LuksoProgress };
