@ui5/webcomponents 0.0.0-037d08c67

package/dist/BreadcrumbsItem.js

@@ -0,0 +1,54 @@
+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 UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import LinkDesign from "./types/LinkDesign.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-breadcrumbs-item` component defines the content of an item in `ui5-breadcrumbs`.
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 1.0.0-rc.15
+ * @abstract
+ */
+let BreadcrumbsItem = class BreadcrumbsItem extends UI5Element {
+    get stableDomRef() {
+        return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+    }
+    get _linkDesign() {
+        return this._isCurrentPageItem ? LinkDesign.Emphasized : LinkDesign.Default;
+    }
+    get accessibilityAttributes() {
+        return {
+            current: this._isCurrentPageItem ? "page" : false,
+        };
+    }
+};
+__decorate([
+    property()
+], BreadcrumbsItem.prototype, "href", void 0);
+__decorate([
+    property()
+], BreadcrumbsItem.prototype, "target", void 0);
+__decorate([
+    property()
+], BreadcrumbsItem.prototype, "accessibleName", void 0);
+__decorate([
+    slot({ type: Node, "default": true })
+], BreadcrumbsItem.prototype, "text", void 0);
+BreadcrumbsItem = __decorate([
+    customElement("ui5-breadcrumbs-item")
+], BreadcrumbsItem);
+BreadcrumbsItem.define();
+export default BreadcrumbsItem;
+//# sourceMappingURL=BreadcrumbsItem.js.map

package/dist/BreadcrumbsItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsItem.js","sourceRoot":"","sources":["../src/BreadcrumbsItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAE1E,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAE/C;;;;;;;;;;;GAWG;AAEH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAkDvC,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC;IAC7E,CAAC;IAED,IAAI,uBAAuB;QAC1B,OAAO;YACN,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;SACjD,CAAC;IACH,CAAC;CACD,CAAA;AAtDA;IADC,QAAQ,EAAE;6CACG;AAkBd;IADC,QAAQ,EAAE;+CACK;AAQhB;IADC,QAAQ,EAAE;uDACY;AASvB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CACb;AA5CpB,eAAe;IADpB,aAAa,CAAC,sBAAsB,CAAC;GAChC,eAAe,CA+DpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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 slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\nimport LinkDesign from \"./types/LinkDesign.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-breadcrumbs-item` component defines the content of an item in `ui5-breadcrumbs`.\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.15\n * @abstract\n */\n@customElement(\"ui5-breadcrumbs-item\")\nclass BreadcrumbsItem extends UI5Element {\n\t/**\n\t * Defines the link href.\n\t *\n\t * **Note:** Standard hyperlink behavior is supported.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\thref?: string;\n\n\t/**\n\t * Defines the link target.\n\t *\n\t * Available options are:\n\t *\n\t * - `_self`\n\t * - `_top`\n\t * - `_blank`\n\t * - `_parent`\n\t * - `_search`\n\t *\n\t * **Note:** This property must only be used when the `href` property is set.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttarget?: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the item.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleName?: string\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 })\n\ttext!: DefaultSlot<Node>;\n\n\t_accessibleNameText?: string;\n\t_isCurrentPageItem?: boolean;\n\t_needsSeparator?: boolean;\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n\n\tget _linkDesign() {\n\t\treturn this._isCurrentPageItem ? LinkDesign.Emphasized : LinkDesign.Default;\n\t}\n\n\tget accessibilityAttributes(): Pick<AccessibilityAttributes, \"current\"> {\n\t\treturn {\n\t\t\tcurrent: this._isCurrentPageItem ? \"page\" : false,\n\t\t};\n\t}\n}\n\nBreadcrumbsItem.define();\n\nexport default BreadcrumbsItem;\n"]}

package/dist/BreadcrumbsPopoverTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Breadcrumbs from "./Breadcrumbs.js";
+export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/BreadcrumbsPopoverTemplate.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import Button from "./Button.js";
+import List from "./List.js";
+import ListItemStandard from "./ListItemStandard.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+export default function BreadcrumbsPopoverTemplate() {
+    const itemsToDisplay = isPhone()
+        ? this._mobilePopoverItems
+        : this._overflowItemsData;
+    return (_jsxs(ResponsivePopover, { class: "ui5-breadcrumbs-popover", hideArrow: true, _hideHeader: true, contentOnlyOnDesktop: true, placement: "Bottom", horizontalAlign: "Start", accessibleName: this._accessibleNamePopover, onKeyDown: this._onkeydown, children: [_jsx(List, { selectionMode: "Single", separators: "None", onSelectionChange: this._onOverflowListItemSelect, children: itemsToDisplay.map(item => _jsx(ListItemStandard, { id: `${item._id}-li`, accessibleName: item.accessibleName, "data-ui5-stable": item.stableDomRef, children: item.textContent })) }), _jsx("div", { slot: "footer", class: "ui5-breadcrumbs-popover-footer", children: _jsx(Button, { design: "Transparent", onClick: this._closeRespPopover, children: this._cancelButtonText }) })] }));
+}
+//# sourceMappingURL=BreadcrumbsPopoverTemplate.js.map

package/dist/BreadcrumbsPopoverTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsPopoverTemplate.js","sourceRoot":"","sources":["../src/BreadcrumbsPopoverTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AAEjE,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,0BAA0B;IACjD,MAAM,cAAc,GAAG,OAAO,EAAE;QAC/B,CAAC,CAAC,IAAI,CAAC,mBAAmB;QAC1B,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC;IAE3B,OAAO,CACN,MAAC,iBAAiB,IACjB,KAAK,EAAC,yBAAyB,EAC/B,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,IAAI,EACjB,oBAAoB,EAAE,IAAI,EAC1B,SAAS,EAAC,QAAQ,EAClB,eAAe,EAAC,OAAO,EACvB,cAAc,EAAE,IAAI,CAAC,sBAAsB,EAC3C,SAAS,EAAE,IAAI,CAAC,UAAU,aAE1B,KAAC,IAAI,IACJ,aAAa,EAAC,QAAQ,EACtB,UAAU,EAAC,MAAM,EACjB,iBAAiB,EAAE,IAAI,CAAC,yBAAyB,YAEhD,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC1B,KAAC,gBAAgB,IAChB,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,KAAK,EACpB,cAAc,EAAE,IAAI,CAAC,cAAc,qBAClB,IAAI,CAAC,YAAY,YAEjC,IAAI,CAAC,WAAW,GACC,CACnB,GACK,EAEP,cAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,gCAAgC,YACxD,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAC9B,IAAI,CAAC,iBAAiB,GAAU,GAC7B,IACa,CACpB,CAAC;AACH,CAAC","sourcesContent":["import { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type Breadcrumbs from \"./Breadcrumbs.js\";\nimport Button from \"./Button.js\";\nimport List from \"./List.js\";\nimport ListItemStandard from \"./ListItemStandard.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\n\nexport default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {\n\tconst itemsToDisplay = isPhone()\n\t\t? this._mobilePopoverItems\n\t\t: this._overflowItemsData;\n\n\treturn (\n\t\t<ResponsivePopover\n\t\t\tclass=\"ui5-breadcrumbs-popover\"\n\t\t\thideArrow={true}\n\t\t\t_hideHeader={true}\n\t\t\tcontentOnlyOnDesktop={true}\n\t\t\tplacement=\"Bottom\"\n\t\t\thorizontalAlign=\"Start\"\n\t\t\taccessibleName={this._accessibleNamePopover}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t>\n\t\t\t<List\n\t\t\t\tselectionMode=\"Single\"\n\t\t\t\tseparators=\"None\"\n\t\t\t\tonSelectionChange={this._onOverflowListItemSelect}\n\t\t\t>\n\t\t\t\t{itemsToDisplay.map(item =>\n\t\t\t\t\t<ListItemStandard\n\t\t\t\t\t\tid={`${item._id}-li`}\n\t\t\t\t\t\taccessibleName={item.accessibleName}\n\t\t\t\t\t\tdata-ui5-stable={item.stableDomRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.textContent}\n\t\t\t\t\t</ListItemStandard>\n\t\t\t\t)}\n\t\t\t</List>\n\n\t\t\t<div slot=\"footer\" class=\"ui5-breadcrumbs-popover-footer\">\n\t\t\t\t<Button\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tonClick={this._closeRespPopover}\n\t\t\t\t>{this._cancelButtonText}</Button>\n\t\t\t</div>\n\t\t</ResponsivePopover>\n\t);\n}\n"]}

