@siemens/ix 2.6.1 → 2.7.0

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

@@ -26,6 +26,12 @@ export declare class ApplicationHeader {
      * @since 2.5.0
      */
     menuToggle: EventEmitter<boolean>;
+    /**
+     * Event emitted when the app switch button is clicked
+     *
+     * @since 3.0.0
+     */
+    openAppSwitch: EventEmitter<void>;
     breakpoint: Breakpoint;
     menuExpanded: boolean;
     suppressResponsive: boolean;
@@ -33,8 +39,8 @@ export declare class ApplicationHeader {
     private menuDisposable?;
     private modeDisposable?;
     private callbackUpdateAppSwitchModal?;
-    applicationLayoutContext: ContextType<typeof ApplicationLayoutContext>;
-    get contentBackground(): Element;
+    applicationLayoutContext?: ContextType<typeof ApplicationLayoutContext>;
+    get contentBackground(): Element | null;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;

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

@@ -3,7 +3,7 @@ import { AppSwitchConfiguration } from '../../utils/application-layout/context';
 export declare class ApplicationSwitchModal {
     hostElement: HTMLIxApplicationSwitchModalElement;
     /** @internal */
-    config: AppSwitchConfiguration;
+    config?: AppSwitchConfiguration;
     componentWillLoad(): void;
     render(): any;
 }

package/dist/types/components/application-sidebar/events.d.ts

@@ -1,4 +1,4 @@
 export declare class ApplicationSidebarToggleEvent extends Event {
-    readonly force?: boolean;
-    constructor(force?: boolean);
+    readonly force?: boolean | undefined;
+    constructor(force?: boolean | undefined);
 }

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

@@ -4,7 +4,7 @@ export declare class BasicNavigation {
     /**
      * Application name
      */
-    applicationName: string;
+    applicationName?: string;
     /**
      * Hide application header. Will disable responsive feature of basic navigation.
      */
@@ -23,8 +23,8 @@ export declare class BasicNavigation {
     onBreakpointsChange(breakpoints: Breakpoint[]): void;
     breakpoint: Breakpoint;
     get menu(): HTMLIxMenuElement | null;
-    private modeDisposable;
-    private contextProvider;
+    private modeDisposable?;
+    private contextProvider?;
     private onContentClick;
     componentWillLoad(): void;
     componentDidRender(): void;

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

@@ -35,7 +35,7 @@ export declare class Blind {
     constructor();
     private onHeaderClick;
     componentDidLoad(): void;
-    get content(): Element;
+    get content(): Element | null;
     animation(isCollapsed: boolean): void;
     private animateCollapse;
     private rotateChevronDown;

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

@@ -5,11 +5,11 @@ export declare class BreadcrumbItem {
     /**
      * Breadcrumb label
      */
-    label: string;
+    label?: string;
     /**
      * Icon to be displayed next ot the label
      */
-    icon: string;
+    icon?: string;
     /**@internal */
     ghost: boolean;
     /**@internal */

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

@@ -2,7 +2,7 @@ import { FunctionalComponent } from '../../stencil-public-runtime';
 import { A11yAttributes } from '../utils/a11y';
 import { ButtonVariant } from './button';
 export type ButtonAlignment = 'center' | 'start';
-export declare const getButtonClasses: (variant: ButtonVariant, outline: boolean, ghost: boolean, iconOnly: boolean, iconOval: boolean, selected: boolean, disabled: boolean) => {
+export declare const getButtonClasses: (variant: ButtonVariant, outline: boolean, ghost: boolean, iconOnly: boolean | undefined, iconOval: boolean | undefined, selected: boolean, disabled: boolean) => {
     btn: boolean;
     'btn-danger': boolean;
     'btn-outline-danger': boolean;

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

@@ -0,0 +1,31 @@
+import { ButtonVariant } from './button';
+export interface IxButtonComponent {
+    /**
+     * Annotate with @Prop() decorator
+     */
+    variant: ButtonVariant;
+    /**
+     * Annotate with @Prop() decorator
+     */
+    outline: boolean;
+    /**
+     * Annotate with @Prop() decorator
+     */
+    ghost: boolean;
+    /**
+     * Annotate with @Prop({ reflect: true }) decorator
+     */
+    disabled: boolean;
+    /**
+     * Annotate with @Prop() decorator
+     */
+    type: 'button' | 'submit';
+    /**
+     * Annotate with @Prop() decorator
+     */
+    loading: boolean;
+    /**
+     * Annotate with @Prop() decorator
+     */
+    icon?: string;
+}

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

@@ -1,5 +1,6 @@
+import { IxButtonComponent } from './button-component';
 export type ButtonVariant = 'danger' | 'primary' | 'secondary';
-export declare class Button {
+export declare class Button implements IxButtonComponent {
     /**
      * Button variant
      * @since 2.3.0 - variant danger

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

@@ -19,7 +19,7 @@ export declare class CardAccordion {
     accordionExpand: EventEmitter<CardAccordionExpandChangeEvent>;
     expandContent: boolean;
     onInitialExpandChange(): void;
-    get expandedContent(): Element;
+    get expandedContent(): Element | null;
     onExpandActionClick(event: Event): void;
     private scrollExpandedContentIntoView;
     componentWillLoad(): void;

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

@@ -117,7 +117,7 @@ export declare class CategoryFilter {
      * Event dispatched whenever the filter gets cleared.
      */
     filterCleared: EventEmitter<void>;
-    get dropdown(): HTMLIxDropdownElement;
+    get dropdown(): HTMLIxDropdownElement | null;
     watchFilterState(newValue: FilterState): void;
     private preventDefault;
     private onFocusIn;

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class Chip {
-    el: HTMLIxChipElement;
+    hostElement: HTMLIxChipElement;
     /**
      * Chip variant
      */
@@ -17,7 +17,7 @@ export declare class Chip {
     /**
      * Show icon
      */
-    icon: string;
+    icon?: string;
     /**
      * Custom background color.
      * Only has an effect on chips with `variant='custom'`

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

@@ -1,4 +1,6 @@
 import { IxDatePickerComponent } from '../date-picker/date-picker-component';
+import { ButtonVariant } from '../button/button';
+import { IxButtonComponent } from '../button/button-component';
 export type DateDropdownOption = {
     id: string;
     label: string;
@@ -13,7 +15,7 @@ export type DateRangeChangeEvent = {
 /**
  * @since 2.1.0
  */
-export declare class DateDropdown implements Omit<IxDatePickerComponent, 'corners'> {
+export declare class DateDropdown implements Omit<IxDatePickerComponent, 'corners'>, Omit<IxButtonComponent, 'type' | 'icon'> {
     hostElement: HTMLIxDateDropdownElement;
     /**
      * Disable the button that opens the dropdown containing the date picker.
@@ -59,6 +61,22 @@ export declare class DateDropdown implements Omit<IxDatePickerComponent, 'corner
      * if not set or no according date range label is found, nothing will be selected
      */
     dateRangeId: string;
+    /**
+     * Button variant
+     */
+    variant: ButtonVariant;
+    /**
+     * Outline button
+     */
+    outline: boolean;
+    /**
+     * Button with no background or outline
+     */
+    ghost: boolean;
+    /**
+     * Loading button
+     */
+    loading: boolean;
     onDateRangeIdChange(): void;
     /**
      * Controls whether the user is allowed to pick custom date ranges in the component.

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

@@ -107,10 +107,10 @@ export declare class DateInput implements IxInputFieldComponent<string> {
     private readonly dropdownElementRef;
     private classObserver?;
     private invalidReason?;
+    private disposableChangesAndVisibilityObservers?;
     updateFormInternalValue(value: string): void;
     connectedCallback(): void;
     componentWillLoad(): void;
-    componentDidRender(): void;
     private updatePaddings;
     disconnectedCallback(): void;
     watchValue(): void;

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

@@ -124,8 +124,8 @@ export declare class DatePicker implements IxDatePickerComponent {
      * Get the currently selected date-range.
      */
     getCurrentDate(): Promise<{
-        from: string;
-        to: string;
+        from: string | undefined;
+        to: string | undefined;
     }>;
     currFromDate?: DateTime;
     currToDate?: DateTime;

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

@@ -23,14 +23,14 @@ declare class DropdownController {
     connected(dropdown: DropdownInterface): void;
     disconnected(dropdown: DropdownInterface): void;
     removeFromSubmenuIds(id: string): void;
-    getDropdownById(id: string): DropdownInterface;
+    getDropdownById(id: string): DropdownInterface | undefined;
     discoverSubmenus(): void;
     present(dropdown: DropdownInterface): void;
     dismissChildren(uid: string): void;
     dismiss(dropdown: DropdownInterface): void;
     dismissAll(ignoreBehaviorForIds?: string[], ignoreRelatedDropdowns?: boolean): void;
     dismissOthers(uid: string): void;
-    pathIncludesTrigger(eventTargets: EventTarget[]): HTMLElement;
+    pathIncludesTrigger(eventTargets: EventTarget[]): HTMLElement | undefined;
     private pathIncludesDropdown;
     private buildComposedPath;
     private addOverlayListeners;

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

@@ -90,7 +90,7 @@ export declare class Dropdown implements ComponentInterface, DropdownInterface {
     willDismiss(): boolean;
     willPresent(): boolean;
     get dropdownItems(): HTMLIxDropdownItemElement[];
-    get slotElement(): HTMLSlotElement;
+    get slotElement(): HTMLSlotElement | null;
     private disposeClickListener?;
     private disposeKeyListener?;
     private addEventListenersFor;

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

@@ -5,6 +5,6 @@ export declare class DropdownHeader {
     /**
      * Display name of the header
      */
-    label: string;
+    label?: string;
     render(): any;
 }

package/dist/types/components/empty-state/empty-state.d.ts

@@ -11,7 +11,7 @@ export declare class EmptyState {
     /**
      * Optional empty state icon
      */
-    icon: string;
+    icon?: string;
     /**
      * Empty state header
      */
@@ -19,11 +19,11 @@ export declare class EmptyState {
     /**
      * Optional empty state sub header
      */
-    subHeader: string;
+    subHeader?: string;
     /**
      * Optional empty state action
      */
-    action: string;
+    action?: string;
     /**
      * Empty state action click event
      */

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

@@ -1,5 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export declare class ExpandingSearch {
+import { ButtonVariant } from '../button/button';
+import { IxButtonComponent } from '../button/button-component';
+export declare class ExpandingSearch implements Omit<IxButtonComponent, 'type' | 'icon' | 'disabled' | 'loading'> {
     /**
      * Search icon
      */
@@ -17,6 +19,18 @@ export declare class ExpandingSearch {
      * @since 1.6.0
      */
     fullWidth: boolean;
+    /**
+     * button variant
+     */
+    variant: ButtonVariant;
+    /**
+     * Outline button
+     */
+    outline: boolean;
+    /**
+     * Button with no background or outline
+     */
+    ghost: boolean;
     isFieldChanged: boolean;
     expanded: boolean;
     hasFocus: boolean;

package/dist/types/components/field-wrapper/helper-text-util.d.ts

@@ -4,7 +4,7 @@ export declare function hasAnyText({ invalidText, warningText, infoText, validTe
     infoText?: string;
     validText?: string;
     helperText?: string;
-}): string;
+}): string | undefined;
 export declare function renderHelperText({ isInvalid, invalidText, isWarning, warningText, isInfo, infoText, isValid, validText, helperText, }: {
     isInvalid: boolean;
     invalidText?: string;

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class FilterChip {
-    el: HTMLIxFilterChipElement;
+    hostElement: HTMLIxFilterChipElement;
     /**
      * If true the filter chip will be in disabled state
      */

package/dist/types/components/flip-tile/flip-tile.d.ts

@@ -4,7 +4,7 @@ export declare class FlipTile {
     /**
      * Variation of the Flip
      */
-    state: FlipTileState;
+    state?: FlipTileState;
     /**
      * Height interpreted as REM
      * @since 1.5.0
@@ -19,7 +19,7 @@ export declare class FlipTile {
     isFlipAnimationActive: boolean;
     private readonly ANIMATION_DURATION;
     private contentItems;
-    private observer;
+    private observer?;
     componentDidLoad(): void;
     componentWillLoad(): void;
     disconnectedCallback(): void;

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

@@ -50,7 +50,7 @@ export declare class Group {
     selectedChanged(newSelected: boolean): void;
     get dropdownItems(): Element[];
     get groupItems(): Array<HTMLIxGroupItemElement>;
-    get groupContent(): Element;
+    get groupContent(): Element | null | undefined;
     private onExpandClick;
     private onHeaderClick;
     private changeHeaderSelection;

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

@@ -8,7 +8,7 @@ export declare class IconButton {
      *
      * @since 2.1.0
      */
-    a11yLabel: string;
+    a11yLabel?: string;
     /**
      * Variant of button
      * @since 2.3.0 - variant danger
@@ -29,7 +29,7 @@ export declare class IconButton {
     /**
      * Icon name
      */
-    icon: string;
+    icon?: string;
     /**
      * Size of icon in button
      *
@@ -41,11 +41,11 @@ export declare class IconButton {
      *
      * @deprecated since 2.1.0 use `icon-color`
      */
-    color: string;
+    color?: string;
     /**
      * Color of icon in  button
      */
-    iconColor: string;
+    iconColor?: string;
     /**
      * Disabled
      */

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

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

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

@@ -103,11 +103,13 @@ export declare class Input implements IxInputFieldComponent<string> {
     private readonly slotEndRef;
     private readonly slotStartRef;
     private readonly inputId;
+    private disposableChangesAndVisibilityObservers?;
     updateClassMappings(result: ValidationResults): void;
     updateInputType(): void;
     componentWillLoad(): void;
-    componentDidRender(): void;
+    connectedCallback(): void;
     private updatePaddings;
+    disconnectedCallback(): void;
     updateFormInternalValue(value: string): void;
     /** @internal */
     getAssociatedFormElement(): Promise<HTMLFormElement | null>;

package/dist/types/components/input/input.util.d.ts

@@ -11,3 +11,5 @@ export declare function applyPaddingEnd(inputElement: HTMLElement | null, width:
 }): void;
 export declare function adjustPaddingForStartAndEnd(startElement: HTMLElement | null, endElement: HTMLElement | null, inputElement: HTMLElement | null): void;
 export declare function getAriaAttributesForInput(component: IxInputFieldComponent): A11yAttributes;
+export type DisposableChangesAndVisibilityObservers = () => void;
+export declare const addDisposableChangesAndVisibilityObservers: (element: HTMLElement, callback: () => void) => DisposableChangesAndVisibilityObservers;

package/dist/types/components/input/number-input.d.ts

@@ -102,9 +102,11 @@ export declare class NumberInput implements IxInputFieldComponent<number> {
     private readonly slotEndRef;
     private readonly slotStartRef;
     private readonly numberInputId;
+    private disposableChangesAndVisibilityObservers?;
     updateClassMappings(result: ValidationResults): void;
     componentWillLoad(): void;
-    componentDidRender(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private updatePaddings;
     updateFormInternalValue(value: number): void;
     /** @internal */

package/dist/types/components/input/tests/validation.ct.d.ts

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

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

@@ -4,7 +4,7 @@ export declare class InputGroup {
     inputPaddingLeft: number;
     inputPaddingRight: number;
     private get inputElement();
-    private observer;
+    private observer?;
     componentWillLoad(): void;
     componentDidRender(): void;
     private onValidInput;

package/dist/types/components/key-value/key-value.d.ts

@@ -8,7 +8,7 @@ export declare class KeyValue {
     /**
      * Optional key value icon
      */
-    icon: string;
+    icon?: string;
     /**
      * Key value label
      */
@@ -20,6 +20,6 @@ export declare class KeyValue {
     /**
      * Optional key value text value
      */
-    value: string;
+    value?: string;
     render(): any;
 }

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

@@ -2,15 +2,15 @@ export declare class Kpi {
     /**
      *
      */
-    label: string;
+    label?: string;
     /**
      *
      */
-    value: string | number;
+    value?: string | number;
     /**
      *
      */
-    unit: string;
+    unit?: string;
     /**
      *
      */

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

@@ -9,7 +9,7 @@ export declare class LinkButton {
     /**
      * Url for the link button
      */
-    url: string;
+    url?: string;
     /**
      * Specifies where to open the link
      *

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

@@ -6,11 +6,11 @@ export declare class MapNavigation {
     /**
      * Application name
      */
-    applicationName: string;
+    applicationName?: string;
     /**
      * Navigation title
      */
-    navigationTitle: string;
+    navigationTitle?: string;
     /**
      * Hide the sidebar context menu button when set to true
      */

package/dist/types/components/map-navigation-overlay/map-navigation-overlay.d.ts

@@ -5,21 +5,21 @@ export declare class MapNavigationOverlay {
     /**
      * Title of overlay
      */
-    name: string;
+    name?: string;
     /**
      * Icon of overlay
      */
-    icon: string;
+    icon?: string;
     /**
      * Color of icon
      *
      * @deprecated since 2.1.0. Use `icon-color`
      */
-    color: string;
+    color?: string;
     /**
      * Color of icon
      */
-    iconColor: string;
+    iconColor?: string;
     /**
      * Event closed
      */

package/dist/types/components/menu/menu-expand-icon.d.ts

@@ -8,7 +8,7 @@ export declare class MenuExpandIcon {
     /** Whether the menu expand icon displays the expanded state or not */
     expanded: boolean;
     /** Controls which icon is displayed */
-    breakpoint: Breakpoint;
+    breakpoint?: Breakpoint;
     /** Display as pinned */
     pinned: boolean;
     getSmallScreenIcon(): any;

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

@@ -81,6 +81,12 @@ export declare class Menu {
      * Map Sidebar expanded
      */
     mapExpandChange: EventEmitter<boolean>;
+    /**
+     * Event emitted when the app switch button is clicked
+     *
+     * @since 3.0.0
+     */
+    openAppSwitch: EventEmitter<void>;
     showPinned: boolean;
     mapExpand: boolean;
     breakpoint: Breakpoint;
@@ -89,18 +95,18 @@ export declare class Menu {
     applicationLayoutContext?: ContextType<typeof ApplicationLayoutContext>;
     private isTransitionDisabled;
     private readonly isVisible;
-    get popoverArea(): Element;
-    get menu(): Element;
+    get popoverArea(): Element | null;
+    get menu(): Element | null;
     get menuItemsContainer(): HTMLDivElement;
     get overlayContainer(): HTMLDivElement;
     get menuItems(): Element[];
     get menuBottomItems(): Element[];
-    get homeTab(): Element;
+    get homeTab(): Element | null;
     get moreItemsDropdown(): HTMLElement;
     get isMoreItemsDropdownEmpty(): boolean;
     get moreItemsDropdownItems(): NodeListOf<Element>;
-    get activeMoreTabContainer(): Element;
-    get activeMoreTab(): Element;
+    get activeMoreTabContainer(): Element | null;
+    get activeMoreTab(): Element | null;
     get aboutPopoverContainer(): HTMLElement;
     get aboutNewsPopover(): HTMLIxMenuAboutNewsElement;
     get aboutTab(): HTMLElement | null;
@@ -152,5 +158,6 @@ export declare class Menu {
     private onMenuItemsClick;
     private isHiddenFromViewport;
     private sidebarToggle;
+    private showAppSwitch;
     render(): any;
 }

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

@@ -5,7 +5,7 @@ export declare class MenuAbout {
     /**
      * Active tab
      */
-    activeTabLabel: string;
+    activeTabLabel?: string;
     /**
      * Content of the header
      */

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

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

package/dist/types/components/menu-about-news/menu-about-news.d.ts

@@ -7,7 +7,7 @@ export declare class MenuAboutNews {
     /**
      * Title of the about news
      */
-    label: string;
+    label?: string;
     /**
      *
      */
@@ -15,7 +15,7 @@ export declare class MenuAboutNews {
     /**
      * Subtitle of the about news
      */
-    aboutItemLabel: string;
+    aboutItemLabel?: string;
     /**
      * Bottom offset
      */