@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/types/components/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,30 @@
+export declare class CheckboxGroup {
+    private errorStates;
+    el: HTMLIfxCheckboxGroupElement;
+    /** Layout direction of the radio group */
+    readonly alignment: "horizontal" | "vertical";
+    /** Size of the radio group */
+    readonly size: string;
+    /** Wether to show the group label. */
+    readonly showGroupLabel: boolean;
+    /** Text used for the group label. */
+    readonly groupLabelText: string;
+    /** Wether to show a caption under the group. */
+    readonly showCaption: boolean;
+    /** Text used for the caption. */
+    readonly captionText: string;
+    /** Wether to show an icon next to the caption. */
+    readonly showCaptionIcon: boolean;
+    /** Wether selecting an option is required. */
+    readonly required: boolean;
+    hasErrors: boolean;
+    handleCheckboxError(event: CustomEvent): void;
+    /** Method to set the error state of all checkboxes 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/chip/chip-item/chip-item.d.ts

@@ -0,0 +1,23 @@
+import { type EventEmitter } from "../../../stencil-public-runtime";
+import type { ChipItemSelectEvent, ChipState } from "../interfaces";
+export declare class ChipItem {
+    chipItem: HTMLIfxChipItemElement;
+    /** Emitted on chip select/deselect. */
+    ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;
+    /** Identifier value for this chip. */
+    readonly value: string;
+    /** Bahaviour and appearance configuration. */
+    readonly chipState: ChipState;
+    /** Wether the chip is selected (reflected). */
+    selected: boolean;
+    updateItemSelection(event: CustomEvent<ChipItemSelectEvent>): void;
+    validateSelected(newValue: boolean, oldValue: boolean): void;
+    private getItemLabel;
+    private toggleItemSelection;
+    private emitIfxChipItemSelectEvent;
+    private handleItemClick;
+    private handleItemKeyDown;
+    private handleSelectedState;
+    componentWillLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,54 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+import type { ChipItemSelectEvent } from "./interfaces";
+export declare class Chip {
+    chip: HTMLIfxChipElement;
+    /** Fires on selection change. */
+    ifxChange: EventEmitter<{
+        previousSelection: Array<ChipItemSelectEvent>;
+        currentSelection: Array<ChipItemSelectEvent>;
+        name: string;
+    }>;
+    /** Placeholder text */
+    readonly placeholder: string;
+    /** Component size */
+    readonly size: "small" | "medium" | "large";
+    /** Current selection (mutable) */
+    value: Array<string> | string;
+    /** Selection mode */
+    readonly variant: "single" | "multi";
+    /** Visual theme */
+    readonly theme: "outlined" | "filled-light" | "filled-dark";
+    /** Read-only state */
+    readonly readOnly: boolean;
+    /** ARIA Label text */
+    readonly ariaLabelText: string | null;
+    /** Disabeled state */
+    readonly disabled: boolean;
+    /** Sets Icon */
+    readonly icon: string;
+    opened: boolean;
+    selectedOptions: Array<ChipItemSelectEvent>;
+    handleValueChange(newValue: Array<string> | string): void;
+    handleReadOnlyChange(newValue: boolean): void;
+    closeDropdownOnOutsideClick(event: MouseEvent): void;
+    private handleKeyDown;
+    updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>): void;
+    private getChipItems;
+    private getSelectedOptions;
+    private toggleDropdownMenu;
+    /**
+     * Focuses the chip item at the specified index.
+     * @param index the index of the chip item to focus. -1 will focus the last chip item.
+     */
+    private focusChipItemAt;
+    private focusChip;
+    private handleUnselectButtonClick;
+    private handleWrapperClick;
+    private handleWrapperKeyDown;
+    private handleDropdownKeyDown;
+    private syncChipState;
+    private syncSelectedOptionsWithProp;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+}

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

