@ui5/webcomponents-fiori 0.0.0-a3eca7ade → 0.0.0-a7032d86e

package/src/{DynamicSideContent.js → DynamicSideContent.ts}

@@ -1,4 +1,11 @@
 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";
@@ -13,6 +20,7 @@ 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
@@ -21,213 +29,6 @@ const S_M_BREAKPOINT = 720,	// Breakpoint between S and M 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
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-dynamic-side-content",
-	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.DynamicSideContent.prototype */ {
-
-		/**
-		 * Defines the visibility of the main content.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 *
-		 */
-		 hideMainContent: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the visibility of the side content.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 *
-		 */
-		hideSideContent: {
-			type: 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 {SideContentPosition}
-		 * @defaultvalue "End"
-		 * @public
-		 *
-		 */
-		 sideContentPosition: {
-			type: SideContentPosition,
-			defaultValue: SideContentPosition.End,
-		},
-
-		/**
-		 * 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 {SideContentVisibility}
-		 * @defaultvalue "ShowAboveS"
-		 * @public
-		 *
-		 */
-		sideContentVisibility: {
-			type: SideContentVisibility,
-			defaultValue: SideContentVisibility.ShowAboveS,
-		},
-
-		/**
-		 * 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 {SideContentFallDown}
-		 * @defaultvalue "OnMinimumWidth"
-		 * @public
-		 *
-		 */
-		sideContentFallDown: {
-			type: SideContentFallDown,
-			defaultValue: SideContentFallDown.OnMinimumWidth,
-		},
-
-		/**
-		 * 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}
-		 * @defaultvalue false
-		 * @public
-		 *
-		 */
-		equalSplit: {
-			type: Boolean,
-		},
-
-		/**
- 		 * @private
-		 */
-		_mcSpan: {
-			type: String,
-			defaultValue: "0",
-			noAttribute: true,
-		},
-
-		/**
- 		 * @private
-		 */
-		 _scSpan: {
-			type: String,
-			defaultValue: "0",
-			noAttribute: true,
-		},
-
-		/**
- 		 * @private
-		 */
-		 _toggled: {
-			type: Boolean,
-			noAttribute: true,
-		},
-
-		/**
- 		 * @private
-		 */
-		 _currentBreakpoint: {
-			type: String,
-			noAttribute: true,
-		},
-
-	},
-	slots: /** @lends sap.ui.webcomponents.fiori.DynamicSideContent.prototype */ {
-
-		/**
-		 * Defines the main content.
-		 *
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		"default": {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the side content.
-		 *
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		 "sideContent": {
-			type: HTMLElement,
-		},
-
-	},
-	events: /** @lends sap.ui.webcomponents.fiori.DynamicSideContent.prototype */ {
-
-		/**
-		 * Fires when the current breakpoint has been changed.
-		 * @event sap.ui.webcomponents.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
-		 */
-		"layout-change": {
-			details: {
-				currentBreakpoint: {
-					type: String,
-				},
-				previousBreakpoint: {
-					type: String,
-				},
-				mainContentVisible: {
-					type: Boolean,
-				},
-				sideContentVisible: {
-					type: Boolean,
-				},
-			},
-		},
-
-	},
-};
-
 /**
  * @class
  *
@@ -299,21 +100,196 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.DynamicSideContent
- * @extends UI5Element
+ * @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);
 	}
 
-	static get metadata() {
-		return metadata;
-	}
+	_handleResizeBound: () => void;
+
+	static i18nBundle: I18nBundle;
 
 	static get styles() {
 		return DynamicSideContentCss;
@@ -346,18 +322,20 @@ class DynamicSideContent extends UI5Element {
 	/**
 	 * Toggles visibility of main and side contents on S screen size (mobile device).
 	 * @public
+	 * @method
+	 * @name sap.ui.webc.fiori.DynamicSideContent#toggleContents
 	 */
-	 toggleContents() {
+	toggleContents() {
 		if (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) {
 			this._toggled = !this._toggled;
 		}
 	}
 
-	get classes() {
+	get classes(): ClassMap {
 		const gridPrefix = "ui5-dsc-span",
 			mcSpan = this._toggled ? this._scSpan : this._mcSpan,
 			scSpan = this._toggled ? this._mcSpan : this._scSpan,
-			classes = {
+			classes: ClassMap = {
 				main: {
 					"ui5-dsc-main": true,
 				},
@@ -384,18 +362,16 @@ class DynamicSideContent extends UI5Element {
 			},
 			main: {
 				"height": mcSpan === this.span12 ? contentHeight : "100%",
-				"order": this.sideContentPosition === SideContentPosition.Start ? 2 : 1,
 			},
 			side: {
 				"height": scSpan === this.span12 ? contentHeight : "100%",
-				"order": this.sideContentPosition === SideContentPosition.Start ? 1 : 2,
 			},
 		};
 	}
 
 	get accInfo() {
 		return {
-			"label": DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),
+			"label": DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL as I18nText),
 		};
 	}
 
@@ -448,7 +424,7 @@ class DynamicSideContent extends UI5Element {
 	}
 
 	get containerWidth() {
-		return this.parentElement.clientWidth;
+		return (this.parentElement as HTMLElement).clientWidth;
 	}
 
 	get breakpoint() {
@@ -467,14 +443,18 @@ class DynamicSideContent extends UI5Element {
 		return size;
 	}
 
+	get _isSideContentFirst() {
+		return this.sideContentPosition === SideContentPosition.Start;
+	}
+
 	handleResize() {
 		this._resizeContents();
 	}
 
 	_resizeContents() {
-		let mainSize,
-			sideSize,
-			sideVisible;
+		let mainSize!: string,
+			sideSize!: string,
+			sideVisible!: boolean;
 
 		// initial set contents sizes
 		switch (this.breakpoint) {
@@ -552,7 +532,7 @@ class DynamicSideContent extends UI5Element {
 		this._setSpanSizes(mainSize, sideSize);
 	}
 
-	_setSpanSizes(mainSize, sideSize) {
+	_setSpanSizes(mainSize: string, sideSize: string) {
 		this._mcSpan = mainSize;
 		this._scSpan = sideSize;
 		if (this.breakpoint !== this.sizeS) {

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;