@ui5/webcomponents 2.5.0-rc.3 → 2.6.0-rc.0

package/src/AvatarTemplate.tsx

@@ -0,0 +1,38 @@
+import type Avatar from "./Avatar.js";
+import Icon from "./Icon.js";
+
+export default function AvatarTemplate(this: Avatar) {
+	return (
+		<div
+			class="ui5-avatar-root"
+			tabindex={this.tabindex}
+			data-sap-focus-ref
+			role={this._role}
+			aria-haspopup={this._ariaHasPopup}
+			aria-label={this.accessibleNameText}
+			onKeyUp={this._onkeyup}
+			onKeyDown={this._onkeydown}
+			onClick={this._onclick}
+		>
+			{this.hasImage ?
+				<slot></slot>
+				:
+				<>
+					{ this.icon && <Icon class="ui5-avatar-icon" name={this.icon}></Icon> }
+
+					{ this.initials &&
+					<>
+						<span class="ui5-avatar-initials ui5-avatar-initials-hidden">{this.validInitials}</span>
+						<Icon
+							name={this.fallbackIcon}
+							class="ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden"
+						></Icon>
+					</>
+					}
+				</>
+			}
+
+			<slot name="badge"></slot>
+		</div>
+	);
+}

package/src/BarTemplate.tsx

@@ -0,0 +1,21 @@
+import type Bar from "./Bar.js";
+
+export default function BarTemplate(this: Bar) {
+	return (
+		<div
+			class="ui5-bar-root"
+			aria-label={this.accInfo.label}
+			role="toolbar"
+			part="bar"
+		>
+			<div class="ui5-bar-content-container ui5-bar-startcontent-container" part="startContent">
+				<slot name="startContent"></slot>
+			</div>
+			<div class="ui5-bar-content-container ui5-bar-midcontent-container" part="midContent">
+				<slot></slot>
+			</div>
+			<div class="ui5-bar-content-container ui5-bar-endcontent-container" part="endContent">
+				<slot name="endContent"></slot>
+			</div>
+		</div>);
+}

package/src/BreadcrumbsPopoverTemplate.tsx

@@ -0,0 +1,43 @@
+import type Breadcrumbs from "./Breadcrumbs.js";
+import Button from "./Button.js";
+import List from "./List.js";
+import ListItemStandard from "./ListItemStandard.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+
+export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
+	return (
+		<ResponsivePopover
+			class="ui5-breadcrumbs-popover"
+			hideArrow={true}
+			_hideHeader={true}
+			contentOnlyOnDesktop={true}
+			placement="Bottom"
+			horizontalAlign="Start"
+			accessibleName={this._accessibleNamePopover}
+			onKeyDown={this._onkeydown}
+		>
+			<List
+				selectionMode="Single"
+				separators="None"
+				onSelectionChange={this._onOverflowListItemSelect}
+			>
+				{this._overflowItemsData.map(item =>
+					<ListItemStandard
+						id={`${item._id}-li`}
+						accessibleName={item.accessibleName}
+						data-ui5-stable={item.stableDomRef}
+					>
+						{item.textContent}
+					</ListItemStandard>
+				)}
+			</List>
+
+			<div slot="footer" class="ui5-breadcrumbs-popover-footer">
+				<Button
+					design="Transparent"
+					onClick={this._closeRespPopover}
+				>{this._cancelButtonText}</Button>
+			</div>
+		</ResponsivePopover>
+	);
+}

package/src/BreadcrumbsTemplate.tsx