@@ -0,0 +1,13 @@
+export interface ChipState {
+    emitIfxChipItemSelect: boolean;
+    size: "small" | "medium" | "large";
+    variant: "single" | "multi";
+    key?: number;
+}
+export interface ChipItemSelectEvent {
+    key: number;
+    emitIfxChange: boolean;
+    label: string;
+    selected: boolean;
+    value: string;
+}

package/dist/types/components/content-switcher/content-switcher-item.d.ts

@@ -0,0 +1,7 @@
+export declare class ContentSwitcherItem {
+    /** Wether this option is currently selected. */
+    readonly selected: boolean;
+    /** Value associated with this option. */
+    readonly value: string;
+    render(): any;
+}

package/dist/types/components/content-switcher/content-switcher.d.ts

@@ -0,0 +1,74 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export type ChangeEvent = {
+    oldValue: string;
+    newValue: string;
+};
+export declare class ContentSwitcher {
+    el: HTMLIfxContentSwitcherElement;
+    items: Element[];
+    activeIndex: number;
+    hoverIndex: number;
+    focusIndex: number;
+    dividers: Element[];
+    /** Fired when the selected option changes. */
+    ifxChange: EventEmitter<ChangeEvent>;
+    private eventHandlers;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    disconnectedCallback(): void;
+    /**
+     * Initialize the dividers between items.
+     */
+    private initializeDividers;
+    /**
+     * Add event listeners for each item.
+     */
+    private addEventListeners;
+    /**
+     * Remove all event listeners.
+     */
+    private removeEventListeners;
+    private ensureSingleSelectedItem;
+    /**
+     * Handle hover events on an item.
+     * @param index - Index of the item.
+     * @param isActive - Whether the item is hovered.
+     */
+    private handleHover;
+    /**
+     * Handle hover events on an item.
+     * @param index - Index of the item.
+     * @param isActive - Whether the item is focused.
+     */
+    private handleFocus;
+    /**
+     * Update visibility of dividers adjacent to a specific item.
+     * @param itemIndex - Index of the item.
+     */
+    private updateDividersOfItem;
+    /**
+     * Update visibility of a specific divider.
+     * @param dividerIndex - Index of the divider.
+     */
+    private updateDividerVisibility;
+    /**
+     * Set the visibility of a specific divider.
+     * @param dividerIndex - Index of the divider.
+     * @param hidden - Whether the divider should be hidden.
+     */
+    private setDividerVisibility;
+    /**
+     * Select a specific item.
+     * @param itemIndex - Index of the item to be selected.
+     */
+    private selectItem;
+    /**
+     * Get the value property of the item at a specific index.
+     * Falls back to the index if no value is set.
+     *
+     * @param index - Index of the item.
+     * @returns The value of the item.
+     */
+    private getValueOfItem;
+    render(): any;
+}

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

@@ -0,0 +1,19 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class Counter {
+    private initialValue;
+    /** The current value of the counter. Must be a non-negative number. */
+    value: number;
+    /** Used as the form field name when the counter is in a form. */
+    readonly name: string;
+    internals: ElementInternals;
+    /** Emitted when the counter value changes. Returns the new value as a number. */
+    ifxChange: EventEmitter<number>;
+    protected valueChanged(value: number): void;
+    componentWillLoad(): void;
+    formResetCallback(): void;
+    private updateValue;
+    private updateFormValue;
+    private increment;
+    private decrement;
+    render(): any;
+}

package/dist/types/components/date-picker/date-picker.d.ts

