import { IAnimatable } from '../../../Behaviors/Animatable'; import { SelectorItemElement } from '../Abstracts/Selector/SelectorItemElement'; import type { IStepperItemElementProps } from './IStepperItemElementProps'; import { StepperElement } from './StepperElement'; declare const StepperItemElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Animatable").IAnimatableProps & IAnimatable) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new () => SelectorItemElement>) & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Stepper Item - A single step panel within a Stepper workflow component. * * @description * The Stepper Item component represents an individual step within a multi-step workflow. It displays * the content for a specific step and includes properties for defining the step's header, description, * hint text, icon, and current state (pending, completed, error). The component supports animated * transitions when switching between steps and provides a footer slot for step-specific action buttons. * Each stepper item is managed by its parent stepper component for activation and navigation. * * @name Stepper Item * @element mosaik-stepper-item * @category Selectors * * @slot - The default slot for the main step content * @slot footer - Action buttons or navigation controls for this step * * @csspart content - The content area wrapper * @csspart footer - The footer container * @csspart panel - The main panel container * * @cssprop {String} --stepper-item-font-family - The font family for stepper item text * @cssprop {String} --stepper-item-font-letter-spacing - The item font letter spacing CSS custom property. * @cssprop {String} --stepper-item-font-line-height - The item font line height CSS custom property. * @cssprop {String} --stepper-item-font-size - The item font size CSS custom property. * @cssprop {String} --stepper-item-font-text-decoration - The item font text decoration CSS custom property. * @cssprop {String} --stepper-item-font-text-transform - The item font text transform CSS custom property. * @cssprop {String} --stepper-item-font-weight - The item font weight CSS custom property. * @cssprop {String} --stepper-item-gap - The spacing between content and footer * @cssprop {String} --stepper-item-padding-bottom - The item padding bottom CSS custom property. * @cssprop {String} --stepper-item-padding-left - The item padding left CSS custom property. * @cssprop {String} --stepper-item-padding-right - The item padding right CSS custom property. * @cssprop {String} --stepper-item-padding-top - The item padding top CSS custom property. * @cssprop {String} --stepper-item-panel-padding - The padding inside the panel * @cssprop {String} --stepper-item-panel-radius - The border radius of the panel * @cssprop {String} --stepper-item-panel-shadow - The drop shadow or elevation effect * @cssprop {String} --stepper-item-shadow - The item shadow CSS custom property. * @cssprop {String} --stepper-item-shadow-blur - The item shadow blur CSS custom property. * @cssprop {String} --stepper-item-shadow-color - The item shadow color CSS custom property. * @cssprop {String} --stepper-item-shadow-offset-x - The item shadow offset x CSS custom property. * @cssprop {String} --stepper-item-shadow-offset-y - The item shadow offset y CSS custom property. * @cssprop {String} --stepper-item-shadow-spread - The item shadow spread CSS custom property. * @cssprop {String} --stepper-item-transition-duration - The item transition duration CSS custom property. * @cssprop {String} --stepper-item-transition-mode - The item transition mode CSS custom property. * @cssprop {String} --stepper-item-transition-property - The item transition property CSS custom property. * @cssprop {String} --stepper-item-translate - The item translate CSS custom property. * * @fires connected {ConnectedEvent} - Fired when connected to the DOM * @fires changed {PropertyChangedEvent} - Fired when properties change * * @example * Basic stepper item: * ```html * * * * * * * ``` * * @example * Stepper item with description and footer: * ```html * *

Your information will be saved.

*
* Back * Confirm *
*
* ``` * * @example * Stepper item with state and hint: * ```html * *

Files uploaded successfully.

*
* ``` * * @public */ export declare class StepperItemElement extends StepperItemElement_base implements IStepperItemElementProps, IAnimatable { private readonly _inheritance; private _header; private _description; private _hint; private _icon; private _state; private _isActive; /** * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @override * @readonly */ static get is(): string; /** * @inheritdoc * When used inside a Stepper, inherits the stepper's disabled state unless explicitly set. * * @public * @override */ get disabled(): boolean; set disabled(value: boolean); /** * Gets or sets the `header` property. * * @public * @attr */ get header(): string; set header(value: string); /** * Gets or sets the `description` property. * * @public * @attr */ get description(): string; set description(value: string); /** * Gets or sets the `hint` property. * * @public * @attr */ get hint(): string; set hint(value: string); /** * Gets or sets the `icon` property. * * @public */ get icon(): string; set icon(value: string); /** * Gets or sets the `state` property. * * @public * @attr */ get state(): 'pending' | 'completed' | 'error'; set state(value: 'pending' | 'completed' | 'error'); /** * Gets or sets the `isActive` property. * * @public * @attr */ get isActive(): boolean; set isActive(value: boolean); /** * Get the item parent. * * @protected * @readonly */ get parent(): StepperElement; /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ disconnectedCallback(): void; /** * @protected */ protected onIsActivePropertyChanged(_prev: boolean, next: boolean): void; } /** * @public */ export declare namespace StepperItemElement { type Props = IStepperItemElementProps; } declare global { interface HTMLElementTagNameMap { 'mosaik-stepper-item': StepperItemElement; } } export {}; //# sourceMappingURL=StepperItemElement.d.ts.map