@ui5/webcomponents 0.0.0-453158269 → 0.0.0-49cef2d02

package/dist/CardHeader.js

@@ -1,122 +1,27 @@
+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 CardHeader_1;
 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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isFirefox } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CardHeaderTemplate from "./generated/templates/CardHeaderTemplate.lit.js";
-import Icon from "./Icon.js";
-
-import {
-	AVATAR_TOOLTIP,
-	ARIA_ROLEDESCRIPTION_CARD_HEADER,
-	ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER,
-} from "./generated/i18n/i18n-defaults.js";
-
+import { AVATAR_TOOLTIP, ARIA_ROLEDESCRIPTION_CARD_HEADER, ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER,
+// @ts-ignore
+ } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import cardHeaderCss from "./generated/themes/CardHeader.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-card-header",
-	languageAware: true,
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.CardHeader.prototype */ {
-
-		/**
-		 * Defines an avatar image, displayed in the left most part of the header.
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		avatar: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines an action, displayed in the right most part of the header.
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		action: {
-			type: HTMLElement,
-		},
-	},
-	properties: /** @lends sap.ui.webcomponents.main.CardHeader.prototype */ {
-
-		/**
-		 * Defines the title text.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		titleText: {
-			type: String,
-		},
-
-		/**
-		 * Defines the subtitle text.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		subtitleText: {
-			type: String,
-		},
-
-		/**
-		 * Defines the status text.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		status: {
-			type: String,
-		},
-
-		/**
-		 * Defines if the component would be interactive,
-		 * e.g gets hover effect, gets focus outline and <code>click</code> event is fired, when pressed.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		interactive: {
-			type: Boolean,
-		},
-
-		/**
-		 * Define the <code>aria-level</code> attribute of the component
-		 * <b>Note: </b> If the interactive property is set, <code>aria-level</code> attribute is not rendered at all.
-		 * @private
-		 * @type {Integer}
-		 * @defaultValue 3
-		 */
-		ariaLevel: {
-			type: Integer,
-			defaultValue: 3,
-		},
-
-		_headerActive: {
-			type: Boolean,
-			noAttribute: true,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.CardHeader.prototype */ {
-
-		/**
-		 * Fired when the component is activated by mouse/tap or by using the Enter or Space key.
-		 * <br><br>
-		 * <b>Note:</b> The event would be fired only if the <code>interactive</code> property is set to true.
-		 * @event sap.ui.webcomponents.main.CardHeader#click
-		 * @public
-		 */
-		"click": {},
-	},
-};
-
 /**
  * @class
  * <h3 class="comment-api-title">Overview</h3>
@@ -134,6 +39,7 @@ const metadata = {
  * <br>
  * The <code>ui5-card</code> exposes the following CSS Shadow Parts:
  * <ul>
+ * <li>root - Used to style the root DOM element of the CardHeader</li>
  * <li>title - Used to style the title of the CardHeader</li>
  * <li>subtitle - Used to style the subtitle of the CardHeader</li>
  * <li>status - Used to style the status of the CardHeader</li>
@@ -145,139 +51,145 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.CardHeader
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.CardHeader
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-card-header
  * @public
  * @since 1.0.0-rc.15
  */
-class CardHeader extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return CardHeaderTemplate;
-	}
-
-	static get styles() {
-		return cardHeaderCss;
-	}
-
-	get classes() {
-		return {
-			"ui5-card-header": true,
-			"ui5-card-header--interactive": this.interactive,
-			"ui5-card-header--active": this.interactive && this._headerActive,
-		};
-	}
-
-	get ariaHeaderRole() {
-		return this.interactive ? "button" : "heading";
-	}
-
-	get _ariaLevel() {
-		if (this.interactive) {
-			return undefined;
-		}
-
-		return this.ariaLevel;
-	}
-
-	get ariaCardHeaderRoleDescription() {
-		return this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
-	}
-
-	get ariaCardAvatarLabel() {
-		return CardHeader.i18nBundle.getText(AVATAR_TOOLTIP);
-	}
-
-	get ariaLabelledByHeader() {
-		const labels = [];
-
-		if (this.titleText) {
-			labels.push(`${this._id}-title`);
-		}
-
-		if (this.subtitleText) {
-			labels.push(`${this._id}-subtitle`);
-		}
-
-		if (this.status) {
-			labels.push(`${this._id}-status`);
-		}
-
-		if (this.hasAvatar) {
-			labels.push(`${this._id}-avatar`);
-		}
-
-		return labels.length !== 0 ? labels.join(" ") : undefined;
-	}
-
-	get hasAvatar() {
-		return !!this.avatar.length;
-	}
-
-	get hasAction() {
-		return !!this.action.length;
-	}
-
-	static get dependencies() {
-		return [Icon];
-	}
-
-	static async onDefine() {
-		CardHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-	}
-
-	_headerClick(event) {
-		// prevents the native browser "click" event from firing
-		event.stopImmediatePropagation();
-
-		if (this.interactive && event.target === event.currentTarget) {
-			this.fireEvent("click");
-		}
-	}
-
-	_headerKeydown(event) {
-		if (!this.interactive || event.target !== event.currentTarget) {
-			return;
-		}
-
-		const enter = isEnter(event);
-		const space = isSpace(event);
-
-		this._headerActive = enter || space;
-
-		if (enter) {
-			this.fireEvent("click");
-			return;
-		}
-
-		if (space) {
-			event.preventDefault();
-		}
-	}
-
-	_headerKeyup(event) {
-		if (!this.interactive || event.target !== event.currentTarget) {
-			return;
-		}
-
-		const space = isSpace(event);
-
-		this._headerActive = false;
-
-		if (space) {
-			this.fireEvent("click");
-		}
-	}
-}
-
+let CardHeader = CardHeader_1 = class CardHeader extends UI5Element {
+    static get render() {
+        return litRender;
+    }
+    static get template() {
+        return CardHeaderTemplate;
+    }
+    static get styles() {
+        return cardHeaderCss;
+    }
+    get classes() {
+        return {
+            root: {
+                "ui5-card-header": true,
+                "ui5-card-header--interactive": this.interactive,
+                "ui5-card-header--active": this.interactive && this._headerActive,
+                "ui5-card-header-ff": isFirefox(),
+            },
+        };
+    }
+    get _root() {
+        return this.shadowRoot.querySelector(".ui5-card-header");
+    }
+    get ariaRoleDescription() {
+        return this.interactive ? CardHeader_1.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader_1.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
+    }
+    get ariaRoleFocusableElement() {
+        return this.interactive ? "button" : null;
+    }
+    get ariaCardAvatarLabel() {
+        return CardHeader_1.i18nBundle.getText(AVATAR_TOOLTIP);
+    }
+    get ariaLabelledBy() {
+        const labels = [];
+        if (this.titleText) {
+            labels.push(`${this._id}-title`);
+        }
+        if (this.subtitleText) {
+            labels.push(`${this._id}-subtitle`);
+        }
+        if (this.status) {
+            labels.push(`${this._id}-status`);
+        }
+        if (this.hasAvatar) {
+            labels.push(`${this._id}-avatar`);
+        }
+        return labels.length !== 0 ? labels.join(" ") : undefined;
+    }
+    get hasAvatar() {
+        return !!this.avatar.length;
+    }
+    get hasAction() {
+        return !!this.action.length;
+    }
+    static async onDefine() {
+        CardHeader_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    _actionsFocusin() {
+        this._root.classList.add("ui5-card-header-hide-focus");
+    }
+    _actionsFocusout() {
+        this._root.classList.remove("ui5-card-header-hide-focus");
+    }
+    _click(e) {
+        // prevents the native browser "click" event from firing
+        e.stopImmediatePropagation();
+        if (this.interactive && this._root.contains(e.target)) {
+            this.fireEvent("click");
+        }
+    }
+    _keydown(e) {
+        if (!this.interactive || !this._root.contains(e.target)) {
+            return;
+        }
+        const enter = isEnter(e);
+        const space = isSpace(e);
+        this._headerActive = enter || space;
+        if (enter) {
+            this.fireEvent("click");
+            return;
+        }
+        if (space) {
+            e.preventDefault();
+        }
+    }
+    _keyup(e) {
+        if (!this.interactive || !this._root.contains(e.target)) {
+            return;
+        }
+        const space = isSpace(e);
+        this._headerActive = false;
+        if (space) {
+            this.fireEvent("click");
+        }
+    }
+};
+__decorate([
+    property()
+], CardHeader.prototype, "titleText", void 0);
+__decorate([
+    property()
+], CardHeader.prototype, "subtitleText", void 0);
+__decorate([
+    property()
+], CardHeader.prototype, "status", void 0);
+__decorate([
+    property({ type: Boolean })
+], CardHeader.prototype, "interactive", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 3 })
+], CardHeader.prototype, "_ariaLevel", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], CardHeader.prototype, "_headerActive", void 0);
+__decorate([
+    slot()
+], CardHeader.prototype, "avatar", void 0);
+__decorate([
+    slot()
+], CardHeader.prototype, "action", void 0);
+CardHeader = CardHeader_1 = __decorate([
+    customElement("ui5-card-header"),
+    languageAware
+    /**
+     * Fired when the component is activated by mouse/tap or by using the Enter or Space key.
+     * <br><br>
+     * <b>Note:</b> The event would be fired only if the <code>interactive</code> property is set to true.
+     * @event sap.ui.webc.main.CardHeader#click
+     * @public
+     */
+    ,
+    event("click")
+], CardHeader);
 CardHeader.define();
