@siemens/ix 1.6.2 → 2.0.0-beta.0

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

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/select/select.d.ts

@@ -4,7 +4,7 @@ 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.
+   * This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.
    */
   selectedIndices: string | string[];
   /**
@@ -56,6 +56,12 @@ export declare class Select {
    * Item selection changed
    */
   itemSelectionChange: EventEmitter<string | string[]>;
+  /**
+   * Event dispatched whenever the text input changes.
+   *
+   * @since 2.0.0
+   */
+  inputChange: EventEmitter<string>;
   /**
    * Item added to selection
    */
@@ -84,6 +90,7 @@ export declare class Select {
   private emitItemClick;
   private emitAddItem;
   private selectValue;
+  componentDidLoad(): void;
   componentWillLoad(): void;
   onLabelChange(event: IxSelectItemLabelChangeEvent): void;
   disconnectedCallback(): void;
@@ -99,5 +106,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/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;

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

@@ -31,7 +31,7 @@ export declare class Toast {
   closeToast: EventEmitter;
   progress: number;
   touched: boolean;
-  host: HTMLIxToastElement;
+  hostElement: HTMLIxToastElement;
   private getIcon;
   private close;
   render(): any;

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

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

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export declare class CuiToggle {
+export declare class Toggle {
+  hostElement: HTMLIxToggleElement;
   /**
    * Whether the slide-toggle element is checked or not.
    */
@@ -12,11 +13,6 @@ export declare class CuiToggle {
    * If true the control is in indeterminate state
    */
   indeterminate: boolean;
-  /**
-   * Basic and status colors from color palette
-   * @deprecated Will be removed in 2.0.0
-   */
-  color: string;
   /**
    * Text for on state
    */
@@ -37,9 +33,6 @@ export declare class CuiToggle {
    * An event will be dispatched each time the slide-toggle changes its value.
    */
   checkedChange: EventEmitter<boolean>;
-  hostElement: HTMLIxToggleElement;
-  onKeyDown(event: KeyboardEvent): Promise<void>;
-  private emitChange;
-  private getText;
+  onCheckedChange(newChecked: boolean): void;
   render(): any;
 }

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

@@ -1 +1,8 @@
 export declare const a11yBoolean: (value: boolean) => "true" | "false";
+export declare const a11yHostAttributes: (hostElement: HTMLElement) => Record<A11yAttributeName, any>;
+type PartialRecord<K extends keyof any, T> = {
+  [P in K]?: T;
+};
+export type A11yAttributes = PartialRecord<A11yAttributeName, any>;
+export type A11yAttributeName = 'role' | 'aria-activedescendant' | 'aria-atomic' | 'aria-autocomplete' | 'aria-braillelabel' | 'aria-brailleroledescription' | 'aria-busy' | 'aria-checked' | 'aria-colcount' | 'aria-colindex' | 'aria-colindextext' | 'aria-colspan' | 'aria-controls' | 'aria-current' | 'aria-describedby' | 'aria-description' | 'aria-details' | 'aria-disabled' | 'aria-errormessage' | 'aria-expanded' | 'aria-flowto' | 'aria-haspopup' | 'aria-hidden' | 'aria-invalid' | 'aria-keyshortcuts' | 'aria-label' | 'aria-labelledby' | 'aria-level' | 'aria-live' | 'aria-multiline' | 'aria-multiselectable' | 'aria-orientation' | 'aria-owns' | 'aria-placeholder' | 'aria-posinset' | 'aria-pressed' | 'aria-readonly' | 'aria-relevant' | 'aria-required' | 'aria-roledescription' | 'aria-rowcount' | 'aria-rowindex' | 'aria-rowindextext' | 'aria-rowspan' | 'aria-selected' | 'aria-setsize' | 'aria-sort' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'aria-valuetext';
+export {};

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

@@ -0,0 +1,15 @@
+export type DelegateConfig = {
+  parentElement?: Element;
+};
+export interface FrameworkDelegate {
+  attachView<R = HTMLElement>(view: any, config?: DelegateConfig): Promise<R>;
+  removeView(view: any): Promise<void>;
+}
+declare class DefaultFrameworkDelegate implements FrameworkDelegate {
+  attachView<R = HTMLElement>(view: any, config?: DelegateConfig): Promise<R>;
+  removeView(view: any): Promise<void>;
+}
+export declare function registerFrameworkDelegate(delegate: FrameworkDelegate): void;
+export declare const resolveDelegate: () => FrameworkDelegate;
+export declare const getCoreDelegate: () => DefaultFrameworkDelegate;
+export {};

package/dist/types/components/utils/menu-service/menu-service.d.ts

@@ -1,13 +1,16 @@
 import { TypedEvent } from '../typed-event';
 declare class MenuService {
+  #private;
   menuElement: HTMLIxMenuElement | null;
   menuExpandChange: TypedEvent<boolean>;
   register(menuElement: HTMLIxMenuElement): void;
+  setIsPinned(pinned: boolean): void;
   open(): Promise<boolean>;
   close(): Promise<boolean>;
   toggle(): Promise<boolean>;
   get nativeElement(): HTMLIxMenuElement;
   get expandChange(): TypedEvent<boolean>;
+  get isPinned(): boolean;
 }
 export declare const menuController: MenuService;
 export {};

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

@@ -0,0 +1,3 @@
+export { showModalLoading } from './loading';
+export { showMessage } from './message';
+export { closeModal, dismissModal, ModalConfig, ModalInstance, showModal, } from './modal';

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

@@ -0,0 +1,4 @@
+export declare function showModalLoading(message: string): {
+  update: (text: string) => string;
+  finish: (text?: string, timeout?: number) => void;
+};

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

@@ -0,0 +1,41 @@
+import { TypedEvent } from '../typed-event';
+export type MessageContent = {
+  icon: string;
+  iconColor?: string;
+  messageTitle: string;
+  message: string;
+  actions: {
+    id: string;
+    type: 'button-primary' | 'button-secondary' | 'okay' | 'cancel';
+    text: string;
+    payload?: any;
+  }[];
+  ariaLabelledby?: string;
+  ariaDescribedby?: string;
+};
+export declare function showMessage<T>(config: MessageContent): Promise<TypedEvent<{
+  actionId: string;
+  payload: T;
+}>>;
+export declare namespace showMessage {
+  var info: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
+    actionId: string;
+    payload: unknown;
+  }>>;
+  var warning: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
+    actionId: string;
+    payload: unknown;
+  }>>;
+  var error: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
+    actionId: string;
+    payload: unknown;
+  }>>;
+  var success: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
+    actionId: string;
+    payload: unknown;
+  }>>;
+  var question: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
+    actionId: string;
+    payload: unknown;
+  }>>;
+}

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

