@ui5/webcomponents 2.17.0-rc.2 → 2.17.0-rc.4

package/dist/custom-elements.json

@@ -4796,6 +4796,12 @@
           "kind": "class",
           "description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"yyyy-MM-dd\",\na valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n<script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DatePicker.js\";`",
           "name": "DatePicker",
+          "cssParts": [
+            {
+              "description": "Used to style the input element. This part is forwarded to the underlying ui5-input element.",
+              "name": "input"
+            }
+          ],
           "slots": [
             {
               "name": "valueStateMessage",
@@ -6366,6 +6372,16 @@
               }
             }
           ],
+          "cssParts": [
+            {
+              "description": "Used to style the input element. This part is forwarded to the underlying ui5-input element.",
+              "name": "input",
+              "inheritedFrom": {
+                "name": "DatePicker",
+                "module": "dist/DatePicker.js"
+              }
+            }
+          ],
           "events": [
             {
               "name": "change",
@@ -6967,6 +6983,16 @@
               }
             }
           ],
+          "cssParts": [
+            {
+              "description": "Used to style the input element. This part is forwarded to the underlying ui5-input element.",
+              "name": "input",
+              "inheritedFrom": {
+                "name": "DatePicker",
+                "module": "dist/DatePicker.js"
+              }
+            }
+          ],
           "attributes": [
             {
               "description": "Defines a formatted date value.",
@@ -22802,7 +22828,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "<h3>Overview</h3>\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n<h3>Usage</h3>\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n<h3>Responsive behavior</h3>\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the <code>max-lines</code> property,\nby defining the number of lines the text should wrap before start truncating.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Text\";</code>",
+          "description": "### Overview\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n### Usage\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n### Responsive behavior\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the `max-lines` property,\nby defining the number of lines the text should wrap before start truncating.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Text\";`",
           "name": "Text",
           "slots": [
             {
@@ -23311,6 +23337,12 @@
           "kind": "class",
           "description": "### Overview\nThe `ui5-time-picker` component provides an input field with assigned clocks which are opened on user action.\nThe `ui5-time-picker` allows users to select a localized time using touch, mouse, or keyboard input.\nIt consists of two parts: the time input field and the clocks.\n\n### Usage\nThe user can enter a time by:\n\n- Using the clocks that are displayed in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately).\nWhen the user directly triggers the clocks display, the actual time is displayed.\nFor the `ui5-time-picker`\n\n### Formatting\n\nIf a time is entered by typing it into\nthe input field, it must fit to the used time format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"HH:mm:ss\",\na valid value string is \"11:42:35\" and the same is displayed in the input.\n\n### Keyboard handling\n[F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.\n\nWhen closed:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n-\n\nWhen opened:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n- [A] or [P] - Selects AM or PM respectively.\n- [0]-[9] - Allows direct time selecting (hours/minutes/seconds).\n- [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TimePicker.js\";`",
           "name": "TimePicker",
+          "cssParts": [
+            {
+              "description": "Used to style the input element. This part is forwarded to the underlying ui5-input element.",
+              "name": "input"
+            }
+          ],
           "slots": [
             {
               "name": "valueStateMessage",

package/dist/features/InputSuggestionsTemplate.js

@@ -15,7 +15,7 @@ export default function InputSuggestionsTemplate(hooks) {
                 _jsxs("div", { slot: "header", class: {
                         "ui5-responsive-popover-header": true,
                         ...this.classes.popoverValueState,
-                    }, style: this.styles.suggestionPopoverHeader, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: valueStateMessageInputIcon?.call(this) }), this.open && valueStateMessage?.call(this)] }), suggestionsList.call(this), this._isPhone &&
+                    }, style: this.styles.suggestionPopoverHeader, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: valueStateMessageInputIcon?.call(this) }), this.open && valueStateMessage?.call(this)] }), this.showSuggestions && suggestionsList.call(this), this._isPhone &&
                 _jsxs("div", { slot: "footer", class: "ui5-responsive-popover-footer", children: [_jsx(Button, { design: "Emphasized", onClick: this._confirmMobileValue, children: this._suggestionsOkButtonText }), _jsx(Button, { class: "ui5-responsive-popover-close-btn", design: "Transparent", onClick: this._cancelMobileValue, children: this._suggestionsCancelButtonText })] })] }));
 }
 function defaultSuggestionsList() {

package/dist/features/InputSuggestionsTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSuggestionsTemplate.js","sourceRoot":"","sources":["../../src/features/InputSuggestionsTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JsxTemplateResult } from \"@ui5/webcomponents-base/dist/index.js\";\nimport Input from \"../Input.js\";\nimport Icon from \"../Icon.js\";\n\nimport List from \"../List.js\";\nimport ResponsivePopover from \"../ResponsivePopover.js\";\nimport Button from \"../Button.js\";\nimport ListAccessibleRole from \"../types/ListAccessibleRole.js\";\n\nexport default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {\n\tconst suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;\n\tconst valueStateMessage = hooks?.valueStateMessage;\n\tconst valueStateMessageInputIcon = hooks?.valueStateMessageInputIcon;\n\n\treturn (\n\t\t<ResponsivePopover\n\t\t\tclass={this.classes.popover}\n\t\t\thideArrow={true}\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\tplacement=\"Bottom\"\n\t\t\thorizontalAlign=\"Start\"\n\t\t\ttabindex={-1}\n\t\t\tstyle={this.styles.suggestionsPopover}\n\t\t\tonOpen={this._afterOpenPicker}\n\t\t\tonClose={this._afterClosePicker}\n\t\t\tonScroll={this._scroll}\n\t\t\topen={this.open}\n\t\t\topener={this}\n\t\t\taccessibleName={this._popupLabel}\n\t\t>\n\t\t\t{this._isPhone &&\n\t\t\t\t<>\n\t\t\t\t\t<div slot=\"header\" class=\"ui5-responsive-popover-header\">\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<span>{this._headerTitleText}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<div class=\"input-root-phone native-input-wrapper\">\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tclass=\"ui5-input-inner-phone\"\n\t\t\t\t\t\t\t\t\ttype={this.inputType}\n\t\t\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\t\t\tshowClearIcon={this.showClearIcon}\n\t\t\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\t\t\tonInput={this._handleInput}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.hasValueStateMessage &&\n\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={valueStateMessageInputIcon?.call(this)} />\n\t\t\t\t\t\t{ this.open && valueStateMessage?.call(this) }\n\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</>\n\t\t\t}\n\n\t\t\t{!this._isPhone && this.hasValueStateMessage &&\n\t\t\t\t\t<div\n\t\t\t\t\t\tslot=\"header\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-responsive-popover-header\": true,\n\t\t\t\t\t\t\t...this.classes.popoverValueState,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstyle={this.styles.suggestionPopoverHeader}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={valueStateMessageInputIcon?.call(this)} />\n\t\t\t\t\t\t{ this.open && valueStateMessage?.call(this) }\n\t\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{ suggestionsList.call(this) }\n\n\t\t\t{this._isPhone &&\n\t\t\t\t<div slot=\"footer\" class=\"ui5-responsive-popover-footer\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\t\tonClick={this._confirmMobileValue}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._suggestionsOkButtonText}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\tonClick={this._cancelMobileValue}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._suggestionsCancelButtonText}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ResponsivePopover>\n\t);\n}\n\nfunction defaultSuggestionsList(this: Input) {\n\treturn (\n\t\t<List\n\t\t\taccessibleRole={ListAccessibleRole.ListBox}\n\t\t\tseparators={this.suggestionSeparators}\n\t\t\tselectionMode=\"Single\"\n\t\t\tonMouseDown={this.onItemMouseDown}\n\t\t\tonItemClick={this._handleSuggestionItemPress}\n\t\t\tonSelectionChange={this._handleSelectionChange}\n\t\t>\n\t\t\t<slot></slot>\n\t\t</List>\n\t);\n}\n"]}
+{"version":3,"file":"InputSuggestionsTemplate.js","sourceRoot":"","sources":["../../src/features/InputSuggestionsTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JsxTemplateResult } from \"@ui5/webcomponents-base/dist/index.js\";\nimport Input from \"../Input.js\";\nimport Icon from \"../Icon.js\";\n\nimport List from \"../List.js\";\nimport ResponsivePopover from \"../ResponsivePopover.js\";\nimport Button from \"../Button.js\";\nimport ListAccessibleRole from \"../types/ListAccessibleRole.js\";\n\nexport default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {\n\tconst suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;\n\tconst valueStateMessage = hooks?.valueStateMessage;\n\tconst valueStateMessageInputIcon = hooks?.valueStateMessageInputIcon;\n\n\treturn (\n\t\t<ResponsivePopover\n\t\t\tclass={this.classes.popover}\n\t\t\thideArrow={true}\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\tplacement=\"Bottom\"\n\t\t\thorizontalAlign=\"Start\"\n\t\t\ttabindex={-1}\n\t\t\tstyle={this.styles.suggestionsPopover}\n\t\t\tonOpen={this._afterOpenPicker}\n\t\t\tonClose={this._afterClosePicker}\n\t\t\tonScroll={this._scroll}\n\t\t\topen={this.open}\n\t\t\topener={this}\n\t\t\taccessibleName={this._popupLabel}\n\t\t>\n\t\t\t{this._isPhone &&\n\t\t\t\t<>\n\t\t\t\t\t<div slot=\"header\" class=\"ui5-responsive-popover-header\">\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<span>{this._headerTitleText}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<div class=\"input-root-phone native-input-wrapper\">\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tclass=\"ui5-input-inner-phone\"\n\t\t\t\t\t\t\t\t\ttype={this.inputType}\n\t\t\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\t\t\tshowClearIcon={this.showClearIcon}\n\t\t\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\t\t\tonInput={this._handleInput}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.hasValueStateMessage &&\n\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={valueStateMessageInputIcon?.call(this)} />\n\t\t\t\t\t\t{ this.open && valueStateMessage?.call(this) }\n\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</>\n\t\t\t}\n\n\t\t\t{!this._isPhone && this.hasValueStateMessage &&\n\t\t\t\t\t<div\n\t\t\t\t\t\tslot=\"header\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-responsive-popover-header\": true,\n\t\t\t\t\t\t\t...this.classes.popoverValueState,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstyle={this.styles.suggestionPopoverHeader}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={valueStateMessageInputIcon?.call(this)} />\n\t\t\t\t\t\t{ this.open && valueStateMessage?.call(this) }\n\t\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{ this.showSuggestions && suggestionsList.call(this) }\n\n\t\t\t{this._isPhone &&\n\t\t\t\t<div slot=\"footer\" class=\"ui5-responsive-popover-footer\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\t\tonClick={this._confirmMobileValue}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._suggestionsOkButtonText}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\tonClick={this._cancelMobileValue}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._suggestionsCancelButtonText}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ResponsivePopover>\n\t);\n}\n\nfunction defaultSuggestionsList(this: Input) {\n\treturn (\n\t\t<List\n\t\t\taccessibleRole={ListAccessibleRole.ListBox}\n\t\t\tseparators={this.suggestionSeparators}\n\t\t\tselectionMode=\"Single\"\n\t\t\tonMouseDown={this.onItemMouseDown}\n\t\t\tonItemClick={this._handleSuggestionItemPress}\n\t\t\tonSelectionChange={this._handleSelectionChange}\n\t\t>\n\t\t\t<slot></slot>\n\t\t</List>\n\t);\n}\n"]}