@ui5/webcomponents 0.0.0-e463d2345 → 0.0.0-e55c2cec6

package/src/themes/sap_horizon_hcw/TextArea-parameters.css

@@ -0,0 +1,42 @@
+@import "../base/TextArea-parameters.css";
+
+:root {
+	--_ui5_textarea_line_height: 1.5;
+	--_ui5_textarea_error_warning_border_style: dashed;
+	--_ui5_textarea_error_warning_font_weight: bold;
+	--_ui5_textarea_error_warning_font_style: italic;
+	--_ui5_textarea_value_state_error_warning_placeholder_font_weight: bold;
+	--_ui5_textarea_error_placeholder_font_style: normal;
+	--_ui5_textarea_placeholder_font_style: normal;
+	--_ui5_textarea_error_placeholder_color: var(--sapField_TextColor);
+	--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
+	--_ui5_textarea_information_border_width: var(--sapField_InformationBorderWidth);
+	--_ui5_textarea_error_warning_border_style: dashed;
+	--_ui5_textarea_padding_top_information: 0.4375rem;
+	--_ui5_textarea_padding_bottom_information: 0.375rem;
+	--_ui5_textarea_padding_top: 0.375rem;
+	--_ui5_textarea_padding_bottom: 0.3125rem;
+	--_ui5_textarea_padding_top_readonly: 0.375rem;
+	--_ui5_textarea_padding_bottom_readonly: 0.3125rem;
+	--_ui5_textarea_padding_top_error_warning: 0.375rem;
+	--_ui5_textarea_padding_bottom_error_warning: 0.3125rem;
+	--_ui5_textarea_padding_right_and_left: 0.5rem;
+	--_ui5_textarea_padding_right_and_left_information: 0.5625rem;
+	--_ui5_textarea_padding_right_and_left_readonly: 0.5rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_textarea_padding_top: 0.0625rem;
+	--_ui5_textarea_padding_bottom: 0rem;
+	--_ui5_textarea_padding_top_readonly: 0.0625rem;
+	--_ui5_textarea_padding_bottom_readonly: 0rem;
+	--_ui5_textarea_padding_top_error_warning: 0.0625rem;
+	--_ui5_textarea_padding_bottom_error_warning: 0rem;
+	--_ui5_textarea_padding_top_information: 0.125rem;
+	--_ui5_textarea_padding_bottom_information: 0.0625rem;
+	--_ui5_textarea_padding_right_and_left: 0.375rem;
+	--_ui5_textarea_padding_right_and_left_information: 0.4375rem;
+	--_ui5_textarea_padding_right_and_left_readonly: 0.375rem;
+}

package/src/themes/sap_horizon_hcw/TimePicker-parameters.css

@@ -0,0 +1,5 @@
+@import "../base/TimePicker-parameters.css";
+
+:root {
+	--_ui5_time_picker_border: 0.0625rem solid var(--sapField_Hover_BorderColor);
+}

package/src/themes/sap_horizon_hcw/ToggleButton-parameters.css

@@ -0,0 +1 @@
+@import "../base/ToggleButton-parameters.css";

package/src/themes/sap_horizon_hcw/Token-parameters.css

@@ -0,0 +1,19 @@
+@import "../base/Token-parameters.css";
+
+:root {
+	--_ui5_token_border_radius: 0.25rem;
+	--_ui5_token_focus_outline_width: 0.125rem;
+	--_ui5_token_readonly_background: var(--sapField_ReadOnly_Background);
+	--_ui5_token_selected_hover_background: var(--sapButton_Hover_Background);
+	--ui5_token_focus_pseudo_element_content: '';
+	--_ui5_token_selected_focus_outline: none;
+	--_ui5_token_focus_outline: none;
+	--_ui5_token_focus_offset: 0.0625rem;
+	--_ui5_token_focus_outline_border_radius: 0.25rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_token_focus_offset: 0.0625rem;
+}

package/src/themes/sap_horizon_hcw/ValueStateMessage-parameters.css

