@siemens/ix 2.5.0 → 2.6.0

package/dist/types/components/content-header/content-header.d.ts

@@ -8,7 +8,7 @@ export declare class ContentHeader {
     /**
      * Title of Header
      */
-    headerTitle: string;
+    headerTitle?: string;
     /**
      * Subtitle of Header
      */

package/dist/types/components/css-grid/css-grid.d.ts

@@ -6,8 +6,8 @@ export declare class CssGrid {
     /**
      * Define css grid template
      */
-    templates: Partial<Record<CssGridTemplateType, string[][]>>;
-    currentTemplate: string[][];
+    templates?: Partial<Record<CssGridTemplateType, string[][]>>;
+    currentTemplate?: string[][];
     private disposeMediaQueryListener;
     private mediaQueries;
     componentWillRender(): void;

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

@@ -0,0 +1,46 @@
+import { FieldWrapperInterface, IxFormValidationState, ValidationResults } from '../utils/input';
+import { IxComponent } from '../utils/internal';
+/**
+ * @since 2.6.0
+ */
+export declare class CustomField implements FieldWrapperInterface, IxFormValidationState, IxComponent {
+    hostElement: HTMLIxCustomFieldElement;
+    /**
+     * A value is required or must be checked for the form to be submittable
+     */
+    required: boolean;
+    /**
+     * 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;
+    isInvalid: boolean;
+    isValid: boolean;
+    isInfo: boolean;
+    isWarning: boolean;
+    updateValidationState({ isInvalid, isValid, isInfo, isWarning, }: ValidationResults): void;
+    render(): any;
+}

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

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

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

@@ -1,3 +1,4 @@
+import { IxDatePickerComponent } from '../date-picker/date-picker-component';
 export type DateDropdownOption = {
     id: string;
     label: string;
@@ -12,7 +13,7 @@ export type DateRangeChangeEvent = {
 /**
  * @since 2.1.0
  */
-export declare class DateDropdown {
+export declare class DateDropdown implements Omit<IxDatePickerComponent, 'corners'> {
     hostElement: HTMLIxDateDropdownElement;
     /**
      * Disable the button that opens the dropdown containing the date picker.
@@ -80,6 +81,19 @@ export declare class DateDropdown {
      */
     dateRangeOptions: DateDropdownOption[];
     onDateRangeOptionsChange(): void;
+    /**
+     * Locale identifier (e.g. 'en' or 'de').
+     *
+     * @since 2.6.0
+     */
+    locale?: string;
+    /**
+     * The index of which day to start the week on, based on the Locale#weekdays array.
+     * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
+     *
+     * @since 2.6.0
+     */
+    weekStartIndex: number;
     /**
      * Text for custom dropdown item. Will be used for translation.
      */
@@ -100,10 +114,10 @@ export declare class DateDropdown {
      * This event is emitted when the date range changes within the component.
      * The event payload contains information about the selected date range.
      */
-    private dateRangeChange;
+    private readonly dateRangeChange;
     private selectedDateRangeId;
-    private currentRangeValue;
-    private triggerRef;
+    private currentRangeValue?;
+    private readonly triggerRef;
     onDisabledChange(): void;
     private datePickerTouched;
     componentWillLoad(): void;

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

@@ -0,0 +1,138 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IxInputFieldComponent, ValidationResults } from '../utils/input';
+export type DateInputValidityState = {
+    patternMismatch: boolean;
+    invalidReason?: string;
+};
+/**
+ * @since 2.6.0
+ * @form-ready 2.6.0
+ */
+export declare class DateInput implements IxInputFieldComponent<string> {
+    hostElement: HTMLIxDateInputElement;
+    formInternals: ElementInternals;
+    /**
+     * name of the input element
+     */
+    name?: string;
+    /**
+     * placeholder of the input element
+     */
+    placeholder?: string;
+    /**
+     * value of the input element
+     */
+    value: string;
+    /**
+     * Locale identifier (e.g. 'en' or 'de').
+     *
+     * @since 2.6.0
+     */
+    locale?: string;
+    /**
+     * Date format string.
+     * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+     */
+    format: string;
+    /**
+     * required attribute
+     */
+    required?: boolean;
+    /**
+     * helper text below the input field
+     */
+    helperText?: string;
+    /**
+     * label of the input field
+     */
+    label?: string;
+    /**
+     * error text below the input field
+     */
+    invalidText?: string;
+    /**
+     * readonly attribute
+     */
+    readonly: boolean;
+    /**
+     * disabled attribute
+     */
+    disabled: boolean;
+    /**
+     * info text below the input field
+     */
+    infoText?: string;
+    /**
+     * warning text below the input field
+     */
+    warningText?: string;
+    /**
+     * valid text below the input field
+     */
+    validText?: string;
+    /**
+     * show text as tooltip
+     */
+    showTextAsTooltip?: boolean;
+    /**
+     * i18n string for the error message when the date is not parsable
+     */
+    i18nErrorDateUnparsable: string;
+    /**
+     * Input change event.
+     */
+    valueChange: EventEmitter<string>;
+    /**
+     * Validation state change event.
+     */
+    validityStateChange: EventEmitter<DateInputValidityState>;
+    /** @internal */
+    ixFocus: EventEmitter<void>;
+    /** @internal */
+    ixBlur: EventEmitter<void>;
+    show: boolean;
+    from: string | null;
+    isInputInvalid: boolean;
+    isInvalid: boolean;
+    isValid: boolean;
+    isInfo: boolean;
+    isWarning: boolean;
+    focus: boolean;
+    private readonly slotStartRef;
+    private readonly slotEndRef;
+    private readonly datepickerRef;
+    private readonly inputElementRef;
+    private readonly dropdownElementRef;
+    private classObserver?;
+    private invalidReason?;
+    updateFormInternalValue(value: string): void;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    private updatePaddings;
+    disconnectedCallback(): void;
+    watchValue(): void;
+    /** @internal */
+    hasValidValue(): Promise<boolean>;
+    /** @internal */
+    getAssociatedFormElement(): Promise<HTMLFormElement | null>;
+    onInput(value: string): Promise<void>;
+    onCalenderClick(event: Event): void;
+    openDropdown(): Promise<void>;
+    closeDropdown(): Promise<void>;
+    private checkClassList;
+    private renderInput;
+    hookValidationLifecycle({ isInfo, isInvalid, isInvalidByRequired, isValid, isWarning, }: ValidationResults): void;
+    onInputValidationChange(): Promise<void>;
+    /** @internal */
+    getValidityState(): Promise<ValidityState>;
+    /**
+     * Get the native input element
+     */
+    getNativeInputElement(): Promise<HTMLInputElement>;
+    /**
+     * Focuses the input field
+     */
+    focusInput(): Promise<void>;
+    render(): any;
+}

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

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

package/dist/types/components/date-picker/date-picker-component.d.ts

@@ -0,0 +1,43 @@
+import { DateTimeCardCorners } from '../date-time-card/date-time-card';
+export interface IxDatePickerComponent {
+    /**
+     * Annotate with @Prop() decorator
+     */
+    format: string;
+    /**
+     * Annotae with @Prop() decorator
+     */
+    range: boolean;
+    /**
+     * Annotae with @Prop() decorator
+     */
+    corners: DateTimeCardCorners;
+    /**
+     * Annotae with @Prop() decorator
+     */
+    from?: string;
+    /**
+     * Annotae with @Prop() decorator
+     */
+    to?: string;
+    /**
+     * Annotae with @Prop() decorator
+     */
+    minDate?: string;
+    /**
+     * Annotae with @Prop() decorator
+     */
+    maxDate?: string;
+    /**
+     * Annotate with @Prop({ attribute: 'i18n-done' }) decorator
+     */
+    i18nDone: string;
+    /**
+     * Annotae with @Prop() decorator
+     */
+    weekStartIndex: number;
+    /**
+     * Annotae with @Prop() decorator
+     */
+    locale?: string;
+}

package/dist/types/components/date-picker/date-picker.d.ts

@@ -1,12 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { DateTimeCardCorners } from '../date-time-card/date-time-card';
 import { DateTime } from 'luxon';
+import { IxDatePickerComponent } from './date-picker-component';
 export type DateChangeEvent = {
     from: string;
     to: string;
 };
-export type DateTimeCorners = DateTimeCardCorners;
-export declare class DatePicker {
+export declare class DatePicker implements IxDatePickerComponent {
     hostElement: HTMLIxDatePickerElement;
     /**
      * Date format string.
@@ -72,12 +72,11 @@ export declare class DatePicker {
      */
     weekStartIndex: number;
     /**
-     * Format of time string
-     * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+     * Locale identifier (e.g. 'en' or 'de').
      *
      * @since 2.1.0
      */
-    locale: string;
+    locale?: string;
     onLocaleChange(): void;
     /**
      * @deprecated Not supported since 2.0.0.
@@ -128,21 +127,20 @@ export declare class DatePicker {
         from: string;
         to: string;
     }>;
-    currFromDate: DateTime;
-    currToDate: DateTime;
+    currFromDate?: DateTime;
+    currToDate?: DateTime;
     selectedYear: number;
     tempYear: number;
     startYear: number;
     endYear: number;
     selectedMonth: number;
     tempMonth: number;
-    dropdownButtonRef: HTMLElement;
-    yearContainerRef: HTMLElement;
+    private readonly dropdownButtonRef;
+    private readonly yearContainerRef;
+    private readonly firstMonthRef;
     dayNames: string[];
     monthNames: string[];
-    firstMonthRef: HTMLElement;
     focusedDay: number;
-    focusedDayElem: HTMLElement;
     private isDayFocus;
     private monthChangedFromFocus;
     private readonly DAYS_IN_WEEK;

package/dist/types/components/date-time-card/date-time-card.d.ts

@@ -4,7 +4,7 @@ export type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';
  */
 export declare class DateTimeCard {
     /** @internal */
-    standaloneAppearance: any;
+    standaloneAppearance?: boolean;
     /**
      * set styles
      */

package/dist/types/components/datetime-picker/datetime-picker.d.ts

@@ -1,11 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { IxDatePickerComponent } from '../date-picker/date-picker-component';
 export type DateTimeSelectEvent = {
     from: string;
     to: string;
     time: string;
 };
 export type DateTimeDateChangeEvent = string | Omit<DateTimeSelectEvent, 'time'>;
-export declare class DatetimePicker {
+export declare class DatetimePicker implements Omit<IxDatePickerComponent, 'corners' | 'format'> {
     /**
      * If true a date-range can be selected (from/to).
      */
@@ -28,14 +29,14 @@ export declare class DatetimePicker {
      *
      * @since 1.1.0
      */
-    minDate: string;
+    minDate?: string;
     /**
      * The latest date that can be selected by the date picker.
      * If not set there will be no restriction.
      *
      * @since 1.1.0
      */
-    maxDate: string;
+    maxDate?: string;
     /**
      * Date format string.
      * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
@@ -56,38 +57,38 @@ export declare class DatetimePicker {
      *
      * @since 1.1.0
      */
-    from: string | undefined;
+    from?: string;
     /**
      * The selected end date. If the the picker is not in range mode this property has no impact.
      * Format has to match the `format` property.
      *
      * @since 1.1.0
      */
-    to: string | undefined;
+    to?: string;
     /**
      * Select time with format string
      *
      * @since 1.1.0
      */
-    time: string;
+    time?: string;
     /**
      * Show time reference input
      * Time reference is default aligned with @see {this.timeFormat}
      *
      * @since 1.1.0
      */
-    showTimeReference: any;
+    showTimeReference: boolean;
     /**
      * Set time reference
      */
-    timeReference: 'AM' | 'PM';
+    timeReference?: 'AM' | 'PM';
     /**
      * Text of date select button
      *
      * @since 1.1.0
      * @deprecated since 2.1.0. Use `i18nDone`
      */
-    textSelectDate: string;
+    textSelectDate?: string;
     /**
      * Text of date select button
      *
@@ -107,7 +108,7 @@ export declare class DatetimePicker {
      *
      * @since 2.1.0
      */
-    locale: string;
+    locale?: string;
     /**
      * Default behavior of the done event is to join the two events (date and time) into one combined string output.
      * This combination can be configured over the delimiter
@@ -141,8 +142,8 @@ export declare class DatetimePicker {
      * @since 1.1.0
      */
     dateSelect: EventEmitter<DateTimeSelectEvent>;
-    private datePickerElement;
-    private timePickerElement;
+    private datePickerElement?;
+    private timePickerElement?;
     private onDone;
     private onDateChange;
     private onTimeChange;

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/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 {};