@siemens/ix 0.0.0-pr-1373-20240705054533 → 0.0.0-pr-1522-20241022123832

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 import { ApplicationLayoutContext } from '../utils/application-layout/context';
 import { Breakpoint } from '../utils/breakpoints';
 import { ContextType } from '../utils/context';
@@ -9,7 +10,22 @@ export declare class ApplicationHeader {
     /**
      * Application name
      */
-    name: string;
+    name?: string;
+    /**
+     * Controls the visibility of the menu toggle button based on the context of the application header.
+     *
+     * When the application header is utilized outside the application frame, the menu toggle button is displayed.
+     * Conversely, if the header is within the application frame, this property is ineffective.
+     *
+     * @since 2.5.0
+     */
+    showMenu?: boolean;
+    /**
+     * Event emitted when the menu toggle button is clicked
+     *
+     * @since 2.5.0
+     */
+    menuToggle: EventEmitter<boolean>;
     breakpoint: Breakpoint;
     menuExpanded: boolean;
     suppressResponsive: boolean;
@@ -22,6 +38,8 @@ export declare class ApplicationHeader {
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    watchApplicationLayoutContext(): void;
+    watchSuppressResponsive(): void;
     private isLogoSlotted;
     private attachSiemensLogoIfLoaded;
     private onMenuClick;

package/dist/types/components/basic-navigation/basic-navigation.d.ts

@@ -16,7 +16,8 @@ export declare class BasicNavigation {
     forceBreakpoint: Breakpoint | undefined;
     forceLayoutChange(newMode: Breakpoint | undefined): void;
     /**
-     * Supported layouts e.g ['sm', 'md']
+     * Supported layouts
+     * @example ['sm', 'md']
      */
     breakpoints: Breakpoint[];
     onBreakpointsChange(breakpoints: Breakpoint[]): void;

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

@@ -9,17 +9,17 @@ export declare class Blind {
     /**
      * Label of blind
      */
-    label: string;
+    label?: string;
     /**
      * Secondary label inside blind header
      * @since 2.0.0
      */
-    sublabel: string;
+    sublabel?: string;
     /**
      * Optional icon to be displayed next to the header label
      * @since 1.5.0
      */
-    icon: string;
+    icon?: string;
     /**
      * Blind variant
      * @since 2.0.0
@@ -30,7 +30,7 @@ export declare class Blind {
      */
     collapsedChange: EventEmitter<boolean>;
     hostElement: HTMLIxBlindElement;
-    private chevronRef;
+    private chevronRef?;
     private blindId;
     constructor();
     private onHeaderClick;

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

@@ -32,11 +32,11 @@ export declare class Breadcrumb {
         event: UIEvent;
         item: string;
     }>;
-    previousButtonRef: HTMLElement;
-    nextButtonRef: HTMLElement;
+    private readonly previousButtonRef;
+    private readonly nextButtonRef;
     items: HTMLIxBreadcrumbItemElement[];
     isPreviousDropdownExpanded: boolean;
-    private mutationObserver;
+    private mutationObserver?;
     private previousButtonId;
     private previousDropdownId;
     private onItemClick;

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

@@ -1,3 +1,4 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
 import { A11yAttributes } from '../utils/a11y';
 import { ButtonVariant } from './button';
 export type ButtonAlignment = 'center' | 'start';
@@ -27,7 +28,7 @@ export type BaseButtonProps = {
     selected: boolean;
     disabled: boolean;
     loading: boolean;
-    icon: string;
+    icon?: string;
     onClick?: Function;
     ariaAttributes?: A11yAttributes;
     extraClasses?: {
@@ -39,4 +40,4 @@ export type BaseButtonProps = {
     tabIndex?: number;
     afterContent?: any;
 };
-export declare function BaseButton(props: BaseButtonProps, children: any): any;
+export declare const BaseButton: FunctionalComponent<BaseButtonProps>;

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

@@ -30,7 +30,7 @@ export declare class Button {
     /**
      * Icon name
      */
-    icon: string;
+    icon?: string;
     /** @internal */
     alignment: 'center' | 'start';
     /** @internal */
@@ -39,7 +39,7 @@ export declare class Button {
     /**
      * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)
      */
-    submitButtonElement: HTMLButtonElement;
+    submitButtonElement?: HTMLButtonElement;
     componentDidLoad(): void;
     dispatchFormEvents(): void;
     render(): any;

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

@@ -1,4 +1,4 @@
-export type CardVariant = 'insight' | 'notification' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'primary';
+export type CardVariant = 'insight' | 'notification' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'primary' | 'outline' | 'filled';
 /**
  * @since 1.6.0
  */
@@ -6,6 +6,7 @@ export declare class Card {
     hostElement: HTMLIxCardElement;
     /**
      * Card variant
+     * @deprecated variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead.
      */
     variant: CardVariant;
     /**

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

@@ -4,11 +4,17 @@ import { InputState } from './input-state';
 import { LogicalFilterOperator } from './logical-filter-operator';
 export declare class CategoryFilter {
     private readonly ID_CUSTOM_FILTER_VALUE;
-    showDropdown: boolean;
-    private textInput?;
+    private formKeyDownListener?;
+    private preventDefaultListener?;
+    private inputKeyDownListener?;
+    private focusInListener?;
+    private focusOutListener?;
+    private inputListener?;
+    private readonly textInput?;
     private formElement?;
-    private isScrollStateDirty;
+    private isScrollStateDirty?;
     hostElement: HTMLIxCategoryFilterElement;
+    showDropdown: boolean;
     hasFocus: boolean;
     categoryLogicalOperator: LogicalFilterOperator;
     inputValue: string;
@@ -29,16 +35,16 @@ export declare class CategoryFilter {
     /**
      * A set of search criteria to populate the component with.
      */
-    filterState: FilterState;
+    filterState?: FilterState;
     /**
      * Placeholder text to be displayed in an empty input field.
      */
-    placeholder: string;
+    placeholder?: string;
     /**
-     * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.
+     * Configuration object hash used to populate the dropdown menu for type-ahead and quick selection functionality.
      * Each ID maps to an object with a label and an array of options to select from.
      */
-    categories: {
+    categories?: {
         [id: string]: {
             label: string;
             options: string[];
@@ -55,9 +61,9 @@ export declare class CategoryFilter {
         [id: string]: string;
     };
     /**
-     * A list of strings that will be supplied as typeahead suggestions not tied to any categories.
+     * A list of strings that will be supplied as type-ahead suggestions not tied to any categories.
      */
-    suggestions: string[];
+    suggestions?: string[];
     /**
      * The icon next to the actual text input
      * Defaults to 'search'
@@ -76,7 +82,7 @@ export declare class CategoryFilter {
      */
     staticOperator?: LogicalFilterOperator;
     /**
-     * If set to true allows that a single category can be set more than once.
+     * If set to true, allows that a single category can be set more than once.
      * An already set category will not appear in the category dropdown if set to false.
      *
      * Defaults to true
@@ -95,7 +101,7 @@ export declare class CategoryFilter {
      */
     i18nPlainText: string;
     /**
-     * Event dispatched whenever the a category gets selected in the dropdown
+     * Event dispatched whenever a category gets selected in the dropdown
      */
     categoryChanged: EventEmitter<string>;
     /**
@@ -107,7 +113,11 @@ export declare class CategoryFilter {
      */
     filterChanged: EventEmitter<FilterState>;
     get dropdown(): HTMLIxDropdownElement;
-    watchFilterState(newValue: any): void;
+    watchFilterState(newValue: FilterState): void;
+    private preventDefault;
+    private onFocusIn;
+    private onFocusOut;
+    private onInput;
     componentDidLoad(): void;
     private setFilterState;
     private closeDropdown;
@@ -138,6 +148,7 @@ export declare class CategoryFilter {
     private renderCategorySelection;
     private getDropdownHeader;
     componentDidRender(): void;
+    disconnectedCallback(): void;
     private getResetButton;
     private getIconColor;
     render(): any;

package/dist/types/components/category-filter/test/category-filter.ct.d.ts

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

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

@@ -8,7 +8,7 @@ export declare class ContentHeader {
     /**
      * Title of Header
      */
-    headerTitle: string;
+    headerTitle?: string;
     /**
      * Subtitle of Header
      */

package/dist/types/components/css-grid/css-grid.d.ts

@@ -6,8 +6,8 @@ export declare class CssGrid {
     /**
      * Define css grid template
      */
-    templates: Partial<Record<CssGridTemplateType, string[][]>>;
-    currentTemplate: string[][];
+    templates?: Partial<Record<CssGridTemplateType, string[][]>>;
+    currentTemplate?: string[][];
     private disposeMediaQueryListener;
     private mediaQueries;
     componentWillRender(): void;

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

@@ -100,10 +100,10 @@ export declare class DateDropdown {
      * This event is emitted when the date range changes within the component.
      * The event payload contains information about the selected date range.
      */
-    private dateRangeChange;
+    private readonly dateRangeChange;
     private selectedDateRangeId;
-    private currentRangeValue;
-    private triggerRef;
+    private currentRangeValue?;
+    private readonly triggerRef;
     onDisabledChange(): void;
     private datePickerTouched;
     componentWillLoad(): void;

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

@@ -77,7 +77,7 @@ export declare class DatePicker {
      *
      * @since 2.1.0
      */
-    locale: string;
+    locale?: string;
     onLocaleChange(): void;
     /**
      * @deprecated Not supported since 2.0.0.
@@ -128,21 +128,20 @@ export declare class DatePicker {
         from: string;
         to: string;
     }>;
-    currFromDate: DateTime;
-    currToDate: DateTime;
+    currFromDate?: DateTime;
+    currToDate?: DateTime;
     selectedYear: number;
     tempYear: number;
     startYear: number;
     endYear: number;
     selectedMonth: number;
     tempMonth: number;
-    dropdownButtonRef: HTMLElement;
-    yearContainerRef: HTMLElement;
+    private readonly dropdownButtonRef;
+    private readonly yearContainerRef;
+    private readonly firstMonthRef;
     dayNames: string[];
     monthNames: string[];
-    firstMonthRef: HTMLElement;
     focusedDay: number;
-    focusedDayElem: HTMLElement;
     private isDayFocus;
     private monthChangedFromFocus;
     private readonly DAYS_IN_WEEK;

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

@@ -22,6 +22,7 @@ declare class DropdownController {
     private isWindowListenerActive;
     connected(dropdown: DropdownInterface): void;
     disconnected(dropdown: DropdownInterface): void;
+    removeFromSubmenuIds(id: string): void;
     discoverSubmenus(): void;
     present(dropdown: DropdownInterface): void;
     dismissChildren(uid: string): void;
@@ -33,11 +34,5 @@ declare class DropdownController {
     private buildComposedPath;
     private addOverlayListeners;
 }
-export declare const addDisposableEventListener: (element: Element | Window | Document, eventType: string, callback: EventListenerOrEventListenerObject) => () => void;
-export declare const addDisposableEventListenerAsArray: (listener: {
-    element: Element | Window | Document;
-    eventType: string;
-    callback: EventListenerOrEventListenerObject;
-}[]) => () => void;
 export declare const dropdownController: DropdownController;
 export {};

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

@@ -2,6 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { ComponentInterface } from '../../stencil-public-runtime';
 import { CloseBehavior, DropdownInterface } from './dropdown-controller';
 import { AlignedPlacement } from './placement';
+import { ElementReference } from "../utils/element-reference";
 export declare class Dropdown implements ComponentInterface, DropdownInterface {
     hostElement: HTMLIxDropdownElement;
     /**
@@ -18,11 +19,11 @@ export declare class Dropdown implements ComponentInterface, DropdownInterface {
      * Define an element that triggers the dropdown.
      * A trigger can either be a string that will be interpreted as id attribute or a DOM element.
      */
-    trigger: string | HTMLElement | Promise<HTMLElement>;
+    trigger?: ElementReference;
     /**
      * Define an anchor element
      */
-    anchor: string | HTMLElement;
+    anchor?: ElementReference;
     /**
      * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
      * If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.
@@ -45,7 +46,7 @@ export declare class Dropdown implements ComponentInterface, DropdownInterface {
      *
      * @internal
      */
-    offset: {
+    offset?: {
         mainAxis?: number;
         crossAxis?: number;
         alignmentAxis?: number;
@@ -53,7 +54,7 @@ export declare class Dropdown implements ComponentInterface, DropdownInterface {
     /**
      * @internal
      */
-    overwriteDropdownStyle: (delegate: {
+    overwriteDropdownStyle?: (delegate: {
         dropdownRef: HTMLElement;
         triggerRef?: HTMLElement;
     }) => Promise<Partial<CSSStyleDeclaration>>;
@@ -69,15 +70,13 @@ export declare class Dropdown implements ComponentInterface, DropdownInterface {
      * Fire event after visibility of dropdown has changed
      */
     showChanged: EventEmitter<boolean>;
-    private autoUpdateCleanup;
+    private autoUpdateCleanup?;
     private triggerElement?;
     private anchorElement?;
-    private dropdownRef;
     private localUId;
     private assignedSubmenu;
-    private arrowFocusController;
-    private focusDropdownItemBind;
-    private itemObserver;
+    private arrowFocusController?;
+    private itemObserver?;
     connectedCallback(): void;
     cacheSubmenuId(event: CustomEvent<string>): void;
     disconnectedCallback(): void;
@@ -100,8 +99,10 @@ export declare class Dropdown implements ComponentInterface, DropdownInterface {
     private resolveElement;
     private checkForSubmenuAnchor;
     private findElement;
+    private resolveAnchorElement;
     changedShow(newShow: boolean): Promise<void>;
-    changedTrigger(newTriggerValue: string | HTMLElement | Promise<HTMLElement>): void;
+    changedTrigger(newTriggerValue: ElementReference): void;
+    private destroyAutoUpdate;
     private isAnchorSubmenu;
     private applyDropdownPosition;
     private focusDropdownItem;

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

@@ -25,11 +25,11 @@ export declare class DropdownButton {
     /**
      * Set label
      */
-    label: string;
+    label?: string;
     /**
      * Button icon
      */
-    icon: string;
+    icon?: string;
     /**
      * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
      * @since 2.1.0
@@ -40,8 +40,8 @@ export declare class DropdownButton {
      *
      * @since 2.0.0
      */
-    placement: AlignedPlacement;
-    dropdownAnchor: HTMLElement;
+    placement?: AlignedPlacement;
+    private readonly dropdownAnchor;
     private getTriangle;
     render(): any;
 }

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

@@ -5,11 +5,11 @@ export declare class DropdownItem implements DropdownItemWrapper {
     /**
      * Label of dropdown item
      */
-    label: string;
+    label?: string;
     /**
      * Icon of dropdown item
      */
-    icon: string;
+    icon?: string;
     /**
      * Display hover state
      */

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

@@ -8,11 +8,11 @@ export declare class Group {
     /**
      * Group header
      */
-    header: string;
+    header?: string;
     /**
      * Group header subtitle
      */
-    subHeader: string;
+    subHeader?: string;
     /**
      * Whether the group is collapsed or expanded. Defaults to true.
      */
@@ -25,7 +25,7 @@ export declare class Group {
      * The index of the selected group entry.
      * If undefined no group item is selected.
      */
-    index: number;
+    index?: number;
     /**
      * Expand the group if the header is clicked
      */
@@ -43,21 +43,22 @@ export declare class Group {
      */
     collapsedChanged: EventEmitter<boolean>;
     itemSelected: boolean;
-    dropdownTriggerRef: HTMLElement;
     slotSize: number;
     footerVisible: boolean;
     showExpandCollapsedIcon: boolean;
     private observer;
+    selectedChanged(newSelected: boolean): void;
     get dropdownItems(): Element[];
     get groupItems(): Array<HTMLIxGroupItemElement>;
     get groupContent(): Element;
     private onExpandClick;
     private onHeaderClick;
-    private onItemClick;
-    private setGroupSelection;
+    private changeHeaderSelection;
+    private changeItemIndex;
     private onSlotChange;
     componentWillRender(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    onItemClicked(event: CustomEvent): void;
     render(): any;
 }

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

@@ -4,15 +4,15 @@ export declare class GroupItem {
     /**
      * Group item icon
      */
-    icon: string;
+    icon?: string;
     /**
      * Group item text
      */
-    text: string;
+    text?: string;
     /**
      * Group item secondary text
      */
-    secondaryText: string;
+    secondaryText?: string;
     /**
      * Supress the selection of the group
      */
@@ -33,7 +33,7 @@ export declare class GroupItem {
     /**
      * Index
      */
-    index: number;
+    index?: number;
     clickListen(): void;
     render(): any;
 }

package/dist/types/components/menu-about/test/menu-about.ct.d.ts

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

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

@@ -7,7 +7,7 @@ export declare class MenuItem {
      *
      * @since 2.2.0
      */
-    label: string;
+    label?: string;
     /**
      * Move the Tab to a top position.
      */
@@ -23,15 +23,15 @@ export declare class MenuItem {
      *
      * @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0
      */
-    tabIcon: string;
+    tabIcon?: string;
     /**
      * Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons
      */
-    icon: string;
+    icon?: string;
     /**
      * Show notification count on tab
      */
-    notifications: number;
+    notifications?: number;
     /**
      * State to display active
      */
@@ -43,7 +43,7 @@ export declare class MenuItem {
     /** @internal */
     isCategory: boolean;
     hostElement: HTMLIxMenuItemElement;
-    tooltip: string;
+    tooltip?: string;
     menuExpanded: boolean;
     private buttonRef;
     private isHostedInsideCategory;
@@ -51,6 +51,7 @@ export declare class MenuItem {
     private observer;
     componentWillLoad(): void;
     componentWillRender(): void;
+    setTooltip(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     onIconChange(): void;

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

@@ -1,6 +1,7 @@
+import { showModal } from './../../utils/modal';
 declare global {
     interface Window {
-        showModal: any;
+        showModal: typeof showModal;
+        __counter: number;
     }
 }
-export {};

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

@@ -11,12 +11,12 @@ export declare class ModalHeader {
     /**
      * Icon of the Header
      */
-    icon: string;
-    onIconChange(icon: string): void;
+    icon?: string;
+    onIconChange(icon?: string): void;
     /**
      * Icon color
      */
-    iconColor: string;
+    iconColor?: string;
     /**
      * Emits when close icon is clicked and closes the modal
      * Can be prevented, in which case only the event is triggered, and the modal remains open

package/dist/types/components/push-card/push-card.d.ts

@@ -11,17 +11,18 @@ export declare class PushCard {
     /**
      * Card KPI value
      */
-    notification: string;
+    notification?: string;
     /**
      * Card heading
      */
-    heading: string;
+    heading?: string;
     /**
      * Card subheading
      */
-    subheading: string;
+    subheading?: string;
     /**
      * Card variant
+     * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead.
      */
     variant: PushCardVariant;
     /**

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

@@ -81,19 +81,17 @@ export declare class Select {
     addItem: EventEmitter<string>;
     dropdownShow: boolean;
     selectedLabels: string[];
-    dropdownWrapperRef: HTMLElement;
-    dropdownAnchor: HTMLElement;
     isDropdownEmpty: boolean;
-    navigationItem: DropdownItemWrapper;
+    navigationItem?: DropdownItemWrapper;
     inputFilterText: string;
     inputValue: string;
-    private inputRef;
-    private dropdownRef;
-    private customItemsContainerRef;
-    private addItemRef;
-    private itemMutationObserver;
-    private arrowFocusController;
-    private focusControllerCallbackBind;
+    private readonly dropdownWrapperRef;
+    private readonly dropdownAnchor;
+    private inputRef?;
+    private dropdownRef?;
+    private customItemsContainerRef?;
+    private addItemRef?;
+    private arrowFocusController?;
     private itemObserver;
     get nonShadowItems(): HTMLIxSelectItemElement[];
     get visibleNonShadowItems(): HTMLIxSelectItemElement[];
@@ -109,6 +107,7 @@ export declare class Select {
     watchSelectedIndices(value: string | string[]): void;
     watchValue(value: string | string[]): void;
     watchDropdownShow(show: boolean): void;
+    private cleanupResources;
     onItemClicked(event: CustomEvent<string>): void;
     private focusDropdownItem;
     private itemClick;