@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/types/components/segmented-control/segmented-control.d.ts

@@ -0,0 +1,40 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class SegmentedControl {
+    el: HTMLIfxSegmentedControlElement;
+    private initialValue;
+    internals: ElementInternals;
+    /** Fired when the selected segment changes (previous and new value). */
+    ifxChange: EventEmitter<{
+        previousValue: string;
+        selectedValue: string;
+    }>;
+    /** Helper text shown below the segmented control. */
+    readonly caption: string;
+    /** Label text shown above the segmented control. */
+    readonly label: string;
+    /** Size of the segmented control (regular or small). */
+    readonly size: "regular" | "small";
+    /** Whether choosing a value is required. */
+    readonly required: boolean;
+    /** If true, shows the segmented control in an error state. */
+    readonly error: boolean;
+    /** Value of the currently selected segment. */
+    value: string;
+    /** Name used for the segmented control when submitting a form. */
+    readonly name: string;
+    onValueChange(value: string): void;
+    onRequiredChange(): void;
+    onSegmentSelect(event: CustomEvent): void;
+    private unselectPreviousSegment;
+    private getSegments;
+    private syncSelectedSegment;
+    private setActiveSegment;
+    private updateFormValue;
+    private selectValue;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | null, _mode: "restore" | "autocomplete"): void;
+    private setSegmentSize;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+    componentDidRender(): void;
+}

package/dist/types/components/select/multi-select/interfaces.d.ts

@@ -0,0 +1,9 @@
+export interface Option {
+    value: string;
+    selected?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    children?: Option[];
+    checkboxRef?: HTMLIfxCheckboxElement;
+    label?: string;
+}

package/dist/types/components/select/multi-select/multiselect-group.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Visually and semantically groups multiselect options under a heading.
+ * Unlike a multiselect option with children, a group is not selectable or expandable.
+ */
+export declare class MultiselectGroup {
+    el: HTMLIfxMultiselectGroupElement;
+    /** Label displayed above the group's options. */
+    readonly label: string;
+    /** Whether the group is disabled. */
+    readonly disabled: boolean;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    updateDescendantDisabledState(): void;
+    render(): any;
+}

package/dist/types/components/select/multi-select/multiselect-option.d.ts

@@ -0,0 +1,43 @@
+export declare class MultiselectOption {
+    el: HTMLIfxMultiselectOptionElement;
+    /** Value associated with this tree item (used for selection and events). */
+    readonly value: string;
+    /** Whether this tree item is currently selected. */
+    selected: boolean;
+    /** Whether this tree item is disabled and not interactive. */
+    disabled: boolean;
+    /** Whether this tree item is in an indeterminate (partially selected) state. */
+    indeterminate: boolean;
+    private isExpanded;
+    private hasChildren;
+    private depth;
+    private searchTerm;
+    private isSearchActive;
+    private isSearchDisabled;
+    private disabledByGroup;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleGroupDisabledChange;
+    private isEffectivelyDisabled;
+    private handleSearchFilter;
+    private updateSearchClasses;
+    private highlightSearchTerm;
+    private removeHighlighting;
+    private getTextContent;
+    private hasMatchingChildren;
+    private hasMatchingParent;
+    private calculateDepth;
+    handleClick(event: Event): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    private notifyMultiselect;
+    private selectAllChildren;
+    private expandAllChildren;
+    private updateParentStates;
+    private toggleExpansion;
+    private handleCheckboxClick;
+    private handleHeaderClick;
+    private hasAnySelectedChildren;
+    private checkForSelectedDescendants;
+    render(): any;
+}

package/dist/types/components/select/multi-select/multiselect.d.ts

