@xlabs-store/core 0.0.1

package/dist/collection/components/x-steps/x-steps.js

@@ -0,0 +1,1032 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @component x-steps
+ * @description A navigation bar that guides users through the steps of a task.
+ *
+ * @slot - x-step children components
+ *
+ * @example
+ * <x-steps current={1}>
+ *   <x-step title="Finished" description="This is a description." />
+ *   <x-step title="In Progress" description="This is a description." />
+ *   <x-step title="Waiting" description="This is a description." />
+ * </x-steps>
+ */
+export class XSteps {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ==================== Props ====================
+    /**
+     * Current step index, counting from 0.
+     * @default 0
+     * @example
+     * <x-steps current={1}></x-steps>
+     */
+    current = 0;
+    /**
+     * Direction/orientation of the steps.
+     * @default 'horizontal'
+     * @example
+     * <x-steps direction="vertical"></x-steps>
+     */
+    direction = 'horizontal';
+    /**
+     * Initial step, counting from 0.
+     * @default 0
+     * @example
+     * <x-steps initial={1}></x-steps>
+     */
+    initial = 0;
+    /**
+     * Size of the steps.
+     * @default 'default'
+     * @example
+     * <x-steps size="small"></x-steps>
+     */
+    size = 'default';
+    /**
+     * Status of the current step.
+     * @default 'process'
+     * @example
+     * <x-steps status="error"></x-steps>
+     */
+    status = 'process';
+    /**
+     * Type/style of steps.
+     * @default 'default'
+     * @example
+     * <x-steps type="navigation"></x-steps>
+     */
+    type = 'default';
+    /**
+     * Title placement direction.
+     * @deprecated Use `labelPlacement` instead.
+     * @default 'horizontal'
+     * @example
+     * <x-steps titlePlacement="vertical"></x-steps>
+     */
+    titlePlacement = 'horizontal';
+    /**
+     * Label placement direction.
+     * @default 'horizontal'
+     * @example
+     * <x-steps labelPlacement="vertical"></x-steps>
+     */
+    labelPlacement = 'horizontal';
+    /**
+     * Style variant.
+     * @default 'filled'
+     * @example
+     * <x-steps variant="outlined"></x-steps>
+     */
+    variant = 'filled';
+    /**
+     * Progress percentage of current step (only works on default type).
+     * @example
+     * <x-steps percent={60}></x-steps>
+     */
+    percent;
+    /**
+     * Whether to use progress dot style.
+     * @default false
+     * @example
+     * <x-steps progressDot></x-steps>
+     */
+    progressDot = false;
+    /**
+     * Whether to be responsive (vertical when screen < 532px).
+     * @default true
+     * @example
+     * <x-steps responsive={false}></x-steps>
+     */
+    responsive = true;
+    /**
+     * Step items configuration (alternative to slots).
+     * @example
+     * <x-steps items={[{ title: 'Start' }, { title: 'End' }]}></x-steps>
+     */
+    items;
+    /**
+     * Custom class names for parts.
+     * @example
+     * <x-steps classNames={{ root: 'my-steps' }}></x-steps>
+     */
+    classNames;
+    /**
+     * Custom styles for parts.
+     * @example
+     * <x-steps styles={{ root: { marginTop: '8px' } }}></x-steps>
+     */
+    styles;
+    // ==================== Events ====================
+    /**
+     * Callback when step is changed (only when clickable).
+     * @example
+     * <x-steps onXChange={(ev) => console.log(ev.detail)}></x-steps>
+     */
+    xChange;
+    /**
+     * Callback when step is clicked.
+     * @example
+     * <x-steps onXStepClick={(ev) => console.log(ev.detail)}></x-steps>
+     */
+    xStepClick;
+    // ==================== State ====================
+    /**
+     * Internal direction that may change based on responsiveness.
+     */
+    internalDirection = 'horizontal';
+    // ==================== Lifecycle ====================
+    /**
+     * Initialize internal direction and responsive state.
+     * @returns void
+     */
+    componentWillLoad() {
+        this.internalDirection = this.direction;
+        this.checkResponsive();
+    }
+    /**
+     * Sync child steps and attach resize handler.
+     * @returns void
+     */
+    componentDidLoad() {
+        this.updateSteps();
+        if (this.responsive) {
+            window.addEventListener('resize', this.handleResize);
+        }
+    }
+    /**
+     * Remove resize handler on disconnect.
+     * @returns void
+     * @example
+     * <x-steps></x-steps>
+     */
+    disconnectedCallback() {
+        if (this.responsive) {
+            window.removeEventListener('resize', this.handleResize);
+        }
+    }
+    // ==================== Watchers ====================
+    /**
+     * Recompute step states when props change.
+     * @returns void
+     * @example
+     * <x-steps></x-steps>
+     */
+    handlePropsChange() {
+        this.updateSteps();
+    }
+    // ==================== Methods ====================
+    /**
+     * Go to next step.
+     * @returns Promise<void>
+     * @example
+     * await el.next()
+     */
+    async next() {
+        const totalSteps = this.getTotalSteps();
+        if (this.current < totalSteps - 1) {
+            const previous = this.current;
+            this.current = this.current + 1;
+            this.xChange.emit({ current: this.current, previous });
+        }
+    }
+    /**
+     * Go to previous step.
+     * @returns Promise<void>
+     * @example
+     * await el.prev()
+     */
+    async prev() {
+        if (this.current > 0) {
+            const previous = this.current;
+            this.current = this.current - 1;
+            this.xChange.emit({ current: this.current, previous });
+        }
+    }
+    /**
+     * Go to specific step.
+     * @param stepIndex - Step index.
+     * @returns Promise<void>
+     * @example
+     * await el.goTo(2)
+     */
+    async goTo(stepIndex) {
+        const totalSteps = this.getTotalSteps();
+        if (stepIndex >= 0 && stepIndex < totalSteps) {
+            const previous = this.current;
+            this.current = stepIndex;
+            this.xChange.emit({ current: this.current, previous });
+        }
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Handle window resize for responsive behavior.
+     * @returns void
+     * @example
+     * <x-steps responsive></x-steps>
+     */
+    handleResize = () => {
+        this.checkResponsive();
+    };
+    /**
+     * Update internal direction based on responsive rules.
+     * @returns void
+     * @example
+     * <x-steps responsive direction="horizontal"></x-steps>
+     */
+    checkResponsive() {
+        if (this.responsive && this.direction === 'horizontal') {
+            this.internalDirection = window.innerWidth < 532 ? 'vertical' : 'horizontal';
+        }
+        else {
+            this.internalDirection = this.direction;
+        }
+    }
+    /**
+     * Get total step count from items or slots.
+     * @returns number
+     * @example
+     * const count = this.getTotalSteps()
+     */
+    getTotalSteps() {
+        if (this.items && this.items.length > 0) {
+            return this.items.length;
+        }
+        return this.el.querySelectorAll('x-step').length;
+    }
+    /**
+     * Sync child steps with current state.
+     * @returns void
+     * @example
+     * <x-steps current={1}></x-steps>
+     */
+    updateSteps() {
+        const steps = Array.from(this.el.querySelectorAll('x-step'));
+        steps.forEach((step, index) => {
+            // Internal props (prefixed with _)
+            step._stepNumber = this.initial + index + 1;
+            step._stepIndex = index;
+            step._direction = this.internalDirection;
+            step._size = this.size;
+            step._type = this.type;
+            step._progressDot = this.progressDot || this.type === 'dot';
+            step._clickable = this.hasStepClickHandler();
+            // Pass percent to current step
+            if (index === this.current) {
+                step.percent = this.percent;
+            }
+            else {
+                step.percent = undefined;
+            }
+            // Determine status
+            if (index < this.current) {
+                step.status = 'finish';
+            }
+            else if (index === this.current) {
+                step.status = this.status;
+            }
+            else {
+                step.status = 'wait';
+            }
+        });
+    }
+    /**
+     * Determine if step click handling should be enabled.
+     * @returns boolean
+     * @example
+     * const clickable = this.hasStepClickHandler()
+     */
+    hasStepClickHandler() {
+        // Check if xChange has listeners
+        return true; // Always allow click, let the event handler decide
+    }
+    /**
+     * Handle step click and emit events.
+     * @param index - Step index.
+     * @param disabled - Disabled flag.
+     * @returns void
+     * @example
+     * <x-steps></x-steps>
+     */
+    handleStepClick = (index, disabled) => {
+        if (disabled)
+            return;
+        const previous = this.current;
+        this.current = index;
+        this.xStepClick.emit(index);
+        this.xChange.emit({ current: index, previous });
+    };
+    /**
+     * Get status for a given step index.
+     * @param index - Step index.
+     * @returns StepStatus
+     * @example
+     * const status = this.getStepStatus(1)
+     */
+    getStepStatus(index) {
+        if (index < this.current) {
+            return 'finish';
+        }
+        else if (index === this.current) {
+            return this.status;
+        }
+        return 'wait';
+    }
+    // ==================== Render ====================
+    /**
+     * Renders the steps based on the `items` prop configuration.
+     *
+     * Flow:
+     * 1. Checks if `items` array exists and has content.
+     * 2. Iterates through each item to create an `x-step` element.
+     * 3. Determines the status of each step (finish, process, wait) relative to `current`.
+     * 4. Passes all configuration props (title, subtitle, description, icon, disabled, etc.) to `x-step`.
+     * 5. Sets internal props (_stepNumber, _stepIndex, _direction, _size, etc.) for correct styling.
+     * 6. Attaches click handler to emit `xStepClick` and `xChange` events when a step is clicked.
+     *
+     * @returns JSX.Element[] | null - Array of x-step elements or null.
+     */
+    renderItems() {
+        if (!this.items || this.items.length === 0)
+            return null;
+        return this.items.map((item, index) => {
+            const status = item.status || this.getStepStatus(index);
+            // Determine progress percent
+            const percent = index === this.current ? this.percent : undefined;
+            return (h("x-step", { stepTitle: item.title, subTitle: item.subTitle, description: item.description, icon: item.icon, status: status, disabled: item.disabled, percent: percent,
+                // Internal props
+                _stepNumber: this.initial + index + 1, _stepIndex: index, _direction: this.internalDirection, _size: this.size, _type: this.type, _progressDot: this.progressDot || this.type === 'dot', _clickable: this.hasStepClickHandler(),
+                // Event needs to be handled? x-step emits xStepClick
+                // We can listen via standard prop or just let it bubble if we listen on parent?
+                // But x-step is in shadow root. xStepClick bubbles and composed: true.
+                // So we can listen on Host or just rely on bubbling.
+                // However, handleStepClick in 'updateSteps' logic sets up listeners on slotted items?
+                // No, updateSteps doesn't add listeners. It sets _clickable.
+                // The event 'xStepClick' is emitted by x-step. x-steps listens to it?
+                // x-steps has @Event xStepClick. This is outgoing.
+                // x-steps needs to listen to incoming 'xStepClick' from children.
+                // I need to add @Listen('xStepClick') in x-steps.tsx.
+                onClick: (e) => {
+                    // Stop propagation if needed, but we rely on custom event
+                    e.stopPropagation();
+                }, onXStepClick: (e) => {
+                    e.stopPropagation();
+                    this.handleStepClick(e.detail.index, item.disabled);
+                } }));
+        });
+    }
+    /**
+     * Main render method for the Steps component.
+     *
+     * Flow:
+     * 1. Determines if steps are rendered from `items` prop or slots.
+     * 2. Resolves label placement preference (supporting deprecated `titlePlacement`).
+     * 3. Constructs the class map for the host element based on:
+     *    - Direction (horizontal/vertical)
+     *    - Size (small/default)
+     *    - Type (default/navigation/dot)
+     *    - Variant (filled/outlined)
+     *    - Label placement
+     * 4. Renders the host with computed classes.
+     * 5. If `items` prop is present, calls `renderItems`.
+     * 6. Otherwise, renders a slot and listens for `slotchange` to sync step state.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        const hasItems = this.items && this.items.length > 0;
+        // Favor labelPlacement, fallback to titlePlacement if labelPlacement is default (this logic depends on usage, but here assume labelPlacement is primary)
+        // Actually, to support deprecated correctly: if titlePlacement is set (and not default), use it? 
+        // Simplified: use titlePlacement only if labelPlacement is 'horizontal' (default) and titlePlacement is NOT 'horizontal'.
+        const effectiveLabelPlacement = (this.labelPlacement === 'horizontal' && this.titlePlacement !== 'horizontal')
+            ? this.titlePlacement
+            : this.labelPlacement;
+        const classes = {
+            'x-steps': true,
+            [`x-steps-${this.internalDirection}`]: true,
+            [`x-steps-${this.size}`]: this.size !== 'default',
+            [`x-steps-${this.type}`]: this.type !== 'default',
+            [`x-steps-${this.variant}`]: true,
+            'x-steps-dot': this.progressDot || this.type === 'dot',
+            [`x-steps-label-${effectiveLabelPlacement}`]: this.internalDirection === 'horizontal',
+            [this.classNames?.root ?? '']: !!this.classNames?.root,
+        };
+        return (h(Host, { key: 'd8e38e332addd002b428fb4678a30a7757f21514', class: classes, style: this.styles?.root }, hasItems ? this.renderItems() : h("slot", { onSlotchange: () => this.updateSteps() })));
+    }
+    static get is() { return "x-steps"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-steps.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-steps.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "current": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0"
+                        }, {
+                            "name": "example",
+                            "text": "<x-steps current={1}></x-steps>"
+                        }],
+                    "text": "Current step index, counting from 0."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current",
+                "defaultValue": "0"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepsDirection",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "StepsDirection": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-steps/types.ts::StepsDirection",
+                            "referenceLocation": "StepsDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'horizontal'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-steps direction=\"vertical\"></x-steps>"
+                        }],
+                    "text": "Direction/orientation of the steps."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "initial": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0"
+                        }, {
+                            "name": "example",
+                            "text": "<x-steps initial={1}></x-steps>"
+                        }],
+                    "text": "Initial step, counting from 0."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial",
+                "defaultValue": "0"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepsSize",
+                    "resolved": "\"default\" | \"small\"",
+                    "references": {
+                        "StepsSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-steps/types.ts::StepsSize",
+                            "referenceLocation": "StepsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-steps size=\"small\"></x-steps>"
+                        }],
+                    "text": "Size of the steps."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepStatus",
+                    "resolved": "\"error\" | \"finish\" | \"process\" | \"wait\"",
+                    "references": {
+                        "StepStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-steps/types.ts::StepStatus",
+                            "referenceLocation": "StepStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'process'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-steps status=\"error\"></x-steps>"
+                        }],
+                    "text": "Status of the current step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'process'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepsType",
+                    "resolved": "\"default\" | \"dot\" | \"inline\" | \"navigation\" | \"panel\"",
+                    "references": {
+                        "StepsType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-steps/types.ts::StepsType",
+                            "referenceLocation": "StepsType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-steps type=\"navigation\"></x-steps>"
+                        }],
+                    "text": "Type/style of steps."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "titlePlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepsTitlePlacement",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "StepsTitlePlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-steps/types.ts::StepsTitlePlacement",
+                            "referenceLocation": "StepsTitlePlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `labelPlacement` instead."
+                        }, {
+                            "name": "default",
+                            "text": "'horizontal'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-steps titlePlacement=\"vertical\"></x-steps>"
+                        }],
+                    "text": "Title placement direction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-placement",
+                "defaultValue": "'horizontal'"
+            },
+            "labelPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepsTitlePlacement",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "StepsTitlePlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-steps/types.ts::StepsTitlePlacement",
+                            "referenceLocation": "StepsTitlePlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'horizontal'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-steps labelPlacement=\"vertical\"></x-steps>"
+                        }],
+                    "text": "Label placement direction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-placement",
+                "defaultValue": "'horizontal'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepsVariant",
+                    "resolved": "\"filled\" | \"outlined\"",
+                    "references": {
+                        "StepsVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-steps/types.ts::StepsVariant",
+                            "referenceLocation": "StepsVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'filled'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-steps variant=\"outlined\"></x-steps>"
+                        }],
+                    "text": "Style variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'filled'"
+            },
+            "percent": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-steps percent={60}></x-steps>"
+                        }],
+                    "text": "Progress percentage of current step (only works on default type)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "percent"
+            },
+            "progressDot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-steps progressDot></x-steps>"
+                        }],
+                    "text": "Whether to use progress dot style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress-dot",
+                "defaultValue": "false"
+            },
+            "responsive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }, {
+                            "name": "example",
+                            "text": "<x-steps responsive={false}></x-steps>"
+                        }],
+                    "text": "Whether to be responsive (vertical when screen < 532px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "responsive",
+                "defaultValue": "true"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepItem[]",
+                    "resolved": "StepItem[]",
+                    "references": {
+                        "StepItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-steps/types.ts::StepItem",
+                            "referenceLocation": "StepItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-steps items={[{ title: 'Start' }, { title: 'End' }]}></x-steps>"
+                        }],
+                    "text": "Step items configuration (alternative to slots)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepsClassNames",
+                    "resolved": "StepsClassNames",
+                    "references": {
+                        "StepsClassNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-steps/types.ts::StepsClassNames",
+                            "referenceLocation": "StepsClassNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-steps classNames={{ root: 'my-steps' }}></x-steps>"
+                        }],
+                    "text": "Custom class names for parts."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepsStyles",
+                    "resolved": "StepsStyles",
+                    "references": {
+                        "StepsStyles": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-steps/types.ts::StepsStyles",
+                            "referenceLocation": "StepsStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-steps styles={{ root: { marginTop: '8px' } }}></x-steps>"
+                        }],
+                    "text": "Custom styles for parts."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalDirection": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-steps onXChange={(ev) => console.log(ev.detail)}></x-steps>"
+                        }],
+                    "text": "Callback when step is changed (only when clickable)."
+                },
+                "complexType": {
+                    "original": "StepsChangeEventDetail",
+                    "resolved": "StepsChangeEventDetail",
+                    "references": {
+                        "StepsChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-steps/types.ts::StepsChangeEventDetail",
+                            "referenceLocation": "StepsChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xStepClick",
+                "name": "xStepClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-steps onXStepClick={(ev) => console.log(ev.detail)}></x-steps>"
+                        }],
+                    "text": "Callback when step is clicked."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "next": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to next step.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.next()"
+                        }]
+                }
+            },
+            "prev": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to previous step.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.prev()"
+                        }]
+                }
+            },
+            "goTo": {
+                "complexType": {
+                    "signature": "(stepIndex: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "stepIndex",
+                            "type": "number",
+                            "docs": "- Step index."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to specific step.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "stepIndex - Step index."
+                        }, {
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.goTo(2)"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "current",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "status",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "direction",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "type",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "size",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "progressDot",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "percent",
+                "methodName": "handlePropsChange"
+            }];
+    }
+}