@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/ComboBoxPopoverTemplate.js

@@ -3,21 +3,34 @@ import Icon from "./Icon.js";
 import Button from "./Button.js";
 import List from "./List.js";
 import Input from "./Input.js";
+import Title from "./Title.js";
+import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import BusyIndicator from "./BusyIndicator.js";
 import SuggestionItem from "./SuggestionItem.js";
+import generateHighlightedMarkupFirstMatch from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js";
 export default function ComboBoxPopoverTemplate() {
-    return (_jsxs(_Fragment, { children: [_jsxs(ResponsivePopover, { id: this.responsivePopoverId, class: this.classes.popover, style: this.styles.suggestionsPopover, tabindex: -1, open: this.open, opener: this, hideArrow: true, preventFocusRestore: true, preventInitialFocus: true, placement: "Bottom", horizontalAlign: "Start", accessibleName: this._popupLabel, onBeforeOpen: this._beforeOpenPopover, onOpen: this._afterOpenPopover, onClose: this._afterClosePopover, onKeyDown: this._handlePopoverKeydown, onFocusOut: this._handlePopoverFocusout, children: [_jsx(BusyIndicator, { active: this.loading, class: "ui5-combobox-busy" }), this._isPhone &&
-                        _jsxs(_Fragment, { children: [_jsxs("div", { slot: "header", class: "ui5-responsive-popover-header", children: [_jsx("div", { class: "row", children: _jsx("span", { children: this._headerTitleText }) }), _jsx("div", { class: "row", children: _jsx(Input, { open: this.openOnMobile, placeholder: this.placeholder, valueState: this.valueState, showClearIcon: this.showClearIcon, noTypeahead: this.noTypeahead, onKeyDown: this._handleMobileKeydown, onInput: this._handleMobileInput, onChange: this._inputChange, children: this._filteredItems.map(item => _jsx(SuggestionItem, { text: item.text, "additional-text": item.additionalText })) }) })] }), this.hasValueStateText &&
+    return (_jsxs(_Fragment, { children: [_jsxs(ResponsivePopover, { id: this.responsivePopoverId, class: this.classes.popover, style: this.styles.suggestionsPopover, tabindex: -1, open: this.open, opener: this, hideArrow: true, preventFocusRestore: true, preventInitialFocus: true, placement: "Bottom", horizontalAlign: "Start", accessibleName: this._popupLabel, onBeforeOpen: this._beforeOpenPopover, onOpen: this._afterOpenPopover, onClose: this._afterClosePopover, onKeyDown: this._handlePopoverKeydown, onFocusOut: this._handlePopoverFocusout, children: [this.loading &&
+                        _jsx(BusyIndicator, { active: true, class: "ui5-combobox-busy" }), !this.loading && this._isPhone &&
+                        _jsxs(_Fragment, { children: [_jsxs("div", { slot: "header", class: "ui5-responsive-popover-header", children: [_jsx("div", { class: "row", children: _jsx(Title, { level: "H1", wrappingType: "None", class: "ui5-responsive-popover-header-text", children: this._headerTitleText }) }), _jsx("div", { class: "row", children: _jsx(Input, { open: this.openOnMobile, placeholder: this.placeholder, valueState: this.valueState, showClearIcon: this.showClearIcon, noTypeahead: this.noTypeahead, onKeyDown: this._handleMobileKeydown, onInput: this._handleMobileInput, onChange: this._inputChange, children: this._filteredItems.flatMap(item => {
+                                                    if (item.isGroupItem && item.items) {
+                                                        // For group items, return all nested items
+                                                        return item.items
+                                                            .filter(nestedItem => !!nestedItem)
+                                                            .map(nestedItem => _jsx(SuggestionItem, { text: nestedItem.text, "additional-text": nestedItem.additionalText, markupText: generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue) }));
+                                                    }
+                                                    // For regular items
+                                                    return _jsx(SuggestionItem, { text: item.text, "additional-text": item.additionalText, markupText: generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue) });
+                                                }) }) })] }), this.hasValueStateText &&
                                     _jsxs("div", { class: this.classes.popoverValueState, style: this.styles.popoverValueStateMessage, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: this._valueStateMessageIcon }), this.open && valueStateMessage.call(this)] })] }), !this._isPhone && this.hasValueStateText &&
                         _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: this._valueStateMessageIcon }), this.open && valueStateMessage.call(this)] }), !!this._filteredItems.length &&
+                            }, style: this.styles.suggestionPopoverHeader, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: this._valueStateMessageIcon }), this.open && valueStateMessage.call(this)] }), !this.loading && !!this._filteredItems.length &&
                         _jsx(List, { class: "ui5-combobox-items-list", separators: "None", accessibleRole: "ListBox", selectionMode: "Single", onItemClick: this._selectItem, onItemFocused: this._onItemFocus, onMouseDown: this._itemMousedown, children: this._filteredItems.map(item => _jsx("slot", { name: item._individualSlot })) }), this._isPhone &&
                         _jsxs("div", { slot: "footer", class: "ui5-responsive-popover-footer", children: [_jsx(Button, { design: "Emphasized", onClick: this._closeRespPopover, children: this._dialogOkButtonText }), _jsx(Button, { class: "ui5-responsive-popover-close-btn", design: "Transparent", onClick: this._closeRespPopover, children: this._dialogCancelButtonText })] })] }), this.shouldOpenValueStateMessagePopover &&
