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

package/dist/Page.d.ts

@@ -0,0 +1,138 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import PageBackgroundDesign from "./types/PageBackgroundDesign.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-page</code> is a container component that holds one whole screen of an application.
+ * The page has three distinct areas that can hold content - a header, content area and a footer.
+ * <h3>Structure</h3>
+ * <h4>Header</h4>
+ * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.
+ * <h4>Content</h4>
+ * The content occupies the main part of the page. Only the content area is scrollable by default.
+ * This can be prevented by setting  <code>enableScrolling</code> to <code>false</code>.
+ * <h4>Footer</h4>
+ * The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content.
+ * This is enabled with the <code>floatingFooter</code> property.
+ *
+ * <b>Note:</b> <code>ui5-page</code> occipues the whole available space of its parent. In order to achieve the intended design you have to make sure
+ * that there is enough space for the <code>ui5-page</code> to be rendered.
+ *
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents-fiori/dist/Page.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.Page
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-page
+ * @since 1.0.0-rc.12
+ * @public
+ */
+declare class Page extends UI5Element {
+    /**
+     * Defines the background color of the <code>ui5-page</code>.
+     * <br><br>
+     * <b>Note:</b> When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.
+     * <br><br>
+     * Available options are:
+     * <ul>
+     * <li><code>Solid</code></li> (default)
+     * <li><code>Transparent</code></li>
+     * <li><code>List</code></li>
+     * </ul>
+     * @type {sap.ui.webc.fiori.types.PageBackgroundDesign}
+     * @name sap.ui.webc.fiori.Page.prototype.backgroundDesign
+     * @defaultvalue "Solid"
+     * @public
+     */
+    backgroundDesign: PageBackgroundDesign;
+    /**
+     * Disables vertical scrolling of page content.
+     * If set to true, there will be no vertical scrolling at all.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.fiori.Page.prototype.disableScrolling
+     * @defaultvalue false
+     * @public
+     */
+    disableScrolling: boolean;
+    /**
+     * Defines if the footer should float over the content.
+     * <br><br>
+     * <b>Note:</b> When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.
+     * @type {boolean}
+     * @name sap.ui.webc.fiori.Page.prototype.floatingFooter
+     * @defaultvalue true
+     * @public
+     */
+    floatingFooter: boolean;
+    /**
+     * Defines the footer visibility.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.fiori.Page.prototype.hideFooter
+     * @defaultvalue false
+     * @public
+     */
+    hideFooter: boolean;
+    /**
+     * Defines the current media query size.
+     *
+     * @type {string}
+     * @private
+     * @since 1.0.0-rc.15
+     */
+    mediaRange: string;
+    /**
+     * Defines the header HTML Element.
+     *
+     * @type {sap.ui.webc.fiori.IBar}
+     * @name sap.ui.webc.fiori.Page.prototype.header
+     * @slot
+     * @public
+     */
+    header: Array<HTMLElement>;
+    /**
+     * Defines the content HTML Element.
+     *
+     * @type {HTMLElement[]}
+     * @name sap.ui.webc.fiori.Page.prototype.default
+     * @slot content
+     * @public
+     */
+    content: Array<HTMLElement>;
+    /**
+     * Defines the footer HTML Element.
+     *
+     * @type {sap.ui.webc.fiori.IBar}
+     * @name sap.ui.webc.fiori.Page.prototype.footer
+     * @slot
+     * @public
+     */
+    footer: Array<HTMLElement>;
+    _updateMediaRange: () => void;
+    static get render(): (templateResult: object, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | string[] | undefined, forStaticArea: boolean, options: import("lit-html").RenderOptions) => void;
+    static get styles(): import("@ui5/webcomponents-base/src/types.js").StyleData;
+    static get template(): import("@ui5/webcomponents-base/src/renderer/executeTemplate.js").TemplateFunction;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    updateMediaRange(): void;
+    get _contentBottom(): "0" | "2.75rem";
+    get _contentPaddingBottom(): "0" | "3.5rem";
+    get _contentTop(): "2.75rem" | "0rem";
+    get styles(): {
+        content: {
+            "padding-bottom": string | 0;
+            bottom: string | 0;
+            top: string;
+        };
+        footer: {};
+    };
+}
+export default Page;

