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

package/dist/BusyIndicator.d.ts

@@ -2,41 +2,39 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
 import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
+import BusyIndicatorTextPlacement from "./types/BusyIndicatorTextPlacement.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-busy-indicator</code> signals that some operation is going on and that the
+ * The `ui5-busy-indicator` signals that some operation is going on and that the
  * user must wait. It does not block the current UI screen so other operations could be triggered in parallel.
  * It displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.
  *
- * <h3>Usage</h3>
- * For the <code>ui5-busy-indicator</code> you can define the size, the text and whether it is shown or hidden.
+ * ### Usage
+ * For the `ui5-busy-indicator` you can define the size, the text and whether it is shown or hidden.
  * In order to hide it, use the "active" property.
- * <br><br>
- * In order to show busy state over an HTML element, simply nest the HTML element in a <code>ui5-busy-indicator</code> instance.
- * <br>
- * <b>Note:</b> Since <code>ui5-busy-indicator</code> has <code>display: inline-block;</code> by default and no width of its own,
- * whenever you need to wrap a block-level element, you should set <code>display: block</code> to the busy indicator as well.
  *
- * <h4>When to use:</h4>
- * <ul>
- * <li>The user needs to be able to cancel the operation.</li>
- * <li>Only part of the application or a particular component is affected.</li>
- * </ul>
+ * In order to show busy state over an HTML element, simply nest the HTML element in a `ui5-busy-indicator` instance.
  *
- * <h4>When not to use:</h4>
- * <ul>
- * <li>The operation takes less than one second.</li>
- * <li>You need to block the screen and prevent the user from starting another activity.</li>
- * <li>Do not show multiple busy indicators at once.</li>
- * </ul>
+ * **Note:** Since `ui5-busy-indicator` has `display: inline-block;` by default and no width of its own,
+ * whenever you need to wrap a block-level element, you should set `display: block` to the busy indicator as well.
  *
- * <h3>ES6 Module Import</h3>
+ * #### When to use:
  *
- * <code>import "@ui5/webcomponents/dist/BusyIndicator";</code>
+ * - The user needs to be able to cancel the operation.
+ * - Only part of the application or a particular component is affected.
  *