@@ -0,0 +1,25 @@
+import { IxModalSize } from '../../modal/modal';
+import { TypedEvent } from '../typed-event';
+export declare function setA11yAttributes(element: HTMLElement, config: ModalConfig): void;
+export interface ModalConfig<TReason = any, CONTENT = any> {
+  animation?: boolean;
+  ariaDescribedby?: string;
+  ariaLabelledby?: string;
+  backdrop?: boolean;
+  closeOnBackdropClick?: boolean;
+  beforeDismiss?: (reason?: TReason) => boolean | Promise<boolean>;
+  centered?: boolean;
+  container?: string | HTMLElement;
+  content: CONTENT | string;
+  keyboard?: boolean;
+  size?: IxModalSize;
+  title?: string;
+}
+export interface ModalInstance<TReason = any> {
+  htmlElement: HTMLIxModalElement;
+  onClose: TypedEvent<TReason>;
+  onDismiss: TypedEvent<TReason>;
+}
+export declare function closeModal<TClose = any>(element: Element, closeResult: TClose): void;
+export declare function dismissModal(element: Element, dismissResult?: any): void;
+export declare function showModal<T>(config: ModalConfig<T>): Promise<ModalInstance<T>>;

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

@@ -2,3 +2,4 @@ export declare function isBasicNavigationLayout(element: HTMLElement): element i
 export declare const hostContext: (selector: string, element: HTMLElement) => HTMLIxBasicNavigationElement | HTMLIxMapNavigationElement;
 export declare const isHostedBy: (selector: string, element: HTMLElement) => boolean;
 export declare const getHostApplicationLayout: (element: HTMLElement) => HTMLIxBasicNavigationElement | HTMLIxMapNavigationElement;
+export declare const menuContext: (element: Element) => HTMLIxMenuElement;

package/dist/types/components/utils/screen/mode.d.ts

@@ -1,10 +1,13 @@
-export type Mode = 'desktop' | 'mobile';
+export type Mode = 'large' | 'medium' | 'small';
 export type MediaQueryListener = {
   matchMedia: MediaQueryList;
   dispose: () => void;
 };
+export declare const setSupportedModes: (modes: Mode[]) => Mode[];
 export declare const createMediaQueryListener: (query: string, callback: (event: MediaQueryListEvent) => void) => MediaQueryListener;
+export declare const getFallbackMode: (modes: Mode[], detectedMode: Mode) => Mode;
+export type ModeChangeCallback = (mode: Mode) => void;
 export declare const createModeListener: (modeChangeCallback: (mode: Mode) => void) => {
   dispose: () => void;
-  matchMedia: MediaQueryList;
+  matchMedia: MediaQueryList[];
 };

package/dist/types/components/utils/screen/service.d.ts

@@ -5,6 +5,11 @@ declare class ScreenMode {
   constructor();
   get mode(): Mode;
   get onChange(): TypedEvent<Mode>;
+  get isDetectionEnabled(): boolean;
+  disableModeDetection(): void;
+  enableModeDetection(): void;
+  setMode(mode: Mode): void;
+  setSupportedMods(modes: Mode[]): void;
 }
 export declare const screenMode: ScreenMode;
 export {};

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

@@ -0,0 +1,3 @@
+export declare function closestElement(selector: string, el: any): any;
+export declare function getSlottedElements(slot: any): any;
+export declare function hasSlottedElements(slot: any): boolean;

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

@@ -1,4 +1,4 @@
-import { Placement } from '../dropdown/placement';
+import { Side } from '../dropdown/placement';
 type Position = {
   x: number;
   y: number;
@@ -15,7 +15,13 @@ export declare class ValidationTooltip {
   /**
    * Placement of the tooltip
    */
-  placement: Placement;
+  placement: Side;
+  /**
+   * Suppress the automatic placement of the dropdown.
+   *
+   * @since 2.0.0
+   */
+  suppressAutomaticPlacement: boolean;
   isInputValid: boolean;
   tooltipPosition: Position;
   arrowPosition: Position;

package/dist/types/components/workflow-step/workflow-step.d.ts

@@ -38,6 +38,6 @@ export declare class WorkflowStep {
   selectedHandler(): void;
   watchPropHandler(): void;
   componentDidLoad(): void;
-  clickFunction(): void;
+  onStepClick(): void;
   render(): any;
 }

package/dist/types/components/workflow-steps/workflow-steps.d.ts

@@ -23,9 +23,9 @@ export declare class WorkflowSteps {
    */
   stepSelected: EventEmitter<number>;
   private getSteps;
-  get stepsContent(): Element;
   updateSteps(): void;
   private observer;
+  onStepSelectionChanged(event: CustomEvent<HTMLIxWorkflowStepElement>): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;