@ui5/webcomponents 0.0.0-0742854fd → 0.0.0-07d38e78e

package/dist/RatingIndicator.js

@@ -1,301 +1,226 @@
+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 RatingIndicator_1;
+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 UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import {
-	isDown,
-	isUp,
-	isLeft,
-	isRight,
-	isSpace,
-	isEnter,
-} from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDown, isUp, isLeft, isRight, isSpace, isEnter, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
-import {
-	RATING_INDICATOR_TEXT,
-	RATING_INDICATOR_TOOLTIP_TEXT,
-} from "./generated/i18n/i18n-defaults.js";
+import { RATING_INDICATOR_TEXT, RATING_INDICATOR_TOOLTIP_TEXT, RATING_INDICATOR_ARIA_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
 import RatingIndicatorTemplate from "./generated/templates/RatingIndicatorTemplate.lit.js";
-
+import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/favorite.js";
+import "@ui5/webcomponents-icons/dist/unfavorite.js";
 // Styles
 import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-rating-indicator",
-	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.RatingIndicator.prototype */ {
-
-		/**
-		 * The indicated value of the rating
-		 * <br><br>
-		 * <b>Note:</b> If you set a number which is not round, it would be shown as follows:
-		 * <ul>
-		 * <li>1.0 - 1.2 -> 1</li>
-		 * <li>1.3 - 1.7 -> 1.5</li>
-		 * <li>1.8 - 1.9 -> 2</li>
-		 * <ul>
-		 * @type {Float}
-		 * @defaultvalue 0
-		 * @public
-		 */
-		value: {
-			type: Float,
-			defaultValue: 0,
-		},
-
-		/**
-		 * The number of displayed rating symbols
-		 * @type {Integer}
-		 * @defaultvalue 5
-		 * @public
-		 */
-		maxValue: {
-			type: Integer,
-			defaultValue: 5,
-		},
-
-		/**
-		 * Defines whether the <code>ui5-rating-indicator</code> is disabled.
-		 *
-		 * <br><br>
-		 * <b>Note:</b> A disabled <code>ui5-rating-indicator</code> is completely noninteractive.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		disabled: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the <code>ui5-rating-indicator</code> is read-only.
-		 * <br><br>
-		 * <b>Note:</b> A read-only <code>ui5-rating-indicator</code> is not editable,
-		 * but still provides visual feedback upon user interaction.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		readonly: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the aria-label attribute for the rating indicator.
-		 * @type {String}
-		 * @defaultvalue: undefined
-		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		ariaLabel: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * Defines the tooltip for the rating indicator.
-		 * @type {String}
-		 * @defaultvalue: undefined
-		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		title: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * @private
-		 */
-		_stars: {
-			type: Object,
-			multiple: true,
-		},
-
-		/**
-		 * @private
-		 */
-		_focused: {
-			type: Boolean,
-		},
-	},
-	slots: /** @lends sap.ui.webcomponents.main.RatingIndicator.prototype */ {
-		//
-	},
-	events: /** @lends sap.ui.webcomponents.main.RatingIndicator.prototype */ {
-
-		/**
-		 * The event is fired when the value changes.
-		 *
-		 * @event
-		 * @public
-		 */
-		change: {},
-	},
-};
-
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The rating indicator is used to display a specific number of icons that are used to rate an item.
+ * ### Overview
+ * The Rating Indicator is used to display a specific number of icons that are used to rate an item.
  * Additionally, it is also used to display the average and overall ratings.
  *
- * <h3>Usage</h3>
- * The reccomended number of icons is between 5 and 7.
+ * ### Usage
+ * The recommended number of icons is between 5 and 7.
+ *
+ * ### Responsive Behavior
+ * You can change the size of the Rating Indicator by changing its `font-size` CSS property.
  *
- * <h3>Responsive Behavior</h3>
- * You can change the size of the Rating Indicator by changing its <code>font-size</code> CSS property.
- * <br>
- * Example: <code>&lt;ui5-rating-indicator style="font-size: 3rem;">&lt;/ui5-rating-indicator></code>
+ * Example: `<ui5-rating-indicator style="font-size: 3rem;"></ui5-rating-indicator>`
  *