+ * #### When not to use:
+ *
+ * - The operation takes less than one second.
+ * - You need to block the screen and prevent the user from starting another activity.
+ * - Do not show multiple busy indicators at once.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/BusyIndicator.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -53,25 +51,29 @@ declare class BusyIndicator extends UI5Element {
     text: string;
     /**
      * Defines the size of the component.
-     *
-     * @default "Medium"
+     * @default "M"
      * @public
      */
     size: `${BusyIndicatorSize}`;
     /**
      * Defines if the busy indicator is visible on the screen. By default it is not.
-     *
      * @default false
      * @public
      */
     active: boolean;
     /**
      * Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.
-     *
      * @default 1000
      * @public
      */
     delay: number;
+    /**
+     * Defines the placement of the text.
+     *
+     * @default "Bottom"
+     * @public
+     */
+    textPlacement: `${BusyIndicatorTextPlacement}`;
     /**
      * Defines if the component is currently in busy state.
      * @private
@@ -93,6 +95,10 @@ declare class BusyIndicator extends UI5Element {
             "ui5-busy-indicator-root": boolean;
         };
     };
+    get textPosition(): {
+        top: boolean | "";
+        bottom: boolean | "";
+    };
     onBeforeRendering(): void;
     _handleKeydown(e: KeyboardEvent): void;
     _preventEvent(e: KeyboardEvent): void;

package/dist/BusyIndicator.js

@@ -12,7 +12,9 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import { isDesktop, } from "@ui5/webcomponents-base/dist/Device.js";
 import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
+import BusyIndicatorTextPlacement from "./types/BusyIndicatorTextPlacement.js";
 import Label from "./Label.js";
 // Template
 import BusyIndicatorTemplate from "./generated/templates/BusyIndicatorTemplate.lit.js";
@@ -22,38 +24,35 @@ import busyIndicatorCss from "./generated/themes/BusyIndicator.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-busy-indicator</code> signals that some operation is going on and that the
+ * The `ui5-busy-indicator` signals that some operation is going on and that the
  * user must wait. It does not block the current UI screen so other operations could be triggered in parallel.
  * It displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.
  *
- * <h3>Usage</h3>
- * For the <code>ui5-busy-indicator</code> you can define the size, the text and whether it is shown or hidden.
+ * ### Usage
+ * For the `ui5-busy-indicator` you can define the size, the text and whether it is shown or hidden.
  * In order to hide it, use the "active" property.
- * <br><br>
- * In order to show busy state over an HTML element, simply nest the HTML element in a <code>ui5-busy-indicator</code> instance.
- * <br>
- * <b>Note:</b> Since <code>ui5-busy-indicator</code> has <code>display: inline-block;</code> by default and no width of its own,
- * whenever you need to wrap a block-level element, you should set <code>display: block</code> to the busy indicator as well.
  *
- * <h4>When to use:</h4>
- * <ul>
- * <li>The user needs to be able to cancel the operation.</li>
- * <li>Only part of the application or a particular component is affected.</li>
- * </ul>
+ * In order to show busy state over an HTML element, simply nest the HTML element in a `ui5-busy-indicator` instance.
  *
- * <h4>When not to use:</h4>
- * <ul>
- * <li>The operation takes less than one second.</li>
- * <li>You need to block the screen and prevent the user from starting another activity.</li>
- * <li>Do not show multiple busy indicators at once.</li>
- * </ul>
+ * **Note:** Since `ui5-busy-indicator` has `display: inline-block;` by default and no width of its own,
+ * whenever you need to wrap a block-level element, you should set `display: block` to the busy indicator as well.
  *
- * <h3>ES6 Module Import</h3>
+ * #### When to use:
  *
- * <code>import "@ui5/webcomponents/dist/BusyIndicator";</code>
+ * - The user needs to be able to cancel the operation.
+ * - Only part of the application or a particular component is affected.
  *
+ * #### When not to use:
+ *
+ * - The operation takes less than one second.
+ * - You need to block the screen and prevent the user from starting another activity.
+ * - Do not show multiple busy indicators at once.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/BusyIndicator.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -73,6 +72,9 @@ let BusyIndicator = BusyIndicator_1 = class BusyIndicator extends UI5Element {
         this.addEventListener("keyup", this._preventEventHandler, {
             capture: true,
         });
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
     }
     onExitDOM() {
         if (this._busyTimeoutId) {
@@ -98,6 +100,12 @@ let BusyIndicator = BusyIndicator_1 = class BusyIndicator extends UI5Element {
             },
         };
     }
+    get textPosition() {
+        return {
+            top: this.text && this.textPlacement === BusyIndicatorTextPlacement.Top,
+            bottom: this.text && this.textPlacement === BusyIndicatorTextPlacement.Bottom,
+        };
+    }
     onBeforeRendering() {
         if (this.active) {
             if (!this._isBusy && !this._busyTimeoutId) {
@@ -147,7 +155,7 @@ __decorate([
     property()
 ], BusyIndicator.prototype, "text", void 0);
 __decorate([
-    property({ type: BusyIndicatorSize, defaultValue: BusyIndicatorSize.Medium })
+    property({ type: BusyIndicatorSize, defaultValue: BusyIndicatorSize.M })
 ], BusyIndicator.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean })
@@ -155,6 +163,9 @@ __decorate([
 __decorate([
     property({ validator: Integer, defaultValue: 1000 })
 ], BusyIndicator.prototype, "delay", void 0);
+__decorate([
+    property({ type: BusyIndicatorTextPlacement, defaultValue: BusyIndicatorTextPlacement.Bottom })
+], BusyIndicator.prototype, "textPlacement", void 0);
 __decorate([
     property({ type: Boolean })
 ], BusyIndicator.prototype, "_isBusy", void 0);

package/dist/BusyIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"BusyIndicator.js","sourceRoot":"","sources":["../src/BusyIndicator.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,OAAO,MAAM,+CAA+C,CAAC;AAEpE,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAC7D,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,WAAW;AACX,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AAEvF,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAEzE,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AASH,IAAM,aAAa,qBAAnB,MAAM,aAAc,SAAQ,UAAU;IAmDrC;QACC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,UAAU;QACT,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE;YACtD,OAAO,EAAE,IAAI;SACb,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE;YACzD,OAAO,EAAE,IAAI;SACb,CAAC,CAAC;IACJ,CAAC;IAED,SAAS;QACR,IAAI,IAAI,CAAC,cAAc,EAAE;YACxB,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAClC,OAAO,IAAI,CAAC,cAAc,CAAC;SAC3B;QAED,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;QAChE,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;IACpE,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,eAAa,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACtE,CAAC;IAED,IAAI,SAAS;QACZ,OAAO,eAAa,CAAC,UAAU,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC/D,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACpD,CAAC;IAED,IAAI,OAAO;QACV,OAAO;YACN,IAAI,EAAE;gBACL,yBAAyB,EAAE,IAAI;aAC/B;SACD,CAAC;IACH,CAAC;IAED,iBAAiB;QAChB,IAAI,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;gBAC1C,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,GAAG,EAAE;oBACrC,OAAO,IAAI,CAAC,cAAc,CAAC;oBAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACrB,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;aAC5B;SACD;aAAM;YACN,IAAI,IAAI,CAAC,cAAc,EAAE;gBACxB,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;gBAClC,OAAO,IAAI,CAAC,cAAc,CAAC;aAC3B;YACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACrB;IACF,CAAC;IAED,cAAc,CAAC,CAAgB;QAC9B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YAClB,OAAO;SACP;QAED,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAE7B,oGAAoG;QACpG,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,UAAW,CAAC,aAAa,CAAc,2BAA2B,CAAE,CAAC,KAAK,EAAE,CAAC;YAClF,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;SAC1B;IACF,CAAC;IAED,aAAa,CAAC,CAAgB;QAC7B,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,CAAC,CAAC,wBAAwB,EAAE,CAAC;SAC7B;IACF,CAAC;IAED;;OAEG;IACH,cAAc,CAAC,CAAa;QAC3B,IAAI,IAAI,CAAC,YAAY,EAAE;YACtB,OAAO;SACP;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,UAAW,CAAC,aAAa,CAAc,+BAA+B,CAAE,CAAC,KAAK,EAAE,CAAC;IACvF,CAAC;CACD,CAAA;AAzIA;IADC,QAAQ,EAAE;2CACG;AASd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,YAAY,EAAE,iBAAiB,CAAC,MAAM,EAAE,CAAC;2CAChD;AAS9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACX;AASjB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;4CACtC;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACV;AA1Cb,aAAa;IARlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,aAAa,EAAE,IAAI;QACnB,MAAM,EAAE,gBAAgB;QACxB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,qBAAqB;QAC/B,YAAY,EAAE,CAAC,KAAK,CAAC;KACrB,CAAC;GACI,aAAa,CAiJlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isTabNext } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport type { Timeout } from \"@ui5/webcomponents-base/dist/types.js\";\nimport BusyIndicatorSize from \"./types/BusyIndicatorSize.js\";\nimport Label from \"./Label.js\";\n\n// Template\nimport BusyIndicatorTemplate from \"./generated/templates/BusyIndicatorTemplate.lit.js\";\n\nimport { BUSY_INDICATOR_TITLE } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport busyIndicatorCss from \"./generated/themes/BusyIndicator.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-busy-indicator</code> signals that some operation is going on and that the\n * user must wait. It does not block the current UI screen so other operations could be triggered in parallel.\n * It displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.\n *\n * <h3>Usage</h3>\n * For the <code>ui5-busy-indicator</code> you can define the size, the text and whether it is shown or hidden.\n * In order to hide it, use the \"active\" property.\n * <br><br>\n * In order to show busy state over an HTML element, simply nest the HTML element in a <code>ui5-busy-indicator</code> instance.\n * <br>\n * <b>Note:</b> Since <code>ui5-busy-indicator</code> has <code>display: inline-block;</code> by default and no width of its own,\n * whenever you need to wrap a block-level element, you should set <code>display: block</code> to the busy indicator as well.\n *\n * <h4>When to use:</h4>\n * <ul>\n * <li>The user needs to be able to cancel the operation.</li>\n * <li>Only part of the application or a particular component is affected.</li>\n * </ul>\n *\n * <h4>When not to use:</h4>\n * <ul>\n * <li>The operation takes less than one second.</li>\n * <li>You need to block the screen and prevent the user from starting another activity.</li>\n * <li>Do not show multiple busy indicators at once.</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/BusyIndicator\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @slot {Array<Node>} default - Determines the content over which the component will appear.\n * @since 0.12.0\n */\n@customElement({\n\ttag: \"ui5-busy-indicator\",\n\tlanguageAware: true,\n\tstyles: busyIndicatorCss,\n\trenderer: litRender,\n\ttemplate: BusyIndicatorTemplate,\n\tdependencies: [Label],\n})\nclass BusyIndicator extends UI5Element {\n\t/**\n\t * Defines text to be displayed below the component. It can be used to inform the user of the current operation.\n\t * @public\n\t * @default \"\"\n\t * @since 1.0.0-rc.7\n\t */\n\t@property()\n\ttext!: string;\n\n\t/**\n\t * Defines the size of the component.\n\t *\n\t * @default \"Medium\"\n\t * @public\n\t */\n\t@property({ type: BusyIndicatorSize, defaultValue: BusyIndicatorSize.Medium })\n\tsize!: `${BusyIndicatorSize}`;\n\n\t/**\n\t * Defines if the busy indicator is visible on the screen. By default it is not.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tactive!: boolean;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.\n\t *\n\t * @default 1000\n\t * @public\n\t */\n\t@property({ validator: Integer, defaultValue: 1000 })\n\tdelay!: number;\n\n\t/**\n\t * Defines if the component is currently in busy state.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_isBusy!: boolean;\n\n\t_keydownHandler: (e: KeyboardEvent) => void;\n\t_preventEventHandler: (e: KeyboardEvent) => void;\n\t_busyTimeoutId?: Timeout;\n\tfocusForward?: boolean;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._keydownHandler = this._handleKeydown.bind(this);\n\t\tthis._preventEventHandler = this._preventEvent.bind(this);\n\t}\n\n\tonEnterDOM() {\n\t\tthis.addEventListener(\"keydown\", this._keydownHandler, {\n\t\t\tcapture: true,\n\t\t});\n\t\tthis.addEventListener(\"keyup\", this._preventEventHandler, {\n\t\t\tcapture: true,\n\t\t});\n\t}\n\n\tonExitDOM() {\n\t\tif (this._busyTimeoutId) {\n\t\t\tclearTimeout(this._busyTimeoutId);\n\t\t\tdelete this._busyTimeoutId;\n\t\t}\n\n\t\tthis.removeEventListener(\"keydown\", this._keydownHandler, true);\n\t\tthis.removeEventListener(\"keyup\", this._preventEventHandler, true);\n\t}\n\n\tstatic async onDefine() {\n\t\tBusyIndicator.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tget ariaTitle() {\n\t\treturn BusyIndicator.i18nBundle.getText(BUSY_INDICATOR_TITLE);\n\t}\n\n\tget labelId() {\n\t\treturn this.text ? `${this._id}-label` : undefined;\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-busy-indicator-root\": true,\n\t\t\t},\n\t\t};\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.active) {\n\t\t\tif (!this._isBusy && !this._busyTimeoutId) {\n\t\t\t\tthis._busyTimeoutId = setTimeout(() => {\n\t\t\t\t\tdelete this._busyTimeoutId;\n\t\t\t\t\tthis._isBusy = true;\n\t\t\t\t}, Math.max(0, this.delay));\n\t\t\t}\n\t\t} else {\n\t\t\tif (this._busyTimeoutId) {\n\t\t\t\tclearTimeout(this._busyTimeoutId);\n\t\t\t\tdelete this._busyTimeoutId;\n\t\t\t}\n\t\t\tthis._isBusy = false;\n\t\t}\n\t}\n\n\t_handleKeydown(e: KeyboardEvent) {\n\t\tif (!this._isBusy) {\n\t\t\treturn;\n\t\t}\n\n\t\te.stopImmediatePropagation();\n\n\t\t// move the focus to the last element in this DOM and let TAB continue to the next focusable element\n\t\tif (isTabNext(e)) {\n\t\t\tthis.focusForward = true;\n\t\t\tthis.shadowRoot!.querySelector<HTMLElement>(\"[data-ui5-focus-redirect]\")!.focus();\n\t\t\tthis.focusForward = false;\n\t\t}\n\t}\n\n\t_preventEvent(e: KeyboardEvent) {\n\t\tif (this._isBusy) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t/**\n\t * Moves the focus to busy area when coming with SHIFT + TAB\n\t */\n\t_redirectFocus(e: FocusEvent) {\n\t\tif (this.focusForward) {\n\t\t\treturn;\n\t\t}\n\n\t\te.preventDefault();\n\t\tthis.shadowRoot!.querySelector<HTMLElement>(\".ui5-busy-indicator-busy-area\")!.focus();\n\t}\n}\n\nBusyIndicator.define();\n\nexport default BusyIndicator;\n"]}
+{"version":3,"file":"BusyIndicator.js","sourceRoot":"","sources":["../src/BusyIndicator.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isTabNext } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport type { Timeout } from \"@ui5/webcomponents-base/dist/types.js\";\nimport {\n\tisDesktop,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport BusyIndicatorSize from \"./types/BusyIndicatorSize.js\";\nimport BusyIndicatorTextPlacement from \"./types/BusyIndicatorTextPlacement.js\";\nimport Label from \"./Label.js\";\n\n// Template\nimport BusyIndicatorTemplate from \"./generated/templates/BusyIndicatorTemplate.lit.js\";\n\nimport { BUSY_INDICATOR_TITLE } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport busyIndicatorCss from \"./generated/themes/BusyIndicator.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-busy-indicator` signals that some operation is going on and that the\n * user must wait. It does not block the current UI screen so other operations could be triggered in parallel.\n * It displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.\n *\n * ### Usage\n * For the `ui5-busy-indicator` you can define the size, the text and whether it is shown or hidden.\n * In order to hide it, use the \"active\" property.\n *\n * In order to show busy state over an HTML element, simply nest the HTML element in a `ui5-busy-indicator` instance.\n *\n * **Note:** Since `ui5-busy-indicator` has `display: inline-block;` by default and no width of its own,\n * whenever you need to wrap a block-level element, you should set `display: block` to the busy indicator as well.\n *\n * #### When to use:\n *\n * - The user needs to be able to cancel the operation.\n * - Only part of the application or a particular component is affected.\n *\n * #### When not to use:\n *\n * - The operation takes less than one second.\n * - You need to block the screen and prevent the user from starting another activity.\n * - Do not show multiple busy indicators at once.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/BusyIndicator.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @slot {Array<Node>} default - Determines the content over which the component will appear.\n * @since 0.12.0\n */\n@customElement({\n\ttag: \"ui5-busy-indicator\",\n\tlanguageAware: true,\n\tstyles: busyIndicatorCss,\n\trenderer: litRender,\n\ttemplate: BusyIndicatorTemplate,\n\tdependencies: [Label],\n})\nclass BusyIndicator extends UI5Element {\n\t/**\n\t * Defines text to be displayed below the component. It can be used to inform the user of the current operation.\n\t * @public\n\t * @default \"\"\n\t * @since 1.0.0-rc.7\n\t */\n\t@property()\n\ttext!: string;\n\n\t/**\n\t * Defines the size of the component.\n\t * @default \"M\"\n\t * @public\n\t */\n\t@property({ type: BusyIndicatorSize, defaultValue: BusyIndicatorSize.M })\n\tsize!: `${BusyIndicatorSize}`;\n\n\t/**\n\t * Defines if the busy indicator is visible on the screen. By default it is not.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tactive!: boolean;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.\n\t * @default 1000\n\t * @public\n\t */\n\t@property({ validator: Integer, defaultValue: 1000 })\n\tdelay!: number;\n\n\t/**\n\t * Defines the placement of the text.\n\t *\n\t * @default \"Bottom\"\n\t * @public\n\t */\n\t@property({ type: BusyIndicatorTextPlacement, defaultValue: BusyIndicatorTextPlacement.Bottom })\n\ttextPlacement!: `${BusyIndicatorTextPlacement}`;\n\n\t/**\n\t * Defines if the component is currently in busy state.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_isBusy!: boolean;\n\n\t_keydownHandler: (e: KeyboardEvent) => void;\n\t_preventEventHandler: (e: KeyboardEvent) => void;\n\t_busyTimeoutId?: Timeout;\n\tfocusForward?: boolean;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._keydownHandler = this._handleKeydown.bind(this);\n\t\tthis._preventEventHandler = this._preventEvent.bind(this);\n\t}\n\n\tonEnterDOM() {\n\t\tthis.addEventListener(\"keydown\", this._keydownHandler, {\n\t\t\tcapture: true,\n\t\t});\n\t\tthis.addEventListener(\"keyup\", this._preventEventHandler, {\n\t\t\tcapture: true,\n\t\t});\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tonExitDOM() {\n\t\tif (this._busyTimeoutId) {\n\t\t\tclearTimeout(this._busyTimeoutId);\n\t\t\tdelete this._busyTimeoutId;\n\t\t}\n\n\t\tthis.removeEventListener(\"keydown\", this._keydownHandler, true);\n\t\tthis.removeEventListener(\"keyup\", this._preventEventHandler, true);\n\t}\n\n\tstatic async onDefine() {\n\t\tBusyIndicator.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tget ariaTitle() {\n\t\treturn BusyIndicator.i18nBundle.getText(BUSY_INDICATOR_TITLE);\n\t}\n\n\tget labelId() {\n\t\treturn this.text ? `${this._id}-label` : undefined;\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-busy-indicator-root\": true,\n\t\t\t},\n\t\t};\n\t}\n\tget textPosition() {\n\t\treturn {\n\t\t\ttop: this.text && this.textPlacement === BusyIndicatorTextPlacement.Top,\n\t\t\tbottom: this.text && this.textPlacement === BusyIndicatorTextPlacement.Bottom,\n\t\t};\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.active) {\n\t\t\tif (!this._isBusy && !this._busyTimeoutId) {\n\t\t\t\tthis._busyTimeoutId = setTimeout(() => {\n\t\t\t\t\tdelete this._busyTimeoutId;\n\t\t\t\t\tthis._isBusy = true;\n\t\t\t\t}, Math.max(0, this.delay));\n\t\t\t}\n\t\t} else {\n\t\t\tif (this._busyTimeoutId) {\n\t\t\t\tclearTimeout(this._busyTimeoutId);\n\t\t\t\tdelete this._busyTimeoutId;\n\t\t\t}\n\t\t\tthis._isBusy = false;\n\t\t}\n\t}\n\n\t_handleKeydown(e: KeyboardEvent) {\n\t\tif (!this._isBusy) {\n\t\t\treturn;\n\t\t}\n\n\t\te.stopImmediatePropagation();\n\n\t\t// move the focus to the last element in this DOM and let TAB continue to the next focusable element\n\t\tif (isTabNext(e)) {\n\t\t\tthis.focusForward = true;\n\t\t\tthis.shadowRoot!.querySelector<HTMLElement>(\"[data-ui5-focus-redirect]\")!.focus();\n\t\t\tthis.focusForward = false;\n\t\t}\n\t}\n\n\t_preventEvent(e: KeyboardEvent) {\n\t\tif (this._isBusy) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t/**\n\t * Moves the focus to busy area when coming with SHIFT + TAB\n\t */\n\t_redirectFocus(e: FocusEvent) {\n\t\tif (this.focusForward) {\n\t\t\treturn;\n\t\t}\n\n\t\te.preventDefault();\n\t\tthis.shadowRoot!.querySelector<HTMLElement>(\".ui5-busy-indicator-busy-area\")!.focus();\n\t}\n}\n\nBusyIndicator.define();\n\nexport default BusyIndicator;\n"]}

package/dist/Button.d.ts

@@ -1,48 +1,55 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { PassiveEventListenerObject } from "@ui5/webcomponents-base/dist/types.js";
+import type { AccessibilityAttributes, PassiveEventListenerObject } from "@ui5/webcomponents-base/dist/types.js";
+import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type { IFormElement } from "./features/InputElementsFormSupport.js";
+import type { IFormElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonType from "./types/ButtonType.js";
-import type { IButton } from "./Interfaces.js";
+import ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+import IconMode from "./types/IconMode.js";
+/**
+ * Interface for components that may be used as a button inside numerous higher-order components
+ * @public
+ */
+interface IButton extends HTMLElement, ITabbable {
+    nonInteractive: boolean;
+}
+type ButtonAccessibilityAttributes = Pick<AccessibilityAttributes, "expanded" | "hasPopup" | "controls">;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-button</code> component represents a simple push button.
- * It enables users to trigger actions by clicking or tapping the <code>ui5-button</code>, or by pressing
+ * The `ui5-button` component represents a simple push button.
+ * It enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing
  * certain keyboard keys, such as Enter.
  *
+ * ### Usage
  *
- * <h3>Usage</h3>
- *
- * For the <code>ui5-button</code> UI, you can define text, icon, or both. You can also specify
+ * For the `ui5-button` UI, you can define text, icon, or both. You can also specify
  * whether the text or the icon is displayed first.
- * <br><br>
+ *
  * You can choose from a set of predefined types that offer different
  * styling to correspond to the triggered action.
- * <br><br>
- * You can set the <code>ui5-button</code> as enabled or disabled. An enabled
- * <code>ui5-button</code> can be pressed by clicking or tapping it. The button changes
- * its style to provide visual feedback to the user that it is pressed or hovered over with
- * the mouse cursor. A disabled <code>ui5-button</code> appears inactive and cannot be pressed.
  *
- * <h3>ES6 Module Import</h3>
+ * You can set the `ui5-button` as enabled or disabled. An enabled
+ * `ui5-button` can be pressed by clicking or tapping it. The button changes
+ * its style to provide visual feedback to the user that it is pressed or hovered over with
+ * the mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.
  *
- * <code>import "@ui5/webcomponents/dist/Button";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Button.js";`
  * @csspart button - Used to style the native button element
  * @constructor
  * @extends UI5Element
  * @implements { IButton }
  * @public
  */
-declare class Button extends UI5Element implements IFormElement, IButton {
+declare class Button extends UI5Element implements IButton, IFormElement {
     /**
      * Defines the component design.
-     *
      * @default "Default"
      * @public
      */
@@ -51,7 +58,6 @@ declare class Button extends UI5Element implements IFormElement, IButton {
      * Defines whether the component is disabled.
      * A disabled component can't be pressed or
      * focused, and it is not in the tab chain.
-     *
      * @default false
      * @public
      */
@@ -59,29 +65,24 @@ declare class Button extends UI5Element implements IFormElement, IButton {
     /**
      * Defines the icon, displayed as graphical element within the component.
      * The SAP-icons font provides numerous options.
-     * <br><br>
-     * Example:
-     *
-     * See all the available icons within the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
      *
+     * Example:
+     * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
      * @default ""
      * @public
      */
     icon: string;
     /**
      * Defines whether the icon should be displayed after the component text.
-     *
      * @default false
      * @public
      */
     iconEnd: boolean;
     /**
-     * When set to <code>true</code>, the component will
-     * automatically submit the nearest HTML form element on <code>press</code>.
-     * <br><br>
-     * <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
-     * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
+     * When set to `true`, the component will
+     * automatically submit the nearest HTML form element on `press`.
      *
+     * **Note:** This property is only applicable within the context of an HTML Form element.`
      * @default false
      * @public
      * @deprecated Set the "type" property to "Submit" to achieve the same result. The "submits" property is ignored if "type" is set to any value other than "Button".
@@ -89,8 +90,8 @@ declare class Button extends UI5Element implements IFormElement, IButton {
     submits: boolean;
     /**
      * Defines the tooltip of the component.
-     * <br>
-     * <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
+     *
+     * **Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
      * @default ""
      * @public
      * @since 1.2.0
@@ -98,7 +99,6 @@ declare class Button extends UI5Element implements IFormElement, IButton {
     tooltip: string;
     /**
      * Defines the accessible ARIA name of the component.
-     *
      * @default undefined
      * @public
      * @since 1.0.0-rc.15
@@ -106,58 +106,48 @@ declare class Button extends UI5Element implements IFormElement, IButton {
     accessibleName?: string;
     /**
      * Receives id(or many ids) of the elements that label the component.
-     *
      * @default ""
      * @public
      * @since 1.1.0
      */
     accessibleNameRef: string;
     /**
-     * An object of strings that defines several additional accessibility attribute values
-     * for customization depending on the use case.
+     * Defines the additional accessibility attributes that will be applied to the component.
+     * The following fields are supported:
+     *
+     * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.
+     * Accepts the following string values: `true` or `false`
      *
-     * It supports the following fields:
+     * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+     * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
      *
-     * <ul>
-     * 		<li><code>expanded</code>: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
-     *			<ul>
-     *				<li><code>true</code></li>
-     *				<li><code>false</code></li>
-     *			</ul>
-     * 		</li>
-     * 		<li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values:
-     * 			<ul>
-     *				<li><code>Dialog</code></li>
-     *				<li><code>Grid</code></li>
-     *				<li><code>ListBox</code></li>
-     *				<li><code>Menu</code></li>
-     *				<li><code>Tree</code></li>
-     * 			</ul>
-     * 		</li>
-     * 		<li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>
-     * </ul>
+     * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.
+     * Accepts a lowercase string value.
      *
      * @public
      * @since 1.2.0
      * @default {}
      */
-    accessibilityAttributes: {
-        expanded: "true" | "false";
-        hasPopup: "Dialog" | "Grid" | "ListBox" | "Menu" | "Tree";
-        controls: string;
-    };
+    accessibilityAttributes: ButtonAccessibilityAttributes;
     /**
      * Defines whether the button has special form-related functionality.
      *
-     * <br><br>
-     * <b>Note:</b> For the <code>type</code> property to have effect, you must add the following import to your project:
-     * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
-     *
+     * **Note:** This property is only applicable within the context of an HTML Form element.
      * @default "Button"
      * @public
      * @since 1.15.0
      */
     type: `${ButtonType}`;
+    /**
+     * Describes the accessibility role of the button.
+     *
+     * **Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.
+     *
+     * @default "Button"
+     * @public
+     * @since 1.23
+     */
+    accessibleRole: `${ButtonAccessibleRole}`;
     /**
      * Used to switch the active state (pressed or not) of the component.
      * @private
@@ -168,18 +158,13 @@ declare class Button extends UI5Element implements IFormElement, IButton {
      * @private
      */
     iconOnly: boolean;
-    /**
-     * Indicates if the elements is on focus
-     * @private
-     */
-    focused: boolean;
     /**
      * Indicates if the elements has a slotted icon
      * @private
      */
     hasIcon: boolean;
     /**
-     * Indicates if the element if focusable
+     * Indicates if the element is focusable
      * @private
      */
     nonInteractive: boolean;
@@ -196,7 +181,7 @@ declare class Button extends UI5Element implements IFormElement, IButton {
      * Defines the tabIndex of the component.
      * @private
      */
-    _tabIndex: string;
+    forcedTabIndex: string;
     /**
      * @since 1.0.0-rc.13
      * @private
@@ -204,9 +189,8 @@ declare class Button extends UI5Element implements IFormElement, IButton {
     _isTouch: 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>;
@@ -225,11 +209,13 @@ declare class Button extends UI5Element implements IFormElement, IButton {
     _onfocusout(): void;
     _onfocusin(e: FocusEvent): void;
     _setActiveState(active: boolean): void;
+    get _hasPopup(): ("dialog" | "grid" | "listbox" | "menu" | "tree") | undefined;
     get hasButtonType(): boolean;
-    get iconRole(): "presentation" | "";
+    get iconMode(): "" | IconMode.Decorative;
     get isIconOnly(): boolean;
     static typeTextMappings(): Record<string, I18nText>;
     get buttonTypeText(): string;
+    get effectiveAccRole(): string;
     get tabIndexValue(): string;
     get showIconTooltip(): boolean;
     get ariaLabelText(): string | undefined;
@@ -238,3 +224,4 @@ declare class Button extends UI5Element implements IFormElement, IButton {
     static onDefine(): Promise<void>;
 }
 export default Button;
+export type { ButtonAccessibilityAttributes, IButton, };