@ui5/webcomponents 2.23.0-rc.0 → 2.23.0-rc.1

package/src/i18n/messagebundle_en_US_sappsd.properties

@@ -600,6 +600,7 @@ TABLE_MULTI_SELECTABLE=[[[Μűĺţį Ŝēĺēċţįŏŋ Ţąƃĺē∙∙∙∙
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=[[[Ŝēĺēċţ Āĺĺ Ĉĥēċķƃŏχ∙∙∙∙∙]]]
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=[[[Ĉĺēąŗ Āĺĺ Ɓűţţŏŋ∙∙∙∙∙∙∙∙]]]
 TABLE_ROW=[[[Řŏŵ∙]]]
+TABLE_GROUP_ROW=[[[Ģŗŏűρ Řŏŵ∙∙∙∙∙]]]
 TABLE_ROW_POPIN=[[[Řŏŵ Ƥŏρįŋ∙∙∙∙∙]]]
 TABLE_ROW_INDEX=[[[{0} ŏƒ {1}]]]
 TABLE_ROW_SELECTED=[[[Ŝēĺēċţēƌ∙∙∙∙∙∙]]]

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -600,6 +600,7 @@ TABLE_MULTI_SELECTABLE=‍‌​‌‍​‍‌‌​​‍‌‌‍‍
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=‌​​‍‍​​‍​‌​​‌​​‌‌‌​‍‍‍‌​​‌‍‌​‍​​‍‍​‌​‌Select All Checkbox
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=‌‌​‌‍‌‌‌​‌​‌​‌‌‍​‌​‍‍​‌‌‍​​‍‌​‍​‌‌‌​‌‌‌‍Clear All Button
 TABLE_ROW=‍​‌‌‌‍‌​​‍‌​‍‍‍‍‍​​‌‌‌‍‍​​​‍‌‍‍‌‍‌‍‌‌​​Row
+TABLE_GROUP_ROW=‌‌‌‌​‍‌‌‌‌‌‍​‍‌​‌​‌‌‍‍‍‍‌‌​‌‌​‍‍‍‌‌‌​‍‍‍Group Row
 TABLE_ROW_POPIN=‍‌‍​‌‍​‍‌​‍​‌‍​‌‌‍‍‍​​​​‍‍​​​‍‌​​‍​‌​‌‌‌Row Popin
 TABLE_ROW_INDEX=‍​‍‍‌​​‍‌‍‌​‍‍‍‌‌‌‌‌‌​‍‍​‌‌‍​‍​‍‍​‍​​‌​​​{0}‌‌‌ of ​​​{1}‌‌‌
 TABLE_ROW_SELECTED=‍‍​‍‍​​‍‍‍‍‌‌​‌​‌‍​‍​​‍​‌‍​‌‍‍‌​‍‍​‍​‌Selected

package/src/i18n/messagebundle_en_US_saptrc.properties

@@ -600,6 +600,7 @@ TABLE_MULTI_SELECTABLE=RIckvhQnszVB2Wq9afX5qw_Multi Selection Table
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=U8jAD5CFyK2C8PpsfjhSww_Select All Checkbox
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=ACqC5WL2EIW7V6oKe89LAw_Clear All Button
 TABLE_ROW=BeY7BI1eVkssMRyo6OTuOg_Row
+TABLE_GROUP_ROW=lSMmOgJWKAW1cYToj4S2ig_Group Row
 TABLE_ROW_POPIN=jSWaz9VQvAMjWONvW6vG+w_Row Popin
 TABLE_ROW_INDEX=JSw0PIsKHB9ry5CcnSSkpg_{0} of {1}
 TABLE_ROW_SELECTED=gE83WYhPpE4QRrCw9U/gVA_Selected

package/src/themes/Form.css

@@ -30,7 +30,7 @@
 }
 
 .ui5-form-group-layout {
-	display: grid;
+	display: block;
 	column-gap: 1rem;
 }
 
@@ -51,5 +51,7 @@
 }
 
 dl {
-	all: unset;
+	padding: 0;
+	margin: 0;
+	border: 0 transparent;
 }

package/src/themes/FormItem.css

@@ -3,28 +3,8 @@
 	width: 100%;
 }
 
