@siemens/ix 1.6.3 → 2.0.0-beta.0

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

@@ -1,10 +1,13 @@
 import { Mode } from '../utils/screen/mode';
 export declare class ApplicationHeader {
-  host: HTMLIxApplicationHeaderElement;
+  hostElement: HTMLIxApplicationHeaderElement;
   /**
    * Application name
    */
   name: string;
+  /**
+   * @internal
+   */
   mode: Mode;
   menuExpanded: boolean;
   private menuDisposable?;
@@ -12,6 +15,7 @@ export declare class ApplicationHeader {
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  private isLogoSlotted;
   private attachSiemensLogoIfLoaded;
   private onMenuClick;
   render(): any;

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

@@ -0,0 +1,17 @@
+/**
+ * @since 2.0.0
+ */
+export declare class Avatar {
+  hostElement: HTMLIxAvatarElement;
+  /**
+   * Display a avatar image
+   *
+   */
+  image: string;
+  /**
+   * Display the initials of the user. Will be overwritten by image
+   *
+   */
+  initials: string;
+  render(): any;
+}

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

@@ -10,12 +10,11 @@ export declare class BasicNavigation {
    */
   hideHeader: boolean;
   mode: Mode;
-  get menu(): HTMLIxMenuElement;
+  get menu(): HTMLIxMenuElement | null;
   private modeDisposable;
+  private onContentClick;
   componentWillLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
-  private appendMenu;
-  private adjustMenuHeight;
   render(): any;
 }

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

@@ -1,4 +1,5 @@
-export declare const getButtonClasses: (variant: 'Primary' | 'Secondary', outline: boolean, ghost: boolean, iconOnly: boolean, iconOval: boolean, selected: boolean, disabled: boolean) => {
+import { ButtonVariant } from './button';
+export declare const getButtonClasses: (variant: ButtonVariant, outline: boolean, ghost: boolean, iconOnly: boolean, iconOval: boolean, selected: boolean, disabled: boolean) => {
   btn: boolean;
   'btn-primary': boolean;
   'btn-outline-primary': boolean;

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

@@ -1,4 +1,4 @@
-export type ButtonVariant = 'Primary' | 'Secondary';
+export type ButtonVariant = 'primary' | 'secondary';
 export declare class Button {
   /**
    * Button variant
@@ -30,6 +30,16 @@ export declare class Button {
    * Type of the button
    */
   type: 'button' | 'submit';
+  /**
+   * Loading button
+   *
+   * @since 2.0.0
+   */
+  loading: boolean;
+  /**
+   * Icon name
+   */
+  icon: string;
   hostElement: HTMLIxButtonElement;
   /**
    * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)

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

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

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type ContentHeaderVariant = 'Primary' | 'Secondary';
+export type ContentHeaderVariant = 'primary' | 'secondary';
 export declare class ContentHeader {
   /**
    * Variant of content header

package/dist/types/components/date-time-card/date-time-card.d.ts

@@ -3,7 +3,6 @@ export type DateTimeCardCorners = 'rounded' | 'left' | 'right';
  * @internal
  */
 export declare class DateTimeCard {
-  hostElement: HTMLIxDateTimeCardElement;
   /**
    * set styles
    */

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

@@ -45,5 +45,6 @@ export declare class Drawer {
   private clickedOutside;
   private slideOutRight;
   private slideInRight;
+  componentDidLoad(): void;
   render(): any;
 }

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

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

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

@@ -1,11 +1,17 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { Placement } from './placement';
+import { AlignedPlacement } from './placement';
 /**
  * @internal
  */
 export type DropdownTriggerEvent = 'click' | 'hover' | 'focus';
 export declare class Dropdown {
   hostElement: HTMLIxDropdownElement;
+  /**
+   * Suppress the automatic placement of the dropdown.
+   *
+   * @since 2.0.0
+   */
+  suppressAutomaticPlacement: boolean;
   /**
    * Show dropdown
    */
@@ -26,22 +32,11 @@ export declare class Dropdown {
   /**
    * Placement of the dropdown
    */
-  placement: Placement;
+  placement: AlignedPlacement;
   /**
    * Position strategy
    */
   positioningStrategy: 'absolute' | 'fixed';
-  /**
-   * Adjust dropdown width to the parent width
-   * @deprecated Will be removed in 2.0.0. Property has a typo use `adjustDropdownWidthToReferenceWidth` instead.
-   */
-  adjustDropdownWidthToReferenceWith: boolean;
-  /**
-   * Adjust dropdown width to the parent width
-   *
-   * @deprecated Will be removed. Not used anymore
-   */
-  adjustDropdownWidthToReferenceWidth: boolean;
   /**
    * An optional header shown at the top of the dropdown
    */
@@ -78,6 +73,7 @@ export declare class Dropdown {
   private dropdownRef;
   private toggleBind;
   private openBind;
+  private localUId;
   constructor();
   get dropdownItems(): HTMLIxDropdownItemElement[];
   private addEventListenersFor;
@@ -88,6 +84,7 @@ export declare class Dropdown {
   changedShow(newShow: boolean): Promise<void>;
   changedTrigger(newTriggerValue: string | HTMLElement, oldTriggerValue: string | HTMLElement): void;
   clickOutside(event: Event): void;
+  keydown(event: KeyboardEvent): void;
   private isNestedDropdown;
   private isAnchorSubmenu;
   private toggle;

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

@@ -2,7 +2,6 @@ export declare const top: 'top';
 export declare const bottom: 'bottom';
 export declare const right: 'right';
 export declare const left: 'left';
-export declare type BasePlacement = typeof top | typeof bottom | typeof right | typeof left;
-export declare type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
-export declare type PlacementWithAlignment = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
-export declare type Placement = AutoPlacement | BasePlacement | PlacementWithAlignment;
+export type Alignment = 'start' | 'end';
+export type Side = 'top' | 'right' | 'bottom' | 'left';
+export type AlignedPlacement = `${Side}-${Alignment}`;

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

@@ -4,6 +4,7 @@ export type DropdownButtonVariant = ButtonVariant;
  * @since 1.3.0
  */
 export declare class DropdownButton {
+  hostElement: HTMLIxDropdownButtonElement;
   /**
    * Button variant
    */
@@ -17,7 +18,8 @@ export declare class DropdownButton {
    */
   ghost: boolean;
   /**
-   * Active button
+   * Active button (has no effect)
+   * @deprecated Will be removed in 3.0.0
    */
   active: boolean;
   /**

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

@@ -0,0 +1,10 @@
+/**
+ * @since 2.0.0
+ */
+export declare class DropdownHeader {
+  /**
+   * Display name of the header
+   */
+  label: string;
+  render(): any;
+}

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

@@ -21,6 +21,14 @@ export declare class DropdownItem {
    * Whether the item is checked or not. If true a checkmark will mark the item as checked.
    */
   checked: boolean;
+  /**
+   * @internal
+   */
+  isSubMenu: boolean;
+  /**
+   * @internal
+   */
+  suppressChecked: boolean;
   /**
    * Click on item
    */
@@ -29,5 +37,6 @@ export declare class DropdownItem {
    * Internal usage only
    */
   emitItemClick(): Promise<void>;
+  private isIconOnly;
   render(): any;
 }

package/dist/types/components/event-list/event-list.d.ts

@@ -2,7 +2,7 @@ export declare class EventList {
   private readonly mutationObserver;
   private static readonly fadeOutDuration;
   private static readonly fadeInDuration;
-  el: HTMLIxEventListElement;
+  hostElement: HTMLIxEventListElement;
   /**
    * Determines the height of list items.
    * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.
@@ -22,10 +22,12 @@ export declare class EventList {
    * Display a chevron icon in list items. Defaults to 'false'
    */
   chevron: boolean;
+  watchChevron(chevron: boolean | undefined): void;
   componentDidLoad(): void;
   private onMutation;
   private setCustomHeight;
   private triggerFadeOut;
   private triggerFadeIn;
+  private handleChevron;
   render(): any;
 }

package/dist/types/components/event-list-item/event-list-item.d.ts

@@ -1,9 +1,11 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class EventListItem {
-  el: HTMLIxEventListItemElement;
   /**
    * Color of the status indicator.
-   * Allowed values are all Core UI color names.
+   * You can find a list of all available colors in our documentation.
+   * Example values are `--theme-color-alarm` or `color-alarm`
+   *
+   * @see https://ix.siemens.io/docs/theming/colors/
    */
   color: string;
   /**

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

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

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

@@ -1,7 +1,7 @@
 export declare enum FlipTileState {
-  None = "None",
-  Info = "Info",
-  Warning = "Warning",
-  Alarm = "Alarm",
-  Primary = "Primary"
+  None = "none",
+  Info = "info",
+  Warning = "warning",
+  Alarm = "alarm",
+  Primary = "primary"
 }

package/dist/types/components/group/group-context-menu.d.ts

@@ -1,9 +1,8 @@
 export declare class GroupContextMenu {
-  host: HTMLIxGroupContextMenuElement;
+  hostElement: HTMLIxGroupContextMenuElement;
   showContextMenu: boolean;
-  get dropdownElement(): HTMLIxDropdownElement;
-  get groupDropdownItem(): NodeListOf<HTMLIxGroupDropdownItemElement>;
+  private getTrigger;
   private configureDropdown;
-  componentWillRender(): void;
+  private onSlotChange;
   render(): any;
 }

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class Group {
+  hostElement: HTMLIxGroupElement;
   /**
    * Prevent header from being selectable
    */
@@ -41,22 +42,20 @@ export declare class Group {
    * Group collapsed
    */
   collapsedChanged: EventEmitter<boolean>;
-  hostElement: HTMLIxGroupElement;
   itemSelected: boolean;
-  get dropdownItems(): HTMLIxGroupDropdownItemElement[];
-  get groupItems(): Array<HTMLIxGroupItemElement>;
-  get groupContent(): Element;
-  get footer(): Element;
   dropdownTriggerRef: HTMLElement;
   slotSize: number;
-  constructor();
-  onKeyDown(event: KeyboardEvent): Promise<void>;
+  footerVisible: boolean;
+  private observer;
+  get dropdownItems(): Element[];
+  get groupItems(): Array<HTMLIxGroupItemElement>;
+  get groupContent(): Element;
   private onExpandClick;
   private onHeaderClick;
   private onItemClick;
   private setGroupSelection;
+  private onSlotChange;
   componentWillRender(): void;
-  private observer;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   render(): any;

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

@@ -25,11 +25,13 @@ export declare class IconButton implements Button {
    */
   oval: boolean;
   /**
-   * Button icon
+   * Icon name
    */
   icon: string;
   /**
    * Size of icon in button
+   *
+   * @deprecated Only size 32 will be removed in 3.0.0
    */
   size: '32' | '24' | '16' | '12';
   /**
@@ -48,6 +50,12 @@ export declare class IconButton implements Button {
    * Type of the button
    */
   type: 'button' | 'submit';
+  /**
+   * Loading button
+   *
+   * @since 2.0.0
+   */
+  loading: boolean;
   /**
    * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)
    */

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * @since 2.0.0
+ */
+export declare class LinkButton {
+  /**
+   * Disable the link button
+   */
+  disabled: boolean;
+  /**
+   * Url for the link button
+   */
+  url: string;
+  /**
+   * Specifies where to open the link
+   *
+   * https://www.w3schools.com/html/html_links.asp
+   */
+  target: '_self' | '_blank' | '_parent' | '_top';
+  render(): any;
+}

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

@@ -15,7 +15,6 @@ export declare class MapNavigation {
    * Hide the sidebar context menu button when set to true
    */
   hideContextMenu: boolean;
-  isSidebarOpen: boolean;
   /**
    * Navigation toggled
    */
@@ -24,6 +23,8 @@ export declare class MapNavigation {
    * Context menu clicked
    */
   contextMenuClick: EventEmitter<void>;
+  isSidebarOpen: boolean;
+  hasContentHeader: boolean;
   get menu(): HTMLIxMenuElement;
   get menuOverlay(): Element;
   get mapNavMenu(): Element;
@@ -55,5 +56,6 @@ export declare class MapNavigation {
    * @deprecated Will be removed in 2.0.0. Use slot based approach
    */
   closeOverlay(): Promise<void>;
+  private checkHasContentHeader;
   render(): any;
 }

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

@@ -3,8 +3,16 @@
  */
 export declare class BurgerMenu {
   /**
-   * Is menu displayed as expanded
+   * Accessibility label for the burger menu button (MANDATORY)
+   */
+  ixAriaLabel: string;
+  /**
+   * Does burger menu button display the expanded or the not expanded state
    */
   expanded: boolean;
+  /**
+   * Display as pinned
+   */
+  pinned: boolean;
   render(): any;
 }

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

@@ -35,6 +35,28 @@ export declare class Menu {
    * Extra menu items will be collapsed to 'show more' menu item.
    */
   maxVisibleMenuItems: number;
+  /**
+   * Accessibility i18n label for the burger menu of the sidebar
+   */
+  i18nExpandSidebar: string;
+  /**
+   */
+  expand: boolean;
+  /**
+   * Menu stays pinned to the left
+   */
+  pinned: boolean;
+  pinnedChange(newPinned: boolean): void;
+  /**
+   * Change the responsive layout of the menu structure
+   */
+  forceLayout: Mode | undefined;
+  forceLayoutChange(newMode: Mode | undefined): void;
+  /**
+   * Supported layouts
+   */
+  supportedModes: Mode[];
+  supportedModesChange(modes: Mode[]): void;
   /**
    */
   i18nLegal: string;
@@ -50,13 +72,6 @@ export declare class Menu {
   /**
    */
   i18nCollapse: string;
-  /**
-   */
-  i18nMore: string;
-  /**
-   * Expand menu
-   */
-  expand: boolean;
   /**
    * Menu expanded
    */
@@ -65,22 +80,18 @@ export declare class Menu {
    * Map Sidebar expanded
    */
   mapExpandChange: EventEmitter<boolean>;
-  showMoreItems: boolean;
-  visibleMenuItems: number;
-  countMoreNotifications: number;
+  showPinned: boolean;
   mapExpand: boolean;
-  activeTab: HTMLIxMenuItemElement;
-  isMoreTabEmpty: boolean;
+  activeTab: HTMLIxMenuItemElement | null;
   mode: Mode;
-  private readonly domObserver;
-  onWindowResize(): void;
-  private handleNodeMutation;
-  private onDomChange;
+  itemsScrollShadowTop: boolean;
+  itemsScrollShadowBottom: boolean;
+  private isTransitionDisabled;
   private readonly isVisible;
   get popoverArea(): Element;
-  get overlayContainer(): Element;
-  get invisibleContainer(): Element;
   get menu(): Element;
+  get menuItemsContainer(): HTMLDivElement;
+  get overlayContainer(): HTMLDivElement;
   get menuItems(): Element[];
   get menuBottomItems(): Element[];
   get homeTab(): Element;
@@ -90,42 +101,38 @@ export declare class Menu {
   get activeMoreTabContainer(): Element;
   get activeMoreTab(): Element;
   get aboutPopoverContainer(): HTMLElement;
-  get aboutPopover(): HTMLIxMenuAboutNewsElement;
+  get aboutsNewsPopover(): HTMLIxMenuAboutNewsElement;
   get aboutTab(): HTMLElement;
-  get about(): HTMLIxMenuAboutElement;
-  get settings(): HTMLIxMenuSettingsElement;
+  get about(): HTMLIxMenuAboutElement | null;
+  get settings(): HTMLIxMenuSettingsElement | null;
   get isSettingsEmpty(): boolean;
-  get avatarItem(): HTMLIxMenuAvatarElement;
-  get tabsContainer(): HTMLDivElement;
-  private showTab;
+  get tabsContainer(): HTMLIxMenuElement;
   componentDidLoad(): void;
   componentWillLoad(): void;
   componentWillRender(): void;
   componentDidRender(): void;
+  private setPinned;
+  private onModeChange;
   private appendFragments;
   private resetActiveTab;
-  private isMenuItemActive;
   private appendTabs;
-  private appendAvatar;
   private getAboutPopoverVerticalPosition;
   private appendAboutNewsPopover;
-  private appendSettings;
-  private appendAbout;
-  private getMoreNotificationsCount;
-  private getAvailableHeight;
-  private getMaxTabCount;
   /**
    * Toggle map sidebar expand
    * @param show
    */
   toggleMapExpand(show?: boolean): Promise<void>;
-  private skipAllOverlayAnimations;
-  private skipOverlayAnimationFor;
   /**
    * Toggle menu
    * @param show
    */
   toggleMenu(show?: boolean): Promise<void>;
+  /**
+   * Disable transition of overlay while menu animation is running.
+   */
+  private checkTransition;
+  private isOverlayVisible;
   /**
    * Toggle Settings tabs
    * @param show
@@ -137,9 +144,13 @@ export declare class Menu {
    */
   toggleAbout(show: boolean): Promise<void>;
   private resetOverlay;
-  private showMoreButton;
   private getCollapseText;
   private getCollapseIcon;
   private isMenuItemClicked;
+  private handleOverflowIndicator;
+  onOverlayClose(): void;
+  private animateOverlayFadeIn;
+  private animateOverlayFadeOut;
+  private onMenuItemsClick;
   render(): any;
 }

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

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

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

@@ -16,7 +16,10 @@ export declare class MenuAbout {
   /**
    * About and Legal closed
    */
-  close: EventEmitter<MouseEvent>;
+  close: EventEmitter<{
+    nativeEvent: MouseEvent;
+    name: string;
+  }>;
   labels: string[];
   get aboutItems(): HTMLIxMenuAboutItemElement[];
   private setTab;

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

@@ -0,0 +1,37 @@
+/**
+ * @since 2.0.0
+ */
+export declare class MenuCategory {
+  hostElement: HTMLIxMenuCategoryElement;
+  /**
+   * Display name of the category
+   */
+  label: string;
+  /**
+   * Icon of the category
+   */
+  icon: string;
+  /**
+   * Show notification count on the category
+   */
+  notifications: number;
+  menuExpand: boolean;
+  showItems: boolean;
+  showDropdown: boolean;
+  nestedItems: HTMLIxMenuItemElement[];
+  private observer;
+  private menuItemsContainer;
+  private ixMenu;
+  private isNestedItemActive;
+  private getNestedItems;
+  private getNestedItemsHeight;
+  private onExpandCategory;
+  private animateFadeOut;
+  private animateFadeIn;
+  private onCategoryClicked;
+  private onNestedItemsChanged;
+  private isCategoryItemListVisible;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

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

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

@@ -1,3 +1,6 @@
+/**
+ * @slot menu-item-label Custom label
+ */
 export declare class MenuItem {
   /**
    * Move the Tab to a top position.
@@ -7,14 +10,18 @@ export declare class MenuItem {
    * Caution: this is no longer working. Please use slot="bottom" instead.
    *
    * Place tab on bottom
-   *
-   * @deprecated Will be removed in 2.0.0. Replaced by slot based implementation
    */
   bottom: boolean;
   /**
    * Icon name from @siemens/ix-icons
+   *
+   * @deprecated Use `icon` property. Will be removed in 3.0.0
    */
   tabIcon: string;
+  /**
+   * Icon name from @siemens/ix-icons
+   */
+  icon: string;
   /**
    * Show notification count on tab
    */