@limetech/lime-elements/dist/esm/limel-progress-flow.entry.js

Lime Elements

import { r as registerInstance, c as createEvent, h, g as getElement } from './index-2714248e.js';
import { a as getIconColor } from './get-icon-props-37514418.js';

const progressFlowCss = ":host{--step-height:2rem;--selected-indicator-right:-0.5rem;--max-text-width:10rem;isolation:isolate;box-sizing:border-box;width:100%;display:flex;flex-direction:row;align-items:flex-start;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0.25rem}:host::-webkit-scrollbar{display:none}:host(.is-narrow){--step-height:1.5rem;--selected-indicator-right:0}";

const ProgressFlow = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.change = createEvent(this, "change", 7);
    this.renderRegularFlowItem = (item, index, array) => {
      return (h("limel-progress-flow-item", { class: {
          'flow-item': true,
          first: index === 0,
          last: index === array.length - 1,
          passed: index < this.selectedItemIndex,
          selected: item.selected,
        }, style: this.getItemStyle(item), disabled: this.disabled || this.readonly, readonly: this.readonly, item: item, onInteract: this.handleFlowItemClick(item), "data-tracking-value": item.value, currentStep: index === this.selectedItemIndex }));
    };
    this.renderEndPhaseItem = (item, index, array) => {
      return (h("limel-progress-flow-item", { class: {
          'flow-item': true,
          'off-progress-item': true,
          selected: item.selected,
          'first-off-progress-item': index === 0,
          'last-off-progress-item': index === array.length - 1,
        }, style: this.getItemStyle(item), disabled: this.disabled || this.readonly, readonly: this.readonly, item: item, onInteract: this.handleFlowItemClick(item), "data-tracking-value": item.value }));
    };
    this.handleFlowItemClick = (flowItem) => () => {
      if (!flowItem.selected && !flowItem.disabled && !this.disabled) {
        this.change.emit(flowItem);
      }
    };
    this.flowItems = [];
    this.disabled = false;
    this.readonly = false;
  }
  componentDidRender() {
    this.scrollToSelectedItem();
  }
  componentDidLoad() {
    this.triggerIconColorWarning();
  }
  render() {
    const regularFlowItems = this.flowItems.filter((item) => {
      return !item.isOffProgress;
    });
    const endPhaseItems = this.flowItems.filter((item) => {
      return item.isOffProgress;
    });
    this.selectedItemIndex = regularFlowItems.findIndex((item) => {
      return item.selected;
    });
    return [
      regularFlowItems.map(this.renderRegularFlowItem),
      endPhaseItems.map(this.renderEndPhaseItem),
    ];
  }
  getItemStyle(flowItem) {
    const color = getIconColor(flowItem.icon, flowItem.iconColor);
    const style = {};
    if (flowItem === null || flowItem === void 0 ? void 0 : flowItem.selectedColor) {
      style['--progress-flow-step-background-color--selected'] =
        flowItem.selectedColor;
    }
    if (flowItem === null || flowItem === void 0 ? void 0 : flowItem.passedColor) {
      style['--progress-flow-step-background-color--passed'] =
        flowItem.passedColor;
    }
    if (color) {
      style['--progress-flow-icon-color--inactive'] = color;
    }
    return style;
  }
  scrollToSelectedItem() {
    const selectedElement = this.getElementForSelectedItem();
    if (selectedElement) {
      const selectedItemLeftPosition = selectedElement.offsetLeft - this.element.offsetLeft;
      const selectedElementLeftPositionCentered = selectedItemLeftPosition - this.element.offsetWidth / 2;
      const selectedElementCentered = selectedElementLeftPositionCentered +
        selectedElement.offsetWidth / 2;
      this.element.scrollTo({
        behavior: 'smooth',
        left: selectedElementCentered,
      });
    }
  }
  getElementForSelectedItem() {
    return this.element.shadowRoot.querySelector('.flow-item.selected');
  }
  triggerIconColorWarning() {
    for (const flowItem of this.flowItems) {
      if (flowItem.iconColor) {
        console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.");
      }
    }
  }
  get element() { return getElement(this); }
};
ProgressFlow.style = progressFlowCss;

export { ProgressFlow as limel_progress_flow };

//# sourceMappingURL=limel-progress-flow.entry.js.map