@ui5/webcomponents 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

package/src/SelectMenu.hbs

@@ -1,12 +1,12 @@
 <ui5-responsive-popover
 	class="ui5-select-menu"
-	placement="Bottom"
-	horizontal-align="Start"
-	@ui5-open="{{_onAfterOpen}}"
-	@ui5-close="{{_onAfterClose}}"
+	placement-type="Bottom"
+	horizontal-align="Left"
+	@ui5-after-open="{{_onAfterOpen}}"
+	@ui5-after-close="{{_onAfterClose}}"
 	@ui5-before-open="{{_onBeforeOpen}}"
 	hide-arrow
-	prevent-initial-focus
+	_disable-initial-focus
 	style={{styles.responsivePopover}}
 	>
 		{{#if _isPhone}}
@@ -37,8 +37,8 @@
 				{{/if}}
 		{{/unless}}
 
-		<ui5-list
-			selection-mode="Single"
+		<ui5-list 
+			mode="SingleSelect"
 			separators="None"
 			@ui5-item-click="{{_onOptionClick}}">
 					<slot></slot>

package/src/SelectPopover.hbs

@@ -1,13 +1,13 @@
 {{#if options}}
 	<ui5-responsive-popover
 		hide-arrow
-		prevent-initial-focus
-		placement="Bottom"
+		_disable-initial-focus
+		placement-type="Bottom"
 		class="ui5-select-popover {{classes.popover}}"
-		horizontal-align="Start"
-		@ui5-open="{{_afterOpen}}"
+		horizontal-align="Left"
+		@ui5-after-open="{{_afterOpen}}"
 		@ui5-before-open="{{_beforeOpen}}"
-		@ui5-close="{{_afterClose}}"
+		@ui5-after-close="{{_afterClose}}"
 		@keydown="{{_onkeydown}}"
 		style={{styles.responsivePopover}}
 	>
@@ -40,7 +40,7 @@
 		{{/unless}}
 
 		<ui5-list
-			selection-mode="SingleAuto"
+			mode="SingleSelectAuto"
 			separators="None"
 			@mousedown="{{_itemMousedown}}"
 			@ui5-item-click="{{_handleItemPress}}"
@@ -50,8 +50,8 @@
 					id="{{this.id}}-li"
 					icon="{{this.icon}}"
 					?selected="{{this.selected}}"
-					?focused="{{this._focused}}"
-					tooltip="{{this.tooltip}}"
+					?focused="{{this.focused}}"
+					title="{{this.title}}"
 					additional-text="{{this.additionalText}}"
 					?aria-selected="{{this.selected}}"
 					data-ui5-stable="{{this.stableDomRef}}"
@@ -66,12 +66,12 @@
 {{#if shouldOpenValueStateMessagePopover}}
 	<ui5-popover
 		skip-registry-update
-		prevent-initial-focus
+		_disable-initial-focus
 		prevent-focus-restore
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
-		placement="Bottom"
-		horizontal-align="Start"
+		placement-type="Bottom"
+		horizontal-align="Left"
 	>
 		<div class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>

package/src/SplitButton.hbs

@@ -12,7 +12,7 @@
 	<ui5-button
 		class="ui5-split-text-button"
 		design="{{design}}"
-		icon="{{icon}}"
+		icon="{{_textButtonIcon}}"
 		tabindex="-1"
 		?disabled="{{disabled}}"
 		?active="{{_textButtonActive}}"
@@ -20,27 +20,29 @@
 		@touchstart={{_textButtonPress}}
 		@mousedown={{_textButtonPress}}
 		@mouseup={{_textButtonRelease}}
-		@focusin={{_onInnerButtonFocusIn}}
+		@focusin={{_textButtonFocusIn}}
 		@focusout={{_onFocusOut}}
 	>
 		{{#if isTextButton}}
 			<slot></slot>
 		{{/if}}
 	</ui5-button>
-	<ui5-button
-		class="ui5-split-arrow-button"
-		design="{{design}}"
-		icon="slim-arrow-down"
-		tabindex="-1"
-		?disabled="{{disabled}}"
-		?active="{{effectiveActiveArrowButton}}"
-		@click="{{_handleArrowButtonAction}}"
-		@mousedown={{_arrowButtonPress}}
-		@mouseup={{_arrowButtonRelease}}
-		@focusin={{_onInnerButtonFocusIn}}
-		@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
-	>
-	</ui5-button>
+		<ui5-button
+			class="ui5-split-arrow-button"
+			design="{{design}}"
+			icon="slim-arrow-down"
+			tabindex="-1"
+			?disabled="{{disabled}}"
+			?active="{{effectiveActiveArrowButton}}"
+			aria-expanded="{{accessibilityInfo.ariaExpanded}}"
+			aria-haspopup="{{accessibilityInfo.ariaHaspopup}}"
+			@click="{{_handleArrowButtonAction}}"
+			@mousedown={{_arrowButtonPress}}
+			@mouseup={{_arrowButtonRelease}}
+			@focusin={{_setTabIndexValue}}
+			@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
+		>
+		</ui5-button>
 	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accessibilityInfo.description}} {{accessibilityInfo.keyboardHint}} {{accessibleName}}</span>
 	<span id="{{_id}}-invisibleTextDefault" class="ui5-hidden-text">{{textButtonAccText}}</span>
 

package/src/StandardListItem.hbs

@@ -39,12 +39,12 @@
 
 {{#*inline "iconBegin"}}
 	{{#if displayIconBegin}}
-		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" mode="Decorative"></ui5-icon>
+		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" accessible-role="presentation" aria-hidden="true"></ui5-icon>
 	{{/if}}
 {{/inline}}
 
 {{#*inline "iconEnd"}}
 	{{#if displayIconEnd}}
-		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" mode="Decorative"></ui5-icon>
+		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" accessible-role="presentation" aria-hidden="true"></ui5-icon>
 	{{/if}}
 {{/inline}}

package/src/StepInput.hbs

@@ -22,7 +22,7 @@
 			@mousedown="{{_decSpin}}"
 			@mouseup="{{_resetSpin}}"
 			@mouseout="{{_resetSpinOut}}"
-			class="inputIcon"
+			input-icon
 			show-tooltip
 			?clickable="{{_decIconClickable}}"
 		></ui5-icon>
@@ -70,10 +70,12 @@
 			@mousedown="{{_incSpin}}"
 			@mouseup="{{_resetSpin}}"
 			@mouseout="{{_resetSpinOut}}"
-			class="inputIcon"
+			input-icon
 			show-tooltip
 			?clickable="{{_incIconClickable}}"
 		></ui5-icon>
 	</div>
 	{{/unless}}
+	<slot name="formSupport"></slot>
+
 </div>

package/src/Switch.hbs

@@ -47,4 +47,5 @@
 	</div>
 
 	<input type='checkbox' ?checked="{{checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
+	<slot name="formSupport"></slot>
 </div>

package/src/TabContainer.hbs

@@ -6,7 +6,7 @@
 		class="{{classes.header}}"
 		id="{{_id}}-header"
 		@focusin="{{_onHeaderFocusin}}"
-		@dragstart="{{_onDragStart}}"
+		@dragstart="{{_onHeaderDragStart}}"
 		@dragenter="{{_onHeaderDragEnter}}"
 		@dragover="{{_onHeaderDragOver}}"
 		@drop="{{_onHeaderDrop}}"
@@ -23,12 +23,12 @@
 				<slot name="startOverflowButton"></slot>
 			{{else}}
 				<ui5-button
-					end-icon="{{overflowMenuIcon}}"
+					icon="{{overflowMenuIcon}}"
 					data-ui5-stable="overflow-start"
 					tabindex="-1"
 					tooltip="{{overflowMenuTitle}}"
-					.accessibilityAttributes="{{overflowBtnAccessibilityAttributes}}"
-				>{{this._startOverflowText}}</ui5-button>
+					aria-haspopup="menu"
+					icon-end>{{this._startOverflowText}}</ui5-button>
 			{{/if}}
 		</div>
 
@@ -56,12 +56,12 @@
 				<slot name="overflowButton"></slot>
 			{{else}}
 				<ui5-button
-					end-icon="{{overflowMenuIcon}}"
+					icon="{{overflowMenuIcon}}"
 					data-ui5-stable="overflow-end"
 					tabindex="-1"
 					tooltip="{{overflowMenuTitle}}"
-					.accessibilityAttributes="{{overflowBtnAccessibilityAttributes}}"
-				>{{this._endOverflowText}}</ui5-button>
+					aria-haspopup="menu"
+					icon-end>{{this._endOverflowText}}</ui5-button>
 			{{/if}}
 		</div>
 
@@ -75,7 +75,7 @@
 		{{> contentArea}}
 	{{/unless}}
 
-	{{#if hasItems}}
+	{{#if hasSubTabs}}
 		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
 	{{/if}}
 
@@ -96,5 +96,3 @@
 		</div>
 	</div>
 {{/inline}}
-
-{{>include "./TabContainerPopover.hbs"}}

package/src/TabContainerPopover.hbs

@@ -1,15 +1,14 @@
 <ui5-responsive-popover
 	id="{{_id}}-overflowMenu"
-	horizontal-align="End"
-	placement="Bottom"
+	horizontal-align="Right"
+	placement-type="Bottom"
 	content-only-on-desktop
 	hide-arrow
 	_hide-header
 	class="ui5-tab-container-responsive-popover"
-	@dragstart="{{_onDragStart}}"
 >
 	<ui5-list
-		selection-mode="Single"
+		mode="SingleSelect"
 		separators="None"
 		@ui5-item-click="{{_onOverflowListItemClick}}"
 		@ui5-move-over="{{_onPopoverListMoveOver}}"

package/src/TabInOverflow.hbs

@@ -1,7 +1,7 @@
 <ui5-li-custom
 	id="{{this._id}}-li"
 	class="{{this.overflowClasses}}"
-	style="{{this._forcedStyleInOverflow}}"
+	style="{{this.forcedStyle}}"
 	type="{{this.overflowState}}"
 	aria-disabled="{{this.effectiveDisabled}}"
 	aria-selected="{{this.effectiveSelected}}"

package/src/TabInStrip.hbs

@@ -4,8 +4,8 @@
 	role="tab"
 	aria-roledescription="{{_roleDescription}}"
 	aria-haspopup="{{_ariaHasPopup}}"
-	aria-posinset="{{this._forcedPosinset}}"
-	aria-setsize="{{this._forcedSetsize}}"
+	aria-posinset="{{this.forcedPosinset}}"
+	aria-setsize="{{this.forcedSetsize}}"
 	aria-controls="ui5-tc-content"
 	aria-selected="{{this.effectiveSelected}}"
 	aria-disabled="{{this.effectiveDisabled}}"
@@ -29,7 +29,7 @@
 	{{/if}}
 
 	<div class="ui5-tab-strip-itemContent">
-		{{#unless this._isInline}}
+		{{#unless this.isInline}}
 			{{> additionalText}}
 		{{/unless}}
 
@@ -59,7 +59,7 @@
 				tabindex="-1"
 				?disabled="{{disabled}}"
 				tooltip="{{expandButtonTitle}}"
-				.accessibilityAttributes="{{expandBtnAccessibilityAttributes}}">
+				aria-haspopup="Menu">
 			</ui5-button>
 		</div>
 	{{/if}}

package/src/TabSeparatorInOverflow.hbs

@@ -3,7 +3,7 @@
 	role="separator"
 	class="{{classes.root}}"
 	disabled
-	style="{{this._forcedStyleInOverflow}}"
+	style="{{this._style}}"
 	.realTabReference="{{this}}"
 >
 </ui5-li-custom>

package/src/Table.hbs

@@ -0,0 +1,122 @@
+<div
+	class="ui5-table-root"
+	@ui5-selection-requested="{{_handleSelect}}"
+	@ui5-_forward-after="{{_onForwardAfter}}"
+	@ui5-_forward-before="{{_onForwardBefore}}"
+	@focusin="{{_onfocusin}}"
+>
+	<div id="{{_id}}-before" tabindex="0" class="ui5-table-focusarea"></div>
+
+	{{#if busy}}
+		{{> busyRow}}
+	{{/if}}
+
+	<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table" aria-label="{{tableAriaLabelText}}">
+		<thead>
+			<tr
+				id="{{_columnHeader.id}}"
+				class="ui5-table-header-row"
+				aria-label="{{ariaLabelText}}"
+				tabindex="{{_columnHeader.forcedTabIndex}}"
+				@click="{{_onColumnHeaderClick}}"
+				@focusin="{{_onColumnHeaderFocused}}"
+				@keydown="{{_onColumnHeaderKeydown}}"
+			>
+				{{#if isMultiSelect}}
+					<th class="ui5-table-select-all-column" role="presentation" aria-hidden="true">
+						{{#if rows.length}}
+							<ui5-checkbox class="ui5-table-select-all-checkbox"
+								?checked="{{_allRowsSelected}}"
+								@ui5-change="{{_selectAll}}"
+								aria-label="{{ariaLabelSelectAllText}}"
+								tabindex="-1"
+							>
+							</ui5-checkbox>
+						{{/if}}
+					</th>
+				{{/if}}
+
+				{{#each visibleColumns}}
+					<slot name="{{this._individualSlot}}"></slot>
+				{{/each}}
+				<th class="ui5-table-header-row-navigated" aria-hidden="true"></th>
+			</tr>
+		</thead>
+
+		<tbody>
+			{{#each rows}}
+				<slot name="{{this._individualSlot}}"></slot>
+			{{/each}}
+
+			{{#unless rows.length}}
+				{{#unless hideNoData}}
+					<tr class="ui5-table-no-data-row-root">
+						<td colspan="{{visibleColumnsCount}}" role="cell" style="width: 100%">
+
+							<div class="ui5-table-no-data-row">
+								<span>{{noDataText}}</span>
+							</div>
+						</td>
+					</tr>
+				{{/unless}}
+			{{/unless}}
+
+			{{#if growsWithButton}}
+				{{> moreRow}}
+			{{/if}}
+
+			{{#if growsOnScroll}}
+				{{> tableEndRow}}
+			{{/if}}
+		</tbody>
+	</table>
+
+	<div id="{{_id}}-after" tabindex="0" class="ui5-table-focusarea"></div>
+</div>
+
+{{#*inline "moreRow"}}
+<tr>
+	<td colspan="{{visibleColumnsCount}}">
+		<div growing-button>
+			<div
+				id="{{_id}}-growingButton"
+				tabindex="0"
+				role="button"
+				aria-labelledby="{{loadMoreAriaLabelledBy}}"
+				?active="{{_loadMoreActive}}"
+				@click="{{_onLoadMoreClick}}"
+				@keydown="{{_onLoadMoreKeydown}}"
+				@keyup="{{_onLoadMoreKeyup}}"
+				growing-button-inner
+			>
+				<span id="{{_id}}-growingButton-text" growing-button-text>{{_growingButtonText}}</span>
+
+				{{#if growingButtonSubtext}}
+					<span id="{{_id}}-growingButton-subtext" growing-button-subtext>{{growingButtonSubtext}}</span>
+				{{/if}}
+			</div>
+		</div>
+	</td>
+</tr>
+{{/inline}}
+
+{{#*inline "tableEndRow"}}
+	<tr tabindex="-1" class="ui5-table-end-row">
+		<td tabindex="-1">
+			<span tabindex="-1" aria-hidden="true" class="ui5-table-end-marker"></span>
+		</td>
+	</tr>
+{{/inline}}
+
+{{#*inline "busyRow"}}
+	<div tabindex="-1" class="ui5-table-busy-row">
+		<ui5-busy-indicator
+			delay="{{busyDelay}}"
+			class="ui5-table-busy-ind"
+			style="{{styles.busy}}"
+			active
+			size="Medium"
+			data-sap-focus-ref
+		></ui5-busy-indicator>
+	</div>
+{{/inline}}

package/src/TableCell.hbs

@@ -0,0 +1,7 @@
+<td
+	tabindex="-1"
+	part="cell"
+	role="cell"
+>
+	<slot></slot>
+</td>

package/src/TableColumn.hbs

@@ -0,0 +1,7 @@
+<th
+	scope="col"
+	part="column"
+	role="columnheader"
+>
+	<slot></slot>
+</th>

package/src/TableGroupRow.hbs

@@ -0,0 +1,11 @@
+<tr
+	class="ui5-table-group-row-root"
+	part="group-row"
+	aria-label={{ariaLabelText}}
+	tabindex="{{forcedTabIndex}}"
+	@focusin="{{_onfocusin}}"
+>
+	<td colspan={{colSpan}}>
+		<slot></slot>
+	</td>
+</tr>

package/src/TableRow.hbs

@@ -0,0 +1,85 @@
+<tr
+	class="ui5-table-row-root"
+	tabindex="{{forcedTabIndex}}"
+	@focusin="{{_onfocusin}}"
+	@focusout="{{_onfocusout}}"
+	@click="{{_onrowclick}}"
+	@keydown="{{_onkeydown}}"
+	@keyup="{{_onkeyup}}"
+	@mouseup="{{_onmouseup}}"
+	@touchstart="{{_ontouchstart}}"
+	@touchend="{{_ontouchend}}"
+	aria-label="{{ariaLabelText}}"
+	aria-selected="{{this.selected}}"
+	aria-current="{{_ariaCurrent}}"
+	data-sap-focus-ref
+	part="row"
+>
+
+	{{#if isMultiSelect}}
+		<td
+			class="ui5-table-multi-select-cell"
+			aria-hidden="true"
+			role="presentation"
+		>
+			<ui5-checkbox
+				class="ui5-multi-select-checkbox"
+				?checked="{{this.selected}}"
+				aria-label="{{ariaLabelRowSelection}}"
+				@ui5-change="{{_handleSelection}}"
+				tabindex="-1"
+			>
+			</ui5-checkbox>
+		</td>
+	{{/if}}
+
+	{{#if shouldPopin}}
+		{{#each visibleCells}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/each}}
+	{{else}}
+		{{#each cells}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/each}}
+	{{/if}}
+
+	<td class="ui5-table-row-navigated" aria-hidden="true">
+		<div class="ui5-table-div-navigated"></div>
+	</td>
+</tr>
+
+{{#if shouldPopin}}
+	{{#each popinCells}}
+		<tr part="popin-row" class="{{this.classes}}"
+			@click="{{../_onrowclick}}"
+			@keydown="{{../_onkeydown}}"
+			@keyup="{{../_onkeyup}}">
+			<td colspan="{{../visibleCellsCount}}" role="cell">
+				{{#if popinDisplayInline}}
+					<div class="ui5-table-display-inline-container">
+						{{#if this.popinText}}
+							<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
+						{{/if}}
+						<span class="ui5-table-cell-display-inline">
+							<slot name="{{this.cell._individualSlot}}"></slot>
+						</span>
+					</div>
+				{{else}}
+					{{#if this.popinText}}
+						<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
+					{{/if}}
+					<div>
+						<slot name="{{this.cell._individualSlot}}"></slot>
+					</div>
+				{{/if}}
+			</td>
+
+			<td class="ui5-table-row-navigated" aria-hidden="true">
+				<div class="ui5-table-div-navigated"></div>
+			</td>
+		</tr>
+	{{/each}}
+{{/if}}
+
+
+

package/src/TextArea.hbs

@@ -46,8 +46,8 @@
 	{{#if hasValueState}}
 		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
 	{{/if}}
+
+	<slot name="formSupport"></slot>
 </div>
 
 {{#*inline "afterTextarea"}}{{/inline}}
-
-{{>include "./TextAreaPopover.hbs"}}

package/src/TextAreaPopover.hbs

@@ -3,10 +3,10 @@
 		skip-registry-update
 		prevent-focus-restore
 		hide-arrow
-		prevent-initial-focus
+		_disable-initial-focus
 		class="ui5-valuestatemessage-popover"
 		style="{{styles.valueStateMsgPopover}}"
-		placement="Bottom"
+		placement-type="Bottom"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="ui5-valuestatemessage-root {{classes.valueStateMsg}}">

package/src/TimePicker.hbs

@@ -34,11 +34,10 @@
 			tabindex="-1"
 			show-tooltip
 			@click="{{togglePicker}}"
+			input-icon
 			?pressed="{{_isPickerOpen}}"
-			class="ui5-time-picker-input-icon-button inputIcon"
+			class="ui5-time-picker-input-icon-button"
 		></ui5-icon>
 	{{/unless}}
 	</ui5-input>
 </div>
-
-{{>include "./TimePickerPopover.hbs"}}

package/src/TimePickerPopover.hbs

@@ -1,13 +1,14 @@
 <ui5-responsive-popover
 	id="{{_id}}-responsive-popover"
 	class="ui5-time-picker-popover"
-	placement="Bottom"
-	horizontal-align="Start"
+	placement-type="Bottom"
+	horizontal-align="Left"
 	allow-target-overlap
 	_hide-header
 	hide-arrow
-	@ui5-open="{{onResponsivePopoverAfterOpen}}"
-	@ui5-close="{{onResponsivePopoverAfterClose}}"
+	accessible-name="{{pickerAccessibleName}}"
+	@ui5-after-open="{{onResponsivePopoverAfterOpen}}"
+	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
 	@wheel="{{_handleWheel}}"
 	@keydown="{{_onkeydown}}"
 >
@@ -20,7 +21,7 @@
 		@close-picker="{{submitPickers}}"
 	></ui5-time-selection-clocks>
 
-	<div slot="footer" class="ui5-time-picker-footer">
+	<div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
 		<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
 		<ui5-button id="close" design="Transparent" @click="{{closePicker}}">{{cancelButtonLabel}}</ui5-button>
 	</div>
@@ -30,13 +31,13 @@
 <ui5-popover
 	id="{{_id}}-popover"
 	class="ui5-time-picker-inputs-popover"
-	placement="Bottom"
-	horizontal-align="Start"
+	placement-type="Bottom"
+	horizontal-align="Left"
 	allow-target-overlap
 	_hide-header
 	hide-arrow
-	@ui5-open="{{onInputsPopoverAfterOpen}}"
-	@ui5-close="{{onInputsPopoverAfterClose}}"
+	@ui5-after-open="{{onInputsPopoverAfterOpen}}"
+	@ui5-after-close="{{onInputsPopoverAfterClose}}"
 	@wheel="{{_handleWheel}}"
 	@keydown="{{_onkeydown}}"
 >
@@ -50,7 +51,7 @@
 		></ui5-time-selection-inputs>
 	</div>
 
-	<div slot="footer" class="ui5-time-picker-footer">
+	<div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
 		<ui5-button id="submitInputs" design="Emphasized" @click="{{submitInputsPopover}}">{{submitButtonLabel}}</ui5-button>
 		<ui5-button id="closeInputs" design="Transparent" @click="{{closeInputsPopover}}">{{cancelButtonLabel}}</ui5-button>
 	</div>