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

package/src/CalendarHeader.ts

@@ -1,205 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isSpace, isEnter } 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 CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import Icon from "./Icon.js";
-import CalendarHeaderTemplate from "./generated/templates/CalendarHeaderTemplate.lit.js";
-import {
-	CALENDAR_HEADER_NEXT_BUTTON,
-	CALENDAR_HEADER_PREVIOUS_BUTTON,
-} from "./generated/i18n/i18n-defaults.js";
-
-// Styles
-import calendarHeaderStyles from "./generated/themes/CalendarHeader.css.js";
-
-type SecondaryCalendarButtonTexts = {
-	monthButtonText: string,
-	monthButtonInfo: string,
-	yearButtonText: string,
-}
-
-@customElement({
-	tag: "ui5-calendar-header",
-	languageAware: true,
-	renderer: litRender,
-	template: CalendarHeaderTemplate,
-	styles: calendarHeaderStyles,
-	dependencies: [Icon],
-})
-@event("next-press")
-@event("previous-press")
-@event("show-month-press")
-@event("show-year-press")
-class CalendarHeader extends UI5Element {
-	/**
-	 * Defines component's timestamp.
-	 * <b>Note:</b> set by the Calendar component
-	 * @type {sap.ui.webc.base.types.Integer}
-	 * @name sap.ui.webc.main.CalendarHeader.prototype.timestamp
-	 * @public
-	 */
-	@property({ validator: Integer })
-	timestamp?: number;
-
-	/**
-	 * Defines component's primary calendar type.
-	 * <b>Note:</b> set by the Calendar component
-	 * @type {sap.ui.webc.base.types.CalendarType}
-	 * @name sap.ui.webc.main.CalendarHeader.prototype.primaryCalendarType
-	 * @public
-	 */
-	@property({ type: CalendarType })
-	primaryCalendarType?: CalendarType;
-
-	/**
-	 * Defines component's secondary calendar type.
-	 * <b>Note:</b> set by the Calendar component
-	 * @sience 1.0.0-rc.16
-	 * @defaultvalue undefined
-	 * @type {sap.ui.webc.base.types.CalendarType}
-	 * @name sap.ui.webc.main.CalendarHeader.prototype.secondaryCalendarType
-	 * @public
-	 */
-	@property({ type: CalendarType })
-	secondaryCalendarType?: CalendarType;
-
-	/**
-	 * Stores information for month button for secondary calendar type
-	 * @type {object}
-	 * @private
-	*/
-	@property({ type: Object })
-	buttonTextForSecondaryCalendarType!: SecondaryCalendarButtonTexts;
-
-	@property({ type: Boolean })
-	isNextButtonDisabled!: boolean;
-
-	@property({ type: Boolean })
-	isPrevButtonDisabled!: boolean;
-
-	@property({ type: Boolean })
-	isMonthButtonHidden!: boolean;
-
-	@property()
-	_monthButtonText!: string;
-
-	@property()
-	_yearButtonText!: string;
-
-	@property()
-	_yearButtonTextSecType!: string;
-
-	@property({ type: Boolean })
-	isYearButtonHidden!: boolean;
-
-	_prevButtonText?: string;
-	_nextButtonText?: string;
-	_secondMonthButtonText?: string;
-	_secondYearButtonText?: string;
-
-	static i18nBundle: I18nBundle;
-
-	static async onDefine() {
-		CalendarHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-	}
-
-	constructor() {
-		super();
-	}
-
-	onBeforeRendering() {
-		this._prevButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_PREVIOUS_BUTTON);
-		this._nextButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON);
-
-		if (this.hasSecondaryCalendarType) {
-			this._secondMonthButtonText = this.buttonTextForSecondaryCalendarType.monthButtonText;
-			this._secondYearButtonText = this.buttonTextForSecondaryCalendarType.yearButtonText;
-		}
-	}
-
-	onPrevButtonClick(e: MouseEvent) {
-		this.fireEvent("previous-press", e);
-	}
-
-	onNextButtonClick(e: MouseEvent) {
-		this.fireEvent("next-press", e);
-	}
-
-	onMonthButtonClick(e: MouseEvent) {
-		this.fireEvent("show-month-press", e);
-	}
-
-	onMonthButtonKeyDown(e: KeyboardEvent) {
-		if (isSpace(e)) {
-			e.preventDefault();
-		}
-
-		if (isEnter(e)) {
-			this.fireEvent("show-month-press", e);
-		}
-	}
-
-	onMonthButtonKeyUp(e: KeyboardEvent) {
-		if (isSpace(e)) {
-			e.preventDefault();
-			this.fireEvent("show-month-press", e);
-		}
-	}
-
-	onYearButtonClick(e: MouseEvent) {
-		this.fireEvent("show-year-press", e);
-	}
-
-	onYearButtonKeyDown(e: KeyboardEvent) {
-		if (isSpace(e)) {
-			e.preventDefault();
-		}
-
-		if (isEnter(e)) {
-			this.fireEvent("show-year-press", e);
-		}
-	}
-
-	onYearButtonKeyUp(e: KeyboardEvent) {
-		if (isSpace(e)) {
-			e.preventDefault();
-			this.fireEvent("show-year-press", e);
-		}
-	}
-
-	get hasSecondaryCalendarType() {
-		return !!this.secondaryCalendarType;
-	}
-
-	get classes() {
-		return {
-			prevButton: {
-				"ui5-calheader-arrowbtn": true,
-				"ui5-calheader-arrowbtn-disabled": this.isPrevButtonDisabled,
-			},
-			nextButton: {
-				"ui5-calheader-arrowbtn": true,
-				"ui5-calheader-arrowbtn-disabled": this.isNextButtonDisabled,
-			},
-		};
-	}
-
-	get accInfo() {
-		return {
-			ariaLabelMonthButton: this.hasSecondaryCalendarType
-				? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.monthButtonInfo}` : `${this._monthButtonText}`,
-		};
-	}
-}
-
-CalendarHeader.define();
-
-export default CalendarHeader;

package/src/CalendarPart.ts

@@ -1,100 +0,0 @@
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
-import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
-import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
-import DateComponentBase from "./DateComponentBase.js";
-
-/**
- * @class
- *
- * Abstract base class for Calendar, DayPicker, MonthPicker and YearPicker that adds support for:
- *  - common properties (timestamp, selectedDates): declarations and methods that operate on them
- *  - other common code
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.CalendarPart
- * @extends sap.ui.webc.main.DateComponentBase
- * @public
- */
-class CalendarPart extends DateComponentBase {
-	/**
-	 * The timestamp of the currently focused date. Set this property to move the component's focus to a certain date.
-	 * <b>Node:</b> Timestamp is 10-digit Integer representing the seconds (not milliseconds) since the Unix Epoch.
-	 * @type {sap.ui.webc.base.types.Integer}
-	 * @protected
-	 */
-	@property({ validator: Integer })
-	timestamp?: number;
-
-	get _minTimestamp() {
-		return this._minDate.valueOf() / 1000;
-	}
-
-	get _maxTimestamp() {
-		return this._maxDate.valueOf() / 1000;
-	}
-
-	/**
-	 * Returns the effective timestamp to be used by the respective calendar part
-	 * @protected
-	 */
-	get _timestamp() {
-		let timestamp = this.timestamp !== undefined ? this.timestamp : getTodayUTCTimestamp(this._primaryCalendarType);
-		if (timestamp < this._minTimestamp || timestamp > this._maxTimestamp) {
-			timestamp = this._minTimestamp;
-		}
-		return timestamp;
-	}
-
-	get _localDate() {
-		return new Date(this._timestamp * 1000);
-	}
-
-	/**
-	 * Returns a CalendarDate instance, representing the _timestamp getter - this date is central to all components' rendering logic
-	 * @protected
-	 */
-	get _calendarDate() {
-		return CalendarDate.fromTimestamp(this._localDate.getTime(), this._primaryCalendarType);
-	}
-
-	/**
-	 * Change a timestamp and enforce limits
-	 *
-	 * @param timestamp
-	 * @protected
-	 */
-	_safelySetTimestamp(timestamp: number) {
-		const min = this._minDate.valueOf() / 1000;
-		const max = this._maxDate.valueOf() / 1000;
-
-		if (timestamp < min) {
-			timestamp = min;
-		}
-		if (timestamp > max) {
-			timestamp = max;
-		}
-
-		this.timestamp = timestamp;
-	}
-
-	/**
-	 * Modify a timestamp by a certain amount of days/months/years and enforce limits
-	 * @param amount
-	 * @param unit
-	 * @protected
-	 */
-	_safelyModifyTimestampBy(amount: number, unit: string) {
-		const newDate = modifyDateBy(this._calendarDate, amount, unit);
-		this._safelySetTimestamp(newDate.valueOf() / 1000);
-	}
-
-	_getTimestampFromDom(domNode: HTMLElement) {
-		const oMonthDomRef = domNode.getAttribute("data-sap-timestamp")!;
-		return parseInt(oMonthDomRef);
-	}
-}
-
-export default CalendarPart;

package/src/Card.ts

@@ -1,139 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import CardTemplate from "./generated/templates/CardTemplate.lit.js";
-import Icon from "./Icon.js";
-
-import {
-	ARIA_ROLEDESCRIPTION_CARD,
-	ARIA_LABEL_CARD_CONTENT,
-} from "./generated/i18n/i18n-defaults.js";
-
-// Styles
-import cardCss from "./generated/themes/Card.css.js";
-
-/**
- * @class
- * <h3 class="comment-api-title">Overview</h3>
- *
- * The <code>ui5-card</code> is a component that represents information in the form of a
- * tile with separate header and content areas.
- * The content area of a <code>ui5-card</code> can be arbitrary HTML content.
- * The header can be used through slot <code>header</code>. For which there is a <code>ui5-card-header</code> component to achieve the card look and fill.
- *
- * Note: We recommend the usage of <code>ui5-card-header</code> for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.
- *
- * <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.
- *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/Card";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/CardHeader.js";</code> (for <code>ui5-card-header</code>)
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Card
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-card
- * @public
- * @appenddocs sap.ui.webc.main.CardHeader
- */
-@customElement({
-	tag: "ui5-card",
-	languageAware: true,
-	renderer: litRender,
-	template: CardTemplate,
-	styles: cardCss,
-	dependencies: [Icon],
-})
-class Card extends UI5Element {
-	/**
-	 * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.
-	 * <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set.
-	 *
-	 *
-	 * @type {string}
-	 * @defaultvalue ""
-	 * @name sap.ui.webc.main.Card.prototype.accessibleName
-	 * @public
-	 * @since 1.0.0-rc.16
-	*/
-	@property()
-	accessibleName!: string;
-
-	/**
-	 * Defines the IDs of the elements that label the component.
-	 *
-	 * @type {string}
-	 * @defaultvalue ""
-	 * @name sap.ui.webc.main.Card.prototype.accessibleNameRef
-	 * @public
-	 * @since 1.0.0-rc.16
-	*/
-	@property()
-	accessibleNameRef!: string;
-
-	/**
-	 * Defines the content of the component.
-	 * @type {HTMLElement[]}
-	 * @slot content
-	 * @name sap.ui.webc.main.Card.prototype.default
-	 * @public
-	*/
-	@slot({ type: HTMLElement, "default": true })
-	content!: Array<HTMLElement>;
-
-	/**
-	 * Defines the header of the component.
-	 * <br><br>
-	 * <b>Note:</b> Use <code>ui5-card-header</code> for the intended design.
-	 * @type {HTMLElement[]}
-	 * @since 1.0.0-rc.15
-	 * @slot header
-	 * @name sap.ui.webc.main.Card.prototype.header
-	 * @public
-	*/
-	@slot()
-	header!: Array<HTMLElement>;
-
-	static i18nBundle: I18nBundle;
-
-	get classes() {
-		return {
-			root: {
-				"ui5-card-root": true,
-				"ui5-card--nocontent": !this.content.length,
-			},
-		};
-	}
-
-	get _hasHeader() {
-		return !!this.header.length;
-	}
-
-	get _getAriaLabel() {
-		const effectiveAriaLabelText = getEffectiveAriaLabelText(this),
-			effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
-		return Card.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
-	}
-
-	get _ariaCardContentLabel() {
-		return Card.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
-	}
-
-	static async onDefine() {
-		Card.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-	}
-}
-
-Card.define();
-
-export default Card;

package/src/CardHeader.ts

@@ -1,265 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.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 type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.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 {
-	AVATAR_TOOLTIP,
-	ARIA_ROLEDESCRIPTION_CARD_HEADER,
-	ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER,
-} from "./generated/i18n/i18n-defaults.js";
-
-// Styles
-import cardHeaderCss from "./generated/themes/CardHeader.css.js";
-
-/**
- * @class
- * <h3 class="comment-api-title">Overview</h3>
- *
- * The <code>ui5-card-header</code> is a component, meant to be used as a header of the <code>ui5-card</code> component.
- * It displays valuable information, that can be defined with several properties, such as: <code>titleText</code>, <code>subtitleText</code>, <code>status</code>
- * and two slots: <code>avatar</code> and <code>action</code>.
- *
- * <h3>Keyboard handling</h3>
- * In case you enable <code>interactive</code> property, you can press the <code>ui5-card-header</code> by Space and Enter keys.
- *
- * <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-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>
- * </ul>
- *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/CardHeader";</code>
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.CardHeader
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-card-header
- * @public
- * @since 1.0.0-rc.15
- */
-@customElement({
-	tag: "ui5-card-header",
-	languageAware: true,
-	renderer: litRender,
-	template: CardHeaderTemplate,
-	styles: cardHeaderCss,
-})
-/**
- * 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")
-class CardHeader extends UI5Element {
-	/**
-	 * Defines the title text.
-	 * @type {string}
-	 * @defaultvalue ""
-	 * @name sap.ui.webc.main.CardHeader.prototype.titleText
-	 * @public
-	*/
-	@property()
-	titleText!: string;
-
-	/**
-	 * Defines the subtitle text.
-	 * @type {string}
-	 * @defaultvalue ""
-	 * @name sap.ui.webc.main.CardHeader.prototype.subtitleText
-	 * @public
-	*/
-	@property()
-	subtitleText!: string;
-
-	/**
-	 * Defines the status text.
-	 * @type {string}
-	 * @defaultvalue ""
-	 * @name sap.ui.webc.main.CardHeader.prototype.status
-	 * @public
-	*/
-	@property()
-	status!: 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
-	 * @name sap.ui.webc.main.CardHeader.prototype.interactive
-	 * @public
-	*/
-	@property({ type: Boolean })
-	interactive!: 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 {sap.ui.webc.base.types.Integer}
-	 * @defaultValue 3
-	*/
-	@property({ validator: Integer, defaultValue: 3 })
-	_ariaLevel!: number;
-
-	@property({ type: Boolean, noAttribute: true })
-	_headerActive!: boolean;
-
-	/**
-	 * Defines an avatar image, displayed in the left most part of the header.
-	 * @type {HTMLElement[]}
-	 * @slot
-	 * @name sap.ui.webc.main.CardHeader.prototype.avatar
-	 * @public
-	*/
-	@slot()
-	avatar!: Array<HTMLElement>;
-
-	/**
-	 * Defines an action, displayed in the right most part of the header.
-	 * @type {HTMLElement[]}
-	 * @slot
-	 * @name sap.ui.webc.main.CardHeader.prototype.action
-	 * @public
-	*/
-	@slot()
-	action!: Array<HTMLElement>;
-
-	static i18nBundle: I18nBundle;
-
-	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<HTMLElement>(".ui5-card-header")!;
-	}
-
-	get ariaRoleDescription() {
-		return this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
-	}
-
-	get ariaRoleFocusableElement() {
-		return this.interactive ? "button" : null;
-	}
-
-	get ariaCardAvatarLabel() {
-		return CardHeader.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.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: MouseEvent) {
-		// prevents the native browser "click" event from firing
-		e.stopImmediatePropagation();
-
-		if (this.interactive && this._root.contains(e.target as HTMLElement)) {
-			this.fireEvent("click");
-		}
-	}
-
-	_keydown(e: KeyboardEvent) {
-		if (!this.interactive || !this._root.contains(e.target as HTMLElement)) {
-			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: KeyboardEvent) {
-		if (!this.interactive || !this._root.contains(e.target as HTMLElement)) {
-			return;
-		}
-
-		const space = isSpace(e);
-
-		this._headerActive = false;
-
-		if (space) {
-			this.fireEvent("click");
-		}
-	}
-}
-
-CardHeader.define();
-
-export default CardHeader;