@ui5/webcomponents 0.0.0-97cba4b0b → 0.0.0-99b763015

package/src/RatingIndicator.ts

@@ -1,315 +0,0 @@
-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,
-	isHome,
-	isEnd,
-} from "@ui5/webcomponents-base/dist/Keys.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type I18nBundle 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 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";
-
-type Star = {
-	selected: boolean,
-	index: number,
-	halfStar: boolean
-}
-
-/**
- * @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.
- * Additionally, it is also used to display the average and overall ratings.
- *
- * <h3>Usage</h3>
- * The recommended number of icons is between 5 and 7.
- *
- * <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>
- *
- * <h3>Keyboard Handling</h3>
- * When the <code>ui5-rating-indicator</code> is focused, the user can change the rating
- * with the following keyboard shortcuts:
- * <br>
- *
- * <ul>
- * <li>[RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing</li>
- * <li>[LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.</li>
- * <li>[HOME] - Sets the lowest value.</li>
- * <li>[END] - Sets the highest value.</li>
- * <li>[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.</li>
- * <li>Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.</li>
- * </ul>
- *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/RatingIndicator.js";</code>
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.RatingIndicator
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-rating-indicator
- * @public
- * @since 1.0.0-rc.8
- */
-
-@customElement({
-	tag: "ui5-rating-indicator",
-	languageAware: true,
-	renderer: litRender,
-	styles: RatingIndicatorCss,
-	template: RatingIndicatorTemplate,
-	dependencies: [Icon],
-})
-/**
- * The event is fired when the value changes.
- *
- * @event sap.ui.webc.main.RatingIndicator#change
- * @public
- */
-@event("change")
-
-class RatingIndicator extends UI5Element {
-	/**
-	 * 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 {sap.ui.webc.base.types.Float}
-	 * @name sap.ui.webc.main.RatingIndicator.prototype.value
-	 * @defaultvalue 0
-	 * @public
-	 */
-	@property({ validator: Float, defaultValue: 0 })
-	value!: number;
-
-	/**
-	 * The number of displayed rating symbols.
-	 * @type {sap.ui.webc.base.types.Integer}
-	 * @name sap.ui.webc.main.RatingIndicator.prototype.max
-	 * @defaultvalue 5
-	 * @public
-	 * @since 1.0.0-rc.15
-	 */
-	@property({ validator: Integer, defaultValue: 5 })
-	max!: number;
-
-	/**
-	 * Defines whether the component is disabled.
-	 *
-	 * <br><br>
-	 * <b>Note:</b> A disabled component is completely noninteractive.
-	 * @type {boolean}
-	 * @name sap.ui.webc.main.RatingIndicator.prototype.disabled
-	 * @defaultvalue false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	disabled!: boolean;
-
-	/**
-	 * Defines whether the component is read-only.
-	 * <br><br>
-	 * <b>Note:</b> A read-only component is not editable,
-	 * but still provides visual feedback upon user interaction.
-	 *
-	 * @type {boolean}
-	 * @name sap.ui.webc.main.RatingIndicator.prototype.readonly
-	 * @defaultvalue false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	readonly!: boolean;
-
-	/**
-	 * Defines the accessible ARIA name of the component.
-	 *
-	 * @type {string}
-	 * @name sap.ui.webc.main.RatingIndicator.prototype.accessibleName
-	 * @public
-	 * @since 1.0.0-rc.15
-	 */
-	@property()
-	accessibleName!: string;
-
-	/**
-	 * @private
-	 */
-	@property({ type: Object, multiple: true })
-	_stars!: Array<Star>;
-
-	/**
-	 * @private
-	 */
-	@property({ type: Boolean })
-	_focused!: boolean;
-
-	_liveValue?: number;
-
-	static i18nBundle: I18nBundle;
-
-	static async onDefine() {
-		RatingIndicator.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: MouseEvent) {
-		const target = e.target as UI5Element;
-
-		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: KeyboardEvent) {
-		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 tooltip() {
-		return this.getAttribute("title") || this.defaultTooltip;
-	}
-
-	get defaultTooltip() {
-		return RatingIndicator.i18nBundle.getText(RATING_INDICATOR_TOOLTIP_TEXT);
-	}
-
-	get _ariaRoleDescription() {
-		return RatingIndicator.i18nBundle.getText(RATING_INDICATOR_TEXT);
-	}
-
-	get _ariaDisabled() {
-		return this.disabled || undefined;
-	}
-
-	get ariaReadonly() {
-		return this.readonly ? "true" : undefined;
-	}
-}
-
-RatingIndicator.define();
-
-export default RatingIndicator;

package/src/ResponsivePopover.ts

@@ -1,227 +0,0 @@
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getNextZIndex } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
-
-import { RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON } from "./generated/i18n/i18n-defaults.js";
-
-import ResponsivePopoverTemplate from "./generated/templates/ResponsivePopoverTemplate.lit.js";
-import type { PopupBeforeCloseEventDetail } from "./Popup.js";
-import Popover from "./Popover.js";
-import Dialog from "./Dialog.js";
-import Button from "./Button.js";
-import Title from "./Title.js";
-import "@ui5/webcomponents-icons/dist/decline.js";
-
-// Styles
-import ResponsivePopoverCss from "./generated/themes/ResponsivePopover.css.js";
-
-type ResponsivePopoverBeforeCloseEventDetail = PopupBeforeCloseEventDetail;
-
-/**
- * @class
- *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-responsive-popover</code> 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.
- *
- * <h3>Usage</h3>
- * Use it when you want to make sure that all the content is visible on any device.
- *
- * <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-responsive-popover</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>header - Used to style the header of the component</li>
- * <li>content - Used to style the content of the component</li>
- * <li>footer - Used to style the footer of the component</li>
- * </ul>
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.ResponsivePopover
- * @extends sap.ui.webc.main.Popover
- * @tagname ui5-responsive-popover
- * @since 1.0.0-rc.6
- * @public
- */
-@customElement({
-	tag: "ui5-responsive-popover",
-	styles: [Popover.styles, ResponsivePopoverCss],
-	template: ResponsivePopoverTemplate,
-	dependencies: [
-		...Popover.dependencies,
-		Button,
-		Dialog,
-		Title,
-	],
-})
-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
-	 */
-	@property({ type: Boolean })
-	contentOnlyOnDesktop!: boolean;
-
-	/**
-	 * Used internaly for controls which must not have header.
-	 * @private
-	 */
-	@property({ type: Boolean })
-	_hideHeader!: boolean;
-
-	/**
-	 * Defines whether a close button will be rendered in the header of the component
-	 * <b>Note:</b> If you are using the <code>header</code> slot, this property will have no effect
-	 *
-	 * @private
-	 * @type {boolean}
-	 * @defaultvalue false
-	 * @since 1.0.0-rc.16
-	 */
-	@property({ type: Boolean })
-	_hideCloseButton!: boolean;
-
-	static i18nBundle: I18nBundle;
-
-	constructor() {
-		super();
-	}
-
-	/**
-	 * Shows popover on desktop and dialog on mobile.
-	 * @param {HTMLElement} opener the element that the popover is shown at
-	 * @param {boolean} [preventInitialFocus=false] Prevents applying the focus inside the popup
-	 * @public
-	 * @async
-	 * @method
-	 * @name sap.ui.webc.main.ResponsivePopover#showAt
-	 * @returns {Promise} Resolves when the responsive popover is open
-	 */
-	async showAt(opener: HTMLElement, preventInitialFocus = false) {
-		if (!isPhone()) {
-			await super.showAt(opener, preventInitialFocus);
-		} else {
-			this.style.display = "contents";
-			const nextZIndex = getNextZIndex();
-			if (!nextZIndex) {
-				return;
-			}
-
-			this.style.zIndex = nextZIndex.toString();
-			await this._dialog.show(preventInitialFocus);
-		}
-	}
-
-	/**
-	 * Closes the popover/dialog.
-	 * @public
-	 * @method
-	 * @name sap.ui.webc.main.ResponsivePopover#close
-	 * @returns {void}
-	 */
-	close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
-		if (!isPhone()) {
-			super.close(escPressed, preventRegistryUpdate, preventFocusRestore);
-		} else {
-			this._dialog.close(escPressed, preventRegistryUpdate, preventFocusRestore);
-		}
-	}
-
-	toggle(opener: HTMLElement) {
-		if (this.isOpen()) {
-			return this.close();
-		}
-
-		this.showAt(opener);
-	}
-
-	/**
-	 * Tells if the responsive popover is open.
-	 * @public
-	 * @method
-	 * @name sap.ui.webc.main.ResponsivePopover#isOpen
-	 * @returns {boolean}
-	 */
-	isOpen() {
-		return (isPhone() && this._dialog) ? this._dialog.isOpen() : super.isOpen();
-	}
-
-	get classes() {
-		const allClasses = super.classes;
-
-		allClasses.header = {
-			"ui5-responsive-popover-header": true,
-			"ui5-responsive-popover-header-no-title": !this.headerText,
-		};
-
-		return allClasses;
-	}
-
-	get _dialog() {
-		return this.shadowRoot!.querySelector<Dialog>("[ui5-dialog]")!;
-	}
-
-	get contentDOM() {
-		return isPhone() ? this._dialog.contentDOM : super.contentDOM;
-	}
-
-	get _isPhone() {
-		return isPhone();
-	}
-
-	get _displayHeader() {
-		return (isPhone() || !this.contentOnlyOnDesktop) && super._displayHeader;
-	}
-
-	get _displayFooter() {
-		return isPhone() || !this.contentOnlyOnDesktop;
-	}
-
-	get _closeDialogAriaLabel() {
-		return ResponsivePopover.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
-	}
-
-	_beforeDialogOpen(e: CustomEvent<PopupBeforeCloseEventDetail>) {
-		this.open = true;
-		this.opened = true;
-		this._propagateDialogEvent(e);
-	}
-
-	_afterDialogClose(e: CustomEvent) {
-		this.open = false;
-		this.opened = false;
-		this._propagateDialogEvent(e);
-	}
-
-	_propagateDialogEvent(e: CustomEvent) {
-		const type = e.type.replace("ui5-", "");
-
-		this.fireEvent(type, e.detail);
-	}
-
-	get isModal() {
-		if (!isPhone()) {
-			return super.isModal;
-		}
-
-		return this._dialog.isModal;
-	}
-
-	static async onDefine() {
-		ResponsivePopover.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-	}
-}
-
-ResponsivePopover.define();
-
-export default ResponsivePopover;
-export type {
-	ResponsivePopoverBeforeCloseEventDetail,
-};