import { Component, h, Host, Prop } from "@stencil/core";
export class DvnStepper {
  constructor() {
    this.activeStep = 0;
    this.allowToClickNextSteps = false; // not allow to click a step bigger then active step
    this.scale = 'medium';
  }
  render() {
    const { steps, activeStep, scale } = this;
    const hasClickableSteps = !!this.stepOnClick;
    return (h(Host, null,
      h("div", { class: "d-flex mb-4 align-items-baseline" }, steps && steps.map((step, i) => (h("div", null,
        h("span", { class: `step ${activeStep === i ? 'active' : ''} ${hasClickableSteps && (this.allowToClickNextSteps || activeStep > i) ? 'clickable' : ''}`, style: { fontSize: `var(--font-size-${scale})` }, onClick: () => {
            if (this.allowToClickNextSteps || activeStep > i) {
              this.stepOnClick(i);
            }
          } }, step.label),
        steps.length - 1 !== i &&
          h("dvn-icon", { iconName: "uil uil-angle-right-b", size: 20, style: { color: 'var(--color-text-secondary)' } })))))));
  }
  static get is() { return "dvn-stepper"; }
  static get originalStyleUrls() { return {
    "$": ["dvn-stepper.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["dvn-stepper.css"]
  }; }
  static get properties() { return {
    "steps": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Step[]",
        "resolved": "Step[]",
        "references": {
          "Step": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "activeStep": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "active-step",
      "reflect": false,
      "defaultValue": "0"
    },
    "allowToClickNextSteps": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "allow-to-click-next-steps",
      "reflect": false,
      "defaultValue": "false"
    },
    "scale": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Scale",
        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
        "references": {
          "Scale": {
            "location": "import",
            "path": "@dvn/alaca/theme"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scale",
      "reflect": false,
      "defaultValue": "'medium'"
    },
    "stepOnClick": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "(activeIndexStep: number) => void",
        "resolved": "(activeIndexStep: number) => void",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
}
