@ui5/webcomponents 2.26.0 → 2.27.0-rc.0

package/dist/MultiComboBoxItemGroup.d.ts

@@ -12,6 +12,8 @@ import ComboBoxItemGroup from "./ComboBoxItemGroup.js";
  * @public
  * @implements {IMultiComboBoxItem}
  * @since 2.0.0
+ * @csspart header - Used to style the header item of the group
+ * @csspart title - Used to style the title of the group header
  */
 declare class MultiComboBoxItemGroup extends ComboBoxItemGroup implements IMultiComboBoxItem {
     eventDetails: ComboBoxItemGroup["eventDetails"];

package/dist/MultiComboBoxItemGroup.js

@@ -18,6 +18,8 @@ import ComboBoxItemGroup from "./ComboBoxItemGroup.js";
  * @public
  * @implements {IMultiComboBoxItem}
  * @since 2.0.0
+ * @csspart header - Used to style the header item of the group
+ * @csspart title - Used to style the title of the group header
  */
 let MultiComboBoxItemGroup = class MultiComboBoxItemGroup extends ComboBoxItemGroup {
     /**

package/dist/MultiComboBoxItemGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiComboBoxItemGroup.js","sourceRoot":"","sources":["../src/MultiComboBoxItemGroup.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAE1E,OAAO,qBAAqB,MAAM,4DAA4D,CAAC;AAG/F,OAAO,8BAA8B,MAAM,qCAAqC,CAAC;AAEjF,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD;;;;;;;;;GASG;AAKH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,iBAAiB;IAcrD;;;OAGG;IACH,IAAI,WAAW;QACd,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,KAAK,CAAC;IACd,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;IAED,cAAc;QACb,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,uBAAuB,CAAwB,CAAC;IACvF,CAAC;CACD,CAAA;AArBA;IANC,IAAI,CAAC;QACL,SAAS,EAAE,IAAI;QACf,uBAAuB,EAAE,IAAI;QAC7B,eAAe,EAAE,IAAI;QACrB,IAAI,EAAE,WAAW;KACjB,CAAC;qDACqC;AAZlC,sBAAsB;IAJ3B,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,QAAQ,EAAE,8BAA8B;KACxC,CAAC;GACI,sBAAsB,CAiC3B;AAED,sBAAsB,CAAC,MAAM,EAAE,CAAC;AAEhC,eAAe,sBAAsB,CAAC;AAEtC,MAAM,CAAC,MAAM,kCAAkC,GAAG,qBAAqB,CAAyB,aAAa,CAAC,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport createInstanceChecker from \"@ui5/webcomponents-base/dist/util/createInstanceChecker.js\";\nimport type { IMultiComboBoxItem } from \"./MultiComboBox.js\";\nimport type MultiComboBoxItem from \"./MultiComboBoxItem.js\";\nimport MultiComboBoxItemGroupTemplate from \"./MultiComboBoxItemGroupTemplate.js\";\nimport type ListItemGroupHeader from \"./ListItemGroupHeader.js\";\nimport ComboBoxItemGroup from \"./ComboBoxItemGroup.js\";\n\n/**\n * @class\n * The `ui5-mcb-item-group` is type of suggestion item,\n * that can be used to split the `ui5-multi-combobox` suggestions into groups.\n * @constructor\n * @extends ComboBoxItemGroup\n * @public\n * @implements {IMultiComboBoxItem}\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-mcb-item-group\",\n\ttemplate: MultiComboBoxItemGroupTemplate,\n})\nclass MultiComboBoxItemGroup extends ComboBoxItemGroup implements IMultiComboBoxItem {\n\teventDetails!: ComboBoxItemGroup[\"eventDetails\"];\n\t/**\n\t * Defines the items of the <code>ui5-mcb-item-group</code>.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\tinvalidateOnChildChange: true,\n\t\tindividualSlots: true,\n\t\ttype: HTMLElement,\n\t})\n\titems!: DefaultSlot<MultiComboBoxItem>;\n\n\t/**\n\t * Used to avoid tag name checks\n\t * @protected\n\t */\n\tget isGroupItem() {\n\t\treturn true;\n\t}\n\n\tget selected() {\n\t\treturn false;\n\t}\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n\n\tgetFocusDomRef() {\n\t\treturn this.shadowRoot!.querySelector(\"[ui5-li-group-header]\") as ListItemGroupHeader;\n\t}\n}\n\nMultiComboBoxItemGroup.define();\n\nexport default MultiComboBoxItemGroup;\n\nexport const isInstanceOfMultiComboBoxItemGroup = createInstanceChecker<MultiComboBoxItemGroup>(\"isGroupItem\");\n"]}
+{"version":3,"file":"MultiComboBoxItemGroup.js","sourceRoot":"","sources":["../src/MultiComboBoxItemGroup.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAE1E,OAAO,qBAAqB,MAAM,4DAA4D,CAAC;AAG/F,OAAO,8BAA8B,MAAM,qCAAqC,CAAC;AAEjF,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD;;;;;;;;;;;GAWG;AAKH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,iBAAiB;IAcrD;;;OAGG;IACH,IAAI,WAAW;QACd,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,KAAK,CAAC;IACd,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;IAED,cAAc;QACb,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,uBAAuB,CAAwB,CAAC;IACvF,CAAC;CACD,CAAA;AArBA;IANC,IAAI,CAAC;QACL,SAAS,EAAE,IAAI;QACf,uBAAuB,EAAE,IAAI;QAC7B,eAAe,EAAE,IAAI;QACrB,IAAI,EAAE,WAAW;KACjB,CAAC;qDACqC;AAZlC,sBAAsB;IAJ3B,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,QAAQ,EAAE,8BAA8B;KACxC,CAAC;GACI,sBAAsB,CAiC3B;AAED,sBAAsB,CAAC,MAAM,EAAE,CAAC;AAEhC,eAAe,sBAAsB,CAAC;AAEtC,MAAM,CAAC,MAAM,kCAAkC,GAAG,qBAAqB,CAAyB,aAAa,CAAC,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport createInstanceChecker from \"@ui5/webcomponents-base/dist/util/createInstanceChecker.js\";\nimport type { IMultiComboBoxItem } from \"./MultiComboBox.js\";\nimport type MultiComboBoxItem from \"./MultiComboBoxItem.js\";\nimport MultiComboBoxItemGroupTemplate from \"./MultiComboBoxItemGroupTemplate.js\";\nimport type ListItemGroupHeader from \"./ListItemGroupHeader.js\";\nimport ComboBoxItemGroup from \"./ComboBoxItemGroup.js\";\n\n/**\n * @class\n * The `ui5-mcb-item-group` is type of suggestion item,\n * that can be used to split the `ui5-multi-combobox` suggestions into groups.\n * @constructor\n * @extends ComboBoxItemGroup\n * @public\n * @implements {IMultiComboBoxItem}\n * @since 2.0.0\n * @csspart header - Used to style the header item of the group\n * @csspart title - Used to style the title of the group header\n */\n@customElement({\n\ttag: \"ui5-mcb-item-group\",\n\ttemplate: MultiComboBoxItemGroupTemplate,\n})\nclass MultiComboBoxItemGroup extends ComboBoxItemGroup implements IMultiComboBoxItem {\n\teventDetails!: ComboBoxItemGroup[\"eventDetails\"];\n\t/**\n\t * Defines the items of the <code>ui5-mcb-item-group</code>.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\tinvalidateOnChildChange: true,\n\t\tindividualSlots: true,\n\t\ttype: HTMLElement,\n\t})\n\titems!: DefaultSlot<MultiComboBoxItem>;\n\n\t/**\n\t * Used to avoid tag name checks\n\t * @protected\n\t */\n\tget isGroupItem() {\n\t\treturn true;\n\t}\n\n\tget selected() {\n\t\treturn false;\n\t}\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n\n\tgetFocusDomRef() {\n\t\treturn this.shadowRoot!.querySelector(\"[ui5-li-group-header]\") as ListItemGroupHeader;\n\t}\n}\n\nMultiComboBoxItemGroup.define();\n\nexport default MultiComboBoxItemGroup;\n\nexport const isInstanceOfMultiComboBoxItemGroup = createInstanceChecker<MultiComboBoxItemGroup>(\"isGroupItem\");\n"]}

package/dist/NumberInput.d.ts

@@ -0,0 +1,271 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
+import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
+import "@ui5/webcomponents-icons/dist/less.js";
+import "@ui5/webcomponents-icons/dist/add.js";
+import type Input from "./Input.js";
+import type { InputAccInfo, InputEventDetail } from "./Input.js";
+import InputType from "./types/InputType.js";
+import NumberFormat from "@ui5/webcomponents-localization/dist/NumberFormat.js";
+type NumberInputValueStateChangeEventDetail = {
+    valueState: `${ValueState}`;
+    valid: boolean;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ *
+  * The `ui5-number-input` component is a numeric input field. It allows users to enter, edit and select numeric values.
+ *
+ * ### Usage
+ *
+ * The default step is 1 but the app developer can set a different one.
+ *
+ * App developers can set a maximum and minimum value for `ui5-number-input`.
+ * The increase/decrease button and the up/down keyboard navigation become disabled when
+ * the value reaches the max/min or a new value is entered from the input which is greater/less than the max/min.
+ *
+ * #### When to use:
+ *
+ * - To enter or adjust numeric values.
+ * - To adjust values for a specific step.
+ *
+ * #### When not to use:
+ *
+ * - To enter a static number (for example, postal code, phone number, or ID). In this case,
+ * use the regular `ui5-input` instead.
+ * - To enter dates and times. In this case, use date/time related components instead.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/NumberInput.js";`
+ * @constructor
+ * @extends UI5Element
+ * @since 2.26.0
+ * @experimental
+ * @public
+ */
+declare class NumberInput extends UI5Element implements IFormInputElement {
+    eventDetails: {
+        change: void;
+        input: InputEventDetail;
+        "value-state-change": NumberInputValueStateChangeEventDetail;
+        "_request-submit": void;
+    };
+    /**
+     * Defines a value of the component.
+     * @default 0
+     * @public
+     */
+    value: number;
+    /**
+     * Defines a minimum value of the component.
+     * @default undefined
+     * @public
+     */
+    min?: number;
+    /**
+     * Defines a maximum value of the component.
+     * @default undefined
+     * @public
+     */
+    max?: number;
+    /**
+     * Defines a step of increasing/decreasing the value of the component.
+     * @default 1
+     * @public
+     */
+    step: number;
+    /**
+     * Defines the value state of the component.
+     * @default "None"
+     * @public
+     */
+    valueState: `${ValueState}`;
+    /**
+     * Defines whether the component is required.
+     * @default false
+     * @public
+     */
+    required: boolean;
+    /**
+     * Determines whether the component is displayed as disabled.
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Determines whether the component is displayed as read-only.
+     * @default false
+     * @public
+     */
+    readonly: boolean;
+    /**
+     * Defines a short hint, intended to aid the user with data entry when the
+     * component has no value.
+     *
+     * **Note:** When no placeholder is set, the format pattern is displayed as a placeholder.
+     * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
+     * @default undefined
+     * @public
+     */
+    placeholder?: string;
+    /**
+     * Determines the name by which the component will be identified upon submission in an HTML form.
+     *
+     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * @default undefined
+     * @public
+     */
+    name?: string;
+    /**
+     * Determines the number of digits after the decimal point of the component.
+     * @default 0
+     * @public
+     */
+    valuePrecision: number;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @default undefined
+     * @public
+     */
+    accessibleName?: string;
+    /**
+     * Receives ID (or many IDs) of the elements that label the component.
+     * @default undefined
+     * @public
+     */
+    accessibleNameRef?: string;
+    /**
+     * Controls whether the increment/decrement step buttons are shown.
+     * @default false
+     * @private
+     */
+    _showStepButtons: boolean;
+    _externalAriaLabel?: string;
+    _decIconDisabled: boolean;
+    _incIconDisabled: boolean;
+    focused: boolean;
+    _inputFocused: boolean;
+    _previousValue: number | undefined;
+    _waitTimeout: number;
+    _speed: number;
+    _btnDown?: boolean;
+    _spinTimeoutId?: Timeout;
+    _spinStarted: boolean;
+    _inputValue?: string;
+    /**
+     * Defines the value state message that will be displayed as pop up under the component.
+     *
+     * **Note:** If not specified, a default text (in the respective language) will be displayed.
+     *
+     * **Note:** The `valueStateMessage` would be displayed,
+     * when the component is in `Information`, `Critical` or `Negative` value state.
+     * @public
+     */
+    valueStateMessage: Slot<HTMLElement>;
+    _initialValueState?: `${ValueState}`;
+    _formatter?: NumberFormat;
+    _languageChangeHandler?: (lang: string) => Promise<void>;
+    _languageChanged?: boolean;
+    _delimiter?: string;
+    _groupSeparator?: string;
+    static i18nBundle: I18nBundle;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
+    get formFormattedValue(): FormData | string | null;
+    get type(): InputType;
+    get decIconTitle(): string;
+    get incIconTitle(): string;
+    get _decIconClickable(): boolean;
+    get _incIconClickable(): boolean;
+    get _isFocused(): boolean;
+    get _displayValue(): string;
+    get accInfo(): InputAccInfo;
+    get inputAttributes(): {
+        min: number | undefined;
+        max: number | undefined;
+        step: number;
+    };
+    onBeforeRendering(): void;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    _setupLanguageChangeHandler(): void;
+    _cleanupLanguageChangeHandler(): void;
+    get formatter(): NumberFormat;
+    get delimiter(): string;
+    get groupSeparator(): string;
+    get input(): Input;
+    get innerInput(): HTMLInputElement;
+    _onButtonFocusOut(): void;
+    _onInput(e: CustomEvent<InputEventDetail>): void;
+    _onInputFocusIn(): void;
+    _onInputFocusOut(): void;
+    _onMouseWheel(e: WheelEvent): void;
+    _setButtonState(): void;
+    _validate(): void;
+    _updateValueState(): void;
+    _preciseValue(value: number): number;
+    _fireChangeEvent(): void;
+    /**
+     * Value modifier - modifies the value of the component, validates the new value and enables/disables increment and
+     * decrement buttons according to the value and min/max values (if set). Fires `change` event when requested
+     * @private
+     * @param modifier modifies the value of the component with the given modifier (positive or negative)
+     * @param fireChangeEvent if `true`, fires `change` event when the value is changed
+     */
+    _modifyValue(modifier: number, fireChangeEvent?: boolean): void;
+    /**
+     * Formats a number with thousands separator based on current locale
+     * @private
+     */
+    _formatNumber(value: number): string;
+    /**
+     * Parses formatted number string back to numeric value
+     * @private
+    */
+    _parseNumber(formattedValue: string): number;
+    _incValue(): void;
+    _decValue(): void;
+    get _isValueWithCorrectPrecision(): boolean;
+    _onInputChange(): void;
+    _setDefaultInputValueIfNeeded(): void;
+    _isValueChanged(inputValue: number): boolean;
+    _updateValueAndValidate(inputValue: number): void;
+    _onfocusin(): void;
+    _onfocusout(): void;
+    _onInputRequestSubmit(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _getCaretPosition(): number | null;
+    _getValueOnkeyDown(e: KeyboardEvent, inputValue: string, cursorPosition?: number): string;
+    _removeGroupSeparators(value: string): string;
+    _isInputValueValid(typedValue: string, parsedValue: number): boolean;
+    _decSpin(e: MouseEvent): void;
+    _incSpin(e: MouseEvent): void;
+    /**
+     * Calculates the time which should be waited until _spinValue function is called.
+     */
+    _calcWaitTimeout(): number;
+    /**
+     * Called when the increment or decrement button is pressed and held to set new value.
+     * @private
+     * @param increment - is this the increment button or not so the values should be spin accordingly up or down
+     * @param resetVariables - whether to reset the spin-related variables or not
+     */
+    _spinValue(increment: boolean, resetVariables?: boolean): void;
+    /**
+    * Resets spin process
+    */
+    _resetSpin(): void;
+    /**
+    * Resets spin process when mouse outs + or - buttons
+    */
+    _resetSpinOut(): void;
+}
+export default NumberInput;
+export type { NumberInputValueStateChangeEventDetail, };