@ui5/webcomponents 0.0.0-037d08c67

package/dist/ProgressIndicator.d.ts

@@ -0,0 +1,76 @@
+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";
+/**
+ * @class
+ *
+ * ### Overview
+ * Shows the progress of a process in a graphical way. To indicate the progress,
+ * the inside of the component is filled with a color.
+ *
+ * ### Responsive Behavior
+ * You can change the size of the Progress Indicator by changing its `width` or `height` CSS properties.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/ProgressIndicator.js";`
+ * @csspart bar - Used to style the main bar of the `ui5-progress-indicator`
+ * @csspart remaining-bar - Used to style the remaining bar of the `ui5-progress-indicator`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 1.0.0-rc.8
+ */
+declare class ProgressIndicator extends UI5Element {
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @default undefined
+     * @public
+     * @since 1.16.0
+    */
+    accessibleName?: string;
+    /**
+     * Defines whether the component value is shown.
+     * @default false
+     * @public
+     */
+    hideValue: boolean;
+    /**
+     * Specifies the numerical value in percent for the length of the component.
+     *
+     * **Note:**
+     * If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.
+     * @default 0
+     * @public
+     */
+    value: number;
+    /**
+     * Specifies the text value to be displayed in the bar.
+     *
+     * **Note:**
+     *
+     * - If there is no value provided or the value is empty, the default percentage value is shown.
+     * - If `hideValue` property is `true` both the `displayValue` and `value` property values are not shown.
+     * @default undefined
+     * @public
+     */
+    displayValue?: string;
+    /**
+     * Defines the value state of the component.
+     * @default "None"
+     * @public
+     */
+    valueState: `${ValueState}`;
+    static i18nBundle: I18nBundle;
+    _previousValue: number;
+    _transitionDuration: number;
+    constructor();
+    onBeforeRendering(): void;
+    valueStateTextMappings(): Record<string, string>;
+    get validatedValue(): number;
+    get showValueInRemainingBar(): boolean;
+    get shouldAnimate(): boolean;
+    get valueStateText(): string;
+    get showIcon(): boolean;
+}
+export default ProgressIndicator;

package/dist/ProgressIndicator.js

@@ -0,0 +1,132 @@
+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 ProgressIndicator_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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, } from "./generated/i18n/i18n-defaults.js";
+// Template
+import ProgressIndicatorTemplate from "./ProgressIndicatorTemplate.js";
+// Styles
+import ProgressIndicatorCss from "./generated/themes/ProgressIndicator.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * Shows the progress of a process in a graphical way. To indicate the progress,
+ * the inside of the component is filled with a color.
+ *
+ * ### Responsive Behavior
+ * You can change the size of the Progress Indicator by changing its `width` or `height` CSS properties.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/ProgressIndicator.js";`
+ * @csspart bar - Used to style the main bar of the `ui5-progress-indicator`
+ * @csspart remaining-bar - Used to style the remaining bar of the `ui5-progress-indicator`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 1.0.0-rc.8
+ */
+let ProgressIndicator = ProgressIndicator_1 = class ProgressIndicator extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines whether the component value is shown.
+         * @default false
+         * @public
+         */
+        this.hideValue = false;
+        /**
+         * Specifies the numerical value in percent for the length of the component.
+         *
+         * **Note:**
+         * If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.
+         * @default 0
+         * @public
+         */
+        this.value = 0;
+        /**
+         * Defines the value state of the component.
+         * @default "None"
+         * @public
+         */
+        this.valueState = "None";
+        this._previousValue = 0;
+        this._transitionDuration = 0;
+    }
+    onBeforeRendering() {
+        this._transitionDuration = Math.abs(this._previousValue - this.validatedValue) * 20;
+        this._previousValue = this.validatedValue;
+    }
+    valueStateTextMappings() {
+        return {
+            "Negative": ProgressIndicator_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            "Critical": ProgressIndicator_1.i18nBundle.getText(VALUE_STATE_WARNING),
+            "Positive": ProgressIndicator_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+            "Information": ProgressIndicator_1.i18nBundle.getText(VALUE_STATE_INFORMATION),
+        };
+    }
+    get validatedValue() {
+        if (this.value < 0) {
+            return 0;
+        }
+        if (this.value > 100) {
+            return 100;
+        }
+        return this.value;
+    }
+    get showValueInRemainingBar() {
+        return this.value <= 50;
+    }
+    get shouldAnimate() {
+        return getAnimationMode() !== AnimationMode.None;
+    }
+    get valueStateText() {
+        const percentValue = `${this.validatedValue}%`;
+        const valueText = this.valueStateTextMappings()[this.valueState];
+        return valueText ? `${percentValue} ${valueText}` : percentValue;
+    }
+    get showIcon() {
+        return this.valueState !== ValueState.None;
+    }
+};
+__decorate([
+    property()
+], ProgressIndicator.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProgressIndicator.prototype, "hideValue", void 0);
+__decorate([
+    property({ type: Number })
+], ProgressIndicator.prototype, "value", void 0);
+__decorate([
+    property()
+], ProgressIndicator.prototype, "displayValue", void 0);
+__decorate([
+    property()
+], ProgressIndicator.prototype, "valueState", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], ProgressIndicator, "i18nBundle", void 0);
+ProgressIndicator = ProgressIndicator_1 = __decorate([
+    customElement({
+        tag: "ui5-progress-indicator",
+        renderer: jsxRenderer,
+        styles: ProgressIndicatorCss,
+        template: ProgressIndicatorTemplate,
+    })
+], ProgressIndicator);
+ProgressIndicator.define();
+export default ProgressIndicator;
+//# sourceMappingURL=ProgressIndicator.js.map

