@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/DynamicDateRangeTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicDateRangeTemplate.js","sourceRoot":"","sources":["../src/DynamicDateRangeTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,MAAM,oCAAoC,CAAC;AAC/E,OAAO,+BAA+B,MAAM,sCAAsC,CAAC;AAInF,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO;QACN,6BAA6B,CAAC,IAAI,CAAC,IAAI,CAAC;QACxC,+BAA+B,CAAC,IAAI,CAAC,IAAI,CAAC;KAC1C,CAAC;AACH,CAAC","sourcesContent":["import DynamicDateRangeInputTemplate from \"./DynamicDateRangeInputTemplate.js\";\nimport DynamicDateRangePopoverTemplate from \"./DynamicDateRangePopoverTemplate.js\";\n\nimport type DynamicDateRange from \"./DynamicDateRange.js\";\n\nexport default function DynamicDateRangeTemplate(this: DynamicDateRange) {\n\treturn [\n\t\tDynamicDateRangeInputTemplate.call(this),\n\t\tDynamicDateRangePopoverTemplate.call(this),\n\t];\n}\n"]}

package/dist/ExpandableText.d.ts

@@ -0,0 +1,78 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
+import type { LinkAccessibilityAttributes } from "./Link.js";
+import ExpandableTextOverflowMode from "./types/ExpandableTextOverflowMode.js";
+import type Button from "./Button.js";
+import type TextEmptyIndicatorMode from "./types/TextEmptyIndicatorMode.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-expandable-text` component allows displaying a large body of text in a small space. It provides an "expand/collapse" functionality, which shows/hides potentially truncated text.
+ *
+ * ### Usage
+ *
+ * #### When to use:
+ * - To accommodate long texts in limited space, for example in list items, table cell texts, or forms
+ *
+ * #### When not to use:
+ * - The content is critical for the user. In this case use short descriptions that can fit in
+ * - Strive to provide short and meaningful texts to avoid excessive number of "Show More" links on the page
+ *
+ * ### Responsive Behavior
+ *
+ * On phones, if the component is configured to display the full text in a popover, the popover will appear in full screen.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/ExpandableText";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.6.0
+ */
+declare class ExpandableText extends UI5Element {
+    /**
+     * Text of the component.
+     *
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the "More" link will be displayed.
+     * @default 100
+     * @public
+     */
+    maxCharacters: number;
+    /**
+     * Determines how the full text will be displayed.
+     * @default "InPlace"
+     * @public
+     */
+    overflowMode: `${ExpandableTextOverflowMode}`;
+    /**
+     * Specifies if an empty indicator should be displayed when there is no text.
+     * @default "Off"
+     * @public
+     */
+    emptyIndicatorMode: `${TextEmptyIndicatorMode}`;
+    _expanded: boolean;
+    static i18nBundle: I18nBundle;
+    getFocusDomRef(): HTMLElement | undefined;
+    get _displayedText(): string | undefined;
+    get _maxCharactersExceeded(): boolean;
+    get _usePopover(): boolean;
+    get _ellipsisText(): " " | "... ";
+    get _textForToggle(): string;
+    get _closeButtonText(): string;
+    get _accessibilityAttributesForToggle(): LinkAccessibilityAttributes;
+    get _accessibleNameForToggle(): string | undefined;
+    _handlePopoverClose(): void;
+    _handleToggleClick(): void;
+    _handleCloseButtonClick(e: UI5CustomEvent<Button, "click">): void;
+}
+export default ExpandableText;

package/dist/ExpandableText.js

