@siemens/ix 2.0.0-beta.0 → 2.0.0

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

@@ -0,0 +1,36 @@
+import { Breakpoint } from '../utils/breakpoints';
+import { IxTheme } from '../utils/theme-switcher';
+/** @internal */
+export declare class Application {
+  hostElement: HTMLIxApplicationElement;
+  /**
+   * Application theme
+   */
+  theme: IxTheme;
+  /**
+   * Use the system appearance dark or light
+   */
+  themeSystemAppearance: boolean;
+  /**
+   * Change the responsive layout of the menu structure
+   */
+  forceBreakpoint: Breakpoint | undefined;
+  forceLayoutChange(newMode: Breakpoint | undefined): void;
+  /**
+   * Supported layouts
+   */
+  breakpoints: Breakpoint[];
+  onBreakpointsChange(breakpoints: Breakpoint[]): void;
+  breakpoint: Breakpoint;
+  applicationSidebarSlotted: boolean;
+  private contextProvider;
+  get menu(): HTMLIxMenuElement | null;
+  get applicationSidebarSlot(): HTMLSlotElement;
+  private modeDisposable;
+  private onContentClick;
+  componentWillLoad(): void;
+  disconnectedCallback(): void;
+  private changeTheme;
+  onApplicationSidebarChange(): void;
+  render(): any;
+}

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

