feat(ui5-calendar-legend): introduce ui5-calendar-legend component

packages/main/bundle.common.js

@@ -32,6 +32,8 @@ import Badge from "./dist/Badge.js";
 import Breadcrumbs from "./dist/Breadcrumbs.js";
 import BusyIndicator from "./dist/BusyIndicator.js";
 import Button from "./dist/Button.js";
+import CalendarLegend from "./dist/CalendarLegend.js";
+import CalendarLegendStandardItem from "./dist/CalendarLegendStandardItem.js";
 import Card from "./dist/Card.js";
 import CardHeader from "./dist/CardHeader.js";
 import Carousel from "./dist/Carousel.js";

packages/main/src/CalendarLegend.hbs

@@ -0,0 +1,3 @@
+<div class="ui5-calendar-legend-root">
+	<slot></slot>
+</div>

packages/main/src/CalendarLegend.ts

@@ -0,0 +1,131 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import CalendarLegendStandardItemsType from "./types/StandardCalendarLegendItemsType.js";
+import CalendarLegendTemplate from "./generated/templates/CalendarLegendTemplate.lit.js";
+
+// Styles
+import CalendarLegendCss from "./generated/themes/CalendarLegend.css.js";
+import CalendarLegendStandardItem from "./CalendarLegendStandardItem.js";
+
+/**
+ * @class CalendarLegend
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-calendar-legend</code> component is used to display a legend of special calendar dates
+ * with their corresponding textual descriptions and types.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/CalendarLegend.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.CalendarLegend
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-calendar-legend
+ * @public
+ */
+@customElement({
+	tag: "ui5-calendar-legend",
+	renderer: litRender,
+	styles: CalendarLegendCss,
+	template: CalendarLegendTemplate,
+	dependencies: [CalendarLegendStandardItem],
+})
+class CalendarLegend extends UI5Element {
+	/**
+	 * Defines the items of the component.
+	 *
+	 * @type {CalendarLegendStandardItem[]}
+	 * @slot
+	 * @public
+	 */
+	@slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
+	items!: Array<CalendarLegendStandardItem>
+
+	constructor() {
+		super();
+	}
+
+	onBeforeRendering() {
+		this._ensureMaxItemsCount();
+		this._addDefaultItemsIfNeeded();
+		this._removeDuplicateTypes();
+
+		this.items.forEach(item => {
+			if (!(item.type in CalendarLegendStandardItemsType)) {
+				item.remove();
+			}
+		});
+	}
+
+	/**
+	 * Ensures that there are no more than 4 items.
+	 * If there are more, removes the items after the 4th one.
+	 * <br><br>
+	 *
+	 * Note: Change/Remove this method when Custom Calendar Legend items are introduced.
+	 *
+	 * @private
+	 */
+	_ensureMaxItemsCount() {
+		while (this.items.length > 4) {
+			this.items[this.items.length - 1].remove();
+			this.items.pop();
+		}
+	}
+
+	/**
+	 * Adds default items if none are present.
+	 * @private
+	 */
+	_addDefaultItemsIfNeeded() {
+		if (this.items.length === 0) {
+			const itemsToAdd = this._generateDefaultItems();
+			itemsToAdd.forEach(item => {
+				this.appendChild(item);
+			});
+		}
+	}
+
+	/**
+	 * Generates default items.
+	 * @returns {HTMLElement[]} Array of items to add.
+	 * @private
+	 */
+	_generateDefaultItems() {
+		const types = Object.values(CalendarLegendStandardItemsType);
+		const itemsToAdd: Array<HTMLElement> = [];
+
+		types.forEach(type => {
+			const item = document.createElement("ui5-cal-legend-standard-item");
+			item.setAttribute("type", type);
+			item.textContent = type;
+			itemsToAdd.push(item);
+		});
+
+		return itemsToAdd;
+	}
+
+	/**
+	 * Removes items with duplicate types, keeping only the first occurrence.
+	 * @private
+	 */
+	_removeDuplicateTypes() {
+		const types = new Set();
+		this.items.forEach(item => {
+			if (types.has(item.type)) {
+				item.remove();
+			} else {
+				types.add(item.type);
+			}
+		});
+	}
+}
+
+CalendarLegend.define();
+
+export default CalendarLegend;

