@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/NavigationMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.js","sourceRoot":"","sources":["../src/NavigationMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport {\n\tisDesktop,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { ListItemClickEventDetail } from \"./List.js\";\nimport Menu from \"./Menu.js\";\nimport type { MenuItemClickEventDetail } from \"./Menu.js\";\nimport StandardListItem from \"./StandardListItem.js\";\nimport MenuItem from \"./MenuItem.js\";\nimport NavigationMenuItem from \"./NavigationMenuItem.js\";\nimport menuTemplate from \"./generated/templates/NavigationMenuTemplate.lit.js\";\n\n// Styles\nimport navigationMenuCss from \"./generated/themes/NavigationMenu.css.js\";\nimport menuCss from \"./generated/themes/Menu.css.js\";\n\nimport {\n\tNAVIGATION_MENU_POPOVER_HIDDEN_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\ntype OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem };\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-navigation-menu` component represents a hierarchical menu structure, inherits all the functionality of `ui5-menu`.\n *\n * ### Usage\n *\n * `ui5-navigation-menu` contains `ui5-navigation-menu-item` components.\n * An arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/NavigationMenu.js\";`\n * @constructor\n * @extends Menu\n * @since 1.22.0\n * @private\n */\n@customElement({\n\ttag: \"ui5-navigation-menu\",\n\trenderer: litRender,\n\tstyles: [menuCss, navigationMenuCss],\n\ttemplate: menuTemplate,\n})\n\nclass NavigationMenu extends Menu {\n\t/**\n\t * Defines the items of this component.\n\t *\n\t * **Note:** Use `ui5-navigation-menu-item` for the intended design.\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement, invalidateOnChildChange: true })\n\tdeclare items: Array<NavigationMenuItem>;\n\n\t_isMenu(element: HTMLElement) {\n\t\treturn element.hasAttribute(\"ui5-navigation-menu\");\n\t}\n\n\t_itemMouseOver(e: MouseEvent) {\n\t\tif (isDesktop()) {\n\t\t\t// respect mouseover only on desktop\n\t\t\tconst opener = e.target as OpenerStandardListItem;\n\t\t\tlet item = opener.associatedItem;\n\n\t\t\tif (!item) {\n\t\t\t\t// for nested <a>\n\t\t\t\tconst test = opener.parentElement as any;\n\t\t\t\tif (opener.parentElement) {\n\t\t\t\t\titem = test.associatedItem;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Opens submenu with 300ms delay\n\t\t\tthis._startOpenTimeout(item, opener);\n\t\t}\n\t}\n\n\t_clonedItemsFragment(item: MenuItem) {\n\t\tconst fragment = document.createDocumentFragment();\n\n\t\tfor (let i = 0; i < item.items.length; ++i) {\n\t\t\tconst subItem = item.items[i] as any;\n\n\t\t\tconst clonedItem = item.items[i].cloneNode(true) as any;\n\t\t\tif (subItem.associatedItem) {\n\t\t\t\tclonedItem.associatedItem = subItem.associatedItem;\n\t\t\t}\n\t\t\tfragment.appendChild(clonedItem);\n\t\t}\n\n\t\treturn fragment;\n\t}\n\n\t_itemClick(e: CustomEvent<ListItemClickEventDetail>) {\n\t\tconst opener = e.detail.item as OpenerStandardListItem;\n\t\tconst item = opener.associatedItem;\n\t\tconst mainMenu = this._findMainMenu(item);\n\t\tconst prevented = !mainMenu.fireEvent<MenuItemClickEventDetail>(\"item-click\", {\n\t\t\t\"item\": item,\n\t\t\t\"text\": item.text,\n\t\t}, true, false);\n\n\t\tif (!prevented) {\n\t\t\tlet openerMenuItem = item;\n\t\t\tlet parentMenu = openerMenuItem.parentElement as Menu;\n\t\t\tdo {\n\t\t\t\topenerMenuItem._preventSubMenuClose = false;\n\t\t\t\tthis._closeItemSubMenu(openerMenuItem);\n\t\t\t\tparentMenu = openerMenuItem.parentElement as Menu;\n\t\t\t\topenerMenuItem = parentMenu._parentMenuItem as MenuItem;\n\t\t\t} while (parentMenu._parentMenuItem);\n\n\t\t\tmainMenu._popover!.open = false;\n\t\t}\n\n\t\tthis._prepareSubMenu(item, opener);\n\t}\n\n\tget accSideNavigationPopoverHiddenText() {\n\t\treturn NavigationMenu.i18nBundle.getText(NAVIGATION_MENU_POPOVER_HIDDEN_TEXT);\n\t}\n}\n\nNavigationMenu.define();\n\nexport default NavigationMenu;\n"]}