package/dist/BreadcrumbsTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Breadcrumbs from "./Breadcrumbs.js";
+export default function BreadcrumbsTemplate(this: Breadcrumbs): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/BreadcrumbsTemplate.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import BreadcrumbsPopoverTemplate from "./BreadcrumbsPopoverTemplate.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import Icon from "./Icon.js";
+import Link from "./Link.js";
+import Label from "./Label.js";
+export default function BreadcrumbsTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsx("nav", { class: "ui5-breadcrumbs-root", "aria-label": this._accessibleNameText, children: _jsxs("ol", { onFocusIn: this._onfocusin, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, children: [_jsx("li", { class: "ui5-breadcrumbs-dropdown-arrow-link-wrapper", hidden: this._isOverflowEmpty, children: _jsx(Link, { wrappingType: "None", accessibleRole: "Button", accessibleName: this._dropdownArrowAccessibleNameText, accessibilityAttributes: this.linkAccessibilityAttributes, onClick: this._openRespPopover, children: _jsx(Icon, { name: slimArrowDown, title: this._dropdownArrowAccessibleNameText }) }) }), this._linksData.map(linkData => _jsxs("li", { id: `${linkData._id}-link-wrapper`, class: "ui5-breadcrumbs-link-wrapper", children: [_jsx(Link, { id: `${linkData._id}-link`, href: linkData.href, target: linkData.target, design: linkData._linkDesign, accessibleName: linkData._accessibleNameText, accessibilityAttributes: linkData.accessibilityAttributes, "data-ui5-stable": linkData.stableDomRef, wrappingType: "None", onClick: this._onLinkPress, children: linkData.innerText }), linkData._needsSeparator &&
+                                    _jsx("span", { class: "ui5-breadcrumbs-separator", "aria-hidden": "true" })] })), !this._endsWithCurrentLinkItem && this._endsWithCurrentLocation &&
+                            _jsx("li", { class: "ui5-breadcrumbs-current-location", onClick: this._onLabelPress, children: _jsx("span", { id: `${this._id}-labelWrapper`, "aria-current": "page", "aria-label": this._currentLocationAccName, children: _jsx(Label, { wrappingType: "None", children: this._currentLocationText }) }) })] }) }), BreadcrumbsPopoverTemplate.call(this)] }));
+}
+//# sourceMappingURL=BreadcrumbsTemplate.js.map