- * <h3>Usage</h3>
+ * ### Keyboard Handling
+ * When the `ui5-rating-indicator` is focused, the user can change the rating
+ * with the following keyboard shortcuts:
  *
- * For the <code>ui5-rating-indicator</code>
- * <h3>ES6 Module Import</h3>
+ * - [RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing
+ * - [LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.
+ * - [Home] - Sets the lowest value.
+ * - [End] - Sets the highest value.
+ * - [SPACE/ENTER/RETURN] - Increases the value of the rating by one step. If the highest value is reached, sets the rating to the lowest value.
+ * - Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.
  *
- * <code>import @ui5/webcomponents/dist/RatingIndicator.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/RatingIndicator.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.RatingIndicator
  * @extends UI5Element
- * @tagname ui5-rating-indicator
  * @public
  * @since 1.0.0-rc.8
  */
-class RatingIndicator extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return RatingIndicatorCss;
-	}
-
-	static get template() {
-		return RatingIndicatorTemplate;
-	}
-
-	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
-	}
-
-	constructor() {
-		super();
-
-		this._liveValue = null; // stores the value to determine when to fire change
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
-	onBeforeRendering() {
-		this.calcState();
-	}
-
-	calcState() {
-		this._stars = [];
-
-		for (let i = 1; i < this.maxValue + 1; i++) {
-			const remainder = Math.round((this.value - Math.floor(this.value)) * 10);
-			let halfStar = false,
-				tempValue = this.value;
-
-			if (Math.floor(this.value) + 1 === i && remainder > 2 && remainder < 8) {
-				halfStar = true;
-			} else if (remainder <= 2) {
-				tempValue = Math.floor(this.value);
-			} else if (remainder >= 8) {
-				tempValue = Math.ceil(this.value);
-			}
-
-			this._stars.push({
-				selected: i <= tempValue,
-				index: i,
-				halfStar,
-			});
-		}
-	}
-
-	_onclick(event) {
-		if (this.disabled || this.readonly) {
-			return;
-		}
-
-		this.value = parseInt(event.target.getAttribute("data-value"));
-
-		if (this.value === 1 && this._liveValue === 1) {
-			this.value = 0;
-		}
-
-		if (this._liveValue !== this.value) {
-			this.fireEvent("change");
-			this._liveValue = this.value;
-		}
-	}
-
-	_onkeydown(event) {
-		if (this.disabled || this.readonly) {
-			return;
-		}
-
-		const down = isDown(event) || isLeft(event);
-		const up = isRight(event) || isUp(event) || isSpace(event) || isEnter(event);
-
-		if (down || up) {
-			event.preventDefault();
-
-			if (down && this.value > 0) {
-				this.value = Math.round(this.value - 1);
-				this.fireEvent("change");
-			} else if (up && this.value < this.maxValue) {
-				this.value = Math.round(this.value + 1);
-				this.fireEvent("change");
-			}
-		}
-	}
-
-	_onfocusin() {
-		if (this.disabled) {
-			return;
-		}
-
-		this._focused = true;
-		this._liveValue = this.value;
-	}
-
-	_onfocusout() {
-		this._focused = false;
-	}
-
-	get tabIndex() {
-		return this.disabled ? "-1" : "0";
-	}
-
-	get tooltip() {
-		return this.title || this.defaultTooltip;
-	}
-
-	get defaultTooltip() {
-		return this.i18nBundle.getText(RATING_INDICATOR_TOOLTIP_TEXT);
-	}
-
-	get _ariaRoleDescription() {
-		return this.i18nBundle.getText(RATING_INDICATOR_TEXT);
-	}
-
-	get _ariaDisabled() {
-		return this.disabled || undefined;
-	}
-}
-
+let RatingIndicator = RatingIndicator_1 = class RatingIndicator extends UI5Element {
+    static async onDefine() {
+        RatingIndicator_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    constructor() {
+        super();
+    }
+    onBeforeRendering() {
+        this.calcState();
+    }
+    calcState() {
+        this._stars = [];
+        for (let i = 1; i < this.max + 1; i++) {
+            const remainder = Math.round((this.value - Math.floor(this.value)) * 10);
+            let halfStar = false, tempValue = this.value;
+            if (Math.floor(this.value) + 1 === i && remainder > 2 && remainder < 8) {
+                halfStar = true;
+            }
+            else if (remainder <= 2) {
+                tempValue = Math.floor(this.value);
+            }
+            else if (remainder >= 8) {
+                tempValue = Math.ceil(this.value);
+            }
+            this._stars.push({
+                selected: i <= tempValue,
+                index: i,
+                halfStar,
+            });
+        }
+    }
+    _onclick(e) {
+        const target = e.target;
+        if (!(target instanceof HTMLElement) || this.disabled || this.readonly) {
+            return;
+        }
+        const targetValue = target.getAttribute("data-ui5-value");
+        if (targetValue !== null) {
+            this.value = parseInt(targetValue);
+            if (this.value === 1 && this._liveValue === 1) {
+                this.value = 0;
+            }
+            if (this._liveValue !== this.value) {
+                this.fireEvent("change");
+                this._liveValue = this.value;
+            }
+        }
+    }
+    _onkeydown(e) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const isDecrease = isDown(e) || isLeft(e);
+        const isIncrease = isRight(e) || isUp(e);
+        const isIncreaseWithReset = isSpace(e) || isEnter(e);
+        const isMin = isHome(e);
+        const isMax = isEnd(e);
+        const isNumber = (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);
+        if (isDecrease || isIncrease || isIncreaseWithReset || isMin || isMax || isNumber) {
+            e.preventDefault();
+            if (isDecrease && this.value > 0) {
+                this.value = Math.round(this.value - 1);
+            }
+            else if (isIncrease && this.value < this.max) {
+                this.value = Math.round(this.value + 1);
+            }
+            else if (isIncreaseWithReset) {
+                const proposedValue = Math.round(this.value + 1);
+                this.value = proposedValue > this.max ? 0 : proposedValue;
+            }
+            else if (isMin) {
+                this.value = 0;
+            }
+            else if (isMax) {
+                this.value = this.max;
+            }
+            else if (isNumber) {
+                const pressedNumber = parseInt(e.key);
+                this.value = pressedNumber > this.max ? this.max : pressedNumber;
+            }
+            this.fireEvent("change");
+        }
+    }
+    _onfocusin() {
+        if (this.disabled) {
+            return;
+        }
+        this._focused = true;
+        this._liveValue = this.value;
+    }
+    _onfocusout() {
+        this._focused = false;
+    }
+    get effectiveTabIndex() {
+        const tabindex = this.getAttribute("tabindex");
+        return this.disabled ? "-1" : tabindex || "0";
+    }
+    get ratingTooltip() {
+        return this.tooltip || this.defaultTooltip;
+    }
+    get defaultTooltip() {
+        return RatingIndicator_1.i18nBundle.getText(RATING_INDICATOR_TOOLTIP_TEXT);
+    }
+    get _ariaRoleDescription() {
+        return RatingIndicator_1.i18nBundle.getText(RATING_INDICATOR_TEXT);
+    }
+    get _ariaDisabled() {
+        return this.disabled || undefined;
+    }
+    get _ariaLabel() {
+        return getEffectiveAriaLabelText(this);
+    }
+    get _ariaDescription() {
+        return this.required ? RatingIndicator_1.i18nBundle.getText(RATING_INDICATOR_ARIA_DESCRIPTION) : undefined;
+    }
+    get ariaReadonly() {
+        return this.readonly ? "true" : undefined;
+    }
+};
+__decorate([
+    property({ validator: Float, defaultValue: 0 })
+], RatingIndicator.prototype, "value", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 5 })
+], RatingIndicator.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean })
+], RatingIndicator.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], RatingIndicator.prototype, "readonly", void 0);
+__decorate([
+    property()
+], RatingIndicator.prototype, "accessibleName", void 0);
+__decorate([
+    property({ defaultValue: "" })
+], RatingIndicator.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ type: Boolean })
+], RatingIndicator.prototype, "required", void 0);
+__decorate([
+    property()
+], RatingIndicator.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: Object, multiple: true })
+], RatingIndicator.prototype, "_stars", void 0);
+__decorate([
+    property({ type: Boolean })
+], RatingIndicator.prototype, "_focused", void 0);
+RatingIndicator = RatingIndicator_1 = __decorate([
+    customElement({
+        tag: "ui5-rating-indicator",
+        languageAware: true,
+        renderer: litRender,
+        styles: RatingIndicatorCss,
+        template: RatingIndicatorTemplate,
+        dependencies: [Icon],
+    })
+    /**
+     * The event is fired when the value changes.
+     * @public
+     */
+    ,
+    event("change")
+], RatingIndicator);
 RatingIndicator.define();
