@ui5/webcomponents 0.0.0-32b659ddc → 0.0.0-33e059bcd

package/src/Calendar.hbs

@@ -0,0 +1,72 @@
+<div
+	class="ui5-cal-root"
+	@keydown={{_onkeydown}}
+>
+	<div id="{{_id}}-content" class="ui5-cal-content">
+		<ui5-daypicker
+			id="{{_id}}-daypicker"
+			?hidden="{{_isDayPickerHidden}}"
+			format-pattern="{{_formatPattern}}"
+			.selectedDates="{{_selectedDatesTimestamps}}"
+			._hidden="{{_isDayPickerHidden}}"
+			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{_secondaryCalendarType}}"
+			.selectionMode="{{selectionMode}}"
+			.minDate="{{minDate}}"
+			.maxDate="{{maxDate}}"
+			timestamp="{{_timestamp}}"
+			?hide-week-numbers="{{hideWeekNumbers}}"
+			@ui5-change="{{onSelectedDatesChange}}"
+			@ui5-navigate="{{onNavigate}}"
+		></ui5-daypicker>
+
+		<ui5-monthpicker
+			id="{{_id}}-MP"
+			?hidden="{{_isMonthPickerHidden}}"
+			format-pattern="{{_formatPattern}}"
+			.selectedDates="{{_selectedDatesTimestamps}}"
+			._hidden="{{_isMonthPickerHidden}}"
+			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{_secondaryCalendarType}}"
+			.minDate="{{minDate}}"
+			.maxDate="{{maxDate}}"
+			timestamp="{{_timestamp}}"
+			@ui5-change="{{onSelectedMonthChange}}"
+			@ui5-navigate="{{onNavigate}}"
+		></ui5-monthpicker>
+
+		<ui5-yearpicker
+			id="{{_id}}-YP"
+			?hidden="{{_isYearPickerHidden}}"
+			format-pattern="{{_formatPattern}}"
+			.selectedDates="{{_selectedDatesTimestamps}}"
+			._hidden="{{_isYearPickerHidden}}"
+			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{_secondaryCalendarType}}"
+			.minDate="{{minDate}}"
+			.maxDate="{{maxDate}}"
+			timestamp="{{_timestamp}}"
+			@ui5-change="{{onSelectedYearChange}}"
+			@ui5-navigate="{{onNavigate}}"
+		></ui5-yearpicker>
+	</div>
+
+	{{! Positioned above the content due to flex-direction:column-reverse, but physically here for tab order to work}}
+	<ui5-calendar-header
+			id="{{_id}}-head"
+			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{_secondaryCalendarType}}"
+			.buttonTextForSecondaryCalendarType="{{secondaryCalendarTypeButtonText}}"
+			timestamp="{{_timestamp}}"
+			.isPrevButtonDisabled="{{_previousButtonDisabled}}"
+			.isNextButtonDisabled="{{_nextButtonDisabled}}"
+			.isMonthButtonHidden="{{_isHeaderMonthButtonHidden}}"
+			._monthButtonText="{{_headerMonthButtonText}}"
+			._yearButtonText="{{_headerYearButtonText}}"
+			._yearButtonTextSecType="{{_headerYearButtonTextSecType}}"
+			@ui5-previous-press="{{onHeaderPreviousPress}}"
+			@ui5-next-press="{{onHeaderNextPress}}"
+			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-press="{{onHeaderShowYearPress}}"
+	></ui5-calendar-header>
+</div>

package/src/CalendarHeader.hbs

