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

Stencil Component Starter

import { r as registerInstance, c as createEvent, h } from './index-0b720089.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 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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)))))));
  }
};
LabDsProgressIndicator.style = labDsProgressIndicatorCss;

export { LabDsProgressIndicator as lab_ds_progress_indicator };

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