@@ -0,0 +1,13 @@
+@import "../base/ValueStateMessage-parameters.css";
+
+:root {
+	--_ui5_value_state_message_border: 2px solid var(--sapField_BorderColor);
+	--_ui5_input_value_state_icon_display: inline-block;
+	--_ui5_value_state_message_icon_width: 1rem;
+	--_ui5_value_state_message_icon_height: 1rem;
+	--_ui5_value_state_header_padding: .5rem .5rem .5rem 1.875rem;
+	--_ui5_value_state_message_padding: .5rem .5rem .5rem 1.875rem;
+	--_ui5_input_value_state_icon_offset: .625rem;
+	--_ui5_value_state_header_offset: -0.1875rem;
+	--_ui5_value_state_header_border_bottom: 2px solid var(--sapField_BorderColor);
+}

package/src/themes/sap_horizon_hcw/WheelSlider-parameters.css

@@ -0,0 +1,17 @@
+@import "../base/WheelSlider-parameters.css";
+
+:root{
+	--_ui5_wheelslider_item_background_color: var(--sapLegend_WorkingBackground);
+	--_ui5_wheelslider_item_text_color: var(--sapTextColor);
+	--_ui_wheelslider_item_hover_color: var(--sapList_Hover_Background);
+	--_ui_wheelslider_item_hovered_color: var(--sapList_Hover_Background);
+	--_ui5_wheelslider_item_border_color: var(--sapList_Background);
+	--_ui5_wheelslider_item_hovered_border_color: var(--sapField_BorderColor);
+	--_ui5_wheelslider_collapsed_item_text_color: var(--sapField_BorderColor);
+	--_ui5_wheelslider_selected_item_background_color: var(--sapContent_Selected_Background);
+	--_ui5_wheelslider_selected_item_hover_background_color: var(--sapButton_Emphasized_Hover_BorderColor);
+	--_ui5_wheelslider_active_item_background_color:var(--sapContent_Selected_Background);
+	--_ui5_wheelslider_active_item_text_color: var(--sapContent_Selected_TextColor);
+	--_ui5_wheelslider_selection_frame_color: var(--sapList_SelectionBorderColor);
+	--_ui_wheelslider_item_border_radius: var(--_ui5_button_border_radius);
+}

package/src/themes/sap_horizon_hcw/YearPicker-parameters.css

@@ -0,0 +1,12 @@
+@import "../base/YearPicker-parameters.css";
+
+:root {
+	--_ui5_yearpicker_item_border: 1px solid #000;
+	--_ui5_yearpicker_item_border_radius: 0.5rem;
+	--_ui5_yearpicker_item_focus_after_border_radius: 0.5rem;
+	--_ui5_yearpicker_item_margin: 0;
+	--_ui5_yearpicker_item_focus_after_width: calc(100% - 0.5rem);
+	--_ui5_yearpicker_item_focus_after_height: calc(100% - 0.5rem);
+	--_ui5_yearpicker_item_focus_after_border: 2px dotted var(--sapContent_FocusColor);
+	--_ui5_yearpicker_item_focus_after_offset: 0;
+}

package/src/themes/sap_horizon_hcw/parameters-bundle.css