-:host([column-span="1"]) {
-	grid-column: span 1;
-}
-
-:host([column-span="2"]) {
-	grid-column: span 2;
-}
-
-:host([column-span="3"]) {
-	grid-column: span 3;
-}
-
-:host([column-span="4"]) {
-	grid-column: span 4;
-}
-
-:host([column-span="5"]) {
-	grid-column: span 5;
-}
-
-:host([column-span="6"]) {
-	grid-column: span 6;
+:host {
+	break-inside: avoid;
 }
 
 .ui5-form-item-root {
@@ -68,34 +48,8 @@
 	width: 100%;
 }
 
-@container (max-width: 600px) {
-	:host {
-		order: var(--ui5-form-item-order-S, unset);
-	}
-}
-
-/* M  - 1 column by default, up to 2 columns */
-@container (width > 600px) and (width <= 1024px) {
-	:host {
-		order: var(--ui5-form-item-order-M, unset);
-	}
-
-}
-
-/* L - 2 columns by default, up to 3 columns */
-@container (width > 1024px) and (width <= 1440px) {
-	:host {
-		order: var(--ui5-form-item-order-L, unset);
-	}
-}
-
-/* XL - 3 columns by default, up to 6 */
-@container (min-width: 1441px) {
-	:host {
-		order: var(--ui5-form-item-order-Xl, unset);
-	}
-}
-
 dd {
-	all: unset;
+	padding: 0;
+	margin: 0;
+	border: 0 transparent;
 }

package/src/themes/FormItemSpan.css

@@ -17,8 +17,8 @@
 		--ui5-form-item-layout: var(--ui5-form-item-layout-S);
 	}
 
-	:host([label-span-s="12"]) .ui5-form-item,
-	:host([label-span-s="12"]) .ui5-form-group {
+	:host(:is([label-span~="S12"], :not([label-span*="S"]))) .ui5-form-item,
+	:host(:is([label-span~="S12"], :not([label-span*="S"]))) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
@@ -30,8 +30,8 @@
 		--ui5-form-item-layout: var(--ui5-form-item-layout-M);
 	}
 
-	:host([label-span-m="12"]) .ui5-form-item,
-	:host([label-span-m="12"]) .ui5-form-group {
+	:host([label-span~="M12"]) .ui5-form-item,
+	:host([label-span~="M12"]) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
@@ -43,8 +43,8 @@
 		--ui5-form-item-layout: var(--ui5-form-item-layout-L);
 	}
 
-	:host([label-span-l="12"]) .ui5-form-item,
-	:host([label-span-l="12"]) .ui5-form-group {
+	:host([label-span~="L12"]) .ui5-form-item,
+	:host([label-span~="L12"]) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
@@ -56,9 +56,9 @@
 		--ui5-form-item-layout: var(--ui5-form-item-layout-XL);
 	}
 
-	:host([label-span-xl="12"]) .ui5-form-item,
-	:host([label-span-xl="12"]) .ui5-form-group {
+	:host([label-span~="XL12"]) .ui5-form-item,
+	:host([label-span~="XL12"]) .ui5-form-group {
 		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);
 		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal);
 	}
-}
+}

package/src/themes/FormLayout.css

@@ -1,43 +1,46 @@
-/* 
-* The Form layout is divided into one or more columns. 
+/*
+* The Form layout is divided into one or more columns.
 * XL - max. 6 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.
 */