package/dist/BreadcrumbsTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsTemplate.js","sourceRoot":"","sources":["../src/BreadcrumbsTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AACzE,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,8BACC,cAAK,KAAK,EAAC,sBAAsB,gBAAa,IAAI,CAAC,mBAAmB,YACrE,cACC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,aAEtB,aAAI,KAAK,EAAC,6CAA6C,EAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,YACpF,KAAC,IAAI,IACJ,YAAY,EAAC,MAAM,EACnB,cAAc,EAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,gCAAgC,EACrD,uBAAuB,EAAE,IAAI,CAAC,2BAA2B,EACzD,OAAO,EAAE,IAAI,CAAC,gBAAgB,YAE9B,KAAC,IAAI,IAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,gCAAgC,GAAG,GACpE,GACH,EAEJ,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAC/B,cAAI,EAAE,EAAE,GAAG,QAAQ,CAAC,GAAG,eAAe,EAAE,KAAK,EAAC,8BAA8B,aAC3E,KAAC,IAAI,IACJ,EAAE,EAAE,GAAG,QAAQ,CAAC,GAAG,OAAO,EAC1B,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,MAAM,EAAE,QAAQ,CAAC,WAAW,EAC5B,cAAc,EAAE,QAAQ,CAAC,mBAAmB,EAC5C,uBAAuB,EAAE,QAAQ,CAAC,uBAAuB,qBACxC,QAAQ,CAAC,YAAY,EACtC,YAAY,EAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,YAAY,YAEzB,QAAQ,CAAC,SAAS,GACb,EAEN,QAAQ,CAAC,eAAe;oCACzB,eAAM,KAAK,EAAC,2BAA2B,iBAAa,MAAM,GAAQ,IAE9D,CACL,EAEA,CAAC,IAAI,CAAC,wBAAwB,IAAI,IAAI,CAAC,wBAAwB;4BAChE,aAAI,KAAK,EAAC,kCAAkC,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,YACvE,eACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,eAAe,kBACjB,MAAM,gBACP,IAAI,CAAC,uBAAuB,YAExC,KAAC,KAAK,IAAC,YAAY,EAAC,MAAM,YACxB,IAAI,CAAC,oBAAoB,GACnB,GACF,GACH,IAED,GACA,EAEJ,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,IACrC,CACH,CAAC;AACH,CAAC","sourcesContent":["import type Breadcrumbs from \"./Breadcrumbs.js\";\nimport BreadcrumbsPopoverTemplate from \"./BreadcrumbsPopoverTemplate.js\";\nimport slimArrowDown from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport Icon from \"./Icon.js\";\nimport Link from \"./Link.js\";\nimport Label from \"./Label.js\";\n\nexport default function BreadcrumbsTemplate(this: Breadcrumbs) {\n\treturn (\n\t\t<>\n\t\t\t<nav class=\"ui5-breadcrumbs-root\" aria-label={this._accessibleNameText}>\n\t\t\t\t<ol\n\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\tonKeyUp={this._onkeyup}>\n\n\t\t\t\t\t<li class=\"ui5-breadcrumbs-dropdown-arrow-link-wrapper\" hidden={this._isOverflowEmpty}>\n\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\twrappingType=\"None\"\n\t\t\t\t\t\t\taccessibleRole=\"Button\"\n\t\t\t\t\t\t\taccessibleName={this._dropdownArrowAccessibleNameText}\n\t\t\t\t\t\t\taccessibilityAttributes={this.linkAccessibilityAttributes}\n\t\t\t\t\t\t\tonClick={this._openRespPopover}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon name={slimArrowDown} title={this._dropdownArrowAccessibleNameText}/>\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t</li>\n\n\t\t\t\t\t{this._linksData.map(linkData =>\n\t\t\t\t\t\t<li id={`${linkData._id}-link-wrapper`} class=\"ui5-breadcrumbs-link-wrapper\">\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\tid={`${linkData._id}-link`}\n\t\t\t\t\t\t\t\thref={linkData.href}\n\t\t\t\t\t\t\t\ttarget={linkData.target}\n\t\t\t\t\t\t\t\tdesign={linkData._linkDesign}\n\t\t\t\t\t\t\t\taccessibleName={linkData._accessibleNameText}\n\t\t\t\t\t\t\t\taccessibilityAttributes={linkData.accessibilityAttributes}\n\t\t\t\t\t\t\t\tdata-ui5-stable={linkData.stableDomRef}\n\t\t\t\t\t\t\t\twrappingType=\"None\"\n\t\t\t\t\t\t\t\tonClick={this._onLinkPress}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{linkData.innerText}\n\t\t\t\t\t\t\t</Link>\n\n\t\t\t\t\t\t\t{linkData._needsSeparator &&\n\t\t\t\t\t\t\t<span class=\"ui5-breadcrumbs-separator\" aria-hidden=\"true\"></span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!this._endsWithCurrentLinkItem && this._endsWithCurrentLocation &&\n\t\t\t\t\t<li class=\"ui5-breadcrumbs-current-location\" onClick={this._onLabelPress}>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tid={`${this._id}-labelWrapper`}\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\taria-label={this._currentLocationAccName}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Label wrappingType=\"None\">\n\t\t\t\t\t\t\t\t{this._currentLocationText}\n\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ol>\n\t\t\t</nav>\n\n\t\t\t{ BreadcrumbsPopoverTemplate.call(this) }\n\t\t</>\n\t);\n}\n"]}

package/dist/BusyIndicator.d.ts

@@ -0,0 +1,105 @@
+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 type BusyIndicatorSize from "./types/BusyIndicatorSize.js";
+import BusyIndicatorTextPlacement from "./types/BusyIndicatorTextPlacement.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * 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.
+ *
+ * ### 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.
+ *
+ * In order to show busy state over an HTML element, simply nest the HTML element in a `ui5-busy-indicator` instance.
+ *
+ * **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.
+ *
+ * #### When to use:
+ *
+ * - 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
+ * @slot {Array<Node>} default - Determines the content over which the component will appear.
+ * @since 0.12.0
+ */
+declare class BusyIndicator extends UI5Element {
+    /**
+     * Defines text to be displayed below the component. It can be used to inform the user of the current operation.
+     * @public
+     * @default undefined
+     * @since 1.0.0-rc.7
+     */
+    text?: string;
+    /**
+     * Defines the size of the component.
+     * @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
+     */
+    _isBusy: boolean;
+    _keydownHandler: (e: KeyboardEvent) => void;
+    _preventEventHandler: (e: KeyboardEvent) => void;
+    _busyTimeoutId?: Timeout;
+    focusForward?: boolean;
+    static i18nBundle: I18nBundle;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    get ariaTitle(): string;
+    get labelId(): string | undefined;
+    get textPosition(): {
+        top: boolean | "" | undefined;
+        bottom: boolean | "" | undefined;
+    };
+    get hasContent(): boolean;
+    onBeforeRendering(): void;
+    _handleKeydown(e: KeyboardEvent): void;
+    _preventEvent(e: KeyboardEvent): void;
+    /**
+     * Moves the focus to busy area when coming with SHIFT + TAB
+     */
+    _redirectFocus(e: FocusEvent): void;
+}
+export default BusyIndicator;