-                _jsx(Popover, { preventFocusRestore: true, preventInitialFocus: true, hideArrow: true, tabindex: -1, class: "ui5-valuestatemessage-popover", horizontalAlign: this._valueStatePopoverHorizontalAlign, placement: "Bottom", opener: this, open: this.valueStateOpen, onClose: this._handleValueStatePopoverAfterClose, onFocusOut: this._handleValueStatePopoverFocusout, children: _jsxs("div", { slot: "header", class: this.classes.popoverValueState, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: this._valueStateMessageIcon }), valueStateMessage.call(this)] }) })] }));
+                _jsx(Popover, { preventFocusRestore: true, preventInitialFocus: true, hideArrow: true, tabindex: -1, class: "ui5-valuestatemessage-popover", horizontalAlign: PopoverHorizontalAlign.Start, placement: "Bottom", opener: this, open: this.valueStateOpen, onClose: this._handleValueStatePopoverAfterClose, onFocusOut: this._handleValueStatePopoverFocusout, children: _jsxs("div", { slot: "header", class: this.classes.popoverValueState, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: this._valueStateMessageIcon }), valueStateMessage.call(this)] }) })] }));
 }
 function valueStateMessage() {
     return (_jsx(_Fragment, { children: this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : _jsx("slot", { name: "valueStateMessage" }) }));

package/dist/ComboBoxPopoverTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxPopoverTemplate.js","sourceRoot":"","sources":["../src/ComboBoxPopoverTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import Icon from \"./Icon.js\";\nimport Button from \"./Button.js\";\nimport List from \"./List.js\";\nimport Input from \"./Input.js\";\nimport Popover from \"./Popover.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport BusyIndicator from \"./BusyIndicator.js\";\nimport SuggestionItem from \"./SuggestionItem.js\";\nimport type ComboBox from \"./ComboBox.js\";\n\nexport default function ComboBoxPopoverTemplate(this: ComboBox) {\n\treturn (\n\t\t<>\n\t\t\t<ResponsivePopover\n\t\t\t\tid={this.responsivePopoverId}\n\t\t\t\tclass={this.classes.popover}\n\t\t\t\tstyle={this.styles.suggestionsPopover}\n\t\t\t\ttabindex={-1}\n\t\t\t\topen={this.open}\n\t\t\t\topener={this}\n\t\t\t\thideArrow={true}\n\t\t\t\tpreventFocusRestore={true}\n\t\t\t\tpreventInitialFocus={true}\n\t\t\t\tplacement=\"Bottom\"\n\t\t\t\thorizontalAlign=\"Start\"\n\t\t\t\taccessibleName={this._popupLabel}\n\t\t\t\tonBeforeOpen={this._beforeOpenPopover}\n\t\t\t\tonOpen={this._afterOpenPopover}\n\t\t\t\tonClose={this._afterClosePopover}\n\t\t\t\tonKeyDown={this._handlePopoverKeydown}\n\t\t\t\tonFocusOut={this._handlePopoverFocusout}\n\t\t\t>\n\t\t\t\t<BusyIndicator active={this.loading} class=\"ui5-combobox-busy\"/>\n\n\t\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\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\topen={this.openOnMobile}\n\t\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\t\tvalueState={this.valueState}\n\t\t\t\t\t\t\t\tshowClearIcon={this.showClearIcon}\n\t\t\t\t\t\t\t\tnoTypeahead={this.noTypeahead}\n\t\t\t\t\t\t\t\tonKeyDown={this._handleMobileKeydown}\n\t\t\t\t\t\t\t\tonInput={this._handleMobileInput}\n\t\t\t\t\t\t\t\tonChange={this._inputChange}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ this._filteredItems.map(item => <SuggestionItem text={item.text} additional-text={item.additionalText}/>)}\n\t\t\t\t\t\t\t</Input>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.hasValueStateText &&\n\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}/>\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\t}\n\n\t\t\t\t{!this._isPhone && this.hasValueStateText &&\n\t\t\t\t<div\n\t\t\t\t\tslot=\"header\"\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-responsive-popover-header\": true,\n\t\t\t\t\t\t...this.classes.popoverValueState,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={this.styles.suggestionPopoverHeader}\n\t\t\t\t>\n\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}/>\n\t\t\t\t\t{ this.open && valueStateMessage.call(this) }\n\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{!!this._filteredItems.length &&\n\t\t\t\t<List\n\t\t\t\t\tclass=\"ui5-combobox-items-list\"\n\t\t\t\t\tseparators=\"None\"\n\t\t\t\t\taccessibleRole=\"ListBox\"\n\t\t\t\t\tselectionMode=\"Single\"\n\t\t\t\t\tonItemClick={this._selectItem}\n\t\t\t\t\tonItemFocused={this._onItemFocus}\n\t\t\t\t\tonMouseDown={this._itemMousedown}\n\t\t\t\t>\n\t\t\t\t\t{ this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}\n\t\t\t\t</List>\n\t\t\t\t}\n\n\t\t\t\t{this._isPhone &&\n\t\t\t<div slot=\"footer\" class=\"ui5-responsive-popover-footer\">\n\t\t\t\t<Button\n\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\tonClick={this._closeRespPopover}\n\t\t\t\t>{this._dialogOkButtonText}</Button>\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tonClick={this._closeRespPopover}\n\t\t\t\t>\n\t\t\t\t\t{this._dialogCancelButtonText}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t\t\t}\n\t\t\t</ResponsivePopover>\n\n\t\t\t{this.shouldOpenValueStateMessagePopover &&\n\t\t<Popover\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\thideArrow={true}\n\t\t\ttabindex={-1}\n\t\t\tclass=\"ui5-valuestatemessage-popover\"\n\t\t\thorizontalAlign={this._valueStatePopoverHorizontalAlign}\n\t\t\tplacement=\"Bottom\"\n\t\t\topener={this}\n\t\t\topen={this.valueStateOpen}\n\t\t\tonClose={this._handleValueStatePopoverAfterClose}\n\t\t\tonFocusOut={this._handleValueStatePopoverFocusout}\n\t\t>\n\t\t\t<div slot=\"header\" class={this.classes.popoverValueState}>\n\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}/>\n\t\t\t\t{ valueStateMessage.call(this) }\n\t\t\t</div>\n\t\t</Popover>\n\t\t\t}\n\t\t</>\n\t);\n}\n\nfunction valueStateMessage(this: ComboBox) {\n\treturn (\n\t\t<>\n\t\t\t{ this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name=\"valueStateMessage\"></slot> }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"file":"ComboBoxPopoverTemplate.js","sourceRoot":"","sources":["../src/ComboBoxPopoverTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,sBAAsB,MAAM,mCAAmC,CAAC;AACvE,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,mCAAmC,MAAM,0EAA0E,CAAC;AAG3H,MAAM,CAAC,OAAO,UAAU,uBAAuB;IAC9C,OAAO,CACN,8BACC,MAAC,iBAAiB,IACjB,EAAE,EAAE,IAAI,CAAC,mBAAmB,EAC5B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC3B,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,EACrC,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,IAAI,EACf,mBAAmB,EAAE,IAAI,EACzB,mBAAmB,EAAE,IAAI,EACzB,SAAS,EAAC,QAAQ,EAClB,eAAe,EAAC,OAAO,EACvB,cAAc,EAAE,IAAI,CAAC,WAAW,EAChC,YAAY,EAAE,IAAI,CAAC,kBAAkB,EACrC,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAC9B,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,qBAAqB,EACrC,UAAU,EAAE,IAAI,CAAC,sBAAsB,aAEtC,IAAI,CAAC,OAAO;wBACZ,KAAC,aAAa,IAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAC,mBAAmB,GAAE,EAGxD,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;wBAC/B,8BACC,eAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,+BAA+B,aACvD,cAAK,KAAK,EAAC,KAAK,YACf,KAAC,KAAK,IACL,KAAK,EAAC,IAAI,EACV,YAAY,EAAC,MAAM,EACnB,KAAK,EAAC,oCAAoC,YAEzC,IAAI,CAAC,gBAAgB,GACf,GACH,EAEN,cAAK,KAAK,EAAC,KAAK,YACf,KAAC,KAAK,IACL,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,oBAAoB,EACpC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,QAAQ,EAAE,IAAI,CAAC,YAAY,YAEzB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oDACpC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;wDACpC,2CAA2C;wDAC3C,OAAO,IAAI,CAAC,KAAK;6DACf,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;6DAClC,GAAG,CAAC,UAAU,CAAC,EAAE,CACjB,KAAC,cAAc,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,qBAAmB,UAAU,CAAC,cAAc,EAAE,UAAU,EAAE,mCAAmC,CAAC,UAAU,CAAC,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,GAAG,CAC9K,CAAC;oDACJ,CAAC;oDACD,oBAAoB;oDACpB,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,qBAAmB,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,mCAAmC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;gDACrK,CAAC,CAAC,GACK,GACH,IACD,EAEL,IAAI,CAAC,iBAAiB;oCACvB,eAAK,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,wBAAwB,aACtF,KAAC,IAAI,IAAC,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,GAAG,EACnF,IAAI,CAAC,IAAI,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IACtC,IAEJ,EAGF,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB;wBACzC,eACC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gCACN,+BAA+B,EAAE,IAAI;gCACrC,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB;6BACjC,EACD,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,uBAAuB,aAE1C,KAAC,IAAI,IAAC,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,GAAG,EACnF,IAAI,CAAC,IAAI,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IACtC,EAGL,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM;wBAC9C,KAAC,IAAI,IACJ,KAAK,EAAC,yBAAyB,EAC/B,UAAU,EAAC,MAAM,EACjB,cAAc,EAAC,SAAS,EACxB,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAE,IAAI,CAAC,YAAY,EAChC,WAAW,EAAE,IAAI,CAAC,cAAc,YAE9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,CAAC,GACtE,EAGN,IAAI,CAAC,QAAQ;wBACf,eAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,+BAA+B,aACvD,KAAC,MAAM,IACN,MAAM,EAAC,YAAY,EACnB,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAC9B,IAAI,CAAC,mBAAmB,GAAU,EACpC,KAAC,MAAM,IACN,KAAK,EAAC,kCAAkC,EACxC,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAE9B,IAAI,CAAC,uBAAuB,GACrB,IACJ,IAEc,EAEnB,IAAI,CAAC,kCAAkC;gBACzC,KAAC,OAAO,IACP,mBAAmB,EAAE,IAAI,EACzB,mBAAmB,EAAE,IAAI,EACzB,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAC,+BAA+B,EACrC,eAAe,EAAE,sBAAsB,CAAC,KAAK,EAC7C,SAAS,EAAC,QAAQ,EAClB,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,OAAO,EAAE,IAAI,CAAC,kCAAkC,EAChD,UAAU,EAAE,IAAI,CAAC,gCAAgC,YAEjD,eAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,aACvD,KAAC,IAAI,IAAC,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,GAAG,EACnF,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IACzB,GACG,IAEP,CACH,CAAC;AACH,CAAC;AAED,SAAS,iBAAiB;IACzB,OAAO,CACN,4BACG,IAAI,CAAC,qCAAqC,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,eAAM,IAAI,EAAC,mBAAmB,GAAQ,GAChH,CACH,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport Button from \"./Button.js\";\nimport List from \"./List.js\";\nimport Input from \"./Input.js\";\nimport Title from \"./Title.js\";\nimport PopoverHorizontalAlign from \"./types/PopoverHorizontalAlign.js\";\nimport Popover from \"./Popover.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport BusyIndicator from \"./BusyIndicator.js\";\nimport SuggestionItem from \"./SuggestionItem.js\";\nimport generateHighlightedMarkupFirstMatch from \"@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js\";\nimport type ComboBox from \"./ComboBox.js\";\n\nexport default function ComboBoxPopoverTemplate(this: ComboBox) {\n\treturn (\n\t\t<>\n\t\t\t<ResponsivePopover\n\t\t\t\tid={this.responsivePopoverId}\n\t\t\t\tclass={this.classes.popover}\n\t\t\t\tstyle={this.styles.suggestionsPopover}\n\t\t\t\ttabindex={-1}\n\t\t\t\topen={this.open}\n\t\t\t\topener={this}\n\t\t\t\thideArrow={true}\n\t\t\t\tpreventFocusRestore={true}\n\t\t\t\tpreventInitialFocus={true}\n\t\t\t\tplacement=\"Bottom\"\n\t\t\t\thorizontalAlign=\"Start\"\n\t\t\t\taccessibleName={this._popupLabel}\n\t\t\t\tonBeforeOpen={this._beforeOpenPopover}\n\t\t\t\tonOpen={this._afterOpenPopover}\n\t\t\t\tonClose={this._afterClosePopover}\n\t\t\t\tonKeyDown={this._handlePopoverKeydown}\n\t\t\t\tonFocusOut={this._handlePopoverFocusout}\n\t\t\t>\n\t\t\t\t{this.loading &&\n\t\t\t\t\t<BusyIndicator active={true} class=\"ui5-combobox-busy\"/>\n\t\t\t\t}\n\n\t\t\t\t{!this.loading && 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<Title\n\t\t\t\t\t\t\t\tlevel=\"H1\"\n\t\t\t\t\t\t\t\twrappingType=\"None\"\n\t\t\t\t\t\t\t\tclass=\"ui5-responsive-popover-header-text\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this._headerTitleText}\n\t\t\t\t\t\t\t</Title>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\topen={this.openOnMobile}\n\t\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\t\tvalueState={this.valueState}\n\t\t\t\t\t\t\t\tshowClearIcon={this.showClearIcon}\n\t\t\t\t\t\t\t\tnoTypeahead={this.noTypeahead}\n\t\t\t\t\t\t\t\tonKeyDown={this._handleMobileKeydown}\n\t\t\t\t\t\t\t\tonInput={this._handleMobileInput}\n\t\t\t\t\t\t\t\tonChange={this._inputChange}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ this._filteredItems.flatMap(item => {\n\t\t\t\t\t\t\t\t\tif (item.isGroupItem && item.items) {\n\t\t\t\t\t\t\t\t\t\t// For group items, return all nested items\n\t\t\t\t\t\t\t\t\t\treturn item.items\n\t\t\t\t\t\t\t\t\t\t\t.filter(nestedItem => !!nestedItem)\n\t\t\t\t\t\t\t\t\t\t\t.map(nestedItem =>\n\t\t\t\t\t\t\t\t\t\t\t\t<SuggestionItem text={nestedItem.text} additional-text={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || \"\", this.filterValue)}/>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// For regular items\n\t\t\t\t\t\t\t\t\treturn <SuggestionItem text={item.text} additional-text={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || \"\", this.filterValue)}/>;\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</Input>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.hasValueStateText &&\n\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}/>\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\t}\n\n\t\t\t\t{!this._isPhone && this.hasValueStateText &&\n\t\t\t\t<div\n\t\t\t\t\tslot=\"header\"\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-responsive-popover-header\": true,\n\t\t\t\t\t\t...this.classes.popoverValueState,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={this.styles.suggestionPopoverHeader}\n\t\t\t\t>\n\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}/>\n\t\t\t\t\t{ this.open && valueStateMessage.call(this) }\n\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{!this.loading && !!this._filteredItems.length &&\n\t\t\t\t<List\n\t\t\t\t\tclass=\"ui5-combobox-items-list\"\n\t\t\t\t\tseparators=\"None\"\n\t\t\t\t\taccessibleRole=\"ListBox\"\n\t\t\t\t\tselectionMode=\"Single\"\n\t\t\t\t\tonItemClick={this._selectItem}\n\t\t\t\t\tonItemFocused={this._onItemFocus}\n\t\t\t\t\tonMouseDown={this._itemMousedown}\n\t\t\t\t>\n\t\t\t\t\t{ this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}\n\t\t\t\t</List>\n\t\t\t\t}\n\n\t\t\t\t{this._isPhone &&\n\t\t\t<div slot=\"footer\" class=\"ui5-responsive-popover-footer\">\n\t\t\t\t<Button\n\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\tonClick={this._closeRespPopover}\n\t\t\t\t>{this._dialogOkButtonText}</Button>\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tonClick={this._closeRespPopover}\n\t\t\t\t>\n\t\t\t\t\t{this._dialogCancelButtonText}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t\t\t}\n\t\t\t</ResponsivePopover>\n\n\t\t\t{this.shouldOpenValueStateMessagePopover &&\n\t\t<Popover\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\thideArrow={true}\n\t\t\ttabindex={-1}\n\t\t\tclass=\"ui5-valuestatemessage-popover\"\n\t\t\thorizontalAlign={PopoverHorizontalAlign.Start}\n\t\t\tplacement=\"Bottom\"\n\t\t\topener={this}\n\t\t\topen={this.valueStateOpen}\n\t\t\tonClose={this._handleValueStatePopoverAfterClose}\n\t\t\tonFocusOut={this._handleValueStatePopoverFocusout}\n\t\t>\n\t\t\t<div slot=\"header\" class={this.classes.popoverValueState}>\n\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}/>\n\t\t\t\t{ valueStateMessage.call(this) }\n\t\t\t</div>\n\t\t</Popover>\n\t\t\t}\n\t\t</>\n\t);\n}\n\nfunction valueStateMessage(this: ComboBox) {\n\treturn (\n\t\t<>\n\t\t\t{ this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name=\"valueStateMessage\"></slot> }\n\t\t</>\n\t);\n}\n"]}

