@ui5/webcomponents 0.0.0-4e00e5559 → 0.0.0-4e88b8243

package/dist/CheckBox.js

@@ -1,324 +1,371 @@
+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 CheckBox_1;
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import "@ui5/webcomponents-icons/dist/icons/accept.js";
-import Icon from "./Icon.js";
-import Label from "./Label.js";
-import { VALUE_STATE_ERROR, VALUE_STATE_WARNING } from "./generated/i18n/i18n-defaults.js";
-
-// Template
-import CheckBoxTemplate from "./generated/templates/CheckBoxTemplate.lit.js";
-
+import { VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_SUCCESS, FORM_CHECKABLE_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import checkboxCss from "./generated/themes/CheckBox.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-checkbox",
-	properties: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
-
-		/**
-		 * Defines whether the <code>ui5-checkbox</code> is disabled.
-		 * <br><br>
-		 * <b>Note:</b> A disabled <code>ui5-checkbox</code> is completely noninteractive.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		disabled: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the <code>ui5-checkbox</code> is read-only.
-		 * <br><br>
-		 * <b>Note:</b> A red-only <code>ui5-checkbox</code> is not editable,
-		 * but still provides visual feedback upon user interaction.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		readonly: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines if the <code>ui5-checkbox</code> is checked.
-		 * <br><br>
-		 * <b>Note:</b> The property can be changed with user interaction,
-		 * either by cliking/tapping on the <code>ui5-checkbox</code>, or by
-		 * pressing the Enter or Space key.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		checked: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the text of the <code>ui5-checkbox</code>.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		text: {
-			type: String,
-		},
-
-		/**
-		 * Defines the value state of the <code>ui5-checkbox</code>.
-		 * <br><br>
-		 * <b>Note:</b> Available options are <code>Warning</code>, <code>Error</code>, and <code>None</code> (default).
-		 *
-		 * @type {ValueState}
-		 * @defaultvalue "None"
-		 * @public
-		 */
-		valueState: {
-			type: ValueState,
-			defaultValue: ValueState.None,
-		},
-
-		/**
-		 * Defines whether the <code>ui5-checkbox</code> text wraps when there is not enough space.
-		 * <br><br>
-		 * <b>Note:</b> By default, the text truncates when there is not enough space.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		wrap: {
-			type: Boolean,
-		},
-
-		/**
-		 * Determines the name with which the <code>ui5-checkbox</code> will be submitted in an HTML form.
-		 *
-		 * <br><br>
-		 * <b>Important:</b> For the <code>name</code> property to have effect, 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 <code>ui5-checkbox</code> so that it can be submitted as
-		 * part of an HTML form. Do not use this property unless you need to submit a form.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		name: {
-			type: String,
-		},
-
-		_label: {
-			type: Object,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
-
-		/**
-		 * Fired when the <code>ui5-checkbox</code> checked state changes.
-		 *
-		 * @public
-		 * @event
-		 */
-		change: {},
-	},
-};
-
+// Template
+import CheckBoxTemplate from "./CheckBoxTemplate.js";
+let isGlobalHandlerAttached = false;
+let activeCb;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
  * Allows the user to set a binary value, such as true/false or yes/no for an item.
- * <br><br>
- * The <code>ui5-checkbox</code> component consists of a box and a label that describes its purpose.
+ *
+ * The `ui5-checkbox` component consists of a box and a label that describes its purpose.
  * If it's checked, an indicator is displayed inside the box.
- * To check/uncheck the <code>ui5-checkbox</code>, the user has to click or tap the square
+ * To check/uncheck the `ui5-checkbox`, the user has to click or tap the square
  * box or its label.
- * <br><br>
- * The <code>ui5-checkbox</code> component only has 2 states - checked and unchecked.
- * Clicking or tapping toggles the <code>ui5-checkbox</code> between checked and unchecked state.
  *
