@ui5/webcomponents 0.0.0-bad80d0d6 → 0.0.0-bf8366eb6

package/src/ComboBoxPopover.hbs

@@ -1,105 +1,115 @@
 <ui5-responsive-popover
-	no-arrow
-	content-only-on-desktop
-	_disable-initial-focus
-	placement-type="Bottom"
-	horizontal-align="Left"
-	@ui5-after-open={{_afterOpenPopover}}
-	@ui5-after-close={{_afterClosePopover}}
+	class="{{classes.popover}}"
+	hide-arrow
+	placement="Bottom"
+	horizontal-align="Start"
+	prevent-initial-focus
+	style="{{styles.suggestionsPopover}}"
+	@ui5-open={{_afterOpenPopover}}
+	@ui5-close={{_afterClosePopover}}
 >
-	<ui5-busyindicator
+	<ui5-busy-indicator
 		?active={{loading}}
-		size="Medium"
 		class="ui5-combobox-busy"
 	>
-	</ui5-busyindicator>
+	</ui5-busy-indicator>
 
-	<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="{{_closeRespPopover}}"
-			>
-			</ui5-button>
-		</div>
+	{{#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="{{_closeRespPopover}}"
+				>
+				</ui5-button>
+			</div>
 
-		<div class="row">
-			<div
-				class="input-root-phone"
-				value-state="{{valueState}}"
-			>
-				<input
-					class="ui5-input-inner-phone"
-					.value="{{_tempValue}}"
-					inner-input
+			<div class="row">
+				<ui5-input
+					.value="{{value}}"
+					@ui5-input="{{_handleMobileInput}}"
+					@ui5-change="{{_inputChange}}"
 					placeholder="{{placeholder}}"
 					value-state="{{valueState}}"
-					@input="{{_input}}"
-					@change="{{_inputChange}}"
-					@keydown="{{_keydown}}"
-					aria-autocomplete="both"
-				/>
+					?show-clear-icon="{{showClearIcon}}"
+					?no-typeahead="{{noTypeahead}}"
+				>
+					{{#each _filteredItems}}
+						<ui5-suggestion-item text="{{this.text}}" additional-text="{{this.additionalText}}"></ui5-suggestion-item>
+					{{/each}}
+				</ui5-input>
 			</div>
 		</div>
 
 		{{#if hasValueStateText}}
-			<div class="row {{classes.popoverValueState}}">
+			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
-	</div>
+	{{/if}}
 
 	{{#unless _isPhone}}
 		{{#if hasValueStateText}}
-			<div class="ui5-responsive-popover-header {{classes.popoverValueState}}" style="{{styles.suggestionPopoverHeader}}">
+			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" ?focused={{_isValueStateFocused}} tabindex="0" style="{{styles.suggestionPopoverHeader}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
 	{{/unless}}
 
 	<ui5-list
+		accessible-role="ListBox"
+		class="ui5-combobox-items-list"
 		separators="None"
 		@ui5-item-click={{_selectItem}}
 		@ui5-item-focused={{_onItemFocus}}
 		@mousedown={{_itemMousedown}}
-		mode="SingleSelect"
+		selection-mode="Single"
 	>
 		{{#each _filteredItems}}
-			<ui5-li
-				type="Active"
-				info={{this.additionalText}}
-				._tabIndex={{itemTabIndex}}
-				.mappedItem={{this}}
-				?selected={{this.selected}}
-				?focused={{this.focused}}
-			>
-				{{this.text}}
-			</ui5-li>
+			{{#if isGroupItem}}
+				{{#if _isVisible}}
+					<ui5-li-group header-text="{{ this.text }}" ?focused={{ this.focused }}>
+						{{#each this.items}}
+							{{#if _isVisible}}
+								{{> listItem}}		
+							{{/if}}			
+						{{/each}}
+					</ui5-li-group>
+				{{/if}}
+			{{else}}
+				{{> listItem}}
+			{{/if}}
+
 		{{/each}}
 	</ui5-list>
 
-	<div slot="footer" class="ui5-responsive-popover-footer">
-		<ui5-button
-			design="Transparent"
-			@click="{{_closeRespPopover}}"
-		>OK</ui5-button>
-	</div>
+	{{#if _isPhone}}
+		<div slot="footer" class="ui5-responsive-popover-footer">
+			<ui5-button
+				design="Transparent"
+				@click="{{_closeRespPopover}}"
+			>OK</ui5-button>
+		</div>
+	{{/if}}
 </ui5-responsive-popover>
 
 {{#if shouldOpenValueStateMessagePopover}}
 	<ui5-popover
 		skip-registry-update
-		_disable-initial-focus
+		prevent-initial-focus
 		prevent-focus-restore
-		no-padding
-		no-arrow
+		hide-arrow
 		class="ui5-valuestatemessage-popover"
-		placement-type="Bottom"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
+		placement="Bottom"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>
@@ -107,10 +117,27 @@
 
 {{#*inline "valueStateMessage"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
-		{{valueStateText}}
+		{{valueStateDefaultText}}
 	{{else}}
 		{{#each valueStateMessageText}}
 			{{this}}
 		{{/each}}
 	{{/if}}
-{{/inline}}
+{{/inline}}
+
+{{#*inline "listItem"}}
+	<ui5-li
+			accessible-role="Option"
+			type="Active"
+			wrapping-type="Normal"
+			additional-text={{this.additionalText}}
+			group-name={{this.groupName}}
+			._tabIndex={{itemTabIndex}}
+			.mappedItem={{this}}
+			?selected={{this.selected}}
+			?focused={{this.focused}}
+			data-ui5-stable="{{this.stableDomRef}}"
+	>
+		{{this.text}}
+	</ui5-li>
+{{/inline}}

package/src/DatePicker.hbs

@@ -1,44 +1,2 @@
-<div
-		class="ui5-date-picker-root"
-		style="{{styles.main}}"
->
-	<!-- INPUT -->
-	<ui5-input
-			id="{{_id}}-inner"
-			class="ui5-date-picker-input"
-			placeholder="{{_placeholder}}"
-			type="{{type}}"
-			value="{{value}}"
-			?disabled="{{disabled}}"
-			?required="{{required}}"
-			?readonly="{{readonly}}"
-			value-state="{{valueState}}"
-			data-sap-focus-ref
-			._inputAccInfo ="{{accInfo}}"
-			@ui5-change="{{_onInputChange}}"
-			@ui5-input="{{_onInputInput}}"
-			@ui5-submit="{{_onInputSubmit}}"
-			@keydown="{{_onkeydown}}"
-	>
-
-		{{#if valueStateMessage.length}}
-			<slot name="valueStateMessage" slot="valueStateMessage"></slot>
-		{{/if}}
-
-		{{#unless readonly}}
-			<ui5-icon
-				slot="icon"
-				name="{{openIconName}}"
-				tabindex="-1"
-				accessible-name="{{openIconTitle}}"
-				show-tooltip
-				@click="{{togglePicker}}"
-				input-icon
-				?pressed="{{_isPickerOpen}}"
-				dir="{{effectiveDir}}"
-			></ui5-icon>
-		{{/unless}}
-	</ui5-input>
-
-	<slot name="formSupport"></slot>
-</div>
+{{>include "./DatePickerInput.hbs"}}
+{{>include "./DatePickerPopover.hbs"}}

package/src/DatePickerInput.hbs

@@ -0,0 +1,43 @@
+<div
+        class="ui5-date-picker-root"
+        style="{{styles.main}}"
+>
+    {{! INPUT}}
+    <ui5-input
+            id="{{_id}}-inner"
+            class="ui5-date-picker-input"
+            placeholder="{{_placeholder}}"
+            type="{{type}}"
+            value="{{value}}"
+            ?disabled="{{disabled}}"
+            ?required="{{required}}"
+            ?readonly="{{readonly}}"
+            value-state="{{valueState}}"
+            data-sap-focus-ref
+            ._inputAccInfo ="{{accInfo}}"
+            @ui5-change="{{_onInputChange}}"
+            @ui5-input="{{_onInputInput}}"
+            @ui5-submit="{{_onInputSubmit}}"
+            @keydown="{{_onkeydown}}"
+    >
+
+        {{#if valueStateMessage.length}}
+            <slot name="valueStateMessage" slot="valueStateMessage"></slot>
+        {{/if}}
+
+        {{#unless readonly}}
+            <ui5-icon
+                    id="{{_id}}-value-help"
+                    slot="icon"
+                    name="{{openIconName}}"
+                    tabindex="-1"
+                    accessible-name="{{openIconTitle}}"
+                    mode={{_iconMode}}
+                    show-tooltip
+                    @click="{{_togglePicker}}"
+                    class="inputIcon"
+                    ?pressed="{{open}}"
+            ></ui5-icon>
+        {{/unless}}
+    </ui5-input>
+</div>

package/src/DatePickerPopover.hbs

@@ -1,16 +1,15 @@
 <ui5-responsive-popover
 	id="{{_id}}-responsive-popover"
+	.opener={{this}}
+	?open="{{open}}"
 	allow-target-overlap
-	stay-open-on-scroll
-	placement-type="Bottom"
-	horizontal-align="Left"
-	?disable-scrolling="{{_isIE}}"
-	no-arrow
-	with-padding
-	no-stretch
+	placement="Bottom"
+	horizontal-align="Start"
+	hide-arrow
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
-	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
+	@ui5-close="{{onResponsivePopoverAfterClose}}"
+	@ui5-before-open="{{onResponsivePopoverBeforeOpen}}"
 >
 	{{#if showHeader}}
 		{{> header}}
@@ -31,7 +30,7 @@
 				class="ui5-responsive-popover-close-btn"
 				icon="decline"
 				design="Transparent"
-				@click="{{closePicker}}"
+				@click="{{_togglePicker}}"
 			>
 			</ui5-button>
 		</div>
@@ -42,14 +41,18 @@
 	<ui5-calendar
 		id="{{_id}}-calendar"
 		primary-calendar-type="{{_primaryCalendarType}}"
+		secondary-calendar-type="{{secondaryCalendarType}}"
 		format-pattern="{{_formatPattern}}"
 		timestamp="{{_calendarTimestamp}}"
 		.selectionMode="{{_calendarSelectionMode}}"
 		.minDate="{{minDate}}"
 		.maxDate="{{maxDate}}"
-		@ui5-selected-dates-change="{{onSelectedDatesChange}}"
+		@ui5-selection-change="{{onSelectedDatesChange}}"
+		@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+		@ui5-show-year-view="{{onHeaderShowYearPress}}"
 		?hide-week-numbers="{{hideWeekNumbers}}"
 		._currentPicker="{{_calendarCurrentPicker}}"
+		._pickersMode="{{_calendarPickersMode}}"
 	>
 		{{#each _calendarSelectedDates}}
 			<ui5-date value="{{this}}"></ui5-date>
@@ -58,3 +61,4 @@
 {{/inline}}
 
 {{#*inline "footer"}}{{/inline}}
+

package/src/DateRangePicker.hbs

@@ -0,0 +1,23 @@
+{{>include "./DatePickerInput.hbs"}}
+{{>include "./DatePickerPopover.hbs"}}
+
+{{#*inline "content"}}
+	<ui5-calendar
+		id="{{_id}}-calendar"
+		primary-calendar-type="{{_primaryCalendarType}}"
+		secondary-calendar-type="{{secondaryCalendarType}}"
+		format-pattern="{{_formatPattern}}"
+		timestamp="{{_calendarTimestamp}}"
+		.selectionMode="{{_calendarSelectionMode}}"
+		.minDate="{{minDate}}"
+		.maxDate="{{maxDate}}"
+		@ui5-selection-change="{{onSelectedDatesChange}}"
+		@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+		@ui5-show-year-view="{{onHeaderShowYearPress}}"
+		?hide-week-numbers="{{hideWeekNumbers}}"
+		._currentPicker="{{_calendarCurrentPicker}}"
+		._pickersMode="{{_calendarPickersMode}}"
+	>
+		<ui5-date-range start-value="{{startValue}}" end-value="{{endValue}}"></ui5-date-range>
+	</ui5-calendar>
+{{/inline}}

package/src/DateTimePicker.hbs

@@ -0,0 +1,2 @@
+{{>include "./DatePickerInput.hbs"}}
+{{>include "./DateTimePickerPopover.hbs"}}

package/src/DateTimePickerPopover.hbs

@@ -4,10 +4,10 @@
 {{#*inline "header"}}
 	{{#if phone}}
 		<div class="ui5-dt-picker-header">
-			<ui5-segmentedbutton style="width: 8rem">
-				<ui5-togglebutton key="Date" ?pressed="{{showDateView}}" @click="{{_dateTimeSwitchChange}}">{{btnDateLabel}}</ui5-togglebutton>
-				<ui5-togglebutton key="Time" ?pressed="{{showTimeView}}" @click="{{_dateTimeSwitchChange}}">{{btnTimeLabel}}</ui5-togglebutton>
-			</ui5-segmentedbutton>
+			<ui5-segmented-button class="ui5-dt-picker-toggle-button">
+				<ui5-toggle-button key="Date" ?pressed="{{showDateView}}" @click="{{_dateTimeSwitchChange}}">{{btnDateLabel}}</ui5-toggle-button>
+				<ui5-toggle-button key="Time" ?pressed="{{showTimeView}}" @click="{{_dateTimeSwitchChange}}">{{btnTimeLabel}}</ui5-toggle-button>
+			</ui5-segmented-button>
 		</div>
 	{{/if}}
 {{/inline}}
@@ -18,12 +18,15 @@
 			class="ui5-dt-cal {{classes.dateTimeView}}"
 			id="{{_id}}-calendar"
 			primary-calendar-type="{{_primaryCalendarType}}"
+			secondary-calendar-type="{{secondaryCalendarType}}"
 			format-pattern="{{_formatPattern}}"
 			timestamp="{{_calendarTimestamp}}"
 			.selectionMode="{{_calendarSelectionMode}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
-			@ui5-selected-dates-change="{{onSelectedDatesChange}}"
+			@ui5-selection-change="{{onSelectedDatesChange}}"
+			@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-view="{{onHeaderShowYearPress}}"
 			?hide-week-numbers="{{hideWeekNumbers}}"
 			._currentPicker="{{_calendarCurrentPicker}}"
 		>
@@ -36,20 +39,21 @@
 			<span class="ui5-dt-picker-separator"></span>
 		{{/unless}}
 
-		<ui5-time-selection
+		{{#if showTimeView}}
+			<ui5-time-selection-clocks
 				id="{{_id}}-time-sel"
 				class="ui5-dt-time {{classes.dateTimeView}}"
-				value="{{_timeSelectionValue}}"
 				format-pattern="{{_formatPattern}}"
-				._currentSlider="{{_currentTimeSlider}}"
+				value="{{_timeSelectionValue}}"
 				@ui5-change="{{onTimeSelectionChange}}"
-				@ui5-slider-change="{{onTimeSliderChange}}"
-		></ui5-time-selection>
+				._calendarType="{{_primaryCalendarType}}"
+			></ui5-time-selection-clocks>
+		{{/if}}
 	</div>
 {{/inline}}
 
 {{#*inline "footer"}}
-	<div slot="footer" class="ui5-dt-picker-footer">
+	<div slot="footer" class="ui5-dt-picker-footer {{classes.footer}}">
 		<ui5-button
 			id="ok"
 			class="ui5-dt-picker-action"

package/src/DayPicker.hbs

@@ -1,14 +1,15 @@
 <div
-	class="ui5-dp-root"
+	class="{{this.classes.root}}"
 	style="{{styles.wrapper}}"
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 	@click={{_onclick}}
 	@mouseover={{_onmouseover}}
 	@focusin={{_onfocusin}}
+	@focusout={{_onfocusout}}
 >
 
-	<div id="{{_id}}-content" class="ui5-dp-content" role="grid" aria-roledescription="Calendar">
+	<div id="{{_id}}-content" class="ui5-dp-content" role="grid" aria-roledescription="{{ariaRoledescription}}">
 		<div role="row" class="ui5-dp-days-names-container">
 			{{#each _dayNames}}
 				<div
@@ -22,10 +23,11 @@
 		</div>
 		{{#each _weeks}}
 			{{#if this.length}}
-				<div style="display: flex;" role="row">
+				<div class="ui5-dp-weeks-row" role="row">
 					{{#each this}}
 						{{#if this.timestamp}}
 							<div
+								?special-day="{{this.type}}"
 								tabindex="{{this._tabIndex}}"
 								?data-sap-focus-ref="{{this.focusRef}}"
 								data-sap-timestamp="{{this.timestamp}}"
@@ -38,8 +40,16 @@
 										class="ui5-dp-daytext"
 										data-sap-timestamp="{{this.timestamp}}"
 									>
-											{{this.iDay}}
+										{{this.day}}
 									</span>
+									{{#if this._isSecondaryCalendarType}}
+										<span class="ui5-dp-daytext ui5-dp-daysectext" >
+											{{this.secondDay}}
+										</span>
+									{{/if}}
+									{{#if this.type}}
+										<div class="ui5-dp-specialday {{this.type}}"></div>
+									{{/if}}
 							</div>
 						{{else}}
 							{{#unless this.isHidden}}

package/src/Dialog.hbs

@@ -2,29 +2,52 @@
 
 {{#*inline "beforeContent"}}
 	{{#if _displayHeader }}
-		<header
-			class="ui5-popup-header-root"
-			id="ui5-popup-header"
-			@mousedown="{{_onDragMouseDown}}">
-			{{#if header.length }}
-				<slot name="header"></slot>
-			{{else}}
-				<h2 id="ui5-popup-header-text" class="ui5-popup-header-text">{{headerText}}</h2>
-			{{/if}}
+		<header>
+			<div
+				class="ui5-popup-header-root"
+				id="ui5-popup-header"
+				role="group"
+				aria-describedby={{effectiveAriaDescribedBy}}
+				aria-roledescription={{ariaRoleDescriptionHeaderText}}
+				tabindex="{{_headerTabIndex}}"
+				@keydown="{{_onDragOrResizeKeyDown}}"
+				@mousedown="{{_onDragMouseDown}}"
+				part="header"
+				state="{{this.state}}">
+				{{#if hasValueState}}
+				<ui5-icon class="ui5-dialog-value-state-icon" name="{{_dialogStateIcon}}"></ui5-icon>
+				{{/if}}
+				{{#if header.length }}
+					<slot name="header"></slot>
+				{{else}}
+					<h1 id="ui5-popup-header-text" class="ui5-popup-header-text">{{headerText}}</h1>
+				{{/if}}
+
+				{{#if resizable}}
+					{{#if draggable}}
+					<span id="{{_id}}-descr" aria-hidden="true" class="ui5-hidden-text">{{ariaDescribedByHeaderTextDraggableAndResizable}}</span>
+					{{else}}
+					<span id="{{_id}}-descr" aria-hidden="true" class="ui5-hidden-text">{{ariaDescribedByHeaderTextResizable}}</span>
+					{{/if}}
+				{{else}}
+					{{#if draggable}}
+						<span id="{{_id}}-descr" aria-hidden="true" class="ui5-hidden-text">{{ariaDescribedByHeaderTextDraggable}}</span>
+					{{/if}}
+				{{/if}}
+			</div>
 		</header>
 	{{/if}}
 {{/inline}}
 
 {{#*inline "afterContent"}}
 	{{#if footer.length }}
-		<footer class="ui5-popup-footer-root">
+		<footer class="ui5-popup-footer-root" part="footer">
 			<slot name="footer"></slot>
 		</footer>
 	{{/if}}
-	{{#if resizable}}
+	{{#if _showResizeHandle }}
 		<ui5-icon
 			name="resize-corner"
-			dir="{{effectiveDir}}"
 			class="ui5-popup-resize-handle"
 			@mousedown="{{_onResizeMouseDown}}">
 		</ui5-icon>

package/src/DropIndicator.hbs

@@ -0,0 +1 @@
+<div class="{{classes.root}}"></div>

package/src/FileUploader.hbs

@@ -1,4 +1,3 @@
-
 <div class="ui5-file-uploader-root"
 	@mouseover="{{_onmouseover}}"
 	@mouseout="{{_onmouseout}}"
@@ -6,6 +5,9 @@
 	@focusout="{{_onfocusout}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
+	@click="{{_onclick}}"
+	@dragover="{{_ondrag}}"
+	@drop="{{_ondrop}}"
 >
 	<div class="ui5-file-uploader-mask">
 		{{#unless hideInput}}
@@ -20,20 +22,16 @@
 		{{/unless}}
 		<slot></slot>
 	</div>
-	{{#if _keepInputInShadowDOM}}
-		<input
-			type="file"
-			title="{{titleText}}"
-			accept="{{accept}}"
-			?multiple="{{multiple}}"
-			?disabled="{{disabled}}"
-			@change="{{_onChange}}"
-			aria-hidden="true"
-			tabindex="-1"
-		>
-	{{else}}
-		<slot name="formSupport">
-			{{!-- input for forms will be placed here on IE, Edge and Firefox --}}
-		</slot>
-	{{/if}}
+	<input
+		type="file"
+		title="{{titleText}}"
+		accept="{{accept}}"
+		?multiple="{{multiple}}"
+		?disabled="{{disabled}}"
+		@change="{{_onChange}}"
+		aria-hidden="true"
+		tabindex="-1"
+	>
 </div>
+
+{{>include "./FileUploaderPopover.hbs"}}

package/src/FileUploaderPopover.hbs

@@ -1,14 +1,16 @@
 <ui5-popover
 	skip-registry-update
-	_disable-initial-focus
+	prevent-initial-focus
 	prevent-focus-restore
-	no-padding
-	no-arrow
+	hide-arrow
 	class="ui5-valuestatemessage-popover"
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 >
 	<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+		{{#if _valueStateMessageInputIcon}}
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+		{{/if}}
 		{{> valueStateMessage}}
 	</div>
 </ui5-popover>

package/src/Form.hbs

@@ -0,0 +1,37 @@
+<div class="ui5-form-root" role="form" aria-labelledby="{{ariaLabelledByID}}">
+	{{#if hasHeader}}
+		<div class="ui5-form-header" part="header">
+			{{#if hasCustomHeader}}
+				<slot name="header"></slot>
+			{{else}}
+				<ui5-title id="{{_id}}-header-text" level="H4">{{ headerText }}</ui5-title>
+			{{/if}}
+		</div>
+	{{/if}}
+
+	<div class="ui5-form-layout" part="layout">
+			{{#if this.hasGroupItems}}
+					{{#each groupItemsInfo}}
+						<div class="ui5-form-column {{this.classes}}" part="column">
+							<div class="ui5-form-group">
+								{{#if this.groupItem.headerText}}
+									<div class="ui5-form-group-heading">
+										<ui5-title level="H6">{{ this.groupItem.headerText }}</ui5-title>
+									</div>
+								{{/if}}
+
+								<div class="ui5-form-group-layout">
+									<slot name="{{this.groupItem._individualSlot}}"></slot>
+								</div>
+							</div>
+						</div>
+					{{/each}}
+			{{else}}
+				{{#each itemsInfo}}
+					<div class="ui5-form-item {{this.classes}}">
+						<slot name="{{this.item._individualSlot}}"></slot>
+					</div>
+				{{/each}}
+			{{/if}}
+	</div>
+</div>