@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/dist/MultiComboBox.js

@@ -94,11 +94,11 @@ const metadata = {
 	tag: "ui5-multi-combobox",
 	languageAware: true,
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
+	slots: /** @lends sap.ui.webc.main.MultiComboBox.prototype */ {
 		/**
 		 * Defines the component items.
 		 *
-		 * @type {sap.ui.webcomponents.main.IMultiComboBoxItem[]}
+		 * @type {sap.ui.webc.main.IMultiComboBoxItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -111,7 +111,7 @@ const metadata = {
 		/**
 		* Defines the icon to be displayed in the component.
 		*
-		* @type {sap.ui.webcomponents.main.IIcon}
+		* @type {sap.ui.webc.main.IIcon}
 		* @slot
 		* @public
 		* @since 1.0.0-rc.9
@@ -137,7 +137,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
+	properties: /** @lends sap.ui.webc.main.MultiComboBox.prototype */ {
 		/**
 		 * Defines the value of the component.
 		 * <br><br>
@@ -145,6 +145,8 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -212,7 +214,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -335,7 +337,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
+	events: /** @lends sap.ui.webc.main.MultiComboBox.prototype */ {
 		/**
 		 * Fired when the input operation has finished by pressing Enter or on focusout.
 		 *
@@ -355,7 +357,7 @@ const metadata = {
 		/**
 		 * Fired when the dropdown is opened or closed.
 		 *
-		 * @event sap.ui.webcomponents.main.MultiComboBox#open-change
+		 * @event sap.ui.webc.main.MultiComboBox#open-change
 		 * @since 1.0.0-rc.5
 		 * @public
 		 */
@@ -365,7 +367,7 @@ const metadata = {
 		 * Fired when selection is changed by user interaction
 		 * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
 		 *
-		 * @event sap.ui.webcomponents.main.MultiComboBox#selection-change
+		 * @event sap.ui.webc.main.MultiComboBox#selection-change
 		 * @param {Array} items an array of the selected items.
 		 * @public
 		 */
@@ -428,8 +430,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.MultiComboBox
- * @extends UI5Element
+ * @alias sap.ui.webc.main.MultiComboBox
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-multi-combobox
  * @public
  * @appenddocs MultiComboBoxItem MultiComboBoxGroupItem
@@ -1082,7 +1084,7 @@ class MultiComboBox extends UI5Element {
 			if (isCut) {
 				const cutResult = this._tokenizer._fillClipboard("cut", selectedTokens);
 				selectedTokens.forEach(token => {
-					this._tokenizer._tokenDelete(event, token);
+					this._tokenizer._tokenKeyboardDelete(event, token);
 				});
 
 				this.focus();
@@ -1326,6 +1328,8 @@ class MultiComboBox extends UI5Element {
 		this.storeResponsivePopoverWidth();
 
 		this._deleting = false;
+		// force resize of the tokenizer on invalidation
+		this._tokenizer._handleResize();
 	}
 
 	get _isPhone() {

package/dist/MultiComboBoxGroupItem.js

@@ -6,7 +6,7 @@ import GroupHeaderListItem from "./GroupHeaderListItem.js";
  */
 const metadata = {
 	tag: "ui5-mcb-group-item",
-	properties: /** @lends sap.ui.webcomponents.main.MultiComboBoxGroupItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.MultiComboBoxGroupItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *
@@ -18,9 +18,9 @@ const metadata = {
 			type: String,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.MultiComboBoxGroupItem.prototype */ {
+	slots: /** @lends sap.ui.webc.main.MultiComboBoxGroupItem.prototype */ {
 	},
-	events: /** @lends sap.ui.webcomponents.main.MultiComboBoxGroupItem.prototype */ {
+	events: /** @lends sap.ui.webc.main.MultiComboBoxGroupItem.prototype */ {
 	},
 };
 
@@ -31,11 +31,11 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.MultiComboBoxGroupItem
- * @extends UI5Element
+ * @alias sap.ui.webc.main.MultiComboBoxGroupItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-mcb-group-item
  * @public
- * @implements sap.ui.webcomponents.main.IMultiComboBoxItem
+ * @implements sap.ui.webc.main.IMultiComboBoxItem
  * @since 1.4.0
  */
 class MultiComboBoxGroupItem extends UI5Element {

package/dist/MultiComboBoxItem.js

@@ -5,7 +5,7 @@ import ComboBoxItem from "./ComboBoxItem.js";
  */
 const metadata = {
 	tag: "ui5-mcb-item",
-	properties: /** @lends sap.ui.webcomponents.main.MultiComboBoxItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.MultiComboBoxItem.prototype */ {
 		/**
 		 * Defines the selected state of the component.
 		 * @type {boolean}
@@ -22,10 +22,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.MultiComboBoxItem
- * @extends ComboBoxItem
+ * @alias sap.ui.webc.main.MultiComboBoxItem
+ * @extends sap.ui.webc.main.ComboBoxItem
  * @tagname ui5-mcb-item
- * @implements sap.ui.webcomponents.main.IMultiComboBoxItem
+ * @implements sap.ui.webc.main.IMultiComboBoxItem
  * @public
  */
 class MultiComboBoxItem extends ComboBoxItem {

package/dist/MultiInput.js

@@ -15,13 +15,14 @@ import styles from "./generated/themes/MultiInput.css.js";
 import Token from "./Token.js";
 import Tokenizer from "./Tokenizer.js";
 import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/value-help.js";
 
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-multi-input",
-	properties: /** @lends sap.ui.webcomponents.main.MultiInput.prototype */ {
+	properties: /** @lends sap.ui.webc.main.MultiInput.prototype */ {
 		/**
 		 * Determines whether a value help icon will be visualized in the end of the input.
 		 * Pressing the icon will fire <code>value-help-trigger</code> event.
@@ -42,11 +43,11 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.MultiInput.prototype */ {
+	slots: /** @lends sap.ui.webc.main.MultiInput.prototype */ {
 		/**
 		 * Defines the component tokens.
 		 *
-		 * @type {sap.ui.webcomponents.main.IToken[]}
+		 * @type {sap.ui.webc.main.IToken[]}
 		 * @slot
 		 * @public
 		 */
@@ -54,12 +55,12 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.MultiInput.prototype */ {
+	events: /** @lends sap.ui.webc.main.MultiInput.prototype */ {
 		/**
 		 * Fired when the value help icon is pressed
 		 * and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.
 		 *
-		 * @event sap.ui.webcomponents.main.MultiInput#value-help-trigger
+		 * @event sap.ui.webc.main.MultiInput#value-help-trigger
 		 * @public
 		 */
 		"value-help-trigger": {},
@@ -67,7 +68,7 @@ const metadata = {
 		/**
 		 * Fired when a token is about to be deleted.
 		 *
-		 * @event sap.ui.webcomponents.main.MultiInput#token-delete
+		 * @event sap.ui.webc.main.MultiInput#token-delete
 		 * @param {HTMLElement} token deleted token.
 		 * @public
 		 */
@@ -97,8 +98,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.MultiInput
- * @extends Input
+ * @alias sap.ui.webc.main.MultiInput
+ * @extends sap.ui.webc.main.Input
  * @tagname ui5-multi-input
  * @appenddocs Token
  * @since 1.0.0-rc.9
@@ -141,6 +142,20 @@ class MultiInput extends Input {
 	tokenDelete(event) {
 		const focusedToken = event.detail.ref;
 		const selectedTokens = this.tokens.filter(token => token.selected);
+		const shouldFocusInput = this.tokens.length - 1 === 0 || this.tokens.length === selectedTokens.length;
+
+		if (this._readonly) {
+			return;
+		}
+
+		if (focusedToken) {
+			this.fireEvent("token-delete", { token: focusedToken });
+			if (shouldFocusInput) {
+				this.focus();
+			}
+
+			return;
+		}
 
 		if (selectedTokens.indexOf(focusedToken) === -1) {
 			selectedTokens.push(focusedToken);
@@ -149,8 +164,6 @@ class MultiInput extends Input {
 		selectedTokens.forEach(token => {
 			this.fireEvent("token-delete", { token });
 		});
-
-		this.focus();
 	}
 
 	valueHelpMouseDown(event) {
@@ -175,6 +188,7 @@ class MultiInput extends Input {
 
 	innerFocusIn() {
 		this.expandedTokenizer = true;
+		this.focused = true;
 		this.tokenizer.scrollToEnd();
 	}
 
@@ -273,6 +287,9 @@ class MultiInput extends Input {
 
 		if (!insideDOM && !insideShadowDom) {
 			this.expandedTokenizer = false;
+
+			// we need to reset tabindex setting by tokenizer
+			this.tokenizer._itemNav._currentIndex = -1;
 		}
 	}
 

package/dist/Option.js

@@ -6,7 +6,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 const metadata = {
 	tag: "ui5-option",
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.Option.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Option.prototype */ {
 
 		/**
 		 * Defines the selected state of the component.
@@ -47,7 +47,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b>
 		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @public
@@ -89,7 +89,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.Option.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Option.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 * <br><br>
@@ -103,7 +103,7 @@ const metadata = {
 			type: Node,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Option.prototype */ {},
+	events: /** @lends sap.ui.webc.main.Option.prototype */ {},
 };
 
 /**
@@ -115,10 +115,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Option
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Option
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-option
- * @implements sap.ui.webcomponents.main.ISelectOption
+ * @implements sap.ui.webc.main.ISelectOption
  * @public
  */
 class Option extends UI5Element {

package/dist/Panel.d.ts

@@ -0,0 +1,238 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import TitleLevel from "./types/TitleLevel.js";
+import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-panel</code> component is a container which has a header and a
+ * content area and is used
+ * for grouping and displaying information. It can be collapsed to save space on the screen.
+ *
+ * <h3>Guidelines:</h3>
+ * <ul>
+ * <li>Nesting two or more panels is not recommended.</li>
+ * <li>Do not stack too many panels on one page.</li>
+ * </ul>
+ *
+ * <h3>Structure</h3>
+ * The panel's header area consists of a title bar with a header text or custom header.
+ * <br>
+ * The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.
+ * <br>
+ * The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.
+ * <br>
+ * The content area can contain an arbitrary set of controls.
+ * <br><b>Note:</b> The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.
+ *
+ * <h3>Responsive Behavior</h3>
+ * <ul>
+ * <li>If the width of the panel is set to 100% (default), the panel and its children are
+ * resized responsively,
+ * depending on its parent container.</li>
+ * <li>If the panel has a fixed height, it will take up the space even if the panel is
+ * collapsed.</li>
+ * <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>),
+ * an arrow icon (pointing to the right) appears in front of the header.</li>
+ * <li>When the animation is activated, expand/collapse uses a smooth animation to open or
+ * close the content area.</li>
+ * <li>When the panel expands/collapses, the arrow icon rotates 90 degrees
+ * clockwise/counter-clockwise.</li>
+ * </ul>
+ *
+ * <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-panel</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>header - Used to style the wrapper of the header</li>
+ * <li>content - Used to style the wrapper of the content</li>
+ * </ul>
+ *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Panel";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Panel
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-panel
+ * @public
+ */
+declare class Panel extends UI5Element {
+    /**
+     * This property is used to set the header text of the component.
+     * The text is visible in both expanded and collapsed states.
+     * <br><br>
+     * <b>Note:</b> This property is overridden by the <code>header</code> slot.
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.Panel.prototype.headerText
+     * @defaultvalue ""
+     * @public
+     */
+    headerText: string;
+    /**
+     * Determines whether the component is in a fixed state that is not
+     * expandable/collapsible by user interaction.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.main.Panel.prototype.fixed
+     * @defaultvalue false
+     * @public
+     */
+    fixed: boolean;
+    /**
+     * Indicates whether the component is collapsed and only the header is displayed.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.main.Panel.prototype.collapsed
+     * @defaultvalue false
+     * @public
+     */
+    collapsed: boolean;
+    /**
+     * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.main.Panel.prototype.noAnimation
+     * @defaultvalue false
+     * @public
+     * @since 1.0.0-rc.16
+     */
+    noAnimation: boolean;
+    /**
+     * Sets the accessible ARIA role of the component.
+     * Depending on the usage, you can change the role from the default <code>Form</code>
+     * to <code>Region</code> or <code>Complementary</code>.
+     *
+     * @type {sap.ui.webc.main.types.PanelAccessibleRole}
+     * @name sap.ui.webc.main.Panel.prototype.accessibleRole
+     * @defaultvalue "Form"
+     * @public
+     */
+    accessibleRole: PanelAccessibleRole;
+    /**
+     * Defines the "aria-level" of component heading,
+     * set by the <code>headerText</code>.
+     * <br><br>
+     * Available options are: <code>"H6"</code> to <code>"H1"</code>.
+     * @type {sap.ui.webc.main.types.TitleLevel}
+     * @name sap.ui.webc.main.Panel.prototype.headerLevel
+     * @defaultvalue "H2"
+     * @public
+    */
+    headerLevel: TitleLevel;
+    /**
+     * Defines the accessible ARIA name of the component.
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.Panel.prototype.accessibleName
+     * @defaultvalue ""
+     * @public
+     * @since 1.0.0-rc.15
+     */
+    accessibleName: string;
+    /**
+     * When set to <code>true</code>, the <code>accessibleName</code> property will be
+     * applied not only on the panel root itself, but on its toggle button too.
+     * <b>Note:</b> This property only has effect if <code>accessibleName</code> is set and a header slot is provided.
+     * @type {boolean}
+     * @defaultvalue false
+     * @private
+      */
+    useAccessibleNameForToggleButton: boolean;
+    /**
+     * @private
+     */
+    _hasHeader: boolean;
+    _contentExpanded: boolean;
+    _animationRunning: boolean;
+    /**
+     * Defines the component header area.
+     * <br><br>
+     * <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.
+     *
+     * @type {HTMLElement[]}
+     * @name sap.ui.webc.main.Panel.prototype.header
+     * @slot
+     * @public
+     */
+    header: Array<HTMLElement>;
+    /**
+     * Defines the content of the component.
+     * The content is visible only when the component is expanded.
+     *
+     * @type {Node[]}
+     * @name sap.ui.webc.main.Panel.prototype.default
+     * @slot
+     * @public
+     */
+    static i18nBundle: I18nBundle;
+    static get render(): (templateResult: object, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | string[] | undefined, forStaticArea: boolean, options: import("lit-html").RenderOptions) => void;
+    static get template(): import("@ui5/webcomponents-base/src/renderer/executeTemplate.js").TemplateFunction;
+    static get styles(): import("@ui5/webcomponents-base/src/types.js").StyleData;
+    onBeforeRendering(): void;
+    shouldToggle(element: HTMLElement): boolean;
+    shouldNotAnimate(): boolean;
+    _headerClick(e: MouseEvent): void;
+    _toggleButtonClick(e: MouseEvent): void;
+    _headerKeyDown(e: KeyboardEvent): void;
+    _headerKeyUp(e: KeyboardEvent): void;
+    _toggleOpen(): void;
+    _headerOnTarget(target: HTMLElement): boolean;
+    get classes(): {
+        headerBtn: {
+            "ui5-panel-header-button-animated": boolean;
+        };
+    };
+    get toggleButtonTitle(): string;
+    get expanded(): boolean;
+    get accRole(): string;
+    get effectiveAccessibleName(): string | undefined;
+    get accInfo(): {
+        button: {
+            accessibilityAttributes: {
+                expanded: boolean;
+            };
+            title: string;
+            ariaLabelButton: string | undefined;
+        };
+        ariaExpanded: boolean | undefined;
+        ariaControls: string | undefined;
+        ariaLabelledby: string | undefined;
+        role: string | undefined;
+    };
+    get ariaLabelledbyReference(): string | undefined;
+    get fixedPanelAriaLabelledbyReference(): string | undefined;
+    get headerAriaLevel(): string;
+    get headerTabIndex(): "0" | "-1";
+    get headingWrapperAriaLevel(): string | undefined;
+    get headingWrapperRole(): "heading" | undefined;
+    get nonFixedInternalHeader(): boolean;
+    get hasHeaderOrHeaderText(): string | true;
+    get nonFocusableButton(): boolean;
+    get styles(): {
+        content: {
+            display: string;
+        };
+    };
+    static get dependencies(): (typeof Icon | typeof Button)[];
+    static onDefine(): Promise<void>;
+}
+export default Panel;