@@ -0,0 +1,123 @@
+import { type EventEmitter } from "../../../stencil-public-runtime";
+import type { Option } from "./interfaces";
+export declare class Multiselect {
+    /** Name of the multi-select field (used in forms). */
+    readonly name: string;
+    /** If true, the multi-select is disabled and not interactive. */
+    readonly disabled: boolean;
+    /** If true, the multi-select is read-only. */
+    readonly readOnly: boolean;
+    /** Whether at least one option must be selected. */
+    readonly required: boolean;
+    /** If true, shows the multi-select in an error state. */
+    readonly error: boolean;
+    /** Helper text shown below the multi-select. */
+    readonly caption: string;
+    /** Label shown above the multi-select. */
+    readonly label: string;
+    /** Placeholder text shown when nothing is selected. */
+    readonly placeholder: string;
+    /** If true, shows a search box inside the dropdown. */
+    readonly showSearch: boolean;
+    /** If true, shows a “Select all” option. */
+    readonly showSelectAll: boolean;
+    /** If true, shows a button to clear all selections. */
+    readonly showClearButton: boolean;
+    /** If true, shows expand/collapse controls for nested options. */
+    readonly showExpandCollapse: boolean;
+    /** Message shown when no search results are found. */
+    readonly noResultsMessage: string;
+    /** If true, displays the “no results” message when nothing matches. */
+    readonly showNoResultsMessage: boolean;
+    /** Placeholder text for the search input. */
+    readonly searchPlaceholder: string;
+    /** Label text for the “Select all” option. */
+    readonly selectAllLabel: string;
+    /** Label text for the “Expand all” action. */
+    readonly expandLabel: string;
+    /** Label text for the “Collapse all” action. */
+    readonly collapseLabel: string;
+    /** ARIA label for the multi-select dropdown. */
+    readonly ariaMultiSelectLabel: string;
+    /** ID of element that labels the multi-select (aria-labelledby). */
+    readonly ariaMultiSelectLabelledBy: string;
+    /** ID of element that describes the multi-select (aria-describedby). */
+    readonly ariaMultiSelectDescribedBy: string;
+    /** ARIA label for the search input inside the dropdown. */
+    readonly ariaSearchLabel: string;
+    /** ARIA label for the “Clear all” button. */
+    readonly ariaClearLabel: string;
+    /** ARIA label for the dropdown toggle button. */
+    readonly ariaToggleLabel: string;
+    /** ARIA label for the “Select all options” control. */
+    readonly ariaSelectAllLabel: string;
+    /** ARIA label for the “Expand all categories” control. */
+    readonly ariaExpandAllLabel: string;
+    /** ARIA label for the “Collapse all categories” control. */
+    readonly ariaCollapseAllLabel: string;
+    internalError: boolean;
+    persistentSelectedOptions: Option[];
+    dropdownOpen: boolean;
+    dropdownFlipped: boolean;
+    searchTerm: string;
+    visibleSelectedCount: number;
+    /** Fired when an option is selected in the multi-select. */
+    ifxSelect: EventEmitter;
+    /** Fired when the multi-select dropdown is opened. */
+    ifxOpen: EventEmitter;
+    /**
+     * Fired before selections are cleared.
+     * Call `event.preventDefault()` to cancel clearing.
+     */
+    ifxClear: EventEmitter<void>;
+    el: HTMLIfxMultiselectElement;
+    private dropdownElement;
+    private resizeObserver?;
+    private measurementScheduled;
+    internals: ElementInternals;
+    private getAllOptionElements;
+    private getGroupElements;
+    private isOptionVisible;
+    private updateGroupVisibility;
+    private getRootOptionElements;
+    private getLeafOptionElements;
+    private getEnabledLeafOptionElements;
+    private parseChildOptions;
+    private parseOptionElement;
+    private loadInitialOptions;
+    private collectSelectedOptions;
+    private collectLeafOptions;
+    private handleSearch;
+    private handleSearchFocus;
+    private positionDropdown;
+    private updateSlotBasedSelections;
+    private updateInitialParentStates;
+    private updateParentState;
+    componentDidLoad(): Promise<void>;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    updateInternalError(): void;
+    onSelectionChange(newValue: Option[], _: Option[]): void;
+    private collapseAll;
+    private expandAll;
+    private selectAll;
+    /** Clears all selected options in the multi-select and resets their state. */
+    clearSelection(): Promise<void>;
+    private handleDocumentClick;
+    private toggleDropdown;
+    private resetSearch;
+    private clearEnabledSelection;
+    private handleWrapperClick;
+    private handleClearButtonClick;
+    private handleKeyDown;
+    private focusFirstOption;
+    private renderSelectAll;
+    private renderNoResultsMessage;
+    private removeSelection;
+    private measureSelectedOptions;
+    private scheduleSelectedOptionsMeasurement;
+    private renderSelectedOptions;
+    private renderSelectedOptionsMeasurement;
+    render(): any;
+}