@@ -0,0 +1,55 @@
+<div class="ui5-calheader-root">
+	<div
+		data-ui5-cal-header-btn-prev
+		class="{{classes.prevButton}}"
+		role="button"
+		@mousedown={{onPrevButtonClick}}
+		title="{{_prevButtonText}}"
+	>
+		<ui5-icon class="ui5-calheader-arrowicon" name="slim-arrow-left"></ui5-icon>
+	</div>
+
+	<div class="ui5-calheader-midcontainer">
+		<div
+			data-ui5-cal-header-btn-month
+			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+			?hidden="{{isMonthButtonHidden}}"
+			tabindex="0"
+			role="button"
+			aria-label="{{accInfo.ariaLabelMonthButton}}"
+			@click={{onMonthButtonClick}}
+			@keydown={{onMonthButtonKeyDown}}
+			@keyup={{onMonthButtonKeyUp}}
+		>
+			<span>{{_monthButtonText}}</span>
+			{{#if hasSecondaryCalendarType}}
+				<span class="ui5-calheader-btn-sectext">{{_secondMonthButtonText}}</span>
+			{{/if}}
+		</div>
+		<div
+			data-ui5-cal-header-btn-year
+			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+			?hidden="{{isYearButtonHidden}}"
+			tabindex="0"
+			role="button"
+			@click={{onYearButtonClick}}
+			@keydown={{onYearButtonKeyDown}}
+			@keyup={{onYearButtonKeyUp}}
+		>
+			<span>{{_yearButtonText}}</span>
+			{{#if hasSecondaryCalendarType}}
+				<span class="ui5-calheader-btn-sectext">{{_yearButtonTextSecType}}</span>
+			{{/if}}
+		</div>
+	</div>
+
+	<div
+		data-ui5-cal-header-btn-next
+		class="{{classes.nextButton}}"
+		role="button"
+		@mousedown={{onNextButtonClick}}
+		title={{_nextButtonText}}
+	>
+		<ui5-icon class="ui5-calheader-arrowicon" name="slim-arrow-right"></ui5-icon>
+	</div>
+</div>

package/src/Card.hbs

@@ -0,0 +1,14 @@
+<div
+	class="{{classes.root}}"
+	role="region"
+	aria-label="{{_getAriaLabel}}"
+	part="root">
+	{{#if _hasHeader}}
+		<div class="ui5-card-header-root">
+			<slot name="header"></slot>
+		</div>
+	{{/if}}
+	<div role="group" aria-label="{{_ariaCardContentLabel}}" part="content">
+		<slot></slot>
+	</div>
+</div>

package/src/CardHeader.hbs

@@ -0,0 +1,61 @@
+<div
+	id="{{_id}}--header"
+	class="{{classes.root}}"
+	role="group"
+	aria-roledescription="{{ariaRoleDescription}}"
+	@click="{{_click}}"
+	@keydown="{{_keydown}}"
+	@keyup="{{_keyup}}"
+	part="root"
+>
+	<div
+		class="ui5-card-header-focusable-element"
+		aria-labelledby="{{ariaLabelledBy}}"
+		role="{{ariaRoleFocusableElement}}"
+		data-sap-focus-ref
+		tabindex="0"
+	>
+		{{#if hasAvatar}}
+			<div id="{{_id}}-avatar" class="ui5-card-header-avatar" aria-label="{{ariaCardAvatarLabel}}">
+				<slot name="avatar"></slot>
+			</div>
+		{{/if}}
+
+		<div class="ui5-card-header-text">
+			<div class="ui5-card-header-first-line">
+				{{#if titleText}}
+					<div
+						id="{{_id}}-title"
+						class="ui5-card-header-title"
+						part="title"
+						role="heading"
+						aria-level="3"
+					>{{titleText}}</div>
+				{{/if}}
+
+				{{#if status}}
+					<div class="ui5-card-header-status">
+						<span id="{{_id}}-status" part="status" dir="auto">{{status}}</span>
+					</div>
+				{{/if}}
+
+			</div>
+
+			{{#if subtitleText}}
+				<div id="{{_id}}-subtitle" class="ui5-card-header-subtitle" part="subtitle">{{subtitleText}}</div>
+			{{/if}}
+		</div>
+	</div>
+
+	{{#if hasAction}}
+		<div
+			class="ui5-card-header-action"
+			@focusin="{{_actionsFocusin}}"
+			@focusout="{{_actionsFocusout}}"
+		>
+			<slot name="action"></slot>
+		</div>
+	{{/if}}
+
+	</div>
+</div>

package/src/Carousel.hbs

@@ -0,0 +1,85 @@
+<section
+	class="ui5-carousel-root ui5-carousel-background-{{_backgroundDesign}}"
+	tabindex="0"
+	role="listbox"
+	aria-activedescendant="{{ariaActiveDescendant}}"
+	@focusin="{{_onfocusin}}"
+	@keydown={{_onkeydown}}
+	@mouseout="{{_onmouseout}}"
+	@mouseover="{{_onmouseover}}"
+>
+	<div class="{{classes.viewport}}" part="content">
+		<div class="{{classes.content}}" style="{{styles.content}}">
+			{{#each items}}
+				<div id="{{id}}"
+					class="ui5-carousel-item {{classes}}"
+					style="{{styles}}"
+					role="option"
+					aria-posinset="{{posinset}}"
+					aria-setsize="{{setsize}}"
+					part="item"
+				>
+					<slot name="{{this.item._individualSlot}}" tabindex="{{this.tabIndex}}"></slot>
+				</div>
+			{{/each}}
+		</div>
+		{{#if showArrows.content}}
+			<div class="ui5-carousel-navigation-arrows">
+				{{> arrow-back}}
+				{{> arrow-forward}}
+			</div>
+		{{/if}}
+	</div>
+
+	{{#if renderNavigation}}
+		<div class="{{classes.navigation}}">
+			{{#if showArrows.navigation}}
+				{{> arrow-back}}
+			{{/if}}
+
+			<div class="ui5-carousel-navigation">
+				{{#unless hidePageIndicator}}
+					{{#if isPageTypeDots}}
+						{{#each dots}}
+							<div
+								role="img"
+								aria-label="{{ariaLabel}}"
+								?active="{{active}}"
+								class="ui5-carousel-navigation-dot"
+							></div>
+						{{/each}}
+					{{else}}
+						<div class="ui5-carousel-navigation-text">{{selectedIndexToShow}}&nbsp;{{ofText}}&nbsp;{{pagesCount}}</div>
+					{{/if}}
+				{{/unless}}
+			</div>
+
+			{{#if showArrows.navigation}}
+				{{> arrow-forward}}
+			{{/if}}
+		</div>
+	{{/if}}
+	</div>
+</section>
+
+{{#*inline "arrow-back"}}
+	<ui5-button
+		arrow-back
+		tooltip="{{previousPageText}}"
+		class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
+		icon="slim-arrow-left"
+		tabindex="-1"
+		@click={{_navButtonClick}}
+	></ui5-button>
+{{/inline}}
+
+{{#*inline "arrow-forward"}}
+	<ui5-button
+		arrow-forward
+		tooltip="{{nextPageText}}"
+		class="ui5-carousel-navigation-button {{classes.navNextButton}}"
+		icon="slim-arrow-right"
+		tabindex="-1"
+		@click={{_navButtonClick}}
+	></ui5-button>
+{{/inline}}

package/src/CheckBox.hbs

@@ -0,0 +1,53 @@
+<div
+	class="ui5-checkbox-root {{classes.main}}"
+	role="checkbox"
+	part="root"
+	aria-checked="{{effectiveAriaChecked}}"
+	aria-readonly="{{ariaReadonly}}"
+	aria-disabled="{{effectiveAriaDisabled}}"
+	aria-label="{{ariaLabelText}}"
+	aria-labelledby="{{ariaLabelledBy}}"
+	aria-describedby="{{ariaDescribedBy}}"
+	aria-required="{{required}}"
+	tabindex="{{effectiveTabIndex}}"
+	@mousedown="{{_onmousedown}}"
+	@mouseup="{{_onmouseup}}"
+	@keydown="{{_onkeydown}}"
+	@keyup="{{_onkeyup}}"
+	@click="{{_onclick}}"
+	@focusout="{{_onfocusout}}"
+>
+
+	{{#if isDisplayOnly}}
+		<div class="ui5-checkbox-display-only-icon-inner">
+			<ui5-icon aria-hidden="true" name={{displayOnlyIcon}} class="ui5-checkbox-display-only-icon"></ui5-icon>
+		</div>
+	{{else}}
+		<div id="{{_id}}-CbBg" class="ui5-checkbox-inner">
+			{{#if isCompletelyChecked}}
+				<ui5-icon aria-hidden="true" name="accept" class="ui5-checkbox-icon"></ui5-icon>
+			{{/if}}
+		</div>
+	{{/if}}
+
+	<input
+		id="{{_id}}-CB"
+		type='checkbox'
+		?checked="{{checked}}"
+		?readonly="{{readonly}}"
+		?disabled="{{disabled}}"
+		tabindex="-1"
+		aria-hidden="true"
+		data-sap-no-tab-ref
+	/>
+
+	{{#if text}}
+		<ui5-label part="label" id="{{_id}}-label" class="ui5-checkbox-label" wrapping-type="{{wrappingType}}">{{text}}</ui5-label>
+	{{/if}}
+
+	{{#if hasValueState}}
+		<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
+	{{/if}}
+
+	<slot name="formSupport"></slot>
+</div>

package/src/ColorPalette.hbs

@@ -0,0 +1,52 @@
+<div
+	class="{{classes.colorPaletteRoot}}"
+	@click={{_onclick}}
+	@keyup={{_onkeyup}}
+	@keydown={{_onkeydown}}
+>
+	{{#if this.showDefaultColor}}
+		<div class="ui5-cp-default-color-button-wrapper">
+			<ui5-button 
+				class="ui5-cp-default-color-button"
+				design="Transparent" 
+				@click={{_onDefaultColorClick}}
+				@keydown={{_onDefaultColorKeyDown}}>{{colorPaletteDefaultColorText}}</ui5-button>
+			<div class="ui5-cp-separator"></div>
+		</div>
+	{{/if}}
+	<div class="ui5-cp-item-container" 
+		role="region"
+		aria-label="{{colorContainerLabel}}"
+		@keydown="{{_onColorContainerKeyDown}}"
+	>
+		{{#each this.displayedColors}}
+			<slot
+				name="{{this._individualSlot}}"
+			>
+			</slot>
+		{{/each}}
+	</div>
+
+	{{#if _showMoreColors}}
+		<div class="ui5-cp-more-colors-wrapper">
+			<div class="ui5-cp-separator"></div>
+			<ui5-button
+				design="Transparent"
+				class="ui5-cp-more-colors"
+				@click="{{_openMoreColorsDialog}}"
+				@keydown={{_onMoreColorsKeyDown}}
+			>{{colorPaletteMoreColorsText}}</ui5-button>
+		</div>
+	{{/if}}
+
+	{{#if showRecentColors}}
+		<div class="ui5-cp-recent-colors-wrapper">
+			<div class="ui5-cp-separator"></div>
+			<div class="ui5-cp-recent-colors-container" @keydown="{{_onRecentColorsContainerKeyDown}}">
+				{{#each recentColors}}
+					<ui5-color-palette-item value="{{this}}"></ui5-color-palette-item>
+				{{/each}}
+			</div>
+		</div>
+	{{/if}}
+</div>

package/src/ColorPaletteDialog.hbs

@@ -0,0 +1,18 @@
+<ui5-dialog
+    header-text="{{moreColorsFeature.colorPaletteDialogTitle}}"
+>
+    <div class="ui5-cp-dialog-content">
+        <ui5-color-picker></ui5-color-picker>
+    </div>
+
+    <div slot="footer" class="ui5-cp-dialog-footer">
+        <ui5-button
+            design="Emphasized"
+            @click="{{_chooseCustomColor}}"
+        >{{moreColorsFeature.colorPaletteDialogOKButton}}</ui5-button>
+        <ui5-button
+            design="Transparent"
+            @click="{{_closeDialog}}"
+        >{{moreColorsFeature.colorPaletteCancelButton}}</ui5-button>
+    </div>
+</ui5-dialog>

package/src/ColorPaletteItem.hbs

@@ -0,0 +1,11 @@
+<div
+	class="ui5-cp-item"
+	style="{{styles.root}}"
+	value="{{value}}"
+	tabindex="{{forcedTabIndex}}"
+	role="button"
+	aria-label="{{colorLabel}} - {{index}}: {{this.value}}"
+	title="{{colorLabel}} - {{index}}: {{this.value}}"
+	?disabled="{{_disabled}}"
+>
+</div>

package/src/ColorPalettePopover.hbs

@@ -0,0 +1,34 @@
+<ui5-responsive-popover
+	hide-arrow
+	content-only-on-desktop
+	placement-type="Bottom"
+	?open="{{_open}}"
+	.opener="{{opener}}"
+	@ui5-after-close="{{onAfterClose}}"
+>
+	<div slot="header" class="ui5-cp-header">
+		<ui5-title
+			class="ui5-cp-title"
+		>{{_colorPaletteTitle}}</ui5-title>
+	</div>
+	<div>
+		<ui5-color-palette
+			?show-more-colors="{{this.showMoreColors}}"
+			?show-recent-colors="{{this.showRecentColors}}"
+			?show-default-color="{{this.showDefaultColor}}"
+			default-color="{{this.defaultColor}}"
+			popup-mode
+			@ui5-item-click="{{onSelectedColor}}"
+		>
+			{{#each colorPaletteColors}}
+				<slot name="{{this._individualSlot}}"></slot>
+			{{/each}}
+		</ui5-color-palette>
+	</div>
+	<div slot="footer" class="ui5-cp-footer">
+		<ui5-button
+			design="Transparent"
+			@click="{{closePopover}}"
+		>{{_cancelButtonLabel}}</ui5-button>
+	</div>
+</ui5-responsive-popover>

package/src/ColorPicker.hbs

@@ -0,0 +1,106 @@
+<section dir="{{effectiveDir}}" class="ui5-color-picker-root"  >
+    <div
+        class="ui5-color-picker-main-color"
+        style="{{styles.mainColor}}"
+        @mousedown="{{_handleMouseDown}}"
+        @mouseup="{{_handleMouseUp}}"
+        @mousemove="{{_handleMouseMove}}"
+        @mouseout="{{_handleMouseOut}}"
+    >
+        <div
+            class="ui5-color-picker-circle"
+            style="{{styles.circle}}"
+        ></div>
+    </div>
+
+    <div class="ui5-color-picker-sliders-wrapper">
+        <ui5-slider
+            disabled="{{inputsDisabled}}"
+            class="ui5-color-picker-hue-slider"
+            min="0"
+            max="1530"
+            value="{{_hue}}"
+            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>
+    </div>
+
+    <div class="ui5-color-picker-current-color">
+        <div class="ui5-color-picker-colors-wrapper">
+            <span class="ui5-color-picker-white"></span>
+            <span class="ui5-color-picker-color">
+                <div class="ui5-color-picker-color-inner" style="{{styles.colorSpan}}"></div>
+            </span>
+        </div>
+
+        <div class="ui5-color-picker-hex-input-wrapper">
+            <ui5-label>Hex</ui5-label>
+            <ui5-input
+                class="ui5-color-picker-hex-input"
+                value="{{hex}}"
+                @keydown="{{_onkeydown}}"
+                accessible-name="{{hexInputLabel}}"
+                @ui5-change="{{_handleHEXChange}}"
+                value-state="{{hexInputErrorState}}"
+            ></ui5-input>
+        </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="{{_color.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="{{_color.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="{{_color.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>
+</section>

package/src/ComboBox.hbs

@@ -0,0 +1,51 @@
+<div class="ui5-combobox-root ui5-input-focusable-element">
+	{{#if hasValueState}}
+		<span id="value-state-description" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
+	{{/if}}
+
+	<input id="ui5-combobox-input"
+		.value="{{value}}"
+		inner-input
+		placeholder="{{placeholder}}"
+		?disabled={{disabled}}
+		?readonly={{readonly}}
+		value-state="{{valueState}}"
+		@keydown="{{_keydown}}"
+		@input="{{_input}}"
+		@change="{{_inputChange}}"
+		@click={{_click}}
+		@keyup="{{_keyup}}"
+		@focusin="{{_focusin}}"
+		@focusout="{{_focusout}}"
+		aria-expanded="{{open}}"
+		role="combobox"
+		aria-haspopup="listbox"
+		aria-autocomplete="both"
+		aria-describedby="value-state-description"
+		aria-label="{{ariaLabelText}}"
+		aria-required="{{required}}"
+		data-sap-focus-ref
+	/>
+
+	{{#if _effectiveShowClearIcon}}
+		<div @click={{_clear}} class="ui5-input-clear-icon-wrapper" input-icon tabindex="-1">
+			<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
+		</div>
+	{{/if}}
+
+	{{#if icon}}
+		<slot name="icon"></slot>
+	{{/if}}
+
+	{{#unless readonly}}
+		<ui5-icon
+			name="slim-arrow-down"
+			slot="icon"
+			tabindex="-1"
+			input-icon
+			?pressed="{{_iconPressed}}"
+			@click="{{_arrowClick}}"
+			accessible-name="{{_iconAccessibleNameText}}"
+		></ui5-icon>
+	{{/unless}}
+</div>