package/dist/ProgressIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressIndicator.js","sourceRoot":"","sources":["../src/ProgressIndicator.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 jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n\tVALUE_STATE_ERROR,\n\tVALUE_STATE_WARNING,\n\tVALUE_STATE_SUCCESS,\n\tVALUE_STATE_INFORMATION,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport ProgressIndicatorTemplate from \"./ProgressIndicatorTemplate.js\";\n\n// Styles\nimport ProgressIndicatorCss from \"./generated/themes/ProgressIndicator.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n * Shows the progress of a process in a graphical way. To indicate the progress,\n * the inside of the component is filled with a color.\n *\n * ### Responsive Behavior\n * You can change the size of the Progress Indicator by changing its `width` or `height` CSS properties.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/ProgressIndicator.js\";`\n * @csspart bar - Used to style the main bar of the `ui5-progress-indicator`\n * @csspart remaining-bar - Used to style the remaining bar of the `ui5-progress-indicator`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.8\n */\n@customElement({\n\ttag: \"ui5-progress-indicator\",\n\trenderer: jsxRenderer,\n\tstyles: ProgressIndicatorCss,\n\ttemplate: ProgressIndicatorTemplate,\n})\n\nclass ProgressIndicator extends UI5Element {\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.16.0\n\t*/\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines whether the component value is shown.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thideValue = false;\n\n\t/**\n\t * Specifies the numerical value in percent for the length of the component.\n\t *\n\t * **Note:**\n\t * If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.\n\t * @default 0\n\t * @public\n\t */\n\t@property({ type: Number })\n\tvalue = 0;\n\n\t/**\n\t * Specifies the text value to be displayed in the bar.\n\t *\n\t * **Note:**\n\t *\n\t * - If there is no value provided or the value is empty, the default percentage value is shown.\n\t * - If `hideValue` property is `true` both the `displayValue` and `value` property values are not shown.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tdisplayValue?: string;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tvalueState: `${ValueState}` = \"None\";\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\t_previousValue: number;\n\t_transitionDuration: number;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._previousValue = 0;\n\t\tthis._transitionDuration = 0;\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._transitionDuration = Math.abs(this._previousValue - this.validatedValue) * 20;\n\t\tthis._previousValue = this.validatedValue;\n\t}\n\n\tvalueStateTextMappings(): Record<string, string> {\n\t\treturn {\n\t\t\t\"Negative\": ProgressIndicator.i18nBundle.getText(VALUE_STATE_ERROR),\n\t\t\t\"Critical\": ProgressIndicator.i18nBundle.getText(VALUE_STATE_WARNING),\n\t\t\t\"Positive\": ProgressIndicator.i18nBundle.getText(VALUE_STATE_SUCCESS),\n\t\t\t\"Information\": ProgressIndicator.i18nBundle.getText(VALUE_STATE_INFORMATION),\n\t\t};\n\t}\n\n\tget validatedValue() {\n\t\tif (this.value < 0) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tif (this.value > 100) {\n\t\t\treturn 100;\n\t\t}\n\n\t\treturn this.value;\n\t}\n\n\tget showValueInRemainingBar() {\n\t\treturn this.value <= 50;\n\t}\n\n\tget shouldAnimate() {\n\t\treturn getAnimationMode() !== AnimationMode.None;\n\t}\n\n\tget valueStateText() {\n\t\tconst percentValue = `${this.validatedValue}%`;\n\t\tconst valueText = this.valueStateTextMappings()[this.valueState];\n\n\t\treturn valueText ? `${percentValue} ${valueText}` : percentValue;\n\t}\n\n\tget showIcon() {\n\t\treturn this.valueState !== ValueState.None;\n\t}\n}\n\nProgressIndicator.define();\n\nexport default ProgressIndicator;\n"]}