package/dist/Page.js

@@ -0,0 +1,126 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
+import PageBackgroundDesign from "./types/PageBackgroundDesign.js";
+// Template
+import PageTemplate from "./generated/templates/PageTemplate.lit.js";
+// Styles
+import PageCss from "./generated/themes/Page.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-page</code> is a container component that holds one whole screen of an application.
+ * The page has three distinct areas that can hold content - a header, content area and a footer.
+ * <h3>Structure</h3>
+ * <h4>Header</h4>
+ * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.
+ * <h4>Content</h4>
+ * The content occupies the main part of the page. Only the content area is scrollable by default.
+ * This can be prevented by setting  <code>enableScrolling</code> to <code>false</code>.
+ * <h4>Footer</h4>
+ * The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content.
+ * This is enabled with the <code>floatingFooter</code> property.
+ *
+ * <b>Note:</b> <code>ui5-page</code> occipues the whole available space of its parent. In order to achieve the intended design you have to make sure
+ * that there is enough space for the <code>ui5-page</code> to be rendered.
+ *
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents-fiori/dist/Page.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.Page
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-page
+ * @since 1.0.0-rc.12
+ * @public
+ */
+let Page = class Page extends UI5Element {
+    static get render() {
+        return litRender;
+    }
+    static get styles() {
+        return PageCss;
+    }
+    static get template() {
+        return PageTemplate;
+    }
+    constructor() {
+        super();
+        this._updateMediaRange = this.updateMediaRange.bind(this);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._updateMediaRange);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._updateMediaRange);
+    }
+    updateMediaRange() {
+        this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+    }
+    get _contentBottom() {
+        return !this.floatingFooter && !this.hideFooter ? "2.75rem" : "0";
+    }
+    get _contentPaddingBottom() {
+        return this.floatingFooter && !this.hideFooter ? "3.5rem" : "0";
+    }
+    get _contentTop() {
+        return this.header.length ? "2.75rem" : "0rem";
+    }
+    get styles() {
+        return {
+            content: {
+                "padding-bottom": this.footer.length && this._contentPaddingBottom,
+                "bottom": this.footer.length && this._contentBottom,
+                "top": this._contentTop,
+            },
+            footer: {},
+        };
+    }
+};
+__decorate([
+    property({ type: PageBackgroundDesign, defaultValue: PageBackgroundDesign.Solid })
+], Page.prototype, "backgroundDesign", void 0);
+__decorate([
+    property({ type: Boolean })
+], Page.prototype, "disableScrolling", void 0);
+__decorate([
+    property({ type: Boolean })
+], Page.prototype, "floatingFooter", void 0);
+__decorate([
+    property({ type: Boolean })
+], Page.prototype, "hideFooter", void 0);
+__decorate([
+    property()
+], Page.prototype, "mediaRange", void 0);
+__decorate([
+    slot()
+], Page.prototype, "header", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], Page.prototype, "content", void 0);
+__decorate([
+    slot()
+], Page.prototype, "footer", void 0);
+Page = __decorate([
+    customElement("ui5-page"),
+    languageAware
+], Page);
+Page.define();
+export default Page;
+//# sourceMappingURL=Page.js.map

package/dist/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../src/Page.ts"],"names":[],"mappings":"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"}

package/dist/ProductSwitch.d.ts