package/dist/ComboBoxTemplate.js

@@ -12,6 +12,6 @@ export default function ComboBoxTemplate() {
                         _jsx(Icon, { slot: "icon", name: slimArrowDown, tabindex: -1, class: {
                                 "inputIcon": true,
                                 "inputIcon--pressed": this._iconPressed,
-                            }, accessibleName: this._iconAccessibleNameText, onClick: this._arrowClick })] }), ComboBoxPopoverTemplate.call(this)] }));
+                            }, accessibleName: this._iconAccessibleNameText, onMouseDown: this._arrowMouseDown, onClick: this._arrowClick })] }), ComboBoxPopoverTemplate.call(this)] }));
 }
 //# sourceMappingURL=ComboBoxTemplate.js.map

package/dist/ComboBoxTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxTemplate.js","sourceRoot":"","sources":["../src/ComboBoxTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,OAAO,CACN,8BACC,eAAK,KAAK,EAAC,+CAA+C,aACxD,IAAI,CAAC,aAAa;wBACnB,eAAM,EAAE,EAAC,yBAAyB,EAAC,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,wBAAwB,GAAQ,EAEhG,IAAI,CAAC,+BAA+B,CAAC,MAAM,GAAG,CAAC;wBAC9C,eAAM,EAAE,EAAC,sCAAsC,EAAC,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,+BAA+B,GAAQ,EAGvH,gBAAO,EAAE,EAAC,oBAAoB,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,uBAEjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,iBAEV,IAAI,CAAC,UAAU,EAC5B,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,UAAU,EAAE,IAAI,CAAC,SAAS,mBACX,IAAI,CAAC,IAAI,EACxB,IAAI,EAAC,UAAU,mBACD,QAAQ,uBACJ,MAAM,sBACN,IAAI,CAAC,mBAAmB,gBAC9B,IAAI,CAAC,aAAa,mBACf,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,mBAAmB,EACvC,YAAY,EAAC,KAAK,+BAEjB,EAED,IAAI,CAAC,uBAAuB;wBAC7B,cAAK,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,wCAAwC,EAAC,QAAQ,EAAE,CAAC,CAAC,YACrF,KAAC,IAAI,IAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,uBAAuB,GAAG,GAC1G,EAGL,IAAI,CAAC,IAAI;wBACV,eAAM,IAAI,EAAC,MAAM,GAAQ,EAGxB,CAAC,IAAI,CAAC,QAAQ;wBACf,KAAC,IAAI,IACJ,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,aAAa,EACnB,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE;gCACN,WAAW,EAAE,IAAI;gCACjB,oBAAoB,EAAE,IAAI,CAAC,YAAY;6BACvC,EACD,cAAc,EAAE,IAAI,CAAC,uBAAuB,EAC5C,OAAO,EAAE,IAAI,CAAC,WAAW,GACxB,IAEG,EAEJ,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,IAClC,CACH,CAAC;AACH,CAAC","sourcesContent":["import type ComboBox from \"./ComboBox.js\";\nimport Icon from \"./Icon.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport slimArrowDown from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport ComboBoxPopoverTemplate from \"./ComboBoxPopoverTemplate.js\";\n\nexport default function ComboBoxTemplate(this: ComboBox) {\n\treturn (\n\t\t<>\n\t\t\t<div class=\"ui5-combobox-root ui5-input-focusable-element\">\n\t\t\t\t{this.hasValueState &&\n\t\t\t\t<span id=\"value-state-description\" class=\"ui5-hidden-text\">{this.ariaValueStateHiddenText}</span>\n\t\t\t\t}\n\t\t\t\t{this.linksInAriaValueStateHiddenText.length > 0 &&\n\t\t\t\t\t\t<span id=\"hiddenText-value-state-link-shortcut\" class=\"ui5-hidden-text\">{this.valueStateLinksShortcutsTextAcc}</span>\n\t\t\t\t}\n\n\t\t\t\t<input id=\"ui5-combobox-input\"\n\t\t\t\t\tvalue={this.value}\n\t\t\t\t\tinner-input\n\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\t// check this value-state\n\t\t\t\t\tvalue-state={this.valueState}\n\t\t\t\t\tonKeyDown={this._keydown}\n\t\t\t\t\tonInput={this._input}\n\t\t\t\t\tonChange={this._inputChange}\n\t\t\t\t\tonClick={this._click}\n\t\t\t\t\tonKeyUp={this._keyup}\n\t\t\t\t\tonFocusIn={this._focusin}\n\t\t\t\t\tonFocusOut={this._focusout}\n\t\t\t\t\taria-expanded={this.open}\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\t\taria-autocomplete=\"both\"\n\t\t\t\t\taria-describedby={this.ariaDescribedByText}\n\t\t\t\t\taria-label={this.ariaLabelText}\n\t\t\t\t\taria-required={this.required}\n\t\t\t\t\taria-controls={this.responsivePopoverId}\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t/>\n\n\t\t\t\t{this._effectiveShowClearIcon &&\n\t\t\t\t<div onClick={this._clear} class=\"ui5-input-clear-icon-wrapper inputIcon\" tabindex={-1}>\n\t\t\t\t\t<Icon tabindex={-1} class=\"ui5-input-clear-icon\" name={decline} accessibleName={this.clearIconAccessibleName}/>\n\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{this.icon &&\n\t\t\t\t<slot name=\"icon\"></slot>\n\t\t\t\t}\n\n\t\t\t\t{!this.readonly &&\n\t\t\t\t<Icon\n\t\t\t\t\tslot=\"icon\"\n\t\t\t\t\tname={slimArrowDown}\n\t\t\t\t\ttabindex={-1}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"inputIcon\": true,\n\t\t\t\t\t\t\"inputIcon--pressed\": this._iconPressed,\n\t\t\t\t\t}}\n\t\t\t\t\taccessibleName={this._iconAccessibleNameText}\n\t\t\t\t\tonClick={this._arrowClick}\n\t\t\t\t/>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t{ ComboBoxPopoverTemplate.call(this) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"file":"ComboBoxTemplate.js","sourceRoot":"","sources":["../src/ComboBoxTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,OAAO,CACN,8BACC,eAAK,KAAK,EAAC,+CAA+C,aACxD,IAAI,CAAC,aAAa;wBACnB,eAAM,EAAE,EAAC,yBAAyB,EAAC,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,wBAAwB,GAAQ,EAEhG,IAAI,CAAC,+BAA+B,CAAC,MAAM,GAAG,CAAC;wBAC9C,eAAM,EAAE,EAAC,sCAAsC,EAAC,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,+BAA+B,GAAQ,EAGvH,gBAAO,EAAE,EAAC,oBAAoB,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,uBAEjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,iBAEV,IAAI,CAAC,UAAU,EAC5B,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,UAAU,EAAE,IAAI,CAAC,SAAS,mBACX,IAAI,CAAC,IAAI,EACxB,IAAI,EAAC,UAAU,mBACD,QAAQ,uBACJ,MAAM,sBACN,IAAI,CAAC,mBAAmB,gBAC9B,IAAI,CAAC,aAAa,mBACf,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,mBAAmB,EACvC,YAAY,EAAC,KAAK,+BAEjB,EAED,IAAI,CAAC,uBAAuB;wBAC7B,cAAK,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,wCAAwC,EAAC,QAAQ,EAAE,CAAC,CAAC,YACrF,KAAC,IAAI,IAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,uBAAuB,GAAG,GAC1G,EAGL,IAAI,CAAC,IAAI;wBACV,eAAM,IAAI,EAAC,MAAM,GAAQ,EAGxB,CAAC,IAAI,CAAC,QAAQ;wBACf,KAAC,IAAI,IACJ,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,aAAa,EACnB,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE;gCACN,WAAW,EAAE,IAAI;gCACjB,oBAAoB,EAAE,IAAI,CAAC,YAAY;6BACvC,EACD,cAAc,EAAE,IAAI,CAAC,uBAAuB,EAC5C,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,GACxB,IAEG,EAEJ,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,IAClC,CACH,CAAC;AACH,CAAC","sourcesContent":["import type ComboBox from \"./ComboBox.js\";\nimport Icon from \"./Icon.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport slimArrowDown from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport ComboBoxPopoverTemplate from \"./ComboBoxPopoverTemplate.js\";\n\nexport default function ComboBoxTemplate(this: ComboBox) {\n\treturn (\n\t\t<>\n\t\t\t<div class=\"ui5-combobox-root ui5-input-focusable-element\">\n\t\t\t\t{this.hasValueState &&\n\t\t\t\t<span id=\"value-state-description\" class=\"ui5-hidden-text\">{this.ariaValueStateHiddenText}</span>\n\t\t\t\t}\n\t\t\t\t{this.linksInAriaValueStateHiddenText.length > 0 &&\n\t\t\t\t\t\t<span id=\"hiddenText-value-state-link-shortcut\" class=\"ui5-hidden-text\">{this.valueStateLinksShortcutsTextAcc}</span>\n\t\t\t\t}\n\n\t\t\t\t<input id=\"ui5-combobox-input\"\n\t\t\t\t\tvalue={this.value}\n\t\t\t\t\tinner-input\n\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\t// check this value-state\n\t\t\t\t\tvalue-state={this.valueState}\n\t\t\t\t\tonKeyDown={this._keydown}\n\t\t\t\t\tonInput={this._input}\n\t\t\t\t\tonChange={this._inputChange}\n\t\t\t\t\tonClick={this._click}\n\t\t\t\t\tonKeyUp={this._keyup}\n\t\t\t\t\tonFocusIn={this._focusin}\n\t\t\t\t\tonFocusOut={this._focusout}\n\t\t\t\t\taria-expanded={this.open}\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\t\taria-autocomplete=\"both\"\n\t\t\t\t\taria-describedby={this.ariaDescribedByText}\n\t\t\t\t\taria-label={this.ariaLabelText}\n\t\t\t\t\taria-required={this.required}\n\t\t\t\t\taria-controls={this.responsivePopoverId}\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t/>\n\n\t\t\t\t{this._effectiveShowClearIcon &&\n\t\t\t\t<div onClick={this._clear} class=\"ui5-input-clear-icon-wrapper inputIcon\" tabindex={-1}>\n\t\t\t\t\t<Icon tabindex={-1} class=\"ui5-input-clear-icon\" name={decline} accessibleName={this.clearIconAccessibleName}/>\n\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{this.icon &&\n\t\t\t\t<slot name=\"icon\"></slot>\n\t\t\t\t}\n\n\t\t\t\t{!this.readonly &&\n\t\t\t\t<Icon\n\t\t\t\t\tslot=\"icon\"\n\t\t\t\t\tname={slimArrowDown}\n\t\t\t\t\ttabindex={-1}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"inputIcon\": true,\n\t\t\t\t\t\t\"inputIcon--pressed\": this._iconPressed,\n\t\t\t\t\t}}\n\t\t\t\t\taccessibleName={this._iconAccessibleNameText}\n\t\t\t\t\tonMouseDown={this._arrowMouseDown}\n\t\t\t\t\tonClick={this._arrowClick}\n\t\t\t\t/>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t{ ComboBoxPopoverTemplate.call(this) }\n\t\t</>\n\t);\n}\n"]}