packages/main/src/CalendarLegendStandardItem.hbs

@@ -0,0 +1,4 @@
+<div class="ui5-cal-legend-standard-item-root" type="{{type}}">
+	<div class="ui5-cal-legend-standard-item-box"></div>
+	<div class="ui5-cal-legend-standard-item-text">{{effectiveText}}</div>
+</div>

packages/main/src/CalendarLegendStandardItem.ts

@@ -0,0 +1,72 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import CalendarLegendStandardItemsType from "./types/StandardCalendarLegendItemsType.js";
+
+import CalendarLegendStandardItemTemplate from "./generated/templates/CalendarLegendStandardItemTemplate.lit.js";
+
+// Styles
+import CalendarLegendStandardItemCss from "./generated/themes/CalendarLegendStandardItem.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-cal-legend-standard-item</code> represents a standard legend item used within the <code>ui5-calendar-legend</code> component.
+ *
+ * <h3>Custom Text Override</h3>
+ * If you provide `textContent` or use the item as <code><ui5-cal-legend-standard-item type="Today">Text here</ui5-cal-legend-standard-item></code>,
+ * it will override the default text provided by the `type`. This allows for customization of the legend item text.
+ *
+ * <h3>Usage</h3>
+ *
+ * The <code>ui5-cal-legend-standard-item</code> is intended to be used within the <code>ui5-calendar-legend</code> component.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/CalendarLegendStandardItem.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.CalendarLegendStandardItem
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-cal-legend-standard-item
+ * @public
+ */
+@customElement({
+	tag: "ui5-cal-legend-standard-item",
+	renderer: litRender,
+	styles: CalendarLegendStandardItemCss,
+	template: CalendarLegendStandardItemTemplate,
+	dependencies: [],
+})
+
+class CalendarLegendStandardItem extends UI5Element {
+	/**
+	 * Defines the type of the Calendar Legend Standard Item.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.CalendarLegendStandardItem.prototype.type
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	type!: `${CalendarLegendStandardItemsType}`;
+
+	get effectiveText() {
+		const typeExists = `${this.type}` in CalendarLegendStandardItemsType;
+
+		if ((typeExists && this.textContent === "")) {
+			return this.type;
+		}
+
+		if (this.type && typeExists && this.textContent) {
+			return this.textContent;
+		}
+	}
+}
+
+CalendarLegendStandardItem.define();
+
+export default CalendarLegendStandardItem;

packages/main/src/themes/CalendarLegend.css

@@ -0,0 +1,12 @@
+.ui5-calendar-legend-root {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+	padding: var(--_ui5-calendar-legend-root-padding);
+	margin: 0.5rem 0; 
+	max-width: var(--_ui5-calendar-legend-root-width);
+	background-color: var(--sapList_Background);
+}

packages/main/src/themes/CalendarLegendStandardItem.css

@@ -0,0 +1,54 @@
+.ui5-cal-legend-standard-item-root {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	width: 7.5rem;
+	vertical-align: middle;
+	white-space: pre-line;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	cursor: default;
+}
+
+.ui5-cal-legend-standard-item-box {
+	display: inline-block;
+	vertical-align: top;
+	box-sizing: border-box;
+	height: 1rem;
+	width: 1rem;
+	margin: var(--_ui5_cal-legend-standard-item-box-margin);
+}
+
+.ui5-cal-legend-standard-item-text {
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	color: var(--sapContent_LabelColor);
+	font-weight: normal;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
+	vertical-align: middle;
+	white-space: pre-line;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	cursor: default;
+}
+
+:host([type="Today"]) .ui5-cal-legend-standard-item-box {
+	border-color: var(--sapLegend_CurrentDateTime);
+	border: 0.125rem solid var(--sapLegend_CurrentDateTime);
+}
+
+:host([type="Selected"]) .ui5-cal-legend-standard-item-box {
+	background: var(--sapContent_Selected_Background);
+	border: 0.0625rem solid var(--sapContent_FocusColor);
+}
+
+:host([type="Working"]) .ui5-cal-legend-standard-item-box {
+	background: var(--sapLegend_WorkingBackground);
+	border: 0.0625rem solid #758ca4;
+}
+
+:host([type="NonWorking"]) .ui5-cal-legend-standard-item-box {
+	background: var(--sapLegend_NonWorkingBackground);
+	border: 0.0625rem solid #758ca4;
+}

packages/main/src/themes/base/CalendarLegend-parameters.css

@@ -0,0 +1,4 @@
+:root {
+    --_ui5-calendar-legend-root-padding: 0.75rem;
+    --_ui5-calendar-legend-root-width: 18.5rem;
+}

packages/main/src/themes/base/CalendarLegendStandardItem-parameters.css

@@ -0,0 +1,3 @@
+:root {
+	--_ui5_cal-legend-standard-item-box-margin: 0.25rem 0.5rem 0.25rem 0.25rem;
+}

packages/main/src/themes/base/sizes-parameters.css

@@ -161,6 +161,13 @@
 	--_ui5_calendar_header_arrow_button_width: 2rem;
 	--_ui5_calendar_header_padding: 0;
 
+	/* Calendar Legend */
+	--_ui5-calendar-legend-root-padding: 0.5rem;
+	--_ui5-calendar-legend-root-width: 16.75rem;
+
+	/* Calendar Legend Standard Item */
+	--_ui5_cal-legend-standard-item-box-margin: 0.125rem 0.5rem 0.125rem 0.125rem;
+
 	/* CheckBox */
 	--_ui5_checkbox_root_side_padding: var(--_ui5_checkbox_wrapped_focus_padding);
 	--_ui5_checkbox_wrapped_content_margin_top: var(--_ui5_checkbox_compact_wrapped_label_margin_top);

packages/main/src/themes/sap_belize/parameters-bundle.css

@@ -4,6 +4,8 @@
 @import "./BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "../base/Button-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendStandardItem-parameters.css";
 @import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "./Dialog-parameters.css";

packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -5,6 +5,8 @@
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendStandardItem-parameters.css";
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";
 @import "./CheckBox-parameters.css";

packages/main/src/themes/sap_belize_hcw/parameters-bundle.css

@@ -4,6 +4,8 @@
 @import "./BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendStandardItem-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";

packages/main/src/themes/sap_fiori_3/parameters-bundle.css

@@ -5,6 +5,8 @@
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/Card-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendStandardItem-parameters.css";
 @import "../base/Carousel-parameters.css";
 @import "./CheckBox-parameters.css";
 @import "../base/ColorPalette-parameters.css";

packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -4,6 +4,8 @@
 @import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendStandardItem-parameters.css";
 @import "../base/Card-parameters.css";
 @import "../base/Carousel-parameters.css";
 @import "./CheckBox-parameters.css";

packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -4,6 +4,8 @@
 @import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendStandardItem-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";

packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -4,6 +4,8 @@
 @import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendStandardItem-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";

packages/main/src/themes/sap_horizon/parameters-bundle.css

@@ -5,6 +5,8 @@
 @import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendStandardItem-parameters.css";
 @import "../base/Card-parameters.css";
 @import "./Card-parameters.css";
 @import "./Carousel-parameters.css";

packages/main/src/themes/sap_horizon_dark/parameters-bundle.css

@@ -5,6 +5,8 @@
 @import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/CalendarLegend-parameters.css";
+@import "../base/CalendarLegendStandardItem-parameters.css";
 @import "../base/Card-parameters.css";
 @import "./Card-parameters.css";
 @import "./Carousel-parameters.css";