@@ -0,0 +1,80 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type ProductSwitchItem from "./ProductSwitchItem.js";
+/**
+ * @class
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-product-switch</code> is an SAP Fiori specific web component that is used in <code>ui5-shellbar</code>
+ * and allows the user to easily switch between products.
+ * <br><br>
+ *
+ * <h3>Keyboard Handling</h3>
+ * The <code>ui5-product-switch</code> provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ * <br>
+ * <ul>
+ * <li>[TAB] - Move focus to the next interactive element after the <code>ui5-product-switch</code></li>
+ * <li>[UP/DOWN] - Navigates up and down the items </li>
+ * <li>[LEFT/RIGHT] - Navigates left and right the items</li>
+ * </ul>
+ * <br>
+ * <br>
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code> (for <code>ui5-product-switch-item</code>)
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.ProductSwitch
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-product-switch
+ * @appenddocs ProductSwitchItem
+ * @public
+ * @since 1.0.0-rc.5
+ */
+declare class ProductSwitch extends UI5Element {
+    constructor();
+    /**
+     * Indicates how many columns are displayed.
+     * @private
+     */
+    desktopColumns?: number;
+    /**
+     * Defines the items of the <code>ui5-product-switch</code>.
+     *
+     * @type {sap.ui.webc.fiori.IProductSwitchItem[]}
+     * @name sap.ui.webc.fiori.ProductSwitch.prototype.default
+     * @slot items
+     * @public
+     */
+    items: Array<ProductSwitchItem>;
+    _itemNavigation: ItemNavigation;
+    _currentIndex: number;
+    _rowSize: number;
+    _handleResizeBound: () => void;
+    static i18nBundle: I18nBundle;
+    static get render(): (templateResult: object, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | string[] | undefined, forStaticArea: boolean, options: import("lit-html").RenderOptions) => void;
+    static get styles(): import("@ui5/webcomponents-base/src/types.js").StyleData;
+    static get template(): import("@ui5/webcomponents-base/src/renderer/executeTemplate.js").TemplateFunction;
+    static get ROW_MIN_WIDTH(): {
+        ONE_COLUMN: number;
+        THREE_COLUMN: number;
+    };
+    static onDefine(): Promise<void>;
+    get _ariaLabelText(): string;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    onBeforeRendering(): void;
+    _handleResize(): void;
+    handleProductSwitchItemClick(e: MouseEvent): void;
+    _onfocusin(e: FocusEvent): void;
+    _setRowSize(size: number): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _handleDown(e: KeyboardEvent): void;
+    _handleUp(e: KeyboardEvent): void;
+}
+export default ProductSwitch;

package/dist/ProductSwitch.js

@@ -1,42 +1,26 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ProductSwitch_1;
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.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 ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isDown, isUp, } from "@ui5/webcomponents-base/dist/Keys.js";
 import ProductSwitchTemplate from "./generated/templates/ProductSwitchTemplate.lit.js";