package/dist/CustomAnnouncement.d.ts

@@ -0,0 +1,6 @@
+declare const applyCustomAnnouncement: (element: HTMLElement, text?: string | string[]) => void;
+type CustomAnnouncementOptions = {
+    lessDetails?: boolean;
+};
+declare const getCustomAnnouncement: (element: Node, options?: CustomAnnouncementOptions, _isRootElement?: boolean) => string;
+export { getCustomAnnouncement, applyCustomAnnouncement, };

package/dist/CustomAnnouncement.js

@@ -0,0 +1,92 @@
+import I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
+import { ACC_STATE_EMPTY, ACC_STATE_REQUIRED, ACC_STATE_DISABLED, ACC_STATE_READONLY, ACC_STATE_SINGLE_CONTROL, ACC_STATE_MULTIPLE_CONTROLS, } from "./generated/i18n/i18n-defaults.js";
+let i18nBundle;
+let invisibleText;
+const getBundle = () => {
+    i18nBundle ??= new I18nBundle("@ui5/webcomponents-base");
+    return i18nBundle;
+};
+const checkVisibility = (element) => {
+    return element.checkVisibility() || getComputedStyle(element).display === "contents";
+};
+const applyCustomAnnouncement = (element, text = []) => {
+    if (!invisibleText || !invisibleText.isConnected) {
+        invisibleText = document.createElement("span");
+        invisibleText.id = "ui5-invisible-text";
+        invisibleText.hidden = true;
+        document.body.appendChild(invisibleText);
+    }
+    const ariaLabelledByElements = [...(element.ariaLabelledByElements || [])];
+    const invisibleTextIndex = ariaLabelledByElements.indexOf(invisibleText);
+    text = Array.isArray(text) ? text.filter(Boolean).join(" . ").trim() : text.trim();
+    invisibleText.textContent = text;
+    if (text && invisibleTextIndex === -1) {
+        ariaLabelledByElements.unshift(invisibleText);
+        element.ariaLabelledByElements = ariaLabelledByElements;
+    }
+    else if (!text && invisibleTextIndex > -1) {
+        ariaLabelledByElements.splice(invisibleTextIndex, 1);
+        element.ariaLabelledByElements = ariaLabelledByElements.length ? ariaLabelledByElements : null;
+    }
+};
+const getCustomAnnouncement = (element, options = {}, _isRootElement = true) => {
+    if (!element) {
+        return "";
+    }
+    if (element.nodeType === Node.TEXT_NODE) {
+        return element.data.trim();
+    }
+    if (!(element instanceof HTMLElement)) {
+        return "";
+    }
+    if (element.hasAttribute("data-ui5-acc-text")) {
+        return element.getAttribute("data-ui5-acc-text") || "";
+    }
+    if (element.ariaHidden === "true" || !checkVisibility(element)) {
+        return _isRootElement ? getBundle().getText(ACC_STATE_EMPTY) : "";
+    }
+    let childNodes = [];
+    const descriptions = [];
+    const accessibilityInfo = element.accessibilityInfo;
+    const { lessDetails } = options;
+    if (accessibilityInfo) {
+        const { type, description, required, disabled, readonly, children, } = accessibilityInfo;
+        childNodes = children || [];
+        type && descriptions.push(type);
+        description && descriptions.push(description);
+        if (!lessDetails) {
+            required && descriptions.push(getBundle().getText(ACC_STATE_REQUIRED));
+            disabled && descriptions.push(getBundle().getText(ACC_STATE_DISABLED));
+            readonly && descriptions.push(getBundle().getText(ACC_STATE_READONLY));
+        }
+    }
+    else if (element.localName === "slot") {
+        childNodes = element.assignedNodes({ flatten: true });
+    }
+    else {
+        childNodes = element.shadowRoot ? [...element.shadowRoot.childNodes] : [...element.childNodes];
+    }
+    childNodes.forEach(child => {
+        const childDescription = getCustomAnnouncement(child, options, false);
+        childDescription && descriptions.push(childDescription);
+    });
+    if (_isRootElement) {
+        const hasDescription = descriptions.length > 0;
+        if (!hasDescription || !lessDetails) {
+            const tabbables = getTabbableElements(element);
+            const bundleKey = [
+                hasDescription ? "" : ACC_STATE_EMPTY,
+                ACC_STATE_SINGLE_CONTROL,
+                ACC_STATE_MULTIPLE_CONTROLS,
+            ][Math.min(tabbables.length, 2)];
+            if (bundleKey) {
+                hasDescription && descriptions.push(".");
+                descriptions.push(getBundle().getText(bundleKey));
+            }
+        }
+    }
+    return descriptions.join(" ").trim();
+};
+export { getCustomAnnouncement, applyCustomAnnouncement, };
+//# sourceMappingURL=CustomAnnouncement.js.map