package/dist/NavigationMenuItem.d.ts

@@ -0,0 +1,55 @@
+import MenuItem from "./MenuItem.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * `ui5-navigation-menu-item` is the item to use inside a `ui5-navigation-menu`.
+ * An arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.
+ *
+ * ### Usage
+ *
+ * `ui5-navigation-menu-item` is an abstract element, representing a node in a `ui5-navigation-menu`. The navigation menu itself is rendered as a list,
+ * and each `ui5-navigation-menu-item` is represented by a list item (`ui5-li`) in that list. Therefore, you should only use
+ * `ui5-navigation-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/NavigationMenuItem.js";`
+ * @constructor
+ * @extends MenuItem
+ * @abstract
+ * @since 1.22.0
+ * @private
+ */
+declare class NavigationMenuItem extends MenuItem {
+    /**
+     * Defines the link target URI. Supports standard hyperlink behavior.
+     * If a JavaScript action should be triggered,
+     * this should not be set, but instead an event handler
+     * for the `click` event should be registered.
+     * @public
+     * @default ""
+     * @since 1.22.0
+     */
+    href: string;
+    /**
+     * Defines the component target.
+     *
+     * **Notes:**
+     *
+     * - `_self`
+     * - `_top`
+     * - `_blank`
+     * - `_parent`
+     * - `_search`
+     *
+     * **This property must only be used when the `href` property is set.**
+     * @public
+     * @default ""
+     * @since 1.22.0
+     */
+    target: string;
+    get isExternalLink(): boolean | "";
+}
+export default NavigationMenuItem;

package/dist/NavigationMenuItem.js

@@ -0,0 +1,49 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import MenuItem from "./MenuItem.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * `ui5-navigation-menu-item` is the item to use inside a `ui5-navigation-menu`.
+ * An arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.
+ *
+ * ### Usage
+ *
+ * `ui5-navigation-menu-item` is an abstract element, representing a node in a `ui5-navigation-menu`. The navigation menu itself is rendered as a list,
+ * and each `ui5-navigation-menu-item` is represented by a list item (`ui5-li`) in that list. Therefore, you should only use
+ * `ui5-navigation-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/NavigationMenuItem.js";`
+ * @constructor
+ * @extends MenuItem
+ * @abstract
+ * @since 1.22.0
+ * @private
+ */
+let NavigationMenuItem = class NavigationMenuItem extends MenuItem {
+    get isExternalLink() {
+        return this.href && this.target === "_blank";
+    }
+};
+__decorate([
+    property()
+], NavigationMenuItem.prototype, "href", void 0);
+__decorate([
+    property()
+], NavigationMenuItem.prototype, "target", void 0);
+NavigationMenuItem = __decorate([
+    customElement("ui5-navigation-menu-item")
+], NavigationMenuItem);
+NavigationMenuItem.define();
+export default NavigationMenuItem;
+//# sourceMappingURL=NavigationMenuItem.js.map

package/dist/NavigationMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenuItem.js","sourceRoot":"","sources":["../src/NavigationMenuItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,QAAQ,MAAM,eAAe,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ;IAgCxC,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;IAC9C,CAAC;CACD,CAAA;AAxBA;IADC,QAAQ,EAAE;gDACG;AAmBd;IADC,QAAQ,EAAE;kDACK;AA9BX,kBAAkB;IADvB,aAAa,CAAC,0BAA0B,CAAC;GACpC,kBAAkB,CAmCvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,eAAe,kBAAkB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport MenuItem from \"./MenuItem.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-navigation-menu-item` is the item to use inside a `ui5-navigation-menu`.\n * An arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n *\n * ### Usage\n *\n * `ui5-navigation-menu-item` is an abstract element, representing a node in a `ui5-navigation-menu`. The navigation menu itself is rendered as a list,\n * and each `ui5-navigation-menu-item` is represented by a list item (`ui5-li`) in that list. Therefore, you should only use\n * `ui5-navigation-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/NavigationMenuItem.js\";`\n * @constructor\n * @extends MenuItem\n * @abstract\n * @since 1.22.0\n * @private\n */\n@customElement(\"ui5-navigation-menu-item\")\nclass NavigationMenuItem extends MenuItem {\n\t/**\n\t * Defines the link target URI. Supports standard hyperlink behavior.\n\t * If a JavaScript action should be triggered,\n\t * this should not be set, but instead an event handler\n\t * for the `click` event should be registered.\n\t * @public\n\t * @default \"\"\n\t * @since 1.22.0\n\t */\n\t@property()\n\thref!: string;\n\n\t/**\n\t * Defines the component target.\n\t *\n\t * **Notes:**\n\t *\n\t * - `_self`\n\t * - `_top`\n\t * - `_blank`\n\t * - `_parent`\n\t * - `_search`\n\t *\n\t * **This property must only be used when the `href` property is set.**\n\t * @public\n\t * @default \"\"\n\t * @since 1.22.0\n\t */\n\t@property()\n\ttarget!: string;\n\n\tget isExternalLink() {\n\t\treturn this.href && this.target === \"_blank\";\n\t}\n}\n\nNavigationMenuItem.define();\n\nexport default NavigationMenuItem;\n"]}