package/dist/BusyIndicator.js

@@ -0,0 +1,207 @@
+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;
+};
+var BusyIndicator_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop, } from "@ui5/webcomponents-base/dist/Device.js";
+import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
+import BusyIndicatorTextPlacement from "./types/BusyIndicatorTextPlacement.js";
+// Template
+import BusyIndicatorTemplate from "./BusyIndicatorTemplate.js";
+import { BUSY_INDICATOR_TITLE } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import busyIndicatorCss from "./generated/themes/BusyIndicator.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * 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.
+ *
+ * ### 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.
+ *
+ * In order to show busy state over an HTML element, simply nest the HTML element in a `ui5-busy-indicator` instance.
+ *
+ * **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.
+ *
+ * #### When to use:
+ *
+ * - 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
+ * @slot {Array<Node>} default - Determines the content over which the component will appear.
+ * @since 0.12.0
+ */
+let BusyIndicator = BusyIndicator_1 = class BusyIndicator extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines the size of the component.
+         * @default "M"
+         * @public
+         */
+        this.size = "M";
+        /**
+         * Defines if the busy indicator is visible on the screen. By default it is not.
+         * @default false
+         * @public
+         */
+        this.active = false;
+        /**
+         * Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.
+         * @default 1000
+         * @public
+         */
+        this.delay = 1000;
+        /**
+         * Defines the placement of the text.
+         *
+         * @default "Bottom"
+         * @public
+         */
+        this.textPlacement = "Bottom";
+        /**
+         * Defines if the component is currently in busy state.
+         * @private
+         */
+        this._isBusy = false;
+        this._keydownHandler = this._handleKeydown.bind(this);
+        this._preventEventHandler = this._preventEvent.bind(this);
+    }
+    onEnterDOM() {
+        this.addEventListener("keydown", this._keydownHandler, {
+            capture: true,
+        });
+        this.addEventListener("keyup", this._preventEventHandler, {
+            capture: true,
+        });
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    onExitDOM() {
+        if (this._busyTimeoutId) {
+            clearTimeout(this._busyTimeoutId);
+            delete this._busyTimeoutId;
+        }
+        this.removeEventListener("keydown", this._keydownHandler, true);
+        this.removeEventListener("keyup", this._preventEventHandler, true);
+    }
+    get ariaTitle() {
+        return BusyIndicator_1.i18nBundle.getText(BUSY_INDICATOR_TITLE);
+    }
+    get labelId() {
+        return this.text ? `${this._id}-label` : undefined;
+    }
+    get textPosition() {
+        return {
+            top: this.text && this.textPlacement === BusyIndicatorTextPlacement.Top,
+            bottom: this.text && this.textPlacement === BusyIndicatorTextPlacement.Bottom,
+        };
+    }
+    get hasContent() {
+        return willShowContent(Array.from(this.children));
+    }
+    onBeforeRendering() {
+        if (this.active) {
+            if (!this._isBusy && !this._busyTimeoutId) {
+                this._busyTimeoutId = setTimeout(() => {
+                    delete this._busyTimeoutId;
+                    this._isBusy = true;
+                }, Math.max(0, this.delay));
+            }
+        }
+        else {
+            if (this._busyTimeoutId) {
+                clearTimeout(this._busyTimeoutId);
+                delete this._busyTimeoutId;
+            }
+            this._isBusy = false;
+        }
+    }
+    _handleKeydown(e) {
+        if (!this._isBusy) {
+            return;
+        }
+        e.stopImmediatePropagation();
+        // move the focus to the last element in this DOM and let TAB continue to the next focusable element
+        if (isTabNext(e)) {
+            this.focusForward = true;
+            this.shadowRoot.querySelector("[data-ui5-focus-redirect]").focus();
+            this.focusForward = false;
+        }
+    }
+    _preventEvent(e) {
+        if (this._isBusy) {
+            e.stopImmediatePropagation();
+        }
+    }
+    /**
+     * Moves the focus to busy area when coming with SHIFT + TAB
+     */
+    _redirectFocus(e) {
+        if (this.focusForward) {
+            return;
+        }
+        e.preventDefault();
+        this.shadowRoot.querySelector(".ui5-busy-indicator-busy-area").focus();
+    }
+};
+__decorate([
+    property()
+], BusyIndicator.prototype, "text", void 0);
+__decorate([
+    property()
+], BusyIndicator.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], BusyIndicator.prototype, "active", void 0);
+__decorate([
+    property({ type: Number })
+], BusyIndicator.prototype, "delay", void 0);
+__decorate([
+    property()
+], BusyIndicator.prototype, "textPlacement", void 0);
+__decorate([
+    property({ type: Boolean })
+], BusyIndicator.prototype, "_isBusy", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], BusyIndicator, "i18nBundle", void 0);
+BusyIndicator = BusyIndicator_1 = __decorate([
+    customElement({
+        tag: "ui5-busy-indicator",
+        languageAware: true,
+        styles: busyIndicatorCss,
+        renderer: jsxRenderer,
+        template: BusyIndicatorTemplate,
+    })
+], BusyIndicator);
+BusyIndicator.define();
+export default BusyIndicator;
+//# sourceMappingURL=BusyIndicator.js.map