@@ -0,0 +1,55 @@
+@import "./sizes-parameters.css";
+@import "../base/rtl-parameters.css";
+@import "./Avatar-parameters.css";
+@import "../base/AvatarGroup-parameters.css";
+@import "./Badge-parameters.css";
+@import "../base/BrowserScrollbar-parameters.css";
+@import "./BusyIndicator-parameters.css";
+@import "./Button-parameters.css";
+@import "./CalendarHeader-parameters.css";
+@import "./Carousel-parameters.css";
+@import "./Card-parameters.css";
+@import "./CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
+@import "./ColorPicker-parameters.css";
+@import "./DatePicker-parameters.css";
+@import "./DayPicker-parameters.css";
+@import "./Dialog-parameters.css";
+@import "./FileUploader-parameters.css";
+@import "../base/GroupHeaderListItem-parameters.css";
+@import "./Input-parameters.css";
+@import "./InputIcon-parameters.css";
+@import "./Link-parameters.css";
+@import "../base/List-parameters.css";
+@import "./ListItem-parameters.css";
+@import "../base/ListItemBase-parameters.css";
+@import "./Menu-parameters.css";
+@import "./MonthPicker-parameters.css";
+@import "./MessageStrip-parameters.css";
+@import "./Panel-parameters.css";
+@import "./PopupsCommon-parameters.css";
+@import "../sap_horizon_hcb/ProgressIndicator-parameters";
+@import "./RadioButton-parameters.css";
+@import "./RatingIndicator-parameters.css";
+@import "./SegmentedButtton-parameters.css";
+@import "./Select-parameters.css";
+@import "./SplitButton-parameters.css";
+@import "./Switch-parameters.css";
+@import "./TabContainer-parameters.css";
+@import "./Table-parameters.css";
+@import "../base/TableColumn-parameters.css";
+@import "./TableRow-parameters.css";
+@import "./TableGroupRow-parameters.css";
+@import "./GrowingButton-parameters.css";
+@import "./TextArea-parameters.css";
+@import "./TimePicker-parameters.css";
+@import "../base/Toast-parameters.css";
+@import "./ToggleButton-parameters.css";
+@import "./WheelSlider-parameters.css";
+@import "./YearPicker-parameters.css";
+@import "./Token-parameters.css";
+@import "../base/Tokenizer-parameters.css";
+@import "./ValueStateMessage-parameters.css";
+@import "../base/MultiComboBox-parameters.css";
+@import "./SliderBase-parameters.css";
+@import "../base/StepInput-parameters.css";

package/src/themes/sap_horizon_hcw/sizes-parameters.css

@@ -0,0 +1,9 @@
+@import "../base/sizes-parameters.css";
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	/* SplitButton */
+	--_ui5_split_button_text_button_width: 2.25rem;
+	--_ui5_color_picker_slider_container_margin_top: -10px;
+}

package/src/timepicker-utils/TimeSlider.ts

@@ -0,0 +1,120 @@
+type HoursConfiguration = {
+	minHour: number,
+	maxHour: number
+	isTwelveHoursFormat: boolean,
+}
+
+type HourType = "hour0_23" | "hour1_24" | "hour0_11" | "hour1_12";
+
+const generateTimeItemsArray = (x: number, step = 1) => {
+	const array: Array<string> = [];
+	for (let i = 0; i < x; i++) {
+		if (i % step === 0) {
+			let tempString = i.toString();
+			if (tempString.length === 1) {
+				tempString = `0${tempString}`;
+			}
+
+			array.push(tempString);
+		}
+	}
+
+	return array;
+};
+
+const getHours = (config: HoursConfiguration, max: number | undefined) => {
+	let hoursValueArray = [];
+
+	if (config.isTwelveHoursFormat) {
+		hoursValueArray = generateTimeItemsArray(max || 12, 1);
+	} else {
+		hoursValueArray = generateTimeItemsArray(max || 24, 1);
+	}
+
+	if (config.minHour === 1) {
+		for (let i = 0; i < hoursValueArray.length; i++) {
+			const tempValue = parseInt(hoursValueArray[i]) + 1;
+
+			if (tempValue.toString().length === 1) {
+				hoursValueArray[i] = `0${tempValue.toString()}`;
+			} else {
+				hoursValueArray[i] = tempValue.toString();
+			}
+		}
+	}
+
+	return hoursValueArray;
+};
+
+const getMinutes = (max: number | undefined, step: number) => {
+	return generateTimeItemsArray(max || 60, step);
+};
+
+const getSeconds = (max: number | undefined, step: number) => {
+	return generateTimeItemsArray(max || 60, step);
+};
+
+const getHoursConfigByFormat = (type: HourType) => {
+	const config: HoursConfiguration = {
+		minHour: 0,
+		maxHour: 0,
+		isTwelveHoursFormat: false,
+	};
+
+	if (type === "hour0_23") {
+		config.minHour = 0;
+		config.maxHour = 23;
+		config.isTwelveHoursFormat = false;
+	} else if (type === "hour1_24") {
+		config.minHour = 1;
+		config.maxHour = 24;
+		config.isTwelveHoursFormat = false;
+	} else if (type === "hour0_11") {
+		config.minHour = 0;
+		config.maxHour = 11;
+		config.isTwelveHoursFormat = true;
+	} else if (type === "hour1_12") {
+		config.minHour = 1;
+		config.maxHour = 12;
+		config.isTwelveHoursFormat = true;
+	}
+
+	return config;
+};
+
+const getTimeControlsByFormat = (formatArray: Array<{ type: string }>, hoursConfig: HoursConfiguration) => {
+	const timeControls = [false, false, false, false]; // hours, minutes, seconds and am/pm
+
+	for (let i = 0; i < formatArray.length; i++) {
+		if (hoursConfig.maxHour !== 0) {
+			timeControls[0] = true;
+		}
+		if (hoursConfig.maxHour !== 0 && hoursConfig.isTwelveHoursFormat) {
+			timeControls[0] = true;
+		}
+		if (formatArray[i].type === "minute") {
+			timeControls[1] = true;
+		}
+		if (formatArray[i].type === "second") {
+			timeControls[2] = true;
+		}
+		if (formatArray[i].type === "amPmMarker") {
+			timeControls[3] = true;
+		}
+	}
+
+	return timeControls;
+};
+
+export {
+	getHours,
+	getMinutes,
+	getSeconds,
+	getHoursConfigByFormat,
+	getTimeControlsByFormat,
+};
+
+export type {
+	HourType,
+	HoursConfiguration,
+};

