@siemens/ix 0.0.0-20240522073858 → 0.0.0-pr-1318-20240627080522

package/dist/types/components/text-field/number-field.d.ts

@@ -0,0 +1,117 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IxInputFieldComponent, ValidationResults } from '../utils/field';
+/**
+ * @since 2.4.0
+ * @form-ready 2.4.0
+ */
+export declare class NumberField implements IxInputFieldComponent<number> {
+    hostElement: HTMLIxNumberFieldElement;
+    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 inputRef;
+    private postfixRef;
+    private prefixRef;
+    private numberFieldId;
+    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>;
+    render(): any;
+}

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

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

package/dist/types/components/text-field/text-field.animation.d.ts

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

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

@@ -0,0 +1,119 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IxInputFieldComponent, ValidationResults } from '../utils/field';
+/**
+ * @since 2.4.0
+ * @form-ready 2.4.0
+ */
+export declare class TextField implements IxInputFieldComponent<string> {
+    hostElement: HTMLIxTextFieldElement;
+    formInternals: ElementInternals;
+    /**
+     * The type of the text field. Possible values are 'text', 'email', or 'password'.
+     */
+    type: 'text' | 'email' | 'password';
+    /**
+     * 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 inputRef;
+    private postfixRef;
+    private prefixRef;
+    private textFieldId;
+    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>;
+    render(): any;
+}

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

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

package/dist/types/components/text-field/textarea-field.d.ts

@@ -0,0 +1,127 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IxInputFieldComponent, ValidationResults } from '../utils/field';
+/**
+ * @since 2.4.0
+ * @form-ready 2.4.0
+ */
+export declare class TextareaField implements IxInputFieldComponent<string> {
+    hostElement: HTMLIxTextareaFieldElement;
+    formInternals: ElementInternals;
+    /**
+     * The name of the textarea field.
+     */
+    name?: string;
+    /**
+     * The placeholder text for the textarea field.
+     */
+    placeholder?: string;
+    /**
+     * The value of the textarea field.
+     */
+    value: string;
+    /**
+     * Determines if the textarea field is required.
+     */
+    required: boolean;
+    /**
+     * Determines if the textarea field is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Determines if the textarea field is readonly.
+     */
+    readonly: boolean;
+    /**
+     * The helper text for the textarea field.
+     */
+    helperText?: string;
+    /**
+     * The info text for the textarea field.
+     */
+    infoText?: string;
+    /**
+     * Determines if the text should be displayed as a tooltip.
+     */
+    showTextAsTooltip?: boolean;
+    /**
+     * The valid text for the textarea field.
+     */
+    validText?: string;
+    /**
+     * The warning text for the textarea field.
+     */
+    warningText?: string;
+    /**
+     * The label for the textarea field.
+     */
+    label?: string;
+    /**
+     * The error text for the textarea field.
+     */
+    invalidText?: string;
+    /**
+     * The height of the textarea field.
+     * Helpful if you want to set an initial height for the textarea.
+     */
+    textareaHeight: string;
+    /**
+     * The height of the textarea field.
+     * Helpful if you want to set an initial height for the textarea.
+     */
+    textareaWidth: string;
+    /**
+     * The number of rows of the textarea field.
+     * Helpful if you want to set an initial height for the textarea.
+     */
+    textareaRows: string;
+    /**
+     * The height of the textarea field.
+     * Helpful if you want to set an initial height for the textarea.
+     */
+    textareaCols: string;
+    /**
+     * Determines the resize behavior of the textarea field.
+     * 'dimensions' means the textarea will be resized based on textareaHeight and textareaWidth.
+     * 'rowsCols' means the textarea will be resized based on textareaRows and textareaCols.
+     */
+    resizeBehavior: 'dimensions' | 'rowsCols';
+    /**
+     * The maximum length of the textarea field.
+     */
+    maxLength?: number;
+    /**
+     * The minimum length of the textarea field.
+     */
+    minLength?: number;
+    /**
+     * Event emitted when the value of the textarea field changes.
+     */
+    valueChange: EventEmitter<string>;
+    /**
+     * Event emitted when the validity state of the textarea field changes.
+     */
+    validityStateChange: EventEmitter<ValidityState>;
+    /**
+     * Event emitted when the textarea field loses focus.
+     */
+    ixBlur: EventEmitter<void>;
+    isInvalid: boolean;
+    isValid: boolean;
+    isInfo: boolean;
+    isWarning: boolean;
+    isInvalidByRequired: boolean;
+    private textAreaRef;
+    updateClassMappings(result: ValidationResults): void;
+    componentWillLoad(): void;
+    updateFormInternalValue(value: string): void;
+    /** @internal */
+    getAssociatedFormElement(): Promise<HTMLFormElement | null>;
+    /** @internal */
+    hasValidValue(): Promise<boolean>;
+    /**
+     * Get the native textarea element.
+     */
+    getNativeInputElement(): Promise<HTMLTextAreaElement>;
+    getSizeValue(behavior: string, value: string): string;
+    render(): any;
+}

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

@@ -1,6 +1,19 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export declare class Toggle {
+import { IxFormComponent } from '../utils/field';
+/**
+ * @form-ready 2.4.0
+ * */
+export declare class Toggle implements IxFormComponent<string> {
+    formInternals: ElementInternals;
     hostElement: HTMLIxToggleElement;
+    /**
+     * Name of the checkbox component
+     */
+    name?: string;
+    /**
+     * Value of the checkbox component
+     */
+    value: string;
     /**
      * Whether the slide-toggle element is checked or not.
      */
@@ -29,10 +42,25 @@ export declare class Toggle {
      * Hide `on` and `off` text
      */
     hideText: boolean;
+    /**
+     * Required state of the checkbox component.
+     *
+     * If true, checkbox needs to be checked to be valid
+     */
+    required: boolean;
     /**
      * An event will be dispatched each time the slide-toggle changes its value.
      */
     checkedChange: EventEmitter<boolean>;
+    /** @internal */
+    valueChange: EventEmitter<string>;
     onCheckedChange(newChecked: boolean): void;
+    componentWillLoad(): void;
+    updateFormInternalValue(): void;
+    watchCheckedChange(): void;
+    /** @internal */
+    hasValidValue(): Promise<boolean>;
+    /** @internal */
+    getAssociatedFormElement(): Promise<HTMLFormElement | null>;
     render(): any;
 }

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

@@ -1,9 +1,9 @@
-export declare const a11yBoolean: (value: boolean) => "true" | "false";
+export declare const a11yBoolean: (value: boolean | undefined) => "true" | "false";
 export declare const getFallbackLabelFromIconName: (iconName: string) => string;
-export declare const a11yHostAttributes: (hostElement: HTMLElement, ignoreAttributes?: A11yAttributeName[]) => Record<A11yAttributeName, any>;
-type PartialRecord<K extends keyof any, T> = {
+export declare const a11yHostAttributes: (hostElement: HTMLElement, ignoreAttributes?: A11yAttributeName[]) => Record<A11yAttributeName, string>;
+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';
+type PartialRecord<K extends A11yAttributeName, 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 type A11yAttributes = PartialRecord<A11yAttributeName, string>;
 export {};

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

@@ -0,0 +1,2 @@
+export type Attributes = Record<string, string>;
+export declare const inheritAttributes: (element: HTMLElement, attributes?: string[]) => Attributes;

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

@@ -0,0 +1,60 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { IxComponent } from '../internal';
+export * from './validation';
+export interface FieldWrapperInterface {
+    /**
+     * Label for the field component
+     */
+    label?: string;
+    /**
+     * Show text below the field component which show additional information
+     */
+    helperText?: string;
+    /**
+     * Info text for the field component
+     */
+    infoText?: string;
+    /**
+     * Warning text for the field component
+     */
+    warningText?: string;
+    /**
+     * Error text for the field component
+     */
+    invalidText?: string;
+    /**
+     * Valid text for the field component
+     */
+    validText?: string;
+    /**
+     * Show helper, info, warning, error and valid text as tooltip
+     */
+    showTextAsTooltip?: boolean;
+}
+export type HTMLIxFormComponentElement<T> = HTMLElement & IxFormComponent<T>;
+export type HTMLIxInputFieldComponentElement<T> = HTMLIxFormComponentElement<T> & IxInputFieldComponent<T>;
+export interface IxFormValidationState {
+    isInvalid: boolean;
+    isValid: boolean;
+    isInfo: boolean;
+    isWarning: boolean;
+}
+export interface IxFormComponent<T = string> extends IxComponent {
+    formInternals: ElementInternals;
+    required?: boolean;
+    name?: string;
+    value?: T;
+    disabled: boolean;
+    valueChange: EventEmitter<T>;
+    updateFormInternalValue(value: T): void;
+    hasValidValue(): Promise<boolean>;
+    getValidityState?(): Promise<ValidityState>;
+    getAssociatedFormElement(): Promise<HTMLFormElement | null>;
+}
+export interface IxInputFieldComponent<T = string> extends IxFormComponent<T>, IxFormValidationState, FieldWrapperInterface {
+    placeholder?: string;
+    readonly: boolean;
+    ixBlur: EventEmitter<void>;
+    getNativeInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;
+}
+export declare function isIxInputFieldComponent(obj: HTMLElement): obj is HTMLIxInputFieldComponentElement<unknown>;

package/dist/types/components/utils/field/validation.d.ts

@@ -0,0 +1,15 @@
+import { HTMLIxFormComponentElement, IxFormComponent } from '.';
+import { IxComponent } from '../internal';
+export type ClassMutationObserver = {
+    destroy: () => void;
+};
+export declare function shouldSuppressInternalValidation(host: IxFormComponent<unknown>): Promise<boolean>;
+export declare function createClassMutationObserver(element: HTMLElement, callback: () => void, options?: {
+    includeChildren?: boolean;
+}): ClassMutationObserver;
+export type ValidationResultProperty = 'isInvalid' | 'isInvalidByRequired' | 'isValid' | 'isInfo' | 'isWarning';
+export type ValidationResults = Record<ValidationResultProperty, boolean>;
+export declare function checkFieldClasses(hostElement: HTMLIxFormComponentElement<unknown>, includeChildren?: boolean): ValidationResults;
+export declare function HookValidationLifecycle(options?: {
+    includeChildren?: boolean;
+}): (proto: IxComponent, methodName: string) => void;

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

@@ -0,0 +1 @@
+export declare function generateUUID(): string;

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

@@ -36,7 +36,7 @@ export declare class WorkflowStep {
     private customIconSlot;
     selectedHandler(): void;
     watchPropHandler(): void;
-    componentDidLoad(): void;
+    componentWillLoad(): void;
     onStepClick(): void;
     render(): any;
 }