@ui5/webcomponents 0.0.0-20acae2ee → 0.0.0-2514bd09f

package/src/ListItem.hbs

@@ -1,7 +1,8 @@
 <li
-	tabindex="{{tabIndex}}"
+	part="native-li"
+	data-sap-focus-ref
+	tabindex="{{_effectiveTabIndex}}"
 	class="{{classes.main}}"
-	dir="{{effectiveDir}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@keyup="{{_onkeyup}}"
@@ -11,15 +12,20 @@
 	@touchstart="{{_ontouchstart}}"
 	@touchend="{{_ontouchend}}"
 	@click="{{_onclick}}"
-	aria-selected="{{ariaSelected}}"
 	role="{{_accInfo.role}}"
 	aria-expanded="{{_accInfo.ariaExpanded}}"
+	title="{{title}}"
 	aria-level="{{_accInfo.ariaLevel}}"
+	aria-haspopup="{{_accInfo.ariaHaspopup}}"
 	aria-posinset="{{_accInfo.posinset}}"
+	aria-roledescription="{{accessibleRoleDescription}}"
 	aria-setsize="{{_accInfo.setsize}}"
-	aria-labelledby="{{_id}}-invisibleText {{_id}}-content"
-	aria-disabled="{{ariaDisabled}}"
-	style="list-style-type: none;"
+	aria-describedby="{{_id}}-invisibleText-describedby"
+	aria-labelledby="{{_accessibleNameRef}}"
+	aria-disabled="{{_ariaDisabled}}"
+	aria-selected="{{_accInfo.ariaSelected}}"
+	aria-checked="{{_accInfo.ariaChecked}}"
+	aria-owns="{{_accInfo.ariaOwns}}"
 >
 		{{> listItemPreContent}}
 
@@ -27,7 +33,7 @@
 			{{> selectionElement}}
 		{{/if}}
 
-		<div id="{{_id}}-content" class="ui5-li-content">
+		<div part="content" id="{{_id}}-content" class="ui5-li-content">
 			{{> imageBegin}}
 			{{> iconBegin}}
 			{{> listItemContent}}