package/src/types/AvatarColorScheme.ts

@@ -0,0 +1,89 @@
+/**
+ * Different types of AvatarColorScheme.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.AvatarColorScheme
+ */
+enum AvatarColorScheme {
+	/**
+	 *
+	 * @public
+	 * @type {Accent1}
+	 */
+	Accent1 = "Accent1",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent2}
+	 */
+	Accent2 = "Accent2",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent3}
+	 */
+	Accent3 = "Accent3",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent4}
+	 */
+	Accent4 = "Accent4",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent5}
+	 */
+	Accent5 = "Accent5",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent6}
+	 */
+	Accent6 = "Accent6",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent7}
+	 */
+	Accent7 = "Accent7",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent8}
+	 */
+	Accent8 = "Accent8",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent9}
+	 */
+	Accent9 = "Accent9",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent10}
+	 */
+	Accent10 = "Accent10",
+
+	/**
+	 *
+	 * @public
+	 * @type {Placeholder}
+	 */
+	Placeholder = "Placeholder",
+}
+
+export default AvatarColorScheme;

package/src/types/AvatarGroupType.ts

@@ -0,0 +1,28 @@
+/**
+ * Different types of AvatarGroupType.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.AvatarGroupType
+ */
+enum AvatarGroupType {
+	/**
+	 * The avatars are displayed as partially overlapped on top of each other and the entire group has one click or tap area.
+	 *
+	 * @public
+	 * @type {Group}
+	 */
+	Group = "Group",
+
+	/**
+	 * The avatars are displayed side-by-side and each avatar has its own click or tap area.
+	 *
+	 * @public
+	 * @type {Individual}
+	 */
+	Individual = "Individual",
+}
+
+export default AvatarGroupType;

package/src/types/AvatarShape.ts

@@ -0,0 +1,26 @@
+/**
+ * Different types of AvatarShape.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.AvatarShape
+ */
+enum AvatarShape {
+	/**
+	 * Circular shape.
+	 * @public
+	 * @type {Circle}
+	 */
+	Circle = "Circle",
+
+	/**
+	 * Square shape.
+	 * @public
+	 * @type {Square}
+	 */
+	Square = "Square",
+}
+
+export default AvatarShape;

package/src/types/AvatarSize.ts

@@ -0,0 +1,52 @@
+/**
+ * Different types of AvatarSize.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.AvatarSize
+ */
+enum AvatarSize {
+	/**
+	 * component size - 2rem
+	 * font size - 1rem
+	 * @public
+	 * @type { XS }
+	 */
+	XS = "XS",
+
+	/**
+	 * component size - 3rem
+	 * font size - 1.5rem
+	 * @public
+	 * @type { S }
+	 */
+	S = "S",
+
+	/**
+	 * component size - 4rem
+	 * font size - 2rem
+	 * @public
+	 * @type { M }
+	 */
+	M = "M",
+
+	/**
+	 * component size - 5rem
+	 * font size - 2.5rem
+	 * @public
+	 * @type { L }
+	 */
+	L = "L",
+
+	/**
+	 * component size - 7rem
+	 * font size - 3rem
+	 * @public
+	 * @type { XL }
+	 */
+	XL = "XL",
+}
+
+export default AvatarSize;

