v4web-components/dist/components/lab-ds-progress-indicator.js

Stencil Component Starter

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './lab-ds-icon-not-selectable2.js';

const labDsProgressIndicatorCss = ".v4-progress-indicator{display:flex;justify-content:space-between;align-items:flex-start}.progress-indicator{display:flex;width:100%;outline:none;flex-direction:column;cursor:pointer;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.last.progress-indicator{width:fit-content}.progress-bar-container{display:flex;align-items:center}.progress-bar-icon{display:flex;justify-content:center;align-items:center;border-style:solid;z-index:1;border-radius:var(--lab-ds-semantic-container-border-radius-pill);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);color:var(--lab-ds-semantic-color-fg-default)}.medium .progress-bar-icon{padding:var(--lab-ds-semantic-selectable-space-padding-xxs)}.icon{color:var(--lab-ds-semantic-color-fg-default)}.icon-check{display:none;color:var(--lab-ds-semantic-color-fg-default)}.dot-icon{opacity:0;width:var(--lab-ds-semantic-selectable-size-xs);height:var(--lab-ds-semantic-selectable-size-xs);margin:var(--lab-ds-semantic-selectable-space-padding-xs);background-color:var(--lab-ds-semantic-selectable-color-primary-default);border-radius:var(--lab-ds-semantic-container-border-radius-pill)}.progress-bar-body{height:var(--lab-ds-semantic-selectable-size-xxs);width:100%;z-index:0;margin-inline:-1px;border-style:solid;background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-width:var(--lab-ds-semantic-selectable-border-width-s);border-color:var(--lab-ds-semantic-selectable-color-border-default);border-left-width:0;border-right-width:0}.progress-title-description{display:flex;flex-direction:column;width:fit-content;text-align:left;color:var(--lab-ds-semantic-color-fg-default);gap:var(--lab-ds-semantic-selectable-space-gap-s);white-space:nowrap}.progress-title{font:var(--lab-ds-semantic-typography-heading-h6)}.progress-description{font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold)}.inactive.progress-indicator{cursor:not-allowed;opacity:var(--lab-ds-core-opacity-80)}.inactive .progress-title-description{color:var(--lab-ds-semantic-color-fg-disabled)}.inactive .progress-bar-icon{border-color:var(--lab-ds-semantic-selectable-color-border-disabled);background-color:var(--lab-ds-semantic-selectable-color-bg-disabled)}.inactive .progress-bar-body{border-color:var(--lab-ds-semantic-selectable-color-border-disabled);background-color:var(--lab-ds-semantic-selectable-color-bg-disabled)}.inactive .icon{color:var(--lab-ds-semantic-color-fg-contrast-primary)}.in-progress .dot-icon{opacity:1;transition-duration:300ms;transition-delay:700ms;transition-property:opacity}.in-progress .progress-bar-icon{border-color:var(--lab-ds-semantic-selectable-color-primary-default)}.in-progress .icon{color:var(--lab-ds-semantic-selectable-color-primary-default)}.completed .dot-icon{display:none}.completed .progress-bar-icon{border-color:var(--lab-ds-semantic-selectable-color-primary-default);background-color:var(--lab-ds-semantic-selectable-color-primary-default)}.completed .icon-check{display:flex}.completed .progress-bar-body{border-color:var(--lab-ds-semantic-selectable-color-primary-default)}.completed .progress-bar-body-completed{width:100%;height:100%;background-color:var(--lab-ds-semantic-selectable-color-primary-default);animation:completed-progress 700ms reverse}@keyframes completed-progress{0%{width:100%}100%{width:0%}}.medium .progress-indicator:hover:not(.inactive) .progress-title-description{color:var(--lab-ds-semantic-selectable-color-primary-hover);transition:color 100ms ease-in-out}.medium .progress-indicator:hover:not(.inactive) .progress-title{font:var(--lab-ds-component-button-typography-underlined-large);text-decoration:var(--lab-ds-core-font-decoration-01);transition:font 300ms ease-in-out}.progress-indicator:hover:not(.inactive) .progress-bar-icon{border-color:var(--lab-ds-semantic-selectable-color-primary-default)}.medium .progress-indicator:focus:not(.inactive) .progress-title-description{outline-style:solid;outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);color:var(--lab-ds-semantic-selectable-color-primary-hover);outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-width:var(--lab-ds-semantic-selectable-border-width-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-xxs);transition:all 100ms ease-in-out}.medium .progress-indicator:focus:not(.inactive) .progress-title{font:var(--lab-ds-component-button-typography-underlined-large);text-decoration:var(--lab-ds-core-font-decoration-01)}.small .progress-bar-icon{border-width:var(--lab-ds-semantic-selectable-border-width-s)}.small .dot-icon{width:var(--lab-ds-semantic-selectable-size-xxs);height:var(--lab-ds-semantic-selectable-size-xxs)}.small .icon{padding:var(--lab-ds-semantic-selectable-space-padding-xxs)}.small .icon-check{padding:var(--lab-ds-semantic-selectable-space-padding-xxs)}.small .progress-bar-body{height:6px;border-width:var(--lab-ds-semantic-selectable-border-width-s);border-left-width:0;border-right-width:0}.small .progress-title{font:var(--lab-ds-semantic-typography-heading-h7)}.small .progress-description{font:var(--lab-ds-semantic-typography-body-none-decoration-p4-bold)}";

const LabDsProgressIndicator$1 = /*@__PURE__*/ proxyCustomElement(class LabDsProgressIndicator extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.handleStepChange = createEvent(this, "handleStepChange", 7);
    this.options = undefined;
    this.step = undefined;
    this.size = 'medium';
  }
  handleClick(option) {
    if (option.inactive) {
      return;
    }
    option.event();
    this.handleStepChange.emit(option.step);
  }
  setStateIndicator(option) {
    return `${option.inactive ? 'inactive' : ''} ${option.step < this.step ? 'completed' : ''} ${option.step === this.step ? 'in-progress' : ''} ${option.step > this.step ? 'active' : ''}`;
  }
  render() {
    var _a;
    return (h("div", { class: `v4-progress-indicator ${this.size}` }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map((option, index) => (h("div", { key: index, onClick: () => {
        this.handleClick(option);
      }, tabIndex: index + 1, class: `progress-indicator ${this.setStateIndicator(option)} ${index === this.options.length - 1 ? 'last' : ''}` }, h("div", { class: `progress-bar-container` }, h("div", { class: `progress-bar-icon` }, option.icon ? (h("lab-ds-icon-not-selectable", { class: "icon", icon: option.icon, size: `${this.size === 'medium' ? 's-medium' : 'x-small'}` })) : (h("div", null, h("div", { class: "dot-icon" }), h("lab-ds-icon-not-selectable", { class: "icon-check", icon: "done", size: `${this.size === 'medium' ? 's-medium' : 'x-small'}` })))), index < this.options.length - 1 && (h("div", { class: "progress-bar-body" }, h("div", { class: "progress-bar-body-completed" })))), h("div", { class: "progress-title-description" }, h("div", { class: "progress-title" }, option.title), h("div", { class: "progress-description" }, option.description)))))));
  }
  static get style() { return labDsProgressIndicatorCss; }
}, [1, "lab-ds-progress-indicator", {
    "options": [16],
    "step": [2],
    "size": [1]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-progress-indicator", "lab-ds-icon-not-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-progress-indicator":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsProgressIndicator$1);
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const LabDsProgressIndicator = LabDsProgressIndicator$1;
const defineCustomElement = defineCustomElement$1;

export { LabDsProgressIndicator, defineCustomElement };

//# sourceMappingURL=lab-ds-progress-indicator.js.map