@@ -0,0 +1,160 @@
+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 ExpandableText_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 jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import ExpandableTextOverflowMode from "./types/ExpandableTextOverflowMode.js";
+import { EXPANDABLE_TEXT_SHOW_LESS, EXPANDABLE_TEXT_SHOW_MORE, EXPANDABLE_TEXT_CLOSE, EXPANDABLE_TEXT_SHOW_LESS_POPOVER_ARIA_LABEL, EXPANDABLE_TEXT_SHOW_MORE_POPOVER_ARIA_LABEL, } from "./generated/i18n/i18n-defaults.js";
+// Template
+import ExpandableTextTemplate from "./ExpandableTextTemplate.js";
+// Styles
+import ExpandableTextCss from "./generated/themes/ExpandableText.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-expandable-text` component allows displaying a large body of text in a small space. It provides an "expand/collapse" functionality, which shows/hides potentially truncated text.
+ *
+ * ### Usage
+ *
+ * #### When to use:
+ * - To accommodate long texts in limited space, for example in list items, table cell texts, or forms
+ *
+ * #### When not to use:
+ * - The content is critical for the user. In this case use short descriptions that can fit in
+ * - Strive to provide short and meaningful texts to avoid excessive number of "Show More" links on the page
+ *
+ * ### Responsive Behavior
+ *
+ * On phones, if the component is configured to display the full text in a popover, the popover will appear in full screen.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/ExpandableText";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.6.0
+ */
+let ExpandableText = ExpandableText_1 = class ExpandableText extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the "More" link will be displayed.
+         * @default 100
+         * @public
+         */
+        this.maxCharacters = 100;
+        /**
+         * Determines how the full text will be displayed.
+         * @default "InPlace"
+         * @public
+         */
+        this.overflowMode = "InPlace";
+        /**
+         * Specifies if an empty indicator should be displayed when there is no text.
+         * @default "Off"
+         * @public
+         */
+        this.emptyIndicatorMode = "Off";
+        this._expanded = false;
+    }
+    getFocusDomRef() {
+        if (this._usePopover) {
+            return this.shadowRoot?.querySelector("[ui5-responsive-popover]");
+        }
+        return this.shadowRoot?.querySelector("[ui5-link]");
+    }
+    get _displayedText() {
+        if (this._expanded && !this._usePopover) {
+            return this.text;
+        }
+        return this.text?.substring(0, this.maxCharacters);
+    }
+    get _maxCharactersExceeded() {
+        return (this.text?.length || 0) > this.maxCharacters;
+    }
+    get _usePopover() {
+        return this.overflowMode === ExpandableTextOverflowMode.Popover;
+    }
+    get _ellipsisText() {
+        if (this._expanded && !this._usePopover) {
+            return " ";
+        }
+        return "... ";
+    }
+    get _textForToggle() {
+        return this._expanded ? ExpandableText_1.i18nBundle.getText(EXPANDABLE_TEXT_SHOW_LESS) : ExpandableText_1.i18nBundle.getText(EXPANDABLE_TEXT_SHOW_MORE);
+    }
+    get _closeButtonText() {
+        return ExpandableText_1.i18nBundle.getText(EXPANDABLE_TEXT_CLOSE);
+    }
+    get _accessibilityAttributesForToggle() {
+        if (this._usePopover) {
+            return {
+                expanded: this._expanded,
+                hasPopup: "dialog",
+            };
+        }
+        return {
+            expanded: this._expanded,
+        };
+    }
+    get _accessibleNameForToggle() {
+        if (this._usePopover) {
+            return this._expanded ? ExpandableText_1.i18nBundle.getText(EXPANDABLE_TEXT_SHOW_LESS_POPOVER_ARIA_LABEL) : ExpandableText_1.i18nBundle.getText(EXPANDABLE_TEXT_SHOW_MORE_POPOVER_ARIA_LABEL);
+        }
+        return undefined;
+    }
+    _handlePopoverClose() {
+        if (!isPhone()) {
+            this._expanded = false;
+        }
+    }
+    _handleToggleClick() {
+        this._expanded = !this._expanded;
+    }
+    _handleCloseButtonClick(e) {
+        this._expanded = false;
+        e.stopPropagation();
+    }
+};
+__decorate([
+    property()
+], ExpandableText.prototype, "text", void 0);
+__decorate([
+    property({ type: Number })
+], ExpandableText.prototype, "maxCharacters", void 0);
+__decorate([
+    property()
+], ExpandableText.prototype, "overflowMode", void 0);
+__decorate([
+    property()
+], ExpandableText.prototype, "emptyIndicatorMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExpandableText.prototype, "_expanded", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], ExpandableText, "i18nBundle", void 0);
+ExpandableText = ExpandableText_1 = __decorate([
+    customElement({
+        tag: "ui5-expandable-text",
+        renderer: jsxRender,
+        styles: ExpandableTextCss,
+        template: ExpandableTextTemplate,
+    })
+], ExpandableText);
+ExpandableText.define();
+export default ExpandableText;
+//# sourceMappingURL=ExpandableText.js.map

package/dist/ExpandableText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableText.js","sourceRoot":"","sources":["../src/ExpandableText.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 jsxRender from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport type { LinkAccessibilityAttributes } from \"./Link.js\";\nimport ExpandableTextOverflowMode from \"./types/ExpandableTextOverflowMode.js\";\nimport type Button from \"./Button.js\";\nimport type TextEmptyIndicatorMode from \"./types/TextEmptyIndicatorMode.js\";\nimport {\n\tEXPANDABLE_TEXT_SHOW_LESS,\n\tEXPANDABLE_TEXT_SHOW_MORE,\n\tEXPANDABLE_TEXT_CLOSE,\n\tEXPANDABLE_TEXT_SHOW_LESS_POPOVER_ARIA_LABEL,\n\tEXPANDABLE_TEXT_SHOW_MORE_POPOVER_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport ExpandableTextTemplate from \"./ExpandableTextTemplate.js\";\n\n// Styles\nimport ExpandableTextCss from \"./generated/themes/ExpandableText.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-expandable-text` component allows displaying a large body of text in a small space. It provides an \"expand/collapse\" functionality, which shows/hides potentially truncated text.\n *\n * ### Usage\n *\n * #### When to use:\n * - To accommodate long texts in limited space, for example in list items, table cell texts, or forms\n *\n * #### When not to use:\n * - The content is critical for the user. In this case use short descriptions that can fit in\n * - Strive to provide short and meaningful texts to avoid excessive number of \"Show More\" links on the page\n *\n * ### Responsive Behavior\n *\n * On phones, if the component is configured to display the full text in a popover, the popover will appear in full screen.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/ExpandableText\";`\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.6.0\n */\n@customElement({\n\ttag: \"ui5-expandable-text\",\n\trenderer: jsxRender,\n\tstyles: ExpandableTextCss,\n\ttemplate: ExpandableTextTemplate,\n})\nclass ExpandableText extends UI5Element {\n\t/**\n\t * Text of the component.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the \"More\" link will be displayed.\n\t * @default 100\n\t * @public\n\t */\n\t@property({ type: Number })\n\tmaxCharacters = 100;\n\n\t/**\n\t * Determines how the full text will be displayed.\n\t * @default \"InPlace\"\n\t * @public\n\t */\n\t@property()\n\toverflowMode: `${ExpandableTextOverflowMode}` = \"InPlace\"\n\n\t/**\n\t * Specifies if an empty indicator should be displayed when there is no text.\n\t * @default \"Off\"\n\t * @public\n\t */\n\t@property()\n\temptyIndicatorMode: `${TextEmptyIndicatorMode}` = \"Off\";\n\n\t@property({ type: Boolean })\n\t_expanded = false;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tgetFocusDomRef(): HTMLElement | undefined {\n\t\tif (this._usePopover) {\n\t\t\treturn this.shadowRoot?.querySelector(\"[ui5-responsive-popover]\") as HTMLElement;\n\t\t}\n\n\t\treturn this.shadowRoot?.querySelector(\"[ui5-link]\") as HTMLElement;\n\t}\n\n\tget _displayedText() {\n\t\tif (this._expanded && !this._usePopover) {\n\t\t\treturn this.text;\n\t\t}\n\n\t\treturn this.text?.substring(0, this.maxCharacters);\n\t}\n\n\tget _maxCharactersExceeded() {\n\t\treturn (this.text?.length || 0) > this.maxCharacters;\n\t}\n\n\tget _usePopover() {\n\t\treturn this.overflowMode === ExpandableTextOverflowMode.Popover;\n\t}\n\n\tget _ellipsisText() {\n\t\tif (this._expanded && !this._usePopover) {\n\t\t\treturn \" \";\n\t\t}\n\n\t\treturn \"... \";\n\t}\n\n\tget _textForToggle() {\n\t\treturn this._expanded ? ExpandableText.i18nBundle.getText(EXPANDABLE_TEXT_SHOW_LESS) : ExpandableText.i18nBundle.getText(EXPANDABLE_TEXT_SHOW_MORE);\n\t}\n\n\tget _closeButtonText() {\n\t\treturn ExpandableText.i18nBundle.getText(EXPANDABLE_TEXT_CLOSE);\n\t}\n\n\tget _accessibilityAttributesForToggle(): LinkAccessibilityAttributes {\n\t\tif (this._usePopover) {\n\t\t\treturn {\n\t\t\t\texpanded: this._expanded,\n\t\t\t\thasPopup: \"dialog\",\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\texpanded: this._expanded,\n\t\t};\n\t}\n\n\tget _accessibleNameForToggle() {\n\t\tif (this._usePopover) {\n\t\t\treturn this._expanded ? ExpandableText.i18nBundle.getText(EXPANDABLE_TEXT_SHOW_LESS_POPOVER_ARIA_LABEL) : ExpandableText.i18nBundle.getText(EXPANDABLE_TEXT_SHOW_MORE_POPOVER_ARIA_LABEL);\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\t_handlePopoverClose() {\n\t\tif (!isPhone()) {\n\t\t\tthis._expanded = false;\n\t\t}\n\t}\n\n\t_handleToggleClick() {\n\t\tthis._expanded = !this._expanded;\n\t}\n\n\t_handleCloseButtonClick(e: UI5CustomEvent<Button, \"click\">) {\n\t\tthis._expanded = false;\n\t\te.stopPropagation();\n\t}\n}\n\nExpandableText.define();\n\nexport default ExpandableText;\n"]}