package/dist/ProgressIndicatorTemplate.d.ts

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

package/dist/ProgressIndicatorTemplate.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "./Icon.js";
+import information from "@ui5/webcomponents-icons/dist/information.js";
+import statusNegative from "@ui5/webcomponents-icons/dist/status-negative.js";
+import statusPositive from "@ui5/webcomponents-icons/dist/status-positive.js";
+import statusCritical from "@ui5/webcomponents-icons/dist/status-critical.js";
+const valueStateIconMappings = {
+    "Negative": statusNegative,
+    "Critical": statusCritical,
+    "Positive": statusPositive,
+    "Information": information,
+};
+export default function ProgressIndicatorTemplate() {
+    return (_jsxs("div", { class: {
+            "ui5-progress-indicator-root": true,
+            "ui5-progress-indicator-max-value": this.validatedValue === 100,
+            "ui5-progress-indicator-min-value": this.validatedValue === 0,
+        }, role: "progressbar", "aria-valuemin": 0, "aria-valuenow": this.validatedValue, "aria-valuemax": 100, "aria-valuetext": this.valueStateText, "aria-label": this.accessibleName, children: [_jsx("div", { class: "ui5-progress-indicator-bar", part: "bar", style: { "width": `${this.validatedValue}%`, "transition-duration": this.shouldAnimate ? `${this._transitionDuration}ms` : "none" }, children: !this.showValueInRemainingBar && valueLabel.call(this) }), _jsx("div", { class: "ui5-progress-indicator-remaining-bar", part: "remaining-bar", children: this.showValueInRemainingBar && valueLabel.call(this) })] }));
+}
+function valueLabel() {
+    return (_jsxs(_Fragment, { children: [this.showIcon &&
+                _jsx(Icon, { name: valueStateIcon.call(this), class: "ui5-progress-indicator-icon" }), !this.hideValue &&
+                _jsxs("span", { class: "ui5-progress-indicator-value", children: [" ", this.displayValue ? this.displayValue : `${this.validatedValue}%`] })] }));
+}
+function valueStateIcon() {
+    return valueStateIconMappings[this.valueState];
+}
+//# sourceMappingURL=ProgressIndicatorTemplate.js.map

