@siemens/ix 2.4.1 → 2.6.0

package/dist/types/components/dropdown/dropdown-controller.d.ts

@@ -17,11 +17,13 @@ export interface DropdownItemWrapper {
     getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;
 }
 declare class DropdownController {
-    private dropdowns;
+    private readonly dropdowns;
     private submenuIds;
     private isWindowListenerActive;
     connected(dropdown: DropdownInterface): void;
     disconnected(dropdown: DropdownInterface): void;
+    removeFromSubmenuIds(id: string): void;
+    getDropdownById(id: string): DropdownInterface;
     discoverSubmenus(): void;
     present(dropdown: DropdownInterface): void;
     dismissChildren(uid: string): void;
@@ -33,11 +35,5 @@ declare class DropdownController {
     private buildComposedPath;
     private addOverlayListeners;
 }
-export declare const addDisposableEventListener: (element: Element | Window | Document, eventType: string, callback: EventListenerOrEventListenerObject) => () => void;
-export declare const addDisposableEventListenerAsArray: (listener: {
-    element: Element | Window | Document;
-    eventType: string;
-    callback: EventListenerOrEventListenerObject;
-}[]) => () => void;
 export declare const dropdownController: DropdownController;
 export {};

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

@@ -2,6 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { ComponentInterface } from '../../stencil-public-runtime';
 import { CloseBehavior, DropdownInterface } from './dropdown-controller';
 import { AlignedPlacement } from './placement';
+import { ElementReference } from '../utils/element-reference';
 export declare class Dropdown implements ComponentInterface, DropdownInterface {
     hostElement: HTMLIxDropdownElement;
     /**
@@ -18,11 +19,11 @@ export declare class Dropdown implements ComponentInterface, DropdownInterface {
      * Define an element that triggers the dropdown.
      * A trigger can either be a string that will be interpreted as id attribute or a DOM element.
      */
-    trigger: string | HTMLElement | Promise<HTMLElement>;
+    trigger?: ElementReference;
     /**
      * Define an anchor element
      */
-    anchor: string | HTMLElement;
+    anchor?: ElementReference;
     /**
      * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
      * If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.
@@ -45,7 +46,7 @@ export declare class Dropdown implements ComponentInterface, DropdownInterface {
      *
      * @internal
      */
-    offset: {
+    offset?: {
         mainAxis?: number;
         crossAxis?: number;
         alignmentAxis?: number;
@@ -53,31 +54,31 @@ export declare class Dropdown implements ComponentInterface, DropdownInterface {
     /**
      * @internal
      */
-    overwriteDropdownStyle: (delegate: {
+    overwriteDropdownStyle?: (delegate: {
         dropdownRef: HTMLElement;
         triggerRef?: HTMLElement;
     }) => Promise<Partial<CSSStyleDeclaration>>;
     /**
      * @internal
-     * If initialisation of this dropdown is expected to be defered submenu discovery will have to be re-run globally by the controller.
+     * If initialization of this dropdown is expected to be deferred submenu discovery will have to be re-run globally by the controller.
      * This property indicates the need for that to the controller.
      */
     discoverAllSubmenus: boolean;
     /** @internal */
     ignoreRelatedSubmenu: boolean;
+    /** @internal */
+    suppressOverflowBehavior: boolean;
     /**
      * Fire event after visibility of dropdown has changed
      */
     showChanged: EventEmitter<boolean>;
-    private autoUpdateCleanup;
+    private autoUpdateCleanup?;
     private triggerElement?;
     private anchorElement?;
-    private dropdownRef;
+    private arrowFocusController?;
     private localUId;
     private assignedSubmenu;
-    private arrowFocusController;
-    private focusDropdownItemBind;
-    private itemObserver;
+    private itemObserver?;
     connectedCallback(): void;
     cacheSubmenuId(event: CustomEvent<string>): void;
     disconnectedCallback(): void;
@@ -99,9 +100,9 @@ export declare class Dropdown implements ComponentInterface, DropdownInterface {
     private registerListener;
     private resolveElement;
     private checkForSubmenuAnchor;
-    private findElement;
+    private resolveAnchorElement;
     changedShow(newShow: boolean): Promise<void>;
-    changedTrigger(newTriggerValue: string | HTMLElement | Promise<HTMLElement>): void;
+    changedTrigger(newTriggerValue: ElementReference): void;
     private destroyAutoUpdate;
     private isAnchorSubmenu;
     private applyDropdownPosition;

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

@@ -25,11 +25,11 @@ export declare class DropdownButton {
     /**
      * Set label
      */
-    label: string;
+    label?: string;
     /**
      * Button icon
      */
-    icon: string;
+    icon?: string;
     /**
      * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
      * @since 2.1.0
@@ -40,8 +40,8 @@ export declare class DropdownButton {
      *
      * @since 2.0.0
      */
-    placement: AlignedPlacement;
-    dropdownAnchor: HTMLElement;
+    placement?: AlignedPlacement;
+    private readonly dropdownAnchor;
     private getTriangle;
     render(): any;
 }

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

@@ -5,11 +5,11 @@ export declare class DropdownItem implements DropdownItemWrapper {
     /**
      * Label of dropdown item
      */
-    label: string;
+    label?: string;
     /**
      * Icon of dropdown item
      */
-    icon: string;
+    icon?: string;
     /**
      * Display hover state
      */

package/dist/types/components/event-list-item/event-list-item.d.ts

@@ -9,7 +9,7 @@ export declare class EventListItem {
      *
      * @deprecated since 2.1.0 use `item-color`
      */
-    color: string;
+    color?: string;
     /**
      * Color of the status indicator.
      * You can find a list of all available colors in our documentation.
@@ -17,7 +17,7 @@ export declare class EventListItem {
      *
      * @link https://ix.siemens.io/docs/theming/colors/
      */
-    itemColor: string;
+    itemColor?: string;
     /**
      * Show event list item as selected
      */

package/dist/types/components/field-label/field-label.d.ts

@@ -0,0 +1,33 @@
+import { IxComponent } from '../utils/internal';
+import { MakeRef } from '../utils/make-ref';
+export declare class FormFieldLabel implements IxComponent {
+    hostElement: HTMLIxFieldLabelElement;
+    /**
+     * A value is required or must be checked for the form to be submittable
+     */
+    required?: boolean;
+    /**
+     * The id of the form element that the label is associated with
+     */
+    htmlFor?: string;
+    /** @internal */
+    controlRef?: MakeRef<HTMLElement>;
+    /** @internal */
+    isInvalid: boolean;
+    private readonly htmlForObserver;
+    private htmlForClassObserver?;
+    private controlRefClassObserver?;
+    private a11yAttributes;
+    private readonly labelRef;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillRender(): void;
+    componentWillLoad(): void | Promise<void>;
+    private registerHtmlForObserver;
+    private registerControlRefObserver;
+    private registerHtmlForClassObserver;
+    private checkForInvalidState;
+    private checkForInternalState;
+    private focusOnClick;
+    render(): any;
+}

package/dist/types/components/field-label/tests/field-label.ct.d.ts

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

package/dist/types/components/field-wrapper/field-wrapper.d.ts

@@ -0,0 +1,64 @@
+import { FieldWrapperInterface } from '../utils/input';
+import { MakeRef } from '../utils/make-ref';
+/** @internal */
+export declare class FieldWrapper implements FieldWrapperInterface {
+    hostElement: HTMLIxFieldWrapperElement;
+    /**
+     * Show text below the field component
+     */
+    helperText?: string;
+    /**
+     * Label for the field component
+     */
+    label?: string;
+    /**
+     * Error text for the field component
+     */
+    invalidText?: string;
+    /**
+     * Valid text for the field component
+     */
+    validText?: string;
+    /**
+     * Info text for the field component
+     */
+    infoText?: string;
+    /**
+     * Warning text for the field component
+     */
+    warningText?: string;
+    /**
+     * Is the field component invalid
+     */
+    isInvalid: boolean;
+    /**
+     * Is the field component valid
+     */
+    isValid: boolean;
+    /**
+     * Is the field component info
+     */
+    isInfo: boolean;
+    /**
+     * Is the field component warning
+     */
+    isWarning: boolean;
+    /**
+     * Show helper, error, info, warning text as tooltip
+     */
+    showTextAsTooltip: boolean;
+    /**
+     * Show label as required
+     */
+    required: boolean;
+    /**
+     * The id of the form element that the label is associated with
+     */
+    htmlForLabel?: string;
+    /**
+     * The control element that the label is associated with
+     */
+    controlRef?: MakeRef<HTMLElement>;
+    private readonly slotRef;
+    render(): any;
+}

package/dist/types/components/field-wrapper/helper-text-util.d.ts

@@ -0,0 +1,18 @@
+export declare function hasAnyText({ invalidText, warningText, infoText, validText, helperText, }: {
+    invalidText?: string;
+    warningText?: string;
+    infoText?: string;
+    validText?: string;
+    helperText?: string;
+}): string;
+export declare function renderHelperText({ isInvalid, invalidText, isWarning, warningText, isInfo, infoText, isValid, validText, helperText, }: {
+    isInvalid: boolean;
+    invalidText?: string;
+    isWarning: boolean;
+    warningText?: string;
+    isInfo: boolean;
+    infoText?: string;
+    isValid: boolean;
+    validText?: string;
+    helperText?: string;
+}): any;

package/dist/types/components/field-wrapper/tests/field-wrapper.ct.d.ts

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

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

@@ -47,16 +47,18 @@ export declare class Group {
     footerVisible: boolean;
     showExpandCollapsedIcon: boolean;
     private observer;
+    selectedChanged(newSelected: boolean): void;
     get dropdownItems(): Element[];
     get groupItems(): Array<HTMLIxGroupItemElement>;
     get groupContent(): Element;
     private onExpandClick;
     private onHeaderClick;
-    private onItemClick;
-    private setGroupSelection;
+    private changeHeaderSelection;
+    private changeItemIndex;
     private onSlotChange;
     componentWillRender(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    onItemClicked(event: CustomEvent): void;
     render(): any;
 }

package/dist/types/components/helper-text/helper-text.d.ts

@@ -0,0 +1,37 @@
+import { ValidationResults } from '../utils/input';
+import { IxComponent } from '../utils/internal';
+export declare class HelperText implements IxComponent {
+    hostElement: HTMLIxHelperTextElement;
+    /**
+     * The id of the form element that the label is associated with
+     */
+    htmlFor?: string;
+    /**
+     * Show text below the field component
+     */
+    helperText?: string;
+    /**
+     * Error text for the field component
+     */
+    invalidText?: string;
+    /**
+     * Valid text for the field component
+     */
+    validText?: string;
+    /**
+     * Info text for the field component
+     */
+    infoText?: string;
+    /**
+     * Warning text for the field component
+     */
+    warningText?: string;
+    validationResults: ValidationResults;
+    private readonly observer;
+    private classObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillRender(): void;
+    private checkForRequired;
+    render(): any;
+}

package/dist/types/components/input/input.animation.d.ts

@@ -0,0 +1 @@
+export declare function shakeInput(input: HTMLInputElement): void;

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

@@ -0,0 +1,123 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IxInputFieldComponent, ValidationResults } from '../utils/input';
+/**
+ * @since 2.6.0
+ * @form-ready 2.6.0
+ */
+export declare class Input implements IxInputFieldComponent<string> {
+    hostElement: HTMLIxInputElement;
+    formInternals: ElementInternals;
+    /**
+     * The type of the text field. Possible values are 'text', 'email', or 'password'.
+     */
+    type: 'text' | 'email' | 'password' | 'tel' | 'url';
+    /**
+     * The name of the text field.
+     */
+    name?: string;
+    /**
+     * The placeholder text for the text field.
+     */
+    placeholder?: string;
+    /**
+     * The value of the text field.
+     */
+    value: string;
+    /**
+     * Specifies whether the text field is required.
+     */
+    required: boolean;
+    /**
+     * Specifies whether the text field is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Specifies whether the text field is readonly.
+     */
+    readonly: boolean;
+    /**
+     * The helper text for the text field.
+     */
+    helperText?: string;
+    /**
+     * The info text for the text field.
+     */
+    infoText?: string;
+    /**
+     * Specifies whether to show the text as a tooltip.
+     */
+    showTextAsTooltip?: boolean;
+    /**
+     * The valid text for the text field.
+     */
+    validText?: string;
+    /**
+     * The warning text for the text field.
+     */
+    warningText?: string;
+    /**
+     * The label for the text field.
+     */
+    label?: string;
+    /**
+     * The error text for the text field.
+     */
+    invalidText?: string;
+    /**
+     * The pattern for the text field.
+     */
+    pattern?: string;
+    /**
+     * The maximum length of the text field.
+     */
+    maxLength?: number;
+    /**
+     * The minimum length of the text field.
+     */
+    minLength?: number;
+    /**
+     * The allowed characters pattern for the text field.
+     */
+    allowedCharactersPattern?: string;
+    /**
+     * Event emitted when the value of the text field changes.
+     */
+    valueChange: EventEmitter<string>;
+    /**
+     * Event emitted when the validity state of the text field changes.
+     */
+    validityStateChange: EventEmitter<ValidityState>;
+    /**
+     * Event emitted when the text field loses focus.
+     */
+    ixBlur: EventEmitter<void>;
+    isInvalid: boolean;
+    isValid: boolean;
+    isInfo: boolean;
+    isWarning: boolean;
+    isInvalidByRequired: boolean;
+    inputType: string;
+    private readonly inputRef;
+    private readonly slotEndRef;
+    private readonly slotStartRef;
+    private readonly inputId;
+    updateClassMappings(result: ValidationResults): void;
+    updateInputType(): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    private updatePaddings;
+    updateFormInternalValue(value: string): void;
+    /** @internal */
+    getAssociatedFormElement(): Promise<HTMLFormElement | null>;
+    /** @internal */
+    hasValidValue(): Promise<boolean>;
+    /**
+     * Returns the native input element used in the text field.
+     */
+    getNativeInputElement(): Promise<HTMLInputElement>;
+    /**
+     * Focuses the input field
+     */
+    focusInput(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/input/input.fc.d.ts

@@ -0,0 +1,52 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+import { MakeRef } from '../utils/make-ref';
+import { A11yAttributes } from '../utils/a11y';
+export declare function TextareaElement(props: {
+    resizeBehavior: 'both' | 'horizontal' | 'vertical' | 'none';
+    textareaHeight?: string;
+    textareaWidth?: string;
+    textareaRows?: number;
+    textareaCols?: number;
+    disabled: boolean;
+    readonly: boolean;
+    maxLength?: number;
+    minLength?: number;
+    isInvalid: boolean;
+    required: boolean;
+    value: string;
+    placeholder?: string;
+    textAreaRef: (el: HTMLTextAreaElement | undefined) => void;
+    valueChange: (value: string) => void;
+    updateFormInternalValue: (value: string) => void;
+    onBlur: () => void;
+    ariaAttributes?: A11yAttributes;
+}): any;
+export declare function InputElement(props: {
+    id: string;
+    disabled: boolean;
+    readonly: boolean;
+    maxLength?: string | number;
+    minLength?: string | number;
+    max?: string | number;
+    min?: string | number;
+    pattern?: string;
+    type: string;
+    isInvalid: boolean;
+    required: boolean;
+    value: string | number;
+    placeholder?: string;
+    inputRef: (el: HTMLInputElement | undefined) => void;
+    onKeyPress: (event: KeyboardEvent) => void;
+    valueChange: (value: string) => void;
+    updateFormInternalValue: (value: string) => void;
+    onBlur: () => void;
+    ariaAttributes?: A11yAttributes;
+}): any;
+export declare const SlotEnd: FunctionalComponent<{
+    slotEndRef: MakeRef<HTMLDivElement>;
+    onSlotChange?: (e: Event) => void;
+}>;
+export declare const SlotStart: FunctionalComponent<{
+    slotStartRef: MakeRef<HTMLDivElement>;
+    onSlotChange?: (e: Event) => void;
+}>;

package/dist/types/components/input/input.util.d.ts

@@ -0,0 +1,13 @@
+import { A11yAttributes } from '../utils/a11y';
+import { IxFormComponent, IxInputFieldComponent, ValidationResults } from '../utils/input';
+export declare function createIdIfNotExists(element: IxFormComponent, idPrefix?: string): any;
+export declare function mapValidationResult<T>(ref: IxInputFieldComponent<T>, result: ValidationResults): void;
+export declare function checkAllowedKeys<T>(comp: IxInputFieldComponent<T>, event: KeyboardEvent): void;
+export declare function checkInternalValidity<T>(comp: IxFormComponent<T>, input: HTMLInputElement | HTMLTextAreaElement): Promise<void>;
+export declare function onInputBlur<T>(comp: IxInputFieldComponent<T>, input?: HTMLInputElement | HTMLTextAreaElement | null): void;
+export declare function applyPaddingEnd(inputElement: HTMLElement | null, width: number, options: {
+    slotEnd: boolean;
+    additionalPaddingRight?: string;
+}): void;
+export declare function adjustPaddingForStartAndEnd(startElement: HTMLElement | null, endElement: HTMLElement | null, inputElement: HTMLElement | null): void;
+export declare function getAriaAttributesForInput(component: IxInputFieldComponent): A11yAttributes;

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

@@ -0,0 +1,121 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IxInputFieldComponent, ValidationResults } from '../utils/input';
+/**
+ * @since 2.6.0
+ * @form-ready 2.6.0
+ */
+export declare class NumberInput implements IxInputFieldComponent<number> {
+    hostElement: HTMLIxNumberInputElement;
+    formInternals: ElementInternals;
+    /**
+     * name of the input element
+     */
+    name?: string;
+    /**
+     * placeholder of the input element
+     */
+    placeholder?: string;
+    /**
+     * The value of the input field
+     */
+    value: number;
+    /**
+     * Indicates if the field is required
+     */
+    required: boolean;
+    /**
+     * Disables the input field
+     */
+    disabled: boolean;
+    /**
+     * Indicates if the field is read-only
+     */
+    readonly: boolean;
+    /**
+     * The helper text for the input field
+     */
+    helperText?: string;
+    /**
+     * The info text for the input field
+     */
+    infoText?: string;
+    /**
+     * Indicates if the text should be shown as a tooltip
+     */
+    showTextAsTooltip?: boolean;
+    /**
+     * The valid text for the input field
+     */
+    validText?: string;
+    /**
+     * The warning text for the input field
+     */
+    warningText?: string;
+    /**
+     * The label for the input field
+     */
+    label?: string;
+    /**
+     * The error text for the input field
+     */
+    invalidText?: string;
+    /**
+     * The pattern for the input field
+     */
+    pattern?: string;
+    /**
+     * The minimum value for the input field
+     */
+    min?: string | number;
+    /**
+     * The maximum value for the input field
+     */
+    max?: string | number;
+    /**
+     * The allowed characters pattern for the input field
+     */
+    allowedCharactersPattern?: string;
+    /**
+     * Indicates if the stepper buttons should be shown
+     */
+    showStepperButtons?: boolean;
+    /**
+     * Event emitted when the value of the input field changes
+     */
+    valueChange: EventEmitter<number>;
+    /**
+     * Event emitted when the validity state of the input field changes
+     */
+    validityStateChange: EventEmitter<ValidityState>;
+    /**
+     * Event emitted when the input field loses focus
+     */
+    ixBlur: EventEmitter<void>;
+    isInvalid: boolean;
+    isValid: boolean;
+    isInfo: boolean;
+    isWarning: boolean;
+    isInvalidByRequired: boolean;
+    private readonly inputRef;
+    private readonly slotEndRef;
+    private readonly slotStartRef;
+    private readonly numberInputId;
+    updateClassMappings(result: ValidationResults): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    private updatePaddings;
+    updateFormInternalValue(value: number): void;
+    /** @internal */
+    getAssociatedFormElement(): Promise<HTMLFormElement | null>;
+    /** @internal */
+    hasValidValue(): Promise<boolean>;
+    /**
+     * Returns the native input element used under the hood
+     */
+    getNativeInputElement(): Promise<HTMLInputElement>;
+    /**
+     * Focuses the input field
+     */
+    focusInput(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/input/tests/form-ready.ct.d.ts

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