package/dist/ExpandableTextTemplate.d.ts

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

package/dist/ExpandableTextTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Text from "./Text.js";
+import Link from "./Link.js";
+import Button from "./Button.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+export default function ExpandableTextTemplate() {
+    return (_jsxs("div", { children: [_jsx(Text, { class: "ui5-exp-text-text", emptyIndicatorMode: this.emptyIndicatorMode, children: this._displayedText }), this._maxCharactersExceeded && _jsxs(_Fragment, { children: [_jsx("span", { class: "ui5-exp-text-ellipsis", children: this._ellipsisText }), _jsx(Link, { id: "toggle", class: "ui5-exp-text-toggle", accessibleRole: "Button", accessibleName: this._accessibleNameForToggle, accessibilityAttributes: this._accessibilityAttributesForToggle, onClick: this._handleToggleClick, children: this._textForToggle }), this._usePopover &&
+                        _jsxs(ResponsivePopover, { open: this._expanded, opener: "toggle", accessibleNameRef: "popover-text", contentOnlyOnDesktop: true, _hideHeader: true, class: "ui5-exp-text-popover", onClose: this._handlePopoverClose, children: [_jsx(Text, { id: "popover-text", children: this.text }), _jsx("div", { slot: "footer", class: "ui5-exp-text-footer", children: _jsx(Button, { design: "Transparent", onClick: this._handleCloseButtonClick, children: this._closeButtonText }) })] })] })] }));
+}
+//# sourceMappingURL=ExpandableTextTemplate.js.map