-
+import { PRODUCT_SWITCH_CONTAINER_LABEL,
+// @ts-ignore
+ } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-product-switch",
-	properties: /** @lends sap.ui.webcomponents.fiori.ProductSwitch.prototype */ {
-		/**
-		 * Indicates how many columns are displayed.
-		 * @private
-		 */
-		desktopColumns: {
-			type: Integer,
-		},
-	},
-	slots: /** @lends sap.ui.webcomponents.fiori.ProductSwitch.prototype */ {
-		/**
-		 * Defines the items of the <code>ui5-product-switch</code>.
-		 *
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		"default": {
-			propertyName: "items",
-			type: HTMLElement,
-		},
-	},
-};
-
 /**
  * @class
  * <h3 class="comment-api-title">Overview</h3>
@@ -44,86 +28,128 @@ const metadata = {
  * The <code>ui5-product-switch</code> is an SAP Fiori specific web component that is used in <code>ui5-shellbar</code>
  * and allows the user to easily switch between products.
  * <br><br>
+ *
+ * <h3>Keyboard Handling</h3>
+ * The <code>ui5-product-switch</code> provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ * <br>
+ * <ul>
+ * <li>[TAB] - Move focus to the next interactive element after the <code>ui5-product-switch</code></li>
+ * <li>[UP/DOWN] - Navigates up and down the items </li>
+ * <li>[LEFT/RIGHT] - Navigates left and right the items</li>
+ * </ul>
+ * <br>
+ * <br>
+ *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";</code>
- *
+ * <br>
+ * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code> (for <code>ui5-product-switch-item</code>)
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.ProductSwitch
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.ProductSwitch
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-product-switch
  * @appenddocs ProductSwitchItem
  * @public
  * @since 1.0.0-rc.5
  */
-class ProductSwitch extends UI5Element {
-	constructor() {
-		super();
-
-		this.initItemNavigation();
-	}
-
-	initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this, { rowSize: 4 });
-		this._itemNavigation.getItemsCallback = () => this.items;
-	}
-
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return ProductSwitchCss;
-	}
-
-	static get template() {
-		return ProductSwitchTemplate;
-	}
-
-	static get ROW_MIN_WIDTH() {
-		return {
-			ONE_COLUMN: 600,
-			THREE_COLUMN: 900,
-		};
-	}
-
-	onEnterDOM() {
-		this._handleResizeBound = this._handleResize.bind(this);
-
-		ResizeHandler.register(document.body, this._handleResizeBound);
-	}
-
-	onExitDOM() {
-		ResizeHandler.deregister(document.body, this._handleResizeBound);
-	}
-
-	onBeforeRendering() {
-		this.desktopColumns = this.items.length > 6 ? 4 : 3;
-	}
-
-	_handleResize() {
-		const documentWidth = document.body.clientWidth;
-
-		if (documentWidth <= this.constructor.ROW_MIN_WIDTH.ONE_COLUMN) {
-			this._itemNavigation.rowSize = 1;
-		} else if (documentWidth <= this.constructor.ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) {
-			this._itemNavigation.rowSize = 3;
-		} else {
-			this._itemNavigation.rowSize = 4;
-		}
-	}
-
-	_onfocusin(event) {
-		const target = event.target;
-
-		this._itemNavigation.update(target);
-	}
-}
-
+let ProductSwitch = ProductSwitch_1 = class ProductSwitch extends UI5Element {
+    constructor() {
+        super();
+        this._currentIndex = 0;
+        this._rowSize = 4;
+        this._itemNavigation = new ItemNavigation(this, {
+            rowSize: this._rowSize,
+            getItemsCallback: () => this.items,
+        });
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    static get render() {
+        return litRender;
+    }
+    static get styles() {
+        return ProductSwitchCss;
+    }
+    static get template() {
+        return ProductSwitchTemplate;
+    }
+    static get ROW_MIN_WIDTH() {
+        return {
+            ONE_COLUMN: 600,
+            THREE_COLUMN: 900,
+        };
+    }
+    static async onDefine() {
+        ProductSwitch_1.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+    }
+    get _ariaLabelText() {
+        return ProductSwitch_1.i18nBundle.getText(PRODUCT_SWITCH_CONTAINER_LABEL);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(document.body, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(document.body, this._handleResizeBound);
+    }
+    onBeforeRendering() {
+        this.desktopColumns = this.items.length > 6 ? 4 : 3;
+    }
+    _handleResize() {
+        const documentWidth = document.body.clientWidth;
+        if (documentWidth <= this.constructor.ROW_MIN_WIDTH.ONE_COLUMN) {
+            this._setRowSize(1);
+        }
+        else if (documentWidth <= this.constructor.ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) {
+            this._setRowSize(3);
+        }
+        else {
+            this._setRowSize(4);
+        }
+    }
+    handleProductSwitchItemClick(e) {
+        this.items.forEach(item => { item.selected = false; });
+        e.target.selected = true;
+    }
+    _onfocusin(e) {
+        const target = e.target;
+        this._itemNavigation.setCurrentItem(target);
+        this._currentIndex = this.items.indexOf(target);
+    }
+    _setRowSize(size) {
+        this._rowSize = size;
+        this._itemNavigation.setRowSize(size);
+    }
+    _onkeydown(e) {
+        if (isDown(e)) {
+            this._handleDown(e);
+        }
+        else if (isUp(e)) {
+            this._handleUp(e);
+        }
+    }
+    _handleDown(e) {
+        const itemsLength = this.items.length;
+        if (this._currentIndex + this._rowSize > itemsLength) { // border reached, do nothing
+            e.stopPropagation();
+        }
+    }
+    _handleUp(e) {
+        if (this._currentIndex - this._rowSize < 0) { // border reached, do nothing
+            e.stopPropagation();
+        }
+    }
+};
+__decorate([
+    property({ validator: Integer })
+], ProductSwitch.prototype, "desktopColumns", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], ProductSwitch.prototype, "items", void 0);
+ProductSwitch = ProductSwitch_1 = __decorate([
+    customElement("ui5-product-switch")
+], ProductSwitch);
 ProductSwitch.define();
-
 export default ProductSwitch;
+//# sourceMappingURL=ProductSwitch.js.map

package/dist/ProductSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSwitch.js","sourceRoot":"","sources":["../src/ProductSwitch.ts"],"names":[],"mappings":"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"}