- * <h3>Usage</h3>
+ * The `ui5-checkbox` component only has 2 states - checked and unchecked.
+ * Clicking or tapping toggles the `ui5-checkbox` between checked and unchecked state.
+ *
+ * ### Usage
+ *
+ * You can define the checkbox text with via the `text` property. If the text exceeds the available width, it is truncated by default.
+ * In case you prefer text to truncate, set the `wrappingType` property to "None".
+ * The touchable area for toggling the `ui5-checkbox` ends where the text ends.
  *
- * You can manually set the width of the element containing the box and the label using the <code>width</code> property.
- * If the text exceeds the available width, it is truncated.
- * The touchable area for toggling the <code>ui5-checkbox</code> ends where the text ends.
- * <br><br>
- * You can disable the <code>ui5-checkbox</code> by setting the <code>disabled</code> property to
- * <code>true</code>,
- * or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readonly</code>
- * property to <code>true</code>.
+ * You can disable the `ui5-checkbox` by setting the `disabled` property to
+ * `true`,
+ * or use the `ui5-checkbox` in read-only mode by setting the `readonly`
+ * property to `true`.
  *
- * <h3>ES6 Module Import</h3>
+ * ### Keyboard Handling
  *
- * <code>import "@ui5/webcomponents/dist/CheckBox";</code>
+ * The user can use the following keyboard shortcuts to toggle the checked state of the `ui5-checkbox`.
  *
+ * - [Space],[Enter] - Toggles between different states: checked, not checked.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/CheckBox.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.CheckBox
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-checkbox
+ * @extends UI5Element
  * @public
+ * @csspart root - Used to style the outermost wrapper of the `ui5-checkbox`
+ * @csspart label - Used to style the label of the `ui5-checkbox`
+ * @csspart icon - Used to style the icon of the `ui5-checkbox`
  */
