@ui5/webcomponents 2.4.0 → 2.5.0-rc.0

package/src/ColorPicker.hbs

@@ -23,16 +23,18 @@
             accessible-name="{{hueSliderLabel}}"
             @ui5-input="{{_handleHueInput}}"
         ></ui5-slider>
-        <ui5-slider
-            disabled="{{inputsDisabled}}"
-            class="ui5-color-picker-alpha-slider"
-            min="0"
-            max="1"
-            step="0.01"
-            value="{{_alpha}}"
-            accessible-name="{{alphaSliderLabel}}"
-            @ui5-input="{{_handleAlphaInput}}"
-        ></ui5-slider>
+        {{#if _isDefaultPickerMode}}
+            <ui5-slider
+                disabled="{{inputsDisabled}}"
+                class="ui5-color-picker-alpha-slider"
+                min="0"
+                max="1"
+                step="0.01"
+                value="{{_alpha}}"
+                accessible-name="{{alphaSliderLabel}}"
+                @ui5-input="{{_handleAlphaInput}}"
+            ></ui5-slider>
+        {{/if}}
     </div>
 
     <div class="ui5-color-picker-current-color">
@@ -56,51 +58,53 @@
         </div>
     </div>
 
-    <div
-        class="ui5-color-picker-rgb-wrapper"
-        @ui5-change="{{_handleRGBInputsChange}}"
-    >
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-                id="red"
-                class="ui5-color-picker-rgb-input"
-                disabled="{{inputsDisabled}}"
-                accessible-name="{{redInputLabel}}"
-                value="{{_value.r}}"
-            ></ui5-input>
-            <ui5-label>R</ui5-label>
-        </div>
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-                id="green"
-                class="ui5-color-picker-rgb-input"
-                disabled="{{inputsDisabled}}"
-                accessible-name="{{greenInputLabel}}"
-                value="{{_value.g}}"
-            ></ui5-input>
-            <ui5-label>G</ui5-label>
-        </div>
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-                id="blue"
-                class="ui5-color-picker-rgb-input"
-                disabled="{{inputsDisabled}}"
-                accessible-name="{{blueInputLabel}}"
-                value="{{_value.b}}"
-            ></ui5-input>
-            <ui5-label>B</ui5-label>
-        </div>
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-				id="alpha"
-                disabled="{{inputsDisabled}}"
-                class="ui5-color-picker-rgb-input"
-                value="{{_alpha}}"
-                accessible-name="{{alphaInputLabel}}"
-                @ui5-input="{{_handleAlphaInput}}"
-                @ui5-change="{{_handleAlphaChange}}"
-            ></ui5-input>
-            <ui5-label>A</ui5-label>
+    {{#if _isDefaultPickerMode}}
+        <div
+            class="ui5-color-picker-rgb-wrapper"
+            @ui5-change="{{_handleRGBInputsChange}}"
+        >
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="red"
+                    class="ui5-color-picker-rgb-input"
+                    disabled="{{inputsDisabled}}"
+                    accessible-name="{{redInputLabel}}"
+                    value="{{_value.r}}"
+                ></ui5-input>
+                <ui5-label>R</ui5-label>
+            </div>
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="green"
+                    class="ui5-color-picker-rgb-input"
+                    disabled="{{inputsDisabled}}"
+                    accessible-name="{{greenInputLabel}}"
+                    value="{{_value.g}}"
+                ></ui5-input>
+                <ui5-label>G</ui5-label>
+            </div>
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="blue"
+                    class="ui5-color-picker-rgb-input"
+                    disabled="{{inputsDisabled}}"
+                    accessible-name="{{blueInputLabel}}"
+                    value="{{_value.b}}"
+                ></ui5-input>
+                <ui5-label>B</ui5-label>
+            </div>
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="alpha"
+                    disabled="{{inputsDisabled}}"
+                    class="ui5-color-picker-rgb-input"
+                    value="{{_alpha}}"
+                    accessible-name="{{alphaInputLabel}}"
+                    @ui5-input="{{_handleAlphaInput}}"
+                    @ui5-change="{{_handleAlphaChange}}"
+                ></ui5-input>
+                <ui5-label>A</ui5-label>
+            </div>
         </div>
-    </div>
+    {{/if}}
 </section>

package/src/ComboBoxItem.hbs

@@ -0,0 +1,18 @@
+{{>include "./ListItemBase.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<div part="content" id="content" class="ui5-li-content">
+		<div class="ui5-li-text-wrapper">
+			<span part="title" class="ui5-li-title">
+				{{{text}}}
+			</span>
+			{{#if additionalText}}
+				<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+			{{/if}}
+		</div>
+	</div>
+{{/inline}}
+
+{{#*inline "listItemAttributes"}}
+	role="option"
+{{/inline}}

package/src/ComboBoxItemGroup.hbs

@@ -0,0 +1,9 @@
+{{>include "./ListItemGroup.hbs"}}
+
+{{#*inline "items"}}
+	{{#each items}}
+		{{#if _isVisible}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/if}}
+	{{/each}}
+{{/inline}}

package/src/ComboBoxPopover.hbs

@@ -85,20 +85,7 @@
 		selection-mode="Single"
 	>
 		{{#each _filteredItems}}
-			{{#if isGroupItem}}
-				{{#if _isVisible}}
-					<ui5-li-group header-text="{{this.headerText}}" ?focused={{this.focused}}>
-						{{#each this.items}}
-							{{#if _isVisible}}
-								{{> listItem}}
-							{{/if}}
-						{{/each}}
-					</ui5-li-group>
-				{{/if}}
-			{{else}}
-				{{> listItem}}
-			{{/if}}
-
+			<slot name="{{this._individualSlot}}"></slot>
 		{{/each}}
 	</ui5-list>
 
@@ -140,20 +127,4 @@
 	{{else}}
 		<slot name="valueStateMessage"></slot>
 	{{/if}}
-{{/inline}}
-
-{{#*inline "listItem"}}
-	<ui5-li
-			accessible-role="Option"
-			type="Active"
-			wrapping-type="Normal"
-			additional-text={{this.additionalText}}
-			group-name={{this.groupName}}
-			.mappedItem={{this}}
-			?selected={{this.selected}}
-			?focused={{this.focused}}
-			data-ui5-stable="{{this.stableDomRef}}"
-	>
-		{{this.text}}
-	</ui5-li>
-{{/inline}}
+{{/inline}}

package/src/Form.hbs

@@ -1,4 +1,4 @@
-<div class="ui5-form-root" role="form" aria-labelledby="{{ariaLabelledByID}}">
+<div class="ui5-form-root" role="{{effectiveAccessibleRole}}" aria-labelledby="{{effectiveАccessibleNameRef}}">
 	{{#if hasHeader}}
 		<div class="ui5-form-header" part="header">
 			{{#if hasCustomHeader}}
@@ -13,10 +13,10 @@
 			{{#if this.hasGroupItems}}
 					{{#each groupItemsInfo}}
 						<div class="ui5-form-column {{this.classes}}" part="column">
-							<div class="ui5-form-group">
+							<div class="ui5-form-group" role="form" aria-labelledby="{{this.accessibleNameRef}}">
 								{{#if this.groupItem.headerText}}
 									<div class="ui5-form-group-heading">
-										<ui5-title level="H6">{{ this.groupItem.headerText }}</ui5-title>
+										<ui5-title id="{{this.groupItem._id}}-group-header-text" level="H6">{{ this.groupItem.headerText }}</ui5-title>
 									</div>
 								{{/if}}
 

package/src/List.hbs

@@ -44,6 +44,7 @@
 			role="{{listAccessibleRole}}"
 			aria-label="{{ariaLabelTxt}}"
 			aria-labelledby="{{ariaLabelledBy}}"
+			aria-description="{{ariaDescriptionText}}"
 		>
 			<slot></slot>
 

package/src/ListItemGroup.hbs

@@ -4,18 +4,25 @@
 	@dragover="{{_ondragover}}"
 	@drop="{{_ondrop}}"
 	@dragleave="{{_ondragleave}}">
+
 	{{#if hasHeader}}
 		<ui5-li-group-header ?focused="{{focused}}" part="header">
 			{{#if hasFormattedHeader}}
-			<slot name="header"></slot>
+				<slot name="header"></slot>
 			{{else}}
-			{{headerText}}
+				{{headerText}}
 			{{/if}}
 		</ui5-li-group-header>
 	{{/if}}
-	<slot></slot>
+
+	{{> items}}
 	<ui5-drop-indicator
 		orientation="Horizontal"
 		.ownerReference="{{this}}"
 	></ui5-drop-indicator>
-</ul>
+</ul>
+
+
+{{#*inline "items"}}
+	<slot></slot>
+{{/inline}}

package/src/MultiComboBox.hbs

@@ -39,18 +39,16 @@
 					{{/if}}
 				{{/each}}
 			{{else}}
-					{{#if selected}}
-
-				<ui5-token
-					?readonly="{{../readonly}}"
-					class="ui5-multi-combobox-token"
-					data-ui5-id="{{this._id}}"
-					part="token-{{@index}}"
-					text="{{this.text}}"
-				>
-				</ui5-token>
-					{{/if}}
-
+				{{#if selected}}
+					<ui5-token
+						?readonly="{{../readonly}}"
+						class="ui5-multi-combobox-token"
+						data-ui5-id="{{this._id}}"
+						part="token-{{@index}}"
+						text="{{this.text}}"
+					>
+					</ui5-token>
+				{{/if}}
 			{{/if}}
 		{{/each}}
 	</ui5-tokenizer>

package/src/MultiComboBoxItem.hbs

@@ -0,0 +1,19 @@
+{{>include "./ComboBoxItem.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<ui5-checkbox ?disabled="{{_readonly}}" ?checked="{{selected}}" tabindex="invalid" accessible-name="{{_accessibleName}}"></ui5-checkbox>
+	<div part="content" id="content" class="ui5-li-content">
+		<div class="ui5-li-text-wrapper">
+			<span part="title" class="ui5-li-title">
+				{{{text}}}
+			</span>
+			{{#if additionalText}}
+				<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+			{{/if}}
+		</div>
+	</div>
+{{/inline}}
+
+{{#*inline "listItemAttributes"}}
+	role="option"
+{{/inline}}

package/src/MultiComboBoxItemGroup.hbs

@@ -0,0 +1,9 @@
+{{>include "./ListItemGroup.hbs"}}
+
+{{#*inline "items"}}
+	{{#each items}}
+		{{#if _isVisible}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/if}}
+	{{/each}}
+{{/inline}}

package/src/MultiComboBoxPopover.hbs

@@ -80,33 +80,13 @@
 	{{#if filterSelected}}
 		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox">
 			{{#each selectedItems}}
-				{{#if isGroupItem}}
-					<ui5-li-group header-text="{{this.headerText}}" data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">
-						{{#each this.items}}
-							{{#if _isVisible}}
-								{{> listItem}}
-							{{/if}}
-						{{/each}}
-					</ui5-li-group>
-				{{else}}
-					{{> listItem}}
-				{{/if}}
+				{{> listItem}}
 			{{/each}}
 		</ui5-list>
 	{{else}}
-		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox">
+		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox" @keydown="{{_onItemKeydown}}">
 			{{#each _filteredItems}}
-				{{#if isGroupItem}}
-					<ui5-li-group header-text="{{this.headerText}}" data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">
-						{{#each this.items}}
-							{{#if _isVisible}}
-								{{> listItem}}
-							{{/if}}
-						{{/each}}
-					</ui5-li-group>
-				{{else}}
-					{{> listItem}}
-				{{/if}}
+				{{> listItem}}
 			{{/each}}
 		</ui5-list>
 	{{/if}}
@@ -152,24 +132,13 @@
 {{/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}}"
-		accessible-role="Option"
-	>
-		{{this.text}}
-	</ui5-li>
+	<slot name="{{this._individualSlot}}"></slot>
 {{/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>
+			<ui5-checkbox ?disabled={{this.readonly}} ?checked={{_allSelected}} class="ui5-mcb-select-all-checkbox" text="{{selectAllCheckboxLabel}}" @ui5-change="{{_handleSelectAllCheckboxClick}}"></ui5-checkbox>
 		</div>
 	{{/if}}
 {{/inline}}

package/src/Tokenizer.hbs

@@ -8,26 +8,37 @@
 		@focusout="{{_onfocusout}}"
 		@focusin="{{_onfocusin}}"
 		@ui5-select="{{onTokenSelect}}"
-		role="listbox"
-		aria-label="{{tokenizerLabel}}"
-		aria-description="{{tokenizerAriaDescription}}"
-		aria-disabled="{{_ariaDisabled}}"
-		aria-readonly="{{_ariaReadonly}}"
 	>
-		{{#each tokens}}
-			<slot name="{{this._individualSlot}}"></slot>
-		{{/each}}
+		<div class="ui5-tokenizer--list"
+			role="listbox"
+			aria-label="{{tokenizerLabel}}"
+			aria-description="{{tokenizerAriaDescription}}"
+			aria-disabled="{{_ariaDisabled}}"
+			aria-readonly="{{_ariaReadonly}}"
+		>
+			{{#each tokens}}
+				<slot name="{{this._individualSlot}}"></slot>
+			{{/each}}
+		</div>
+
+		{{#if showEffectiveClearAll}}
+			<span
+				role="button"
+				@click={{handleClearAll}}
+				class="ui5-tokenizer--clear-all">
+				{{_clearAllText}}</span>
+		{{/if}}
 	</div>
 
-	{{#if showNMore}}
-		<span
-			role="button"
-			aria-haspopup="dialog"
-			@click="{{_handleNMoreClick}}"
-			class="ui5-tokenizer-more-text"
-			part="n-more-text"
-		>{{_nMoreText}}</span>
-	{{/if}}
+		{{#if showNMore}}
+			<span
+				role="button"
+				aria-haspopup="dialog"
+				@click="{{_handleNMoreClick}}"
+				class="ui5-tokenizer-more-text"
+				part="n-more-text"
+			>{{_nMoreText}}</span>
+		{{/if}}
 </div>
 
 {{>include "./TokenizerPopover.hbs"}}

package/src/Tree.hbs

@@ -4,7 +4,10 @@
     .footerText="{{footerText}}"
     .noDataText="{{noDataText}}"
     .accessibleRole="{{_role}}"
-    .accessibleName="{{_label}}"
+    .accessibleName="{{accessibleName}}"
+    .accessibleNameRef="{{accessibleNameRef}}"
+    .accessibleDescription="{{accessibleDescription}}"
+    .accessibleDescriptionRef="{{accessibleDescriptionRef}}"
 	@dragenter="{{_ondragenter}}"
 	@dragover="{{_ondragover}}"
 	@drop="{{_ondrop}}"

package/src/i18n/messagebundle.properties

@@ -444,6 +444,9 @@ TOKENIZER_POPOVER_REMOVE=All items
 #XFLD: Token number indicator which is used to show all tokens in Tokenizer when all of the tokens are hidden
 TOKENIZER_SHOW_ALL_ITEMS={0} Items
 
+#XFLD: Clear All link text in Tokenizer
+TOKENIZER_CLEAR_ALL=Clear All
+
 #XACT: Label text for TreeListItem
 TREE_ITEM_ARIA_LABEL=Tree Item
 

package/src/i18n/messagebundle_sv.properties

@@ -332,7 +332,7 @@ MONTH_PICKER_DESCRIPTION=Månadsväljare
 
 YEAR_PICKER_DESCRIPTION=Årsväljare
 
-SLIDER_TOOLTIP_INPUT_DESCRIPTION=Press F2 to enter a value
+SLIDER_TOOLTIP_INPUT_DESCRIPTION=Tryck på F2 för att ange ett värde
 
 SLIDER_TOOLTIP_INPUT_LABEL=Aktuellt värde
 

package/src/themes/ComboBoxItem.css

@@ -0,0 +1,14 @@
+:host([ui5-cb-item]) {
+	height: auto;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-cb-item]) .ui5-li-root {
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-cb-item]) .ui5-li-content {
+	padding-bottom: .875rem;
+	padding-top: .875rem;
+	box-sizing: border-box;
+}

package/src/themes/MultiComboBoxItem.css

@@ -0,0 +1,19 @@
+:host([ui5-mcb-item]) {
+	height: auto;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-mcb-item]) .ui5-li-root {
+	padding-inline-start: 0;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-mcb-item]) .ui5-li-content {
+	padding-bottom: .875rem;
+	padding-top: .875rem;
+	box-sizing: border-box;
+}
+
+:host([ui5-mcb-item]) [ui5-checkbox] {
+	overflow: visible;
+}

package/src/themes/MultiComboBoxPopover.css

@@ -31,4 +31,8 @@
 
 .ui5-mcb-select-all-checkbox::part(label) {
 	font-family: var(--sapFontBoldFamily);
-}
+}
+
+:host([readonly]) ::slotted([ui5-mcb-item]) {
+	cursor: auto;
+}

package/src/themes/Table.css

@@ -9,14 +9,11 @@
     display: none;
 }
 
-:host([overflow-mode="Scroll"]) {
-    overflow-x: scroll;
-}
-
 #table {
     display: grid;
     grid-auto-rows: minmax(min-content, auto);
     background: var(--sapList_Background);
+    height: -moz-fill, -webkit-fill-available, 100%;
 }
 
 #nodata-cell {

package/src/themes/Tokenizer.css

@@ -7,6 +7,29 @@
 	height: 2.25rem;
 }
 
+:host([multi-line]) {
+	height: auto;
+
+	.ui5-tokenizer--content {
+		display: flex;
+		align-content: baseline;
+		flex-wrap: wrap;
+		padding: .25rem;
+		box-sizing: border-box;
+		row-gap: .5rem;
+		column-gap: .25rem;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	::slotted(ui5-token) {
+		margin: 0;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		max-width: 100%;
+	}
+}
+
 :host([disabled]) {
 	opacity: 40%;
 	pointer-events: none;
@@ -52,6 +75,10 @@
 	box-sizing: border-box;
 }
 
+.ui5-tokenizer--list{
+	display: contents;
+}
+
 :host([_tokens-count="1"]) .ui5-tokenizer--content {
 	padding-inline-end: 4px;
 	box-sizing: border-box;
@@ -77,3 +104,21 @@
 .ui5-tokenizer-more-text:active {
 	text-decoration: none;
 }
+
+.ui5-tokenizer--clear-all {
+	color: var(--sapLinkColor);
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	cursor: pointer;
+	outline: none;
+}
+
+.ui5-tokenizer--clear-all:hover {
+	color: var(--sapLink_Hover_Color);
+	text-decoration: var(--_ui5_link_hover_text_decoration);
+}
+
+.ui5-tokenizer--clear-all:active {
+	color: var(--sapLink_Active_Color);
+	text-decoration: var(--_ui5_link_active_text_decoration);
+}

package/cypress/specs/Eventing.cy.ts

@@ -1,44 +0,0 @@
-// import { html } from "lit";
-import "../../src/Button.js";
-
-describe("Eventing", () => {
-	it("Default prevented", () => {
-		// 		cy.mount(html`<form method="get">
-		// 	<ui5-button submits>Submit</ui5-button>
-		// </form>`);
-
-		// 		cy.get("form")
-		// 			.then($item => {
-		// 				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
-		// 			});
-
-		// 		cy.get("[ui5-button]")
-		// 			.then($item => {
-		// 				$item.get(0).addEventListener("click", e => e.preventDefault());
-		// 			});
-
-		// 		cy.get("[ui5-button]")
-		// 			.realClick();
-
-		// 		cy.get("@submit")
-		// 			.should("have.not.been.called");
-	});
-
-	// 	it("Default not prevented", () => {
-	// 		cy.mount(html`<form>
-	// 	<ui5-button submits>Submit</ui5-button>
-	// </form>`);
-
-	// 		cy.get("form")
-	// 			.then($item => {
-	// 				$item.get(0).addEventListener("submit", e => e.preventDefault());
-	// 				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
-	// 			});
-
-	// 		cy.get("[ui5-button]")
-	// 			.realClick();
-
-// 		cy.get("@submit")
-// 			.should("have.been.called");
-// 	});
-});