@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/types/components/navigation/sidebar/sidebar-item.d.ts

@@ -0,0 +1,65 @@
+import { type EventEmitter } from "../../../stencil-public-runtime";
+export declare class SidebarItem {
+    el: HTMLIfxSidebarItemElement;
+    /** Icon name or URL for the item */
+    readonly icon: string;
+    /** Navigation link href for the item */
+    readonly href: string;
+    internalHref: string;
+    /** Link target (e.g., "_self", "_blank") */
+    readonly target: string;
+    isExpandable: boolean;
+    isNested: boolean;
+    isSubMenuItem: boolean;
+    /** Numeric badge indicator value */
+    readonly numberIndicator: number;
+    /** Marks the item as active */
+    readonly active: boolean;
+    /** Marks as an action item */
+    readonly isActionItem: boolean;
+    /** Click handler callback; receives the item HTMLElement */
+    readonly handleItemClick: (item: HTMLElement) => void;
+    /** Customize the font bold vs normal */
+    readonly fontWeight: "normal" | "bold";
+    showIcon: boolean;
+    showIconWrapper: boolean;
+    indicatorVariant: "number" | "dot";
+    internalActiveState: boolean;
+    /** Event fired for menu item interactions */
+    ifxSidebarMenu: EventEmitter;
+    /** Event fired when a navigation item is clicked */
+    ifxSidebarNavigationItem: EventEmitter;
+    /** Event fired when an action item is clicked */
+    ifxSidebarActionItem: EventEmitter;
+    private titleText;
+    handleActiveChange(newValue: boolean, oldValue: boolean): void;
+    handleNumberIndicatorChange(): void;
+    handleConsoleError(event: CustomEvent<boolean>): void;
+    private handleEventEmission;
+    private handleClassList;
+    private getExpandableMenu;
+    private getNavItem;
+    private getSidebarMenuItems;
+    private getSidebarMenuItem;
+    private toggleSubmenu;
+    private handleExpandableMenu;
+    private parentElementIsSidebar;
+    private checkIfMenuItemIsNested;
+    private checkIfMenuItemIsSubMenu;
+    private setHref;
+    /** Add 'active' class to the current navigation item */
+    setActiveClasses(): Promise<void>;
+    /** Expand submenu (adds 'open'); if ac=true, remove 'active-section' */
+    expandMenu(ac: boolean): Promise<void>;
+    /** Return whether the item is expandable */
+    isItemExpandable(): Promise<boolean>;
+    private handleActiveState;
+    private handleKeyDown;
+    componentDidLoad(): void;
+    private extractTitleText;
+    private updateIndicatorVariant;
+    private observeCollapsedState;
+    componentWillLoad(): void;
+    componentWillUpdate(): void;
+    render(): any;
+}

package/dist/types/components/navigation/sidebar/sidebar-seperator/sidebar-separator.d.ts

@@ -0,0 +1,3 @@
+export declare class SidebarSeparator {
+    render(): any;
+}

package/dist/types/components/navigation/sidebar/sidebar-title.d.ts