-class CheckBox extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return CheckBoxTemplate;
-	}
-
-	static get styles() {
-		return checkboxCss;
-	}
-
-	constructor() {
-		super();
-
-		this._label = {};
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
-	onBeforeRendering() {
-		this.syncLabel();
-
-		this._enableFormSupport();
-	}
-
-	syncLabel() {
-		this._label = Object.assign({}, this._label);
-		this._label.text = this.text;
-		this._label.wrap = this.wrap;
-		this._label.textDirection = this.textDirection;
-	}
-
-	_enableFormSupport() {
-		const FormSupport = getFeature("FormSupport");
-		if (FormSupport) {
-			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-				nativeInput.disabled = element.disabled || !element.checked;
-				nativeInput.value = element.checked ? "on" : "";
-			});
-		} else if (this.name) {
-			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
-		}
-	}
-
-	_onclick() {
-		this.toggle();
-	}
-
-	_onkeydown(event) {
-		if (isSpace(event)) {
-			event.preventDefault();
-		}
-
-		if (isEnter(event)) {
-			this.toggle();
-		}
-	}
-
-	_onkeyup(event) {
-		if (isSpace(event)) {
-			this.toggle();
-		}
-	}
-
-	toggle() {
-		if (this.canToggle()) {
-			this.checked = !this.checked;
-			this.fireEvent("change");
-			// Angular two way data binding
-			this.fireEvent("value-changed");
-		}
-		return this;
-	}
-
-	canToggle() {
-		return !(this.disabled || this.readonly);
-	}
-
-	valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
-		return {
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
-		};
-	}
-
-	get classes() {
-		return {
-			main: {
-				"ui5-checkbox--hoverable": !this.disabled && !this.readonly && isDesktop(),
-			},
-		};
-	}
-
-	get ariaReadonly() {
-		return this.readonly ? "true" : undefined;
-	}
-
-	get ariaDisabled() {
-		return this.disabled ? "true" : undefined;
-	}
-
-	get ariaLabelledBy() {
-		return this.text ? `${this._id}-label` : undefined;
-	}
-
-	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");
-		return this.disabled ? undefined : tabindex || "0";
-	}
-
-	get rtl() {
-		return getRTL() ? "rtl" : undefined;
-	}
-
-	static async onDefine() {
-		await Promise.all([
-			Label.define(),
-			Icon.define(),
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
-	}
-}
-
+let CheckBox = CheckBox_1 = class CheckBox extends UI5Element {
+    get formValidityMessage() {
+        return CheckBox_1.i18nBundle.getText(FORM_CHECKABLE_REQUIRED);
+    }
+    get formValidity() {
+        return { valueMissing: this.required && !this.checked };
+    }
+    async formElementAnchor() {
+        return this.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.checked ? "on" : null;
+    }
+    constructor() {
+        super();
+        /**
+         * Defines whether the component is disabled.
+         *
+         * **Note:** A disabled component is completely noninteractive.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Defines whether the component is read-only.
+         *
+         * **Note:** A read-only component is not editable,
+         * but still provides visual feedback upon user interaction.
+         * @default false
+         * @public
+         */
+        this.readonly = false;
+        /**
+         * Determines whether the `ui5-checkbox` is in display only state.
+         *
+         * When set to `true`, the `ui5-checkbox` is not interactive, not editable, not focusable
+         * and not in the tab chain. This setting is used for forms in review mode.
+         *
+         * **Note:** When the property `disabled` is set to `true` this property has no effect.
+         * @since 1.22.0
+         * @public
+         * @default false
+         */
+        this.displayOnly = false;
+        /**
+         * Defines whether the component is required.
+         * @default false
+         * @public
+         * @since 1.3.0
+         */
+        this.required = false;
+        /**
+        * Defines whether the component is displayed as partially checked.
+        *
+        * **Note:** The indeterminate state can be set only programmatically and can’t be achieved by user
+        * interaction and the resulting visual state depends on the values of the `indeterminate`
+        * and `checked` properties:
+        *
+        * -  If the component is checked and indeterminate, it will be displayed as partially checked
+        * -  If the component is checked and it is not indeterminate, it will be displayed as checked
+        * -  If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute
+        * @default false
+        * @public
+        * @since 1.0.0-rc.15
+        */
+        this.indeterminate = false;
+        /**
+         * Defines if the component is checked.
+         *
+         * **Note:** The property can be changed with user interaction,
+         * either by cliking/tapping on the component, or by
+         * pressing the Enter or Space key.
+         * @default false
+         * @formEvents change
+         * @formProperty
+         * @public
+         */
+        this.checked = false;
+        /**
+         * Defines the value state of the component.
+         * @default "None"
+         * @public
+         */
+        this.valueState = "None";
+        /**
+         * 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.
+         * **Note:** for option "None" the text will be truncated with an ellipsis.
+         * @default "Normal"
+         * @public
+         */
+        this.wrappingType = "Normal";
+        /**
+         * Defines the active state (pressed or not) of the component.
+         * @private
+         */
+        this.active = false;
+        this._deactivate = () => {
+            if (activeCb) {
+                activeCb.active = false;
+            }
+        };
+        if (!isGlobalHandlerAttached) {
+            document.addEventListener("mouseup", this._deactivate);
+            isGlobalHandlerAttached = true;
+        }
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    _onclick() {
+        this.toggle();
+    }
+    _onmousedown() {
+        if (this.readonly || this.disabled) {
+            return;
+        }
+        this.active = true;
+        activeCb = this; // eslint-disable-line
+    }
+    _onmouseup() {
+        this.active = false;
+    }
+    _onfocusout() {
+        this.active = false;
+    }
+    _onkeydown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (this.readonly || this.disabled) {
+            return;
+        }
+        if (isEnter(e)) {
+            this.toggle();
+        }
+        this.active = true;
+    }
+    _onkeyup(e) {
+        if (isSpace(e)) {
+            this.toggle();
+        }
+        this.active = false;
+    }
+    toggle() {
+        if (this.canToggle()) {
+            const lastState = {
+                checked: this.checked,
+                indeterminate: this.indeterminate,
+            };
+            if (this.indeterminate) {
+                this.indeterminate = false;
+                this.checked = true;
+            }
+            else {
+                this.checked = !this.checked;
+            }
+            const changePrevented = !this.fireDecoratorEvent("change");
+            // Angular two way data binding
+            const valueChangePrevented = !this.fireDecoratorEvent("value-changed");
+            if (changePrevented || valueChangePrevented) {
+                this.checked = lastState.checked;
+                this.indeterminate = lastState.indeterminate;
+            }
+        }
+        return this;
+    }
+    canToggle() {
+        return !(this.disabled || this.readonly || this.displayOnly);
+    }
+    valueStateTextMappings() {
+        return {
+            "Negative": CheckBox_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            "Critical": CheckBox_1.i18nBundle.getText(VALUE_STATE_WARNING),
+            "Positive": CheckBox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+        };
+    }
+    get ariaLabelText() {
+        return getEffectiveAriaLabelText(this);
+    }
+    get classes() {
+        return {
+            main: {
+                "ui5-checkbox--hoverable": !this.disabled && !this.readonly && isDesktop(),
+            },
+        };
+    }
+    get ariaReadonly() {
+        return this.readonly || this.displayOnly ? "true" : undefined;
+    }
+    get effectiveAriaDisabled() {
+        return this.disabled ? "true" : undefined;
+    }
+    get effectiveAriaChecked() {
+        return this.indeterminate && this.checked ? "mixed" : this.checked;
+    }
+    get ariaLabelledBy() {
+        if (!this.ariaLabelText) {
+            return this.text ? `${this._id}-label` : undefined;
+        }
+        return undefined;
+    }
+    get ariaDescribedBy() {
+        return this.hasValueState ? `${this._id}-descr` : undefined;
+    }
+    get hasValueState() {
+        return this.valueState !== ValueState.None;
+    }
+    get valueStateText() {
+        if (this.valueState !== ValueState.None && this.valueState !== ValueState.Information) {
+            return this.valueStateTextMappings()[this.valueState];
+        }
+    }
+    get effectiveTabIndex() {
+        const tabindex = this.getAttribute("tabindex");
+        if (this.tabbable) {
+            return tabindex ? parseInt(tabindex) : 0;
+        }
+    }
+    get tabbable() {
+        return !this.disabled && !this.displayOnly;
+    }
+    get isCompletelyChecked() {
+        return this.checked && !this.indeterminate;
+    }
+    get isDisplayOnly() {
+        return this.displayOnly && !this.disabled;
+    }
+};
+__decorate([
+    property()
+], CheckBox.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property()
+], CheckBox.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: Boolean })
+], CheckBox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], CheckBox.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], CheckBox.prototype, "displayOnly", void 0);
+__decorate([
+    property({ type: Boolean })
+], CheckBox.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], CheckBox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], CheckBox.prototype, "checked", void 0);
+__decorate([
+    property()
+], CheckBox.prototype, "text", void 0);
+__decorate([
+    property()
+], CheckBox.prototype, "valueState", void 0);
+__decorate([
+    property()
+], CheckBox.prototype, "wrappingType", void 0);
+__decorate([
+    property()
+], CheckBox.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], CheckBox.prototype, "active", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], CheckBox, "i18nBundle", void 0);
+CheckBox = CheckBox_1 = __decorate([
+    customElement({
+        tag: "ui5-checkbox",
+        languageAware: true,
+        formAssociated: true,
+        renderer: jsxRenderer,
+        template: CheckBoxTemplate,
+        styles: checkboxCss,
+    })
+    /**
+     * Fired when the component checked state changes.
+     * @public
+     */
+    ,
+    event("change", {
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * Fired to make Angular two way data binding work properly.
+     * @private
+     */
+    ,
+    event("value-changed", {
+        bubbles: true,
+        cancelable: true,
+    })
+], CheckBox);
 CheckBox.define();
-
 export default CheckBox;
+//# sourceMappingURL=CheckBox.js.map