-
 export default RatingIndicator;
+//# sourceMappingURL=RatingIndicator.js.map

package/dist/RatingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingIndicator.js","sourceRoot":"","sources":["../src/RatingIndicator.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\n\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport {\n\tisDown,\n\tisUp,\n\tisLeft,\n\tisRight,\n\tisSpace,\n\tisEnter,\n\tisHome,\n\tisEnd,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport Float from \"@ui5/webcomponents-base/dist/types/Float.js\";\nimport {\n\tRATING_INDICATOR_TEXT,\n\tRATING_INDICATOR_TOOLTIP_TEXT,\n\tRATING_INDICATOR_ARIA_DESCRIPTION,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport RatingIndicatorTemplate from \"./generated/templates/RatingIndicatorTemplate.lit.js\";\nimport Icon from \"./Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/favorite.js\";\nimport \"@ui5/webcomponents-icons/dist/unfavorite.js\";\n\n// Styles\nimport RatingIndicatorCss from \"./generated/themes/RatingIndicator.css.js\";\n\ntype Star = {\n\tselected: boolean,\n\tindex: number,\n\thalfStar: boolean\n}\n\n/**\n * @class\n *\n * ### Overview\n * The Rating Indicator is used to display a specific number of icons that are used to rate an item.\n * Additionally, it is also used to display the average and overall ratings.\n *\n * ### Usage\n * The recommended number of icons is between 5 and 7.\n *\n * ### Responsive Behavior\n * You can change the size of the Rating Indicator by changing its `font-size` CSS property.\n *\n * Example: `<ui5-rating-indicator style=\"font-size: 3rem;\"></ui5-rating-indicator>`\n *\n * ### Keyboard Handling\n * When the `ui5-rating-indicator` is focused, the user can change the rating\n * with the following keyboard shortcuts:\n *\n * - [RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing\n * - [LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.\n * - [Home] - Sets the lowest value.\n * - [End] - Sets the highest value.\n * - [SPACE/ENTER/RETURN] - Increases the value of the rating by one step. If the highest value is reached, sets the rating to the lowest value.\n * - Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/RatingIndicator.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.8\n */\n\n@customElement({\n\ttag: \"ui5-rating-indicator\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\tstyles: RatingIndicatorCss,\n\ttemplate: RatingIndicatorTemplate,\n\tdependencies: [Icon],\n})\n/**\n * The event is fired when the value changes.\n * @public\n */\n@event(\"change\")\n\nclass RatingIndicator extends UI5Element {\n\t/**\n\t * The indicated value of the rating.\n\t *\n\t * **Note:** If you set a number which is not round, it would be shown as follows:\n\t *\n\t * - 1.0 - 1.2 -> 1\n\t * - 1.3 - 1.7 -> 1.5\n\t * - 1.8 - 1.9 -> 2\n\t * @default 0\n\t * @public\n\t */\n\t@property({ validator: Float, defaultValue: 0 })\n\tvalue!: number;\n\n\t/**\n\t * The number of displayed rating symbols.\n\t * @default 5\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property({ validator: Integer, defaultValue: 5 })\n\tmax!: number;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t *\n\t * **Note:** A disabled component is completely noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines whether the component is read-only.\n\t *\n\t * **Note:** A read-only component is not editable,\n\t * but still provides visual feedback upon user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\treadonly!: boolean;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default \"\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component.\n\t * @default \"\"\n\t * @public\n\t * @since 1.15.0\n\t */\n\t @property({ defaultValue: \"\" })\n\t accessibleNameRef!: string;\n\n\t /**\n\t * Defines whether the component is required.\n\t * @default false\n\t * @public\n\t * @since 1.15.0\n\t */\n\t@property({ type: Boolean })\n\trequired!: boolean;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t * @default \"\"\n\t * @public\n\t * @since 1.19.0\n\t */\n\t@property()\n\ttooltip!: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object, multiple: true })\n\t_stars!: Array<Star>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_focused!: boolean;\n\n\t_liveValue?: number;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tRatingIndicator.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonBeforeRendering() {\n\t\tthis.calcState();\n\t}\n\n\tcalcState() {\n\t\tthis._stars = [];\n\n\t\tfor (let i = 1; i < this.max + 1; i++) {\n\t\t\tconst remainder = Math.round((this.value - Math.floor(this.value)) * 10);\n\t\t\tlet halfStar = false,\n\t\t\t\ttempValue = this.value;\n\n\t\t\tif (Math.floor(this.value) + 1 === i && remainder > 2 && remainder < 8) {\n\t\t\t\thalfStar = true;\n\t\t\t} else if (remainder <= 2) {\n\t\t\t\ttempValue = Math.floor(this.value);\n\t\t\t} else if (remainder >= 8) {\n\t\t\t\ttempValue = Math.ceil(this.value);\n\t\t\t}\n\n\t\t\tthis._stars.push({\n\t\t\t\tselected: i <= tempValue,\n\t\t\t\tindex: i,\n\t\t\t\thalfStar,\n\t\t\t});\n\t\t}\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tconst target = e.target as UI5Element;\n\n\t\tif (!(target instanceof HTMLElement) || this.disabled || this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst targetValue = target.getAttribute(\"data-ui5-value\");\n\n\t\tif (targetValue !== null) {\n\t\t\tthis.value = parseInt(targetValue);\n\n\t\t\tif (this.value === 1 && this._liveValue === 1) {\n\t\t\t\tthis.value = 0;\n\t\t\t}\n\n\t\t\tif (this._liveValue !== this.value) {\n\t\t\t\tthis.fireEvent(\"change\");\n\t\t\t\tthis._liveValue = this.value;\n\t\t\t}\n\t\t}\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (this.disabled || this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst isDecrease = isDown(e) || isLeft(e);\n\t\tconst isIncrease = isRight(e) || isUp(e);\n\t\tconst isIncreaseWithReset = isSpace(e) || isEnter(e);\n\t\tconst isMin = isHome(e);\n\t\tconst isMax = isEnd(e);\n\t\tconst isNumber = (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);\n\n\t\tif (isDecrease || isIncrease || isIncreaseWithReset || isMin || isMax || isNumber) {\n\t\t\te.preventDefault();\n\n\t\t\tif (isDecrease && this.value > 0) {\n\t\t\t\tthis.value = Math.round(this.value - 1);\n\t\t\t} else if (isIncrease && this.value < this.max) {\n\t\t\t\tthis.value = Math.round(this.value + 1);\n\t\t\t} else if (isIncreaseWithReset) {\n\t\t\t\tconst proposedValue = Math.round(this.value + 1);\n\t\t\t\tthis.value = proposedValue > this.max ? 0 : proposedValue;\n\t\t\t} else if (isMin) {\n\t\t\t\tthis.value = 0;\n\t\t\t} else if (isMax) {\n\t\t\t\tthis.value = this.max;\n\t\t\t} else if (isNumber) {\n\t\t\t\tconst pressedNumber = parseInt(e.key);\n\t\t\t\tthis.value = pressedNumber > this.max ? this.max : pressedNumber;\n\t\t\t}\n\n\t\t\tthis.fireEvent(\"change\");\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._focused = true;\n\t\tthis._liveValue = this.value;\n\t}\n\n\t_onfocusout() {\n\t\tthis._focused = false;\n\t}\n\n\tget effectiveTabIndex() {\n\t\tconst tabindex = this.getAttribute(\"tabindex\");\n\t\treturn this.disabled ? \"-1\" : tabindex || \"0\";\n\t}\n\n\tget ratingTooltip() {\n\t\treturn this.tooltip || this.defaultTooltip;\n\t}\n\n\tget defaultTooltip() {\n\t\treturn RatingIndicator.i18nBundle.getText(RATING_INDICATOR_TOOLTIP_TEXT);\n\t}\n\n\tget _ariaRoleDescription() {\n\t\treturn RatingIndicator.i18nBundle.getText(RATING_INDICATOR_TEXT);\n\t}\n\n\tget _ariaDisabled() {\n\t\treturn this.disabled || undefined;\n\t}\n\n\tget _ariaLabel() {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tget _ariaDescription() {\n\t\treturn this.required ? RatingIndicator.i18nBundle.getText(RATING_INDICATOR_ARIA_DESCRIPTION) : undefined;\n\t}\n\n\tget ariaReadonly() {\n\t\treturn this.readonly ? \"true\" : undefined;\n\t}\n}\n\nRatingIndicator.define();\n\nexport default RatingIndicator;\n"]}

