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

Lime Elements

import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DBTJNfo7.js';
import { b as getIconColor } from './get-icon-props-CgNJbSP4.js';

const progressFlowCss = () => `:host{--limel-progress-flow-step-content:2;--limel-progress-flow-divider:1;--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");
        /**
         * What flow items to render
         */
        this.flowItems = [];
        /**
         * Set to `true` to disable the progress flow.
         * Use `disabled` to indicate that the component can normally be interacted
         * with, but is currently disabled. This tells the user that if certain
         * requirements are met, the field may become enabled again.
         */
        this.disabled = false;
        /**
         * Disables the progress flow when `true`.
         * This does not visualize the component that much differently.
         * But since the component does not provide any feedback that users can
         * interact with the component, it makes it perfect for illustrative and
         * informative porpuses.
         */
        this.readonly = false;
        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);
            }
        };
    }
    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 };