@ui5/webcomponents 0.0.0-453158269 → 0.0.0-4738ea0dc

package/src/TreeListItem.js

@@ -1,343 +0,0 @@
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
-import ListItem from "./ListItem.js";
-import Icon from "./Icon.js";
-import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
-import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-import {
-	TREE_ITEM_ARIA_LABEL,
-	TREE_ITEM_EXPAND_NODE,
-	TREE_ITEM_COLLAPSE_NODE,
-} from "./generated/i18n/i18n-defaults.js";
-
-// Template
-import TreeListItemTemplate from "./generated/templates/TreeListItemTemplate.lit.js";
-
-// Styles
-import treeListItemCss from "./generated/themes/TreeListItem.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-li-tree",
-	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.TreeListItem.prototype */ {
-
-		/**
-		 * Defines the indentation of the tree list item. Use level 1 for tree list items, representing top-level tree nodes.
-		 *
-		 * @type {Integer}
-		 * @public
-		 * @defaultValue 1
-		 */
-		level: {
-			type: Integer,
-			defaultValue: 1,
-		},
-
-		/**
-		 * If set, an icon will be displayed before the text of the tree list item.
-		 *
-		 * @public
-		 * @type {string}
-		 * @defaultValue ""
-		 */
-		icon: {
-			type: String,
-		},
-
-		/**
-		 * Defines whether the tree list item should display an expand/collapse button.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		showToggleButton: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the tree list item will show a collapse or expand icon inside its toggle button.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		expanded: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 * @since 1.1.0
-		 */
-		indeterminate: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the <code>additionalText</code>, displayed in the end of the tree item.
-		 * @type {string}
-		 * @public
-		 * @since 1.0.0-rc.15
-		 */
-		additionalText: {
-			type: String,
-		},
-
-		/**
-		 * Defines the state of the <code>additionalText</code>.
-		 * <br>
-		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
-		 * @type {ValueState}
-		 * @defaultvalue "None"
-		 * @public
-		 * @since 1.0.0-rc.15
-		 */
-		additionalTextState: {
-			type: ValueState,
-			defaultValue: ValueState.None,
-		},
-
-		/**
-		 * Defines whether the toggle button is shown at the end, rather than at the beginning of the item
-		 *
-		 * @protected
-		 * @since 1.0.0-rc.8
-		 */
-		_toggleButtonEnd: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the item shows minimal details - only icon (no text or toggle button)
-		 *
-		 * @protected
-		 * @since 1.0.0-rc.8
-		 */
-		_minimal: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 * @since 1.0.0-rc.11
-		 */
-		_setsize: {
-			type: Integer,
-			defaultValue: 1,
-			noAttribute: true,
-		},
-
-		/**
-		 * @private
-		 * @since 1.0.0-rc.11
-		 */
-		_posinset: {
-			type: Integer,
-			defaultValue: 1,
-			noAttribute: true,
-		},
-
-	},
-	slots: /** @lends sap.ui.webcomponents.main.TreeListItem.prototype */ {
-		/**
-		 * Defines the text of the component.
-		 * <br><br>
-		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
-		 *
-		 * @type {Node[]}
-		 * @slot
-		 * @public
-		 */
-		"default": {
-			type: Node,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.TreeListItem.prototype */ {
-
-		/**
-		 * Fired when the user interacts with the expand/collapse button of the tree list item.
-		 * @event
-		 * @param {HTMLElement} item the toggled item.
-		 * @public
-		 */
-		toggle: {
-			detail: {
-				item: { type: HTMLElement },
-			},
-		},
-
-		/**
-		 * Fired when the user drills down into the tree hierarchy by pressing the right arrow on the tree node.
-		 *
-		 * @event sap.ui.webcomponents.main.TreeListItem#step-in
-		 * @param {HTMLElement} item the item on which right arrow was pressed.
-		 * @public
-		 */
-		"step-in": {
-			detail: {
-				item: { type: HTMLElement },
-			},
-		},
-
-		/**
-		 * Fired when the user goes up the tree hierarchy by pressing the left arrow on the tree node.
-		 *
-		 * @event sap.ui.webcomponents.main.TreeListItem#step-out
-		 * @param {HTMLElement} item the item on which left arrow was pressed.
-		 * @public
-		 */
-		"step-out": {
-			detail: {
-				item: { type: HTMLElement },
-			},
-		},
-	},
-};
-
-/**
- * @class
- * The <code>ui5-li-tree</code> represents a node in a tree structure, shown as a <code>ui5-list</code>.
- * <br>
- * <i>Note:</i> Do not use <code>ui5-li-tree</code> directly in your apps. Use <code>ui5-tree-item</code> instead, as it can be nested inside a <code>ui5-tree</code>.
- * On the other hand, <code>ui5-li-tree</code> can only be slotted inside a <code>ui5-list</code>, being a list item. It may be useful if you want to build a custom tree component, for example.
- *
- * <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-li-tree</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>title - Used to style the title of the tree list item</li>
- * <li>additionalText - Used to style the additionalText of the tree list item</li>
- * <li>icon - Used to style the icon of the tree list item</li>
- * </ul>
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.TreeListItem
- * @extends ListItem
- * @tagname ui5-li-tree
- * @public
- * @since 1.0.0-rc.8
- */
-class TreeListItem extends ListItem {
-	static get template() {
-		return TreeListItemTemplate;
-	}
-
-	static get styles() {
-		return [ListItem.styles, treeListItemCss];
-	}
-
-	static get metadata() {
-		return metadata;
-	}
-
-	static get dependencies() {
-		return [
-			...ListItem.dependencies,
-			Icon,
-		];
-	}
-
-	onBeforeRendering() {
-		this.actionable = false;
-	}
-
-	get classes() {
-		const allClasses = super.classes;
-		allClasses.main["ui5-li-root-tree"] = true;
-		return allClasses;
-	}
-
-	get styles() {
-		return {
-			preContent: {
-				"padding-left": isIE() ? `${this.effectiveLevel}rem` : `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
-			},
-		};
-	}
-
-	get effectiveLevel() {
-		return this.level - 1;
-	}
-
-	get hasParent() {
-		return this.level > 1;
-	}
-
-	get _toggleIconName() {
-		return this.expanded ? "navigation-down-arrow" : "navigation-right-arrow";
-	}
-
-	get _showToggleButtonBeginning() {
-		return this.showToggleButton && !this._minimal && !this._toggleButtonEnd;
-	}
-
-	get _showToggleButtonEnd() {
-		return this.showToggleButton && !this._minimal && this._toggleButtonEnd;
-	}
-
-	get _showTitle() {
-		return this.textContent.length && !this._minimal;
-	}
-
-	get _accInfo() {
-		return {
-			role: "treeitem",
-			ariaExpanded: this.showToggleButton ? this.expanded : undefined,
-			ariaLevel: this.level,
-			posinset: this._posinset,
-			setsize: this._setsize,
-			ariaSelectedText: this.ariaSelectedText,
-			listItemAriaLabel: TreeListItem.i18nBundle.getText(TREE_ITEM_ARIA_LABEL),
-		};
-	}
-
-	_toggleClick(event) {
-		event.stopPropagation();
-		this.fireEvent("toggle", { item: this });
-	}
-
-	_onkeydown(event) {
-		super._onkeydown(event);
-
-		if (this.showToggleButton && isRight(event)) {
-			if (!this.expanded) {
-				this.fireEvent("toggle", { item: this });
-			} else {
-				this.fireEvent("step-in", { item: this });
-			}
-		}
-
-		if (isLeft(event)) {
-			if (this.expanded) {
-				this.fireEvent("toggle", { item: this });
-			} else if (this.hasParent) {
-				this.fireEvent("step-out", { item: this });
-			}
-		}
-	}
-
-	get iconAccessibleName() {
-		return this.expanded ? TreeListItem.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : TreeListItem.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
-	}
-
-	static async onDefine() {
-		[TreeListItem.i18nBundle] = await Promise.all([
-			getI18nBundle("@ui5/webcomponents"),
-			super.onDefine(),
-		]);
-	}
-}
-
-TreeListItem.define();
-
-export default TreeListItem;

package/src/YearPicker.js

@@ -1,324 +0,0 @@
-import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
-import {
-	isEnter,
-	isSpace,
-	isDown,
-	isUp,
-	isLeft,
-	isRight,
-	isHome,
-	isEnd,
-	isHomeCtrl,
-	isEndCtrl,
-	isPageUp,
-	isPageDown,
-} from "@ui5/webcomponents-base/dist/Keys.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
-import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
-import { getMaxCalendarDate } from "@ui5/webcomponents-localization/dist/dates/ExtremeDates.js";
-import CalendarPart from "./CalendarPart.js";
-import YearPickerTemplate from "./generated/templates/YearPickerTemplate.lit.js";
-import styles from "./generated/themes/YearPicker.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-yearpicker",
-	properties: /** @lends  sap.ui.webcomponents.main.YearPicker.prototype */ {
-		/**
-		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
-		 * @type {Array}
-		 * @public
-		 */
-		selectedDates: {
-			type: Integer,
-			multiple: true,
-			compareValues: true,
-		},
-
-		_years: {
-			type: Object,
-			multiple: true,
-		},
-
-		_hidden: {
-			type: Boolean,
-			noAttribute: true,
-		},
-	},
-	events: /** @lends  sap.ui.webcomponents.main.YearPicker.prototype */ {
-		/**
-		 * Fired when the user selects a year (space/enter/click).
-		 * @public
-		 * @event
-		 */
-		change: {},
-		/**
-		 * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse.
-		 * @since 1.0.0-rc.9
-		 * @public
-		 * @event
-		 */
-		navigate: {},
-	},
-};
-
-const PAGE_SIZE = 20; // Total years on a single page
-const ROW_SIZE = 4; // Years per row (5 rows of 4 years each)
-
-/**
- * @class
- *
- * Displays years which can be selected.
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.YearPicker
- * @extends CalendarPart
- * @tagname ui5-yearpicker
- * @public
- */
-class YearPicker extends CalendarPart {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get styles() {
-		return styles;
-	}
-
-	static get template() {
-		return YearPickerTemplate;
-	}
-
-	onBeforeRendering() {
-		this._buildYears();
-	}
-
-	_buildYears() {
-		if (this._hidden) {
-			return;
-		}
-
-		const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType }, getLocale());
-
-		this._calculateFirstYear();
-		this._lastYear = this._firstYear + PAGE_SIZE - 1;
-
-		const calendarDate = this._calendarDate; // store the value of the expensive getter
-		const minDate = this._minDate; // store the value of the expensive getter
-		const maxDate = this._maxDate; // store the value of the expensive getter
-		const tempDate = new CalendarDate(calendarDate, this._primaryCalendarType);
-		tempDate.setYear(this._firstYear);
-
-		const intervals = [];
-		let timestamp;
-
-		/* eslint-disable no-loop-func */
-		for (let i = 0; i < PAGE_SIZE; i++) {
-			timestamp = tempDate.valueOf() / 1000;
-
-			const isSelected = this.selectedDates.some(itemTimestamp => {
-				const date = CalendarDate.fromTimestamp(itemTimestamp * 1000, this._primaryCalendarType);
-				return date.getYear() === tempDate.getYear();
-			});
-			const isFocused = tempDate.getYear() === calendarDate.getYear();
-			const isDisabled = tempDate.getYear() < minDate.getYear() || tempDate.getYear() > maxDate.getYear();
-
-			const year = {
-				timestamp: timestamp.toString(),
-				_tabIndex: isFocused ? "0" : "-1",
-				focusRef: isFocused,
-				selected: isSelected,
-				ariaSelected: isSelected ? "true" : "false",
-				year: oYearFormat.format(tempDate.toLocalJSDate()),
-				disabled: isDisabled,
-				classes: "ui5-yp-item",
-			};
-
-			if (isSelected) {
-				year.classes += " ui5-yp-item--selected";
-			}
-
-			if (isDisabled) {
-				year.classes += " ui5-yp-item--disabled";
-			}
-
-			const intervalIndex = parseInt(i / ROW_SIZE);
-
-			if (intervals[intervalIndex]) {
-				intervals[intervalIndex].push(year);
-			} else {
-				intervals[intervalIndex] = [year];
-			}
-
-			tempDate.setYear(tempDate.getYear() + 1);
-		}
-
-		this._years = intervals;
-	}
-
-	_calculateFirstYear() {
-		const absoluteMaxYear = getMaxCalendarDate(this._primaryCalendarType).getYear(); // 9999
-		const currentYear = this._calendarDate.getYear();
-
-		// 1. If first load - center the current year (set first year to be current year minus half page size)
-		if (!this._firstYear) {
-			this._firstYear = currentYear - PAGE_SIZE / 2;
-		}
-
-		// 2. If out of range - change by a page (20) - do not center in order to keep the same position as the last page
-		if (currentYear < this._firstYear) {
-			this._firstYear -= PAGE_SIZE;
-		} else if (currentYear >= this._firstYear + PAGE_SIZE) {
-			this._firstYear += PAGE_SIZE;
-		}
-
-		// 3. If the date was changed by more than 20 years - reset _firstYear completely
-		if (Math.abs(this._firstYear - currentYear) >= PAGE_SIZE) {
-			this._firstYear = currentYear - PAGE_SIZE / 2;
-		}
-
-		// Keep it in the range between the min and max year
-		this._firstYear = Math.max(this._firstYear, this._minDate.getYear());
-		this._firstYear = Math.min(this._firstYear, this._maxDate.getYear());
-
-		// If first year is > 9980, make it 9980 to not show any years beyond 9999
-		if (this._firstYear > absoluteMaxYear - PAGE_SIZE + 1) {
-			this._firstYear = absoluteMaxYear - PAGE_SIZE + 1;
-		}
-	}
-
-	onAfterRendering() {
-		if (!this._hidden) {
-			this.focus();
-		}
-	}
-
-	_onkeydown(event) {
-		let preventDefault = true;
-
-		if (isEnter(event)) {
-			this._selectYear(event);
-		} else if (isSpace(event)) {
-			event.preventDefault();
-		} else if (isLeft(event)) {
-			this._modifyTimestampBy(-1);
-		} else if (isRight(event)) {
-			this._modifyTimestampBy(1);
-		} else if (isUp(event)) {
-			this._modifyTimestampBy(-ROW_SIZE);
-		} else if (isDown(event)) {
-			this._modifyTimestampBy(ROW_SIZE);
-		} else if (isPageUp(event)) {
-			this._modifyTimestampBy(-PAGE_SIZE);
-		} else if (isPageDown(event)) {
-			this._modifyTimestampBy(PAGE_SIZE);
-		} else if (isHome(event) || isEnd(event)) {
-			this._onHomeOrEnd(isHome(event));
-		} else if (isHomeCtrl(event)) {
-			this._setTimestamp(parseInt(this._years[0][0].timestamp)); // first year of first row
-		} else if (isEndCtrl(event)) {
-			this._setTimestamp(parseInt(this._years[PAGE_SIZE / ROW_SIZE - 1][ROW_SIZE - 1].timestamp)); // last year of last row
-		} else {
-			preventDefault = false;
-		}
-
-		if (preventDefault) {
-			event.preventDefault();
-		}
-	}
-
-	_onHomeOrEnd(homePressed) {
-		this._years.forEach(row => {
-			const indexInRow = row.findIndex(item => CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000).getYear() === this._calendarDate.getYear());
-			if (indexInRow !== -1) { // The current year is on this row
-				const index = homePressed ? 0 : ROW_SIZE - 1; // select the first (if Home) or last (if End) year on the row
-				this._setTimestamp(parseInt(row[index].timestamp));
-			}
-		});
-	}
-
-	/**
-	 * Sets the timestamp to an absolute value
-	 * @param value
-	 * @private
-	 */
-	_setTimestamp(value) {
-		this._safelySetTimestamp(value);
-		this.fireEvent("navigate", { timestamp: this.timestamp });
-	}
-
-	/**
-	 * Modifies timestamp by a given amount of years and, if necessary, loads the prev/next page
-	 * @param amount
-	 * @private
-	 */
-	_modifyTimestampBy(amount) {
-		// Modify the current timestamp
-		this._safelyModifyTimestampBy(amount, "year");
-
-		// Notify the calendar to update its timestamp
-		this.fireEvent("navigate", { timestamp: this.timestamp });
-	}
-
-	_onkeyup(event) {
-		if (isSpace(event)) {
-			this._selectYear(event);
-		}
-	}
-
-	/**
-	 * User clicked with the mouser or pressed Enter/Space
-	 * @param event
-	 * @private
-	 */
-	_selectYear(event) {
-		event.preventDefault();
-		if (event.target.className.indexOf("ui5-yp-item") > -1) {
-			const timestamp = this._getTimestampFromDom(event.target);
-			this._safelySetTimestamp(timestamp);
-			this.fireEvent("change", { timestamp: this.timestamp });
-		}
-	}
-
-	/**
-	 * Called from Calendar.js
-	 * @protected
-	 */
-	_hasPreviousPage() {
-		return this._firstYear > this._minDate.getYear();
-	}
-
-	/**
-	 * Called from Calendar.js
-	 * @protected
-	 */
-	_hasNextPage() {
-		return this._firstYear + PAGE_SIZE - 1 < this._maxDate.getYear();
-	}
-
-	/**
-	 * Called by Calendar.js
-	 * User pressed the "<" button in the calendar header (same as PageUp)
-	 * @protected
-	 */
-	_showPreviousPage() {
-		this._modifyTimestampBy(-PAGE_SIZE);
-	}
-
-	/**
-	 * Called by Calendar.js
-	 * User pressed the ">" button in the calendar header (same as PageDown)
-	 * @protected
-	 */
-	_showNextPage() {
-		this._modifyTimestampBy(PAGE_SIZE);
-	}
-}
-
-YearPicker.define();
-
-export default YearPicker;