@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/types/components/table-basic-version/table.d.ts

@@ -0,0 +1,34 @@
+import { type GridOptions } from "ag-grid-community";
+export declare class Table {
+    gridOptions: GridOptions;
+    /** Column definitions for the table (array or JSON string). */
+    readonly cols: any[] | string;
+    /** Row data for the table (array or JSON string). */
+    readonly rows: any[] | string;
+    columnDefs: any[];
+    rowData: any[];
+    /** Row height preset (e.g. default, compact). */
+    readonly rowHeight: string;
+    /** Overall table height (e.g. fixed px value or 'auto'). */
+    readonly tableHeight: string;
+    /** Visual style variant of the table (e.g. default, compact). */
+    readonly variant: string;
+    /** Position of the column values, either left or center. */
+    readonly columnValuePosition: 'left' | 'center';
+    uniqueKey: string;
+    host: HTMLIfxBasicTableElement;
+    private container;
+    private gridApi;
+    private gridInitialized;
+    componentWillLoad(): void;
+    private setGridOptions;
+    private setColsAndRows;
+    private getRowData;
+    private getColData;
+    private onFirstDataRendered;
+    componentWillUpdate(): void;
+    componentDidLoad(): Promise<void>;
+    private getClassNames;
+    private getTableStyle;
+    render(): any;
+}

package/dist/types/components/tabs/tab.d.ts

@@ -0,0 +1,26 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class IfxTab {
+    el: HTMLIfxTabElement;
+    /** Visible title text displayed in the tab header. */
+    readonly header: string;
+    /** Disables the tab when true. */
+    readonly disabled: boolean;
+    /** Icon displayed in the tab header. */
+    readonly icon: string;
+    /** Position of the Icon relative to the header text. */
+    readonly iconPosition: 'left' | 'right';
+    /** Subline under the header, only for advanced variant. */
+    readonly subline: string;
+    /** Subline position, either left or center. */
+    readonly sublinePosition: 'left' | 'center';
+    /** Text of the Advanced-Tab-Label */
+    readonly label: string;
+    /** Number of the Advanced-Tab-Number */
+    readonly number: number;
+    /** Makes the tab header stick to the top of its scrolling oontainer */
+    readonly positionSticky: boolean;
+    /** Emitted when tab header triggers a change (selection or property updates). */
+    tabHeaderChange: EventEmitter;
+    componentWillUpdate(): void;
+    render(): any;
+}

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

@@ -0,0 +1,64 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class IfxTabs {
+    el: HTMLIfxTabsElement;
+    /** Orientation of tab list, either horizontal or vertical. */
+    readonly orientation: string;
+    /** Index of the currently active tab. */
+    readonly activeTabIndex: number;
+    /** Stretches tabs to evenly fill the available horizontal space. */
+    readonly fullWidth: boolean;
+    /** Text of the Advanced-Tab-Label */
+    readonly label: string;
+    /** Number of the Advanced-Tab-Number */
+    readonly number: number;
+    /** Subline under the header, only for advanced variant. */
+    readonly subline: string;
+    /** Subline position, either left or center. */
+    readonly sublinePosition: "left" | "center";
+    /** Makes the tab header stick to the top of its scrolling oontainer */
+    readonly positionSticky: boolean;
+    internalOrientation: string;
+    internalActiveTabIndex: number;
+    tabObjects: any[];
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    atTop: boolean;
+    private internalFocusedTabIndex;
+    private tabRefs;
+    private tabHeaderRefs;
+    private tabsListElement;
+    private tabFocusHandlers;
+    /** Emitted when the active tab changes (e.g., user selects a different tab). */
+    ifxChange: EventEmitter;
+    updateBorderOnWindowResize(): void;
+    private setActiveAndFocusedTab;
+    handleTabHeaderChange(e: any): void;
+    handleScroll(): void;
+    activeTabIndexChanged(newValue: number, oldValue: number): void;
+    componentWillLoad(): void;
+    private updateTabStyles;
+    private reRenderBorder;
+    onSlotChange(): void;
+    componentDidLoad(): Promise<void>;
+    private setupTabFocusListeners;
+    disconnectedCallback(): void;
+    componentDidUpdate(): void;
+    private updateBorderAndFocus;
+    private updateTabFocusability;
+    private focusNextTab;
+    private focusPreviousTab;
+    private getSublineAlignment;
+    private getTabItemClass;
+    private handleClick;
+    handleKeyDown(ev: KeyboardEvent): void;
+    private updateScrollButtons;
+    private shouldDisableScrolling;
+    private scrollLeft;
+    private scrollRight;
+    private onTabsListScroll;
+    private scrollTabIntoView;
+    private getTabCenterInfo;
+    private getContainerCenterInfo;
+    private calculateCenteredScrollPosition;
+    render(): any;
+}