package/dist/ProgressIndicatorTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressIndicatorTemplate.js","sourceRoot":"","sources":["../src/ProgressIndicatorTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAG7B,OAAO,WAAW,MAAM,8CAA8C,CAAC;AACvE,OAAO,cAAc,MAAM,kDAAkD,CAAC;AAC9E,OAAO,cAAc,MAAM,kDAAkD,CAAC;AAC9E,OAAO,cAAc,MAAM,kDAAkD,CAAC;AAE9E,MAAM,sBAAsB,GAA2B;IACtD,UAAU,EAAE,cAAc;IAC1B,UAAU,EAAE,cAAc;IAC1B,UAAU,EAAE,cAAc;IAC1B,aAAa,EAAE,WAAW;CAC1B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,yBAAyB;IAChD,OAAO,CACN,eACC,KAAK,EAAE;YACN,6BAA6B,EAAE,IAAI;YACnC,kCAAkC,EAAE,IAAI,CAAC,cAAc,KAAK,GAAG;YAC/D,kCAAkC,EAAE,IAAI,CAAC,cAAc,KAAK,CAAC;SAC7D,EACD,IAAI,EAAC,aAAa,mBACH,CAAC,mBACD,IAAI,CAAC,cAAc,mBACnB,GAAG,oBACF,IAAI,CAAC,cAAc,gBACvB,IAAI,CAAC,cAAc,aAE/B,cAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,cAAc,GAAG,EAAE,qBAAqB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,mBAAmB,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,YACpL,CAAC,IAAI,CAAC,uBAAuB,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GAClD,EACN,cAAK,KAAK,EAAC,sCAAsC,EAAC,IAAI,EAAC,eAAe,YACnE,IAAI,CAAC,uBAAuB,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GAClD,IACD,CACN,CAAC;AACH,CAAC;AAED,SAAS,UAAU;IAClB,OAAO,CACN,8BACG,IAAI,CAAC,QAAQ;gBACf,KAAC,IAAI,IAAC,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAC,6BAA6B,GAAE,EAE3E,CAAC,IAAI,CAAC,SAAS;gBAChB,gBAAM,KAAK,EAAC,8BAA8B,kBAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,cAAc,GAAG,IAAQ,IACpH,CACH,CAAC;AACH,CAAC;AAED,SAAS,cAAc;IACtB,OAAO,sBAAsB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport type ProgressIndicator from \"./ProgressIndicator.js\";\n\nimport information from \"@ui5/webcomponents-icons/dist/information.js\";\nimport statusNegative from \"@ui5/webcomponents-icons/dist/status-negative.js\";\nimport statusPositive from \"@ui5/webcomponents-icons/dist/status-positive.js\";\nimport statusCritical from \"@ui5/webcomponents-icons/dist/status-critical.js\";\n\nconst valueStateIconMappings: Record<string, string> = {\n\t\"Negative\": statusNegative,\n\t\"Critical\": statusCritical,\n\t\"Positive\": statusPositive,\n\t\"Information\": information,\n};\n\nexport default function ProgressIndicatorTemplate(this: ProgressIndicator) {\n\treturn (\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-progress-indicator-root\": true,\n\t\t\t\t\"ui5-progress-indicator-max-value\": this.validatedValue === 100,\n\t\t\t\t\"ui5-progress-indicator-min-value\": this.validatedValue === 0,\n\t\t\t}}\n\t\t\trole=\"progressbar\"\n\t\t\taria-valuemin={0}\n\t\t\taria-valuenow={this.validatedValue}\n\t\t\taria-valuemax={100}\n\t\t\taria-valuetext={this.valueStateText}\n\t\t\taria-label={this.accessibleName}\n\t\t>\n\t\t\t<div class=\"ui5-progress-indicator-bar\" part=\"bar\" style={{ \"width\": `${this.validatedValue}%`, \"transition-duration\": this.shouldAnimate ? `${this._transitionDuration}ms` : \"none\" }}>\n\t\t\t\t{!this.showValueInRemainingBar && valueLabel.call(this) }\n\t\t\t</div>\n\t\t\t<div class=\"ui5-progress-indicator-remaining-bar\" part=\"remaining-bar\">\n\t\t\t\t{ this.showValueInRemainingBar && valueLabel.call(this) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction valueLabel(this: ProgressIndicator) {\n\treturn (\n\t\t<>\n\t\t\t{ this.showIcon &&\n\t\t\t<Icon name={valueStateIcon.call(this)} class=\"ui5-progress-indicator-icon\"/> }\n\n\t\t\t{!this.hideValue &&\n\t\t\t<span class=\"ui5-progress-indicator-value\"> {this.displayValue ? this.displayValue : `${this.validatedValue}%`}</span> }\n\t\t</>\n\t);\n}\n\nfunction valueStateIcon(this: ProgressIndicator) {\n\treturn valueStateIconMappings[this.valueState];\n}\n"]}

package/dist/RadioButton.d.ts