@@ -0,0 +1,83 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class DatePicker {
+    private inputId;
+    el: HTMLIfxDatePickerElement;
+    /**
+     * Size of the date picker input
+     */
+    readonly size: string;
+    /**
+     * Error state of the date picker
+     */
+    readonly error: boolean;
+    /**
+     * Success state of the date picker
+     */
+    readonly success: boolean;
+    /**
+     * Whether the date picker is disabled
+     */
+    readonly disabled: boolean;
+    /**
+     * Whether the date picker is read-only
+     */
+    readonly readOnly: boolean;
+    /**
+     * Aria label for the date picker input
+     */
+    readonly ariaLabelText: string | null;
+    /**
+     * The value of the date picker
+     */
+    value: string;
+    /**
+     * Type of date input (date, datetime-local, etc.)
+     */
+    readonly type: string;
+    /**
+     * Maximum allowed date
+     */
+    readonly max: string;
+    /**
+     * Minimum allowed date
+     */
+    readonly min: string;
+    /**
+     * Whether the date picker is required
+     */
+    readonly required: boolean;
+    /**
+     * Label text for the date picker
+     */
+    readonly label: string;
+    /**
+     * Caption text displayed below the date picker
+     */
+    readonly caption: string;
+    /**
+     * Autocomplete attribute for the input
+     */
+    readonly autocomplete: string;
+    /**
+     * Internal state to manage the current value
+     */
+    private internalValue;
+    internals: ElementInternals;
+    /**
+     * Event emitted when date value changes
+     */
+    ifxDate: EventEmitter;
+    handleValueChange(newValue: string): void;
+    /**
+     * Clears the date picker value
+     */
+    clear(): Promise<void>;
+    private getInput;
+    private getDate;
+    private handleIconKeyDown;
+    private isFirefox;
+    private setFireFoxClasses;
+    componentDidLoad(): Promise<void>;
+    componentWillLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,5 @@
+export declare class Download {
+    /** Type of file to download. */
+    readonly tokens: "css" | "scss" | "json" | "js";
+    render(): any;
+}

package/dist/types/components/dropdown/IOpenable.d.ts

@@ -0,0 +1,3 @@
+export interface IOpenable {
+    isOpen: boolean;
+}

package/dist/types/components/dropdown/dropdown-header/dropdown-header.d.ts

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

package/dist/types/components/dropdown/dropdown-item/dropdown-item.d.ts

@@ -0,0 +1,23 @@
+import { type EventEmitter } from "../../../stencil-public-runtime";
+export declare class DropdownItem {
+    /** Icon to show in the dropdown item. */
+    readonly icon: string;
+    /** Link the dropdown item should navigate to when clicked. */
+    readonly href: string;
+    /** Where to open the link. */
+    readonly target: string;
+    /** If true, this dropdown item is hidden. */
+    readonly hide: boolean;
+    /** If true, this item is shown in an error style. */
+    readonly error: boolean;
+    /** If true, this item is disabled and not interactive. */
+    readonly disabled: boolean;
+    size: string;
+    /** Fired when the dropdown item is clicked or selected. */
+    ifxDropdownItem: EventEmitter;
+    el: HTMLIfxDropdownItemElement;
+    handleMenuSize(event: CustomEvent): void;
+    handleHostClick(e: MouseEvent): void;
+    private handleEventEmission;
+    render(): any;
+}

package/dist/types/components/dropdown/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,23 @@
+import { type EventEmitter } from "../../../stencil-public-runtime";
+export declare class DropdownMenu {
+    /** Controls wether the dropdown menu is open or closed. */
+    readonly isOpen: boolean;
+    /**
+     * Size of the dropdown menu.
+     * @default "l"
+     */
+    readonly size: "s" | "l";
+    hideTopPadding: boolean;
+    el: HTMLIfxDropdownMenuElement;
+    /** Emits the calculated size of the menu */
+    menuSize: EventEmitter;
+    filteredItems: HTMLIfxDropdownItemElement[];
+    /** Fired when a dropdown menu item is selected */
+    ifxDropdownMenuItem: EventEmitter<CustomEvent>;
+    handleMenuFilter(event: CustomEvent): void;
+    handleDropdownItemValueEmission(event: CustomEvent): void;
+    private filterDropdownItems;
+    componentWillUpdate(): void;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/dropdown/dropdown-seperator/dropdown-separator.d.ts

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

package/dist/types/components/dropdown/dropdown-trigger/dropdown-trigger.d.ts

@@ -0,0 +1,6 @@
+import type { IOpenable } from "../IOpenable";
+export declare class DropdownItem implements IOpenable {
+    /** Controls wether the dropdown is currently open. */
+    readonly isOpen: boolean;
+    render(): any;
+}

package/dist/types/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.d.ts

@@ -0,0 +1,16 @@
+import type { IOpenable } from "../IOpenable";
+export declare class DropdownTriggerButton implements IOpenable {
+    /** Controls wether the dropdown trigger is open */
+    readonly isOpen: boolean;
+    /** Color theme of the trigger. */
+    readonly theme: "default" | "danger" | "inverse";
+    /** Visual style variant. */
+    readonly variant: "primary";
+    /** Size of the trigger button. */
+    readonly size: "s" | "m";
+    /** If true, trigger is disabled and not clickable. */
+    readonly disabled: boolean;
+    /** If true, hides the dropdown arrow icon. */
+    readonly hideArrow: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,55 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+import type { IOpenable } from "./IOpenable";
+type DropdownTrigger = HTMLElement & IOpenable & {
+    disabled?: boolean;
+};
+type DropdownMenu = HTMLElement & IOpenable;
+export type Placement = "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
+export declare class Dropdown {
+    /** Where the dropdown menu is positioned relative to the trigger. */
+    readonly placement: Placement;
+    /** Wether the dropdown should be open initially. */
+    readonly defaultOpen: boolean;
+    internalIsOpen: boolean;
+    /** If true, the menu is not appended to <body> (stays in place). */
+    readonly noAppendToBody: boolean;
+    /** Fired when dropdown open. */
+    ifxOpen: EventEmitter;
+    /** Fired when dropdown closed. */
+    ifxClose: EventEmitter;
+    /** General dropdown event. */
+    ifxDropdown: EventEmitter;
+    /** If true, dropdown is disabled and cannot be opened. */
+    readonly disabled: boolean;
+    /** If true, clicking outside will not close the dropdown. */
+    readonly noCloseOnOutsideClick: boolean;
+    /** Id true, clicking inside the menu will not close the dropdown. */
+    readonly noCloseOnMenuClick: boolean;
+    el: HTMLIfxDropdownElement;
+    trigger?: DropdownTrigger;
+    menu?: DropdownMenu;
+    private popperInstance;
+    handleOutsideClick(event: MouseEvent): void;
+    handleFocusOutside(event: FocusEvent): void;
+    private handleTriggerClick;
+    private handleTriggerKeyDown;
+    private handleMenuClick;
+    private getItemFocusables;
+    private handleMenuKeyDown;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    watchHandlerIsOpen(newValue: boolean, oldValue: boolean): void;
+    watchHandlerDisabled(newValue: boolean): void;
+    watchHandlerSlot(): void;
+    private focusFirstItem;
+    private updateSlotContent;
+    disconnectedCallback(): void;
+    /** Returns wether the dropdown is currently open. */
+    isOpen(): Promise<boolean>;
+    /** Closes the dropdown and cleans up the popper instance. */
+    closeDropdown(): Promise<void>;
+    /** Opens the dropdown and sets up the popper positioning. */
+    openDropdown(): Promise<void>;
+    render(): any;
+}
+export {};

package/dist/types/components/error-page/error-page.d.ts

@@ -0,0 +1,15 @@
+export declare class ErrorPage {
+    /** Custom illustration URL for the error page graphic. */
+    readonly illustrationUrl?: string;
+    /** Alternative text for the illustration. Falls back to the selected error type label. */
+    readonly imgAlt?: string;
+    /** Error page variant used to select the default content and image. Defaults to "403". */
+    readonly type: '403' | '404' | '503' | 'maintenance';
+    /** Headline text for the error page. Uses the variant default when no value is provided. */
+    readonly headline?: string;
+    /** Description text for the error page. Uses the variant default when no value is provided. */
+    readonly description?: string;
+    /** Centralized config per error type to keep render clean and avoid conditionals in the template. */
+    private readonly errorVariants;
+    render(): any;
+}