package/dist/types/components/select/single-select/select-group.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A non-selectable, greyed group header (like HTML `<optgroup>`) that labels a set
+ * of slotted `ifx-select-option`s. Flat — no expand/collapse. Setting `disabled`
+ * disables every option in the group.
+ */
+export declare class SelectGroup {
+    el: HTMLIfxSelectGroupElement;
+    /** The group heading text. */
+    readonly label: string;
+    /** Disables every option within the group (like `<optgroup disabled>`). */
+    readonly disabled: boolean;
+    componentDidLoad(): void;
+    disabledChanged(): void;
+    /** When the group is disabled, disable all of its options. */
+    private applyDisabledToOptions;
+    render(): any;
+}

package/dist/types/components/select/single-select/select-option.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A single selectable option inside an `ifx-select`. Provided as a slotted child
+ * (optionally wrapped in an `ifx-select-group`). Mirrors the multi-select option
+ * pattern but simplified for single selection — no checkbox, nesting or chevron.
+ */
+export declare class SelectOption {
+    el: HTMLIfxSelectOptionElement;
+    /** Value associated with this option (used for selection and events). */
+    readonly value: string;
+    /** Whether this option is currently selected. */
+    selected: boolean;
+    /** Whether this option is disabled and not interactive. */
+    disabled: boolean;
+    private searchTerm;
+    private isSearchActive;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleClick(event: Event): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    selectedChanged(newVal: boolean): void;
+    private select;
+    /** Bubbles a lifecycle/selection notification to the parent `ifx-select`. */
+    private notifySelect;
+    /** Plain-text label from the slotted content (used for value display + search). */
+    private getTextContent;
+    private handleSearchFilter;
+    private updateSearchClasses;
+    private highlightSearchTerm;
+    private removeHighlighting;
+    render(): any;
+}

package/dist/types/components/select/single-select/select.d.ts

@@ -0,0 +1,129 @@
+import { type EventEmitter } from "../../../stencil-public-runtime";
+/** Payload emitted by `ifxSelect` when the selection changes. */
+export interface SelectChangeDetail {
+    value: string;
+    label: string;
+}
+/**
+ * A single-select dropdown. Options are provided as slotted `ifx-select-option`
+ * children, optionally grouped with `ifx-select-group` (flat optgroup). Native,
+ * slot-based architecture mirroring `ifx-multiselect`.
+ */
+export declare class Select {
+    el: HTMLIfxSelectElement;
+    /** Label shown above the select. */
+    readonly label: string;
+    /** Helper text shown below the select. */
+    readonly caption: string;
+    /** Size of the select field: `'s'` (36px) or `'m'` (40px). */
+    readonly size: "s" | "m";
+    /** If true, the select is disabled and not interactive. */
+    readonly disabled: boolean;
+    /** If true, shows the select in an error state. */
+    readonly error: boolean;
+    /** If true, the select is read-only. */
+    readonly readOnly: boolean;
+    /** Whether a selection is required (marks the label with `*`). */
+    readonly required: boolean;
+    /** If false, hides the placeholder text when nothing is selected. */
+    readonly placeholder: boolean;
+    /** Placeholder text shown when nothing is selected. */
+    readonly placeholderValue: string;
+    /** If true, shows a search box inside the dropdown. */
+    readonly showSearch: boolean;
+    /** Placeholder text for the search input. */
+    readonly searchPlaceholderValue: string;
+    /** If true, shows a button to clear the current selection. */
+    readonly showClearButton: boolean;
+    /** Name of the select field (used in forms). */
+    readonly name?: string;
+    /** The selected option value (source of truth). */
+    value?: string;
+    /** Message shown when a search yields no results. */
+    readonly noResultsMessage: string;
+    /** ARIA label for the combobox. */
+    readonly ariaSelectLabel: string;
+    /** ARIA label for the search input. */
+    readonly ariaSearchLabel: string;
+    /** ARIA label for the clear button. */
+    readonly ariaClearLabel: string;
+    /**
+     * ID of an external element that labels the select (`aria-labelledby`). Takes
+     * precedence over the visible label and `ariaSelectLabel`.
+     */
+    readonly ariaSelectLabelledBy: string;
+    /**
+     * ID of an external element that describes the select (`aria-describedby`). Takes
+     * precedence over the caption.
+     */
+    readonly ariaSelectDescribedBy: string;
+    /**
+     * @deprecated Removed. Provide options as slotted `<ifx-select-option>` children
+     * (optionally grouped with `<ifx-select-group>`) instead of an options array.
+     */
+    readonly options: unknown;
+    selectedLabel: string;
+    dropdownOpen: boolean;
+    dropdownFlipped: boolean;
+    searchTerm: string;
+    internalError: boolean;
+    /** Fired when the selection changes. Emits `{ value, label }`, or `null` on clear. */
+    ifxSelect: EventEmitter<SelectChangeDetail | null>;
+    /**
+     * Fired before the clear control removes the current selection.
+     * Call `event.preventDefault()` to cancel clearing.
+     */
+    ifxClear: EventEmitter<void>;
+    /** Fired when the search input value changes. */
+    ifxInput: EventEmitter<string>;
+    /** Fired when the dropdown opens (`true`) or closes (`false`). */
+    ifxOpen: EventEmitter<boolean>;
+    internals: ElementInternals;
+    private dropdownElement;
+    private focusedIndex;
+    private labelId;
+    private captionId;
+    private listboxId;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    disconnectedCallback(): void;
+    updateInternalError(): void;
+    valueChanged(): void;
+    optionsChanged(): void;
+    private warnOptionsDeprecated;
+    /** Public API — clears the selection. */
+    clearSelection(): Promise<void>;
+    private handleClearButtonClick;
+    /** Public API — returns the currently selected value. */
+    getValue(): Promise<string | undefined>;
+    /** Public API — programmatically sets the selected value. */
+    setValue(value: string): Promise<void>;
+    /** Public API — opens the dropdown. */
+    showDropdown(): Promise<void>;
+    /** Public API — closes the dropdown. */
+    hideDropdown(): Promise<void>;
+    private getOptionElements;
+    private handleOptionChanged;
+    private syncInitialSelection;
+    private commitSelection;
+    /** Reflects `value` onto the option elements and derives the display label. */
+    private applyValueToOptions;
+    private hasValue;
+    private openDropdown;
+    private closeDropdown;
+    private toggleDropdown;
+    private handleDocumentClick;
+    private positionDropdown;
+    private focusWrapper;
+    private handleSearch;
+    private updateSearchVisibility;
+    private isOptionVisible;
+    private resetSearch;
+    private isOptionHidden;
+    private getNavigableOptions;
+    private focusOptionAt;
+    handleKeyDown(event: KeyboardEvent): void;
+    private handleWrapperClick;
+    private interactionsDisabled;
+    render(): any;
+}

