@siemens/ix 1.6.3 → 2.0.0-beta.1

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/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/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 +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/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: "(min-width: 36em)";
+  readonly md: "(min-width: 48em)";
+  readonly lg: "(min-width: 62em)";
+};
+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/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/shadow-dom.d.ts

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

package/dist/types/components/utils/theme-switcher.d.ts

@@ -1,5 +1,6 @@
 import { TypedEvent } from './typed-event';
-export declare class ThemeSwitcher {
+export type ThemeVariant = 'light' | 'dark';
+declare class ThemeSwitcher {
   readonly prefixTheme = "theme-";
   readonly suffixLight = "-light";
   readonly suffixDark = "-dark";
@@ -7,13 +8,19 @@ export declare class ThemeSwitcher {
   mutationObserver: MutationObserver;
   _themeChanged: TypedEvent<string>;
   get themeChanged(): TypedEvent<string>;
-  private hasVariantSuffix;
+  hasVariantSuffix(className: string): boolean;
   private isThemeClass;
-  setTheme(themeName: string): void;
+  setTheme(themeName: string, systemAppearance?: boolean): void;
+  private replaceBodyThemeClass;
   toggleMode(): void;
+  getCurrentTheme(): string;
+  setVariant(variant?: ThemeVariant): void;
   private getOppositeMode;
   private handleMutations;
   private registerMutationObserver;
   constructor();
 }
+export type IxTheme = 'classic' | 'classic-dark' | 'classic-light' | (string & {});
+export declare const getCurrentSystemAppearance: () => ThemeVariant;
 export declare const themeSwitcher: ThemeSwitcher;
+export {};

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;
@@ -27,7 +33,7 @@ export declare class ValidationTooltip {
   get inputElement(): HTMLInputElement;
   get formElement(): HTMLFormElement;
   get tooltipElement(): HTMLElement;
-  private destoryAutoUpdate;
+  private destroyAutoUpdate;
   private applyTooltipPosition;
   componentDidLoad(): void;
   private onInputFocus;

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

@@ -24,7 +24,7 @@ export declare class WorkflowStep {
   /**
    * Activate navigation click
    *
-   * @deprecated Will be changed to '@internal' in 2.0.0
+   * @internal
    */
   position: 'first' | 'last' | 'single' | 'undefined';
   iconName: 'circle' | 'circle-dot' | 'success' | 'warning' | 'error';
@@ -34,10 +34,9 @@ export declare class WorkflowStep {
    */
   selectedChanged: EventEmitter<HTMLIxWorkflowStepElement>;
   private customIconSlot;
-  private select;
   selectedHandler(): void;
   watchPropHandler(): void;
   componentDidLoad(): void;
-  clickFunction(): void;
+  onStepClick(): void;
   render(): any;
 }

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

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

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

@@ -5,11 +5,6 @@ export declare class WorkflowSteps {
    * Select orientation
    */
   vertical: boolean;
-  /**
-   * Select linear mode
-   * @deprecated Has no effect on component. Will get removed in 2.0.0
-   */
-  linear: boolean;
   /**
    * Activate navigation click
    */
@@ -23,9 +18,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;