@@ -0,0 +1,181 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
+import type WrappingType from "./types/WrappingType.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-radio-button` component enables users to select a single option from a set of options.
+ * When a `ui5-radio-button` is selected by the user, the
+ * `change` event is fired.
+ * When a `ui5-radio-button` that is within a group is selected, the one
+ * that was previously selected gets automatically deselected. You can group radio buttons by using the `name` property.
+ *
+ * **Note:** If `ui5-radio-button` is not part of a group, it can be selected once, but can not be deselected back.
+ *
+ * ### Keyboard Handling
+ *
+ * Once the `ui5-radio-button` is on focus, it might be selected by pressing the Space and Enter keys.
+ *
+ * The Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group,
+ * while TAB and SHIFT + TAB can be used to enter or leave the radio button group.
+ *
+ * **Note:** On entering radio button group, the focus goes to the currently selected radio button.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/RadioButton";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @csspart outer-ring - Used to style the outer ring of the `ui5-radio-button`.
+ * @csspart inner-ring - Used to style the inner ring of the `ui5-radio-button`.
+ */
+declare class RadioButton extends UI5Element implements IFormInputElement {
+    eventDetails: {
+        change: void;
+    };
+    /**
+     * Defines whether the component is disabled.
+     *
+     * **Note:** A disabled component is completely noninteractive.
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines whether the component is read-only.
+     *
+     * **Note:** A read-only component isn't editable or selectable.
+     * However, because it's focusable, it still provides visual feedback upon user interaction.
+     * @default false
+     * @public
+     */
+    readonly: boolean;
+    /**
+     * Defines whether the component is required.
+     * @default false
+     * @public
+     * @since 1.9.0
+     */
+    required: boolean;
+    /**
+     * Defines whether the component is checked or not.
+     *
+     * **Note:** The property value can be changed with user interaction,
+     * either by clicking/tapping on the component,
+     * or by using the Space or Enter key.
+     *
+     * **Note:** Only enabled radio buttons can be checked.
+     * Read-only radio buttons are not selectable, and therefore are always unchecked.
+     * @default false
+     * @formEvents change
+     * @formProperty
+     * @public
+     * @since 1.0.0-rc.15
+     */
+    checked: boolean;
+    /**
+     * Defines the text of the component.
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines the value state of the component.
+     * @default "None"
+     * @public
+     */
+    valueState: `${ValueState}`;
+    /**
+     * Determines the name by which the component will be identified upon submission in an HTML form.
+     *
+     * Radio buttons with the same `name` will form a radio button group.
+     *
+     * **Note:** By this name the component will be identified upon submission in an HTML form.
+     *
+     * **Note:** The selection can be changed with `ARROW_UP/DOWN` and `ARROW_LEFT/RIGHT` keys between radio buttons in same group.
+     *
+     * **Note:** Only one radio button can be selected per group.
+     * @default undefined
+     * @public
+     */
+    name?: string;
+    /**
+     * Defines the form value of the component.
+     * When a form with a radio button group is submitted, the group's value
+     * will be the value of the currently selected radio button.
+     * @default ""
+     * @public
+     */
+    value: string;
+    /**
+     * Defines whether the component text wraps when there is not enough space.
+     *
+     * **Note:** for option "Normal" the text will wrap and the words will not be broken based on hyphenation.
+     * @default "Normal"
+     * @public
+     */
+    wrappingType: `${WrappingType}`;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @default undefined
+     * @public
+     * @since 1.6.0
+     */
+    accessibleName?: string;
+    /**
+     * Defines the IDs of the elements that label the component.
+     * @default undefined
+     * @public
+     * @since 1.1.0
+     */
+    accessibleNameRef?: string;
+    _tabIndex?: number;
+    /**
+     * Defines the active state (pressed or not) of the component.
+     * @default false
+     * @private
+     */
+    active: boolean;
+    /**
+     * Defines if the component is selected in specific group
+     * @default false
+     * @private
+     */
+    _groupChecked: boolean;
+    _groupRequired: boolean;
+    _deactivate: () => void;
+    _name: string;
+    _checked: boolean;
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): string | null;
+    static i18nBundle: I18nBundle;
+    constructor();
+    onAfterRendering(): void;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    syncGroup(forceRemove?: boolean): void;
+    _onclick(): this;
+    _handleDown(e: KeyboardEvent): void;
+    _handleUp(e: KeyboardEvent): void;
+    _onkeydown(e: KeyboardEvent): void | this;
+    _onkeyup(e: KeyboardEvent): void;
+    _onmousedown(): void;
+    _onmouseup(): void;
+    _onfocusout(): void;
+    toggle(): this;
+    canToggle(): boolean;
+    get effectiveAriaDisabled(): true | undefined;
+    get ariaLabelText(): string;
+    get effectiveAriaDescribedBy(): string | undefined;
+    get hasValueState(): boolean;
+    get valueStateText(): string;
+    get effectiveTabIndex(): number | undefined;
+}
+export default RadioButton;