@ui5/webcomponents 0.0.0-c6d8872f3 → 0.0.0-c8721b8d2

package/src/SelectMenu.hbs

@@ -0,0 +1,57 @@
+<ui5-responsive-popover
+	class="ui5-select-menu"
+	placement-type="Bottom"
+	horizontal-align="Left"
+	@ui5-after-open="{{_onAfterOpen}}"
+	@ui5-after-close="{{_onAfterClose}}"
+	@ui5-before-open="{{_onBeforeOpen}}"
+	hide-arrow
+	_disable-initial-focus
+	style={{styles.responsivePopover}}
+	>
+		{{#if _isPhone}}
+			<div slot="header" class="ui5-responsive-popover-header">
+				<div class="row">
+					<span>{{_headerTitleText}}</span>
+					<ui5-button
+						class="ui5-responsive-popover-close-btn"
+						icon="decline"
+						design="Transparent"
+						@click="{{_onCloseBtnClick}}"
+					>
+					</ui5-button>
+				</div>
+				{{#if hasValueState}}
+					<div class="{{classes.popoverValueState}} row ui5-select-value-state-dialog-header">
+						{{> valueStateMessage}}
+					</div>
+				{{/if}}
+			</div>
+		{{/if}}
+		{{#unless _isPhone}}
+				{{#if hasValueState}}
+					<div class="{{classes.popoverValueState}}" style={{styles.valueStatePopover}}>
+						<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+						{{> valueStateMessage}}
+					</div>
+				{{/if}}
+		{{/unless}}
+
+		<ui5-list 
+			mode="SingleSelect"
+			separators="None"
+			@ui5-item-click="{{_onOptionClick}}">
+					<slot></slot>
+		</ui5-list>
+</ui5-responsive-popover>
+
+
+{{#*inline "valueStateMessage"}}
+	{{#if hasValueStateSlot}}
+		{{#each valueStateMessageText}}
+			{{this}}
+		{{/each}}
+	{{else}}
+		{{ valueStateText }}
+	{{/if}}
+{{/inline}}

package/src/SelectPopover.hbs

@@ -0,0 +1,91 @@
+{{#if options}}
+	<ui5-responsive-popover
+		hide-arrow
+		_disable-initial-focus
+		placement-type="Bottom"
+		class="ui5-select-popover {{classes.popover}}"
+		horizontal-align="Left"
+		@ui5-after-open="{{_afterOpen}}"
+		@ui5-before-open="{{_beforeOpen}}"
+		@ui5-after-close="{{_afterClose}}"
+		@keydown="{{_onkeydown}}"
+		style={{styles.responsivePopover}}
+	>
+		{{#if _isPhone}}
+			<div slot="header" class="ui5-responsive-popover-header">
+				<div class="row">
+					<span>{{_headerTitleText}}</span>
+					<ui5-button
+						class="ui5-responsive-popover-close-btn"
+						icon="decline"
+						design="Transparent"
+						@click="{{_toggleRespPopover}}"
+					>
+					</ui5-button>
+				</div>
+				{{#if hasValueStateText}}
+					<div class="{{classes.popoverValueState}} row ui5-select-value-state-dialog-header">
+						{{> valueStateMessage}}
+					</div>
+				{{/if}}
+			</div>
+		{{/if}}
+		{{#unless _isPhone}}
+			{{#if hasValueStateText}}
+				<div class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+					{{> valueStateMessage}}
+				</div>
+			{{/if}}
+		{{/unless}}
+
+		<ui5-list
+			mode="SingleSelectAuto"
+			separators="None"
+			@mousedown="{{_itemMousedown}}"
+			@ui5-item-click="{{_handleItemPress}}"
+		>
+			{{#each _syncedOptions}}
+				<ui5-li
+					id="{{this.id}}-li"
+					icon="{{this.icon}}"
+					?selected="{{this.selected}}"
+					?focused="{{this._focused}}"
+					title="{{this.title}}"
+					additional-text="{{this.additionalText}}"
+					?aria-selected="{{this.selected}}"
+					data-ui5-stable="{{this.stableDomRef}}"
+				>
+					{{this.textContent}}
+				</ui5-li>
+			{{/each}}
+		</ui5-list>
+	</ui5-responsive-popover>
+{{/if}}
+
+{{#if shouldOpenValueStateMessagePopover}}
+	<ui5-popover
+		skip-registry-update
+		_disable-initial-focus
+		prevent-focus-restore
+		hide-arrow
+		class="ui5-valuestatemessage-popover"
+		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>
+			{{> valueStateMessage}}
+		</div>
+	</ui5-popover>
+{{/if}}
+
+{{#*inline "valueStateMessage"}}
+	{{#if shouldDisplayDefaultValueStateMessage}}
+		{{valueStateText}}
+	{{else}}
+		{{#each valueStateMessageText}}
+			{{this}}
+		{{/each}}
+	{{/if}}
+{{/inline}}

package/src/Slider.hbs

@@ -0,0 +1,42 @@
+{{>include "./SliderBase.hbs"}}
+
+{{#*inline "progressBar"}}
+	<div
+		class="ui5-slider-progress-container"
+		aria-hidden="true"
+		part="progress-container"
+	>
+		<div class="ui5-slider-progress"
+			style="{{styles.progress}}"
+			@focusout="{{_onfocusout}}"
+			@focusin="{{_onfocusin}}"
+			tabindex="-1"
+			part="progress-bar"
+		></div>
+	</div>
+{{/inline}}
+
+{{#*inline "handles"}}
+	<div class="ui5-slider-handle"
+		style="{{styles.handle}}"
+		@focusout="{{_onfocusout}}"
+		@focusin="{{_onfocusin}}"
+		role="slider"
+		tabindex="{{_tabIndex}}"
+		aria-orientation="horizontal"
+		aria-valuemin="{{min}}"
+		aria-valuemax="{{max}}"
+		aria-valuenow="{{value}}"
+		aria-labelledby="{{_ariaLabelledByHandleRefs}}"
+		aria-disabled="{{_ariaDisabled}}"
+		data-sap-focus-ref
+		part="handle"
+	>
+			<ui5-icon name="direction-arrows" part="icon-slider" slider-icon></ui5-icon>
+		{{#if showTooltip}}
+			<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
+				<span class="ui5-slider-tooltip-value">{{tooltipValue}}</span>
+			</div>
+		{{/if}}
+	</div>
+{{/inline}}

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,57 @@
+<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}}"
+		dir={{effectiveDir}}
+		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>
+
+	<div
+		class="ui5-split-arrow-button-wrapper"
+		dir={{effectiveDir}}
+	>
+		<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>
+	</div>
+
+	<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

@@ -0,0 +1,50 @@
+{{>include "./ListItem.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<div class="ui5-li-text-wrapper">
+		<span part="title" class="ui5-li-title"><slot></slot></span>
+		{{#if description}}
+			<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>
+	{{#unless description}}
+		{{#if additionalText}}
+			<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+		{{/if}}
+	{{/unless}}
+{{/inline}}
+
+{{#*inline "imageBegin"}}
+	{{#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" accessible-role="presentation" aria-hidden="true"></ui5-icon>
+	{{/if}}
+{{/inline}}
+
+{{#*inline "iconEnd"}}
+	{{#if displayIconEnd}}
+		<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="{{_valuePrecisioned}}"
+			?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

@@ -0,0 +1,33 @@
+{{>include "./StandardListItem.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<div class="ui5-li-text-wrapper">
+		{{#if hasTitle}}
+			<span part="title" class="ui5-li-title"><slot></slot></span>
+		{{/if}}
+		{{#if hasDescription}}
+			<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}}
+			</div>
+		{{/if}}
+		{{#unless typeActive}}
+			<span class="ui5-hidden-text">{{type}}</span>
+		{{/unless}}
+	</div>
+	{{#unless hasDescription}}
+		{{#if additionalText}}
+			<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+		{{/if}}
+	{{/unless}}
+{{/inline}}
+

package/src/Switch.hbs

@@ -0,0 +1,52 @@
+<div
+	class="ui5-switch-root {{classes.main}}"
+	role="switch"
+	aria-label="{{ariaLabelText}}"
+	aria-checked="{{checked}}"
+	aria-disabled="{{effectiveAriaDisabled}}"
+	aria-required="{{required}}"
+	@click="{{_onclick}}"
+	@keyup="{{_onkeyup}}"
+	@keydown="{{_onkeydown}}"
+	tabindex="{{effectiveTabIndex}}"
+	dir="{{effectiveDir}}"
+	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" 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}}
+					{{#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 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">
+					{{!-- 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/>
+	<slot name="formSupport"></slot>
+</div>

package/src/Tab.hbs

@@ -0,0 +1,9 @@
+<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

@@ -0,0 +1,88 @@
+<div class="{{classes.root}}">
+	{{#if tabsAtTheBottom}}
+		{{> contentArea}}
+	{{/if}}
+	<div
+		class="{{classes.header}}"
+		id="{{_id}}-header"
+		@focusin="{{_onHeaderFocusin}}"
+		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
+			id="{{_id}}-tabStrip"
+			class="{{classes.tabStrip}}"
+			role="tablist"
+			aria-describedby="{{tablistAriaDescribedById}}"
+			@click="{{_onTabStripClick}}"
+			@keydown="{{_onTabStripKeyDown}}"
+			@keyup="{{_onTabStripKeyUp}}"
+		>
+			{{#each items}}
+				{{this.stripPresentation}}
+			{{/each}}
+		</div>
+
+		<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>
+	</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}}" 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

@@ -0,0 +1,21 @@
+<ui5-responsive-popover
+	id="{{_id}}-overflowMenu"
+	horizontal-align="Right"
+	placement-type="Bottom"
+	content-only-on-desktop
+	hide-arrow
+	_hide-header
+	class="ui5-tab-container-responsive-popover"
+>
+	<ui5-list mode="SingleSelect" separators="None" @ui5-item-click="{{_onOverflowListItemClick}}">
+		{{#each _overflowItems}}
+			{{overflowPresentation}}
+		{{/each}}
+	</ui5-list>
+	<div slot="footer" class="ui5-responsive-popover-footer">
+		<ui5-button
+			design="Transparent"
+			@click="{{_closeRespPopover}}"
+		>{{popoverCancelButtonText}}</ui5-button>
+	</div>
+</ui5-responsive-popover>

package/src/TabInOverflow.hbs

@@ -0,0 +1,32 @@
+<ui5-li-custom
+	id="{{this._id}}-li"
+	class="{{this.overflowClasses}}"
+	type="{{this.overflowState}}"
+	aria-disabled="{{this.effectiveDisabled}}"
+	aria-selected="{{this.effectiveSelected}}"
+	._realTab="{{this}}"
+	style="{{this._style}}"
+>
+	<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>
+{{#each subTabs}}
+	{{overflowPresentation}}
+{{/each}}