@@ -0,0 +1,71 @@
+import type Breadcrumbs from "./Breadcrumbs.js";
+import BreadcrumbsPopoverTemplate from "./BreadcrumbsPopoverTemplate.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import Icon from "./Icon.js";
+import Link from "./Link.js";
+import Label from "./Label.js";
+
+export default function BreadcrumbsTemplate(this: Breadcrumbs) {
+	return (
+		<>
+			<nav class="ui5-breadcrumbs-root" aria-label={this._accessibleNameText}>
+				<ol
+					onFocusIn={this._onfocusin}
+					onKeyDown={this._onkeydown}
+					onKeyUp={this._onkeyup}>
+
+					<li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper" hidden={this._isOverflowEmpty}>
+						<Link
+							wrappingType="None"
+							accessibleRole="Button"
+							accessibleName={this._dropdownArrowAccessibleNameText}
+							accessibilityAttributes={this.linkAccessibilityAttributes}
+							onClick={this._openRespPopover}
+						>
+							<Icon name={slimArrowDown} title={this._dropdownArrowAccessibleNameText}/>
+						</Link>
+					</li>
+
+					{this._linksData.map(linkData =>
+						<li id={`${linkData._id}-link-wrapper`} class="ui5-breadcrumbs-link-wrapper">
+							<Link
+								id={`${linkData._id}-link`}
+								href={linkData.href}
+								target={linkData.target}
+								design={linkData._linkDesign}
+								accessibleName={linkData._accessibleNameText}
+								accessibilityAttributes={linkData.accessibilityAttributes}
+								data-ui5-stable={linkData.stableDomRef}
+								wrappingType="None"
+								onClick={this._onLinkPress}
+							>
+								{linkData.innerText}
+							</Link>
+
+							{linkData._needsSeparator &&
+							<span class="ui5-breadcrumbs-separator" aria-hidden="true"></span>
+							}
+						</li>
+					)}
+
+					{!this._endsWithCurrentLinkItem && this._endsWithCurrentLocation &&
+					<li class="ui5-breadcrumbs-current-location" onClick={this._onLabelPress}>
+						<span
+							id={`${this._id}-labelWrapper`}
+							role="link"
+							aria-current="page"
+							aria-label={this._currentLocationAccName}
+						>
+							<Label>
+								{this._currentLocationText}
+							</Label>
+						</span>
+					</li>
+					}
+				</ol>
+			</nav>
+
+			{ BreadcrumbsPopoverTemplate.call(this) }
+		</>
+	);
+}

package/src/BusyIndicatorTemplate.tsx

@@ -0,0 +1,51 @@
+import type BusyIndicator from "./BusyIndicator.js";
+import Label from "./Label.js";
+
+export default function BusyIndicatorTemplate(this: BusyIndicator) {
+	return (
+		<div class="ui5-busy-indicator-root">
+			{this._isBusy && (
+				<div
+					class="ui5-busy-indicator-busy-area"
+					title={this.ariaTitle}
+					tabindex={0}
+					role="progressbar"
+					aria-valuemin={0}
+					aria-valuemax={100}
+					aria-valuetext="Busy"
+					aria-labelledby={this.labelId}
+					data-sap-focus-ref
+				>
+					{this.textPosition.top && BusyIndicatorBusyText.call(this)}
+					<div class="ui5-busy-indicator-circles-wrapper">
+						<div class="ui5-busy-indicator-circle circle-animation-0"></div>
+						<div class="ui5-busy-indicator-circle circle-animation-1"></div>
+						<div class="ui5-busy-indicator-circle circle-animation-2"></div>
+					</div>
+					{this.textPosition.bottom && BusyIndicatorBusyText.call(this)}
+				</div>
+			)}
+			<slot></slot>
+			{this._isBusy && (
+				<span
+					data-ui5-focus-redirect
+					tabindex={0}
+					onFocusIn={this._redirectFocus}
+				></span>
+			)}
+		</div>
+	);
+}
+
+function BusyIndicatorBusyText(this: BusyIndicator) {
+	return (<>
+		{this.text && (
+			<Label
+				id={`${this._id}-label`}
+				class="ui5-busy-indicator-text"
+			>
+				{this.text}
+			</Label>
+		)}
+	</>);
+}

package/src/ButtonTemplate.tsx