package/src/types/BreadcrumbsDesign.ts

@@ -0,0 +1,28 @@
+/**
+ * Different  Breadcrumbs designs.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.BreadcrumbsDesign
+ */
+enum BreadcrumbsDesign {
+	/**
+	 * Shows the current page as the last item in the trail.
+	 * The last item contains only plain text and is not a link.
+	 *
+	 * @public
+	 * @type {Standard}
+	 */
+	Standard = "Standard",
+
+	/**
+	 * All items are displayed as links.
+	 * @public
+	 * @type {NoCurrentPage}
+	 */
+	NoCurrentPage = "NoCurrentPage",
+}
+
+export default BreadcrumbsDesign;

package/src/types/BreadcrumbsSeparatorStyle.ts

@@ -0,0 +1,55 @@
+/**
+ * Different Breadcrumbs separator styles.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.BreadcrumbsSeparatorStyle
+ */
+enum BreadcrumbsSeparatorStyle {
+
+	/**
+	 * The separator appears as "/".
+	 * @public
+	 * @type {Slash}
+	 */
+	Slash = "Slash",
+
+	/**
+	 * The separator appears as "\".
+	 * @public
+	 * @type {BackSlash}
+	 */
+	BackSlash = "BackSlash",
+
+	/**
+	 * The separator appears as "\\".
+	 * @public
+	 * @type {DoubleBackSlash}
+	 */
+	DoubleBackSlash = "DoubleBackSlash",
+
+	/**
+	 * The separator appears as ">>".
+	 * @public
+	 * @type {DoubleGreaterThan}
+	 */
+	DoubleGreaterThan = "DoubleGreaterThan",
+
+	/**
+	 * The separator appears as "//" .
+	 * @public
+	 * @type {DoubleSlash}
+	 */
+	DoubleSlash = "DoubleSlash",
+
+	/**
+	 * The separator appears as ">".
+	 * @public
+	 * @type {GreaterThan}
+	 */
+	GreaterThan = "GreaterThan",
+}
+
+export default BreadcrumbsSeparatorStyle;

package/src/types/BusyIndicatorSize.ts

@@ -0,0 +1,33 @@
+/**
+ * Different BusyIndicator sizes.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.BusyIndicatorSize
+ */
+enum BusyIndicatorSize {
+	/**
+	 * small size
+	 * @public
+	 * @type {Small}
+	 */
+	Small = "Small",
+
+	/**
+	 * medium size
+	 * @public
+	 * @type {Medium}
+	 */
+	Medium = "Medium",
+
+	/**
+	 * large size
+	 * @public
+	 * @type {Large}
+	 */
+	Large = "Large",
+}
+
+export default BusyIndicatorSize;

package/src/types/ButtonDesign.ts

@@ -0,0 +1,54 @@
+/**
+ * Different Button designs.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.ButtonDesign
+ */
+enum ButtonDesign {
+	/**
+	 * default type (no special styling)
+	 * @public
+	 * @type {Default}
+	 */
+	Default = "Default",
+
+	/**
+	 * accept type (green button)
+	 * @public
+	 * @type {Positive}
+	 */
+	Positive = "Positive",
+
+	/**
+	 * reject style (red button)
+	 * @public
+	 * @type {Negative}
+	 */
+	Negative = "Negative",
+
+	/**
+	 * transparent type
+	 * @public
+	 * @type {Transparent}
+	 */
+	Transparent = "Transparent",
+
+	/**
+	 * emphasized type
+	 * @public
+	 * @type {Emphasized}
+	 */
+	Emphasized = "Emphasized",
+
+	/**
+	 * attention type
+	 * @public
+	 * @type {Attention}
+	 */
+	Attention = "Attention",
+}
+
+export default ButtonDesign;