package/dist/types/components/templates/template/template.d.ts

@@ -0,0 +1,37 @@
+import { type EventEmitter } from "../../../stencil-public-runtime";
+export declare class Template {
+    el: HTMLIfxTemplateElement;
+    repoDetails: {
+        name: string;
+        desc: string;
+        framework: string;
+    };
+    repoUrl: string;
+    showDetails: boolean;
+    isTemplatePage: boolean;
+    isLoading: boolean;
+    repoError: string;
+    /** Name of the template field. */
+    readonly name: string;
+    /** Fired when templates are toggled on or off. */
+    toggleTemplates: EventEmitter;
+    /** Fired when a validation error occurs on the field. */
+    fieldError: EventEmitter;
+    /** Thumbnail image URL or identifier for the template. */
+    readonly thumbnail: string;
+    private clientId;
+    private redirectUri;
+    private scope;
+    private state;
+    private authUser;
+    componentDidLoad(): void;
+    private getLocalStorageValues;
+    private getUserToken;
+    private handleUserInput;
+    private submitUserData;
+    private togglePadding;
+    private handleCurrentTemplate;
+    /** Toggles visibility of this template and hides the currently open one if needed. */
+    toggleTemplate(currTemp: any): Promise<void>;
+    render(): any;
+}

package/dist/types/components/templates/templates-ui/templates-ui.d.ts

@@ -0,0 +1,10 @@
+export declare class TemplatesUI {
+    el: HTMLIfxTemplatesUiElement;
+    private tableTemplate;
+    private wizardTemplate;
+    private toggleTemplate;
+    handleError(e: any): void;
+    filterTemplates(e: any): void;
+    private closeAlert;
+    render(): any;
+}

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

@@ -0,0 +1,55 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class TextField {
+    private inputElement;
+    private initialValue;
+    el: HTMLIfxTextFieldElement;
+    /** Placeholder text shown when the field is empty. */
+    readonly placeholder: string;
+    /** Name attribute used when submitting the text field in a form. */
+    readonly name: string;
+    /** Current value of the text field (can be updated programmatically). */
+    value: string;
+    /** If true, shows the text field in an error state. */
+    readonly error: boolean;
+    /** Label text shown above the text field. */
+    readonly label: string;
+    /** Optional icon shown inside or next to the text field. */
+    readonly icon: string;
+    /** Helper text shown below the text field. */
+    readonly caption: string;
+    /** Size of the text field (e.g. s, m, l). */
+    readonly size: string;
+    /** Whether a value is required (used for validation). */
+    readonly required: boolean;
+    /** If true, shows the text field in a success/valid state. */
+    readonly success: boolean;
+    /** If true, the text field is disabled and not interactive. */
+    readonly disabled: boolean;
+    /** If true, the text field is read-only but focusable. */
+    readonly readOnly: boolean;
+    /** Maximum number of characters allowed. */
+    readonly maxlength?: number;
+    /** If true, shows a delete/clear icon to remove the current value. */
+    readonly showDeleteIcon: boolean;
+    /** Native autocomplete attribute value. */
+    readonly autocomplete: string;
+    /** Input type for the field (text or password). */
+    readonly type: "text" | "password";
+    /** Internal ID used to link label and input elements. */
+    readonly internalId: string;
+    internalType: string;
+    /** Fired when the user types or the value changes. */
+    ifxInput: EventEmitter<string>;
+    internals: ElementInternals;
+    valueWatcher(newValue: string): void;
+    private syncFormValue;
+    /** Resets the text field value and clears the underlying input element. */
+    reset(): Promise<void>;
+    formResetCallback(): void;
+    private handleDeleteContent;
+    private handleInput;
+    private handleTypeProp;
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+}

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