@@ -0,0 +1,70 @@
+import type Button from "./Button.js";
+import Icon from "./Icon.js";
+
+export default function ButtonTemplate(this: Button, injectedProps?: {
+		ariaPressed?: boolean,
+		ariaValueMax?: number,
+		ariaValueMin?: number,
+		ariaValueNow?: number,
+		ariaValueText?: string,
+}) {
+	return (<>
+		<button
+			type="button"
+			class="ui5-button-root"
+			disabled={this.disabled}
+			data-sap-focus-ref
+			aria-pressed={injectedProps?.ariaPressed}
+			aria-valuemin={injectedProps?.ariaValueMin}
+			aria-valuemax={injectedProps?.ariaValueMax}
+			aria-valuenow={injectedProps?.ariaValueNow}
+			aria-valuetext={injectedProps?.ariaValueText}
+			onFocusOut={this._onfocusout}
+			onClick={this._onclick}
+			onMouseDown={this._onmousedown}
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onkeyup}
+			onTouchStart={this._ontouchstart}
+			onTouchEnd={this._ontouchend}
+			tabindex={this.tabIndexValue}
+			aria-expanded={this.accessibilityAttributes.expanded}
+			aria-controls={this.accessibilityAttributes.controls}
+			aria-haspopup={this._hasPopup}
+			aria-label={this.ariaLabelText}
+			aria-describedby={this.ariaDescribedbyText}
+			aria-description={this.ariaDescriptionText}
+			title={this.buttonTitle}
+			part="button"
+			role={this.effectiveAccRole}
+		>
+			{ this.icon &&
+				<Icon
+					class="ui5-button-icon"
+					name={this.icon}
+					mode="Decorative"
+					part="icon"
+					showTooltip={this.showIconTooltip}
+				/>
+			}
+
+			<span id={`${this._id}-content`} class="ui5-button-text">
+				<bdi>
+					<slot></slot>
+				</bdi>
+			</span>
+
+			{this.endIcon &&
+				<Icon
+					class="ui5-button-end-icon"
+					name={this.endIcon}
+					mode="Decorative"
+					part="endIcon"
+				/>
+			}
+
+			{this.hasButtonType &&
+				<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">{this.buttonTypeText}</span>
+			}
+		</button>
+	</>);
+}

package/src/CalendarHeaderTemplate.tsx

@@ -0,0 +1,71 @@
+import type Calendar from "./Calendar.js";
+import Icon from "./Icon.js";
+
+import slimArowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import slimArowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+export default function CalendarTemplate(this: Calendar) {
+	return (
+		<div class="ui5-calheader-root">
+			<div
+				data-ui5-cal-header-btn-prev
+				class={{
+					"ui5-calheader-arrowbtn": true,
+					"ui5-calheader-arrowbtn-disabled": this._previousButtonDisabled,
+				}}
+				role="button"
+				onMouseDown={this.onPrevButtonClick}
+				title={this.headerPreviousButtonText}
+			>
+				<Icon class="ui5-calheader-arrowicon" name={slimArowLeft}/>
+			</div>
+
+			<div class="ui5-calheader-midcontainer">
+				<div
+					data-ui5-cal-header-btn-month
+					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					hidden={this._isHeaderMonthButtonHidden}
+					tabindex={0}
+					role="button"
+					aria-label={this.accInfo.ariaLabelMonthButton}
+					onClick={this.onHeaderShowMonthPress}
+					onKeyDown={this.onMonthButtonKeyDown}
+					onKeyUp={this.onMonthButtonKeyUp}
+				>
+					<span>{this._headerMonthButtonText}</span>
+					{this.hasSecondaryCalendarType &&
+						<span class="ui5-calheader-btn-sectext">{this.secondMonthButtonText}</span>
+					}
+				</div>
+
+				<div
+					data-ui5-cal-header-btn-year
+					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					hidden={this._isHeaderYearButtonHidden}
+					tabindex={0}
+					role="button"
+					onClick={this.onHeaderShowYearPress}
+					onKeyDown={this.onYearButtonKeyDown}
+					onKeyUp={this.onYearButtonKeyUp}
+				>
+					<span>{this._headerYearButtonText}</span>
+					{this.hasSecondaryCalendarType &&
+						<span class="ui5-calheader-btn-sectext">{this._headerYearButtonTextSecType}</span>
+					}
+				</div>
+			</div>
+
+			<div
+				data-ui5-cal-header-btn-next
+				class={{
+					"ui5-calheader-arrowbtn": true,
+					"ui5-calheader-arrowbtn-disabled": this._nextButtonDisabled,
+				}}
+				role="button"
+				onMouseDown={this.onNextButtonClick}
+				title={this.headerNextButtonText}
+			>
+				<Icon class="ui5-calheader-arrowicon" name={slimArowRight}/>
+			</div>
+		</div>);
+}