package/dist/CustomAnnouncement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomAnnouncement.js","sourceRoot":"","sources":["../src/CustomAnnouncement.ts"],"names":[],"mappings":"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","sourcesContent":["import I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport type { AccessibilityInfo } from \"@ui5/webcomponents-base\";\nimport {\n\tACC_STATE_EMPTY,\n\tACC_STATE_REQUIRED,\n\tACC_STATE_DISABLED,\n\tACC_STATE_READONLY,\n\tACC_STATE_SINGLE_CONTROL,\n\tACC_STATE_MULTIPLE_CONTROLS,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nlet i18nBundle: I18nBundle;\nlet invisibleText: HTMLElement;\n\nconst getBundle = (): I18nBundle => {\n\ti18nBundle ??= new I18nBundle(\"@ui5/webcomponents-base\");\n\treturn i18nBundle;\n};\n\nconst checkVisibility = (element: HTMLElement): boolean => {\n\treturn element.checkVisibility() || getComputedStyle(element).display === \"contents\";\n};\n\nconst applyCustomAnnouncement = (element: HTMLElement, text: string | string[] = []) => {\n\tif (!invisibleText || !invisibleText.isConnected) {\n\t\tinvisibleText = document.createElement(\"span\");\n\t\tinvisibleText.id = \"ui5-invisible-text\";\n\t\tinvisibleText.hidden = true;\n\t\tdocument.body.appendChild(invisibleText);\n\t}\n\n\tconst ariaLabelledByElements = [...((element as any).ariaLabelledByElements || [])];\n\tconst invisibleTextIndex = ariaLabelledByElements.indexOf(invisibleText);\n\ttext = Array.isArray(text) ? text.filter(Boolean).join(\" . \").trim() : text.trim();\n\tinvisibleText.textContent = text;\n\n\tif (text && invisibleTextIndex === -1) {\n\t\tariaLabelledByElements.unshift(invisibleText);\n\t\t(element as any).ariaLabelledByElements = ariaLabelledByElements;\n\t} else if (!text && invisibleTextIndex > -1) {\n\t\tariaLabelledByElements.splice(invisibleTextIndex, 1);\n\t\t(element as any).ariaLabelledByElements = ariaLabelledByElements.length ? ariaLabelledByElements : null;\n\t}\n};\n\ntype CustomAnnouncementOptions = {\n\tlessDetails?: boolean;\n};\n\nconst getCustomAnnouncement = (element: Node, options: CustomAnnouncementOptions = {}, _isRootElement: boolean = true): string => {\n\tif (!element) {\n\t\treturn \"\";\n\t}\n\n\tif (element.nodeType === Node.TEXT_NODE) {\n\t\treturn (element as Text).data.trim();\n\t}\n\n\tif (!(element instanceof HTMLElement)) {\n\t\treturn \"\";\n\t}\n\n\tif (element.hasAttribute(\"data-ui5-acc-text\")) {\n\t\treturn element.getAttribute(\"data-ui5-acc-text\") || \"\";\n\t}\n\n\tif (element.ariaHidden === \"true\" || !checkVisibility(element)) {\n\t\treturn _isRootElement ? getBundle().getText(ACC_STATE_EMPTY) : \"\";\n\t}\n\n\tlet childNodes = [] as Array<Node>;\n\tconst descriptions = [] as Array<string>;\n\tconst accessibilityInfo = (element as any).accessibilityInfo as AccessibilityInfo | undefined;\n\tconst { lessDetails } = options;\n\n\tif (accessibilityInfo) {\n\t\tconst {\n\t\t\ttype, description, required, disabled, readonly, children,\n\t\t} = accessibilityInfo;\n\n\t\tchildNodes = children || [];\n\t\ttype && descriptions.push(type);\n\t\tdescription && descriptions.push(description);\n\n\t\tif (!lessDetails) {\n\t\t\trequired && descriptions.push(getBundle().getText(ACC_STATE_REQUIRED));\n\t\t\tdisabled && descriptions.push(getBundle().getText(ACC_STATE_DISABLED));\n\t\t\treadonly && descriptions.push(getBundle().getText(ACC_STATE_READONLY));\n\t\t}\n\t} else if (element.localName === \"slot\") {\n\t\tchildNodes = (element as HTMLSlotElement).assignedNodes({ flatten: true });\n\t} else {\n\t\tchildNodes = element.shadowRoot ? [...element.shadowRoot.childNodes] : [...element.childNodes];\n\t}\n\n\tchildNodes.forEach(child => {\n\t\tconst childDescription = getCustomAnnouncement(child, options, false);\n\t\tchildDescription && descriptions.push(childDescription);\n\t});\n\n\tif (_isRootElement) {\n\t\tconst hasDescription = descriptions.length > 0;\n\t\tif (!hasDescription || !lessDetails) {\n\t\t\tconst tabbables = getTabbableElements(element);\n\t\t\tconst bundleKey = [\n\t\t\t\thasDescription ? \"\" : ACC_STATE_EMPTY,\n\t\t\t\tACC_STATE_SINGLE_CONTROL,\n\t\t\t\tACC_STATE_MULTIPLE_CONTROLS,\n\t\t\t][Math.min(tabbables.length, 2)];\n\t\t\tif (bundleKey) {\n\t\t\t\thasDescription && descriptions.push(\".\");\n\t\t\t\tdescriptions.push(getBundle().getText(bundleKey));\n\t\t\t}\n\t\t}\n\t}\n\n\treturn descriptions.join(\" \").trim();\n};\n\nexport {\n\tgetCustomAnnouncement,\n\tapplyCustomAnnouncement,\n};\n"]}