package/dist/ResponsivePopover.d.ts

@@ -0,0 +1,72 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { PopupBeforeCloseEventDetail } from "./Popup.js";
+import Popover from "./Popover.js";
+import Dialog from "./Dialog.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+type ResponsivePopoverBeforeCloseEventDetail = PopupBeforeCloseEventDetail;
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.
+ * The component improves tremendously the user experience on mobile.
+ *
+ * ### Usage
+ * Use it when you want to make sure that all the content is visible on any device.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/ResponsivePopover.js";`
+ * @constructor
+ * @extends Popover
+ * @since 1.0.0-rc.6
+ * @public
+ * @csspart header - Used to style the header of the component
+ * @csspart content - Used to style the content of the component
+ * @csspart footer - Used to style the footer of the component
+ */
+declare class ResponsivePopover extends Popover {
+    /**
+     * Defines if only the content would be displayed (without header and footer) in the popover on Desktop.
+     * By default both the header and footer would be displayed.
+     * @private
+     */
+    contentOnlyOnDesktop: boolean;
+    /**
+     * Used internaly for controls which must not have header.
+     * @private
+     */
+    _hideHeader: boolean;
+    /**
+     * Defines whether a close button will be rendered in the header of the component
+     * **Note:** If you are using the `header` slot, this property will have no effect
+     * @private
+     * @default false
+     * @since 1.0.0-rc.16
+     */
+    _hideCloseButton: boolean;
+    static i18nBundle: I18nBundle;
+    constructor();
+    openPopup(): Promise<void>;
+    _show(): void;
+    /**
+     * Closes the popover/dialog.
+     * @override
+     */
+    closePopup(escPressed?: boolean, preventRegistryUpdate?: boolean, preventFocusRestore?: boolean): void;
+    toggle(opener: HTMLElement): void;
+    get classes(): import("@ui5/webcomponents-base/dist/types.js").ClassMap;
+    get _dialog(): Dialog;
+    get contentDOM(): HTMLElement;
+    get _isPhone(): boolean;
+    get _displayHeader(): boolean;
+    get _displayFooter(): boolean;
+    get _closeDialogAriaLabel(): string;
+    _beforeDialogOpen(e: CustomEvent<PopupBeforeCloseEventDetail>): void;
+    _afterDialogClose(e: CustomEvent): void;
+    _propagateDialogEvent(e: CustomEvent): void;
+    get isModal(): boolean;
+    static onDefine(): Promise<void>;
+}
+export default ResponsivePopover;
+export type { ResponsivePopoverBeforeCloseEventDetail, };