package/src/CalendarLegendItemTemplate.tsx

@@ -0,0 +1,15 @@
+import type CalendarLegendItem from "./CalendarLegendItem.js";
+
+export default function CalendarLegendItemTemplate(this: CalendarLegendItem) {
+	return (
+		<div
+			class="ui5-calendar-legend-item-root"
+			// TOFIX: update after changing ITabbable
+			tabindex={parseInt(this.forcedTabIndex)}
+			role="listitem"
+		>
+			<div class="ui5-calendar-legend-item-box"></div>
+			<div class="ui5-calendar-legend-item-text">{this.effectiveText}</div>
+		</div>
+	);
+}

package/src/CalendarLegendTemplate.tsx

@@ -0,0 +1,22 @@
+import type CalendarLegend from "./CalendarLegend.js";
+import CalendarLegendItem from "./CalendarLegendItem.js";
+
+export default function CalendarLegendTemplate(this: CalendarLegend) {
+	return (
+		<div class="ui5-calendar-legend-root"
+			onFocusOut={this._onFocusOut}
+			onFocusIn={this._onFocusIn}
+			onKeyDown={this._onItemKeyDown}
+			onMouseDown={this._onMouseDown}
+			role="list"
+			aria-roledescription={this._roleDescription}
+		>
+			{this.defaultItemsMapping.filter(item => !item.hide).map(item =>
+				<CalendarLegendItem type={item.type}/>
+			)}
+
+			{this.legendItems.map(item =>
+				<slot name={item._individualSlot}></slot>
+			)}
+		</div>);
+}

package/src/CalendarTemplate.tsx

@@ -0,0 +1,82 @@
+import type Calendar from "./Calendar.js";
+import DayPicker from "./DayPicker.js";
+import MonthPicker from "./MonthPicker.js";
+import YearPicker from "./YearPicker.js";
+import CalendarHeaderTemplate from "./CalendarHeaderTemplate.js";
+
+export default function CalendarTemplate(this: Calendar) {
+	return (
+		<>
+			<div
+				class="ui5-cal-root"
+				onKeyDown={this._onkeydown}
+			>
+				<div id={`${this._id}-content`} class="ui5-cal-content">
+					<DayPicker
+						id={`${this._id}-daypicker`}
+						hidden={this._isDayPickerHidden}
+						formatPattern={this._formatPattern}
+						selectedDates={this._selectedDatesTimestamps}
+						specialCalendarDates={this._specialCalendarDates}
+						_hidden={this._isDayPickerHidden}
+						primaryCalendarType={this._primaryCalendarType}
+						secondaryCalendarType={this._secondaryCalendarType}
+						selectionMode={this.selectionMode}
+						minDate={this.minDate}
+						maxDate={this.maxDate}
+						calendarWeekNumbering={this.calendarWeekNumbering}
+						timestamp={this._timestamp}
+						hideWeekNumbers={this.hideWeekNumbers}
+						onChange={this.onSelectedDatesChange}
+						onNavigate={this.onNavigate}
+						exportparts="day-cell, day-cell-selected, day-cell-selected-between"
+					/>
+
+					<MonthPicker
+						id={`${this._id}-MP`}
+						hidden={this._isMonthPickerHidden}
+						formatPattern={this._formatPattern}
+						selectedDates={this._selectedDatesTimestamps}
+						_hidden={this._isMonthPickerHidden}
+						primaryCalendarType={this._primaryCalendarType}
+						secondaryCalendarType={this._secondaryCalendarType}
+						selectionMode={this.selectionMode}
+						minDate={this.minDate}
+						maxDate={this.maxDate}
+						timestamp={this._timestamp}
+						onChange={this.onSelectedMonthChange}
+						onNavigate={this.onNavigate}
+						exportparts="month-cell, month-cell-selected, month-cell-selected-between"
+					/>
+
+					<YearPicker
+						id={`${this._id}-YP`}
+						hidden={this._isYearPickerHidden}
+						formatPattern={this._formatPattern}
+						selectedDates={this._selectedDatesTimestamps}
+						_hidden={this._isYearPickerHidden}
+						primaryCalendarType={this._primaryCalendarType}
+						secondaryCalendarType={this._secondaryCalendarType}
+						selectionMode={this.selectionMode}
+						minDate={this.minDate}
+						maxDate={this.maxDate}
+						timestamp={this._timestamp}
+						onChange={this.onSelectedYearChange}
+						onNavigate={this.onNavigate}
+						exportparts="year-cell, year-cell-selected, year-cell-selected-between"
+					/>
+				</div>
+
+				<div class="ui5-calheader">
+					{ CalendarHeaderTemplate.call(this) }
+				</div>
+			</div>
+
+			<div
+				onui5-calendar-legend-selection-change={this._onCalendarLegendSelectionChange}
+				onui5-calendar-legend-focus-out={this._onLegendFocusOut}
+			>
+				<slot name="calendarLegend"></slot>
+			</div>
+		</>);
+}

