@siemens/ix 1.6.3 → 2.0.0-beta.1

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/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

@@ -1,9 +1,11 @@
 import { ButtonVariant } from '../button/button';
+import { AlignedPlacement } from '../dropdown/placement';
 export type DropdownButtonVariant = ButtonVariant;
 /**
  * @since 1.3.0
  */
 export declare class DropdownButton {
+  hostElement: HTMLIxDropdownButtonElement;
   /**
    * Button variant
    */
@@ -17,7 +19,8 @@ export declare class DropdownButton {
    */
   ghost: boolean;
   /**
-   * Active button
+   * Active button (has no effect)
+   * @deprecated Will be removed in 3.0.0
    */
   active: boolean;
   /**
@@ -32,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/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/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-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/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/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/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
    */
@@ -25,21 +19,19 @@ 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';
   /**
    * Color of icon in  button
    */
   color: string;
-  /**
-   * Selected state only working with outline or invisible
-   */
-  selected: boolean;
   /**
    * Disabled
    */
@@ -48,6 +40,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)
    */
@@ -55,6 +53,5 @@ export declare class IconButton implements Button {
   componentDidLoad(): void;
   dispatchFormEvents(): void;
   private getIconSizeClass;
-  private getIconButtonClasses;
   render(): any;
 }

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

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

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/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,12 +23,15 @@ export declare class MapNavigation {
    * Context menu clicked
    */
   contextMenuClick: EventEmitter<void>;
+  isSidebarOpen: boolean;
+  hasContentHeader: boolean;
   get menu(): HTMLIxMenuElement;
   get menuOverlay(): Element;
   get mapNavMenu(): Element;
   get sidebar(): Element;
   get overlay(): Element;
   componentDidRender(): void;
+  componentWillLoad(): void;
   private appendMenu;
   /**
    * Change the visibility of the sidebar
@@ -55,5 +57,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;
 }