package/dist/ExpandableTextTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableTextTemplate.js","sourceRoot":"","sources":["../src/ExpandableTextTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,sBAAsB;IAC7C,OAAO,CACN,0BACC,KAAC,IAAI,IACJ,KAAK,EAAC,mBAAmB,EACzB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,YAE1C,IAAI,CAAC,cAAc,GACd,EAEN,IAAI,CAAC,sBAAsB,IAAI,8BAC/B,eAAM,KAAK,EAAC,uBAAuB,YAAE,IAAI,CAAC,aAAa,GAAQ,EAC/D,KAAC,IAAI,IACJ,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,qBAAqB,EAC3B,cAAc,EAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,wBAAwB,EAC7C,uBAAuB,EAAE,IAAI,CAAC,iCAAiC,EAC/D,OAAO,EAAE,IAAI,CAAC,kBAAkB,YAE/B,IAAI,CAAC,cAAc,GACd,EAEN,IAAI,CAAC,WAAW;wBAChB,MAAC,iBAAiB,IACjB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,MAAM,EAAC,QAAQ,EACf,iBAAiB,EAAC,cAAc,EAChC,oBAAoB,EAAE,IAAI,EAC1B,WAAW,EAAE,IAAI,EACjB,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,mBAAmB,aAEjC,KAAC,IAAI,IAAC,EAAE,EAAC,cAAc,YAAE,IAAI,CAAC,IAAI,GAAQ,EAC1C,cACC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,qBAAqB,YAE3B,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,uBAAuB,YAEpC,IAAI,CAAC,gBAAgB,GACd,GACJ,IACa,IAEnB,IAEE,CACN,CAAC;AACH,CAAC","sourcesContent":["import type ExpandableText from \"./ExpandableText.js\";\nimport Text from \"./Text.js\";\nimport Link from \"./Link.js\";\nimport Button from \"./Button.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\n\nexport default function ExpandableTextTemplate(this: ExpandableText) {\n\treturn (\n\t\t<div>\n\t\t\t<Text\n\t\t\t\tclass=\"ui5-exp-text-text\"\n\t\t\t\temptyIndicatorMode={this.emptyIndicatorMode}\n\t\t\t>\n\t\t\t\t{this._displayedText}\n\t\t\t</Text>\n\n\t\t\t{this._maxCharactersExceeded && <>\n\t\t\t\t<span class=\"ui5-exp-text-ellipsis\">{this._ellipsisText}</span>\n\t\t\t\t<Link\n\t\t\t\t\tid=\"toggle\"\n\t\t\t\t\tclass=\"ui5-exp-text-toggle\"\n\t\t\t\t\taccessibleRole=\"Button\"\n\t\t\t\t\taccessibleName={this._accessibleNameForToggle}\n\t\t\t\t\taccessibilityAttributes={this._accessibilityAttributesForToggle}\n\t\t\t\t\tonClick={this._handleToggleClick}\n\t\t\t\t>\n\t\t\t\t\t{this._textForToggle}\n\t\t\t\t</Link>\n\n\t\t\t\t{this._usePopover &&\n\t\t\t\t\t<ResponsivePopover\n\t\t\t\t\t\topen={this._expanded}\n\t\t\t\t\t\topener=\"toggle\"\n\t\t\t\t\t\taccessibleNameRef=\"popover-text\"\n\t\t\t\t\t\tcontentOnlyOnDesktop={true}\n\t\t\t\t\t\t_hideHeader={true}\n\t\t\t\t\t\tclass=\"ui5-exp-text-popover\"\n\t\t\t\t\t\tonClose={this._handlePopoverClose}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Text id=\"popover-text\">{this.text}</Text>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tslot=\"footer\"\n\t\t\t\t\t\t\tclass=\"ui5-exp-text-footer\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\tonClick={this._handleCloseButtonClick}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this._closeButtonText}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ResponsivePopover>\n\t\t\t\t}\n\t\t\t</>\n\t\t\t}\n\t\t</div>\n\t);\n}\n"]}

