@siemens/ix 2.6.1 → 2.7.0

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

@@ -4,23 +4,23 @@ export declare class MenuAvatar {
     /**
      * First line of text
      */
-    top: string;
+    top?: string;
     /**
      * Second line of text
      */
-    bottom: string;
+    bottom?: string;
     /**
      * Display a avatar image
      *
      * @since 1.4.0
      */
-    image: string;
+    image?: string;
     /**
      * Display the initials of the user. Will be overwritten by image
      *
      * @since 1.4.0
      */
-    initials: string;
+    initials?: string;
     /**
      * Use for translation
      */

package/dist/types/components/menu-avatar-item/menu-avatar-item.d.ts

@@ -1,19 +1,19 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { DropdownItemWrapper } from '../dropdown/dropdown-controller';
 export declare class MenuAvatarItem implements DropdownItemWrapper {
+    hostElement: HTMLIxMenuAvatarItemElement;
     /**
      * Avatar dropdown icon
      */
-    icon: string;
+    icon?: string;
     /**
      * Avatar dropdown label
      */
-    label: string;
+    label?: string;
     /**
      * Avatar dropdown item clicked
      */
     itemClick: EventEmitter<MouseEvent>;
-    hostElement: HTMLIxMenuAvatarItemElement;
     private dropdownItemRef;
     /** @internal */
     getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;

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

@@ -7,24 +7,24 @@ export declare class MenuCategory {
     /**
      * Display name of the category
      */
-    label: string;
+    label?: string;
     /**
      * Icon of the category
      */
-    icon: string;
+    icon?: string;
     /**
      * Show notification count on the category
      */
-    notifications: number;
+    notifications?: number;
     /** @internal */
     closeOtherCategories: EventEmitter;
     menuExpand: boolean;
     showItems: boolean;
     showDropdown: boolean;
     nestedItems: HTMLIxMenuItemElement[];
-    private observer;
-    private menuItemsContainer;
-    private ixMenu;
+    private observer?;
+    private menuItemsContainer?;
+    private ixMenu?;
     private enterLeaveDebounce;
     private isNestedItemActive;
     private getNestedItems;

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

@@ -5,7 +5,7 @@ export declare class MenuSettings {
     /**
      * Active tab
      */
-    activeTabLabel: string;
+    activeTabLabel?: string;
     /**
      * Label of first tab
      */

package/dist/types/components/menu-settings-item/menu-settings-item.d.ts

@@ -4,7 +4,7 @@ export declare class MenuSettingsItem {
     /**
      * Settings Item label
      */
-    label: string;
+    label?: string;
     /**
      * Label changed
      */

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

@@ -13,8 +13,8 @@ export declare class MessageBar {
      * An event emitted when the close button is clicked
      */
     closedChange: EventEmitter;
-    icon: 'error' | 'warning' | 'info';
-    color: NotificationColor;
+    icon?: 'error' | 'warning' | 'info';
+    color?: NotificationColor;
     private static readonly duration;
     private divElement?;
     componentWillRender(): void;

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

@@ -31,7 +31,7 @@ export declare class Modal {
      * - Return `true` to proceed in dismissing the modal
      * - Return `false` to abort in dismissing the modal
      */
-    beforeDismiss: (reason?: any) => boolean | Promise<boolean>;
+    beforeDismiss?: (reason?: any) => boolean | Promise<boolean>;
     /**
      * Centered modal
      */
@@ -55,7 +55,7 @@ export declare class Modal {
     dialogDismiss: EventEmitter;
     modalVisible: boolean;
     onKey(e: KeyboardEvent): void;
-    get dialog(): HTMLDialogElement;
+    get dialog(): HTMLDialogElement | null;
     private slideInModal;
     private slideOutModal;
     private onModalClick;

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

@@ -102,7 +102,7 @@ export declare class Pane {
     private animationCounter;
     private mutationObserver?;
     private resizeObserver?;
-    get currentSlot(): string;
+    get currentSlot(): string | null;
     get isBottomTopPane(): boolean;
     get isLeftRightPane(): boolean;
     get isMobileTop(): boolean;

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

@@ -1,5 +1,6 @@
-export declare class Pill {
-    el: HTMLIxPillElement;
+import { IxComponent } from '../utils/internal';
+export declare class Pill implements IxComponent {
+    hostElement: HTMLIxPillElement;
     /**
      * Pill variant
      */
@@ -30,5 +31,8 @@ export declare class Pill {
      * Align pill content left
      */
     alignLeft: boolean;
+    iconOnly: boolean;
+    componentWillLoad(): void;
+    private checkIfContentAvailable;
     render(): any;
 }

package/dist/types/components/pill/tests/pill.ct.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -119,6 +119,20 @@ export declare class Select implements IxInputFieldComponent<string | string[]>
      * @since 1.5.0
      */
     hideListHeader: boolean;
+    /**
+     * The width of the dropdown element with value and unit (e.g. "200px" or "12.5rem").
+     *
+     * @since 2.7.0
+     */
+    dropdownWidth?: string;
+    /**
+     * The maximum width of the dropdown element with value and unit (e.g. "200px" or "12.5rem").
+     * By default the maximum width of the dropdown element is set to 100%.
+     *
+     * @since 2.7.0
+     *
+     */
+    dropdownMaxWidth?: string;
     /**
      * Value changed
      * @since 2.0.0
@@ -170,7 +184,7 @@ export declare class Select implements IxInputFieldComponent<string | string[]>
     get items(): HTMLIxSelectItemElement[];
     get visibleItems(): HTMLIxSelectItemElement[];
     get selectedItems(): HTMLIxSelectItemElement[];
-    get addItemButton(): Element;
+    get addItemButton(): Element | null;
     get isSingleMode(): boolean;
     get isMultipleMode(): boolean;
     get isEveryDropdownItemHidden(): boolean;
@@ -191,6 +205,7 @@ export declare class Select implements IxInputFieldComponent<string | string[]>
     private emitValueChange;
     componentDidLoad(): void;
     componentWillLoad(): void;
+    componentDidRender(): void;
     onLabelChange(event: IxSelectItemLabelChangeEvent): void;
     disconnectedCallback(): void;
     private itemExists;

package/dist/types/components/select/test/select-keyboard.ct.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -33,7 +33,7 @@ export declare class SelectItem implements DropdownItemWrapper {
      * @param event
      */
     onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>): Promise<void>;
-    get dropdownItem(): HTMLIxDropdownItemElement;
+    get dropdownItem(): HTMLIxDropdownItemElement | null;
     componentDidRender(): void;
     onValueChange(newValue: string, oldValue: string): void;
     labelChange(newValue: string, oldValue: string): void;

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

@@ -56,7 +56,7 @@ export declare class Slider {
     rangeTraceReference: number;
     showTooltip: boolean;
     private a11yAttributes?;
-    get tooltip(): HTMLIxTooltipElement;
+    get tooltip(): HTMLIxTooltipElement | null | undefined;
     get pseudoThumb(): HTMLElement;
     get slider(): HTMLInputElement;
     onShowTooltipChange(): void;

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

@@ -25,7 +25,7 @@ export declare class SplitButton {
     /**
      * Button label
      */
-    label: string;
+    label?: string;
     /**
      * Button icon
      */
@@ -47,8 +47,8 @@ export declare class SplitButton {
      * Button clicked
      */
     buttonClick: EventEmitter<MouseEvent>;
-    private triggerElement;
-    private dropdownElement;
+    private triggerElement?;
+    private dropdownElement?;
     private linkTriggerRef;
     componentDidLoad(): void;
     render(): any;

package/dist/types/components/split-button-item/split-button-item.d.ts

@@ -8,11 +8,11 @@ export declare class SplitButtonItem implements DropdownItemWrapper {
     /**
      * Dropdown icon
      */
-    icon: string;
+    icon?: string;
     /**
      * Dropdown label
      */
-    label: string;
+    label?: string;
     /**
      * Dropdown item clicked
      */

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

@@ -36,7 +36,7 @@ export declare class Tabs {
     private windowStartSize;
     private resizeObserver?;
     private clickAction;
-    onWindowResize(): number;
+    onWindowResize(): number | undefined;
     private getTabs;
     private getTab;
     private getTabsWrapper;

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

@@ -88,6 +88,6 @@ export declare class TimePicker {
     /**
      * Get the current time based on the wanted format
      */
-    getCurrentTime(): Promise<string>;
+    getCurrentTime(): Promise<string | undefined>;
     render(): any;
 }

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

@@ -8,7 +8,7 @@ export declare class Toast {
     /**
      * Toast title
      */
-    toastTitle: string;
+    toastTitle?: string;
     /**
      * Autoclose title after delay
      */
@@ -20,11 +20,11 @@ export declare class Toast {
     /**
      * Icon of toast
      */
-    icon: string;
+    icon?: string;
     /**
      * Icon color of toast
      */
-    iconColor: string;
+    iconColor?: string;
     /**
      * Toast closed
      */

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

@@ -28,7 +28,7 @@ export declare class ToggleButton {
     /**
      * Icon name
      */
-    icon: string;
+    icon?: string;
     /**
      * Show button as pressed
      */

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

@@ -39,7 +39,7 @@ export declare class Tree {
      * Emits removed nodes
      */
     nodeRemoved: EventEmitter<any>;
-    private hyperlist;
+    private hyperlist?;
     private toggleListener;
     private itemClickListener;
     private updates;

package/dist/types/components/utils/a11y.d.ts

@@ -1,5 +1,5 @@
 export declare const a11yBoolean: (value: boolean | undefined) => "true" | "false";
-export declare const getFallbackLabelFromIconName: (iconName: string) => string;
+export declare const getFallbackLabelFromIconName: (iconName?: string) => string;
 export declare const a11yHostAttributes: (hostElement: HTMLElement, ignoreAttributes?: A11yAttributeName[]) => Record<A11yAttributeName, string>;
 export type A11yAttributeName = 'role' | 'aria-activedescendant' | 'aria-atomic' | 'aria-autocomplete' | 'aria-braillelabel' | 'aria-brailleroledescription' | 'aria-busy' | 'aria-checked' | 'aria-colcount' | 'aria-colindex' | 'aria-colindextext' | 'aria-colspan' | 'aria-controls' | 'aria-current' | 'aria-describedby' | 'aria-description' | 'aria-details' | 'aria-disabled' | 'aria-errormessage' | 'aria-expanded' | 'aria-flowto' | 'aria-haspopup' | 'aria-hidden' | 'aria-invalid' | 'aria-keyshortcuts' | 'aria-label' | 'aria-labelledby' | 'aria-level' | 'aria-live' | 'aria-multiline' | 'aria-multiselectable' | 'aria-orientation' | 'aria-owns' | 'aria-placeholder' | 'aria-posinset' | 'aria-pressed' | 'aria-readonly' | 'aria-relevant' | 'aria-required' | 'aria-roledescription' | 'aria-rowcount' | 'aria-rowindex' | 'aria-rowindextext' | 'aria-rowspan' | 'aria-selected' | 'aria-setsize' | 'aria-sort' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'aria-valuetext';
 type PartialRecord<K extends A11yAttributeName, T> = {

package/dist/types/components/utils/application-layout/context.d.ts

@@ -1,5 +1,5 @@
 import { type LiteralStringUnion } from '../type-helper';
-export declare const closestIxMenu: (element: Element) => HTMLIxMenuElement;
+export declare const closestIxMenu: (element: Element) => HTMLIxMenuElement | null;
 export type AppSwitchConfigurationTarget = LiteralStringUnion<'_self' | '_blank' | '_parent' | '_top'>;
 export type AppSwitchConfiguration = {
     currentAppId: string;
@@ -17,6 +17,6 @@ export type AppSwitchConfiguration = {
 export declare const ApplicationLayoutContext: Readonly<import("../context").Context<{
     hideHeader: boolean;
     host: 'basic-navigation' | 'map-navigation' | null;
-    appSwitchConfig?: AppSwitchConfiguration;
-    sidebar?: boolean;
+    appSwitchConfig?: AppSwitchConfiguration | undefined;
+    sidebar?: boolean | undefined;
 }>>;

package/dist/types/components/utils/application-layout/service.d.ts

@@ -2,7 +2,7 @@ import { Breakpoint } from '../breakpoints';
 import { TypedEvent } from '../typed-event';
 declare class ApplicationLayoutService {
     #private;
-    debouncedOnResize: (...args: unknown[]) => void;
+    debouncedOnResize: () => void;
     constructor();
     get breakpoint(): "sm" | "md" | "lg";
     get onChange(): TypedEvent<"sm" | "md" | "lg">;

package/dist/types/components/utils/context.d.ts

@@ -35,8 +35,8 @@ export type ContextCallback<ValueType> = (value: ValueType, unsubscribe?: () =>
 export declare class ContextEvent<T extends UnknownContext> extends Event {
     readonly context: T;
     readonly callback: ContextCallback<ContextType<T>>;
-    readonly subscribe?: boolean;
-    constructor(context: T, callback: ContextCallback<ContextType<T>>, subscribe?: boolean);
+    readonly subscribe?: boolean | undefined;
+    constructor(context: T, callback: ContextCallback<ContextType<T>>, subscribe?: boolean | undefined);
 }
 declare global {
     interface HTMLElementEventMap {

package/dist/types/components/utils/find-element.d.ts

@@ -11,7 +11,7 @@ export declare function resolveSelector(selector: string, hostElement?: HTMLElem
  * @param parent This will determine how far up the DOM to travel to find the root
  * @returns The root element
  */
-export declare function getRootFor(element: HTMLElement, parent?: HTMLElement): HTMLElement | ShadowRoot;
+export declare function getRootFor(element: HTMLElement, parent?: HTMLElement): HTMLElement | ShadowRoot | undefined;
 export declare function waitForSelector(selector: string, node?: Document, hostElement?: HTMLElement): Promise<Element>;
 /**
  * Find an element by ID or reference

package/dist/types/components/utils/lazy-list/lazy.d.ts

@@ -38,7 +38,7 @@ export declare class VirtualList {
     constructor(element: HTMLElement, userProvidedConfig: VirtualListConfig);
     destroy(): void;
     refresh(element: HTMLElement, userProvidedConfig?: VirtualListConfig): void;
-    _getRow(i: any): any;
+    _getRow(i: number): any;
     _getScrollPosition(): any;
     _renderChunk(force?: boolean): false | void;
     _computePositions(from?: number): void;

package/dist/types/components/utils/make-ref.d.ts

@@ -1,5 +1,5 @@
 export type MakeRef<T> = {
-    (ref: T | undefined): void;
+    (ref: T | undefined | null): void;
     current: T | null;
     waitForCurrent(): Promise<T>;
 };

package/dist/types/components/utils/menu-service/menu-service.d.ts

@@ -6,7 +6,7 @@ declare class MenuService {
     open(): Promise<boolean>;
     close(): Promise<boolean>;
     toggle(): Promise<boolean>;
-    get nativeElement(): HTMLIxMenuElement;
+    get nativeElement(): HTMLIxMenuElement | null;
     get expandChange(): TypedEvent<boolean>;
     get isPinned(): boolean;
 }

package/dist/types/components/utils/modal/message.d.ts

@@ -21,23 +21,23 @@ export declare function showMessage<T>(config: MessageConfig<T>): Promise<TypedE
     payload: T;
 }>>;
 export declare namespace showMessage {
-    var info: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
+    var info: (title: string, message: string, textOkay: string, textCancel?: string | undefined, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
         actionId: string;
         payload: unknown;
     }>>;
-    var warning: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
+    var warning: (title: string, message: string, textOkay: string, textCancel?: string | undefined, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
         actionId: string;
         payload: unknown;
     }>>;
-    var error: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
+    var error: (title: string, message: string, textOkay: string, textCancel?: string | undefined, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
         actionId: string;
         payload: unknown;
     }>>;
-    var success: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
+    var success: (title: string, message: string, textOkay: string, textCancel?: string | undefined, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
         actionId: string;
         payload: unknown;
     }>>;
-    var question: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
+    var question: (title: string, message: string, textOkay: string, textCancel?: string | undefined, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
         actionId: string;
         payload: unknown;
     }>>;

package/dist/types/components/utils/shadow-dom.d.ts

@@ -1,5 +1,5 @@
-export declare function closestElement(selector: string, el: any): any;
+export declare function closestElement(selector: string, el: any): null | Element;
 export declare function getSlottedElements<R = any>(slot: any): R[];
 export declare function hasSlottedElements(slot: any): boolean;
 export declare function containsElement(target: Element, element: Element): boolean;
-export declare function closestPassShadow(node: Node, selector: string): HTMLElement;
+export declare function closestPassShadow(node: Node, selector: string): HTMLElement | null;

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

@@ -11,7 +11,7 @@ export declare class ValidationTooltip {
     /**
      * Message of the tooltip
      */
-    message: string;
+    message?: string;
     /**
      * Placement of the tooltip
      */
@@ -23,15 +23,15 @@ export declare class ValidationTooltip {
      */
     suppressAutomaticPlacement: boolean;
     isInputValid: boolean;
-    tooltipPosition: Position;
-    arrowPosition: Position;
+    tooltipPosition?: Position;
+    arrowPosition?: Position;
     private onSubmitBind;
     private onInputFocusBind;
-    private autoUpdateCleanup;
-    private observer;
+    private autoUpdateCleanup?;
+    private observer?;
     get arrow(): HTMLElement;
-    get inputElement(): HTMLInputElement;
-    get formElement(): HTMLFormElement;
+    get inputElement(): HTMLInputElement | null;
+    get formElement(): HTMLFormElement | null | undefined;
     get tooltipElement(): HTMLElement;
     private destroyAutoUpdate;
     private applyTooltipPosition;

package/dist/types/components/workflow-steps/workflow-steps.d.ts

@@ -19,7 +19,7 @@ export declare class WorkflowSteps {
     stepSelected: EventEmitter<number>;
     private getSteps;
     updateSteps(): void;
-    private observer;
+    private observer?;
     onStepSelectionChanged(event: CustomEvent<HTMLIxWorkflowStepElement>): void;
     componentWillLoad(): void;
     componentDidLoad(): void;