@ui5/webcomponents 0.0.0-bad80d0d6 → 0.0.0-bf8366eb6

package/src/Menu.hbs

@@ -0,0 +1,66 @@
+<ui5-responsive-popover
+	id="{{_id}}-menu-rp"
+	class="ui5-menu-rp"
+	horizontal-align="Start"
+	placement="Bottom"
+	vertical-align="Bottom"
+	.opener={{opener}}
+	?open={{open}}
+	prevent-initial-focus
+	prevent-focus-restore
+	hide-arrow
+	allow-target-overlap
+	@ui5-before-open={{_beforePopoverOpen}}
+	@ui5-open={{_afterPopoverOpen}}
+	@ui5-before-close={{_beforePopoverClose}}
+	@ui5-close={{_afterPopoverClose}}
+>
+{{#if isPhone}}
+	<div
+		slot="header"
+		class="ui5-menu-dialog-header"
+	>
+		<div
+			class="ui5-menu-dialog-title"
+		>
+			<div>
+				{{headerText}}
+			</div>
+		</div>
+		<ui5-button
+			icon="decline"
+			design="Transparent"
+			aria-label="{{labelClose}}"
+			@click={{_close}}
+		>
+		</ui5-button>
+	</div>
+{{/if}}
+	<div
+		id="{{_id}}-menu-main"
+	>
+	{{#if items.length}}
+		<ui5-list
+			id="{{_id}}-menu-list"
+			selection-mode="None"
+			?loading="{{loading}}"
+			loading-delay="{{loadingDelay}}"
+			separators="None"
+			accessible-role="Menu"
+			@ui5-item-click={{_itemClick}}
+			@ui5-close-menu={{_close}}
+			@mouseover={{_itemMouseOver}}
+			@keydown={{_itemKeyDown}}
+		>
+			<slot></slot>
+		</ui5-list>
+	{{else if loading}}
+		<ui5-busy-indicator
+			id="{{_id}}-menu-busy-indicator"
+			delay="{{loadingDelay}}"
+			class="ui5-menu-busy-indicator"
+			active>
+		</ui5-busy-indicator>
+	{{/if}}
+	</div>
+</ui5-responsive-popover>

package/src/MenuItem.hbs

@@ -0,0 +1,109 @@
+{{>include "./ListItem.hbs"}}
+
+{{#if hasSubmenu}}
+	{{> listItemPostContent}}
+{{/if}}
+
+{{#*inline "listItemContent"}}
+	{{#if text}}
+		<div class="ui5-menu-item-text">{{text}}</div>
+	{{/if}}
+
+	{{#if 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 additionalText}}
+		<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+	{{/if}}
+
+{{/inline}}
+
+{{#*inline "iconBegin"}}
+	{{#if hasIcon}}
+		<ui5-icon class="ui5-li-icon" name="{{icon}}"></ui5-icon>
+	{{else if _siblingsWithIcon}}
+		<div class="ui5-menu-item-dummy-icon"></div>
+	{{/if}}
+{{/inline}}
+
+{{#*inline "listItemPostContent"}}
+	<ui5-responsive-popover
+		id="{{_id}}-menu-rp"
+		class="ui5-menu-rp"
+		horizontal-align="Start"
+		prevent-initial-focus
+		prevent-focus-restore
+		hide-arrow
+		allow-target-overlap
+		sub-menu
+		placement={{placement}}
+		vertical-align="Top"
+		@ui5-before-open={{_beforePopoverOpen}}
+		@ui5-open={{_afterPopoverOpen}}
+		@ui5-before-close={{_beforePopoverClose}}
+		@ui5-close={{_afterPopoverClose}}
+	>
+		{{#if isPhone}}
+			<div
+				slot="header"
+				class="ui5-menu-dialog-header"
+			>
+				<ui5-button
+					icon="nav-back"
+					class="ui5-menu-back-button"
+					design="Transparent"
+					aria-label="{{labelBack}}"
+					@click={{_close}}
+				>
+				</ui5-button>
+				<div
+					class="ui5-menu-dialog-title"
+				>
+					<div>
+						{{text}}
+					</div>
+				</div>
+				<ui5-button
+					icon="decline"
+					design="Transparent"
+					aria-label="{{labelClose}}"
+					@click={{_closeAll}}
+				>
+				</ui5-button>
+			</div>
+		{{/if}}
+
+		<div
+			id="{{_id}}-menu-main"
+		>
+		{{#if items.length}}
+			<ui5-list
+				id="{{_id}}-menu-list"
+				selection-mode="None"
+				separators="None"
+				accessible-role="menu"
+				?loading="{{loading}}"
+				loading-delay="{{loadingDelay}}"
+				@ui5-close-menu={{_close}}
+			>
+				<slot></slot>
+			</ui5-list>
+		{{else if loading}}
+			<ui5-busy-indicator
+				id="{{_id}}-menu-busy-indicator"
+				delay="{{loadingDelay}}"
+				class="ui5-menu-busy-indicator"
+				active>
+			</ui5-busy-indicator>
+		{{/if}}
+		</div>
+	</ui5-responsive-popover>
+{{/inline}}

package/src/MessageStrip.hbs

@@ -1,35 +1,32 @@
 <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,10 +20,17 @@
 					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}}
 
 		</div>
 	{{/each}}
-</div>
+</div>

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
+		hide-popover-arrow
 		class="ui5-multi-combobox-tokenizer"
 		?disabled="{{disabled}}"
-		@ui5-show-more-items-press="{{_showMorePopover}}"
+		@ui5-show-more-items-press="{{_showFilteredItems}}"
+		.opener={{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,32 +47,42 @@
 		@input="{{_inputLiveChange}}"
 		@change={{_inputChange}}
 		@keydown="{{_onkeydown}}"
-		@keyup="{{_onkeyup}}"
 		@click={{_click}}
 		@focusin={{inputFocusIn}}
 		@focusout={{inputFocusOut}}
+		@paste={{_handlePaste}}
 		role="combobox"
-		aria-haspopup="listbox"
+		aria-haspopup="dialog"
 		aria-expanded="{{open}}"
 		aria-autocomplete="both"
 		aria-describedby="{{ariaDescribedByText}}"
 		aria-required="{{required}}"
+		aria-label="{{ariaLabelText}}"
+		data-sap-focus-ref
 	/>
 
+	{{#if _effectiveShowClearIcon}}
+		<div @click={{_clear}} class="ui5-input-clear-icon-wrapper inputIcon" tabindex="-1" @mousedown={{_iconMouseDown}}>
+			<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
+		</div>
+	{{/if}}
+
 	{{#if icon}}
 		<slot name="icon"></slot>
 	{{/if}}
 
 	{{#unless readonly}}
 		<ui5-icon name="slim-arrow-down"
-			input-icon
+			class="inputIcon"
 			slot="icon"
 			tabindex="-1"
-			@click="{{togglePopover}}"
+			@click="{{togglePopoverByDropdownIcon}}"
 			@mousedown="{{_onIconMousedown}}"
+			@focusin="{{_forwardFocusToInner}}"
 			?pressed="{{open}}"
-			dir="{{effectiveDir}}"
 			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}
 </div>
+
+{{>include "./MultiComboBoxPopover.hbs"}}

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
-	_disable-initial-focus
+	placement="Bottom"
+	horizontal-align="Start"
+	class="{{classes.popover}}"
+	hide-arrow
+	prevent-initial-focus
+	style="{{styles.suggestionsPopover}}"
 	@ui5-selection-change={{_listSelectionChange}}
-	@ui5-after-close={{_toggle}}
-	@ui5-after-open={{_toggle}}
+	@ui5-close={{_afterClosePicker}}
+	@ui5-before-open={{_beforeOpen}}
+	@ui5-open={{_afterOpenPicker}}
 >
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
@@ -16,74 +18,82 @@
 					class="ui5-responsive-popover-close-btn"
 					icon="decline"
 					design="Transparent"
-					@click="{{togglePopover}}"
+					@click="{{handleCancel}}"
 				>
 				</ui5-button>
 			</div>
 			<div class="row">
-				<div
-					slot="header"
-					class="input-root-phone"
-					value-state="{{valueState}}"
+				<ui5-input
+					@ui5-input="{{_handleMobileInput}}"
+					@ui5-change="{{_mobileInputChange}}"
+					placeholder="{{placeholder}}"
+					value-state="{{_dialogInputValueState}}"
+					?show-clear-icon="{{showClearIcon}}"
+					?no-typeahead="{{noTypeahead}}"
 				>
-					<input
-						.value="{{value}}"
-						inner-input
-						placeholder="{{placeholder}}"
-						value-state="{{valueState}}"
-						@input="{{_inputLiveChange}}"
-						@change={{_inputChange}}
-						aria-autocomplete="both"
-						aria-labelledby="{{_id}}-hiddenText-nMore"
-						aria-describedby="{{_id}}-valueStateDesc"
-						/>
-					</div>
-					<ui5-togglebutton
+					{{#each _filteredItems}}
+						<ui5-suggestion-item text="{{this.text}}" additional-text="{{this.additionalText}}"></ui5-suggestion-item>
+					{{/each}}
+				</ui5-input>
+				<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}}
+						accessible-name="{{_showSelectedButtonAccessibleNameText}}">
+				</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}}
+
+		{{> selectAllWrapper}}
 	{{/if}}
 
 	{{#unless _isPhone}}
 		{{#if hasValueStateMessage}}
-			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
+			<div slot="header" @keydown="{{_onListHeaderKeydown}}" 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}}
+
+		{{> selectAllWrapper}}
 	{{/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" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list">
+			{{#each selectedItems}}
+				{{#if isGroupItem}}
+					<ui5-li-group-header data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-group-header>
+				{{else}}
+					{{> listItem}}
+				{{/if}}
+			{{/each}}
+		</ui5-list>
+	{{else}}
+		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list">
+			{{#each _filteredItems}}
+				{{#if isGroupItem}}
+					<ui5-li-group-header data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-group-header>
+				{{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}}
@@ -92,15 +102,16 @@
 {{#if hasValueStateMessage}}
 	<ui5-popover
 		skip-registry-update
-		_disable-initial-focus
+		prevent-initial-focus
 		prevent-focus-restore
-		no-padding
-		no-arrow
+		hide-arrow
 		class="ui5-valuestatemessage-popover"
-		placement-type="Bottom"
-		horizontal-align="Left"
+		placement="Bottom"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
+		tabindex="-1"
 	>
 		<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 +119,32 @@
 
 {{#*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}}
+
+{{#*inline "selectAllWrapper"}}
+	{{#if showSelectAll}}
+		<div class="ui5-mcb-select-all-header" @keydown="{{_onListHeaderKeydown}}" tabindex="0">
+			<ui5-checkbox ?checked={{_allSelected}} class="ui5-mcb-select-all-checkbox" text="{{selectAllCheckboxLabel}}" @ui5-change="{{_handleSelectAllCheckboxClick}}"></ui5-checkbox>
+		</div>
+	{{/if}}
+{{/inline}}

package/src/MultiInput.hbs

@@ -1,29 +1,20 @@
 {{>include "./Input.hbs"}}
 
 {{#*inline "preContent"}}
-	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
+	<span id="hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 	<ui5-tokenizer
 		class="ui5-multi-input-tokenizer"
-		.morePopoverOpener={{this}}
+		.opener={{morePopoverOpener}}
 		.popoverMinWidth={{_inputWidth}}
-		.valueState={{valueState}}
-		?expanded="{{expandedTokenizer}}"
-		show-more
+		hide-popover-arrow
+		?expanded="{{tokenizerExpanded}}"
 		@keydown="{{_onTokenizerKeydown}}"
-		@show-more-items-press={{showMorePress}}
-		@token-delete={{tokenDelete}}
+		@ui5-token-delete={{tokenDelete}}
 		@focusout="{{_tokenizerFocusOut}}"
 	>
-		<slot name="tokens"></slot>
-		<div slot="valueStateMessage">
-			{{#if shouldDisplayDefaultValueStateMessage}}
-				{{valueStateText}}
-			{{else}}
-				{{#each valueStateMessageText}}
-					{{this}}
-				{{/each}}
-			{{/if}}
-		</div>
+		{{#each tokens}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/each}}
 	</ui5-tokenizer>
 {{/inline}}
 
@@ -34,7 +25,7 @@
 			@click={{valueHelpPress}}
 			@mousedown={{valueHelpMouseDown}}
 			@mouseup={{valueHelpMouseUp}}
-			input-icon
+			class="inputIcon"
 			name="value-help"
 		></ui5-icon>
 	{{/if}}

package/src/NavigationMenu.hbs

@@ -0,0 +1,64 @@
+<ui5-responsive-popover
+	id="{{_id}}-navigation-menu-rp"
+	class="ui5-menu-rp ui5-navigation-menu"
+	vertical-align="Center"
+	.opener={{opener}}
+	?open={{open}}
+	prevent-initial-focus
+	prevent-focus-restore
+	@ui5-before-open={{_beforePopoverOpen}}
+	@ui5-open={{_afterPopoverOpen}}
+	@ui5-before-close={{_beforePopoverClose}}
+	@ui5-close={{_afterPopoverClose}}
+	accessible-name-ref="{{_id}}-navigationMenuPopoverText"
+>
+<span id="{{_id}}-navigationMenuPopoverText" class="ui5-hidden-text">{{accSideNavigationPopoverHiddenText}}</span>
+{{#if isPhone}}
+	<div
+		slot="header"
+		class="ui5-menu-dialog-header"
+	>
+		<div
+			class="ui5-menu-dialog-title"
+		>
+			<div>
+				{{headerText}}
+			</div>
+		</div>
+		<ui5-button
+			icon="decline"
+			design="Transparent"
+			aria-label="{{labelClose}}"
+			@click={{_close}}
+		>
+		</ui5-button>
+	</div>
+{{/if}}
+	<div
+		id="{{_id}}-menu-main"
+        class="ui5-navigation-menu-main"
+	>
+	{{#if items.length}}
+		<ui5-list
+			accessible-role="Tree"
+			id="{{_id}}-menu-list"
+			selection-mode="None"
+			?loading="{{loading}}"
+			loading-delay="{{loadingDelay}}"
+			separators="None"
+			@ui5-item-click={{_itemClick}}
+			@ui5-close-menu={{_close}}
+			@keydown={{_itemKeyDown}}
+		>
+			<slot></slot>
+		</ui5-list>
+	{{else if loading}}
+		<ui5-busy-indicator
+			id="{{_id}}-menu-busy-indicator"
+			delay="{{loadingDelay}}"
+			class="ui5-menu-busy-indicator"
+			active>
+		</ui5-busy-indicator>
+	{{/if}}
+	</div>
+</ui5-responsive-popover>