'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const shared_tailwindElement_index = require('../../index-179a633e.cjs');
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
const styleMap = require('../../style-map-f36cc35f.cjs');
require('../../tailwind-config.cjs');
const cn = require('../../cn-5ceac001.cjs');
require('../../directive-8278ab14.cjs');
require('../../bundle-mjs-d58a83c6.cjs');

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;
};
exports.LuksoProgress = class LuksoProgress extends shared_tailwindElement_index.TailwindElement {
  constructor() {
    super(...arguments);
    this.min = 0;
    this.max = 100;
    this.current = 0;
    this.variant = "success";
    this.height = 16;
  }
  progressWidth() {
    return this.current / this.max * 100;
  }
  render() {
    return shared_tailwindElement_index.x`
      <div
        data-testid="progress"
        style=${styleMap.o({
      height: this.height > 16 ? `${this.height}px` : "16px"
    })}
        class=${cn.cn("w-full rounded-24 bg-neutral-95 relative")}
      >
        <div
          style=${styleMap.o({
      width: `${this.progressWidth()}%`
    })}
          class=${cn.cn(
      "rounded-s-24 h-full rounded-e-24  transition-all w-[1%]",
      {
        "bg-green-85": !!this.variant || this.variant === "success",
        "bg-red-85": this.variant === "error",
        "bg-yellow-85": this.variant === "warning"
      }
    )}
        ></div>
        <div
          class=${cn.cn(
      "shadow-neutral-inner-shadow h-full absolute w-full top-0 rounded-24"
    )}
        ></div>
      </div>
    `;
  }
};
__decorateClass([
  queryAssignedElements.n({ type: Number })
], exports.LuksoProgress.prototype, "min", 2);
__decorateClass([
  queryAssignedElements.n({ type: Number })
], exports.LuksoProgress.prototype, "max", 2);
__decorateClass([
  queryAssignedElements.n({ type: Number })
], exports.LuksoProgress.prototype, "current", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoProgress.prototype, "variant", 2);
__decorateClass([
  queryAssignedElements.n({ type: Number })
], exports.LuksoProgress.prototype, "height", 2);
exports.LuksoProgress = __decorateClass([
  queryAssignedElements.e("lukso-progress")
], exports.LuksoProgress);
