@siemens/ix 2.0.0-beta.0 → 2.0.0

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

@@ -15,7 +15,7 @@ export declare class MenuItem {
   /**
    * Icon name from @siemens/ix-icons
    *
-   * @deprecated Use `icon` property. Will be removed in 3.0.0
+   * @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0
    */
   tabIcon: string;
   /**
@@ -37,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/modal/modal.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';
-export type IxModalDynamicSize = 'full-width';
+export type IxModalDynamicSize = 'full-width' | 'full-screen';
 export type IxModalSize = IxModalFixedSize | IxModalDynamicSize;
 export declare class Modal {
   private ariaAttributes;

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/pagination/test/pagination.ct.d.ts

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

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
+   * 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,10 +59,16 @@ 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 | string[]>;
+  itemSelectionChange: EventEmitter<string[]>;
   /**
    * Event dispatched whenever the text input changes.
    *
@@ -67,7 +80,7 @@ export declare class Select {
    */
   addItem: EventEmitter<string>;
   dropdownShow: boolean;
-  value: string[];
+  selectedLabels: string[];
   dropdownWrapperRef: HTMLElement;
   dropdownAnchor: HTMLElement;
   isDropdownEmpty: boolean;
@@ -85,11 +98,14 @@ 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;
@@ -99,7 +115,7 @@ export declare class Select {
   onKeyDown(event: KeyboardEvent): Promise<void>;
   private onEnterNavigation;
   private onArrowNavigation;
-  private setHoverEffectForNavigatedSelectItem;
+  private applyFocusTo;
   private filterItemsWithTypeahead;
   private removeHiddenFromItems;
   private clearInput;

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

@@ -0,0 +1,70 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SliderMarker = Array<number>;
+/**
+ * @since 2.0.0
+ *
+ * @slot label-start - Element will be displayed at the start of the slider
+ * @slot label-end - Element will be displayed at the end of the slider
+ */
+export declare class IxSlider {
+  hostElement: HTMLIxSliderElement;
+  /**
+   * Legal number intervals
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step
+   */
+  step: number;
+  /**
+   * Minimum slider value
+   */
+  min: number;
+  /**
+   * Maximum slider value
+   */
+  max: number;
+  /**
+   * Current value of the slider
+   */
+  value: number;
+  /**
+   * Define tick marker on the slider. Marker has to be within slider min/max
+   */
+  marker: SliderMarker;
+  /**
+   * Show a trace line
+   */
+  trace: boolean;
+  /**
+   * Define the start point of the trace line
+   */
+  traceReference: number;
+  /**
+   * Show control as disabled
+   */
+  disabled: boolean;
+  /**
+   * Show error state and message
+   */
+  error: boolean | string;
+  /**
+   *
+   */
+  valueChange: EventEmitter<number>;
+  rangeInput: number;
+  rangeMin: number;
+  rangeMax: number;
+  rangeTraceReference: number;
+  showTooltip: boolean;
+  private a11yAttributes;
+  get tooltip(): HTMLIxTooltipElement;
+  get pseudoThumb(): HTMLElement;
+  get slider(): HTMLInputElement;
+  onShowTooltipChange(): void;
+  componentWillLoad(): void;
+  private updateRangeVariables;
+  private onInput;
+  private emitInputEvent;
+  private isMarkerActive;
+  onPointerUp(): void;
+  render(): any;
+}

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

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

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

@@ -43,7 +43,6 @@ export declare class SplitButton {
   buttonClick: EventEmitter<MouseEvent>;
   private triggerElement;
   private dropdownElement;
-  get splitItems(): HTMLIxSplitButtonItemElement[];
   private linkTriggerRef;
   componentDidLoad(): void;
   render(): any;

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

@@ -1,4 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.
+ */
 export declare class SplitButtonItem {
   /**
    * Dropdown icon

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,12 +21,19 @@ 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;
   styleNextArrow: {};
   stylePreviousArrow: {};
   scrollActionAmount: number;
+  private windowStartSize;
   private clickAction;
   onWindowResize(): number;
   private getTabs;
@@ -45,5 +53,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/toggle-button/toggle-button.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ButtonVariant } from '../button/button';
+/**
+ * @since 2.0.0
+ */
+export declare class ToggleButton {
+  /**
+   * 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;
+  /**
+   * Disable the button
+   */
+  disabled: boolean;
+  /**
+   * Loading button
+   */
+  loading: boolean;
+  /**
+   * Icon name
+   */
+  icon: string;
+  /**
+   * Show button as pressed
+   */
+  pressed: boolean;
+  /**
+   * Pressed change event
+   */
+  pressedChange: EventEmitter<boolean>;
+  private isIllegalToggleButtonConfig;
+  private logIllegalConfig;
+  onVariantChange(): void;
+  onGhostChange(): void;
+  onOutlineChange(): void;
+  componentDidLoad(): void;
+  private dispatchPressedChange;
+  render(): any;
+}

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

@@ -24,6 +24,8 @@ export declare class Tooltip {
    * @since 1.5.0
    */
   placement: 'top' | 'right' | 'bottom' | 'left';
+  /** @internal */
+  animationFrame: boolean;
   visible: boolean;
   hostElement: HTMLIxTooltipElement;
   private observer;
@@ -34,8 +36,12 @@ export declare class Tooltip {
   private tooltipCloseTimeInMS;
   private get arrowElement();
   private destroyAutoUpdate;
-  private showTooltip;
-  private hideTooltip;
+  private onTooltipShow;
+  private onTooltipHide;
+  /** @internal */
+  showTooltip(anchorElement: any): Promise<void>;
+  /** @internal */
+  hideTooltip(): Promise<void>;
   private computeArrowPosition;
   private computeTooltipPosition;
   private queryAnchorElements;

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

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

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TreeContext, TreeModel, UpdateCallback } from './tree-model';
 export declare class Tree {
-  host: HTMLIxTreeElement;
+  hostElement: HTMLIxTreeElement;
   /**
    * Initial root element will not be rendered
    */
@@ -45,6 +45,7 @@ export declare class Tree {
   private updates;
   private observer;
   private hasFirstRender;
+  private updatePadding;
   private getVirtualizerOptions;
   private setContext;
   private getContext;

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

@@ -1,16 +1,39 @@
 export type TypographyVariants = 'x-small' | 'small' | 'caption' | 'caption-single' | 'default' | 'default-single' | 'default-title' | 'default-title-single' | 'large' | 'large-single' | 'large-title' | 'large-title-single' | 'h2' | 'display-large';
 export type TypographyColors = 'contrast' | 'std' | 'soft' | 'weak' | 'inv-contrast' | 'inv-std' | 'inv-soft' | 'inv-weak' | 'alarm';
+type TypographyFormatLabel = 'label' | 'label-xs' | 'label-sm' | 'label-lg';
+type TypographyFormatBody = 'body' | 'body-xs' | 'body-sm' | 'body-lg';
+type TypographyFormatDisplay = 'display' | 'display-xs' | 'display-sm' | 'display-lg' | 'display-xl' | 'display-xxl';
+type TypographyFormatHeading = 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1';
+type TypographyFormatCode = 'code' | 'code-sm' | 'code-lg';
+export type TypographyFormat = TypographyFormatLabel | TypographyFormatBody | TypographyFormatDisplay | TypographyFormatHeading | TypographyFormatCode;
+export type TextDecoration = 'none' | 'underline' | 'line-through';
 /**
- * @internal
+ * @since 2.0.0
  */
 export declare class IxTypography {
   /**
    * Font variant based on theme variables
+   *
+   * @deprecated Use `format` property
+   * @internal
    */
   variant: TypographyVariants;
+  /**
+   * Text format
+   */
+  format: TypographyFormat;
   /**
    * Text color based on theme variables
    */
   color: TypographyColors;
+  /**
+   * Display text bold
+   */
+  bold: boolean;
+  /**
+   * Text decoration
+   */
+  textDecoration: TextDecoration;
   render(): any;
 }
+export {};

package/dist/types/components/utils/a11y.d.ts

@@ -1,5 +1,5 @@
 export declare const a11yBoolean: (value: boolean) => "true" | "false";
-export declare const a11yHostAttributes: (hostElement: HTMLElement) => Record<A11yAttributeName, any>;
+export declare const a11yHostAttributes: (hostElement: HTMLElement, ignoreAttributes?: A11yAttributeName[]) => Record<A11yAttributeName, any>;
 type PartialRecord<K extends keyof any, T> = {
   [P in K]?: T;
 };

package/dist/types/components/utils/application-layout/context.d.ts

@@ -0,0 +1,6 @@
+export declare const closestIxMenu: (element: Element) => HTMLIxMenuElement;
+export declare const ApplicationLayoutContext: Readonly<import("../context").Context<{
+  hideHeader: boolean;
+  host: 'basic-navigation' | 'map-navigation' | null;
+  sidebar?: boolean;
+}>>;

package/dist/types/components/utils/application-layout/index.d.ts

@@ -0,0 +1 @@
+export { applicationLayoutService } from './service';

package/dist/types/components/utils/application-layout/service.d.ts

@@ -0,0 +1,16 @@
+import { Breakpoint } from '../breakpoints';
+import { TypedEvent } from '../typed-event';
+declare class ApplicationLayoutService {
+  #private;
+  constructor();
+  get breakpoint(): "sm" | "md" | "lg";
+  get onChange(): TypedEvent<"sm" | "md" | "lg">;
+  get isDetectionEnabled(): boolean;
+  private onResize;
+  disableBreakpointDetection(): void;
+  enableBreakpointDetection(): void;
+  setBreakpoint(breakpoint: Breakpoint): void;
+  setBreakpoints(breakpoints: Breakpoint[]): void;
+}
+export declare const applicationLayoutService: ApplicationLayoutService;
+export {};

package/dist/types/components/utils/breakpoints.d.ts

@@ -0,0 +1,8 @@
+declare const mediaQueries: {
+  readonly sm: "(max-width: 48em)";
+  readonly md: "(min-width: 48.0625em) and (max-width: 80em)";
+  readonly lg: "(min-width: 80.0625em)";
+};
+export type Breakpoint = keyof typeof mediaQueries;
+export declare const matchBreakpoint: (breakpoint: Breakpoint) => boolean;
+export {};

package/dist/types/components/utils/context.d.ts

@@ -0,0 +1,57 @@
+/**
+ * A Context object defines an optional initial value for a Context, as well as a name identifier for debugging purposes.
+ */
+export type Context<T> = {
+  name: string;
+  initialValue?: T;
+};
+/**
+ * An unknown context type
+ */
+export type UnknownContext = Context<unknown>;
+/**
+ * A helper type which can extract a Context value type from a Context type
+ */
+export type ContextType<T extends UnknownContext> = T extends Context<infer Y> ? Y : never;
+/**
+ * A function which creates a Context value object
+ */
+export declare function createContext<T>(name: string, initialValue?: T): Readonly<Context<T>>;
+/**
+ * A callback which is provided by a context requester and is called with the value satisfying the request.
+ * This callback can be called multiple times by context providers as the requested value is changed.
+ */
+export type ContextCallback<ValueType> = (value: ValueType, unsubscribe?: () => void) => void;
+/**
+ * An event fired by a context requester to signal it desires a named context.
+ *
+ * A provider should inspect the `context` property of the event to determine if it has a value that can
+ * satisfy the request, calling the `callback` with the requested value if so.
+ *
+ * If the requested context event contains a truthy `subscribe` value, then a provider can call the callback
+ * multiple times if the value is changed, if this is the case the provider should pass an `unsubscribe`
+ * function to the callback which requesters can invoke to indicate they no longer wish to receive these updates.
+ */
+export declare class ContextEvent<T extends UnknownContext> extends Event {
+  readonly context: T;
+  readonly callback: ContextCallback<ContextType<T>>;
+  readonly subscribe?: boolean;
+  constructor(context: T, callback: ContextCallback<ContextType<T>>, subscribe?: boolean);
+}
+declare global {
+  interface HTMLElementEventMap {
+    /**
+     * A 'context-request' event can be emitted by any element which desires
+     * a context value to be injected by an external provider.
+     */
+    'context-request': ContextEvent<UnknownContext>;
+  }
+}
+export type ContextConsumerSubscription = {
+  unsubscribe: () => void;
+};
+export declare function useContextConsumer<T extends HTMLElement, C extends UnknownContext>(hostElement: T, context: C, onContextReceived: (context: ContextType<C>, unsubscribe?: () => void) => void, subscribe?: boolean): ContextConsumerSubscription;
+export type ContextProvider<C extends Context<{}> = Context<unknown>> = {
+  emit: (context: ContextType<C>) => void;
+};
+export declare function useContextProvider<X extends {}, C extends Context<X>, T extends HTMLElement = HTMLElement>(hostElement: T, context: C, contextPayload?: ContextType<C>): ContextProvider<C>;

package/dist/types/components/utils/shadow-dom.d.ts

@@ -1,3 +1,4 @@
 export declare function closestElement(selector: string, el: any): any;
-export declare function getSlottedElements(slot: any): any;
+export declare function getSlottedElements<R = any>(slot: any): R[];
 export declare function hasSlottedElements(slot: any): boolean;
+export declare function containsElement(target: Element, element: Element): boolean;