@ui5/webcomponents 0.0.0-49cef2d02 → 0.0.0-4a28ecb24

package/dist/RadioButton.js

@@ -1,262 +1,34 @@
+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 RadioButton_1;
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import {
-	isSpace,
-	isEnter,
-	isDown,
-	isLeft,
-	isUp,
-	isRight,
-} from "@ui5/webcomponents-base/dist/Keys.js";
+import { isSpace, isEnter, isDown, isLeft, isUp, isRight, } from "@ui5/webcomponents-base/dist/Keys.js";
 import Label from "./Label.js";
 import RadioButtonGroup from "./RadioButtonGroup.js";
 import WrappingType from "./types/WrappingType.js";
-
 // Template
 import RadioButtonTemplate from "./generated/templates/RadioButtonTemplate.lit.js";
-
 // i18n
-import {
-	VALUE_STATE_ERROR,
-	VALUE_STATE_WARNING,
-	VALUE_STATE_SUCCESS,
-	VALUE_STATE_INFORMATION,
-} from "./generated/i18n/i18n-defaults.js";
-
+import { VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import radioButtonCss from "./generated/themes/RadioButton.css.js";
-
 let isGlobalHandlerAttached = false;
-let activeRadio = null;
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-radio-button",
-	languageAware: true,
-	properties: /** @lends sap.ui.webc.main.RadioButton.prototype */ {
-
-		/**
-		 * Defines whether the component is disabled.
-		 * <br><br>
-		 * <b>Note:</b> A disabled component is completely noninteractive.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		disabled: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the component is read-only.
-		 * <br><br>
-		 * <b>Note:</b> A read-only component is not editable,
-		 * but still provides visual feedback upon user interaction.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		readonly: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the component is required.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 * @since 1.9.0
-		 */
-		required: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the component is checked or not.
-		 * <br><br>
-		 * <b>Note:</b> The property value can be changed with user interaction,
-		 * either by clicking/tapping on the component,
-		 * or by using the Space or Enter key.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @formEvents change
-		 * @formProperty
-		 * @public
-		 * @since 1.0.0-rc.15
-		 */
-		checked: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the text of the component.
-		 *
-		 * @type  {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		text: {
-			type: String,
-		},
-
-		/**
-		 * Defines the value state of the component.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>None</code></li>
-		 * <li><code>Error</code></li>
-		 * <li><code>Warning</code></li>
-		 * <li><code>Success</code></li>
-		 * <li><code>Information</code></li>
-		 * </ul>
-		 *
-		 * @type {sap.ui.webc.base.types.ValueState}
-		 * @defaultvalue "None"
-		 * @public
-		 */
-		valueState: {
-			defaultValue: ValueState.None,
-			type: ValueState,
-		},
-
-		/**
-		 * Defines the name of the component.
-		 * Radio buttons with the same <code>name</code> will form a radio button group.
-		 *
-		 * <br><br>
-		 * <b>Note:</b>
-		 * The selection can be changed with <code>ARROW_UP/DOWN</code> and <code>ARROW_LEFT/RIGHT</code> keys between radio buttons in same group.
-		 *
-		 * <br><br>
-		 * <b>Note:</b>
-		 * Only one radio button can be selected per group.
-		 *
-		 * <br><br>
-		 * <b>Important:</b> For the <code>name</code> property to have effect when submitting forms, you must add the following import to your project:
-		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
-		 *
-		 * <br><br>
-		 * <b>Note:</b> When set, a native <code>input</code> HTML element
-		 * will be created inside the component so that it can be submitted as
-		 * part of an HTML form.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		name: {
-			type: 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.
-		 * <br>
-		 * <b>Important:</b> For the <code>value</code> property to have effect, you must add the following import to your project:
-		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		value: {
-			type: String,
-		},
-
-		/**
-		 * Defines whether the component text wraps when there is not enough space.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
-		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
-		 * </ul>
-		 *
-		 * @type {sap.ui.webc.main.types.WrappingType}
-		 * @defaultvalue "None"
-		 * @public
-		 */
-		wrappingType: {
-			type: WrappingType,
-			defaultValue: WrappingType.None,
-		},
-
-		/**
-		 * Defines the accessible ARIA name of the component.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 * @since 1.6.0
-		 */
-		accessibleName: {
-			type: String,
-		},
-
-		/**
-		 * Defines the IDs of the elements that label the component.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 * @since 1.1.0
-		 */
-		accessibleNameRef: {
-			type: String,
-		},
-
-		_tabIndex: {
-			type: String,
-			defaultValue: "-1",
-			noAttribute: true,
-		},
-
-		/**
-		 * Defines the active state (pressed or not) of the component.
-		 * @private
-		 */
-		 active: {
-			type: Boolean,
-		},
-	},
-	slots: /** @lends sap.ui.webc.main.RadioButton.prototype */ {
-		/**
-		 * The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,
-		 * when <code>name</code> property is set.
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @private
-		 */
-		formSupport: {
-			type: HTMLElement,
-		},
-	},
-	events: /** @lends sap.ui.webc.main.RadioButton.prototype */ {
-
-		/**
-		 * Fired when the component checked state changes.
-		 *
-		 * @event
-		 * @public
-		 * @since 1.0.0-rc.15
-		 */
-		change: {},
-	},
-};
-
+let activeRadio;
 /**
  * @class
  *
@@ -290,246 +62,250 @@ const metadata = {
  * @tagname ui5-radio-button
  * @public
  */
-class RadioButton extends UI5Element {
-	constructor() {
-		super();
-
-		this._deactivate = () => {
-			if (activeRadio) {
-				activeRadio.active = false;
-			}
-		};
-
-		if (!isGlobalHandlerAttached) {
-			document.addEventListener("mouseup", this._deactivate);
-			isGlobalHandlerAttached = true;
-		}
-	}
-
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return RadioButtonTemplate;
-	}
-
-	static get styles() {
-		return radioButtonCss;
-	}
-
-	static get dependencies() {
-		return [Label];
-	}
-
-	static async onDefine() {
-		RadioButton.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-	}
-
-	onBeforeRendering() {
-		this.syncGroup();
-
-		this._enableFormSupport();
-	}
-
-	onExitDOM() {
-		this.syncGroup(true);
-	}
-
-	syncGroup(forceRemove) {
-		const oldGroup = this._name;
-		const currentGroup = this.name;
-		const oldChecked = this._checked;
-		const currentChecked = this.checked;
-
-		if (forceRemove) {
-			RadioButtonGroup.removeFromGroup(this, oldGroup);
-		}
-
-		if (currentGroup !== oldGroup) {
-			if (oldGroup) {
-				// remove the control from the previous group
-				RadioButtonGroup.removeFromGroup(this, oldGroup);
-			}
-
-			if (currentGroup) {
-				// add the control to the existing group
-				RadioButtonGroup.addToGroup(this, currentGroup);
-			}
-		} else if (currentGroup) {
-			RadioButtonGroup.enforceSingleSelection(this, currentGroup);
-		}
-
-		if (this.name && currentChecked !== oldChecked) {
-			RadioButtonGroup.updateTabOrder(this.name);
-		}
-
-		this._name = this.name;
-		this._checked = this.checked;
-	}
-
-	_enableFormSupport() {
-		const FormSupport = getFeature("FormSupport");
-		if (FormSupport) {
-			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-				nativeInput.value = element.value;
-				nativeInput.type = "radio";
-				nativeInput.checked = element.checked;
-			});
-		} else if (this.value) {
-			console.warn(`In order for the "value" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
-		}
-	}
-
-	_onclick() {
-		return this.toggle();
-	}
-
-	_handleDown(event) {
-		const currentGroup = this.name;
-
-		if (!currentGroup) {
-			return;
-		}
-
-		event.preventDefault();
-		RadioButtonGroup.selectNextItem(this, currentGroup);
-	}
-
-	_handleUp(event) {
-		const currentGroup = this.name;
-
-		if (!currentGroup) {
-			return;
-		}
-
-		event.preventDefault();
-		RadioButtonGroup.selectPreviousItem(this, currentGroup);
-	}
-
-	_onkeydown(event) {
-		if (isSpace(event)) {
-			this.active = true;
-			return event.preventDefault();
-		}
-
-		if (isEnter(event)) {
-			this.active = true;
-			return this.toggle();
-		}
-
-		const isRTL = this.effectiveDir === "rtl";
-
-		if (isDown(event) || (!isRTL && isRight(event)) || (isRTL && isLeft(event))) {
-			this._handleDown(event);
-		}
-
-		if (isUp(event) || (!isRTL && isLeft(event)) || (isRTL && isRight(event))) {
-			this._handleUp(event);
-		}
-	}
-
-	_onkeyup(event) {
-		if (isSpace(event)) {
-			this.toggle();
-		}
-
-		this.active = false;
-	}
-
-	_onmousedown() {
-		this.active = true;
-		activeRadio = this; // eslint-disable-line
-	}
-
-	_onmouseup() {
-		this.active = false;
-	}
-
-	_onfocusout() {
-		this.active = false;
-	}
-
-	toggle() {
-		if (!this.canToggle()) {
-			return this;
-		}
-
-		if (!this.name) {
-			this.checked = !this.checked;
-			this.fireEvent("change");
-			return this;
-		}
-
-		RadioButtonGroup.selectItem(this, this.name);
-		return this;
-	}
-
-	canToggle() {
-		return !(this.disabled || this.readonly || this.checked);
-	}
-
-	valueStateTextMappings() {
-		return {
-			"Error": RadioButton.i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": RadioButton.i18nBundle.getText(VALUE_STATE_WARNING),
-			"Success": RadioButton.i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Information": RadioButton.i18nBundle.getText(VALUE_STATE_INFORMATION),
-		};
-	}
-
-	get classes() {
-		return {
-			main: {},
-			inner: {
-				"ui5-radio-inner--hoverable": !this.disabled && !this.readonly && isDesktop(),
-			},
-		};
-	}
-
-	get ariaDisabled() {
-		return this.disabled ? "true" : undefined;
-	}
-
-	get ariaLabelText() {
-		return [getEffectiveAriaLabelText(this), this.text].filter(Boolean).join(" ");
-	}
-
-	get ariaDescribedBy() {
-		return this.hasValueState ? `${this._id}-descr` : undefined;
-	}
-
-	get hasValueState() {
-		return this.valueState !== ValueState.None;
-	}
-
-	get valueStateText() {
-		return this.valueStateTextMappings()[this.valueState];
-	}
-
-	get tabIndex() {
-		const tabindex = this.getAttribute("tabindex");
-
-		if (this.disabled) {
-			return "-1";
-		}
-
-		if (this.name) {
-			return this._tabIndex;
-		}
-
-		return tabindex || "0";
-	}
-
-	get strokeWidth() {
-		return this.valueState === "None" ? "1" : "2";
-	}
-}
-
+let RadioButton = RadioButton_1 = class RadioButton extends UI5Element {
+    constructor() {
+        super();
+        this._deactivate = () => {
+            if (activeRadio) {
+                activeRadio.active = false;
+            }
+        };
+        if (!isGlobalHandlerAttached) {
+            document.addEventListener("mouseup", this._deactivate);
+            isGlobalHandlerAttached = true;
+        }
+    }
+    static get render() {
+        return litRender;
+    }
+    static get template() {
+        return RadioButtonTemplate;
+    }
+    static get styles() {
+        return radioButtonCss;
+    }
+    static get dependencies() {
+        return [Label];
+    }
+    static async onDefine() {
+        RadioButton_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    onBeforeRendering() {
+        this.syncGroup();
+        this._enableFormSupport();
+    }
+    onExitDOM() {
+        this.syncGroup(true);
+    }
+    syncGroup(forceRemove) {
+        const oldGroup = this._name;
+        const currentGroup = this.name;
+        const oldChecked = this._checked;
+        const currentChecked = this.checked;
+        if (forceRemove) {
+            RadioButtonGroup.removeFromGroup(this, oldGroup);
+        }
+        if (currentGroup !== oldGroup) {
+            if (oldGroup) {
+                // remove the control from the previous group
+                RadioButtonGroup.removeFromGroup(this, oldGroup);
+            }
+            if (currentGroup) {
+                // add the control to the existing group
+                RadioButtonGroup.addToGroup(this, currentGroup);
+            }
+        }
+        else if (currentGroup) {
+            RadioButtonGroup.enforceSingleSelection(this, currentGroup);
+        }
+        if (this.name && currentChecked !== oldChecked) {
+            RadioButtonGroup.updateTabOrder(this.name);
+        }
+        this._name = this.name;
+        this._checked = this.checked;
+    }
+    _enableFormSupport() {
+        const formSupport = getFeature("FormSupport");
+        if (formSupport) {
+            formSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
+                nativeInput.value = element.value;
+                nativeInput.type = "radio";
+                nativeInput.checked = element.checked;
+            });
+        }
+        else if (this.value) {
+            console.warn(`In order for the "value" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
+        }
+    }
+    _onclick() {
+        return this.toggle();
+    }
+    _handleDown(e) {
+        const currentGroup = this.name;
+        if (!currentGroup) {
+            return;
+        }
+        e.preventDefault();
+        RadioButtonGroup.selectNextItem(this, currentGroup);
+    }
+    _handleUp(e) {
+        const currentGroup = this.name;
+        if (!currentGroup) {
+            return;
+        }
+        e.preventDefault();
+        RadioButtonGroup.selectPreviousItem(this, currentGroup);
+    }
+    _onkeydown(e) {
+        if (isSpace(e)) {
+            this.active = true;
+            return e.preventDefault();
+        }
+        if (isEnter(e)) {
+            this.active = true;
+            return this.toggle();
+        }
+        const isRTL = this.effectiveDir === "rtl";
+        if (isDown(e) || (!isRTL && isRight(e)) || (isRTL && isLeft(e))) {
+            this._handleDown(e);
+        }
+        if (isUp(e) || (!isRTL && isLeft(e)) || (isRTL && isRight(e))) {
+            this._handleUp(e);
+        }
+    }
+    _onkeyup(e) {
+        if (isSpace(e)) {
+            this.toggle();
+        }
+        this.active = false;
+    }
+    _onmousedown() {
+        this.active = true;
+        activeRadio = this; // eslint-disable-line
+    }
+    _onmouseup() {
+        this.active = false;
+    }
+    _onfocusout() {
+        this.active = false;
+    }
+    toggle() {
+        if (!this.canToggle()) {
+            return this;
+        }
+        if (!this.name) {
+            this.checked = !this.checked;
+            this.fireEvent("change");
+            return this;
+        }
+        RadioButtonGroup.selectItem(this, this.name);
+        return this;
+    }
+    canToggle() {
+        return !(this.disabled || this.readonly || this.checked);
+    }
+    get classes() {
+        return {
+            inner: {
+                "ui5-radio-inner--hoverable": !this.disabled && !this.readonly && isDesktop(),
+            },
+        };
+    }
+    get effectiveAriaDisabled() {
+        return this.disabled ? "true" : null;
+    }
+    get ariaLabelText() {
+        return [getEffectiveAriaLabelText(this), this.text].filter(Boolean).join(" ");
+    }
+    get effectiveAriaDescribedBy() {
+        return this.hasValueState ? `${this._id}-descr` : undefined;
+    }
+    get hasValueState() {
+        return this.valueState !== ValueState.None;
+    }
+    get valueStateText() {
+        switch (this.valueState) {
+            case ValueState.Error:
+                return RadioButton_1.i18nBundle.getText(VALUE_STATE_ERROR);
+            case ValueState.Warning:
+                return RadioButton_1.i18nBundle.getText(VALUE_STATE_WARNING);
+            case ValueState.Success:
+                return RadioButton_1.i18nBundle.getText(VALUE_STATE_SUCCESS);
+            case ValueState.Information:
+                return RadioButton_1.i18nBundle.getText(VALUE_STATE_INFORMATION);
+            default:
+                return "";
+        }
+    }
+    get effectiveTabIndex() {
+        const tabindex = this.getAttribute("tabindex");
+        if (this.disabled) {
+            return "-1";
+        }
+        if (this.name) {
+            return this._tabIndex;
+        }
+        return tabindex || "0";
+    }
+    get strokeWidth() {
+        return this.valueState === "None" ? "1" : "2";
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], RadioButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], RadioButton.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], RadioButton.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], RadioButton.prototype, "checked", void 0);
+__decorate([
+    property()
+], RadioButton.prototype, "text", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: ValueState.None })
+], RadioButton.prototype, "valueState", void 0);
+__decorate([
+    property()
+], RadioButton.prototype, "name", void 0);
+__decorate([
+    property()
+], RadioButton.prototype, "value", void 0);
+__decorate([
+    property({ type: WrappingType, defaultValue: WrappingType.None })
+], RadioButton.prototype, "wrappingType", void 0);
+__decorate([
+    property()
+], RadioButton.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], RadioButton.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ defaultValue: "-1", noAttribute: true })
+], RadioButton.prototype, "_tabIndex", void 0);
+__decorate([
+    property({ type: Boolean })
+], RadioButton.prototype, "active", void 0);
+__decorate([
+    slot()
+], RadioButton.prototype, "formSupport", void 0);
+RadioButton = RadioButton_1 = __decorate([
+    customElement("ui5-radio-button"),
+    languageAware
+    /**
+     * Fired when the component checked state changes.
+     *
+     * @event sap.ui.webc.main.RadioButton#change
+     * @public
+     * @since 1.0.0-rc.15
+     */
+    ,
+    event("change")
+], RadioButton);
 RadioButton.define();
-
 export default RadioButton;
+//# sourceMappingURL=RadioButton.js.map