-
 export default CardHeader;
+//# sourceMappingURL=CardHeader.js.map

package/dist/CardHeader.js.map

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

package/dist/Carousel.js

@@ -22,6 +22,7 @@ import {
 	CAROUSEL_NEXT_ARROW_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
 import CarouselArrowsPlacement from "./types/CarouselArrowsPlacement.js";
+import CarouselPageIndicatorStyle from "./types/CarouselPageIndicatorStyle.js";
 import CarouselTemplate from "./generated/templates/CarouselTemplate.lit.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
@@ -39,7 +40,7 @@ const metadata = {
 	tag: "ui5-carousel",
 	languageAware: true,
 	fastNavigation: true,
-	properties: /** @lends sap.ui.webcomponents.main.Carousel.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Carousel.prototype */ {
 		/**
 		 * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
 		 * @type {boolean}
@@ -52,7 +53,7 @@ const metadata = {
 
 		/**
 		 * Defines the number of items per page on small size (up to 640px). One item per page shown by default.
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -63,7 +64,7 @@ const metadata = {
 
 		/**
 		 * Defines the number of items per page on medium size (from 640px to 1024px). One item per page shown by default.
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -74,7 +75,7 @@ const metadata = {
 
 		/**
 		 * Defines the number of items per page on large size (more than 1024px). One item per page shown by default.
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -99,7 +100,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the visibility of the paging indicator.
+		 * Defines the visibility of the page indicator.
 		 * If set to true the page indicator will be hidden.
 		 * @type {boolean}
 		 * @since 1.0.0-rc.15
@@ -110,9 +111,26 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the style of the page indicator.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Default</code> - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)</li>
+		 * <li><code>Numeric</code> - The page indicator will display the current page and the total number of pages. (e.g. X of Y)</li>
+		 * </ul>
+		 * @type {sap.ui.webc.main.types.CarouselPageIndicatorStyle}
+		 * @since 1.10
+		 * @defaultvalue "Default"
+		 * @public
+		 */
+		pageIndicatorStyle: {
+			type: CarouselPageIndicatorStyle,
+			defaultValue: CarouselPageIndicatorStyle.Default,
+		},
+
 		/**
 		 * Defines the index of the initially selected item.
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 0
 		 * @private
 		 */
@@ -133,7 +151,7 @@ const metadata = {
 		 * When set to "Content", the arrows are placed on the sides of the current page.
 		 * <br>
 		 * When set to "Navigation", the arrows are placed on the sides of the page indicator.
-		 * @type {CarouselArrowsPlacement}
+		 * @type {sap.ui.webc.main.types.CarouselArrowsPlacement}
 		 * @defaultvalue "Content"
 		 * @public
 		 */
@@ -169,7 +187,7 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Carousel.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Carousel.prototype */ {
 		/**
 		 * Defines the content of the component.
 		 * @type {HTMLElement[]}
@@ -182,7 +200,7 @@ const metadata = {
 			individualSlots: true,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Carousel.prototype */ {
+	events: /** @lends sap.ui.webc.main.Carousel.prototype */ {
 
 		/**
 		 * Fired whenever the page changes due to user interaction,
@@ -238,6 +256,15 @@ const metadata = {
  * with the following keyboard shortcuts:
  * <br>
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-carousel</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>content - Used to style the content of the component</li>
+ * </ul>
+ *
  * * <h4>Fast Navigation</h4>
  * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
  * In order to use this functionality, you need to import the following module:
@@ -255,8 +282,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Carousel
- * @extends UI5Element
+ * @alias sap.ui.webc.main.Carousel
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-carousel
  * @since 1.0.0-rc.6
  * @public
@@ -479,6 +506,16 @@ class Carousel extends UI5Element {
 		}
 	}
 
+	_navButtonClick(event) {
+		if (event.target.hasAttribute("arrow-forward")) {
+			this.navigateRight();
+		} else {
+			this.navigateLeft();
+		}
+
+		this.focus();
+	}
+
 	/**
 	 * Changes the currently displayed page.
 	 * @param {Integer} itemIndex The index of the target page
@@ -593,6 +630,10 @@ class Carousel extends UI5Element {
 	}
 
 	get isPageTypeDots() {
+		if (this.pageIndicatorStyle === CarouselPageIndicatorStyle.Numeric) {
+			return false;
+		}
+
 		return this.pagesCount < Carousel.pageTypeLimit;
 	}