@@ -1,14 +1,11 @@
-import { Mode } from '../utils/screen/mode';
+import { Breakpoint } from '../utils/breakpoints';
 export declare class ApplicationHeader {
   hostElement: HTMLIxApplicationHeaderElement;
   /**
    * Application name
    */
   name: string;
-  /**
-   * @internal
-   */
-  mode: Mode;
+  breakpoint: Breakpoint;
   menuExpanded: boolean;
   private menuDisposable?;
   private modeDisposable?;

package/dist/types/components/application-header/test/application-headet.ct.d.ts

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

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

@@ -0,0 +1,7 @@
+/** @internal */
+export declare class ApplicationSidebar {
+  hostElement: HTMLIxApplicationSidebarElement;
+  visible: boolean;
+  listenToggleEvent(): void;
+  render(): any;
+}

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

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

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

@@ -1,4 +1,4 @@
-import { Mode } from '../utils/screen/mode';
+import { Breakpoint } from '../utils/breakpoints';
 export declare class BasicNavigation {
   hostElement: HTMLIxBasicNavigationElement;
   /**
@@ -9,9 +9,21 @@ export declare class BasicNavigation {
    * Hide application header. Will disable responsive feature of basic navigation.
    */
   hideHeader: boolean;
-  mode: Mode;
+  onHideHeaderChange(): void;
+  /**
+   * Change the responsive layout of the menu structure
+   */
+  forceBreakpoint: Breakpoint | undefined;
+  forceLayoutChange(newMode: Breakpoint | undefined): void;
+  /**
+   * Supported layouts
+   */
+  breakpoints: Breakpoint[];
+  onBreakpointsChange(breakpoints: Breakpoint[]): void;
+  breakpoint: Breakpoint;
   get menu(): HTMLIxMenuElement | null;
   private modeDisposable;
+  private contextProvider;
   private onContentClick;
   componentWillLoad(): void;
   componentDidRender(): void;

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

@@ -1,4 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { CardVariant } from '../card/card';
+export type BlindVariant = CardVariant | 'outline';
 export declare class Blind {
   /**
    * Collapsed state
@@ -8,18 +10,28 @@ export declare class Blind {
    * Label of blind
    */
   label: string;
+  /**
+   * Secondary label inside blind header
+   * @since 2.0.0
+   */
+  sublabel: string;
   /**
    * Optional icon to be displayed next to the header label
    * @since 1.5.0
    */
   icon: string;
+  /**
+   * Blind variant
+   * @since 2.0.0
+   */
+  variant: BlindVariant;
   /**
    * Collapsed state changed
    */
   collapsedChange: EventEmitter<boolean>;
   hostElement: HTMLIxBlindElement;
   private chevronRef;
-  private id;
+  private blindId;
   constructor();
   private onHeaderClick;
   componentDidLoad(): void;

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class Breadcrumb {
+  hostElement: HTMLIxBreadcrumbElement;
   /**
    * Excess items will get hidden inside of dropdown
    */
@@ -8,10 +9,18 @@ export declare class Breadcrumb {
    * Items will be accessible through a dropdown
    */
   nextItems: string[];
+  onNextItemsChange(): void;
   /**
    * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
    */
   ghost: boolean;
+  /**
+   * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list
+   * with conditionally hidden previous items
+   *
+   * @since 2.0.0
+   */
+  ariaLabelPreviousButton: string;
   /**
    * Crumb item clicked event
    */
@@ -25,24 +34,16 @@ export declare class Breadcrumb {
   }>;
   previousButtonRef: HTMLElement;
   nextButtonRef: HTMLElement;
-  hostElement: HTMLIxBreadcrumbElement;
-  get breadcrumbItems(): HTMLIxBreadcrumbItemElement[];
-  get crumbItems(): Element[];
-  items: {
-    label: string;
-    icon?: string;
-  }[];
+  items: HTMLIxBreadcrumbItemElement[];
+  isPreviousDropdownExpanded: boolean;
   private mutationObserver;
+  private previousButtonId;
+  private previousDropdownId;
   private onItemClick;
   componentDidLoad(): void;
   componentWillLoad(): void;
-  private getItems;
   disconnectedCallback(): void;
-  private animationFadeOut;
-  private animationFadeIn;
-  private handleLastButtonRef;
-  private sliceHiddenItems;
-  private clickItem;
-  private renderBreadcrumbItems;
+  private onChildMutation;
+  private getItems;
   render(): any;
 }

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

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

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

@@ -1,4 +1,7 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BreadcrumbItemLinkTarget = '_self' | '_blank' | '_parent' | '_top' | string;
 export declare class BreadcrumbItem {
+  hostElement: HTMLIxBreadcrumbItemElement;
   /**
    * Breadcrumb label
    */
@@ -7,5 +10,17 @@ export declare class BreadcrumbItem {
    * Icon to be displayed next ot the label
    */
   icon: string;
+  /**@internal */
+  ghost: boolean;
+  /**@internal */
+  visible: boolean;
+  /**@internal */
+  showChevron: boolean;
+  /** @internal */
+  isDropdownTrigger: boolean;
+  /**@internal */
+  itemClick: EventEmitter<string>;
+  componentDidLoad(): void;
+  animationFadeIn(): void;
   render(): any;
 }

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

@@ -1,4 +1,6 @@
+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) => {
   btn: boolean;
   'btn-primary': boolean;
@@ -12,3 +14,26 @@ export declare const getButtonClasses: (variant: ButtonVariant, outline: boolean
   selected: boolean;
   disabled: boolean;
 };
+export type BaseButtonProps = {
+  type: string;
+  variant: ButtonVariant;
+  outline: boolean;
+  ghost: boolean;
+  iconOnly: boolean;
+  iconOval: boolean;
+  selected: boolean;
+  disabled: boolean;
+  loading: boolean;
+  icon: string;
+  onClick?: Function;
+  ariaAttributes?: A11yAttributes;
+  extraClasses?: {
+    [key: string]: boolean;
+  };
+  iconSize?: string;
+  iconColor?: string;
+  alignment?: ButtonAlignment;
+  tabIndex?: number;
+  afterContent?: any;
+};
+export declare function BaseButton(props: BaseButtonProps, children: any): any;

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

@@ -8,20 +8,10 @@ export declare class Button {
    * Outline button
    */
   outline: boolean;
-  /**
-   * Invisible button
-   *
-   * @deprecated use ghost property
-   */
-  invisible: boolean;
   /**
    * Button with no background or outline
    */
   ghost: boolean;
-  /**
-   * Show button as selected. Should be used with outline or ghost
-   */
-  selected: boolean;
   /**
    * Disable the button
    */
@@ -40,6 +30,10 @@ export declare class Button {
    * Icon name
    */
   icon: string;
+  /** @internal */
+  alignment: 'center' | 'start';
+  /** @internal */
+  iconSize: '12' | '16' | '24';
   hostElement: HTMLIxButtonElement;
   /**
    * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)

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

@@ -1,4 +1,4 @@
-export type CardVariant = 'insight' | 'notification' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success';
+export type CardVariant = 'insight' | 'notification' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'primary';
 /**
  * @since 1.6.0
  */

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

@@ -18,11 +18,13 @@ export declare class CategoryFilter {
     operator: LogicalFilterOperator;
   }>;
   /**
-   * When set this will initially populate the component with the provided search criteria.
-   * This will trigger all input events accordingly.
-   * @deprecated Will be removed with 2.0.0. Use the member filterState instead.
+   * If true the filter will be in disabled state
    */
-  initialState: FilterState;
+  disabled: boolean;
+  /**
+   * If true the filter will be in readonly mode
+   */
+  readonly: boolean;
   /**
    * A set of search criteria to populate the component with.
    */
@@ -84,6 +86,10 @@ export declare class CategoryFilter {
    * i18n
    */
   i18nPlainText: string;
+  /**
+   * Event dispatched whenever the a category gets selected in the dropdown
+   */
+  categoryChanged: EventEmitter<string>;
   /**
    * Event dispatched whenever the text input changes.
    */
@@ -114,13 +120,14 @@ export declare class CategoryFilter {
   private getFilterChipLabel;
   private getFilteredSuggestions;
   private hasCategorySelection;
-  private displayDropdown;
   private renderPlainSuggestions;
+  private renderOperatorButton;
   private renderCategoryValues;
   private renderDropdownContent;
   private renderCategorySelection;
   private getDropdownHeader;
   componentDidRender(): void;
   private getResetButton;
+  private getIconColor;
   render(): any;
 }

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

@@ -17,7 +17,7 @@ export declare class Chip {
   /**
    * Show icon
    */
-  icon: string | undefined;
+  icon: string;
   /**
    * Custom color for pill. Only working for `variant='custom'`
    */
@@ -30,12 +30,6 @@ export declare class Chip {
    * Show chip with outline style
    */
   outline: boolean;
-  /**
-   * Fire event if close button is clicked
-   *
-   *  @deprecated Will be removed in 2.0.0. Use `closeChip`
-   */
-  close: EventEmitter;
   /**
    * Fire event if close button is clicked
    *

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

@@ -0,0 +1,31 @@
+import { Breakpoint } from '../utils/breakpoints';
+type GridBreakpoint = Breakpoint | '';
+export type ColumnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';
+/**
+ * @since 2.0.0
+ */
+export declare class Col {
+  static Breakpoints: GridBreakpoint[];
+  /**
+   * Size of the column
+   */
+  size?: ColumnSize;
+  /**
+   * Size of the column for sm screens
+   */
+  sizeSm?: ColumnSize;
+  /**
+   * Size of the column for md screens
+   */
+  sizeMd?: ColumnSize;
+  /**
+   * Size of the column for lg screens
+   */
+  sizeLg?: ColumnSize;
+  onResize(): void;
+  private getSize;
+  private getColumnSize;
+  private getColumnSizeStyling;
+  render(): any;
+}
+export {};

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

@@ -0,0 +1,7 @@
+/** @internal */
+export declare class Content {
+  hostElement: HTMLIxContentElement;
+  isContentHeaderSlotted: boolean;
+  get contentHeaderSlot(): HTMLSlotElement;
+  render(): any;
+}

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

@@ -26,7 +26,7 @@ export declare class Dropdown {
    */
   anchor: string | HTMLElement;
   /**
-   * Close behavior
+   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
    */
   closeBehavior: 'inside' | 'outside' | 'both' | boolean;
   /**
@@ -76,6 +76,7 @@ export declare class Dropdown {
   private localUId;
   constructor();
   get dropdownItems(): HTMLIxDropdownItemElement[];
+  get slotElement(): HTMLSlotElement;
   private addEventListenersFor;
   private removeEventListenersFor;
   private registerListener;
@@ -83,7 +84,7 @@ export declare class Dropdown {
   private resolveElement;
   changedShow(newShow: boolean): Promise<void>;
   changedTrigger(newTriggerValue: string | HTMLElement, oldTriggerValue: string | HTMLElement): void;
-  clickOutside(event: Event): void;
+  clickOutside(event: PointerEvent): void;
   keydown(event: KeyboardEvent): void;
   private isNestedDropdown;
   private isAnchorSubmenu;
@@ -93,6 +94,7 @@ export declare class Dropdown {
   private applyDropdownPosition;
   componentDidLoad(): Promise<void>;
   componentDidRender(): Promise<void>;
+  private isClickInsideDropdown;
   disconnectedCallback(): void;
   /**
    * Update position of dropdown

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

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

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

@@ -1,4 +1,5 @@
 import { ButtonVariant } from '../button/button';
+import { AlignedPlacement } from '../dropdown/placement';
 export type DropdownButtonVariant = ButtonVariant;
 /**
  * @since 1.3.0
@@ -17,11 +18,6 @@ export declare class DropdownButton {
    * Button with no background or outline
    */
   ghost: boolean;
-  /**
-   * Active button (has no effect)
-   * @deprecated Will be removed in 3.0.0
-   */
-  active: boolean;
   /**
    * Disable button
    */
@@ -34,6 +30,12 @@ export declare class DropdownButton {
    * Button icon
    */
   icon: string;
+  /**
+   * Placement of the dropdown
+   *
+   * @since 2.0.0
+   */
+  placement: AlignedPlacement;
   dropdownAnchor: HTMLElement;
   private getTriangle;
   render(): any;

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

@@ -21,17 +21,11 @@ export declare class DropdownItem {
    * Whether the item is checked or not. If true a checkmark will mark the item as checked.
    */
   checked: boolean;
-  /**
-   * @internal
-   */
+  /** @internal */
   isSubMenu: boolean;
-  /**
-   * @internal
-   */
+  /** @internal */
   suppressChecked: boolean;
-  /**
-   * Click on item
-   */
+  /** @internal */
   itemClick: EventEmitter<HTMLIxDropdownItemElement>;
   /**
    * Internal usage only

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

@@ -20,13 +20,6 @@ export declare class EventListItem {
    * Show chevron on right side of the event list item
    */
   chevron: boolean;
-  /**
-   * Opacity of the status indicator.
-   * Defaults to 1.0
-   *
-   * @deprecated Will be removed in 2.0.0
-   */
-  opacity: number;
   /**
    * Event list item click
    */

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

@@ -5,6 +5,11 @@ export declare class FilterChip {
    * If true the filter chip will be in disabled state
    */
   disabled: boolean;
+  /**
+   * If true the filter chip will be in readonly mode
+   * @since 2.0.0
+   */
+  readonly: boolean;
   /**
    * Close clicked
    */

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

@@ -1,20 +1,10 @@
 import { FlipTileState } from './flip-tile-state';
 export declare class FlipTile {
-  private readonly ANIMATION_DURATION;
-  private contentContainerElement;
-  private contentItems;
   hostElement: HTMLIxFlipTileElement;
-  index: number;
-  isFlipAnimationActive: boolean;
   /**
    * Variation of the Flip
    */
   state: FlipTileState;
-  /**
-   * Tmp property name
-   * @deprecated Will be removed in 2.0.0. Setting this property has no effect
-   */
-  footer: string;
   /**
    * Height interpreted as REM
    * @since 1.5.0
@@ -25,9 +15,17 @@ export declare class FlipTile {
    * @since 1.5.0
    */
   width: number | 'auto';
+  index: number;
+  isFlipAnimationActive: boolean;
+  private readonly ANIMATION_DURATION;
+  private contentItems;
+  private observer;
   componentDidLoad(): void;
+  componentWillLoad(): void;
+  disconnectedCallback(): void;
+  private updateContentItems;
+  private updateContentVisibility;
   private toggleIndex;
-  private toggleContentItem;
   private doFlipAnimation;
   render(): any;
 }

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

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

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

@@ -1,3 +1,9 @@
 export declare class FlipTileContent {
+  /**
+   * Controls the visibility of the content
+   *
+   * @internal
+   */
+  contentVisible: boolean;
   render(): any;
 }

package/dist/types/components/form-field/form-field.d.ts

@@ -0,0 +1,10 @@
+export declare class FormField {
+  hostElement: HTMLIxFormFieldElement;
+  /**
+   * Label
+   */
+  label: string;
+  private get inputElement();
+  componentWillLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,18 @@
+/**
+ * @since 2.0.0
+ */
+export declare class LayoutGrid {
+  /**
+   * The grid will not have any horizontal padding
+   */
+  noMargin: boolean;
+  /**
+   * Grid gap
+   */
+  gap: '8' | '12' | '16' | '24';
+  /**
+   * Overwrite the default number of columns. Choose between 2 and 12 columns.
+   */
+  columns: number;
+  render(): any;
+}

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

@@ -0,0 +1,2 @@
+import { BaseButtonProps } from '../button/base-button';
+export declare function BaseIconButton(props: Omit<BaseButtonProps, 'type'>): any;

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

@@ -1,6 +1,6 @@
-import { Button, ButtonVariant } from '../button/button';
+import { ButtonVariant } from '../button/button';
 export type IconButtonVariant = ButtonVariant;
-export declare class IconButton implements Button {
+export declare class IconButton {
   hostElement: HTMLIxIconButtonElement;
   /**
    * Variant of button
@@ -10,12 +10,6 @@ export declare class IconButton implements Button {
    * Button outline
    */
   outline: boolean;
-  /**
-   * Button invisible
-   *
-   * @deprecated Use ghost property
-   */
-  invisible: boolean;
   /**
    * Button invisible
    */
@@ -38,10 +32,6 @@ export declare class IconButton implements Button {
    * Color of icon in  button
    */
   color: string;
-  /**
-   * Selected state only working with outline or invisible
-   */
-  selected: boolean;
   /**
    * Disabled
    */
@@ -63,6 +53,5 @@ export declare class IconButton implements Button {
   componentDidLoad(): void;
   dispatchFormEvents(): void;
   private getIconSizeClass;
-  private getIconButtonClasses;
   render(): any;
 }