@siemens/ix 1.6.3 → 2.0.0-beta.1

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

@@ -1,5 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { Mode } from '../utils/screen/mode';
+import { ApplicationLayoutContext } from '../utils/application-layout/context';
+import { Breakpoint } from '../utils/breakpoints';
+import { ContextType } from '../utils/context';
 export declare class Menu {
   hostElement: HTMLIxMenuElement;
   /**
@@ -35,6 +37,18 @@ 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;
   /**
    */
   i18nLegal: string;
@@ -50,13 +64,6 @@ export declare class Menu {
   /**
    */
   i18nCollapse: string;
-  /**
-   */
-  i18nMore: string;
-  /**
-   * Expand menu
-   */
-  expand: boolean;
   /**
    * Menu expanded
    */
@@ -65,22 +72,19 @@ export declare class Menu {
    * Map Sidebar expanded
    */
   mapExpandChange: EventEmitter<boolean>;
-  showMoreItems: boolean;
-  visibleMenuItems: number;
-  countMoreNotifications: number;
+  showPinned: boolean;
   mapExpand: boolean;
-  activeTab: HTMLIxMenuItemElement;
-  isMoreTabEmpty: boolean;
-  mode: Mode;
-  private readonly domObserver;
-  onWindowResize(): void;
-  private handleNodeMutation;
-  private onDomChange;
+  activeTab: HTMLIxMenuItemElement | null;
+  breakpoint: Breakpoint;
+  itemsScrollShadowTop: boolean;
+  itemsScrollShadowBottom: boolean;
+  applicationLayoutContext: ContextType<typeof ApplicationLayoutContext>;
+  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 +94,38 @@ export declare class Menu {
   get activeMoreTabContainer(): Element;
   get activeMoreTab(): Element;
   get aboutPopoverContainer(): HTMLElement;
-  get aboutPopover(): HTMLIxMenuAboutNewsElement;
+  get aboutNewsPopover(): 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 onBreakpointChange;
   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 +137,15 @@ 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;
+  private isHiddenFromViewport;
+  private sidebarToggle;
   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
    */
@@ -30,6 +37,8 @@ export declare class MenuItem {
   hostElement: HTMLIxMenuItemElement;
   title: string;
   private observer;
+  private isHostedInsideCategory;
+  componentWillLoad(): void;
   componentWillRender(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;

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

@@ -16,7 +16,10 @@ export declare class MenuAbout {
   /**
    * Popover closed
    */
-  close: EventEmitter<MouseEvent>;
+  close: EventEmitter<{
+    nativeEvent: MouseEvent;
+    name: string;
+  }>;
   get settingsItems(): HTMLIxMenuSettingsItemElement[];
   private setTab;
   componentWillLoad(): void;

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

@@ -1,30 +1,35 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { NotificationColor } from '../utils/notification-color';
+export type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';
+export type IxModalDynamicSize = 'full-width';
+export type IxModalSize = IxModalFixedSize | IxModalDynamicSize;
 export declare class Modal {
+  private ariaAttributes;
   hostElement: HTMLIxModalElement;
   /**
-   * Should the modal be animtated
-   */
-  animation: boolean;
-  /**
+   * Modal size
    *
+   * @since 2.0.0
    */
-  ariaDescribedBy: string;
+  size: IxModalSize;
   /**
-   *
+   * Should the modal be animated
    */
-  ariaLabelledBy: string;
+  animation: boolean;
   /**
-   * Adds a dimming layer to the modal.
-   * This should only be used when it it necessary to focus the user's attention to the dialog content (e.g. errors, warnings, complex tasks).
+   * Show a backdrop behind the modal dialog
    */
-  backdrop: boolean | 'static';
+  backdrop: boolean;
   /**
-   * Backdrop class
+   * Dismiss modal on backdrop click
+   *
+   * @since 2.0.0
    */
-  backdropClass: string;
+  closeOnBackdropClick: boolean;
   /**
-   * BeforeDismiss callback
+   * Is called before the modal is dismissed.
+   *
+   * - Return `true` to proceed in dismissing the modal
+   * - Return `false` to abort in dismissing the modal
    */
   beforeDismiss: (reason?: any) => boolean | Promise<boolean>;
   /**
@@ -32,70 +37,34 @@ export declare class Modal {
    */
   centered: boolean;
   /**
-   * Content of modal
-   */
-  content: HTMLElement | string;
-  /**
-   * ESC close modal dialog
+   * Use ESC to dismiss the modal
    */
   keyboard: boolean;
   /**
-   * Optional icon displayed next to the title
+   * Dialog close
    */
-  icon: string;
+  dialogClose: EventEmitter;
   /**
-   * Color of the header {@see ix-icon}
+   * Dialog cancel
    */
-  iconColor: NotificationColor;
+  dialogDismiss: EventEmitter;
+  get dialog(): HTMLDialogElement;
+  private slideInModal;
+  private slideOutModal;
+  private onModalClick;
   /**
-   * Modal dialog class
+   * Show the dialog
    */
-  modalDialogClass: string;
+  showModal(): Promise<void>;
   /**
-   * Modal scollable
+   * Dismiss the dialog
    */
-  scrollable: boolean;
+  dismissModal<T = any>(reason?: T): Promise<void>;
   /**
-   * Modal size
+   * Close the dialog
    */
-  size: 'sm' | 'lg' | 'xl';
-  /**
-   * Header title
-   */
-  headerTitle: string;
-  /**
-   * Window class
-   */
-  windowClass: string;
-  /**
-   * Modal closed
-   */
-  closed: EventEmitter;
-  /**
-   * Modal dismissed
-   */
-  dismissed: EventEmitter;
-  private modalId;
-  private readonly onKeydown;
-  get modal(): Element;
-  get modalDialog(): Element;
-  get modalContent(): Element;
-  get modalBackdrop(): Element;
-  private slideDown;
-  private slideUp;
-  private onBackdropClick;
+  closeModal<T = any>(reason: T): Promise<void>;
   componentDidLoad(): void;
-  private handleKeydown;
-  disconnectedCallback(): void;
-  /**
-   * Dismiss modal instance
-   * @param reason
-   */
-  dismiss<T = any>(reason?: T): Promise<void>;
-  /**
-   * Close modal
-   * @param result
-   */
-  close<T = any>(result: T): Promise<void>;
+  componentWillLoad(): void;
   render(): any;
 }

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

@@ -0,0 +1,6 @@
+/**
+ * @since 2.0.0
+ */
+export declare class ModalContent {
+  render(): any;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * @since 2.0.0
+ */
+export declare class ModalFooter {
+  render(): any;
+}

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

@@ -0,0 +1,28 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @since 2.0.0
+ */
+export declare class ModalHeader {
+  hostElement: HTMLIxModalHeaderElement;
+  /**
+   * Hide the close button
+   */
+  hideClose: boolean;
+  /**
+   * Icon of the Header
+   */
+  icon: string;
+  onIconChange(icon: string): void;
+  /**
+   * Icon color
+   */
+  iconColor: string;
+  /**
+   * Close icon is clicked
+   */
+  closeClick: EventEmitter<MouseEvent>;
+  private parentDialog;
+  componentDidLoad(): void;
+  private onCloseClick;
+  render(): any;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export declare class ModalLoading {
+  render(): any;
+}

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

@@ -3,6 +3,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @since 1.5.0
  */
 export declare class Pagination {
+  private readonly baseButtonConfig;
   private readonly maxCountPages;
   hostElement: HTMLIxPaginationElement;
   /**
@@ -47,7 +48,6 @@ export declare class Pagination {
    * Item count change event
    */
   itemCountChanged: EventEmitter<number>;
-  get pageInput(): Element;
   private selectPage;
   private increase;
   private decrease;

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

@@ -0,0 +1,6 @@
+/**
+ * @since 2.0.0
+ */
+export declare class Row {
+  render(): any;
+}

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

@@ -3,10 +3,17 @@ import { IxSelectItemLabelChangeEvent } from '../select-item/events';
 export declare class Select {
   hostElement: HTMLIxSelectElement;
   /**
-   * Indices of selected items
-   * This corresponds to the value property of ix-select-items and therefor not neccessarily the indices of the items in the list.
+   * Indices of selected items.
+   * This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.
+   * @deprecated since 2.0.0. Use the `value` property instead.
    */
-  selectedIndices: string | string[];
+  selectedIndices?: string | string[];
+  /**
+   * Current selected value.
+   * This corresponds to the value property of ix-select-items
+   * @since 2.0.0
+   */
+  value?: string | string[];
   /**
    * Show clear button
    */
@@ -52,16 +59,28 @@ export declare class Select {
    @
    */
   hideListHeader: boolean;
+  /**
+   * Value changed
+   * @since 2.0.0
+   */
+  valueChange: EventEmitter<string | string[]>;
   /**
    * Item selection changed
+   * @deprecated since 2.0.0. Use `valueChange` instead.
+   */
+  itemSelectionChange: EventEmitter<string[]>;
+  /**
+   * Event dispatched whenever the text input changes.
+   *
+   * @since 2.0.0
    */
-  itemSelectionChange: EventEmitter<string | string[]>;
+  inputChange: EventEmitter<string>;
   /**
    * Item added to selection
    */
   addItem: EventEmitter<string>;
   dropdownShow: boolean;
-  value: string[];
+  selectedLabels: string[];
   dropdownWrapperRef: HTMLElement;
   dropdownAnchor: HTMLElement;
   isDropdownEmpty: boolean;
@@ -79,11 +98,15 @@ export declare class Select {
   get isSingleMode(): boolean;
   get isMultipleMode(): boolean;
   get isEveryDropdownItemHidden(): boolean;
-  watchSelectedIndices(newId: string | string[]): void;
+  watchSelectedIndices(value: string | string[]): void;
+  watchValue(value: string | string[]): void;
   onItemClicked(event: CustomEvent<string>): void;
-  private emitItemClick;
+  private itemClick;
   private emitAddItem;
-  private selectValue;
+  private toggleValue;
+  private updateSelection;
+  private emitValueChange;
+  componentDidLoad(): void;
   componentWillLoad(): void;
   onLabelChange(event: IxSelectItemLabelChangeEvent): void;
   disconnectedCallback(): void;
@@ -99,5 +122,6 @@ export declare class Select {
   private clear;
   private onInputBlur;
   private placeholderValue;
+  private isAddItemVisible;
   render(): any;
 }

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

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

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

@@ -1,11 +1,16 @@
 export declare class Spinner {
+  hostElement: HTMLIxSpinnerElement;
   /**
    * Variant of spinner
    */
-  variant: 'primary' | 'sencodary' | 'secondary';
+  variant: 'primary' | 'secondary';
   /**
    * Size of spinner
    */
-  size: 'medium' | 'large';
+  size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';
+  /**
+   * @internal
+   */
+  hideTrack: boolean;
   render(): any;
 }

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ButtonVariant } from '../button/button';
-import { Placement } from '../dropdown/placement';
+import { AlignedPlacement } from '../dropdown/placement';
 export type SplitButtonVariant = ButtonVariant;
 export declare class SplitButton {
   hostElement: HTMLIxSplitButtonElement;
@@ -12,12 +12,6 @@ export declare class SplitButton {
    * Button outline variant
    */
   outline: boolean;
-  /**
-   * Button invisible
-   *
-   * @deprecated Will be removed in 2.0.0. Use ghost property
-   */
-  invisible: boolean;
   /**
    * Button invisible
    */
@@ -31,7 +25,7 @@ export declare class SplitButton {
    */
   icon: string;
   /**
-   * Splitbutton icon
+   * Icon of the button on the right
    */
   splitIcon: string;
   /**
@@ -41,7 +35,7 @@ export declare class SplitButton {
   /**
    * Placement of the dropdown
    */
-  placement: Placement;
+  placement: AlignedPlacement;
   toggle: boolean;
   /**
    * Button clicked

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

@@ -1,3 +1,7 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type TabClickDetail = {
+  nativeEvent: MouseEvent;
+};
 export declare class TabItem {
   /**
    * Set selected tab
@@ -31,6 +35,12 @@ export declare class TabItem {
    * Set selected placement
    */
   placement: 'bottom' | 'top';
+  /**
+   * On tab click
+   *
+   * @since 2.0.0
+   */
+  tabClick: EventEmitter<TabClickDetail>;
   private tabItemClasses;
   render(): any;
 }

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class Tabs {
   hostElement: HTMLIxTabsElement;
   /**
@@ -20,6 +21,12 @@ export declare class Tabs {
    * Set placement style
    */
   placement: 'bottom' | 'top';
+  /**
+   * `selected` property changed
+   *
+   * @since 2.0.0
+   */
+  selectedChange: EventEmitter<number>;
   totalItems: number;
   currentScrollAmount: number;
   scrollAmount: number;
@@ -45,5 +52,6 @@ export declare class Tabs {
   componentDidRender(): void;
   componentWillRender(): void;
   componentDidLoad(): void;
+  onTabClick(event: CustomEvent): void;
   render(): any;
 }

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

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

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

@@ -1,7 +1,12 @@
 export declare class Tile {
+  hostElement: HTMLIxTileElement;
   /**
    * Size of the tile - one of 'small', 'medium' or 'large'
    */
   size: 'small' | 'medium' | 'big';
+  hasHeaderSlot: boolean;
+  hasFooterSlot: boolean;
+  handleHeaderSlotChange(): void;
+  handleFooterSlotChange(): void;
   render(): any;
 }

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

@@ -2,7 +2,6 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { DateTimeCardCorners } from '../date-time-card/date-time-card';
 export type TimePickerCorners = DateTimeCardCorners;
 export declare class TimePicker {
-  hostElement: HTMLIxTimePickerElement;
   /**
    * Format of time string
    *

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

@@ -1,7 +1,6 @@
 import { TypedEvent } from '../utils/typed-event';
 import { ToastConfig } from './toast-utils';
 export declare class ToastContainer {
-  host: HTMLIxToastContainerElement;
   /**
    */
   containerId: string;