@ui5/webcomponents 0.0.0-306572ffa → 0.0.0-31ad69297

package/src/SliderBase.hbs

@@ -0,0 +1,47 @@
+<div
+	class="ui5-slider-root {{classes.root}}"
+	@mousedown="{{_onmousedown}}"
+	@touchstart="{{_ontouchstart}}"
+	@mouseover="{{_onmouseover}}"
+	@mouseout="{{_onmouseout}}"
+	@keydown="{{_onkeydown}}"
+	@keyup="{{_onkeyup}}"
+	part="root-container"
+>
+	{{> handlesAriaText}}
+
+	<div class="ui5-slider-inner">
+		{{#if step}}
+			{{#if showTickmarks}}
+				<ul class="ui5-slider-tickmarks">
+					{{#each tickmarksObject}}
+						{{#if this}}
+							<li class="ui5-slider-tickmark ui5-slider-tickmark-in-range"></li>
+						{{else}}
+							<li class="ui5-slider-tickmark"></li>
+						{{/if}}
+					{{/each}}
+				</ul>
+				{{#if labelInterval}}
+					<ul class="ui5-slider-labels {{classes.labelContainer}}" style="{{styles.labelContainer}}">
+						{{#each _labels}}
+							<li style="{{../styles.label}}">{{this}}</li>
+						{{/each}}
+					</ul>
+				{{/if}}
+			{{/if}}
+		{{/if}}
+
+		{{> progressBar}}
+
+		{{> handles}}
+	</div>
+
+	<span id="{{_id}}-accName" class="ui5-hidden-text">{{accessibleName}}</span>
+	<span id="{{_id}}-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
+</div>
+
+
+{{#*inline "handlesAriaText"}}{{/inline}}
+{{#*inline "progressBar"}}{{/inline}}
+{{#*inline "handles"}}{{/inline}}

package/src/SplitButton.hbs

@@ -0,0 +1,49 @@
+<div
+	class="ui5-split-button-root"
+	role="group"
+	tabindex={{_tabIndex}}
+	aria-labelledby="{{_id}}-invisibleTextDefault {{_id}}-invisibleText"
+	@focusout={{_onFocusOut}}
+	@focusin={{_onFocusIn}}
+	@keydown={{_onKeyDown}}
+	@keyup={{_onKeyUp}}
+>
+
+	<ui5-button
+		class="ui5-split-text-button"
+		design="{{design}}"
+		icon="{{_textButtonIcon}}"
+		tabindex="-1"
+		?disabled="{{disabled}}"
+		?active="{{_textButtonActive}}"
+		@click="{{_handleMouseClick}}"
+		@touchstart={{_textButtonPress}}
+		@mousedown={{_textButtonPress}}
+		@mouseup={{_textButtonRelease}}
+		@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}}"
+			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>
+
+</div>

package/src/StandardListItem.hbs

@@ -1,36 +1,50 @@
 {{>include "./ListItem.hbs"}}
 
 {{#*inline "listItemContent"}}
-	<div class="ui5-li-title-wrapper">
-		{{#if textContent.length}}
-			<span part="title" class="ui5-li-title"><slot></slot></span>
-		{{/if}}
+	<div class="ui5-li-text-wrapper">
+		<span part="title" class="ui5-li-title"><slot></slot></span>
 		{{#if description}}
-			<span part="description" class="ui5-li-desc">{{description}}</span>
+			<div class="ui5-li-description-info-wrapper">
+				<span part="description" class="ui5-li-desc">{{description}}</span>
+
+				{{#if additionalText}}
+					<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+				{{/if}}
+			</div>
 		{{/if}}
 		{{#unless typeActive}}
 			<span class="ui5-hidden-text">{{type}}</span>
 		{{/unless}}
 	</div>
-	{{#if info}}
-		<span part="info" class="ui5-li-info">{{info}}</span>
-	{{/if}}
+	{{#unless description}}
+		{{#if additionalText}}
+			<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+		{{/if}}
+	{{/unless}}
 {{/inline}}
 
 {{#*inline "imageBegin"}}
-	{{#if displayImage}}
-		<ui5-avatar image="{{image}}" image-fit-type="Contain" shape="Square" class="ui5-li-img"></ui5-avatar>
+	{{#if hasImageContent}}
+		<div class="ui5-li-imgContent" >
+			<slot name="imageContent"></slot>
+		</div>
+	{{else}}
+		{{#if displayImage}}
+			<ui5-avatar shape="Square" class="ui5-li-img">
+				<img src="{{image}}" class="ui5-li-img-inner" />
+			</ui5-avatar>
+		{{/if}}
 	{{/if}}
 {{/inline}}
 
 {{#*inline "iconBegin"}}
 	{{#if displayIconBegin}}
-		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon"></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"></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

@@ -0,0 +1,81 @@
+<div
+	id="{{_id}}"
+	class="ui5-step-input-root"
+	@keydown="{{_onkeydown}}"
+	@focusin="{{_onfocusin}}"
+	@focusout="{{_onfocusout}}"
+>
+	{{! Decrement Icon}}
+	{{#unless readonly}}
+	<div
+		class="ui5-step-icon ui5-step-dec"
+		title="{{decIconTitle}}"
+	>
+
+		<ui5-icon
+			id="{{_id}}-dec"
+			name="{{decIconName}}"
+			tabindex="-1"
+			accessible-name="{{decIconTitle}}"
+			@click="{{_decValue}}"
+			@focusout="{{_onButtonFocusOut}}"
+			@mousedown="{{_decSpin}}"
+			@mouseup="{{_resetSpin}}"
+			@mouseout="{{_resetSpinOut}}"
+			input-icon
+			show-tooltip
+			?clickable="{{_decIconClickable}}"
+		></ui5-icon>
+	</div>
+	{{/unless}}
+
+	{{! INPUT}}
+	<ui5-input
+			id="{{_id}}-inner"
+			class="ui5-step-input-input"
+			placeholder="{{placeholder}}"
+			type="{{type}}"
+			value="{{_displayValue}}"
+			?disabled="{{disabled}}"
+			?required="{{required}}"
+			?readonly="{{readonly}}"
+			value-state="{{valueState}}"
+			data-sap-focus-ref
+			._inputAccInfo ="{{accInfo}}"
+			._nativeInputAttributes="{{inputAttributes}}"
+			@ui5-change="{{_onInputChange}}"
+			@focusout="{{_onInputFocusOut}}"
+			@focusin="{{_onInputFocusIn}}"
+	>
+
+		{{#if valueStateMessage.length}}
+			<slot name="valueStateMessage" slot="valueStateMessage"></slot>
+		{{/if}}
+
+	</ui5-input>
+
+	{{! Increment Icon}}
+	{{#unless readonly}}
+	<div
+		class="ui5-step-icon ui5-step-inc"
+		title="{{incIconTitle}}"
+	>
+		<ui5-icon
+			id="{{_id}}-inc"
+			name="{{incIconName}}"
+			tabindex="-1"
+			accessible-name="{{incIconTitle}}"
+			@click="{{_incValue}}"
+			@focusout="{{_onButtonFocusOut}}"
+			@mousedown="{{_incSpin}}"
+			@mouseup="{{_resetSpin}}"
+			@mouseout="{{_resetSpinOut}}"
+			input-icon
+			show-tooltip
+			?clickable="{{_incIconClickable}}"
+		></ui5-icon>
+	</div>
+	{{/unless}}
+	<slot name="formSupport"></slot>
+
+</div>

package/src/SuggestionListItem.hbs

@@ -1,25 +1,33 @@
 {{>include "./StandardListItem.hbs"}}
 
 {{#*inline "listItemContent"}}
-	<div class="ui5-li-title-wrapper">
+	<div class="ui5-li-text-wrapper">
 		{{#if hasTitle}}
 			<span part="title" class="ui5-li-title"><slot></slot></span>
 		{{/if}}
 		{{#if hasDescription}}
-			<span part="description" class="ui5-li-desc">
-				{{#if richDescription.length}}
-					<slot name="richDescription"></slot>
-				{{else}}
-					{{description}}
+			<div class="ui5-li-description-info-wrapper">
+				<span part="description" class="ui5-li-desc">
+					{{#if richDescription.length}}
+						<slot name="richDescription"></slot>
+					{{else}}
+						{{description}}
+					{{/if}}
+				</span>
+
+				{{#if additionalText}}
+					<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
 				{{/if}}
-			</span>
+			</div>
 		{{/if}}
 		{{#unless typeActive}}
 			<span class="ui5-hidden-text">{{type}}</span>
 		{{/unless}}
 	</div>
-	{{#if info}}
-		<span part="info" class="ui5-li-info">{{info}}</span>
-	{{/if}}
+	{{#unless hasDescription}}
+		{{#if additionalText}}
+			<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+		{{/if}}
+	{{/unless}}
 {{/inline}}
 

package/src/Switch.hbs

@@ -1,34 +1,51 @@
 <div
 	class="ui5-switch-root {{classes.main}}"
-	role="checkbox"
+	role="switch"
+	aria-label="{{ariaLabelText}}"
 	aria-checked="{{checked}}"
-	aria-disabled="{{ariaDisabled}}"
-	aria-labelledby="{{_id}}-hiddenText"
+	aria-disabled="{{effectiveAriaDisabled}}"
+	aria-required="{{required}}"
 	@click="{{_onclick}}"
 	@keyup="{{_onkeyup}}"
 	@keydown="{{_onkeydown}}"
-	tabindex="{{tabIndex}}"
-	dir="{{effectiveDir}}"
+	tabindex="{{effectiveTabIndex}}"
+	title="{{tooltip}}"
 >
 	<div class="ui5-switch-inner">
 		<div class="ui5-switch-track" part="slider">
 			<div class="ui5-switch-slider">
 				{{#if graphical}}
 					<span class="ui5-switch-text ui5-switch-text--on">
-						<ui5-icon name="accept" dir="ltr" class="ui5-switch-icon-on"></ui5-icon>
+						<ui5-icon name="accept" class="ui5-switch-icon-on"></ui5-icon>
 					</span>
 					<span class="ui5-switch-text ui5-switch-text--off">
 						<ui5-icon name="decline" class="ui5-switch-icon-off"></ui5-icon>
 					</span>
 				{{else}}
-					<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
-					<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{#if hasNoLabel}}
+						<span class="ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon" part="text-on">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-on" ></ui5-icon>
+						</span>
+						<span class="ui5-switch-text ui5-switch-text--off ui5-switch-no-label-icon" part="text-off">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-off" ></ui5-icon>
+						</span>
+					{{else}}
+						<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
+						<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{/if}}
 				{{/if}}
 
-				<span class="ui5-switch-handle" part="handle"></span>
+				<span class="ui5-switch-handle" part="handle">
+					{{!-- this icon is used in the sap_horizon_exp theme --}}
+					<ui5-icon
+						name="{{sapNextIcon}}"
+						class="ui5-switch-handle-icon"
+					></ui5-icon>
+				</span>
 			</div>
 		</div>
 	</div>
+
 	<input type='checkbox' ?checked="{{checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
-	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{hiddenText}}</span>
+	<slot name="formSupport"></slot>
 </div>

package/src/Tab.hbs

@@ -1,3 +1,9 @@
-<div id="{{_id}}" class="ui5-tab-root">
-	<slot></slot>
+<div id="{{_id}}"
+	class="ui5-tab-root"
+	data-ui5-stable="{{this.stableDomRef}}">
+	<slot name="{{this._defaultSlotName}}"></slot>
+
+	{{#each tabs}}
+	<slot name="{{this._effectiveSlotName}}"></slot>
+	{{/each}}
 </div>

package/src/TabContainer.hbs

@@ -1,69 +1,98 @@
-<div
-	class="{{classes.root}}"
-	dir="{{effectiveDir}}"
->
+<div class="{{classes.root}}">
 	{{#if tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/if}}
+	<div
+		class="{{classes.header}}"
+		id="{{_id}}-header"
+		@focusin="{{_onHeaderFocusin}}"
+		@dragstart="{{_onHeaderDragStart}}"
+		@dragenter="{{_onHeaderDragEnter}}"
+		@dragover="{{_onHeaderDragOver}}"
+		@drop="{{_onHeaderDrop}}"
+		@dragleave="{{_onHeaderDragLeave}}"
+		part="tabstrip"
+	>
+		<div
+			class="ui5-tc__overflow ui5-tc__overflow--start"
+			@click="{{_onOverflowClick}}"
+			@keydown="{{_onOverflowKeyDown}}"
+			hidden
+		>
+			{{#if startOverflowButton.length}}
+				<slot name="startOverflowButton"></slot>
+			{{else}}
+				<ui5-button
+					icon="{{overflowMenuIcon}}"
+					data-ui5-stable="overflow-start"
+					tabindex="-1"
+					tooltip="{{overflowMenuTitle}}"
+					aria-haspopup="menu"
+					icon-end>{{this._startOverflowText}}</ui5-button>
+			{{/if}}
+		</div>
 
-	<div class="{{classes.header}}" id="{{_id}}-header">
-		<ui5-icon @click="{{_onHeaderBackArrowClick}}" class="{{classes.headerBackArrow}}" name="slim-arrow-left" tabindex="-1" accessible-name="{{previousIconACCName}}" show-tooltip></ui5-icon>
-
-		<!-- tab items -->
-		<div class="{{classes.headerScrollContainer}}" id="{{_id}}-headerScrollContainer">
-			<ul
-				role="tablist"
-				class="{{classes.headerList}}"
-				@click="{{_onHeaderClick}}"
-				@keydown="{{_onHeaderKeyDown}}"
-				@keyup="{{_onHeaderKeyUp}}"
-			>
-				{{#each items}}
-					{{#unless this.isSeparator}}
-						{{this.stripPresentation}}
-					{{/unless}}
-					{{#if this.isSeparator}}
-						<li id="{{this._id}}" role="separator" class="{{../classes.separator}}" style="list-style-type: none;"></li>
-					{{/if}}
-				{{/each}}
-			</ul>
+		<div
+			id="{{_id}}-tabStrip"
+			class="{{classes.tabStrip}}"
+			role="tablist"
+			aria-describedby="{{tablistAriaDescribedById}}"
+			@click="{{_onTabStripClick}}"
+			@keydown="{{_onTabStripKeyDown}}"
+			@keyup="{{_onTabStripKeyUp}}"
+		>
+			{{#each items}}
+				{{this.stripPresentation}}
+			{{/each}}
 		</div>
 
-		<ui5-icon @click="{{_onHeaderForwardArrowClick}}" class="{{classes.headerForwardArrow}}" name="slim-arrow-right" tabindex="-1" accessible-name="{{nextIconACCName}}" show-tooltip></ui5-icon>
+		<div
+			class="ui5-tc__overflow ui5-tc__overflow--end"
+			@click="{{_onOverflowClick}}"
+			@keydown="{{_onOverflowKeyDown}}"
+			hidden
+		>
+			{{#if overflowButton.length}}
+				<slot name="overflowButton"></slot>
+			{{else}}
+				<ui5-button
+					icon="{{overflowMenuIcon}}"
+					data-ui5-stable="overflow-end"
+					tabindex="-1"
+					tooltip="{{overflowMenuTitle}}"
+					aria-haspopup="menu"
+					icon-end>{{this._endOverflowText}}</ui5-button>
+			{{/if}}
+		</div>
 
-		<!-- overflow button -->
-		{{#if showOverflow}}
-			<ui5-button
-				@click="{{_onOverflowButtonClick}}"
-				class="{{classes.overflowButton}}"
-				icon="{{overflowMenuIcon}}"
-				design="Transparent"
-				aria-label="{{overflowMenuTitle}}"
-				aria-haspopup="true"
-			></ui5-button>
-		{{/if}}
+		<ui5-drop-indicator
+			orientation="Vertical"
+			.ownerReference="{{this}}"
+		></ui5-drop-indicator>
 	</div>
 
 	{{#unless tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/unless}}
 
+	{{#if hasSubTabs}}
+		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
+	{{/if}}
+
 </div>
 
 {{#*inline "contentArea"}}
-	<div class="{{classes.content}}">
-		{{#each items}}
-			{{#unless this.isSeparator}}
-				<div
-					class="ui5-tc__contentItem"
-					id="ui5-tc-contentItem-{{this._posinset}}"
-					?hidden="{{this.effectiveHidden}}"
-					role="tabpanel"
-					aria-labelledby="{{this._id}}"
-				>
-					<slot name="{{this._individualSlot}}"></slot>
-				</div>
-			{{/unless}}
-		{{/each}}
+	<div class="{{classes.content}}" part="content">
+		<div
+			class="ui5-tc__contentItem"
+			id="ui5-tc-content"
+			?hidden="{{this._selectedTab.effectiveHidden}}"
+			role="tabpanel"
+			aria-labelledby="{{this._selectedTab._id}}"
+		>
+			{{#each items}}
+				<slot name="{{this._effectiveSlotName}}"></slot>
+			{{/each}}
+		</div>
 	</div>
 {{/inline}}

package/src/TabContainerPopover.hbs

@@ -3,21 +3,25 @@
 	horizontal-align="Right"
 	placement-type="Bottom"
 	content-only-on-desktop
-	with-padding
-	no-arrow
+	hide-arrow
 	_hide-header
+	class="ui5-tab-container-responsive-popover"
 >
-	<ui5-list @ui5-item-press="{{_onOverflowListItemSelect}}">
-		{{#each items}}
-			{{#unless this.isSeparator}}
-				{{this.overflowPresentation}}
-			{{/unless}}
+	<ui5-list
+		mode="SingleSelect"
+		separators="None"
+		@ui5-item-click="{{_onOverflowListItemClick}}"
+		@ui5-move-over="{{_onPopoverListMoveOver}}"
+		@ui5-move="{{_onPopoverListMove}}"
+	>
+		{{#each _popoverItemsFlat}}
+			{{overflowPresentation}}
 		{{/each}}
 	</ui5-list>
 	<div slot="footer" class="ui5-responsive-popover-footer">
 		<ui5-button
 			design="Transparent"
-			@click="{{_closeRespPopover}}"
-		>Cancel</ui5-button>
+			@click="{{_closePopover}}"
+		>{{popoverCancelButtonText}}</ui5-button>
 	</div>
-</ui5-responsive-popover>
+</ui5-responsive-popover>

package/src/TabInOverflow.hbs

@@ -1,22 +1,30 @@
 <ui5-li-custom
-	id="{{this._id}}"
+	id="{{this._id}}-li"
 	class="{{this.overflowClasses}}"
+	style="{{this.forcedStyle}}"
 	type="{{this.overflowState}}"
-	?selected="{{this.effectiveSelected}}"
-	?disabled="{{this.effectiveDisabled}}"
 	aria-disabled="{{this.effectiveDisabled}}"
 	aria-selected="{{this.effectiveSelected}}"
-	aria-labelledby="{{this.ariaLabelledBy}}"
+	?movable="{{this.movable}}"
+	.realTabReference="{{this}}"
 >
-	<div class="ui5-tab-overflow-itemContent">
-		{{#if this.icon}}
-			<ui5-icon name="{{this.icon}}"></ui5-icon>
-		{{/if}}
-
-		{{this.text}}
-
-		{{#if this.additionalText}}
-			({{this.additionalText}})
-		{{/if}}
+	<div class="ui5-tab-overflow-itemContent-wrapper">
+		<div class="ui5-tab-overflow-itemContent">
+			{{#if this.semanticIconName}}
+				<ui5-icon class="{{this.semanticIconClasses}}" name="{{this.semanticIconName}}"></ui5-icon>
+			{{/if}}
+			{{#if this.icon}}
+				<ui5-icon name="{{this.icon}}"></ui5-icon>
+			{{/if}}
+			{{this.text}}
+			{{#if this.additionalText}}
+				({{this.additionalText}})
+			{{/if}}
+			{{#if this._designDescription}}
+				<div id="{{this._id}}-designDescription" class="ui5-hidden-text">
+					{{this._designDescription}}
+				</div>
+			{{/if}}
+		</div>
 	</div>
 </ui5-li-custom>