package/dist/DateComponentBase.d.ts

@@ -87,15 +87,24 @@ declare class DateComponentBase extends UI5Element {
      * @private
      */
     _isoFormatInstance?: DateFormat;
+    _cachedMinDate?: {
+        key: string;
+        value: CalendarDate;
+    };
+    _cachedMaxDate?: {
+        key: string;
+        value: CalendarDate;
+    };
     constructor();
     get _primaryCalendarType(): CalendarType | "Gregorian" | "Islamic" | "Japanese" | "Buddhist" | "Persian";
     get _secondaryCalendarType(): CalendarType | "Gregorian" | "Islamic" | "Japanese" | "Buddhist" | "Persian" | undefined;
     get _minDate(): CalendarDate;
     get _maxDate(): CalendarDate;
-    get _formatPattern(): string;
+    get _formatPattern(): string | undefined;
     get _isPattern(): boolean;
     get _isValueFormatPattern(): boolean;
     get _isDisplayFormatPattern(): boolean;
+    get initialFocusId(): string;
     get hasSecondaryCalendarType(): boolean;
     _getMinMaxCalendarDateFromString(date: string): CalendarDate | undefined;
     _getCalendarDateFromString(value: string): CalendarDate | undefined;
@@ -104,11 +113,11 @@ declare class DateComponentBase extends UI5Element {
     _getStringFromTimestamp(timestamp: number): string;
     _getDisplayStringFromTimestamp(timestamp: number): string;
     _getValueStringFromTimestamp(timestamp: number): string;
-    getFormat(): import("sap/ui/core/format/DateFormat").default;
-    get _displayFormat(): string;
+    getFormat(): DateFormat;
+    get _displayFormat(): string | undefined;
     get _valueFormat(): string;
-    getDisplayFormat(): import("sap/ui/core/format/DateFormat").default;
-    getValueFormat(): import("sap/ui/core/format/DateFormat").default;
+    getDisplayFormat(): DateFormat;
+    getValueFormat(): DateFormat;
     getISOFormat(): DateFormat;
 }
 export default DateComponentBase;

package/dist/DateComponentBase.js

@@ -67,21 +67,23 @@ let DateComponentBase = class DateComponentBase extends UI5Element {
         return this.secondaryCalendarType || getSecondaryCalendarType();
     }
     get _minDate() {
-        let minDate;
-        if (this.minDate) {
-            minDate = this._getMinMaxCalendarDateFromString(this.minDate);
+        const key = `${this.minDate}__${this._primaryCalendarType}`;
+        if (!this._cachedMinDate || this._cachedMinDate.key !== key) {
+            const parsed = this.minDate ? this._getMinMaxCalendarDateFromString(this.minDate) : undefined;
+            this._cachedMinDate = { key, value: parsed || getMinCalendarDate(this._primaryCalendarType) };
         }
-        return minDate || getMinCalendarDate(this._primaryCalendarType);
+        return this._cachedMinDate.value;
     }
     get _maxDate() {
-        let maxDate;
-        if (this.maxDate) {
-            maxDate = this._getMinMaxCalendarDateFromString(this.maxDate);
+        const key = `${this.maxDate}__${this._primaryCalendarType}`;
+        if (!this._cachedMaxDate || this._cachedMaxDate.key !== key) {
+            const parsed = this.maxDate ? this._getMinMaxCalendarDateFromString(this.maxDate) : undefined;
+            this._cachedMaxDate = { key, value: parsed || getMaxCalendarDate(this._primaryCalendarType) };
         }
-        return maxDate || getMaxCalendarDate(this._primaryCalendarType);
+        return this._cachedMaxDate.value;
     }
     get _formatPattern() {
-        return this.formatPattern || this.valueFormat || "medium"; // get from config
+        return this.formatPattern || this.valueFormat; // get from config
     }
     get _isPattern() {
         return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
@@ -92,6 +94,9 @@ let DateComponentBase = class DateComponentBase extends UI5Element {
     get _isDisplayFormatPattern() {
         return this._displayFormat !== "medium" && this._displayFormat !== "short" && this._displayFormat !== "long";
     }
+    get initialFocusId() {
+        return `${this._id}-calendar`;
+    }
     get hasSecondaryCalendarType() {
         return !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType;
     }

package/dist/DateComponentBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateComponentBase.js","sourceRoot":"","sources":["../src/DateComponentBase.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getCalendarType, getSecondaryCalendarType } from \"@ui5/webcomponents-base/dist/config/CalendarType.js\";\nimport DateFormat from \"@ui5/webcomponents-localization/dist/DateFormat.js\";\nimport getCachedLocaleDataInstance from \"@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js\";\nimport type CalendarType from \"@ui5/webcomponents-base/dist/types/CalendarType.js\";\nimport getLocale from \"@ui5/webcomponents-base/dist/locale/getLocale.js\";\nimport CalendarDate from \"@ui5/webcomponents-localization/dist/dates/CalendarDate.js\";\nimport { getMaxCalendarDate, getMinCalendarDate } from \"@ui5/webcomponents-localization/dist/dates/ExtremeDates.js\";\nimport UI5Date from \"@ui5/webcomponents-localization/dist/dates/UI5Date.js\";\nimport type CalendarWeekNumbering from \"./types/CalendarWeekNumbering.js\";\n\n/**\n * @class\n *\n * Abstract class that provides common functionality for date-related components (day picker, month picker, year picker, calendar, date picker, date range picker, date time picker)\n * This includes:\n *  - \"languageAware: true\" metadata setting, CLDR fetch and i18n initialization\n *  - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them\n *  - additional common methods\n * @constructor\n * @abstract\n * @extends UI5Element\n * @public\n */\n@customElement({\n\tlanguageAware: true,\n\tcldr: true,\n\trenderer: jsxRenderer,\n})\nclass DateComponentBase extends UI5Element {\n\t/**\n\t * Sets a calendar type used for display.\n\t * If not set, the calendar type of the global configuration is used.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tprimaryCalendarType?: `${CalendarType}`;\n\n\t/**\n\t * Defines the secondary calendar type.\n\t * If not set, the calendar will only show the primary calendar type.\n\t * @since 1.0.0-rc.16\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tsecondaryCalendarType?: `${CalendarType}`;\n\n\t/**\n\t * Determines the format, displayed in the input field.\n\t * @default undefined\n\t * @deprecated Use displayFormat and valueFormat instead\n\t * @public\n\t */\n\t@property()\n\tformatPattern?: string;\n\n\t/**\n\t * Determines the format, displayed in the input field.\n\t * @default undefined\n\t * @since 2.14.0\n\t * @public\n\t */\n\t@property()\n\tdisplayFormat?: string;\n\n\t/**\n\t * Determines the format, used for the value attribute.\n\t * @default undefined\n\t * @since 2.14.0\n\t * @public\n\t */\n\t@property()\n\tvalueFormat?: string;\n\n\t/**\n\t * Determines the minimum date available for selection.\n\t *\n\t * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).\n\t * @default \"\"\n\t * @since 1.0.0-rc.6\n\t * @public\n\t */\n\t@property()\n\tminDate = \"\";\n\n\t/**\n\t * Determines the maximum date available for selection.\n\t *\n\t * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).\n\t * @default \"\"\n\t * @since 1.0.0-rc.6\n\t * @public\n\t */\n\t@property()\n\tmaxDate = \"\";\n\n\t/**\n\t * Defines how to calculate calendar weeks and first day of the week.\n\t * If not set, the calendar will be displayed according to the currently set global configuration.\n\t * @default \"Default\"\n\t * @since 2.2.0\n\t * @public\n\t */\n\t@property()\n\tcalendarWeekNumbering: `${CalendarWeekNumbering}` = \"Default\";\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle?: I18nBundle;\n\n\t/**\n\t * Cached instance of DateFormat with a format pattern of \"yyyy-MM-dd\".\n\t * Used by the getISOFormat method to avoid creating a new DateFormat instance on each call.\n\t * @private\n\t */\n\t_isoFormatInstance?: DateFormat;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tget _primaryCalendarType() {\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\treturn this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();\n\t}\n\n\tget _secondaryCalendarType() {\n\t\treturn this.secondaryCalendarType || getSecondaryCalendarType();\n\t}\n\n\tget _minDate() {\n\t\tlet minDate;\n\n\t\tif (this.minDate) {\n\t\t\tminDate = this._getMinMaxCalendarDateFromString(this.minDate);\n\t\t}\n\n\t\treturn minDate || getMinCalendarDate(this._primaryCalendarType);\n\t}\n\n\tget _maxDate() {\n\t\tlet maxDate;\n\n\t\tif (this.maxDate) {\n\t\t\tmaxDate = this._getMinMaxCalendarDateFromString(this.maxDate)!;\n\t\t}\n\n\t\treturn maxDate || getMaxCalendarDate(this._primaryCalendarType);\n\t}\n\n\tget _formatPattern() {\n\t\treturn this.formatPattern || this.valueFormat || \"medium\"; // get from config\n\t}\n\n\tget _isPattern() {\n\t\treturn this._formatPattern !== \"medium\" && this._formatPattern !== \"short\" && this._formatPattern !== \"long\";\n\t}\n\n\tget _isValueFormatPattern() {\n\t\treturn this._valueFormat !== \"medium\" && this._valueFormat !== \"short\" && this._valueFormat !== \"long\";\n\t}\n\n\tget _isDisplayFormatPattern() {\n\t\treturn this._displayFormat !== \"medium\" && this._displayFormat !== \"short\" && this._displayFormat !== \"long\";\n\t}\n\n\tget hasSecondaryCalendarType() {\n\t\treturn !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType;\n\t}\n\n\t_getMinMaxCalendarDateFromString(date: string) {\n\t\tif (this.getFormat().parse(date)) {\n\t\t\treturn this._getCalendarDateFromString(date);\n\t\t}\n\n\t\tconst jsDate = this.getISOFormat().parse(date) as Date;\n\t\tif (jsDate) {\n\t\t\treturn CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);\n\t\t}\n\t}\n\n\t_getCalendarDateFromString(value: string) {\n\t\tconst jsDate = this.getValueFormat().parse(value) as Date;\n\t\tif (jsDate) {\n\t\t\treturn CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);\n\t\t}\n\t}\n\n\t_getCalendarDateFromStringDisplayValue(value: string) {\n\t\tconst jsDate = this.getDisplayFormat().parse(value) as Date;\n\t\tif (jsDate) {\n\t\t\treturn CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);\n\t\t}\n\t}\n\n\t_getTimeStampFromString(value: string) {\n\t\tconst calDate = this._getCalendarDateFromString(value);\n\t\tif (calDate) {\n\t\t\treturn calDate.toUTCJSDate().valueOf();\n\t\t}\n\t}\n\n\t_getStringFromTimestamp(timestamp: number) {\n\t\tif (!timestamp) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst localDate = UI5Date.getInstance(timestamp);\n\t\treturn this.getFormat().format(localDate, true);\n\t}\n\n\t_getDisplayStringFromTimestamp(timestamp: number) {\n\t\tif (!timestamp) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst localDate = UI5Date.getInstance(timestamp);\n\t\treturn this.getDisplayFormat().format(localDate, true);\n\t}\n\n\t_getValueStringFromTimestamp(timestamp: number) {\n\t\tif (!timestamp) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst localDate = UI5Date.getInstance(timestamp);\n\t\treturn this.getValueFormat().format(localDate, true);\n\t}\n\n\tgetFormat() {\n\t\treturn this._isPattern\n\t\t\t? DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._formatPattern,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t})\n\t\t\t: DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tstyle: this._formatPattern,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\tget _displayFormat() {\n\t\tif (this.displayFormat) {\n\t\t\treturn this.displayFormat;\n\t\t}\n\n\t\treturn this._formatPattern;\n\t}\n\n\tget _valueFormat() {\n\t\tif (this.valueFormat) {\n\t\t\treturn this.valueFormat;\n\t\t}\n\n\t\tif (this._formatPattern) {\n\t\t\treturn this._formatPattern;\n\t\t}\n\n\t\treturn \"\";\n\t}\n\n\tgetDisplayFormat() {\n\t\treturn this._isDisplayFormatPattern\n\t\t\t? DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._displayFormat,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t})\n\t\t\t: DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tstyle: this._displayFormat,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\tgetValueFormat() {\n\t\tif (!this._valueFormat) {\n\t\t\treturn this.getISOFormat();\n\t\t}\n\n\t\treturn this._isValueFormatPattern\n\t\t\t? DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._valueFormat,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t})\n\t\t\t: DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tstyle: this._valueFormat,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\tgetISOFormat() {\n\t\tif (!this._isoFormatInstance) {\n\t\t\tthis._isoFormatInstance = DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: \"yyyy-MM-dd\",\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t\t}\n\t\treturn this._isoFormatInstance;\n\t}\n}\n\nexport default DateComponentBase;\n"]}
+{"version":3,"file":"DateComponentBase.js","sourceRoot":"","sources":["../src/DateComponentBase.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getCalendarType, getSecondaryCalendarType } from \"@ui5/webcomponents-base/dist/config/CalendarType.js\";\nimport DateFormat from \"@ui5/webcomponents-localization/dist/DateFormat.js\";\nimport getCachedLocaleDataInstance from \"@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js\";\nimport type CalendarType from \"@ui5/webcomponents-base/dist/types/CalendarType.js\";\nimport getLocale from \"@ui5/webcomponents-base/dist/locale/getLocale.js\";\nimport CalendarDate from \"@ui5/webcomponents-localization/dist/dates/CalendarDate.js\";\nimport { getMaxCalendarDate, getMinCalendarDate } from \"@ui5/webcomponents-localization/dist/dates/ExtremeDates.js\";\nimport UI5Date from \"@ui5/webcomponents-localization/dist/dates/UI5Date.js\";\nimport type CalendarWeekNumbering from \"./types/CalendarWeekNumbering.js\";\n\n/**\n * @class\n *\n * Abstract class that provides common functionality for date-related components (day picker, month picker, year picker, calendar, date picker, date range picker, date time picker)\n * This includes:\n *  - \"languageAware: true\" metadata setting, CLDR fetch and i18n initialization\n *  - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them\n *  - additional common methods\n * @constructor\n * @abstract\n * @extends UI5Element\n * @public\n */\n@customElement({\n\tlanguageAware: true,\n\tcldr: true,\n\trenderer: jsxRenderer,\n})\nclass DateComponentBase extends UI5Element {\n\t/**\n\t * Sets a calendar type used for display.\n\t * If not set, the calendar type of the global configuration is used.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tprimaryCalendarType?: `${CalendarType}`;\n\n\t/**\n\t * Defines the secondary calendar type.\n\t * If not set, the calendar will only show the primary calendar type.\n\t * @since 1.0.0-rc.16\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tsecondaryCalendarType?: `${CalendarType}`;\n\n\t/**\n\t * Determines the format, displayed in the input field.\n\t * @default undefined\n\t * @deprecated Use displayFormat and valueFormat instead\n\t * @public\n\t */\n\t@property()\n\tformatPattern?: string;\n\n\t/**\n\t * Determines the format, displayed in the input field.\n\t * @default undefined\n\t * @since 2.14.0\n\t * @public\n\t */\n\t@property()\n\tdisplayFormat?: string;\n\n\t/**\n\t * Determines the format, used for the value attribute.\n\t * @default undefined\n\t * @since 2.14.0\n\t * @public\n\t */\n\t@property()\n\tvalueFormat?: string;\n\n\t/**\n\t * Determines the minimum date available for selection.\n\t *\n\t * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).\n\t * @default \"\"\n\t * @since 1.0.0-rc.6\n\t * @public\n\t */\n\t@property()\n\tminDate = \"\";\n\n\t/**\n\t * Determines the maximum date available for selection.\n\t *\n\t * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).\n\t * @default \"\"\n\t * @since 1.0.0-rc.6\n\t * @public\n\t */\n\t@property()\n\tmaxDate = \"\";\n\n\t/**\n\t * Defines how to calculate calendar weeks and first day of the week.\n\t * If not set, the calendar will be displayed according to the currently set global configuration.\n\t * @default \"Default\"\n\t * @since 2.2.0\n\t * @public\n\t */\n\t@property()\n\tcalendarWeekNumbering: `${CalendarWeekNumbering}` = \"Default\";\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle?: I18nBundle;\n\n\t/**\n\t * Cached instance of DateFormat with a format pattern of \"yyyy-MM-dd\".\n\t * Used by the getISOFormat method to avoid creating a new DateFormat instance on each call.\n\t * @private\n\t */\n\t_isoFormatInstance?: DateFormat;\n\n\t_cachedMinDate?: { key: string, value: CalendarDate };\n\t_cachedMaxDate?: { key: string, value: CalendarDate };\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tget _primaryCalendarType() {\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\treturn this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();\n\t}\n\n\tget _secondaryCalendarType() {\n\t\treturn this.secondaryCalendarType || getSecondaryCalendarType();\n\t}\n\n\tget _minDate() {\n\t\tconst key = `${this.minDate}__${this._primaryCalendarType}`;\n\t\tif (!this._cachedMinDate || this._cachedMinDate.key !== key) {\n\t\t\tconst parsed = this.minDate ? this._getMinMaxCalendarDateFromString(this.minDate) : undefined;\n\t\t\tthis._cachedMinDate = { key, value: parsed || getMinCalendarDate(this._primaryCalendarType) };\n\t\t}\n\t\treturn this._cachedMinDate.value;\n\t}\n\n\tget _maxDate() {\n\t\tconst key = `${this.maxDate}__${this._primaryCalendarType}`;\n\t\tif (!this._cachedMaxDate || this._cachedMaxDate.key !== key) {\n\t\t\tconst parsed = this.maxDate ? this._getMinMaxCalendarDateFromString(this.maxDate) : undefined;\n\t\t\tthis._cachedMaxDate = { key, value: parsed || getMaxCalendarDate(this._primaryCalendarType) };\n\t\t}\n\t\treturn this._cachedMaxDate.value;\n\t}\n\n\tget _formatPattern() {\n\t\treturn this.formatPattern || this.valueFormat; // get from config\n\t}\n\n\tget _isPattern() {\n\t\treturn this._formatPattern !== \"medium\" && this._formatPattern !== \"short\" && this._formatPattern !== \"long\";\n\t}\n\n\tget _isValueFormatPattern() {\n\t\treturn this._valueFormat !== \"medium\" && this._valueFormat !== \"short\" && this._valueFormat !== \"long\";\n\t}\n\n\tget _isDisplayFormatPattern() {\n\t\treturn this._displayFormat !== \"medium\" && this._displayFormat !== \"short\" && this._displayFormat !== \"long\";\n\t}\n\n\tget initialFocusId(): string {\n\t\treturn `${this._id}-calendar`;\n\t}\n\n\tget hasSecondaryCalendarType() {\n\t\treturn !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType;\n\t}\n\n\t_getMinMaxCalendarDateFromString(date: string) {\n\t\tif (this.getFormat().parse(date)) {\n\t\t\treturn this._getCalendarDateFromString(date);\n\t\t}\n\n\t\tconst jsDate = this.getISOFormat().parse(date) as Date;\n\t\tif (jsDate) {\n\t\t\treturn CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);\n\t\t}\n\t}\n\n\t_getCalendarDateFromString(value: string) {\n\t\tconst jsDate = this.getValueFormat().parse(value) as Date;\n\t\tif (jsDate) {\n\t\t\treturn CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);\n\t\t}\n\t}\n\n\t_getCalendarDateFromStringDisplayValue(value: string) {\n\t\tconst jsDate = this.getDisplayFormat().parse(value) as Date;\n\t\tif (jsDate) {\n\t\t\treturn CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);\n\t\t}\n\t}\n\n\t_getTimeStampFromString(value: string) {\n\t\tconst calDate = this._getCalendarDateFromString(value);\n\t\tif (calDate) {\n\t\t\treturn calDate.toUTCJSDate().valueOf();\n\t\t}\n\t}\n\n\t_getStringFromTimestamp(timestamp: number) {\n\t\tif (!timestamp) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst localDate = UI5Date.getInstance(timestamp);\n\t\treturn this.getFormat().format(localDate, true);\n\t}\n\n\t_getDisplayStringFromTimestamp(timestamp: number) {\n\t\tif (!timestamp) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst localDate = UI5Date.getInstance(timestamp);\n\t\treturn this.getDisplayFormat().format(localDate, true);\n\t}\n\n\t_getValueStringFromTimestamp(timestamp: number) {\n\t\tif (!timestamp) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst localDate = UI5Date.getInstance(timestamp);\n\t\treturn this.getValueFormat().format(localDate, true);\n\t}\n\n\tgetFormat() {\n\t\treturn this._isPattern\n\t\t\t? DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._formatPattern,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t})\n\t\t\t: DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tstyle: this._formatPattern,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\tget _displayFormat() {\n\t\tif (this.displayFormat) {\n\t\t\treturn this.displayFormat;\n\t\t}\n\n\t\treturn this._formatPattern;\n\t}\n\n\tget _valueFormat() {\n\t\tif (this.valueFormat) {\n\t\t\treturn this.valueFormat;\n\t\t}\n\n\t\tif (this._formatPattern) {\n\t\t\treturn this._formatPattern;\n\t\t}\n\n\t\treturn \"\";\n\t}\n\n\tgetDisplayFormat() {\n\t\treturn this._isDisplayFormatPattern\n\t\t\t? DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._displayFormat,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t})\n\t\t\t: DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tstyle: this._displayFormat,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\tgetValueFormat() {\n\t\tif (!this._valueFormat) {\n\t\t\treturn this.getISOFormat();\n\t\t}\n\n\t\treturn this._isValueFormatPattern\n\t\t\t? DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._valueFormat,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t})\n\t\t\t: DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tstyle: this._valueFormat,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\tgetISOFormat() {\n\t\tif (!this._isoFormatInstance) {\n\t\t\tthis._isoFormatInstance = DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: \"yyyy-MM-dd\",\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t\t}\n\t\treturn this._isoFormatInstance;\n\t}\n}\n\nexport default DateComponentBase;\n"]}

package/dist/DatePicker.d.ts

@@ -13,6 +13,7 @@ import type { InputAccInfo } from "./Input.js";
 import InputType from "./types/InputType.js";
 import IconMode from "./types/IconMode.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 type DatePickerChangeEventDetail = {
     value: string;
@@ -55,8 +56,8 @@ type Picker = "day" | "month" | "year";
  * Supported format options are pattern-based on Unicode LDML Date Format notation.
  * For more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).
  *
- * For example, if the `format-pattern` is "yyyy-MM-dd",
- * a valid value string is "2015-07-30" and the same is displayed in the input.
+ * For example, if the valueFormat is "yyyy-MM-dd", the displayFormat is "MMM d, y", and the used locale is English, a valid value string is "2015-07-30", which leads to an output of "Jul 30, 2015".
+ * If no placeholder is set to the DatePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set.
  *
  * ### Keyboard Handling
  * The `ui5-date-picker` provides advanced keyboard handling.
@@ -106,6 +107,7 @@ type Picker = "day" | "month" | "year";
  * @constructor
  * @extends DateComponentBase
  * @public
+ * @csspart input - Used to style the input element. This part is forwarded to the underlying ui5-input element.
  */
 declare class DatePicker extends DateComponentBase implements IFormInputElement {
     eventDetails: DateComponentBase["eventDetails"] & {
@@ -212,6 +214,13 @@ declare class DatePicker extends DateComponentBase implements IFormInputElement
      * @since 2.14.0
      */
     accessibleDescriptionRef?: string;
+    /**
+     * Defines whether the clear icon of the input will be shown.
+     * @default false
+     * @public
+     * @since 2.20.0
+     */
+    showClearIcon: boolean;
     _respPopoverConfig?: object;
     _calendarCurrentPicker: Picker;
     liveValue?: string;
@@ -226,7 +235,7 @@ declare class DatePicker extends DateComponentBase implements IFormInputElement
      * @since 1.0.0-rc.7
      * @public
      */
-    valueStateMessage: Array<HTMLElement>;
+    valueStateMessage: Slot<HTMLElement>;
     responsivePopover?: ResponsivePopover;
     _dateTimeInput: DateTimeInput;
     _calendar: Calendar;
@@ -276,7 +285,7 @@ declare class DatePicker extends DateComponentBase implements IFormInputElement
      * The ui5-input "submit" event handler - fire change event when the user presses enter
      * @protected
      */
-    _onInputSubmit(): void;
+    _onInputRequestSubmit(): void;
     /**
      * The ui5-input "change" event handler - fire change event when the user focuses out of the input
      * @protected
@@ -363,6 +372,7 @@ declare class DatePicker extends DateComponentBase implements IFormInputElement
     get openIconName(): string;
     get roleDescription(): string;
     get pickerAccessibleName(): string;
+    get btnCancelLabel(): string;
     /**
      * Defines whether the dialog on mobile should have header
      * @private
@@ -405,11 +415,20 @@ declare class DatePicker extends DateComponentBase implements IFormInputElement
     _toggleAndFocusInput(): void;
     /**
      * Currently selected date represented as a Local JavaScript Date instance.
+     * Note: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.
      * @public
      * @default null
+     * @deprecated Use dateValueAsync instead
      */
     get dateValue(): Date | null;
+    /**
+     * Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.
+     * @public
+     * @default Promise
+     */
+    get dateValueAsync(): Promise<Date | null>;
     get dateValueUTC(): Date | null;
+    get dateValueUTCAsync(): Promise<Date | null>;
     get styles(): {
         main: {
             width: string;