diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index ae5be1d7db48..876f8b7e49ba 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -30,6 +30,7 @@ import Link from "./dist/Link.js"; import Popover from "./dist/Popover.js"; import Panel from "./dist/Panel.js"; import RadioButton from "./dist/RadioButton.js"; +import ResponsivePopover from "./dist/ResponsivePopover.js"; import Select from "./dist/Select.js"; import Option from "./dist/Option.js"; import Switch from "./dist/Switch.js"; diff --git a/packages/main/src/ComboBox.hbs b/packages/main/src/ComboBox.hbs index 9a39d04e4708..28a1821e88e0 100644 --- a/packages/main/src/ComboBox.hbs +++ b/packages/main/src/ComboBox.hbs @@ -3,7 +3,6 @@ aria-haspopup="listbox" aria-expanded="{{open}}" > - { item.selected = (item === listItem.mappedItem); @@ -410,15 +440,7 @@ class ComboBox extends UI5Element { }); this._inputChange(); - this.popover.close(); - } - - get styles() { - return { - popover: { - "min-width": `${this._width}px`, - }, - }; + this._respPopover.close(); } get _filteredItems() { @@ -427,12 +449,16 @@ class ComboBox extends UI5Element { }); } + get _headerTitleText() { + return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); + } + get inner() { - return this.shadowRoot.querySelector("[inner-input]"); + return isPhone() ? this._respPopover.querySelector(".ui5-input-inner-phone") : this.shadowRoot.querySelector("[inner-input]"); } - get popover() { - return this.getStaticAreaItemDomRef().querySelector("ui5-popover"); + get _respPopover() { + return this.getStaticAreaItemDomRef().querySelector("ui5-responsive-popover"); } get editable() { @@ -443,7 +469,7 @@ class ComboBox extends UI5Element { await Promise.all([ ComboBoxItem.define(), Icon.define(), - Popover.define(), + ResponsivePopover.define(), List.define(), BusyIndicator.define(), StandardListItem.define(), diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs index 68f4f602cf16..386178841377 100644 --- a/packages/main/src/ComboBoxPopover.hbs +++ b/packages/main/src/ComboBoxPopover.hbs @@ -1,22 +1,48 @@ - - - - +
+ {{_headerTitleText}} + + +
+
+
+ +
+
+ + + {{/each}} - \ No newline at end of file + +
+ OK +
+ \ No newline at end of file diff --git a/packages/main/src/DatePicker.hbs b/packages/main/src/DatePicker.hbs index ced23bcb11ce..7bee11ed2308 100644 --- a/packages/main/src/DatePicker.hbs +++ b/packages/main/src/DatePicker.hbs @@ -32,5 +32,6 @@ > {{/unless}} + diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js index 18bf965aafbc..15e9be65f936 100644 --- a/packages/main/src/DatePicker.js +++ b/packages/main/src/DatePicker.js @@ -13,14 +13,13 @@ import CalendarDate from "@ui5/webcomponents-base/dist/dates/CalendarDate.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import { isShow } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js"; import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js"; +import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import "@ui5/webcomponents-icons/dist/icons/appointment-2.js"; -import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_ACC_TEXT } from "./generated/i18n/i18n-defaults.js"; +import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_ACC_TEXT, INPUT_SUGGESTIONS_TITLE } from "./generated/i18n/i18n-defaults.js"; import Icon from "./Icon.js"; -import Popover from "./Popover.js"; +import ResponsivePopover from "./ResponsivePopover.js"; import Calendar from "./Calendar.js"; -import PopoverPlacementType from "./types/PopoverPlacementType.js"; -import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js"; import Input from "./Input.js"; import InputType from "./types/InputType.js"; import DatePickerTemplate from "./generated/templates/DatePickerTemplate.lit.js"; @@ -31,6 +30,8 @@ import "@ui5/webcomponents-utils/dist/sap/ui/core/date/Gregorian.js"; // Styles import datePickerCss from "./generated/themes/DatePicker.css.js"; +import datePickerPopoverCss from "./generated/themes/DatePickerPopover.css.js"; +import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; /** * @public @@ -170,9 +171,11 @@ const metadata = { type: Boolean, noAttribute: true, }, - _popover: { + + _respPopoverConfig: { type: Object, }, + _calendar: { type: Object, }, @@ -270,20 +273,25 @@ class DatePicker extends UI5Element { return datePickerCss; } + static get staticAreaStyles() { + return [datePickerPopoverCss, ResponsivePopoverCommonCss]; + } + constructor() { super(); - this._popover = { - placementType: PopoverPlacementType.Bottom, - horizontalAlign: PopoverHorizontalAlign.Left, + this._respPopoverConfig = { allowTargetOverlap: true, stayOpenOnScroll: true, afterClose: () => { - const calendar = this.popover.querySelector(`#${this._id}-calendar`); + const calendar = this._respPopover.querySelector(`#${this._id}-calendar`); this._isPickerOpen = false; - if (this._focusInputAfterClose) { + if (isPhone()) { + // close device's keyboard and prevent further typing + this.blur(); + } else if (this._focusInputAfterClose) { this._getInput().focus(); this._focusInputAfterClose = false; } @@ -292,7 +300,7 @@ class DatePicker extends UI5Element { calendar._hideYearPicker(); }, afterOpen: () => { - const calendar = this.popover.querySelector(`#${this._id}-calendar`); + const calendar = this._respPopover.querySelector(`#${this._id}-calendar`); const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`); const selectedDay = dayPicker.shadowRoot.querySelector(".ui5-dp-item--selected"); @@ -416,6 +424,13 @@ class DatePicker extends UI5Element { this.fireEvent("input", { value: nextValue, valid: isValid }); } + _click(event) { + if (isPhone()) { + this._respPopover.open(this); + event.preventDefault(); // prevent immediate selection of any item + } + } + /** * Checks if a value is valid against the current date format of the DatePicker * @param {string} value A value to be tested against the current date format @@ -496,6 +511,10 @@ class DatePicker extends UI5Element { return this.placeholder !== undefined ? this.placeholder : this._displayFormat; } + get _headerTitleText() { + return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); + } + getFormat() { if (this._isPattern) { this._oDateFormat = DateFormat.getInstance({ @@ -517,7 +536,7 @@ class DatePicker extends UI5Element { "ariaHasPopup": "true", "ariaAutoComplete": "none", "role": "combobox", - "ariaOwns": `${this._id}-popover`, + "ariaOwns": `${this._id}-responsive-popover`, "ariaExpanded": this.isOpen(), "ariaDescription": this.dateAriaDescription, }; @@ -549,6 +568,10 @@ class DatePicker extends UI5Element { return getRTL() ? "rtl" : "ltr"; } + get _respPopover() { + return this.getStaticAreaItemDomRef().querySelector("ui5-responsive-popover"); + } + _canOpenPicker() { return !this.disabled && !this.readonly; } @@ -589,7 +612,7 @@ class DatePicker extends UI5Element { * @public */ closePicker() { - this.popover.close(); + this._respPopover.close(); } /** @@ -600,19 +623,17 @@ class DatePicker extends UI5Element { * @public */ openPicker(options) { - this.popover = this.getStaticAreaItemDomRef().querySelector("ui5-popover"); this._changeCalendarSelection(); if (options && options.focusInput) { this._focusInputAfterOpen = true; } - this.popover.openBy(this); + + this._respPopover.open(this); this._isPickerOpen = true; } togglePicker() { - this.popover = this.getStaticAreaItemDomRef().querySelector("ui5-popover"); - if (this.isOpen()) { this.closePicker(); } else if (this._canOpenPicker()) { @@ -688,7 +709,7 @@ class DatePicker extends UI5Element { await Promise.all([ fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()), Icon.define(), - Popover.define(), + ResponsivePopover.define(), Calendar.define(), Input.define(), fetchI18nBundle("@ui5/webcomponents"), diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs index 4fe966f26e5a..690f9b916bdd 100644 --- a/packages/main/src/DatePickerPopover.hbs +++ b/packages/main/src/DatePickerPopover.hbs @@ -1,13 +1,24 @@ - +
+
+ {{_headerTitleText}} + + +
+
- \ No newline at end of file + \ No newline at end of file diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs index 2b4a62d42ea8..da2bfe0adcdb 100644 --- a/packages/main/src/Input.hbs +++ b/packages/main/src/Input.hbs @@ -25,6 +25,7 @@ @change="{{_handleChange}}" @keydown="{{_onkeydown}}" @keyup="{{_onkeyup}}" + @click={{_click}} data-sap-no-tab-ref data-sap-focus-ref /> diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index fa4cb198e2f7..e15db1ecf998 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -1,6 +1,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; -import { isIE } from "@ui5/webcomponents-base/dist/Device.js"; +import { isIE, isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js"; import { @@ -22,10 +22,12 @@ import { VALUE_STATE_ERROR, VALUE_STATE_WARNING, INPUT_SUGGESTIONS, + INPUT_SUGGESTIONS_TITLE, } from "./generated/i18n/i18n-defaults.js"; // Styles import styles from "./generated/themes/Input.css.js"; +import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; /** * @public @@ -72,7 +74,7 @@ const metadata = { }, /** - * The slot is used for native input HTML element to enable form sumbit, + * The slot is used for native input HTML element to enable form submit, * when name property is set. * @type {HTMLElement[]} * @private @@ -86,7 +88,7 @@ const metadata = { /** * Defines whether ui5-input is in disabled state. *

- * Note: A disabled ui5-input is completely uninteractive. + * Note: A disabled ui5-input is completely non interactive. * * @type {boolean} * @defaultvalue false @@ -234,10 +236,6 @@ const metadata = { type: Object, }, - _popover: { - type: Object, - }, - _inputAccInfo: { type: Object, }, @@ -342,7 +340,11 @@ class Input extends UI5Element { } static get styles() { - return [styles]; + return styles; + } + + static get staticAreaStyles() { + return ResponsivePopoverCommonCss; } constructor() { @@ -392,9 +394,17 @@ class Input extends UI5Element { } onAfterRendering() { - if (!this.firstRendering && this.Suggestions) { - this.Suggestions.toggle(this.shouldOpenSuggestions()); + if (!this.firstRendering && !isPhone() && this.Suggestions) { + const shouldOpenSuggestions = this.shouldOpenSuggestions(); + + this.Suggestions.toggle(shouldOpenSuggestions); + + if (!isPhone() && shouldOpenSuggestions) { + // Set initial focus to the native input + this.getInputDOMRef().focus(); + } } + this.firstRendering = false; } @@ -454,8 +464,20 @@ class Input extends UI5Element { } _onfocusout(event) { - this.focused = false; // invalidating property + // if focusout is triggered by pressing on suggestion item skip invalidation, because re-rendering + // will happen before "itemPress" event, which will make item "active" state not visualized + if (this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot.contains(this.Suggestions._respPopover)) { + return; + } + this.previousValue = ""; + this.focused = false; // invalidating property + } + + _click(event) { + if (isPhone() && !this.readonly && this.Suggestions) { + this.Suggestions.open(this); + } } _handleChange(event) { @@ -483,6 +505,24 @@ class Input extends UI5Element { } } + _closeRespPopover() { + this.Suggestions.close(); + } + + _afterOpenPopover() { + // Set initial focus to the native input + if (isPhone()) { + this.getInputDOMRef().focus(); + } + } + + _afterClosePopover() { + // close device's keyboard and prevent further typing + if (isPhone()) { + this.blur(); + } + } + enableSuggestions() { if (this.Suggestions) { return; @@ -498,8 +538,8 @@ class Input extends UI5Element { shouldOpenSuggestions() { return !!(this.suggestionItems.length - && this.showSuggestions && this.focused + && this.showSuggestions && !this.hasSuggestionItemSelected); } @@ -508,7 +548,6 @@ class Input extends UI5Element { const fireInput = keyboardUsed ? this.valueBeforeItemSelection !== itemText : this.value !== itemText; - item.selected = false; this.hasSuggestionItemSelected = true; this.fireEvent(this.EVENT_SUGGESTION_ITEM_SELECT, { item }); @@ -564,7 +603,17 @@ class Input extends UI5Element { } getInputDOMRef() { - return this.getDomRef().querySelector(`#${this.getInputId()}`); + let inputDomRef; + + if (isPhone()) { + inputDomRef = this.getStaticAreaItemDomRef().querySelector(".ui5-input-inner-phone"); + } + + if (!inputDomRef) { + inputDomRef = this.getDomRef().querySelector(`#${this.getInputId()}`); + } + + return inputDomRef; } getLabelableElementId() { @@ -604,6 +653,10 @@ class Input extends UI5Element { return this.readonly && !this.disabled; } + get _headerTitleText() { + return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); + } + get inputType() { return this.type.toLowerCase(); } diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs index 99171f01fd54..ec500335ff1e 100644 --- a/packages/main/src/InputPopover.hbs +++ b/packages/main/src/InputPopover.hbs @@ -1,13 +1,49 @@ {{#if showSuggestions}} - - - {{#each suggestionsTexts}} - {{ this }} - {{/each}} - - + _disable-initial-focus + @ui5-afterOpen={{_afterOpenPopover}} + @ui5-afterClose={{_afterClosePopover}} + > +
+
+ {{_headerTitleText}} + + +
+
+
+ +
+
+
+ + + {{#each suggestionsTexts}} + {{ this.text }} + {{/each}} + + +
+ OK +
+ {{/if}} \ No newline at end of file diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs index f9cc69d9dced..e6ff2120b4f2 100644 --- a/packages/main/src/MultiComboBox.hbs +++ b/packages/main/src/MultiComboBox.hbs @@ -18,6 +18,7 @@ @ui5-showMoreItemsPress="{{_showMorePopover}}" @ui5-tokenDelete="{{_tokenDelete}}" @focusout="{{_tokenizerFocusOut}}" + @click={{_click}} ?expanded="{{expandedTokenizer}}" > {{#each items}} @@ -41,6 +42,7 @@ @keyup="{{_onkeyup}}" @focusin="{{_focusin}}" @focusout="{{_focusout}}" + @click={{_click}} aria-autocomplete="both" aria-labelledby="{{_id}}-hiddenText-nMore" aria-describedby="{{_id}}-valueStateDesc" diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index bb5748027fd1..7dc04a3bea5c 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -6,16 +6,15 @@ import { } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js"; import "@ui5/webcomponents-icons/dist/icons/slim-arrow-down.js"; import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js"; -import { isIE } from "@ui5/webcomponents-base/dist/Device.js"; +import { isIE, isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import MultiComboBoxTemplate from "./generated/templates/MultiComboBoxTemplate.lit.js"; -import MultiComboBoxPopoverTemplate from "./generated/templates/MultiComboBoxPopoverTemplate.lit.js"; import Tokenizer from "./Tokenizer.js"; import Token from "./Token.js"; import Icon from "./Icon.js"; -import Popover from "./Popover.js"; +import ResponsivePopover from "./ResponsivePopover.js"; import List from "./List.js"; import StandardListItem from "./StandardListItem.js"; +import ToggleButton from "./ToggleButton.js"; import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, @@ -23,10 +22,16 @@ import { TOKENIZER_ARIA_CONTAIN_TOKEN, TOKENIZER_ARIA_CONTAIN_ONE_TOKEN, TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, + INPUT_SUGGESTIONS_TITLE, } from "./generated/i18n/i18n-defaults.js"; +// Templates +import MultiComboBoxTemplate from "./generated/templates/MultiComboBoxTemplate.lit.js"; +import MultiComboBoxPopoverTemplate from "./generated/templates/MultiComboBoxPopoverTemplate.lit.js"; + // Styles import styles from "./generated/themes/MultiComboBox.css.js"; +import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; /** * @public @@ -294,6 +299,10 @@ class MultiComboBox extends UI5Element { return styles; } + static get staticAreaStyles() { + return ResponsivePopoverCommonCss; + } + constructor() { super(); @@ -301,6 +310,7 @@ class MultiComboBox extends UI5Element { this._inputLastValue = ""; this._deleting = false; this._validationTimeout = null; + this._selectedItemsPopoverOpened = false; this.i18nBundle = getI18nBundle("@ui5/webcomponents"); } @@ -309,15 +319,30 @@ class MultiComboBox extends UI5Element { } _showMorePopover() { - this._togglePopover(true); + if (this.readonly) { + return; + } + + this._showMorePressed = true; + this._selectedItemsPopoverOpened = true; + this._toggleRespPopover(true); } _showAllItemsPopover() { - this._togglePopover(false); + this._selectedItemsPopoverOpened = false; + this._toggleRespPopover(false); this._inputDom.focus(); } + _closeMorePopover() { + this._getRespPopover(true).close(); + } + + _closeAllItemsPopover() { + this._getRespPopover().close(); + } + get _inputDom() { return this.shadowRoot.querySelector("#ui5-multi-combobox-input"); } @@ -362,10 +387,12 @@ class MultiComboBox extends UI5Element { this.value = input.value; this._filteredItems = filteredItems; - if (filteredItems.length === 0) { - this._getPopover().close(); - } else { - this._getPopover().openBy(this); + if (!isPhone()) { + if (filteredItems.length === 0) { + this._getRespPopover().close(); + } else { + this._getRespPopover().open(this); + } } this.fireEvent("input"); @@ -402,12 +429,12 @@ class MultiComboBox extends UI5Element { _onkeydown(event) { if (isShow(event) && !this.readonly && !this.disabled) { event.preventDefault(); - this._togglePopover(); + this._toggleRespPopover(); } - if (isDown(event) && this._getPopover()._isOpen && this.items.length) { + if (isDown(event) && this._getRespPopover().opened && this.items.length) { event.preventDefault(); - const list = this.shadowRoot.querySelector(".ui5-multi-combobox-all-items-list"); + const list = this.getStaticAreaItemDomRef().querySelector(".ui5-multi-combobox-all-items-list"); list._itemNavigation.current = 0; list.items[0].focus(); } @@ -439,6 +466,10 @@ class MultiComboBox extends UI5Element { this.open = this._iconPressed; this.fireEvent("openChange"); + + if (!this._iconPressed) { + this._afterClosePopover(); + } } _getSelectedItems() { @@ -457,19 +488,19 @@ class MultiComboBox extends UI5Element { this.fireEvent("selectionChange", { items: this._getSelectedItems() }); if (!event.detail.selectionComponentPressed && !isSpace(event.detail)) { - this._getPopover().close(); + this._getRespPopover().close(); this.value = ""; this.fireEvent("input"); } } - _getPopover(isMorePopover) { - return this.getStaticAreaItemDomRef().querySelector(`.ui5-multi-combobox-${isMorePopover ? "selected" : "all"}-items-popover`); + _getRespPopover(isMorePopover) { + return this.getStaticAreaItemDomRef().querySelector(`.ui5-multi-combobox-${isMorePopover ? "selected" : "all"}-items-responsive-popover`); } - _togglePopover(isMorePopover) { - const popover = this._getPopover(isMorePopover); - const otherPopover = this._getPopover(!isMorePopover); + _toggleRespPopover(isMorePopover) { + const popover = this._getRespPopover(isMorePopover); + const otherPopover = this._getRespPopover(!isMorePopover); if (popover && popover.opened) { return popover.close(); @@ -477,7 +508,7 @@ class MultiComboBox extends UI5Element { otherPopover && otherPopover.close(); - popover && popover.openBy(this); + popover && popover.open(this); } _focusin() { @@ -488,13 +519,38 @@ class MultiComboBox extends UI5Element { this.focused = false; } + _click(event) { + if (isPhone() && !this.readonly && !this._showMorePressed) { + this._getRespPopover().open(this); + } + + this._showMorePressed = false; + } + + _afterClosePopover() { + // close device's keyboard and prevent further typing + if (isPhone()) { + this.blur(); + } + } + + _toggleButtonPress(event) { + if (this._selectedItemsPopoverOpened) { + event.target.pressed = true; + this._showAllItemsPopover(); + } else { + event.target.pressed = false; + this._showMorePopover(); + } + } + onBeforeRendering() { this._inputLastValue = this.value; const hasSelectedItem = this.items.some(item => item.selected); - if (!hasSelectedItem) { - const morePopover = this.shadowRoot.querySelector(`.ui5-multi-combobox-selected-items-popover`); + if (this.getDomRef() && !hasSelectedItem) { + const morePopover = this._getRespPopover(true); morePopover && morePopover.close(); } @@ -510,10 +566,10 @@ class MultiComboBox extends UI5Element { } onAfterRendering() { - if (this.open) { - this._getPopover().openBy(this); + if (this.open && !this._getRespPopover().opened) { + this._getRespPopover().open(this); // Set initial focus to the native input - this.getDomRef().querySelector("#ui5-multi-combobox-input").focus(); + this._innerInput.focus(); } } @@ -573,14 +629,31 @@ class MultiComboBox extends UI5Element { return this.valueStateTextMappings[this.valueState]; } + get _innerInput() { + if (isPhone()) { + if (this._getRespPopover().opened) { + return this._getRespPopover().querySelector("input"); + } + + return this._getRespPopover(true).querySelector("input"); + } + + return this.getDomRef().querySelector("#ui5-multi-combobox-input"); + } + + get _headerTitleText() { + return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); + } + static async define(...params) { await Promise.all([ Tokenizer.define(), Token.define(), Icon.define(), - Popover.define(), + ResponsivePopover.define(), List.define(), StandardListItem.define(), + ToggleButton, fetchI18nBundle("@ui5/webcomponents"), ]); diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs index aa215be8585a..28a01880a71d 100644 --- a/packages/main/src/MultiComboBoxPopover.hbs +++ b/packages/main/src/MultiComboBoxPopover.hbs @@ -1,8 +1,50 @@ - +{{!-- Selected items popover --}} + +
+
+ {{_headerTitleText}} + + +
+
+
+ +
+ +
+
+ {{#each items}} @@ -11,19 +53,73 @@ {{/if}} {{/each}} - - + OK + + + +{{!-- All items popover --}} + + @ui5-afterOpen={{_toggleIcon}} +> +
+
+ {{_headerTitleText}} + + +
+
+
+ +
+ +
+
+ {{#each _filteredItems}} - {{this.textContent}} + {{this.textContent}} {{/each}} - \ No newline at end of file + +
+ OK +
+ \ No newline at end of file diff --git a/packages/main/src/Popover.hbs b/packages/main/src/Popover.hbs index 8b899de0b207..def63145feb4 100644 --- a/packages/main/src/Popover.hbs +++ b/packages/main/src/Popover.hbs @@ -1,13 +1,15 @@ -