@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/dist/TreeItemBase.js

@@ -0,0 +1,431 @@
+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 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 TreeItemBaseTemplate from "./generated/templates/TreeItemBaseTemplate.lit.js";
+
+// Styles
+import treeItemCss from "./generated/themes/TreeItem.css.js";
+
+import HasPopup from "./types/HasPopup.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	languageAware: true,
+	managedSlots: true,
+	properties: /** @lends sap.ui.webc.main.TreeItemBase.prototype */ {
+
+		/**
+		 * Defines the indentation of the tree list item. Use level 1 for tree list items, representing top-level tree nodes.
+		 *
+		 * @type {sap.ui.webc.base.types.Integer}
+		 * @protected
+		 * @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
+		 * @protected
+		 */
+		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,
+		},
+
+		/**
+		* Defines whether the selection of a tree node is displayed as partially selected.
+		* <br><br>
+		* <b>Note:</b> The indeterminate state can be set only programmatically and can’t be achieved by user
+		* interaction, meaning that the resulting visual state depends on the values of the <code>indeterminate</code>
+		* and <code>selected</code> properties:
+		* <ul>
+		* <li> If a tree node has both <code>selected</code> and <code>indeterminate</code> set to <code>true</code>, it is displayed as partially selected.
+		* <li> If a tree node has <code>selected</code> set to <code>true</code> and <code>indeterminate</code> set to <code>false</code>, it is displayed as selected.
+		* <li> If a tree node has <code>selected</code> set to <code>false</code>, it is displayed as not selected regardless of the value of the <code>indeterminate</code> property.
+		* </ul>
+		* <br>
+		* <b>Note:</b> This property takes effect only when the <code>ui5-tree</code> is in <code>MultiSelect</code> mode.
+		* @type {boolean}
+		* @defaultvalue false
+		* @public
+		* @since 1.1.0
+		*/
+		indeterminate: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.
+		 * <br>
+		 * <i>Note:</i> This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.
+		 * Set this to <code>true</code> for nodes you intend to load lazily, when the user clicks the expand button.
+		 * It is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		hasChildren: {
+			type: Boolean,
+		},
+
+		/**
+		 * 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>"Error"</code>.
+		 * @type {sap.ui.webc.base.types.ValueState}
+		 * @defaultvalue "None"
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		additionalTextState: {
+			type: ValueState,
+			defaultValue: ValueState.None,
+		},
+
+		/**
+		 * Defines the accessible name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.8.0
+		 */
+		accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * 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,
+		},
+
+		/**
+		 * Defines the description for the accessible role of the component.
+		 * @protected
+		 * @type {string}
+		 * @defaultvalue undefined
+		 * @since 1.10.0
+		 */
+		 accessibleRoleDescription: {
+			type: String,
+			defaultValue: undefined,
+			noAttribute: true,
+		},
+
+		/**
+		 * Defines if the item should be collapsible or not.
+		 * It is true, for example, for the items inside the Popover of the Side Navigation
+		 * @private
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.10.0
+		 */
+		_fixed: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the availability and type of interactive popup element that can be triggered by the component on which the property is set.
+		 * @type {sap.ui.webc.main.types.HasPopup}
+		 * @since 1.10.0
+		 * @private
+		 */
+		ariaHaspopup: {
+			type: HasPopup,
+			noAttribute: true,
+		},
+	},
+	slots: /** @lends sap.ui.webc.main.TreeItemBase.prototype */ {
+		/**
+		 * Defines the items of the component.
+		 * <br />
+		 * <br />
+		 * <b>Note:</b> Use <code>ui5-tree-item</code> or <code>ui5-tree-item-custom</code>
+		 *
+		 * @type {sap.ui.webc.main.ITreeItem[]}
+		 * @slot items
+		 * @public
+		 */
+		"default": {
+			type: HTMLElement,
+			propertyName: "items",
+		},
+	},
+	events: /** @lends sap.ui.webc.main.TreeItemBase.prototype */ {
+
+		/**
+		 * Fired when the user interacts with the expand/collapse button of the tree list item.
+		 * @event
+		 * @param {HTMLElement} item the toggled item.
+		 * @protected
+		 */
+		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.webc.main.TreeItemBase#step-in
+		 * @param {HTMLElement} item the item on which right arrow was pressed.
+		 * @protected
+		 */
+		"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.webc.main.TreeItemBase#step-out
+		 * @param {HTMLElement} item the item on which left arrow was pressed.
+		 * @protected
+		 */
+		"step-out": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+	},
+};
+
+/**
+ * A class to serve as a foundation
+ * for the <code>TreeItem</code> and <code>TreeItemCustom</code> classes.
+ *
+ * @abstract
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.TreeItemBase
+ * @extends sap.ui.webc.main.ListItem
+ * @public
+ */
+class TreeItemBase extends ListItem {
+	static get template() {
+		return TreeItemBaseTemplate;
+	}
+
+	static get styles() {
+		return [...super.styles, treeItemCss];
+	}
+
+	static get metadata() {
+		return metadata;
+	}
+
+	static get dependencies() {
+		return [
+			...super.dependencies,
+			Icon,
+		];
+	}
+
+	onBeforeRendering() {
+		this.actionable = false;
+		this.showToggleButton = this.requiresToggleButton;
+	}
+
+	get classes() {
+		const allClasses = super.classes;
+		allClasses.main["ui5-li-root-tree"] = true;
+		return allClasses;
+	}
+
+	get styles() {
+		return {
+			preContent: {
+				"padding-left": `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
+			},
+		};
+	}
+
+	get requiresToggleButton() {
+		return !this._fixed ? (this.hasChildren || this.items.length > 0) : false;
+	}
+
+	get effectiveLevel() {
+		return this.level - 1;
+	}
+
+	get hasParent() {
+		return this.level > 1;
+	}
+
+	get hasContent() {
+		return this.content.length > 0;
+	}
+
+	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 _ariaLabel() {
+		return this.accessibleRoleDescription ? undefined : TreeItemBase.i18nBundle.getText(TREE_ITEM_ARIA_LABEL);
+	}
+
+	get _accInfo() {
+		const accInfoSettings = {
+			role: this._minimal ? "menuitemradio" : "treeitem",
+			ariaExpanded: this.showToggleButton && !this._minimal ? this.expanded : undefined,
+			ariaLevel: this._minimal ? undefined : this.level,
+			posinset: this._posinset,
+			setsize: this._setsize,
+			ariaSelectedText: this.ariaSelectedText,
+			listItemAriaLabel: !this.accessibleName ? this._ariaLabel : undefined,
+			ariaOwns: this.expanded ? `${this._id}-subtree` : undefined,
+			ariaHaspopup: this.ariaHaspopup || undefined,
+		};
+
+		if (this._minimal) {
+			accInfoSettings.ariaChecked = this.selected;
+		} else {
+			accInfoSettings.ariaSelected = this.selected;
+		}
+
+		return accInfoSettings;
+	}
+
+	/**
+	 * Used to duck-type TreeItem elements without using instanceof
+	 * @returns {boolean}
+	 * @protected
+	 */
+	get isTreeItem() {
+		return true;
+	}
+
+	/**
+	 * Call this method to manually switch the <code>expanded</code> state of a tree item.
+	 * @public
+	 */
+	toggle() {
+		this.expanded = !this.expanded;
+	}
+
+	_toggleClick(event) {
+		event.stopPropagation();
+		this.fireEvent("toggle", { item: this });
+	}
+
+	_onkeydown(event) {
+		super._onkeydown(event);
+
+		if (!this._fixed && this.showToggleButton && isRight(event)) {
+			if (!this.expanded) {
+				this.fireEvent("toggle", { item: this });
+			} else {
+				this.fireEvent("step-in", { item: this });
+			}
+		}
+
+		if (!this._fixed && 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 ? TreeItemBase.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : TreeItemBase.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
+	}
+
+	static async onDefine() {
+		[TreeItemBase.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			super.onDefine(),
+		]);
+	}
+}
+
+export default TreeItemBase;

package/dist/TreeItemCustom.js

@@ -0,0 +1,102 @@
+import TreeItemBase from "./TreeItemBase.js";
+
+// Template
+import TreeItemCustomTemplate from "./generated/templates/TreeItemCustomTemplate.lit.js";
+
+// Styles
+import treeItemCustomCss from "./generated/themes/TreeItem.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-tree-item-custom",
+	properties: /** @lends sap.ui.webc.main.TreeItemCustom.prototype */ {
+		/**
+		 * Defines whether the tree list item should display the selection element.
+		 *
+		 * @type {Boolean}
+		 * @public
+		 * @defaultValue false
+		 */
+		hideSelectionElement: {
+			type: Boolean,
+		},
+	},
+	slots: /** @lends sap.ui.webc.main.TreeItemCustom.prototype */ {
+		/**
+		 * Defines the content of the <code>ui5-tree-item</code>.
+		 *
+		 * @type {HTMLElement[]}
+		 * @slot content
+		 * @public
+		 */
+		content: {
+			type: HTMLElement,
+		},
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-tree-item-custom</code> represents a node in a tree structure, shown as a <code>ui5-list</code>.
+ * <br>
+ * This is the item to use inside a <code>ui5-tree</code>.
+ * You can represent an arbitrary tree structure by recursively nesting tree items.
+ *
+ * You can use this item to put any custom content inside the tree item.
+ *
+ * <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-tree-item-custom</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>
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents/dist/TreeItemCustom.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.TreeItemCustom
+ * @extends sap.ui.webc.main.TreeItemBase
+ * @tagname ui5-tree-item-custom
+ * @public
+ * @implements sap.ui.webc.main.ITreeItem
+ * @since 1.0.0-rc.8
+ */
+class TreeItemCustom extends TreeItemBase {
+	static get template() {
+		return TreeItemCustomTemplate;
+	}
+
+	static get styles() {
+		return [...super.styles, treeItemCustomCss];
+	}
+
+	static get metadata() {
+		return metadata;
+	}
+
+	/**
+	 * @override
+	 */
+	get placeSelectionElementBefore() {
+		return !this.hideSelectionElement && super.placeSelectionElementBefore;
+	}
+
+	/**
+	 * @override
+	 */
+	get placeSelectionElementAfter() {
+		return !this.hideSelectionElement && super.placeSelectionElementAfter;
+	}
+}
+
+TreeItemCustom.define();
+
+export default TreeItemCustom;

package/dist/TreeList.js

@@ -0,0 +1,43 @@
+import List from "./List.js";
+
+const metadata = {
+	tag: "ui5-tree-list",
+};
+
+class TreeList extends List {
+	static get metadata() {
+		return metadata;
+	}
+
+	/*
+	 * @override
+	 */
+	getItems() {
+		const slottedItems = this.getSlottedNodes("items");
+		const flatItems = [];
+
+		flattenTree(slottedItems, flatItems);
+
+		return flatItems;
+	}
+}
+
+/*
+ * Converts a tree structure into a flat array
+ *
+ * @param {Array} treeItems
+ * @param {Array} result
+ */
+const flattenTree = (items, result) => {
+	items.forEach(item => {
+		result.push(item);
+
+		if (item.expanded && item.items) {
+			flattenTree(item.items, result);
+		}
+	});
+};
+
+TreeList.define();
+
+export default TreeList;

package/dist/WheelSlider.js

@@ -22,7 +22,7 @@ import WheelSliderCss from "./generated/themes/WheelSlider.css.js";
  */
 const metadata = {
 	tag: "ui5-wheelslider",
-	properties: /** @lends sap.ui.webcomponents.main.WheelSlider.prototype */ {
+	properties: /** @lends sap.ui.webc.main.WheelSlider.prototype */ {
 		/**
 		 * Defines whether the component is disabled
 		 * (default is set to <code>false</code>).
@@ -90,10 +90,10 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.WheelSlider.prototype */ {
+	slots: /** @lends sap.ui.webc.main.WheelSlider.prototype */ {
 
 	},
-	events: /** @lends sap.ui.webcomponents.main.WheelSlider.prototype */ {
+	events: /** @lends sap.ui.webc.main.WheelSlider.prototype */ {
 		/**
 		 * Fires when the wheel slider is expanded.
 		 */
@@ -133,8 +133,8 @@ const CELL_SIZE_COZY = 46;
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.WheelSlider
- * @extends UI5Element
+ * @alias sap.ui.webc.main.WheelSlider
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-wheelslider
  * @public
  * @since 1.0.0-rc.6

package/dist/YearPicker.d.ts

@@ -0,0 +1,102 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import CalendarPart from "./CalendarPart.js";
+import type { ICalendarPicker } from "./Calendar.js";
+type Year = {
+    timestamp: string;
+    _tabIndex: string;
+    focusRef: boolean;
+    selected: boolean;
+    ariaSelected: string;
+    year: string;
+    yearInSecType: string | undefined;
+    disabled: boolean;
+    classes: string;
+};
+type YearInterval = Array<Array<Year>>;
+type SelectedYearChangeEventDetail = {
+    timestamp: number;
+};
+/**
+ * @class
+ *
+ * Displays years which can be selected.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.YearPicker
+ * @extends sap.ui.webc.main.CalendarPart
+ * @tagname ui5-yearpicker
+ * @public
+ */
+declare class YearPicker extends CalendarPart implements ICalendarPicker {
+    /**
+     * An array of UTC timestamps representing the selected date
+     * or dates depending on the capabilities of the picker component.
+     * @type {array}
+     * @name sap.ui.webc.main.YearPicker.prototype.selectedDates
+     * @public
+     */
+    selectedDates: Array<number>;
+    _years: YearInterval;
+    _hidden: boolean;
+    _firstYear?: number;
+    _lastYear?: number;
+    static i18nBundle: I18nBundle;
+    static get styles(): import("@ui5/webcomponents-base/src/types.js").StyleData;
+    static get template(): import("@ui5/webcomponents-base/src/renderer/executeTemplate.js").TemplateFunction;
+    static onDefine(): Promise<void>;
+    get roleDescription(): string;
+    onBeforeRendering(): void;
+    _getPageSize(): 8 | 20;
+    _getRowSize(): 2 | 4;
+    _buildYears(): void;
+    _calculateFirstYear(): void;
+    onAfterRendering(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onHomeOrEnd(homePressed: boolean): void;
+    /**
+     * Sets the timestamp to an absolute value.
+     * @param { number } value
+     * @private
+     */
+    _setTimestamp(value: number): void;
+    /**
+     * Modifies timestamp by a given amount of years and, if necessary, loads the prev/next page.
+     * @param { number } amount
+     * @private
+     */
+    _modifyTimestampBy(amount: number): void;
+    _onkeyup(e: KeyboardEvent): void;
+    /**
+     * User clicked with the mouser or pressed Enter/Space
+     * @param { Event } e
+     * @private
+     */
+    _selectYear(e: Event): void;
+    /**
+     * Called by the Calendar component.
+     * @protected
+     * @returns { boolean }
+     */
+    _hasPreviousPage(): boolean;
+    /**
+     * Called by the Calendar component.
+     * @protected
+     * @returns { boolean }
+     */
+    _hasNextPage(): boolean;
+    /**
+     * Called by the Calendar component.
+     * <b>Note:</b> when the user presses the "<" button in the calendar header (same as "PageUp")
+     * @protected
+     */
+    _showPreviousPage(): void;
+    /**
+     * Called by the Calendar component.
+     * <b>Note:</b> when the user presses the ">" button in the calendar header (same as "PageDown")
+     * @protected
+     */
+    _showNextPage(): void;
+}
+export default YearPicker;
+export type { SelectedYearChangeEventDetail, };