import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { boolean } from '../../internal/boolean.mjs';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { LocalizeController } from '../../utilities/localize.mjs';
import styles from './progress-bar.styles.mjs';

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;
};
class FlowUiProgressBar extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.localize = new LocalizeController(this);
    this.label = "";
    this.value = 0;
    this.indeterminate = false;
    this.variant = "primary";
  }
  connectedCallback() {
    super.connectedCallback();
    this.indeterminate = boolean(this.indeterminate, true);
  }
  render() {
    return html`
      <div
        part="base"
        class="progress-bar"
        role="progressbar"
        title=${ifDefined(this.label)}
        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
        aria-valuemin="0"
        aria-valuemax="100"
        aria-valuenow=${this.indeterminate ? 0 : this.value}
      >
        <div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: `${this.value}%` })}></div>
      </div>
      <div class="progress-bar__label-container">
        ${!this.indeterminate ? html`
              <slot part="label" class="progress-bar__label"></slot>
            ` : ""}
      </div>
    `;
  }
}
FlowUiProgressBar.styles = styles;
__decorateClass([
  property()
], FlowUiProgressBar.prototype, "label", 2);
__decorateClass([
  property({ type: Number, reflect: true })
], FlowUiProgressBar.prototype, "value", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiProgressBar.prototype, "indeterminate", 2);
__decorateClass([
  property({ reflect: true })
], FlowUiProgressBar.prototype, "variant", 2);

export { FlowUiProgressBar as default };
