jtBaseApp/node_modules/@esri/calcite-components/dist/collection/components/stepper-item/stepper-item.js

/*!
 * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
 * v1.0.0-beta.82
 */
import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
import { getElementProp, toAriaBoolean } from "../../utils/dom";
import { updateHostInteraction } from "../../utils/interactive";
/**
 * @slot - A slot for adding custom content.
 */
export class StepperItem {
  constructor() {
    //--------------------------------------------------------------------------
    //
    //  Public Properties
    //
    //--------------------------------------------------------------------------
    /** is the step active */
    this.active = false;
    /** has the step been completed */
    this.complete = false;
    /** does the step contain an error that needs to be resolved by the user */
    this.error = false;
    /** is the step disabled and not navigable to by a user */
    this.disabled = false;
    /** should the items display an icon based on status */
    /** @internal */
    this.icon = false;
    /** optionally display the step number next to the title and subtitle */
    /** @internal */
    this.numbered = false;
    /** the scale of the item */
    /** @internal */
    this.scale = "m";
    //--------------------------------------------------------------------------
    //
    //  Private Methods
    //
    //--------------------------------------------------------------------------
    this.keyDownHandler = (e) => {
      if (!this.disabled && e.target === this.el) {
        switch (e.key) {
          case " ":
          case "Enter":
            this.emitRequestedItem();
            e.preventDefault();
            break;
          case "ArrowUp":
          case "ArrowDown":
          case "ArrowLeft":
          case "ArrowRight":
          case "Home":
          case "End":
            this.calciteStepperItemKeyEvent.emit({ item: e });
            e.preventDefault();
            break;
        }
      }
    };
    this.emitRequestedItem = () => {
      if (!this.disabled) {
        this.calciteStepperItemSelect.emit({
          position: this.itemPosition,
          content: this.itemContent
        });
      }
    };
    this.setItemContent = (event) => {
      this.itemPosition = this.getItemPosition();
      const itemContent = event.target.assignedNodes({ flatten: true });
      if (itemContent.length) {
        this.itemContent = itemContent;
      }
      this.registerStepperItem();
      if (this.active) {
        this.emitRequestedItem();
      }
    };
  }
  // watch for removal of disabled to register step
  disabledWatcher() {
    this.registerStepperItem();
  }
  //--------------------------------------------------------------------------
  //
  //  Lifecycle
  //
  //--------------------------------------------------------------------------
  componentWillLoad() {
    this.icon = getElementProp(this.el, "icon", false);
    this.numbered = getElementProp(this.el, "numbered", false);
    this.layout = getElementProp(this.el, "layout", false);
    this.scale = getElementProp(this.el, "scale", "m");
    this.parentStepperEl = this.el.parentElement;
  }
  componentDidRender() {
    updateHostInteraction(this, true);
  }
  render() {
    return (h(Host, { "aria-expanded": toAriaBoolean(this.active), onClick: this.emitRequestedItem, onKeyDown: this.keyDownHandler },
      h("div", { class: "container" },
        h("div", { class: "stepper-item-header" },
          this.icon ? this.renderIcon() : null,
          this.numbered ? (h("div", { class: "stepper-item-number" },
            this.getItemPosition() + 1,
            ".")) : null,
          h("div", { class: "stepper-item-header-text" },
            h("span", { class: "stepper-item-title" }, this.itemTitle),
            h("span", { class: "stepper-item-subtitle" }, this.itemSubtitle))),
        h("div", { class: "stepper-item-content" },
          h("slot", { onSlotchange: this.setItemContent })))));
  }
  //--------------------------------------------------------------------------
  //
  //  Event Listeners
  //
  //--------------------------------------------------------------------------
  updateActiveItemOnChange(event) {
    if (event.target === this.parentStepperEl ||
      event.composedPath().includes(this.parentStepperEl)) {
      this.activePosition = event.detail.position;
      this.determineActiveItem();
    }
  }
  renderIcon() {
    const path = this.active
      ? "circleF"
      : this.error
        ? "exclamationMarkCircleF"
        : this.complete
          ? "checkCircleF"
          : "circle";
    return h("calcite-icon", { class: "stepper-item-icon", icon: path, scale: "s" });
  }
  determineActiveItem() {
    this.active = !this.disabled && this.itemPosition === this.activePosition;
  }
  registerStepperItem() {
    this.calciteStepperItemRegister.emit({
      position: this.itemPosition,
      content: this.itemContent
    });
  }
  getItemPosition() {
    return Array.prototype.indexOf.call(this.parentStepperEl.querySelectorAll("calcite-stepper-item"), this.el);
  }
  static get is() { return "calcite-stepper-item"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["stepper-item.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["stepper-item.css"]
  }; }
  static get properties() { return {
    "active": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "is the step active"
      },
      "attribute": "active",
      "reflect": true,
      "defaultValue": "false"
    },
    "complete": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "has the step been completed"
      },
      "attribute": "complete",
      "reflect": true,
      "defaultValue": "false"
    },
    "error": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "does the step contain an error that needs to be resolved by the user"
      },
      "attribute": "error",
      "reflect": false,
      "defaultValue": "false"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "is the step disabled and not navigable to by a user"
      },
      "attribute": "disabled",
      "reflect": true,
      "defaultValue": "false"
    },
    "itemTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "pass a title for the stepper item"
      },
      "attribute": "item-title",
      "reflect": false
    },
    "itemSubtitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "pass a title for the stepper item"
      },
      "attribute": "item-subtitle",
      "reflect": false
    },
    "layout": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "name": "internal",
            "text": undefined
          }],
        "text": ""
      },
      "attribute": "layout",
      "reflect": true
    },
    "icon": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "internal",
            "text": undefined
          }],
        "text": ""
      },
      "attribute": "icon",
      "reflect": false,
      "defaultValue": "false"
    },
    "numbered": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "internal",
            "text": undefined
          }],
        "text": ""
      },
      "attribute": "numbered",
      "reflect": false,
      "defaultValue": "false"
    },
    "scale": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "Scale",
        "resolved": "\"l\" | \"m\" | \"s\"",
        "references": {
          "Scale": {
            "location": "import",
            "path": "../interfaces"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "internal",
            "text": undefined
          }],
        "text": ""
      },
      "attribute": "scale",
      "reflect": true,
      "defaultValue": "\"m\""
    }
  }; }
  static get events() { return [{
      "method": "calciteStepperItemKeyEvent",
      "name": "calciteStepperItemKeyEvent",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "internal",
            "text": undefined
          }],
        "text": ""
      },
      "complexType": {
        "original": "StepperItemKeyEventDetail",
        "resolved": "StepperItemKeyEventDetail",
        "references": {
          "StepperItemKeyEventDetail": {
            "location": "import",
            "path": "../stepper/interfaces"
          }
        }
      }
    }, {
      "method": "calciteStepperItemSelect",
      "name": "calciteStepperItemSelect",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "internal",
            "text": undefined
          }],
        "text": ""
      },
      "complexType": {
        "original": "StepperItemEventDetail",
        "resolved": "StepperItemEventDetail",
        "references": {
          "StepperItemEventDetail": {
            "location": "import",
            "path": "../stepper/interfaces"
          }
        }
      }
    }, {
      "method": "calciteStepperItemRegister",
      "name": "calciteStepperItemRegister",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "internal",
            "text": undefined
          }],
        "text": ""
      },
      "complexType": {
        "original": "StepperItemEventDetail",
        "resolved": "StepperItemEventDetail",
        "references": {
          "StepperItemEventDetail": {
            "location": "import",
            "path": "../stepper/interfaces"
          }
        }
      }
    }]; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "disabled",
      "methodName": "disabledWatcher"
    }]; }
  static get listeners() { return [{
      "name": "calciteStepperItemChange",
      "method": "updateActiveItemOnChange",
      "target": "body",
      "capture": false,
      "passive": false
    }]; }
}