package/dist/BusyIndicator.js.map

@@ -0,0 +1 @@
+{"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 i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isTabNext } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type { Timeout } from \"@ui5/webcomponents-base/dist/types.js\";\nimport {\n\tisDesktop,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport willShowContent from \"@ui5/webcomponents-base/dist/util/willShowContent.js\";\nimport type BusyIndicatorSize from \"./types/BusyIndicatorSize.js\";\nimport BusyIndicatorTextPlacement from \"./types/BusyIndicatorTextPlacement.js\";\n\n// Template\nimport BusyIndicatorTemplate from \"./BusyIndicatorTemplate.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: jsxRenderer,\n\ttemplate: BusyIndicatorTemplate,\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 undefined\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()\n\tsize: `${BusyIndicatorSize}` = \"M\";\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 = false;\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({ type: Number })\n\tdelay = 1000;\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()\n\ttextPlacement: `${BusyIndicatorTextPlacement}` = \"Bottom\";\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 = false;\n\n\t_keydownHandler: (e: KeyboardEvent) => void;\n\t_preventEventHandler: (e: KeyboardEvent) => void;\n\t_busyTimeoutId?: Timeout;\n\tfocusForward?: boolean;\n\n\t@i18n(\"@ui5/webcomponents\")\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\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 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\tget hasContent() {\n\t\treturn willShowContent(Array.from(this.children));\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/BusyIndicatorTemplate.d.ts

@@ -0,0 +1,2 @@
+import type BusyIndicator from "./BusyIndicator.js";
+export default function BusyIndicatorTemplate(this: BusyIndicator): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/BusyIndicatorTemplate.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Label from "./Label.js";
+export default function BusyIndicatorTemplate() {
+    return (_jsxs("div", { class: "ui5-busy-indicator-root", children: [this._isBusy && (_jsxs("div", { class: {
+                    "ui5-busy-indicator-busy-area": true,
+                    "ui5-busy-indicator-busy-area-over-content": this.hasContent,
+                }, title: this.ariaTitle, tabindex: 0, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuetext": "Busy", "aria-labelledby": this.labelId, "data-sap-focus-ref": true, children: [this.textPosition.top && BusyIndicatorBusyText.call(this), _jsxs("div", { class: "ui5-busy-indicator-circles-wrapper", children: [_jsx("div", { class: "ui5-busy-indicator-circle circle-animation-0" }), _jsx("div", { class: "ui5-busy-indicator-circle circle-animation-1" }), _jsx("div", { class: "ui5-busy-indicator-circle circle-animation-2" })] }), this.textPosition.bottom && BusyIndicatorBusyText.call(this)] })), _jsx("slot", {}), this._isBusy && (_jsx("span", { "data-ui5-focus-redirect": true, tabindex: 0, role: "none", onFocusIn: this._redirectFocus }))] }));
+}
+function BusyIndicatorBusyText() {
+    return (_jsx(_Fragment, { children: this.text && (_jsx(Label, { id: `${this._id}-label`, class: "ui5-busy-indicator-text", children: this.text })) }));
+}
+//# sourceMappingURL=BusyIndicatorTemplate.js.map

package/dist/BusyIndicatorTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BusyIndicatorTemplate.js","sourceRoot":"","sources":["../src/BusyIndicatorTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,OAAO,CACN,eAAK,KAAK,EAAC,yBAAyB,aAClC,IAAI,CAAC,OAAO,IAAI,CAChB,eACC,KAAK,EAAE;oBACN,8BAA8B,EAAE,IAAI;oBACpC,2CAA2C,EAAE,IAAI,CAAC,UAAU;iBAC5D,EACD,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,aAAa,mBACH,CAAC,mBACD,GAAG,oBACH,MAAM,qBACJ,IAAI,CAAC,OAAO,yCAG5B,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1D,eAAK,KAAK,EAAC,oCAAoC,aAC9C,cAAK,KAAK,EAAC,8CAA8C,GAAO,EAChE,cAAK,KAAK,EAAC,8CAA8C,GAAO,EAChE,cAAK,KAAK,EAAC,8CAA8C,GAAO,IAC3D,EACL,IAAI,CAAC,YAAY,CAAC,MAAM,IAAI,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,IACxD,CACN,EACD,gBAAa,EACZ,IAAI,CAAC,OAAO,IAAI,CAChB,gDAEC,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,IAAI,CAAC,cAAc,GACvB,CACR,IACI,CACN,CAAC;AACH,CAAC;AAED,SAAS,qBAAqB;IAC7B,OAAO,CAAC,4BACN,IAAI,CAAC,IAAI,IAAI,CACb,KAAC,KAAK,IACL,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EACvB,KAAK,EAAC,yBAAyB,YAE9B,IAAI,CAAC,IAAI,GACH,CACR,GACC,CAAC,CAAC;AACN,CAAC","sourcesContent":["import type BusyIndicator from \"./BusyIndicator.js\";\nimport Label from \"./Label.js\";\n\nexport default function BusyIndicatorTemplate(this: BusyIndicator) {\n\treturn (\n\t\t<div class=\"ui5-busy-indicator-root\">\n\t\t\t{this._isBusy && (\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-busy-indicator-busy-area\": true,\n\t\t\t\t\t\t\"ui5-busy-indicator-busy-area-over-content\": this.hasContent,\n\t\t\t\t\t}}\n\t\t\t\t\ttitle={this.ariaTitle}\n\t\t\t\t\ttabindex={0}\n\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\taria-valuemin={0}\n\t\t\t\t\taria-valuemax={100}\n\t\t\t\t\taria-valuetext=\"Busy\"\n\t\t\t\t\taria-labelledby={this.labelId}\n\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t>\n\t\t\t\t\t{this.textPosition.top && BusyIndicatorBusyText.call(this)}\n\t\t\t\t\t<div class=\"ui5-busy-indicator-circles-wrapper\">\n\t\t\t\t\t\t<div class=\"ui5-busy-indicator-circle circle-animation-0\"></div>\n\t\t\t\t\t\t<div class=\"ui5-busy-indicator-circle circle-animation-1\"></div>\n\t\t\t\t\t\t<div class=\"ui5-busy-indicator-circle circle-animation-2\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.textPosition.bottom && BusyIndicatorBusyText.call(this)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<slot></slot>\n\t\t\t{this._isBusy && (\n\t\t\t\t<span\n\t\t\t\t\tdata-ui5-focus-redirect\n\t\t\t\t\ttabindex={0}\n\t\t\t\t\trole=\"none\"\n\t\t\t\t\tonFocusIn={this._redirectFocus}\n\t\t\t\t></span>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction BusyIndicatorBusyText(this: BusyIndicator) {\n\treturn (<>\n\t\t{this.text && (\n\t\t\t<Label\n\t\t\t\tid={`${this._id}-label`}\n\t\t\t\tclass=\"ui5-busy-indicator-text\"\n\t\t\t>\n\t\t\t\t{this.text}\n\t\t\t</Label>\n\t\t)}\n\t</>);\n}\n"]}