@@ -0,0 +1,7 @@
+export declare class SidebarTitle {
+    el: HTMLIfxSidebarTitleElement;
+    /** Show item/content when the sidebar is collapsed */
+    readonly showInCollapsed: boolean;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/navigation/sidebar/sidebar.d.ts

@@ -0,0 +1,87 @@
+import { type EventEmitter } from "../../../stencil-public-runtime";
+export declare class Sidebar {
+    el: HTMLIfxSidebarElement;
+    /** App name shown in the sidebar header */
+    readonly applicationName: string;
+    /**  Legacy initial collapse flag */
+    readonly initialCollapse: boolean;
+    /** Show/hide footer */
+    readonly showFooter: boolean;
+    /** Show/hide header */
+    readonly showHeader: boolean;
+    /** URL for "Terms of Use" link */
+    readonly termsOfUse: string;
+    /** URL for "Imprint" link */
+    readonly imprint: string;
+    /** URL for "Privacy Policy" link */
+    readonly privacyPolicy: string;
+    /**Link footerHrefTarget for footer links */
+    readonly footerHrefTarget: string;
+    /** Link URL for the logo click action. */
+    readonly logoHref: string;
+    internalLogoHref: string;
+    /** Where to open the logo link (_self, _blank, _parent). */
+    readonly logoHrefTarget: string;
+    internalLogoHrefTarget: string;
+    currentYear: number;
+    /** Footer copyright text */
+    readonly copyrightText: string;
+    /** Enable collapse/expand control */
+    readonly collapsible: boolean;
+    /** Initial/current collapsed state */
+    readonly collapsed: boolean;
+    /** Label for collapse/hide menu control */
+    readonly hideMenuLabel: string;
+    /** Controls positioning of sidebar */
+    readonly position: "left" | "right";
+    /** If true, the sidebar is fixed and scrolls within itself. */
+    readonly fixed: boolean;
+    isCollapsed: boolean;
+    internalTermsofUse: string;
+    internalImprint: string;
+    internalPrivacyPolicy: string;
+    internalShowFooter: boolean;
+    activeItem: HTMLElement | null;
+    /** Emitted when collapsed state changes */
+    ifxSidebarCollapseChange: EventEmitter<{
+        collapsed: boolean;
+    }>;
+    /** Emitted when logo image is clicked */
+    ifxSidebarLogoClick: EventEmitter;
+    private expandActiveItems;
+    private adjustItemsPadding;
+    componentDidLoad(): Promise<void>;
+    private getSidebarMenuItems;
+    private setInitialActiveItem;
+    private handleClassList;
+    private getActiveItemSection;
+    private getNavItem;
+    private hasChildren;
+    private handleBorderIndicatorDisplacement;
+    private removeActiveClassesRecursively;
+    private hasActiveChild;
+    handleSidebarItemInteraction(event: CustomEvent): void;
+    private isOpen;
+    private containsActiveSection;
+    private applyActiveSectionToParent;
+    private querySidebarItems;
+    private isActive;
+    handleSidebarItemActivated(event: CustomEvent): void;
+    private handleLogoHrefAndTarget;
+    componentWillLoad(): void;
+    handleCollapsibleChange(_newValue: boolean): void;
+    private forceUpdate;
+    /** Toggle the collapsed state and emit ifxSidebarCollapseChange */
+    toggleCollapse(): Promise<void>;
+    /** Collapse the sidebar and emit ifxSidebarCollapseChange */
+    collapse(): Promise<void>;
+    /** Expand the sidebar and emit ifxSidebarCollapseChange */
+    expand(): Promise<void>;
+    handleCollapsedPropChange(newValue: boolean): void;
+    private updateCollapsedState;
+    private setSidebarItemAttributes;
+    private handleHideMenuClick;
+    private handleHideMenuKeyDown;
+    private onLogoImgClick;
+    render(): any;
+}

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

@@ -0,0 +1,23 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export type NotificationVariant = "success" | "locked" | "error" | "neutral";
+export declare class Notification {
+    el: HTMLIfxNotificationElement;
+    /** Icon to display in the notification. */
+    readonly icon: string;
+    /** Visual style of the notification (e.g. success, error). */
+    readonly variant: NotificationVariant;
+    /** Text for the optional action link. */
+    readonly linkText: string;
+    /** URL the notification link should navigate to. */
+    readonly linkHref: string;
+    /** Where to open the link (same tab, new tab, etc.). */
+    readonly linkTarget: string;
+    /** Shows a close button allowing the user to dismiss the notification. */
+    readonly closable: boolean;
+    /** Event emitted when the notification is closed. */
+    ifxClose: EventEmitter;
+    componentDidLoad(): Promise<void>;
+    private getClassName;
+    private handleClose;
+    render(): any;
+}

package/dist/types/components/overview-table/overview-table.d.ts

@@ -0,0 +1,11 @@
+export declare class OverviewTable {
+    el: HTMLIfxOverviewTableElement;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private getPlannedComponents;
+    private setPlannedComponentsNumber;
+    private getCompletedComponents;
+    private setCompletedComponentsNumber;
+    private setTotalComponentsNumber;
+    render(): any;
+}

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

@@ -0,0 +1,45 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class Pagination {
+    el: HTMLIfxPaginationElement;
+    /** Emitted when the current page changes */
+    ifxPageChange: EventEmitter;
+    /** Emitted when the items-per-page value changes */
+    ifxItemsPerPageChange: EventEmitter;
+    /** The current page number passed from the outside */
+    readonly currentPage: number;
+    /** Wether to display the items-per-page selector */
+    readonly showItemsPerPage: boolean;
+    showAllItems: boolean;
+    internalPage: number;
+    internalItemsPerPage: number;
+    numberOfPages: number[];
+    /** Total number of items to paginate */
+    readonly total: number;
+    /** Items-per-page options */
+    readonly itemsPerPage: any[] | string;
+    filteredItemsPerPage: any[];
+    visiblePages: (number | string)[];
+    readonly itemsPerPageLabel: string;
+    private CLASS_DISABLED;
+    private CLASS_ACTIVE;
+    private prevInternalPage;
+    watchTotalHandler(): void;
+    currentPageWatcher(newVal: number): void;
+    setItemsPerPage(e: CustomEvent): void;
+    private emitItemsPerPage;
+    componentDidLoad(): Promise<void>;
+    disconnectedCallback(): void;
+    private updateVisiblePages;
+    private calculateNumberOfPages;
+    private filterOptionsArray;
+    componentWillLoad(): void;
+    componentWillUpdate(): void;
+    componentDidUpdate(): void;
+    private handleEventEmission;
+    private initPagination;
+    private handlePageClick;
+    private handleResize;
+    private resizeTimeout;
+    private changePage;
+    render(): any;
+}

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

@@ -0,0 +1,55 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+export declare class Popover {
+    el: HTMLIfxPopoverElement;
+    popoverVisible: boolean;
+    computedArrowPosition: {
+        top?: string;
+        left?: string;
+        right?: string;
+        bottom?: string;
+        transform?: string;
+    };
+    /** Title text displayed in the popover header */
+    readonly popoverTitle: string;
+    /** Body text displayed in the popover content */
+    readonly text: string;
+    /** Position of the popover relative to the trigger element */
+    readonly position: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto';
+    /** Whether the popover is disabled */
+    readonly disabled: boolean;
+    /** Whether the popover is initially open */
+    open: boolean;
+    /** Accessible label for the popover */
+    readonly ariaLabelText: string | null;
+    /** Emitted when the popover is opened */
+    ifxOpen: EventEmitter<{
+        trigger: HTMLElement | null;
+    }>;
+    /** Fired when the component is closed. */
+    ifxClose: EventEmitter;
+    private static readonly GAP;
+    private popoverEl;
+    private triggerEl;
+    private lastOpenTrigger;
+    openChanged(newValue: boolean): void;
+    componentDidLoad(): Promise<void>;
+    private setupTriggerElement;
+    disconnectedCallback(): void;
+    private cleanupTriggerListeners;
+    private getViewportSpace;
+    private resetPositioningStyles;
+    private positionPopover;
+    private getBestPosition;
+    private validateAndAdjustPosition;
+    private calculatePosition;
+    positionChanged(): void;
+    /** Programmatically show the popover */
+    show(): Promise<void>;
+    /** Programmatically hide the popover */
+    hide(): Promise<void>;
+    /** Programmatically toggle the popover visibility */
+    toggle(): Promise<void>;
+    private onClick;
+    private onCloseClick;
+    render(): any;
+}

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,14 @@
+export declare class ProgressBar {
+    el: HTMLIfxProgressBarElement;
+    /** Current value of the progress bar (e.g. completion percentage). */
+    readonly value: number;
+    /** Size of the progress bar (e.g. small, medium, large). */
+    readonly size: string;
+    /** Whether to show a text label next to the progress bar. */
+    readonly showLabel: boolean;
+    internalValue: number;
+    valueChanged(newValue: number, oldValue: number): void;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/radio-button/radio-button.d.ts

@@ -0,0 +1,37 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class RadioButton {
+    el: HTMLIfxRadioButtonElement;
+    private initialChecked;
+    /** If true, the checkbox is disabled and not interactive. */
+    readonly disabled: boolean;
+    /** Value submitted when the checkbox is checked. */
+    readonly value: string;
+    /** If true, the checkbox is shown in an error state. */
+    readonly error: boolean;
+    /** Size of the checkbox (small or medium). */
+    readonly size: "s" | "m";
+    /** Name attribute used when submitting the checkbox in a form. */
+    readonly name: string;
+    /** Whether the checkbox is currently checked (can be updated). */
+    checked: boolean;
+    hasSlot: boolean;
+    /** Returns the current checked state of the checkbox. */
+    isChecked(): Promise<boolean>;
+    private inputElement;
+    internals: ElementInternals;
+    /** Fired when the checked state of the checkbox changes. */
+    ifxChange: EventEmitter<boolean>;
+    /** Fired when the checkbox enters or leaves an error state. */
+    ifxError: EventEmitter<boolean>;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    handleCheckedChange(newValue: boolean): void;
+    private updateFormValue;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | null, _mode: "restore" | "autocomplete"): void;
+    errorChanged(newValue: boolean, oldValue: boolean): void;
+    private handleRadioButtonClick;
+    private handleKeyDown;
+    handleExternalChange(event: Event): void;
+    render(): any;
+}

package/dist/types/components/radio-button-group/radio-button-group.d.ts

@@ -0,0 +1,30 @@
+export declare class RadioButtonGroup {
+    private errorStates;
+    el: HTMLIfxRadioButtonGroupElement;
+    /** Layout direction of the checkbox group (horizontal or vertical). */
+    readonly alignment: "horizontal" | "vertical";
+    /** Size of the checkbox group (e.g. small, medium). */
+    readonly size: string;
+    /** Whether to show the group label above the checkboxes. */
+    readonly showGroupLabel: boolean;
+    /** Text used as the group label. */
+    readonly groupLabelText: string;
+    /** Whether to show a caption under the group. */
+    readonly showCaption: boolean;
+    /** Text used for the caption below the group. */
+    readonly captionText: string;
+    /** Whether to show an icon next to the caption text. */
+    readonly showCaptionIcon: boolean;
+    /** Whether selecting at least one checkbox is required. */
+    readonly required: boolean;
+    hasErrors: boolean;
+    handleRadioButtonError(event: CustomEvent): void;
+    /** Method to set the error state of all radio-butttons in the group */
+    setGroupError(error: boolean): Promise<void>;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    private handleSlotChange;
+    private initializeState;
+    private updateHasErrors;
+    render(): any;
+}

package/dist/types/components/search-bar/search-bar.d.ts

@@ -0,0 +1,60 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class SearchBar {
+    el: HTMLIfxSearchBarElement;
+    /**
+     * Controls whether the search bar is expanded (open) or collapsed.
+     * This is mirrored into internal state and drives the visible UI.
+     */
+    readonly isOpen: boolean;
+    /**
+     * Disables user interaction with the search field and close control.
+     */
+    readonly disabled: boolean;
+    /**
+     * Current input value of the search field.
+     * This is updated when the field emits input events.
+     */
+    value: string | undefined;
+    /**
+     * Maximum allowed length for the search input.
+     */
+    readonly maxlength?: number;
+    /**
+     * Autocomplete behavior passed to the underlying search field.
+     */
+    readonly autocomplete: string;
+    /**
+     * Toggles the close button outside the input field
+     */
+    readonly showCloseButton: boolean;
+    /**
+     * Emits when the search input value changes.
+     */
+    ifxInput: EventEmitter;
+    /**
+     * Emits when the search bar is opened or closed.
+     * Payload is the new open state.
+     */
+    ifxOpen: EventEmitter;
+    internalState: boolean;
+    private pendingFocus;
+    /**
+     * Opens the search bar when triggered programatically
+     * Emits `ifxOpen` with `false` and updates internal state.
+     */
+    open(): Promise<void>;
+    /**
+    * Closes the search bar when triggered programatically
+    * Emits `ifxOpen` with `true` and updates internal state.
+    */
+    close(): Promise<void>;
+    handlePropChange(): void;
+    private handleCloseButton;
+    private setInitialState;
+    componentWillLoad(): void;
+    componentDidUpdate(): void;
+    componentDidLoad(): Promise<void>;
+    private handleInput;
+    private handleOpenSearchKeyDown;
+    render(): any;
+}

package/dist/types/components/search-field/search-field.d.ts

@@ -0,0 +1,178 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export interface SuggestionItem {
+    id: string;
+    text: string;
+    type?: "suggestion" | "history";
+    scope?: string;
+    resultCount?: number;
+    metadata?: unknown;
+}
+export declare class SearchField {
+    private inputElement?;
+    private dropdownElement?;
+    private wrapperElement?;
+    private focusEmitted;
+    el: HTMLIfxSearchFieldElement;
+    /**
+     * Current input value. Mutates as the user types and can be set programmatically.
+     */
+    value: string;
+    /**
+     * External suggestion items used to populate the dropdown.
+     */
+    readonly suggestions: SuggestionItem[];
+    /**
+     * Enable the suggestion dropdown and request events while typing.
+     */
+    readonly showSuggestions: boolean;
+    /**
+     * Maximum number of items shown in the dropdown (suggestions + history).
+     */
+    readonly maxSuggestions: number;
+    /**
+     * Maximum number of stored history entries.
+     */
+    readonly maxHistoryItems: number;
+    /**
+     * Enable local search history behavior and persistence.
+     */
+    readonly enableHistory: boolean;
+    /**
+     * localStorage key used to persist search history.
+     * This is needed to allow multiple instances of the search field to maintain separate histories if desired, but can be left as default for a shared history across the application.
+     */
+    readonly historyKey: string;
+    /**
+     * Header text shown when only history entries are displayed.
+     */
+    readonly historyHeaderText: string;
+    /**
+     * Accessible label for the input.
+     */
+    readonly ariaLabelText: string | null;
+    /**
+     * ID of the element that labels the input.
+     */
+    readonly ariaLabelledBy?: string | null;
+    /**
+     * ID of the element that describes the input.
+     */
+    readonly ariaDescribedBy?: string | null;
+    /**
+     * Accessible label for the clear icon button.
+     */
+    readonly deleteIconAriaLabel: string;
+    /**
+     * Accessible label for the history item delete button.
+     */
+    readonly historyDeleteAriaLabel: string;
+    /**
+     * Accessible label for the suggestions listbox.
+     */
+    readonly dropdownAriaLabel: string;
+    /**
+     * Accessible label prefix for suggestion items.
+     */
+    readonly suggestionAriaLabel: string;
+    /**
+     * Accessible label prefix for history items.
+     */
+    readonly historyItemAriaLabel: string;
+    /**
+     * Show the clear icon when there is a non-empty value.
+     */
+    readonly showDeleteIcon: boolean;
+    /**
+     * Disable the input and related interactions.
+     */
+    readonly disabled: boolean;
+    /**
+     * Visual size variant. "s" enables compact styling, otherwise defaults to "l".
+     */
+    readonly size: 's' | 'l';
+    /**
+     * Placeholder text for the input.
+     */
+    readonly placeholder: string;
+    /**
+     * Native autocomplete attribute value.
+     */
+    readonly autocomplete: string;
+    /**
+     * Maximum number of characters allowed in the input.
+     */
+    readonly maxlength?: number;
+    /**
+     * Emitted on input change with the current value.
+     */
+    ifxInput: EventEmitter<string>;
+    /**
+     * Emitted to request external suggestions for the given query.
+     */
+    ifxSuggestionRequested: EventEmitter<string>;
+    /**
+     * Emitted when a suggestion or history item is selected.
+     */
+    ifxSuggestionSelected: EventEmitter<SuggestionItem>;
+    /**
+     * Emitted when the input gains focus.
+     */
+    ifxFocus: EventEmitter<void>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    ifxBlur: EventEmitter<void>;
+    showDeleteIconInternalState: boolean;
+    isFocused: boolean;
+    isFocusWithin: boolean;
+    suggestionsDismissed: boolean;
+    filteredSuggestions: SuggestionItem[];
+    selectedSuggestionIndex: number;
+    searchHistory: string[];
+    suggestionAnnouncement: string;
+    private announcementToken;
+    private get showDropdown();
+    handleOutsideClick(event: MouseEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    valueWatcher(newValue: string): void;
+    suggestionsWatcher(): void;
+    private handleInput;
+    private handleDelete;
+    private handleSearch;
+    private focusInput;
+    private blurInput;
+    private handleFocusIn;
+    private handleFocusOut;
+    private loadSearchHistory;
+    /**
+     * Focuses the search input.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Public method to clear search history.
+     * This will clear the history from both localStorage and the internal state, and also reset any dropdown-related states.
+     */
+    clearSearchHistory(): Promise<void>;
+    private addToHistory;
+    private removeFromHistory;
+    private handleHistoryDelete;
+    private requestSuggestions;
+    private updateSuggestions;
+    private navigateSuggestions;
+    private scrollSelectedSuggestionIntoView;
+    private selectSuggestion;
+    private dismissSuggestions;
+    private cancelSuggestionAnnouncement;
+    private announceSuggestionCount;
+    private showHistoryDropdown;
+    private isShowingOnlyHistory;
+    private renderHighlightedText;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    componentDidRender(): void;
+    componentWillUpdate(): void;
+    render(): any;
+    private getSizeClass;
+    private getWrapperClassNames;
+    private getSuggestionClassNames;
+}

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

@@ -0,0 +1,16 @@
+import { type EventEmitter } from "../../../stencil-public-runtime";
+export declare class Segment {
+    /** Fired when this segment is selected (emits the segment index). */
+    segmentSelect: EventEmitter<number>;
+    /** Icon to display inside the segment. */
+    readonly icon: string;
+    /** Index of this segment within the segmented control. */
+    readonly segmentIndex: number;
+    /** Whether this segment is currently selected. */
+    selected: boolean;
+    /** Value associated with this segment. */
+    readonly value: string;
+    private handleSegmentClick;
+    private handleSegmentKeyDown;
+    render(): any;
+}