@@ -37,6 +43,7 @@
 		{{#if typeDetail}}
 			<div class="ui5-li-detailbtn">
 				<ui5-button
+					part="detail-button"
 					design="Transparent"
 					icon="edit"
 					@click="{{onDetailClick}}"
@@ -44,13 +51,24 @@
 			</div>
 		{{/if}}
 
+		{{#if typeNavigation}}
+			<ui5-icon name ="slim-arrow-right"></ui5-icon>
+		{{/if}}
+
+		{{#if navigated}}
+			<div class="ui5-li-navigated"></div>
+		{{/if}}
+
+
 		{{#if placeSelectionElementAfter}}
 			{{> selectionElement}}
 		{{/if}}
 
-		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{_accInfo.listItemAriaLabel}}</span>
+		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{_accInfo.listItemAriaLabel}} {{accessibleName}}</span>
+		<span id="{{_id}}-invisibleText-describedby" class="ui5-hidden-text">{{_accInfo.ariaSelectedText}}</span>
 </li>
 
+
 {{#*inline "listItemPreContent"}}{{/inline}}
 {{#*inline "listItemContent"}}{{/inline}}
 {{#*inline "imageBegin"}}{{/inline}}
@@ -59,38 +77,50 @@
 
 {{#*inline "selectionElement"}}
 	{{#if modeSingleSelect}}
-		<ui5-radiobutton
+		<ui5-radio-button
+				part="radio"
 				?disabled="{{isInactive}}"
+				accessible-name="{{_accInfo.ariaLabelRadioButton}}"
 				tabindex="-1"
 				id="{{_id}}-singleSelectionElement"
 				class="ui5-li-singlesel-radiobtn"
-				?selected="{{selected}}"
+				?checked="{{selected}}"
 				@click="{{onSingleSelectionComponentPress}}">
-		</ui5-radiobutton>
+		</ui5-radio-button>
 	{{/if}}
 
 	{{#if modeMultiSelect}}
 		<ui5-checkbox
+				part="checkbox"
 				?disabled="{{isInactive}}"
+				?indeterminate={{indeterminate}}
 				tabindex="-1"
 				id="{{_id}}-multiSelectionElement"
 				class="ui5-li-multisel-cb"
 				?checked="{{selected}}"
-				aria-label="{{_accInfo.ariaLabel}}"
+				accessible-name="{{_accInfo.ariaLabel}}"
 				@click="{{onMultiSelectionComponentPress}}">
 		</ui5-checkbox>
 	{{/if}}
 
-	{{#if modeDelete}}
+	{{#if renderDeleteButton}}
 		<div class="ui5-li-deletebtn">
+			{{#if hasDeleteButtonSlot}}
+				<slot name="deleteButton"></slot>
+			{{else}}
 			<ui5-button
+				part="delete-button"
+				tabindex="-1"
+				data-sap-no-tab-ref
 				id="{{_id}}-deleteSelectionElement"
 				design="Transparent"
 				icon="decline"
 				?disabled="{{disableDeleteButton}}"
 				@click="{{onDelete}}"
-				title="{{deleteText}}"
+				tooltip="{{deleteText}}"
 			></ui5-button>
+			{{/if}}
 		</div>
 	{{/if}}
+
 {{/inline}}

package/src/Menu.hbs

@@ -0,0 +1,122 @@
+<ui5-responsive-popover
+	id="{{_id}}-menu-rp"
+	class="ui5-menu-rp"
+	horizontal-align="Left"
+	placement-type={{placementType}}
+	vertical-align={{verticalAlign}}
+	hide-arrow
+	allow-target-overlap
+	?sub-menu={{_isSubMenu}}
+	@ui5-before-open={{_beforePopoverOpen}}
+	@ui5-after-open={{_afterPopoverOpen}}
+	@ui5-before-close={{_beforePopoverClose}}
+	@ui5-after-close={{_afterPopoverClose}}
+>
+{{#if isPhone}}
+	<div
+		slot="header"
+		class="ui5-menu-dialog-header"
+	>
+	{{#if isSubMenuOpened}}
+		<ui5-button
+			icon="nav-back"
+			class="ui5-menu-back-button"
+			design="Transparent"
+			aria-label="{{labelBack}}"
+			@click={{_navigateBack}}
+		>
+		</ui5-button>
+	{{/if}}
+		<div
+			class="ui5-menu-dialog-title"
+		>
+			<div>
+				{{menuHeaderTextPhone}}
+			</div>
+		</div>
+		<ui5-button
+			icon="decline"
+			design="Transparent"
+			aria-label="{{labelClose}}"
+			@click={{close}}
+		>
+		</ui5-button>
+	</div>
+{{/if}}
+	<div
+		id="{{_id}}-menu-main"
+	>
+	{{#if _currentItems.length}}
+		<ui5-list
+			id="{{_id}}-menu-list"
+			mode="None"
+			?busy="{{busy}}"
+			busy-delay="{{busyDelay}}"
+			separators="None"
+			accessible-role="menu"
+			@ui5-item-click={{_itemClick}}
+			@mouseover="{{_busyMouseOver}}"
+		>
+		{{#each _currentItems}}
+			<ui5-li
+				.associatedItem="{{this.item}}"
+				class="ui5-menu-item"
+				id="{{../_id}}-menu-item-{{@index}}"
+				.icon="{{this.item.icon}}"
+				accessible-name={{this.item.ariaLabelledByText}}
+				accessible-role="menuitem"
+				.additionalText="{{this.item._additionalText}}"
+				._ariaHasPopup={{this.ariaHasPopup}}
+				?disabled={{this.item.disabled}}
+				?starts-section={{this.item.startsSection}}
+				?selected={{this.item.subMenuOpened}}
+				?is-phone={{../isPhone}}
+				@mouseover={{../_itemMouseOver}}
+				@mouseout={{../_itemMouseOut}}
+				@keydown={{../_itemKeyDown}}
+			>
+				<div class="ui5-menu-item-text">
+				{{#if this.item.hasDummyIcon}}
+					<div
+						class="ui5-menu-item-dummy-icon"
+					>
+					</div>
+				{{/if}}
+				{{this.item.text}}
+				{{#if this.item.hasSubmenu}}
+					<div
+						class="ui5-menu-item-submenu-icon"
+					>
+						<ui5-icon
+							part="subicon"
+							name="slim-arrow-right"
+							class="ui5-menu-item-icon-end"
+						>
+						</ui5-icon>
+					</div>
+				{{else if this.item._siblingsWithChildren}}
+					<div
+						class="ui5-menu-item-no-icon-end"
+					>
+					</div>
+				{{/if}}
+				</div>
+			</ui5-li>
+		{{/each}}
+		</ui5-list>
+	{{else if busy}}
+		<ui5-busy-indicator
+			id="{{_id}}-menu-busy-indicator"
+			delay="{{busyDelay}}"
+			class="ui5-menu-busy-indicator"
+			@mouseover="{{_busyMouseOver}}"
+			active>
+		</ui5-busy-indicator>
+	{{/if}}
+	</div>
+</ui5-responsive-popover>
+
+<div
+	class="ui5-menu-submenus"
+>
+</div>

package/src/MessageStrip.hbs

@@ -1,35 +1,33 @@
 <div class="{{classes.root}}"
 	id="{{_id}}"
 	role="note"
-	dir="{{effectiveDir}}"
 	aria-live="assertive"
 	aria-labelledby="{{_id}}"
 >
 
-	{{#unless noIcon}}
+	{{#unless hideIcon}}
 		<div
-		class="ui5-messagestrip-icon-wrapper"
+		class="ui5-message-strip-icon-wrapper"
 		aria-hidden="true"
 		>
 			{{#if iconProvided}}
 				<slot name="icon"></slot>
 			{{else}}
-				<ui5-icon name="{{standardIconName}}" class="ui5-messagestrip-icon"></ui5-icon>
+				<ui5-icon name="{{standardIconName}}" class="ui5-message-strip-icon"></ui5-icon>
 			{{/if}}
 		</div>
 	{{/unless}}
 
 	<span class="ui5-hidden-text">{{hiddenText}}</span>
-	<span class="ui5-messagestrip-text"><slot></slot></span>
+	<span class="ui5-message-strip-text"><slot></slot></span>
 
-	{{#unless noCloseButton}}
+	{{#unless hideCloseButton}}
 		<ui5-button
-				icon="decline"
-				icon-size=".75rem"
-				design="Transparent"
-				class="ui5-messagestrip-close-button"
-				title="{{_closeButtonText}}"
-				@click={{_closeClick}}
+			icon="decline"
+			design="Transparent"
+			class="ui5-message-strip-close-button"
+			tooltip="{{_closeButtonText}}"
+			@click={{_closeClick}}
 		></ui5-button>
 	{{/unless}}
 </div>

package/src/MonthPicker.hbs

@@ -1,12 +1,12 @@
 <div
 	class="ui5-mp-root"
 	role="grid"
+	aria-roledescription="{{roleDescription}}"
 	aria-readonly="false"
 	aria-multiselectable="false"
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 	@click={{_selectMonth}}
-	@focusin={{_onfocusin}}
 >
 	{{#each _months}}
 		<div class="ui5-mp-quarter">
@@ -20,7 +20,14 @@
 					role="gridcell"
 					aria-selected="{{this.ariaSelected}}"
 				>
-					{{this.name}}
+					<span class="ui5-dp-monthtext">
+						{{this.name}}
+					</span>
+					{{#if this.nameInSecType}}
+						<span class="ui5-dp-monthtext ui5-dp-monthsectext">
+							{{this.nameInSecType}}
+						</span>
+					{{/if}}
 				</div>
 			{{/each}}
 

package/src/MultiComboBox.hbs

@@ -1,20 +1,25 @@
-<div class="ui5-multi-combobox-root"
+<div class="ui5-multi-combobox-root ui5-input-focusable-element"
 >
-	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
+	<span id="ui5-multi-combobox-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 
 	{{#if hasValueState}}
-		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
+		<span id="ui5-multi-combobox-valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
 	{{/if}}
 
 	<ui5-tokenizer slot="_beginContent"
 		show-more
+		prevent-popover-open
 		class="ui5-multi-combobox-tokenizer"
 		?disabled="{{disabled}}"
-		@ui5-show-more-items-press="{{_showMorePopover}}"
+		@ui5-show-more-items-press="{{_showFilteredItems}}"
+		.morePopoverOpener={{morePopoverOpener}}
+		.popoverMinWidth={{_inputWidth}}
 		@ui5-token-delete="{{_tokenDelete}}"
+		@ui5-before-more-popover-open="{{handleBeforeTokenizerPopoverOpen}}"
 		@focusout="{{_tokenizerFocusOut}}"
 		@focusin="{{_tokenizerFocusIn}}"
 		@click={{_click}}
+		@paste={{_handlePaste}}
 		@keydown="{{_onTokenizerKeydown}}"
 		?expanded="{{_tokenizerExpanded}}"
 	>
@@ -42,16 +47,18 @@
 		@input="{{_inputLiveChange}}"
 		@change={{_inputChange}}
 		@keydown="{{_onkeydown}}"
-		@keyup="{{_onkeyup}}"
 		@click={{_click}}
 		@focusin={{inputFocusIn}}
 		@focusout={{inputFocusOut}}
+		@paste={{_handlePaste}}
 		role="combobox"
 		aria-haspopup="listbox"
 		aria-expanded="{{open}}"
 		aria-autocomplete="both"
 		aria-describedby="{{ariaDescribedByText}}"
 		aria-required="{{required}}"
+		aria-label="{{ariaLabelText}}"
+		data-sap-focus-ref
 	/>
 
 	{{#if icon}}
@@ -63,10 +70,10 @@
 			input-icon
 			slot="icon"
 			tabindex="-1"
-			@click="{{togglePopover}}"
+			@click="{{togglePopoverByDropdownIcon}}"
 			@mousedown="{{_onIconMousedown}}"
+			@focusin="{{_forwardFocusToInner}}"
 			?pressed="{{open}}"
-			dir="{{effectiveDir}}"
 			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}

package/src/MultiComboBoxPopover.hbs

@@ -1,12 +1,14 @@
 <ui5-responsive-popover
 	placement-type="Bottom"
 	horizontal-align="Left"
-	class="ui5-multi-combobox-all-items-responsive-popover"
-	no-arrow
+	class="{{classes.popover}}"
+	hide-arrow
 	_disable-initial-focus
+	style="{{styles.suggestionsPopover}}"
 	@ui5-selection-change={{_listSelectionChange}}
-	@ui5-after-close={{_toggle}}
-	@ui5-after-open={{_toggle}}
+	@ui5-after-close={{_afterClosePicker}}
+	@ui5-before-open={{_beforeOpen}}
+	@ui5-after-open={{_afterOpenPicker}}
 >
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
@@ -16,7 +18,7 @@
 					class="ui5-responsive-popover-close-btn"
 					icon="decline"
 					design="Transparent"
-					@click="{{togglePopover}}"
+					@click="{{handleCancel}}"
 				>
 				</ui5-button>
 			</div>
@@ -33,57 +35,64 @@
 						value-state="{{valueState}}"
 						@input="{{_inputLiveChange}}"
 						@change={{_inputChange}}
+						@keydown={{_onkeydown}}
 						aria-autocomplete="both"
-						aria-labelledby="{{_id}}-hiddenText-nMore"
-						aria-describedby="{{_id}}-valueStateDesc"
 						/>
-					</div>
-					<ui5-togglebutton
+				</div>
+				<ui5-toggle-button
 						slot="header"
 						class="ui5-multi-combobox-toggle-button"
 						icon="multiselect-all"
 						design="Transparent"
 						?pressed={{_showAllItemsButtonPressed}}
-						?disabled={{allItemsSelected}}
-						@click="{{filterSelectedItems}}"
-					></ui5-togglebutton>
-				</div>
-			{{#if hasValueStateMessage}}
-				<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
-					{{> valueStateMessage}}
-				</div>
-			{{/if}}
+						@click="{{filterSelectedItems}}">
+				</ui5-toggle-button>
 			</div>
 		</div>
+		{{#if hasValueStateMessage}}
+			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+				{{> valueStateMessage}}
+			</div>
+		{{/if}}
 	{{/if}}
 
 	{{#unless _isPhone}}
 		{{#if hasValueStateMessage}}
-			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
+			<div slot="header" @keydown="{{_onValueStateKeydown}}" tabindex="0" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
 	{{/unless}}
 
-	<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
-		{{#each _filteredItems}}
-				<ui5-li
-					type="{{../_listItemsType}}"
-					info={{this.additionalText}}
-					?selected={{this.selected}}
-					data-ui5-token-id="{{this._id}}"
-					data-ui5-stable="{{this.stableDomRef}}"
-				>
-					{{this.text}}
-				</ui5-li>
-		{{/each}}
-	</ui5-list>
+	{{#if filterSelected}}
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+			{{#each selectedItems}}
+				{{#if isGroupItem}}
+					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
+				{{else}}
+					{{> listItem}}
+				{{/if}}
+			{{/each}}
+		</ui5-list>
+	{{else}}
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+			{{#each _filteredItems}}
+				{{#if isGroupItem}}
+					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
+				{{else}}
+					{{> listItem}}
+				{{/if}}
+			{{/each}}
+		</ui5-list>
+	{{/if}}
 
 	{{#if _isPhone}}
 		<div slot="footer" class="ui5-responsive-popover-footer">
 			<ui5-button
 				design="Transparent"
-				@click="{{togglePopover}}"
+				@click="{{handleOK}}"
 			>{{_dialogOkButton}}</ui5-button>
 		</div>
 	{{/if}}
@@ -94,13 +103,13 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
-		no-arrow
+		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
-		horizontal-align="Left"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>
@@ -108,10 +117,24 @@
 
 {{#*inline "valueStateMessage"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
-		{{valueStateText}}
+		{{valueStateDefaultText}}
 	{{else}}
 		{{#each valueStateMessageText}}
 			{{this}}
 		{{/each}}
 	{{/if}}
 {{/inline}}
+
+{{#*inline "listItem"}}
+	<ui5-li
+		wrapping-type="Normal"
+		type="{{../_listItemsType}}"
+		additional-text={{this.additionalText}}
+		?selected={{this.selected}}
+		data-ui5-token-id="{{this._id}}"
+		data-ui5-stable="{{this.stableDomRef}}"
+		@keydown="{{../_onItemKeydown}}"
+	>
+		{{this.text}}
+	</ui5-li>
+{{/inline}}

package/src/MultiInput.hbs

@@ -4,14 +4,14 @@
 	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 	<ui5-tokenizer
 		class="ui5-multi-input-tokenizer"
-		.morePopoverOpener={{this}}
+		.morePopoverOpener={{morePopoverOpener}}
 		.popoverMinWidth={{_inputWidth}}
 		.valueState={{valueState}}
 		?expanded="{{expandedTokenizer}}"
 		show-more
 		@keydown="{{_onTokenizerKeydown}}"
-		@show-more-items-press={{showMorePress}}
-		@token-delete={{tokenDelete}}
+		@ui5-show-more-items-press={{showMorePress}}
+		@ui5-token-delete={{tokenDelete}}
 		@focusout="{{_tokenizerFocusOut}}"
 	>
 		<slot name="tokens"></slot>