package/dist/Option.d.ts

@@ -1,16 +1,20 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { IOption } from "./Interfaces.js";
+import type { IOption } from "./Select.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.
+ * The `ui5-option` component defines the content of an option in the `ui5-select`.
  *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Option.js";`
  * @constructor
  * @extends UI5Element
  * @implements {IOption}
  * @public
+ * @abstract
  */
 declare class Option extends UI5Element implements IOption {
     /**
@@ -20,35 +24,25 @@ declare class Option extends UI5Element implements IOption {
      */
     selected: boolean;
     /**
-     * Defines whether the component is in disabled state.
-     * <br><br>
-     * <b>Note:</b> A disabled component is hidden.
-     * @default false
-     * @public
-     * @since 1.0.0-rc.12
-     */
-    disabled: boolean;
-    /**
-     * Defines the tooltip of the component.
+     * Defines the text of the tooltip that would be displayed for the option component.
      * @default ""
-     * @private
-     * @since 1.1.0
+     * @public
+     * @since 2.0.0
      */
-    title: string;
+    tooltip: string;
     /**
-     * Defines the <code>icon</code> source URI.
-     * <br><br>
-     * <b>Note:</b>
+     * Defines the `icon` source URI.
+     *
+     * **Note:**
      * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-     * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
+     * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
      * @default null
      * @public
      */
     icon?: string | null;
     /**
-     * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.
-     * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.
-     *
+     * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.
+     * For more information on HTML Form support, see the `name` property of `ui5-select`.
      * @default ""
      * @public
      */
@@ -66,12 +60,11 @@ declare class Option extends UI5Element implements IOption {
      * @since 1.0.0-rc.13
      * @private
      */
-    _focused: boolean;
+    focused: boolean;
     /**
      * 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.
      *
+     * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
      * @public
      */
     text: Array<Node>;

package/dist/Option.js

@@ -11,14 +11,18 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.
+ * The `ui5-option` component defines the content of an option in the `ui5-select`.
  *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Option.js";`
  * @constructor
  * @extends UI5Element
  * @implements {IOption}
  * @public
+ * @abstract
  */
 let Option = class Option extends UI5Element {
     get stableDomRef() {
@@ -28,12 +32,9 @@ let Option = class Option extends UI5Element {
 __decorate([
     property({ type: Boolean })
 ], Option.prototype, "selected", void 0);
-__decorate([
-    property({ type: Boolean })
-], Option.prototype, "disabled", void 0);
 __decorate([
     property()
-], Option.prototype, "title", void 0);
+], Option.prototype, "tooltip", void 0);
 __decorate([
     property({ defaultValue: null })
 ], Option.prototype, "icon", void 0);
@@ -45,7 +46,7 @@ __decorate([
 ], Option.prototype, "additionalText", void 0);
 __decorate([
     property({ type: Boolean })
-], Option.prototype, "_focused", void 0);
+], Option.prototype, "focused", void 0);
 __decorate([
     slot({ type: Node, "default": true, invalidateOnChildChange: true })
 ], Option.prototype, "text", void 0);

package/dist/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sourceRoot":"","sources":["../src/Option.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E;;;;;;;;;;;GAWG;AAEH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IA+E9B,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AA3EA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAWnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AASnB;IADC,QAAQ,EAAE;qCACI;AAYf;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;oCACZ;AAUrB;IADC,QAAQ,EAAE;qCACI;AASf;IADC,QAAQ,EAAE;8CACa;AASxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAUnB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;oCAClD;AA7Ed,MAAM;IADX,aAAa,CAAC,YAAY,CAAC;GACtB,MAAM,CAkFX;AAED,MAAM,CAAC,MAAM,EAAE,CAAC;AAEhB,eAAe,MAAM,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { IOption } from \"./Interfaces.js\";\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.\n *\n * @constructor\n * @extends UI5Element\n * @implements {IOption}\n * @public\n */\n@customElement(\"ui5-option\")\nclass Option extends UI5Element implements IOption {\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t * <br><br>\n\t * <b>Note:</b> A disabled component is hidden.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.12\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t * @default \"\"\n\t * @private\n\t * @since 1.1.0\n\t */\n\t@property()\n\ttitle!: string;\n\n\t/**\n\t * Defines the <code>icon</code> source URI.\n\t * <br><br>\n\t * <b>Note:</b>\n\t * SAP-icons font provides numerous built-in icons. To find all the available icons, see the\n\t * <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>.\n\t * @default null\n\t * @public\n\t */\n\t@property({ defaultValue: null })\n\ticon?: string | null;\n\n\t/**\n\t * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.\n\t * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tvalue!: string;\n\n\t/**\n\t * Defines the additional text displayed at the end of the option element.\n\t * @default \"\"\n\t * @public\n\t * @since 1.3.0\n\t */\n\t@property()\n\tadditionalText!: string;\n\n\t/**\n\t * Defines the focused state of the component.\n\t * @default false\n\t * @since 1.0.0-rc.13\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_focused!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t * <br><br>\n\t * <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.\n\t *\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true, invalidateOnChildChange: true })\n\ttext!: Array<Node>;\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n}\n\nOption.define();\n\nexport default Option;\n"]}
+{"version":3,"file":"Option.js","sourceRoot":"","sources":["../src/Option.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E;;;;;;;;;;;;;;;GAeG;AAEH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAkE9B,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AA9DA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AASnB;IADC,QAAQ,EAAE;uCACM;AAYjB;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;oCACZ;AASrB;IADC,QAAQ,EAAE;qCACI;AASf;IADC,QAAQ,EAAE;8CACa;AASxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACV;AASlB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;oCAClD;AAhEd,MAAM;IADX,aAAa,CAAC,YAAY,CAAC;GACtB,MAAM,CAqEX;AAED,MAAM,CAAC,MAAM,EAAE,CAAC;AAEhB,eAAe,MAAM,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { IOption } from \"./Select.js\";\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-option` component defines the content of an option in the `ui5-select`.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Option.js\";`\n * @constructor\n * @extends UI5Element\n * @implements {IOption}\n * @public\n * @abstract\n */\n@customElement(\"ui5-option\")\nclass Option extends UI5Element implements IOption {\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t * Defines the text of the tooltip that would be displayed for the option component.\n\t * @default \"\"\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\ttooltip!: string;\n\n\t/**\n\t * Defines the `icon` source URI.\n\t *\n\t * **Note:**\n\t * SAP-icons font provides numerous built-in icons. To find all the available icons, see the\n\t * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default null\n\t * @public\n\t */\n\t@property({ defaultValue: null })\n\ticon?: string | null;\n\n\t/**\n\t * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\n\t * For more information on HTML Form support, see the `name` property of `ui5-select`.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tvalue!: string;\n\n\t/**\n\t * Defines the additional text displayed at the end of the option element.\n\t * @default \"\"\n\t * @public\n\t * @since 1.3.0\n\t */\n\t@property()\n\tadditionalText!: string;\n\n\t/**\n\t * Defines the focused state of the component.\n\t * @default false\n\t * @since 1.0.0-rc.13\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t *\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true, invalidateOnChildChange: true })\n\ttext!: Array<Node>;\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n}\n\nOption.define();\n\nexport default Option;\n"]}