package/dist/FileUploader.d.ts

@@ -1,9 +1,17 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import Input from "./Input.js";
-import Popover from "./Popover.js";
-import type { IFormElement } from "./features/InputElementsFormSupport.js";
+import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
+import type { InputAccInfo } from "./Input.js";
+import type Popover from "./Popover.js";
+import type Tokenizer from "./Tokenizer.js";
+type FileData = {
+    fileName: string;
+    fileSize: number;
+};
+type FileUploaderFileSizeExceedEventDetail = {
+    filesData: Array<FileData>;
+};
 type FileUploaderChangeEventDetail = {
     files: FileList | null;
 };
@@ -31,17 +39,23 @@ type FileUploaderChangeEventDetail = {
  * @extends UI5Element
  * @public
  */
-declare class FileUploader extends UI5Element implements IFormElement {
+declare class FileUploader extends UI5Element implements IFormInputElement {
+    eventDetails: {
+        "change": FileUploaderChangeEventDetail;
+        "file-size-exceed": FileUploaderFileSizeExceedEventDetail;
+    };
     /**
      * Comma-separated list of file types that the component should accept.
      *
      * **Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.
-     * @default ""
+     * @default undefined
      * @public
      */
-    accept: string;
+    accept?: string;
     /**
      * If set to "true", the input field of component will not be rendered. Only the default slot that is passed will be rendered.
+     *
+     * **Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.
      * @default false
      * @public
      */
@@ -61,24 +75,19 @@ declare class FileUploader extends UI5Element implements IFormElement {
      */
     multiple: boolean;
     /**
-     * Determines the name with which the component will be submitted in an HTML form.
-     *
-     * **Important:** For the `name` property to have effect, you must add the following import to your project:
-     * `import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`
+     * Determines the name by which the component will be identified upon submission in an HTML form.
      *
-     * **Note:** When set, a native `input` HTML element
-     * will be created inside the component so that it can be submitted as
-     * part of an HTML form. Do not use this property unless you need to submit a form.
-     * @default ""
+     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * @default undefined
      * @public
      */
-    name: string;
+    name?: string;
     /**
      * Defines a short hint intended to aid the user with data entry when the component has no value.
-     * @default ""
+     * @default undefined
      * @public
      */
-    placeholder: string;
+    placeholder?: string;
     /**
      * Defines the name/names of the file/files to upload.
      * @default ""
@@ -87,21 +96,51 @@ declare class FileUploader extends UI5Element implements IFormElement {
      * @public
      */
     value: string;
+    /**
+     * Defines the maximum file size in megabytes which prevents the upload if at least one file exceeds it.
+     * @default undefined
+     * @since 2.2.0
+     * @public
+     */
+    maxFileSize?: number;
     /**
      * Defines the value state of the component.
      * @default "None"
      * @public
      */
     valueState: `${ValueState}`;
+    /**
+     * Defines whether the component is required.
+     * @default false
+     * @public
+     * @since 2.13.0
+     */
+    required: boolean;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @default undefined
+     * @public
+     * @since 2.13.0
+     */
+    accessibleName?: string;
+    /**
+     * Receives id(or many ids) of the elements that label the input.
+     * @default undefined
+     * @public
+     * @since 2.13.0
+     */
+    accessibleNameRef?: string;
     /**
      * @private
      */
     focused: boolean;
     /**
-     * By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.
+     * This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.
      *
-     * **Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.
-     * Also it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.
+     * **Note:** For best accessibility experience, set a `tabindex` of "-1" on your interactive element, or it will be set automatically.
+     * This slot is intended for use cases where you want a button-only file uploader.
+     * It is recommended to set `hideInput` property to "true" when using this slot.
+     * Not setting `hideInput` may negatively impact the screen reader users.
      * @public
      */
     content: Array<HTMLElement>;
@@ -111,84 +150,83 @@ declare class FileUploader extends UI5Element implements IFormElement {
      * **Note:** If not specified, a default text (in the respective language) will be displayed.
      *
      * **Note:** The `valueStateMessage` would be displayed,
-     * when the component is in `Information`, `Warning` or `Error` value state.
+     * when the component is in `Information`, `Critical` or `Negative` value state.
      * @since 1.0.0-rc.9
      * @public
      */
     valueStateMessage: Array<HTMLElement>;
-    /**
-     * The slot is used to render native `input` HTML element within Light DOM to enable form submit,
-     * when `name` property is set.
-     * @private
-     */
-    formSupport: Array<HTMLElement>;
-    _internals: ElementInternals;
+    _form: HTMLFormElement;
+    _input: HTMLInputElement;
+    _tokenizer: Tokenizer;
+    _messagePopover: Popover;
+    _selectedFilesNames: Array<string>;
+    _tokenizerOpen: boolean;
     static emptyInput: HTMLInputElement;
     static i18nBundle: I18nBundle;
-    static get formAssociated(): boolean;
-    constructor();
-    _onmouseover(): void;
-    _onmouseout(): void;
-    _onclick(e: MouseEvent): void;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    /**
+     * @override
+     */
+    getFocusDomRef(): HTMLElement | undefined;
+    get formFormattedValue(): FormData | null;
+    _onclick(): void;
+    _onNativeInputClick(e: MouseEvent): void;
+    _onmousedown(e: MouseEvent): void;
     _onkeydown(e: KeyboardEvent): void;
     _onkeyup(e: KeyboardEvent): void;
     _ondrag(e: DragEvent): void;
     _ondrop(e: DragEvent): void;
     _onfocusin(): void;
     _onfocusout(): void;
+    get _tokenizerExpanded(): boolean;
+    _onTokenizerKeyUp(e: KeyboardEvent): void;
+    _onTokenizerKeyDown(e: KeyboardEvent): void;
+    _onTokenizerClick(e: MouseEvent): void;
+    _onTokenizerMouseDown(e: MouseEvent): void;
+    _onClearIconClick(e: CustomEvent): void;
+    _onFormSubmit(e: SubmitEvent): void;
+    _openFileBrowser(): void;
+    _clearFileSelection(): void;
     /**
      * FileList of all selected files.
      * @public
      * @default null
      */
     get files(): FileList | null;
-    onBeforeRendering(): void;
     onAfterRendering(): void;
-    _enableFormSupport(): void;
+    get computedValue(): string;
+    get _formWidth(): number;
     _onChange(e: Event): void;
-    _updateValue(files: FileList | null): void;
-    _setFormValue(): void;
+    _fileNamesList(files: FileList): Array<string>;
+    /**
+     * Checks whether all files are below `maxFileSize` (if set),
+     * and fires a `file-size-exceed` event if any file exceeds it.
+     * @private
+     */
+    _validateFiles(changedFiles: FileList): FileList;
+    _getExceededFiles(files: FileList): Array<FileData>;
     toggleValueStatePopover(open: boolean): void;
-    openValueStatePopover(): Promise<void>;
-    closeValueStatePopover(): Promise<void>;
-    _getPopover(): Promise<Popover>;
+    openValueStatePopover(): void;
+    closeValueStatePopover(): void;
     /**
      * in case when the component is not placed in the DOM, return empty FileList, like native input would do
      * @private
      */
     static get _emptyFilesList(): FileList | null;
-    get browseText(): string;
-    get titleText(): string;
-    get _canUseNativeFormSupport(): boolean;
-    get _keepInputInShadowDOM(): boolean;
-    get _input(): HTMLInputElement;
+    get accInfo(): InputAccInfo;
+    get inputTitle(): string;
+    get valueHelpTitle(): string;
+    get clearIconTitle(): string;
+    get resolvedPlaceholder(): string;
     get valueStateTextMappings(): Record<string, string>;
     get valueStateText(): string;
     get hasValueState(): boolean;
-    get hasValueStateText(): boolean;
-    get valueStateMessageText(): Node[];
     get shouldDisplayDefaultValueStateMessage(): boolean;
     get shouldOpenValueStateMessagePopover(): boolean;
     /**
      * This method is relevant for sap_horizon theme only
      */
     get _valueStateMessageInputIcon(): string;
-    get classes(): {
-        popoverValueState: {
-            "ui5-valuestatemessage-root": boolean;
-            "ui5-valuestatemessage--success": boolean;
-            "ui5-valuestatemessage--error": boolean;
-            "ui5-valuestatemessage--warning": boolean;
-            "ui5-valuestatemessage--information": boolean;
-        };
-    };
-    get styles(): {
-        popoverHeader: {
-            width: string;
-        };
-    };
-    get ui5Input(): Input | null;
-    static onDefine(): Promise<void>;
 }
 export default FileUploader;
-export type { FileUploaderChangeEventDetail, };
+export type { FileData, FileUploaderChangeEventDetail, FileUploaderFileSizeExceedEventDetail, };