@siemens/ix 2.0.0-beta.0 → 2.0.0-beta.1

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

@@ -8,6 +8,11 @@ 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

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/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/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-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
@@ -34,6 +35,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/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/grid.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @since 2.0.0
+ */
+export declare class Grid {
+  /**
+   * The grid will not have any horizontal padding
+   */
+  noPadding: boolean;
+  /**
+   * Remove the gap between rows
+   */
+  noRowGap: boolean;
+  /**
+   * 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;
 }

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

@@ -0,0 +1,54 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ButtonVariant } from '../button/button';
+/**
+ * @since 2.0.0
+ */
+export declare class IconToggleButton {
+  /**
+   * Button variant.
+   * Important: Variant 'primary' can only be combined with either outline or ghost.
+   */
+  variant: ButtonVariant;
+  /**
+   * Outline button
+   */
+  outline: boolean;
+  /**
+   * Button with no background or outline
+   */
+  ghost: boolean;
+  /**
+   * Icon name
+   */
+  icon: string;
+  /**
+   * Show button as pressed
+   */
+  pressed: boolean;
+  /**
+   * Size of icon in button
+   */
+  size: '24' | '16' | '12';
+  /**
+   * Disable the button
+   */
+  disabled: boolean;
+  /**
+   * Loading button
+   */
+  loading: boolean;
+  /**
+   * Pressed change event
+   */
+  pressedChange: EventEmitter<boolean>;
+  hostElement: HTMLIxIconToggleButtonElement;
+  private isIllegalToggleButtonConfig;
+  private logIllegalConfig;
+  onVariantChange(): void;
+  onGhostChange(): void;
+  onOutlineChange(): void;
+  componentDidLoad(): void;
+  private dispatchPressedChange;
+  private getIconSizeClass;
+  render(): any;
+}

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

@@ -1,5 +1,15 @@
 export declare class InputGroup {
-  host: HTMLIxInputGroupElement;
+  hostElement: HTMLIxInputGroupElement;
+  inputPaddingLeft: number;
+  inputPaddingRight: number;
+  private get inputElement();
+  componentWillLoad(): void;
   componentDidRender(): void;
+  private onValidInput;
+  private onInvalidInput;
+  private prepareInputElement;
+  private startSlotChanged;
+  private endSlotChanged;
+  private getChildrenWidth;
   render(): any;
 }

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

@@ -31,6 +31,7 @@ export declare class MapNavigation {
   get sidebar(): Element;
   get overlay(): Element;
   componentDidRender(): void;
+  componentWillLoad(): void;
   private appendMenu;
   /**
    * Change the visibility of the sidebar

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;
   /**
@@ -47,16 +49,6 @@ export declare class Menu {
    */
   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;
@@ -83,9 +75,10 @@ export declare class Menu {
   showPinned: boolean;
   mapExpand: boolean;
   activeTab: HTMLIxMenuItemElement | null;
-  mode: Mode;
+  breakpoint: Breakpoint;
   itemsScrollShadowTop: boolean;
   itemsScrollShadowBottom: boolean;
+  applicationLayoutContext: ContextType<typeof ApplicationLayoutContext>;
   private isTransitionDisabled;
   private readonly isVisible;
   get popoverArea(): Element;
@@ -101,7 +94,7 @@ export declare class Menu {
   get activeMoreTabContainer(): Element;
   get activeMoreTab(): Element;
   get aboutPopoverContainer(): HTMLElement;
-  get aboutsNewsPopover(): HTMLIxMenuAboutNewsElement;
+  get aboutNewsPopover(): HTMLIxMenuAboutNewsElement;
   get aboutTab(): HTMLElement;
   get about(): HTMLIxMenuAboutElement | null;
   get settings(): HTMLIxMenuSettingsElement | null;
@@ -112,7 +105,7 @@ export declare class Menu {
   componentWillRender(): void;
   componentDidRender(): void;
   private setPinned;
-  private onModeChange;
+  private onBreakpointChange;
   private appendFragments;
   private resetActiveTab;
   private appendTabs;
@@ -152,5 +145,7 @@ export declare class Menu {
   private animateOverlayFadeIn;
   private animateOverlayFadeOut;
   private onMenuItemsClick;
+  private isHiddenFromViewport;
+  private sidebarToggle;
   render(): any;
 }

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

@@ -37,6 +37,8 @@ export declare class MenuItem {
   hostElement: HTMLIxMenuItemElement;
   title: string;
   private observer;
+  private isHostedInsideCategory;
+  componentWillLoad(): void;
   componentWillRender(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;