package/dist/Panel.d.ts

@@ -6,55 +6,52 @@ import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-panel</code> component is a container which has a header and a
+ * The `ui5-panel` 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>
+ * ### Guidelines:
  *
- * <h3>Structure</h3>
+ * - Nesting two or more panels is not recommended.
+ * - Do not stack too many panels on one page.
+ *
+ * ### Structure
  * 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 custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.
+ *
  * 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
+ * **Note:** 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.
+ *
+ * ### Responsive Behavior
+ *
+ * - 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>
+ * depending on its parent container.
+ * - If the panel has a fixed height, it will take up the space even if the panel is
+ * collapsed.
+ * - When the panel is expandable (the `fixed` property is set to `false`),
+ * an arrow icon (pointing to the right) appears in front of the header.
+ * - When the animation is activated, expand/collapse uses a smooth animation to open or
+ * close the content area.
+ * - When the panel expands/collapses, the arrow icon rotates 90 degrees
+ * clockwise/counter-clockwise.
  *
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * <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>.
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * 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>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/Panel";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Panel.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -66,9 +63,8 @@ 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.
      *
+     * **Note:** This property is overridden by the `header` slot.
      * @default ""
      * @public
      */
@@ -76,21 +72,18 @@ declare class Panel extends UI5Element {
     /**
      * Determines whether the component is in a fixed state that is not
      * expandable/collapsible by user interaction.
-     *
      * @default false
      * @public
      */
     fixed: boolean;
     /**
      * Indicates whether the component is collapsed and only the header is displayed.
-     *
      * @default 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.
-     *
      * @default false
      * @public
      * @since 1.0.0-rc.16
@@ -98,26 +91,21 @@ declare class Panel extends UI5Element {
     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>.
-     *
+     * Depending on the usage, you can change the role from the default `Form`
+     * to `Region` or `Complementary`.
      * @default "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>.
-     *
+     * set by the `headerText`.
      * @default "H2"
      * @public
     */
     headerLevel: `${TitleLevel}`;
     /**
      * Defines the accessible ARIA name of the component.
-     *
      * @default ""
      * @public
      * @since 1.0.0-rc.15
@@ -128,17 +116,15 @@ declare class Panel extends UI5Element {
      * If stickyHeader is set to true, then whenever you scroll the content or
      * the application, the header of the panel will be always visible and
      * a solid color will be used for its design.
-     *
      * @default false
      * @public
      * @since 1.16.0-rc.1
      */
     stickyHeader: boolean;
     /**
-     * When set to <code>true</code>, the <code>accessibleName</code> property will be
+     * When set to `true`, the `accessibleName` 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.
-     *
+     * **Note:** This property only has effect if `accessibleName` is set and a header slot is provided.
      * @default false
      * @private
       */
@@ -151,9 +137,8 @@ declare class Panel extends UI5Element {
     _animationRunning: boolean;
     /**
      * Defines the component header area.
-     * <br><br>
-     * <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.
      *
+     * **Note:** When a header is provided, the `headerText` property is ignored.
      * @public
      */
     header: Array<HTMLElement>;
@@ -195,7 +180,7 @@ declare class Panel extends UI5Element {
     get ariaLabelledbyReference(): string | undefined;
     get fixedPanelAriaLabelledbyReference(): string | undefined;
     get headerAriaLevel(): string;
-    get headerTabIndex(): "0" | "-1";
+    get headerTabIndex(): "-1" | "0";
     get headingWrapperAriaLevel(): string | undefined;
     get headingWrapperRole(): "heading" | undefined;
     get nonFixedInternalHeader(): boolean;

package/dist/Panel.js

@@ -29,55 +29,52 @@ import panelCss from "./generated/themes/Panel.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-panel</code> component is a container which has a header and a
+ * The `ui5-panel` 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>
+ * ### Guidelines:
  *
- * <h3>Structure</h3>
+ * - Nesting two or more panels is not recommended.
+ * - Do not stack too many panels on one page.
+ *
+ * ### Structure
  * 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 custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.
+ *
  * 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
+ * **Note:** 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.
+ *
+ * ### Responsive Behavior
+ *
+ * - 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>
+ * depending on its parent container.
+ * - If the panel has a fixed height, it will take up the space even if the panel is
+ * collapsed.
+ * - When the panel is expandable (the `fixed` property is set to `false`),
+ * an arrow icon (pointing to the right) appears in front of the header.
+ * - When the animation is activated, expand/collapse uses a smooth animation to open or
+ * close the content area.
+ * - When the panel expands/collapses, the arrow icon rotates 90 degrees
+ * clockwise/counter-clockwise.
  *
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * <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>.
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * 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>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <code>import "@ui5/webcomponents/dist/Panel";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Panel.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -291,7 +288,6 @@ Panel = Panel_1 = __decorate([
     })
     /**
      * Fired when the component is expanded/collapsed by user interaction.
-     *
      * @public
      */
     ,