package/dist/types/components/slider/slider.d.ts

@@ -0,0 +1,76 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class IfxSlider {
+    /** Minimum value allowed for the slider. */
+    readonly min: number;
+    /** Maximum value allowed for the slider. */
+    readonly max: number;
+    /** Increment step when changing the value. */
+    readonly step: number;
+    /** Current value for a single-handle slider. */
+    value: number;
+    /** Initial value of the left handle for a double slider. */
+    readonly minValueHandle: number;
+    /** Initial value of the right handle for a double slider. */
+    readonly maxValueHandle: number;
+    /** If true, the slider is disabled and not interactive. */
+    readonly disabled: boolean;
+    /** If true, the slider is read-only. */
+    readonly readOnly: boolean;
+    /** If true, shows the current value as a percentage. */
+    readonly showPercentage: boolean;
+    /** Optional icon displayed on the left side of the slider. */
+    readonly leftIcon: string;
+    /** Optional icon displayed on the right side of the slider. */
+    readonly rightIcon: string;
+    /** Optional text label shown on the left side of the slider. */
+    readonly leftText: string;
+    /** Optional text label shown on the right side of the slider. */
+    readonly rightText: string;
+    /** Slider type: single handle or double handle (range). */
+    readonly type: "single" | "double";
+    /** Accessible label for screen readers. */
+    readonly ariaLabelText: string | null;
+    /** Optional name used when submitting the slider in a form. */
+    readonly name: string;
+    internalValue: number;
+    percentage: number;
+    internalMinValue: number;
+    internalMaxValue: number;
+    /** Fired when the slider value (or values) change. */
+    ifxChange: EventEmitter;
+    el: HTMLIfxSliderElement;
+    internals: ElementInternals;
+    private inputRef;
+    private minInputRef;
+    private maxInputRef;
+    private hasInitializedSingleValue;
+    private initialInternalValue;
+    private initialInternalMinValue;
+    private initialInternalMaxValue;
+    private getSafeMin;
+    private getSafeMax;
+    private normalizeSingleValue;
+    private getSynchronizedSingleValue;
+    valueChanged(newValue: number): void;
+    minValueChanged(newValue: number): void;
+    maxValueChanged(newValue: number): void;
+    minChanged(): void;
+    maxChanged(): void;
+    private reconcileBoundsChange;
+    stepChanged(): void;
+    private updateFormValue;
+    private getRangeSliderWrapper;
+    private handleInputChangeOfRangeSlider;
+    private handleOnMouseLeaveOfRangeSlider;
+    private calculatePercentageValue;
+    private handleInputChange;
+    private roundToValidStep;
+    private updateValuePercent;
+    private updateZIndexIfRangeSlider;
+    componentWillLoad(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | null, _mode: "restore" | "autocomplete"): void;
+    private syncSingleValueState;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/spinner/spinner.d.ts

@@ -0,0 +1,27 @@
+export declare class Spinner {
+    el: HTMLIfxSpinnerElement;
+    /**
+     * Visual size of the spinner.
+     * @default "m"
+     */
+    readonly size: "s" | "m";
+    /**
+     * Spinner style variant.
+     * @default "default"
+     */
+    readonly variant: "default" | "brand";
+    /**
+     * Renders the spinner in inverted color for dark backgrounds.
+     * @default false
+     */
+    readonly inverted: boolean;
+    /**
+     * Accessible label announced by assistive technologies.
+     * @default null
+     */
+    readonly ariaLabelText: string | null;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+    private getSizeClass;
+    private getClassNames;
+}

package/dist/types/components/status/status.d.ts

@@ -0,0 +1,11 @@
+export declare class Status {
+    el: HTMLIfxStatusElement;
+    /** Text label displayed inside the status component. */
+    readonly label: string;
+    /** If true, shows a border around the status. */
+    readonly border: boolean;
+    /** Color token used for the status (e.g. orange-500). */
+    readonly color: string;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/stepper/interfaces.d.ts

@@ -0,0 +1,7 @@
+export interface StepperState {
+    activeStep: number;
+    indicatorPosition: "left" | "right";
+    showStepNumber: boolean;
+    variant: "default" | "compact" | "vertical";
+    setActiveStep?(stepId: number, setByClick: boolean): null;
+}

package/dist/types/components/stepper/step/step.d.ts

@@ -0,0 +1,24 @@
+import type { StepperState } from "../interfaces";
+export declare class Step {
+    /** If true, marks this step as completed. */
+    readonly complete?: boolean;
+    /** If true, this step is disabled and not clickable. */
+    readonly disabled?: boolean;
+    /** If true, this step is in an error state. */
+    error?: boolean;
+    /** Whether this is the last step in the stepper. */
+    readonly lastStep: boolean;
+    /** Numeric identifier / position of this step. */
+    readonly stepId: number;
+    /** Shared configuration for the whole stepper (active step, layout, etc.). */
+    readonly stepperState: StepperState;
+    active: boolean;
+    clickable: boolean;
+    onStepChange(event: CustomEvent): void;
+    updateCurrentStep(newStepperState: any): void;
+    updateErrorState(): void;
+    private handleStepClick;
+    private handleStepKeyDown;
+    private stopOnClickPropogation;
+    render(): any;
+}

package/dist/types/components/stepper/stepper.d.ts

@@ -0,0 +1,35 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class Stepper {
+    el: HTMLIfxStepperElement;
+    /** Fired when the active step changes. */
+    ifxChange: EventEmitter;
+    /** Currently active step in the stepper. */
+    activeStep: number;
+    /** Position of the indicator relative to the step content. */
+    readonly indicatorPosition?: "left" | "right";
+    /** If true, displays step numbers inside the indicators. */
+    readonly showStepNumber?: boolean;
+    /** Visual layout variant of the stepper (default, compact, or vertical). */
+    readonly variant?: "default" | "compact" | "vertical";
+    /** Accessible label for the stepper region. */
+    readonly ariaLabelText: string | null;
+    /** ARIA current value for the active step (e.g. 'step' or 'page'). */
+    readonly ariaCurrentText: string | null;
+    stepsCount: number;
+    shouldEmitEvent: boolean;
+    emittedByClick: boolean;
+    onStepChange(event: CustomEvent): void;
+    handleActiveStep(newStep: number, oldStep: number): void;
+    private emitIfxChange;
+    private getSteps;
+    private addStepIdsToStepsAndCountSteps;
+    private setActiveStep;
+    private setStepsBeforeActiveToComplete;
+    private syncIfxSteps;
+    private setInitialActiveStep;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    componentWillUpdate(): void;
+    render(): any;
+    componentDidRender(): void;
+}