package/src/CardHeaderTemplate.tsx

@@ -0,0 +1,70 @@
+import type CardHeader from "./CardHeader.js";
+import { isFirefox } from "@ui5/webcomponents-base/dist/Device.js";
+
+export default function CardHeaderTemplate(this: CardHeader) {
+	return (
+		<div
+			id={`${this._id}--header`}
+			class={{
+				"ui5-card-header": true,
+				"ui5-card-header--interactive": this.interactive,
+				"ui5-card-header--active": this.interactive && this._headerActive,
+				"ui5-card-header-ff": isFirefox(),
+			}}
+			part="root"
+			role="group"
+			aria-roledescription={this.ariaRoleDescription}
+			onClick={this._click}
+			onKeyDown={this._keydown}
+			onKeyUp={this._keyup}
+		>
+			<div
+				class="ui5-card-header-focusable-element"
+				aria-labelledby={this.ariaLabelledBy}
+				role={this.ariaRoleFocusableElement}
+				data-sap-focus-ref
+				tabindex={0}
+			>
+				{this.hasAvatar &&
+					<div id={`${this._id}-avatar`} class="ui5-card-header-avatar" aria-label={this.ariaCardAvatarLabel}>
+						<slot name="avatar"></slot>
+					</div>
+				}
+
+				<div class="ui5-card-header-text">
+					<div class="ui5-card-header-first-line">
+						{this.titleText &&
+							<div
+								id={`${this._id}-title`}
+								class="ui5-card-header-title"
+								part="title"
+								role="heading"
+								aria-level={3}
+							>{this.titleText}</div>
+						}
+
+						{this.additionalText &&
+							<div class="ui5-card-header-additionalText">
+								<span id={`${this._id}-additionalText`} part="additional-text" dir="auto">{this.additionalText}</span>
+							</div>
+						}
+					</div>
+
+					{this.subtitleText &&
+						<div id={`${this._id}-subtitle`} class="ui5-card-header-subtitle" part="subtitle">{this.subtitleText}</div>
+					}
+				</div>
+			</div>
+
+			{this.hasAction &&
+				<div
+					class="ui5-card-header-action"
+					onFocusIn={this._actionsFocusin}
+					onFocusOut={this._actionsFocusout}
+				>
+					<slot name="action"></slot>
+				</div>
+			}
+		</div>
+	);
+}

package/src/CardTemplate.tsx

@@ -0,0 +1,35 @@
+import type Card from "./Card.js";
+import BusyIndicator from "./BusyIndicator.js";
+
+export default function CardTemplate(this: Card) {
+	return (
+		<div
+			part="root"
+			role="region"
+			class={{
+				"ui5-card-root": true,
+				"ui5-card--interactive": this._hasHeader && this.header[0].interactive,
+				"ui5-card--nocontent": !this.content.length,
+			}}
+			aria-label={this._getAriaLabel}
+		>
+			<BusyIndicator
+				id={`${this._id}-busyIndicator`}
+				delay={this.loadingDelay}
+				active={this.loading}
+				class="ui5-card-busy-indicator"
+			>
+				<div class="ui5-card-inner">
+					{this._hasHeader &&
+						<div class="ui5-card-header-root">
+							<slot name="header"></slot>
+						</div>
+					}
+					<div role="group" aria-label={this._ariaCardContentLabel} part="content">
+						<slot></slot>
+					</div>
+				</div>
+			</BusyIndicator>
+		</div>
+	);
+}