@ui5/webcomponents-fiori 0.0.0-e463d2345 → 0.0.0-e55c2cec6

package/src/DynamicSideContent.hbs

@@ -0,0 +1,34 @@
+<div
+	class="ui5-dsc-root"
+	style="{{styles.root}}"
+>
+
+	{{#if _isSideContentFirst}}
+		{{> sideContent}}
+		{{> mainContent}}
+	{{else}}
+		{{> mainContent}}
+		{{> sideContent}}
+	{{/if}}
+
+</div>
+
+{{#*inline "mainContent"}}
+	<div
+		class="{{classes.main}}"
+		style="{{styles.main}}"
+	>
+		<slot></slot>
+	</div>
+{{/inline}}
+
+{{#*inline "sideContent"}}
+	<aside
+		role="complementary"
+		aria-label="{{accInfo.label}}"
+		class="{{classes.side}}"
+		style="{{styles.side}}"
+	>
+		<slot name="sideContent"></slot>
+	</aside>
+{{/inline}}

package/src/DynamicSideContent.ts

@@ -0,0 +1,546 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import SideContentPosition from "./types/SideContentPosition.js";
+import SideContentVisibility from "./types/SideContentVisibility.js";
+import SideContentFallDown from "./types/SideContentFallDown.js";
+import DynamicSideContentTemplate from "./generated/templates/DynamicSideContentTemplate.lit.js";
+
+// Styles
+import DynamicSideContentCss from "./generated/themes/DynamicSideContent.css.js";
+
+// Texts
+import {
+	DSC_SIDE_ARIA_LABEL,
+// @ts-ignore
+} from "./generated/i18n/i18n-defaults.js";
+
+// Breakpoint-related constants
+const S_M_BREAKPOINT = 720,	// Breakpoint between S and M screen sizes
+	M_L_BREAKPOINT = 1024, // Breakpoint between M and L screen sizes
+	L_XL_BREAKPOINT = 1440, // Breakpoint between L and XL screen sizes
+	MINIMUM_WIDTH_BREAKPOINT = 960; // Minimum width of the control where main and side contents are side by side
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The DynamicSideContent (<code>ui5-dynamic-side-content</code>) is a layout component that allows additional content
+ * to be displayed in a way that flexibly adapts to different screen sizes. The side
+ * content appears in a container next to or directly below the main content
+ * (it doesn't overlay). When the side content is triggered, the main content becomes
+ * narrower (if appearing side-by-side). The side content contains a separate scrollbar
+ * when appearing next to the main content.
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * <i>When to use?</i>
+ *
+ * Use this component if you want to display relevant information that is not critical
+ * for users to complete a task. Users should have access to all the key functions and
+ * critical information in the app even if they do not see the side content. This is
+ * important because on smaller screen sizes it may be difficult to display the side
+ * content in a way that is easily accessible for the user.
+ *
+ * <i>When not to use?</i>
+ *
+ * Don't use it if you want to display navigation or critical information that prevents
+ * users from completing a task when they have no access to the side content.
+ *
+ *
+ * <h3>Responsive Behavior</h3>
+ *
+ * Screen width > 1440px
+ *
+ * <ul><li>Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px
+ * each).</li>
+ * <li>If the application defines a trigger, the side content can be hidden.</li></ul>
+ *
+ * Screen width <= 1440px and > 1024px
+ *
+ * <ul><li>Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of
+ * 320px each). If the side content width falls below 320 px, it automatically slides
+ * under the main content, unless the app development team specifies that it should
+ * disappear.</li></ul>
+ *
+ * Screen width <= 1024px and > 720px
+ *
+ * <ul><li>The side content ratio is fixed to 340px, and the main content takes the rest
+ * of the width. Only if the <code>sideContentFallDown</code> is set to <code>OnMinimumWidth</code>
+ * and screen width is <= 960px and > 720px the side content falls below the main content.</li></ul>
+ *
+ * Screen width <= 720px (for example on a mobile device)
+ *
+ * <ul><li>In this case, the side content automatically disappears from the screen (unless
+ * specified to stay under the content by setting of <code>sideContentVisibility</code>
+ * property to <code>AlwaysShow</code>) and can be triggered from a pre-set trigger
+ * (specified within the app). When the side content is triggered, it replaces the main
+ * content. We recommend that you always place the trigger for the side content in the
+ * same location, such as in the app footer.</li></ul>
+ *
+ * A special case allows switching the comparison mode between the main and side content.
+ * In this case, the screen is split into 50:50 percent for main vs. side content. The
+ * responsive behavior of the equal split is the same as in the standard view - the
+ * side content disappears on screen widths of less than 720 px and can only be
+ * viewed by triggering it.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents-fiori/dist/DynamicSideContent";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.DynamicSideContent
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-dynamic-side-content
+ * @public
+ * @since 1.1.0
+ */
+@customElement("ui5-dynamic-side-content")
+/**
+ * Fires when the current breakpoint has been changed.
+ * @event sap.ui.webc.fiori.DynamicSideContent#layout-change
+ * @param {string} currentBreakpoint the current breakpoint.
+ * @param {string} previousBreakpoint the breakpoint that was active before change to current breakpoint.
+ * @param {boolean} mainContentVisible visibility of the main content.
+ * @param {boolean} sideContentVisible visibility of the side content.
+ * @public
+ */
+@event("layout-change", {
+	detail: {
+		currentBreakpoint: {
+			type: String,
+		},
+		previousBreakpoint: {
+			type: String,
+		},
+		mainContentVisible: {
+			type: Boolean,
+		},
+		sideContentVisible: {
+			type: Boolean,
+		},
+	},
+})
+class DynamicSideContent extends UI5Element {
+	/**
+	 * Defines the visibility of the main content.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideMainContent
+	 * @defaultvalue false
+	 * @public
+	 *
+	 */
+	@property({ type: Boolean })
+	hideMainContent!: boolean;
+
+	/**
+	 * Defines the visibility of the side content.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideSideContent
+	 * @defaultvalue false
+	 * @public
+	 *
+	 */
+	@property({ type: Boolean })
+	hideSideContent!: boolean;
+
+	/**
+	 * Defines whether the side content is positioned before the main content (left side
+	 * in LTR mode), or after the the main content (right side in LTR mode).
+	 *
+	 * <br><br>
+	 * <b>The available values are:</b>
+	 *
+	 * <ul>
+	 * <li><code>Start</code></li>
+	 * <li><code>End</code></li>
+	 * </ul>
+	 *
+	 * @type {sap.ui.webc.fiori.types.SideContentPosition}
+	 * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentPosition
+	 * @defaultvalue "End"
+	 * @public
+	 *
+	 */
+	@property({ type: SideContentPosition, defaultValue: SideContentPosition.End })
+	sideContentPosition!: SideContentPosition;
+
+	/**
+	 * Defines on which breakpoints the side content is visible.
+	 *
+	 * <br><br>
+	 * <b>The available values are:</b>
+	 *
+	 * <ul>
+	 * <li><code>AlwaysShow</code></li>
+	 * <li><code>ShowAboveL</code></li>
+	 * <li><code>ShowAboveM</code></li>
+	 * <li><code>ShowAboveS</code></li>
+	 * <li><code>NeverShow</code></li>
+	 * </ul>
+	 *
+	 * @type {sap.ui.webc.fiori.types.SideContentVisibility}
+	 * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentVisibility
+	 * @defaultvalue "ShowAboveS"
+	 * @public
+	 *
+	 */
+	@property({ type: SideContentVisibility, defaultValue: SideContentVisibility.ShowAboveS })
+	sideContentVisibility!: SideContentVisibility;
+
+	/**
+	 * Defines on which breakpoints the side content falls down below the main content.
+	 *
+	 * <br><br>
+	 * <b>The available values are:</b>
+	 *
+	 * <ul>
+	 * <li><code>BelowXL</code></li>
+	 * <li><code>BelowL</code></li>
+	 * <li><code>BelowM</code></li>
+	 * <li><code>OnMinimumWidth</code></li>
+	 * </ul>
+	 *
+	 * @type {sap.ui.webc.fiori.types.SideContentFallDown}
+	 * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentFallDown
+	 * @defaultvalue "OnMinimumWidth"
+	 * @public
+	 *
+	 */
+	@property({ type: SideContentFallDown, defaultValue: SideContentFallDown.OnMinimumWidth })
+	sideContentFallDown!: SideContentFallDown;
+
+	/**
+	 * Defines whether the component is in equal split mode. In this mode, the side and
+	 * the main content take 50:50 percent of the container on all screen sizes
+	 * except for phone, where the main and side contents are switching visibility
+	 * using the toggle method.
+	 *
+	 * @type {boolean}]
+	 * @name sap.ui.webc.fiori.DynamicSideContent.prototype.equalSplit
+	 * @defaultvalue false
+	 * @public
+	 *
+	 */
+	@property({ type: Boolean })
+	equalSplit!: boolean;
+
+	/**
+	 * @private
+	 */
+	@property({ defaultValue: "0", noAttribute: true })
+	_mcSpan!: string;
+
+	/**
+	 * @private
+	 */
+	@property({ defaultValue: "0", noAttribute: true })
+	_scSpan!: string;
+
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean, noAttribute: true })
+	_toggled!: boolean;
+
+	/**
+	 * @private
+	 */
+	@property({ noAttribute: true })
+	_currentBreakpoint!: string;
+
+	/**
+	 * Defines the main content.
+	 *
+	 * @type {HTMLElement[]}
+	 * @name sap.ui.webc.fiori.DynamicSideContent.prototype.default
+	 * @slot
+	 * @public
+	 */
+
+	/**
+	 * Defines the side content.
+	 *
+	 * @type {HTMLElement[]}
+	 * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContent
+	 * @slot
+	 * @public
+	 */
+	@slot()
+	sideContent!: Array<HTMLElement>;
+
+	constructor() {
+		super();
+		this._handleResizeBound = this.handleResize.bind(this);
+	}
+
+	_handleResizeBound: () => void;
+
+	static i18nBundle: I18nBundle;
+
+	static get styles() {
+		return DynamicSideContentCss;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return DynamicSideContentTemplate;
+	}
+
+	static async onDefine() {
+		DynamicSideContent.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+	}
+
+	onAfterRendering() {
+		this._resizeContents();
+	}
+
+	onEnterDOM() {
+		ResizeHandler.register(this, this._handleResizeBound);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(this, this._handleResizeBound);
+	}
+
+	/**
+	 * Toggles visibility of main and side contents on S screen size (mobile device).
+	 * @public
+	 * @method
+	 * @name sap.ui.webc.fiori.DynamicSideContent#toggleContents
+	 */
+	toggleContents() {
+		if (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) {
+			this._toggled = !this._toggled;
+		}
+	}
+
+	get classes(): ClassMap {
+		const gridPrefix = "ui5-dsc-span",
+			mcSpan = this._toggled ? this._scSpan : this._mcSpan,
+			scSpan = this._toggled ? this._mcSpan : this._scSpan,
+			classes: ClassMap = {
+				main: {
+					"ui5-dsc-main": true,
+				},
+				side: {
+					"ui5-dsc-side": true,
+				},
+			};
+
+		classes.main[`${gridPrefix}-${mcSpan}`] = true;
+		classes.side[`${gridPrefix}-${scSpan}`] = true;
+
+		return classes;
+	}
+
+	get styles() {
+		const isToggled = this.breakpoint === this.sizeS && this._toggled,
+			mcSpan = isToggled ? this._scSpan : this._mcSpan,
+			scSpan = isToggled ? this._mcSpan : this._scSpan,
+			contentHeight = this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow ? "100%" : "auto";
+
+		return {
+			root: {
+				"flex-wrap": this._mcSpan === "12" ? "wrap" : "nowrap",
+			},
+			main: {
+				"height": mcSpan === this.span12 ? contentHeight : "100%",
+			},
+			side: {
+				"height": scSpan === this.span12 ? contentHeight : "100%",
+			},
+		};
+	}
+
+	get accInfo() {
+		return {
+			"label": DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL as I18nText),
+		};
+	}
+
+	get sizeS() {
+		return "S";
+	}
+
+	get sizeM() {
+		return "M";
+	}
+
+	get sizeL() {
+		return "L";
+	}
+
+	get sizeXL() {
+		return "XL";
+	}
+
+	get span0() {
+		return "0";
+	}
+
+	get span3() {
+		return "3";
+	}
+
+	get span4() {
+		return "4";
+	}
+
+	get span6() {
+		return "6";
+	}
+
+	get span8() {
+		return "8";
+	}
+
+	get span9() {
+		return "9";
+	}
+
+	get span12() {
+		return "12";
+	}
+
+	get spanFixed() {
+		return "fixed";
+	}
+
+	get containerWidth() {
+		return (this.parentElement as HTMLElement).clientWidth;
+	}
+
+	get breakpoint() {
+		let size;
+
+		if (this.containerWidth <= S_M_BREAKPOINT) {
+			size = this.sizeS;
+		} else if (this.containerWidth > S_M_BREAKPOINT && this.containerWidth <= M_L_BREAKPOINT) {
+			size = this.sizeM;
+		} else if (this.containerWidth > M_L_BREAKPOINT && this.containerWidth <= L_XL_BREAKPOINT) {
+			size = this.sizeL;
+		} else {
+			size = this.sizeXL;
+		}
+
+		return size;
+	}
+
+	get _isSideContentFirst() {
+		return this.sideContentPosition === SideContentPosition.Start;
+	}
+
+	handleResize() {
+		this._resizeContents();
+	}
+
+	_resizeContents() {
+		let mainSize!: string,
+			sideSize!: string,
+			sideVisible!: boolean;
+
+		// initial set contents sizes
+		switch (this.breakpoint) {
+		case this.sizeS:
+			mainSize = this.span12;
+			sideSize = this.span12;
+			break;
+		case this.sizeM:
+			if (this.sideContentFallDown === SideContentFallDown.BelowXL
+				|| this.sideContentFallDown === SideContentFallDown.BelowL
+				|| (this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT && this.sideContentFallDown === SideContentFallDown.OnMinimumWidth)) {
+				mainSize = this.span12;
+				sideSize = this.span12;
+			} else {
+				mainSize = this.equalSplit ? this.span6 : this.spanFixed;
+				sideSize = this.equalSplit ? this.span6 : this.spanFixed;
+			}
+			sideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS
+				|| this.sideContentVisibility === SideContentVisibility.AlwaysShow;
+			break;
+		case this.sizeL:
+			if (this.sideContentFallDown === SideContentFallDown.BelowXL) {
+				mainSize = this.span12;
+				sideSize = this.span12;
+			} else {
+				mainSize = this.equalSplit ? this.span6 : this.span8;
+				sideSize = this.equalSplit ? this.span6 : this.span4;
+			}
+			sideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS
+				|| this.sideContentVisibility === SideContentVisibility.ShowAboveM
+				|| this.sideContentVisibility === SideContentVisibility.AlwaysShow;
+			break;
+		case this.sizeXL:
+			mainSize = this.equalSplit ? this.span6 : this.span9;
+			sideSize = this.equalSplit ? this.span6 : this.span3;
+			sideVisible = this.sideContentVisibility !== SideContentVisibility.NeverShow;
+		}
+
+		if (this.sideContentVisibility === SideContentVisibility.AlwaysShow) {
+			sideVisible = true;
+		}
+
+		// modify sizes of the contents depending on hideMainContent and hideSideContent properties
+		if (this.hideSideContent) {
+			mainSize = this.hideMainContent ? this.span0 : this.span12;
+			sideSize = this.span0;
+			sideVisible = false;
+		}
+
+		if (this.hideMainContent) {
+			mainSize = this.span0;
+			sideSize = this.hideSideContent ? this.span0 : this.span12;
+			sideVisible = true;
+		}
+
+		// set final sizes of the contents
+		if (!sideVisible) {
+			mainSize = this.span12;
+			sideSize = this.span0;
+		}
+
+		// fire "layout-change" event
+		if (this._currentBreakpoint !== this.breakpoint) {
+			const eventParams = {
+				currentBreakpoint: this.breakpoint,
+				previousBreakpoint: this._currentBreakpoint,
+				mainContentVisible: mainSize !== this.span0,
+				sideContentVisible: sideSize !== this.span0,
+			};
+			this.fireEvent("layout-change", eventParams);
+			this._currentBreakpoint = this.breakpoint;
+		}
+
+		// update contents sizes
+		this._setSpanSizes(mainSize, sideSize);
+	}
+
+	_setSpanSizes(mainSize: string, sideSize: string) {
+		this._mcSpan = mainSize;
+		this._scSpan = sideSize;
+		if (this.breakpoint !== this.sizeS) {
+			this._toggled = false;
+		}
+	}
+}
+
+DynamicSideContent.define();
+
+export default DynamicSideContent;

package/src/FilterItem.ts

@@ -0,0 +1,66 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import type FilterItemOption from "./FilterItemOption.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-filter-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents-fiori/dist/FilterItem.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.FilterItem
+ * @extends sap.ui.webc.base.UI5Element
+ * @since 1.0.0-rc.16
+ * @tagname ui5-filter-item
+ * @implements sap.ui.webc.fiori.IFilterItem
+ * @public
+ */
+@customElement("ui5-filter-item")
+class FilterItem extends UI5Element {
+	/**
+	 * Defines the text of the component.
+	 *
+	 * @name sap.ui.webc.fiori.FilterItem.prototype.text
+	 * @type {string}
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	text!: string;
+
+	/**
+	 * Defines the additional text of the component.
+	 *
+	 * @name sap.ui.webc.fiori.FilterItem.prototype.additionalText
+	 * @type {string}
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	additionalText!: string;
+
+	/**
+	 * Defines the <code>values</code> list.
+	 * @name sap.ui.webc.fiori.FilterItem.prototype.values
+	 * @type {sap.ui.webc.fiori.IFilterItemOption[]}
+	 * @slot values
+	 * @public
+	 */
+	@slot()
+	values!: Array<FilterItemOption>;
+}
+
+FilterItem.define();
+
+export default FilterItem;

package/src/FilterItemOption.ts

@@ -0,0 +1,54 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-filter-item-option</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents-fiori/dist/FilterItemOption.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.FilterItemOption
+ * @extends sap.ui.webc.base.UI5Element
+ * @since 1.0.0-rc.16
+ * @tagname ui5-filter-item-option
+ * @implements sap.ui.webc.fiori.IFilterItemOption
+ * @public
+ */
+@customElement("ui5-filter-item-option")
+class FilterItemOption extends UI5Element {
+	/**
+	 * Defines the text of the component.
+	 *
+	 * @name sap.ui.webc.fiori.FilterItemOption.prototype.text
+	 * @type {string}
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	text!: string;
+
+	/**
+	 * Defines if the component is selected.
+	 *
+	 * @name sap.ui.webc.fiori.FilterItemOption.prototype.selected
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	selected!: boolean;
+}
+
+FilterItemOption.define();
+
+export default FilterItemOption;