@@ -0,0 +1,54 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class TextArea {
+    private inputId;
+    private textareaElement;
+    private initialValue;
+    internals: ElementInternals;
+    /** Fired when the textarea value changes. */
+    ifxInput: EventEmitter<string>;
+    el: HTMLIfxTextareaElement;
+    /** Helper text shown below the textarea. */
+    readonly caption: string;
+    /** Number of visible text columns. */
+    readonly cols: number;
+    /** If true, the textarea is disabled and not interactive. */
+    readonly disabled: boolean;
+    /** If true, shows the textarea in an error state. */
+    readonly error: boolean;
+    /** Label text shown above the textarea. */
+    readonly label: string;
+    /** Maximum number of characters allowed. */
+    readonly maxlength: number;
+    /** Name attribute used when submitting the textarea in a form. */
+    readonly name: string;
+    /** Placeholder text shown when the textarea is empty. */
+    readonly placeholder: string;
+    /** Whether a value is required (used for validation). */
+    readonly required: boolean;
+    /** If true, the textarea is read-only but focusable. */
+    readonly readOnly: boolean;
+    /** How the textarea can be resized by the user. */
+    readonly resize: "both" | "horizontal" | "vertical" | "none";
+    /** Number of visible text rows. */
+    readonly rows: number;
+    /** Current value of the textarea (can be updated programmatically). */
+    value: string;
+    /** How text wrapping is handled in the textarea. */
+    readonly wrap: "hard" | "soft" | "off";
+    /** If 'true', the textarea stretches to fill the available width. */
+    readonly fullWidth: string;
+    /** If true, shows the textarea in a success/valid state. */
+    readonly success: boolean;
+    valueWatcher(newValue: string): void;
+    private syncFormValue;
+    /** Resets the textarea value to its initial state. */
+    reset(): Promise<void>;
+    private handleComponentWidth;
+    componentDidRender(): void;
+    componentWillLoad(): void;
+    formResetCallback(): void;
+    private handleOnInput;
+    private resetTextarea;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/toast/toast-config.d.ts

@@ -0,0 +1,7 @@
+import type { ToastConfig } from "./toast-container/toast-container";
+/**
+ * Copies the defined `ToastConfig` fields onto an `ifx-toast` element. Shared by the
+ * container's `addToast` and the `ifxToast` controller so the property mapping lives
+ * in one place. `undefined` fields are skipped so `update()` can patch selectively.
+ */
+export declare function applyToastConfig(toast: HTMLElement & ToastConfig, config: ToastConfig): void;

package/dist/types/components/toast/toast-container/toast-container.d.ts

@@ -0,0 +1,43 @@
+import type { ToastStatus } from "../toast";
+export type ToastPlacement = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+/** Properties accepted when adding a toast imperatively via `addToast`. */
+export interface ToastConfig {
+    toastId?: string;
+    status?: ToastStatus;
+    message?: string;
+    actionText?: string;
+    duration?: number;
+}
+export declare class ToastContainer {
+    el: HTMLIfxToastContainerElement;
+    /** Placement of the container on desktop. Collapses to top/bottom on mobile. */
+    readonly placement: ToastPlacement;
+    /** Distance in px from the viewport edge. Added on top of the navbar clearance for top placements. */
+    readonly offset: number;
+    /** CSS selector of the navbar/header to keep clear of on top placements. Empty disables measuring. */
+    readonly navbarSelector: string;
+    /** Maximum number of simultaneously visible toasts. `0` means unlimited. */
+    readonly max: number;
+    navbarClearance: number;
+    private resizeRaf;
+    componentDidLoad(): Promise<void>;
+    disconnectedCallback(): void;
+    /**
+     * Creates an `ifx-toast`, appends it to the container, and removes it once dismissed.
+     * Returns the created element so callers can update or dismiss it.
+     */
+    addToast(config?: ToastConfig): Promise<HTMLIfxToastElement>;
+    /** Dismisses every toast currently in the container. */
+    dismissAll(): Promise<void>;
+    /**
+     * Dismisses the oldest toasts until at most `max` remain (`max <= 0` disables the
+     * limit). Public so the `ifxToast` controller can enforce the cap after appending a
+     * toast directly, not only via `addToast`.
+     */
+    enforceMax(): Promise<void>;
+    private getToasts;
+    private measureNavbar;
+    private updateNavbarClearance;
+    private handleResize;
+    render(): any;
+}

package/dist/types/components/toast/toast-controller.d.ts

@@ -0,0 +1,51 @@
+import type { ToastConfig, ToastPlacement } from "./toast-container/toast-container";
+/**
+ * Structural types for the elements created at runtime. We intentionally do not
+ * reference the generated `HTMLIfx*Element` globals here: those resolve in `.tsx`
+ * component files but not reliably in plain `.ts` files (matching the existing
+ * `as HTMLElement` pattern used by the table cell renderers).
+ */
+type ToastElement = HTMLElement & ToastConfig & {
+    dismiss?: (reason?: string) => void | Promise<void>;
+};
+/** Options accepted by `ifxToast.show()` — the toast config plus a target placement. */
+export interface ToastOptions extends ToastConfig {
+    /** Which placement (corner) the toast appears in. Defaults to `bottom-right`. */
+    placement?: ToastPlacement;
+    /**
+     * Maximum number of simultaneously visible toasts in this placement. `0`/omitted
+     * means unlimited. Applied to the placement's container (last value wins).
+     */
+    max?: number;
+}
+/** Returned by every `ifxToast` call to update or dismiss the created toast. */
+export interface ToastHandle {
+    /** The underlying `ifx-toast` element (or `null` outside a DOM environment). */
+    readonly el: ToastElement | null;
+    /** Updates the live toast (e.g. transition `loading` → `success`). */
+    update(options: Partial<ToastOptions>): void;
+    /** Dismisses the toast (runs the exit animation when available). */
+    dismiss(): void;
+}
+declare function show(options?: ToastOptions): ToastHandle;
+type ShorthandOptions = Omit<ToastOptions, "status" | "message">;
+declare function dismissAll(placement?: ToastPlacement): void;
+/**
+ * Imperative helper for showing toasts from anywhere — the recommended way for
+ * event/status-driven notifications. Lazily mounts a singleton `ifx-toast-container`
+ * per placement to `document.body` and returns a handle to update or dismiss the toast.
+ *
+ * @example
+ * const t = ifxToast.loading("Saving…");
+ * await save();
+ * t.update({ status: "success", message: "Saved" });
+ */
+export declare const ifxToast: {
+    show: typeof show;
+    success: (message: string, options?: ShorthandOptions) => ToastHandle;
+    warning: (message: string, options?: ShorthandOptions) => ToastHandle;
+    danger: (message: string, options?: ShorthandOptions) => ToastHandle;
+    loading: (message: string, options?: ShorthandOptions) => ToastHandle;
+    dismissAll: typeof dismissAll;
+};
+export {};

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

@@ -0,0 +1,58 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export type ToastStatus = "loading" | "success" | "warning" | "danger";
+export type ToastCloseReason = "timeout" | "action" | "programmatic";
+/** Base payload shared by all toast lifecycle events — the toast's stable id. */
+export interface ToastEventDetail {
+    /** Stable id of the toast (the `toastId` prop, or an auto-generated fallback). */
+    id: string;
+}
+/** Payload of `ifxToastClose` — the toast id plus why it closed. */
+export interface ToastCloseEventDetail extends ToastEventDetail {
+    reason: ToastCloseReason;
+}
+export declare class Toast {
+    el: HTMLIfxToastElement;
+    /** Stable id emitted with every toast event. Auto-generated when not set. */
+    readonly toastId: string;
+    /** Status variant controlling the status icon and accent color. */
+    readonly status: ToastStatus;
+    /** Message text. Falls back to the default slot when empty. */
+    readonly message: string;
+    /** Text for the trailing action button that dismisses the toast. Hidden when empty. */
+    readonly actionText: string;
+    /** Auto-dismiss delay in ms. `0` disables auto-dismiss. The `loading` status never auto-dismisses. */
+    readonly duration: number;
+    /** Emitted once the toast has been shown (mounted and rendered). */
+    ifxToastOpen: EventEmitter<ToastEventDetail>;
+    /** Emitted after the toast finished dismissing (animation complete). */
+    ifxToastClose: EventEmitter<ToastCloseEventDetail>;
+    /** Emitted when the action is activated (before the toast dismisses). */
+    ifxToastAction: EventEmitter<ToastEventDetail>;
+    private toastEl;
+    private dismissTimer;
+    private dismissing;
+    private internalId;
+    componentWillLoad(): void;
+    /** The id surfaced in events: the `toastId` prop, or the generated fallback. */
+    private get resolvedId();
+    componentDidLoad(): Promise<void>;
+    disconnectedCallback(): void;
+    /**
+     * Restart the auto-dismiss timer when the status changes (e.g. `loading` → `success`):
+     * leaving `loading` (re)starts the timer, entering `loading` clears it.
+     */
+    statusChanged(newStatus: ToastStatus, oldStatus: ToastStatus): void;
+    /**
+     * Programmatically dismisses the toast. Runs the exit animation and then emits `ifxToastClose`.
+     */
+    dismiss(reason?: ToastCloseReason): Promise<void>;
+    private startTimer;
+    private clearTimer;
+    private skipAnimation;
+    private prefersReducedMotion;
+    private runEnterAnimation;
+    private emitCloseAfterExit;
+    private handleAction;
+    private renderIcon;
+    render(): any;
+}

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

@@ -0,0 +1,34 @@
+export declare class Tooltip {
+    el: HTMLIfxTooltipElement;
+    tooltipVisible: boolean;
+    /** Header text displayed at the top of the tooltip. */
+    readonly header: string;
+    /** Main content text displayed inside the tooltip. */
+    readonly text: string;
+    /** Preferred position of the tooltip relative to the trigger element. */
+    readonly position: "bottom-start" | "top-start" | "left" | "bottom-end" | "top-end" | "right" | "bottom" | "top" | "auto";
+    internalPosition: "bottom-start" | "top-start" | "left" | "bottom-end" | "top-end" | "right" | "bottom" | "top" | "auto";
+    /** Accessible label for screen readers. */
+    readonly ariaLabelText: string | null;
+    /** Visual style variant of the tooltip. */
+    readonly variant: "compact" | "dismissible" | "extended";
+    /** Optional icon displayed in the tooltip. */
+    readonly icon: string;
+    /** If true, appends the tooltip element to document.body for positioning. */
+    readonly appendToBody: boolean;
+    private tooltipContainer;
+    private tooltipEl;
+    private referenceEl;
+    private popperInstance;
+    private getVariant;
+    componentDidLoad(): Promise<void>;
+    private initializePopper;
+    private determineBestPosition;
+    positionChanged(newVal: any): void;
+    private onMouseEnter;
+    private onMouseLeave;
+    disconnectedCallback(): void;
+    private onClick;
+    private onDismissClick;
+    render(): any;
+}

package/dist/types/components/tree-view/tree-view-item.d.ts

@@ -0,0 +1,79 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export interface TreeViewCheckChangeEvent {
+    checked: boolean;
+    indeterminate: boolean;
+    value?: string;
+    affectedChildItems?: Array<{
+        checked: boolean;
+        indeterminate: boolean;
+        value?: string;
+    }>;
+    component?: TreeViewItem;
+}
+export interface TreeViewExpandChangeEvent {
+    expanded: boolean;
+    value?: string;
+    affectedItems?: Array<{
+        expanded: boolean;
+        value?: string;
+    }>;
+    component?: TreeViewItem;
+}
+export interface TreeViewDisableChangeEvent {
+    disabled: boolean;
+    component?: TreeViewItem;
+}
+export declare class TreeViewItem {
+    host: HTMLIfxTreeViewItemElement;
+    /** Whether this tree item is currently expanded (shows its children). */
+    expanded: boolean;
+    /** If true, the item starts in an expanded state. */
+    readonly initiallyExpanded: boolean;
+    /** If true, the item is disabled and not interactive. */
+    readonly disableItem: boolean;
+    /** Accessible label for this tree item. */
+    readonly ariaLabelText: string | null;
+    /** If true, the item starts in a selected/checked state. */
+    readonly initiallySelected: boolean;
+    /** Value associated with this tree item. */
+    readonly value: string;
+    /** Fired when the expanded / collapsed state of the item changes. */
+    ifxTreeViewItemExpandChange: EventEmitter<TreeViewExpandChangeEvent>;
+    /** Fired when the checked / selected state of the item changes. */
+    ifxTreeViewItemCheckChange: EventEmitter<TreeViewCheckChangeEvent>;
+    /** Fired when the disabled state of the item changes. */
+    ifxTreeViewItemDisableChange: EventEmitter<TreeViewDisableChangeEvent>;
+    private hasChildren;
+    private isChecked;
+    private partialChecked;
+    private level;
+    private disableAllItems;
+    private expandAllItems;
+    private suppressExpandEvents;
+    private get disabled();
+    private get isExpanded();
+    private findChildren;
+    private calculateNodeLevel;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private observeParentAttribute;
+    private shouldExpandFromParent;
+    private expandAllDescendants;
+    private handleStateChange;
+    private handleCheckboxChange;
+    private handleHeaderClick;
+    private expandOrCollapseAllDescendants;
+    private updateCheckState;
+    private updateChildrenSilently;
+    handleExpandedChange(newValue: boolean): void;
+    handleDisableItemChange(newValue: boolean): void;
+    private setNodeState;
+    private collectDescendantStates;
+    private updateChildrenState;
+    private findSiblingNodes;
+    private updateParentState;
+    private calculateSiblingStates;
+    private toggleExpand;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/tree-view/tree-view.d.ts

@@ -0,0 +1,21 @@
+import { type EventEmitter } from "../../stencil-public-runtime";
+export declare class TreeView {
+    el: HTMLIfxTreeViewElement;
+    /** Optional label displayed for the tree view. */
+    readonly label?: string;
+    /** If true, disables all items in the tree view. */
+    readonly disableAllItems: boolean;
+    /** If true, expands all items in the tree view. */
+    readonly expandAllItems: boolean;
+    /** Accessible label for the tree view container. */
+    readonly ariaLabelText: string | null;
+    /** Fired when the “expand all items” state changes. */
+    ifxTreeViewExpandAllChange: EventEmitter<boolean>;
+    /** Fired when the “disable all items” state changes. */
+    ifxTreeViewDisableAllChange: EventEmitter<boolean>;
+    handleExpandAllItemsChange(newValue: boolean): void;
+    handleDisableAllItemsChange(newValue: boolean): void;
+    private handleSlotRef;
+    componentDidLoad(): Promise<void>;
+    render(): any;
+}