-/* 
+/*
 * S max-width: 600px - container padding 24px
 */
 
 /* S - 1 column */
 @container (max-width: 599px) {
 	.ui5-form-layout {
-		grid-template-columns: 1fr;
+		grid-template-columns: repeat(var(--ui5-form-columns-s), 1fr);
 	}
 
 	::slotted(*) {
 		justify-self: start;
 	}
-	::slotted(:nth-child(2n)){
+
+	::slotted(:nth-child(2n)) {
 		margin-bottom: 0.5rem;
 	}
+
+	.ui5-form-column {
+		grid-column: span var(--ui5-form-column-span-s, 1);
+	}
+
+	.ui5-form-group-layout {
+		column-count: var(--ui5-form-column-span-s, 1)
+	}
 }
 
 /* M  - 1 column by default, up to 2 columns */
 @container (min-width: 600px) and (max-width: 1023px) {
 	.ui5-form-layout {
-		grid-template-columns: 1fr;
-	}
-	:host([columns-m="1"]) .ui5-form-layout {
-		grid-template-columns: 1fr;
-	}
-	:host([columns-m="2"]) .ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
+		grid-template-columns: repeat(var(--ui5-form-columns-m), 1fr);
 	}
 
-	.ui5-form-column-spanM-2 {
-		grid-column: span 2;
+	.ui5-form-column {
+		grid-column: span var(--ui5-form-column-span-m, 1);
 	}
 
-	.ui5-form-column-spanM-2 .ui5-form-group-layout {
-		grid-template-columns: repeat(2, 1fr);
+	.ui5-form-group-layout {
+		column-count: var(--ui5-form-column-span-m, 1)
 	}
 }
 
@@ -45,115 +48,29 @@
 @container (min-width: 1024px) and (max-width: 1439px) {
 
 	.ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	.ui5-form-column {
-		grid-template-columns: 1fr;
+		grid-template-columns: repeat(var(--ui5-form-columns-l), 1fr);
 	}
 
-	:host([columns-l="1"]) .ui5-form-layout {
-		grid-template-columns: 1fr;
-	}
-	:host([columns-l="2"]) .ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	:host([columns-l="3"]) .ui5-form-layout {
-		grid-template-columns: repeat(3, 1fr);
-	}
-
-	.ui5-form-column-spanL-2 {
-		grid-column: span 2;
-	}
-	.ui5-form-column-spanL-2 .ui5-form-group-layout {
-		grid-template-columns: repeat(2, 1fr);
+	.ui5-form-column {
+		grid-column: span var(--ui5-form-column-span-l, 1);
 	}
 
-	.ui5-form-column-spanL-3 {
-		grid-column: span 3;
-	}
-	.ui5-form-column-spanL-3 .ui5-form-group-layout {
-		grid-template-columns: repeat(3, 1fr);
+	.ui5-form-group-layout {
+		column-count: var(--ui5-form-column-span-l, 1)
 	}
 }
 
 /* XL - 3 columns by default, up to 6 */
 @container (min-width: 1440px) {
 	.ui5-form-layout {
-		grid-template-columns: repeat(3, 1fr);
-	}
-
-	:host([columns-xl="1"]) .ui5-form-layout {
-		grid-template-columns: 1fr;
-	}
-	:host([columns-xl="2"]) .ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	:host([columns-xl="3"]) .ui5-form-layout {
-		grid-template-columns: repeat(3, 1fr);
-	}
-	:host([columns-xl="4"]) .ui5-form-layout {
-		grid-template-columns: repeat(4, 1fr);
-	}
-	:host([columns-xl="5"]) .ui5-form-layout {
-		grid-template-columns: repeat(5, 1fr);
-	}
-	:host([columns-xl="6"]) .ui5-form-layout {
-		grid-template-columns: repeat(6, 1fr);
+		grid-template-columns: repeat(var(--ui5-form-columns-xl), 1fr);
 	}
 
-	.ui5-form-column-spanXL-2 {
-		grid-column: span 2;
-	}
-	.ui5-form-column-spanXL-2 .ui5-form-group-layout {
-		grid-template-columns: repeat(2, 1fr);
-	}
-
-	.ui5-form-column-spanXL-3 {
-		grid-column: span 3;
-	}
-	.ui5-form-column-spanXL-3 .ui5-form-group-layout {
-		grid-template-columns: repeat(3, 1fr);
-	}
-
-	.ui5-form-column-spanXL-4 {
-		grid-column: span 4;
-	}
-	.ui5-form-column-spanXL-4 .ui5-form-group-layout {
-		grid-template-columns: repeat(4, 1fr);
-
-	}
-
-	.ui5-form-column-spanXL-5 {
-		grid-column: span 5;
-	}
-	.ui5-form-column-spanXL-5 .ui5-form-group-layout {
-		grid-template-columns: repeat(5, 1fr);
-
+	.ui5-form-column {
+		grid-column: span var(--ui5-form-column-span-xl, 1);
 	}
 
-	.ui5-form-column-spanXL-6 {
-		grid-column: span 6;
-	}
-	.ui5-form-column-spanXL-6 .ui5-form-group-layout {
-		grid-template-columns: repeat(6, 1fr);
+	.ui5-form-group-layout {
+		column-count: var(--ui5-form-column-span-xl, 1)
 	}
-}
-
-.ui5-form-item-span-2 {
-	grid-column: span 2;
-}
-
-.ui5-form-item-span-3 {
-	grid-column: span 3;
-}
-
-.ui5-form-item-span-4 {
-	grid-column: span 4;
-}
-
-.ui5-form-item-span-5 {
-	grid-column: span 5;
-}
-.ui5-form-item-span-6 {
-	grid-column: span 6;
-}
+}