@siemens/ix 3.0.0-alpha.4 → 3.0.0

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

@@ -1,8 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { IxInputFieldComponent, ValidationResults } from '../utils/input';
 /**
- * @since 2.6.0
- * @form-ready 2.6.0
+ * @form-ready
  * @slot start - Element will be displayed at the start of the input
  * @slot end - Element will be displayed at the end of the input
  */
@@ -81,6 +80,12 @@ export declare class NumberInput implements IxInputFieldComponent<number> {
      * Indicates if the stepper buttons should be shown
      */
     showStepperButtons?: boolean;
+    /**
+     * Step value to increment or decrement the input value
+     *
+     * @since 3.0.0
+     */
+    step?: string | number;
     /**
      * Event emitted when the value of the input field changes
      */

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

@@ -2,8 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { IxInputFieldComponent, ValidationResults } from '../utils/input';
 export type TextareaResizeBehavior = 'both' | 'horizontal' | 'vertical' | 'none';
 /**
- * @since 2.6.0
- * @form-ready 2.6.0
+ * @form-ready
  */
 export declare class Textarea implements IxInputFieldComponent<string> {
     hostElement: HTMLIxTextareaElement;

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

@@ -1,5 +1,5 @@
 /**
- * @deprecated since 3.0.0. Will be removed with 4.0.0.
+ * @deprecated Will be removed with 4.0.0
  * Use the 'ix-input' component instead
  */
 export declare class InputGroup {

package/dist/types/components/key-value/key-value.d.ts

@@ -1,8 +1,6 @@
 export type KeyValueLabelPosition = 'top' | 'left';
 /**
  * @slot custom-value - Optional custom value at key value instead of text value
- *
- * @since 1.6.0
  */
 export declare class KeyValue {
     /**

package/dist/types/components/key-value-list/key-value-list.d.ts

@@ -1,6 +1,3 @@
-/**
- * @since 1.6.0
- */
 export declare class KeyValueList {
     /**
      * Optional striped key value list style

package/dist/types/components/layout-auto/layout-auto.d.ts

@@ -1,7 +1,4 @@
 import { IxComponent } from '../utils/internal';
-/**
- * @since 2.6.0
- */
 export declare class LayoutForm implements IxComponent {
     hostElement: HTMLIxLayoutAutoElement;
     /**

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

@@ -1,6 +1,3 @@
-/**
- * @since 2.0.0
- */
 export declare class LayoutGrid {
     /**
      * The grid will not have any horizontal padding

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

@@ -1,6 +1,3 @@
-/**
- * @since 2.0.0
- */
 export declare class LinkButton {
     /**
      * Disable the link button

package/dist/types/components/map-navigation/map-navigation.d.ts

@@ -37,7 +37,6 @@ export declare class MapNavigation {
      * Change the visibility of the sidebar
      *
      * @param show new visibility state
-     * @since 1.6.0
      */
     toggleSidebar(show?: boolean): Promise<void>;
     private closeSidebar;

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

@@ -40,8 +40,6 @@ export declare class Menu {
     expand: boolean;
     /**
      *  If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.
-     *
-     *  @since 2.2.0
      */
     startExpanded: boolean;
     /**

package/dist/types/components/menu-avatar/menu-avatar.d.ts

@@ -11,14 +11,10 @@ export declare class MenuAvatar {
     bottom?: string;
     /**
      * Display a avatar image
-     *
-     * @since 1.4.0
      */
     image?: string;
     /**
      * Display the initials of the user. Will be overwritten by image
-     *
-     * @since 1.4.0
      */
     initials?: string;
     /**
@@ -27,12 +23,10 @@ export declare class MenuAvatar {
     i18nLogout: string;
     /**
      *  Control the visibility of the logout button
-     *  @since 2.1.0
      */
     showLogoutButton: boolean;
     /**
      * Control the visibility of the dropdown menu
-     * @since 2.1.0
      */
     showContextMenu: boolean;
     /**

package/dist/types/components/menu-category/menu-category.d.ts

@@ -1,7 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * @since 2.0.0
- */
 export declare class MenuCategory {
     hostElement: HTMLIxMenuCategoryElement;
     /**

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

@@ -4,8 +4,6 @@
 export declare class MenuItem {
     /**
      * Label of the menu item. Will also be used as tooltip text
-     *
-     * @since 2.2.0
      */
     label?: string;
     /**

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

@@ -7,8 +7,6 @@ export declare class Modal {
     hostElement: HTMLIxModalElement;
     /**
      * Modal size
-     *
-     * @since 2.0.0
      */
     size: IxModalSize;
     /**
@@ -21,8 +19,6 @@ export declare class Modal {
     backdrop: boolean;
     /**
      * Dismiss modal on backdrop click
-     *
-     * @since 2.0.0
      */
     closeOnBackdropClick: boolean;
     /**

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

@@ -1,6 +1,3 @@
-/**
- * @since 2.0.0
- */
 export declare class ModalContent {
     render(): any;
 }

package/dist/types/components/modal-footer/modal-footer.d.ts

@@ -1,6 +1,3 @@
-/**
- * @since 2.0.0
- */
 export declare class ModalFooter {
     render(): any;
 }

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

@@ -1,7 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * @since 2.0.0
- */
 export declare class ModalHeader {
     hostElement: HTMLIxModalHeaderElement;
     /**

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

@@ -1,7 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * @since 1.5.0
- */
 export declare class Pagination {
     private readonly baseButtonConfig;
     private readonly maxCountPages;

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

@@ -20,9 +20,6 @@ export type BorderlessChangedEvent = {
     slot: string;
     borderless: boolean;
 };
-/**
- * @since 2.1.0
- */
 export declare class Pane {
     hostElement: HTMLIxPaneElement;
     /**

package/dist/types/components/pane-layout/pane-layout.d.ts

@@ -1,6 +1,3 @@
-/**
- * @since 2.1.0
- */
 export declare class Panes {
     hostElement: HTMLIxPaneLayoutElement;
     /**

package/dist/types/components/push-card/push-card.d.ts

@@ -1,8 +1,5 @@
 import { CardVariant } from '../card/card';
 export type PushCardVariant = CardVariant;
-/**
- * @since 1.6.0
- */
 export declare class PushCard {
     /**
      * Card icon
@@ -26,7 +23,6 @@ export declare class PushCard {
     variant: PushCardVariant;
     /**
      * Collapse the card
-     * @since 2.1.0
      */
     collapse: boolean;
     render(): any;

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

@@ -1,8 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { IxFormComponent } from '../utils/input';
 /**
- * @since 2.6.0
- * @form-ready 2.6.0
+ * @form-ready
  */
 export declare class Radio implements IxFormComponent<string> {
     hostElement: HTMLIxRadioElement;
@@ -27,6 +26,12 @@ export declare class Radio implements IxFormComponent<string> {
      * Checked state of the radio component
      */
     checked: boolean;
+    /**
+     * Requires the radio component and its group to be checked for the form to be submittable
+     *
+     * @since 3.0.0
+     */
+    required: boolean;
     /**
      * Event emitted when the checked state of the radio changes
      */
@@ -36,13 +41,16 @@ export declare class Radio implements IxFormComponent<string> {
      */
     valueChange: EventEmitter<string>;
     /**
-     * Single radio cannot be required
-     * */
-    required: boolean;
+     * Event emitted when the radio is blurred
+     */
+    ixBlur: EventEmitter<void>;
+    private classMutationObserver?;
     private readonly inputRef;
     private setCheckedState;
     onCheckedChange(): Promise<void>;
     onValueChange(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     updateFormInternalValue(): void;
     /** @internal */

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

@@ -1,8 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ValidationResults, FieldWrapperInterface, IxFormValidationState } from '../utils/input';
 /**
- * @since 2.6.0
- * @form-ready 2.6.0
+ * @form-ready
  */
 export declare class RadiobuttonGroup implements FieldWrapperInterface, IxFormValidationState {
     hostElement: HTMLIxRadioGroupElement;
@@ -42,6 +41,12 @@ export declare class RadiobuttonGroup implements FieldWrapperInterface, IxFormVa
      * Alignment of the radio buttons in the group
      */
     direction: 'column' | 'row';
+    /**
+     * Required state of the checkbox component
+     *
+     * @internal
+     */
+    required?: boolean;
     /**
      * Event emitted when the value of the radiobutton group changes
      */
@@ -50,6 +55,8 @@ export declare class RadiobuttonGroup implements FieldWrapperInterface, IxFormVa
     isValid: boolean;
     isInfo: boolean;
     isWarning: boolean;
+    private touched;
+    private readonly groupRef;
     private readonly observer;
     private get radiobuttonElements();
     connectedCallback(): void;
@@ -57,8 +64,13 @@ export declare class RadiobuttonGroup implements FieldWrapperInterface, IxFormVa
     disconnectedCallback(): void;
     private selectInitialValue;
     private ensureOnlyLastRadioChecked;
+    private hasNestedRequiredRadio;
     onValueChangeHandler(newValue: string): void;
     onCheckedChangeHandler(event: CustomEvent<boolean>): void;
-    onClassField({ isInvalid, isInfo, isValid, isWarning }: ValidationResults): void;
+    onClassField({ isInvalid, isInfo, isValid, isWarning, isInvalidByRequired, }: ValidationResults): void;
+    /** @internal */
+    hasValidValue(): Promise<boolean>;
+    /** @internal */
+    isTouched(): Promise<boolean>;
     render(): any;
 }

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

@@ -1,6 +1,3 @@
-/**
- * @since 2.0.0
- */
 export declare class Row {
     render(): any;
 }

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

@@ -3,7 +3,7 @@ import { DropdownItemWrapper } from '../dropdown/dropdown-controller';
 import { IxSelectItemLabelChangeEvent } from '../select-item/events';
 import { IxInputFieldComponent, ValidationResults } from '../utils/input';
 /**
- * @form-ready 2.6.0
+ * @form-ready
  */
 export declare class Select implements IxInputFieldComponent<string | string[]> {
     hostElement: HTMLIxSelectElement;
@@ -11,62 +11,43 @@ export declare class Select implements IxInputFieldComponent<string | string[]>
     /**
      * A string that represents the element's name attribute,
      * containing a name that identifies the element when submitting the form.
-     *
-     * @since 2.6.0
      */
     name?: string;
     /**
      * A Boolean attribute indicating that an option with a non-empty string value must be selected
-     *
-     * @since 2.6.0
      */
     required: boolean;
     /**
      * Label for the select component
-     *
-     * @since 2.6.0
      */
     label?: string;
     /**
      * Warning text for the select component
-     *
-     * @since 2.6.0
      **/
     warningText?: string;
     /**
      * Info text for the select component
-     *
-     * @since 2.6.0
      **/
     infoText?: string;
     /**
      * Error text for the select component
-     *
-     * @since 2.6.0
      **/
     invalidText?: string;
     /**
      * Valid text for the select component
-     *
-     * @since 2.6.0
      **/
     validText?: string;
     /**
      * Helper text for the select component
-     *
-     * @since 2.6.0
      **/
     helperText?: string;
     /**
      * Show helper, error, info, warning text as tooltip
-     *
-     * @since 2.6.0
      */
     showTextAsTooltip?: boolean;
     /**
      * Current selected value.
      * This corresponds to the value property of ix-select-items
-     * @since 2.0.0
      */
     value: string | string[];
     /**
@@ -103,39 +84,27 @@ export declare class Select implements IxInputFieldComponent<string | string[]>
     i18nSelectListHeader: string;
     /**
      * Information inside of dropdown if no items where found with current filter text
-     *
-     * @since 1.5.0
      */
     i18nNoMatches: string;
     /**
      * Hide list header
-     *
-     * @since 1.5.0
      */
     hideListHeader: boolean;
     /**
      * The width of the dropdown element with value and unit (e.g. "200px" or "12.5rem").
-     *
-     * @since 2.7.0
      */
     dropdownWidth?: string;
     /**
      * The maximum width of the dropdown element with value and unit (e.g. "200px" or "12.5rem").
      * By default the maximum width of the dropdown element is set to 100%.
-     *
-     * @since 2.7.0
-     *
      */
     dropdownMaxWidth?: string;
     /**
      * Value changed
-     * @since 2.0.0
      */
     valueChange: EventEmitter<string | string[]>;
     /**
      * Event dispatched whenever the text input changes.
-     *
-     * @since 2.0.0
      */
     inputChange: EventEmitter<string>;
     /**

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

@@ -1,8 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export type SliderMarker = Array<number>;
 /**
- * @since 2.0.0
- *
  * @slot label-start - Element will be displayed at the start of the slider
  * @slot label-end - Element will be displayed at the end of the slider
  */

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

@@ -11,7 +11,6 @@ export declare class SplitButton {
     variant: SplitButtonVariant;
     /**
      * 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.3.0
      */
     closeBehavior: CloseBehavior;
     /**

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

@@ -37,8 +37,6 @@ export declare class TabItem {
     placement: 'bottom' | 'top';
     /**
      * Emitted when the tab is clicked.
-     *
-     * @since 2.0.0
      */
     tabClick: EventEmitter<TabClickDetail>;
     private tabItemClasses;

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

@@ -23,8 +23,6 @@ export declare class Tabs {
     placement: 'bottom' | 'top';
     /**
      * `selected` property changed
-     *
-     * @since 2.0.0
      */
     selectedChange: EventEmitter<number>;
     totalItems: number;

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

@@ -5,8 +5,6 @@ export declare class TimePicker {
     /**
      * Format of time string
      * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
-     *
-     * @since 1.1.0
      */
     format: string;
     /**
@@ -32,8 +30,6 @@ export declare class TimePicker {
     /**
      * Select time with format string
      * Format has to match the `format` property.
-     *
-     * @since 1.1.0
      */
     time: string;
     watchTimePropHandler(newValue: string): void;
@@ -43,14 +39,10 @@ export declare class TimePicker {
     timeReference: 'AM' | 'PM' | undefined;
     /**
      * Text of date select button
-     *
-     * @since 1.1.0
      */
     textSelectTime: string;
     /**
      * Text for top label
-     *
-     * @since 2.1.0
      */
     textTime: string;
     /**

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

@@ -1,8 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { IxFormComponent } from '../utils/input';
 /**
- * @form-ready 2.6.0
- * */
+ * @form-ready
+ */
 export declare class Toggle implements IxFormComponent<string> {
     formInternals: ElementInternals;
     hostElement: HTMLIxToggleElement;
@@ -54,6 +54,11 @@ export declare class Toggle implements IxFormComponent<string> {
     checkedChange: EventEmitter<boolean>;
     /** @internal */
     valueChange: EventEmitter<string>;
+    /**
+     * An event will be dispatched each time the toggle is blurred.
+     */
+    ixBlur: EventEmitter<void>;
+    private touched;
     onCheckedChange(newChecked: boolean): void;
     componentWillLoad(): void;
     updateFormInternalValue(): void;
@@ -62,5 +67,8 @@ export declare class Toggle implements IxFormComponent<string> {
     hasValidValue(): Promise<boolean>;
     /** @internal */
     getAssociatedFormElement(): Promise<HTMLFormElement | null>;
+    /** @internal */
+    isTouched(): Promise<boolean>;
+    updateClassMappings(): void;
     render(): any;
 }

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

@@ -1,8 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ButtonVariant } from '../button/button';
-/**
- * @since 2.0.0
- */
 export declare class ToggleButton {
     /**
      * Button variant.

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

@@ -2,8 +2,6 @@ import { ElementReference } from "../../components";
 /**
  * @slot title-icon - Icon of tooltip title
  * @slot title-content - Content of tooltip title
- *
- * @since 1.4.0
  */
 export declare class Tooltip {
     /**
@@ -21,7 +19,6 @@ export declare class Tooltip {
     /**
      * Initial placement of the tooltip.
      * If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.
-     * @since 1.5.0
      */
     placement: 'top' | 'right' | 'bottom' | 'left';
     /** @internal */

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

@@ -29,15 +29,13 @@ export declare class Tree {
     contextChange: EventEmitter<TreeContext>;
     /**
      * Node toggled event
-     * @since 1.5.0
      */
     nodeToggled: EventEmitter<{
         id: string;
-        isExpaned: boolean;
+        isExpanded: boolean;
     }>;
     /**
      * Node clicked event
-     * @since 1.5.0
      */
     nodeClicked: EventEmitter<string>;
     /**
@@ -45,9 +43,7 @@ export declare class Tree {
      */
     nodeRemoved: EventEmitter<any>;
     private hyperlist?;
-    private toggleListener;
-    private itemClickListener;
-    private updates;
+    private readonly updates;
     private observer;
     private hasFirstRender;
     private updatePadding;
@@ -63,5 +59,7 @@ export declare class Tree {
     private isListInitialized;
     private refreshList;
     private initList;
+    onToggle(event: CustomEvent): void;
+    onTreeItemClick(event: Event): void;
     render(): any;
 }

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

@@ -7,9 +7,6 @@ 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';
-/**
- * @since 2.0.0
- */
 export declare class IxTypography {
     /**
      * Text format

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

@@ -46,6 +46,7 @@ export interface IxFormComponent<T = string> extends IxComponent {
     value?: T;
     disabled: boolean;
     valueChange: EventEmitter<T>;
+    ixBlur: EventEmitter<void>;
     updateFormInternalValue(value: T): void | Promise<void>;
     hasValidValue(): Promise<boolean>;
     getValidityState?(): Promise<ValidityState>;
@@ -55,7 +56,6 @@ export interface IxFormComponent<T = string> extends IxComponent {
 export interface IxInputFieldComponent<T = string> extends IxFormComponent<T>, IxFormValidationState, FieldWrapperInterface {
     placeholder?: string;
     readonly: boolean;
-    ixBlur: EventEmitter<void>;
     getNativeInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;
     focusInput(): Promise<void>;
 }

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

@@ -5,6 +5,8 @@ type Position = {
 };
 /**
  * @slot tooltip-message - Custom tooltip message with html support
+ *
+ * @deprecated Will be removed with 4.0.0
  */
 export declare class ValidationTooltip {
     hostElement: HTMLIxValidationTooltipElement;
@@ -18,8 +20,6 @@ export declare class ValidationTooltip {
     placement: Side;
     /**
      * Suppress the automatic placement of the dropdown.
-     *
-     * @since 2.0.0
      */
     suppressAutomaticPlacement: boolean;
     isInputValid: boolean;