@ui5/webcomponents 0.0.0-037d08c67

package/dist/CheckBox.js

@@ -0,0 +1,416 @@
+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 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 { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_SUCCESS, FORM_CHECKABLE_REQUIRED, CHECKBOX_CHECKED, CHECKBOX_NOT_CHECKED, CHECKBOX_ARIA_TYPE, } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import checkboxCss from "./generated/themes/CheckBox.css.js";
+// Template
+import CheckBoxTemplate from "./CheckBoxTemplate.js";
+let isGlobalHandlerAttached = false;
+let activeCb;
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * Allows the user to set a binary value, such as true/false or yes/no for an item.
+ *
+ * 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 `ui5-checkbox`, the user has to click or tap the square
+ * box or its label.
+ *
+ * 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 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`.
+ *
+ * ### Keyboard Handling
+ *
+ * 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
+ * @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`
+ */
+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 ? this.value : 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.
+         *
+         * **Note:** We advise against using the text property of the checkbox when there is a
+         * label associated with it to avoid having two required asterisks.
+         * @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 form value of the component that is submitted when the checkbox is checked.
+         *
+         * When a form containing `ui5-checkbox` elements is submitted, only the values of the
+         * **checked** checkboxes are included in the form data sent to the server. Unchecked
+         * checkboxes do not contribute any data to the form submission.
+         *
+         * This property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.
+         *
+         * @default "on"
+         * @public
+         */
+        this.value = "on";
+        /**
+         * 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) || getAssociatedLabelForTexts(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;
+    }
+    get accessibilityInfo() {
+        const checkboxState = this.checked ? CheckBox_1.i18nBundle.getText(CHECKBOX_CHECKED) : CheckBox_1.i18nBundle.getText(CHECKBOX_NOT_CHECKED);
+        const description = [this.text || "", checkboxState].filter(Boolean).join(" ");
+        return {
+            role: this.accInfo.role,
+            type: CheckBox_1.i18nBundle.getText(CHECKBOX_ARIA_TYPE),
+            description,
+            label: this.ariaLabelText,
+            disabled: !!this.accInfo.ariaDisabled,
+            readonly: !!this.accInfo.ariaReadonly,
+            required: this.accInfo.ariaRequired,
+        };
+    }
+    get accInfo() {
+        return {
+            "role": this._accInfo ? this._accInfo.role : "checkbox",
+            "ariaChecked": this._accInfo ? this._accInfo.ariaChecked : this.effectiveAriaChecked,
+            "ariaReadonly": this._accInfo ? this._accInfo.ariaReadonly : this.ariaReadonly,
+            "ariaDisabled": this._accInfo ? this._accInfo.ariaDisabled : this.effectiveAriaDisabled,
+            "ariaRequired": this._accInfo ? this._accInfo.ariaRequired : this.required,
+            "tabindex": this._accInfo ? this._accInfo.tabindex : this.effectiveTabIndex,
+        };
+    }
+};
+__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()
+], CheckBox.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], CheckBox.prototype, "active", void 0);
+__decorate([
+    property({ type: Object })
+], CheckBox.prototype, "_accInfo", 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

package/dist/CheckBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../src/CheckBox.ts"],"names":[],"mappings":"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","sourcesContent":["import { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport 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 event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport type WrappingType from \"./types/WrappingType.js\";\nimport type {\n\tAriaRole,\n\tAriaChecked,\n\tAriaDisabled,\n\tAriaReadonly,\n} from \"@ui5/webcomponents-base/dist/types.js\";\nimport {\n\tVALUE_STATE_ERROR,\n\tVALUE_STATE_WARNING,\n\tVALUE_STATE_SUCCESS,\n\tFORM_CHECKABLE_REQUIRED,\n\tCHECKBOX_CHECKED,\n\tCHECKBOX_NOT_CHECKED,\n\tCHECKBOX_ARIA_TYPE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport checkboxCss from \"./generated/themes/CheckBox.css.js\";\n\n// Template\nimport CheckBoxTemplate from \"./CheckBoxTemplate.js\";\n\nlet isGlobalHandlerAttached = false;\nlet activeCb: CheckBox;\n\ntype CheckBoxAccInfo = {\n\trole?: AriaRole,\n\tariaChecked?: AriaChecked,\n\tariaReadonly?: AriaReadonly,\n\tariaDisabled?: AriaDisabled,\n\tariaRequired?: boolean,\n\ttabindex?: number | undefined,\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * Allows the user to set a binary value, such as true/false or yes/no for an item.\n *\n * The `ui5-checkbox` component consists of a box and a label that describes its purpose.\n * If it's checked, an indicator is displayed inside the box.\n * To check/uncheck the `ui5-checkbox`, the user has to click or tap the square\n * box or its label.\n *\n * The `ui5-checkbox` component only has 2 states - checked and unchecked.\n * Clicking or tapping toggles the `ui5-checkbox` between checked and unchecked state.\n *\n * ### Usage\n *\n * You can define the checkbox text with via the `text` property. If the text exceeds the available width, it is truncated by default.\n * In case you prefer text to truncate, set the `wrappingType` property to \"None\".\n * The touchable area for toggling the `ui5-checkbox` ends where the text ends.\n *\n * You can disable the `ui5-checkbox` by setting the `disabled` property to\n * `true`,\n * or use the `ui5-checkbox` in read-only mode by setting the `readonly`\n * property to `true`.\n *\n * ### Keyboard Handling\n *\n * The user can use the following keyboard shortcuts to toggle the checked state of the `ui5-checkbox`.\n *\n * - [Space],[Enter] - Toggles between different states: checked, not checked.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/CheckBox.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @csspart root - Used to style the outermost wrapper of the `ui5-checkbox`\n * @csspart label - Used to style the label of the `ui5-checkbox`\n * @csspart icon - Used to style the icon of the `ui5-checkbox`\n */\n@customElement({\n\ttag: \"ui5-checkbox\",\n\tlanguageAware: true,\n\tformAssociated: true,\n\trenderer: jsxRenderer,\n\ttemplate: CheckBoxTemplate,\n\tstyles: checkboxCss,\n})\n/**\n * Fired when the component checked state changes.\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n/**\n * Fired to make Angular two way data binding work properly.\n * @private\n */\n@event(\"value-changed\", {\n\tbubbles: true,\n\tcancelable: true,\n})\nclass CheckBox extends UI5Element implements IFormInputElement {\n\teventDetails!: {\n\t\t\"change\": void,\n\t\t\"value-changed\": void,\n\t};\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component\n\t * @default undefined\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t *\n\t * **Note:** A disabled component is completely noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines whether the component is read-only.\n\t *\n\t * **Note:** A read-only component is not editable,\n\t * but still provides visual feedback upon user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\treadonly = false;\n\n\t/**\n\t * Determines whether the `ui5-checkbox` is in display only state.\n\t *\n\t * When set to `true`, the `ui5-checkbox` is not interactive, not editable, not focusable\n\t * and not in the tab chain. This setting is used for forms in review mode.\n\t *\n\t * **Note:** When the property `disabled` is set to `true` this property has no effect.\n\t * @since 1.22.0\n\t * @public\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tdisplayOnly = false;\n\n\t/**\n\t * Defines whether the component is required.\n\t *\n\t * **Note:** We advise against using the text property of the checkbox when there is a\n\t * label associated with it to avoid having two required asterisks.\n\t * @default false\n\t * @public\n\t * @since 1.3.0\n\t */\n\t@property({ type: Boolean })\n\trequired = false;\n\n\t/**\n\t* Defines whether the component is displayed as partially checked.\n\t*\n\t* **Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\n\t* interaction and the resulting visual state depends on the values of the `indeterminate`\n\t* and `checked` properties:\n\t*\n\t* -  If the component is checked and indeterminate, it will be displayed as partially checked\n\t* -  If the component is checked and it is not indeterminate, it will be displayed as checked\n\t* -  If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute\n\t* @default false\n\t* @public\n\t* @since 1.0.0-rc.15\n\t*/\n\t@property({ type: Boolean })\n\tindeterminate = false;\n\n\t/**\n\t * Defines if the component is checked.\n\t *\n\t * **Note:** The property can be changed with user interaction,\n\t * either by cliking/tapping on the component, or by\n\t * pressing the Enter or Space key.\n\t * @default false\n\t * @formEvents change\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tchecked = false;\n\n\t/**\n\t * Defines the text of the component.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: 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/**\n\t * Defines whether the component text wraps when there is not enough space.\n\t *\n\t * **Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.\n\t * **Note:** for option \"None\" the text will be truncated with an ellipsis.\n\t * @default \"Normal\"\n\t * @public\n\t */\n\t@property()\n\twrappingType: `${WrappingType}` = \"Normal\";\n\n\t/**\n\t * Determines the name by which the component will be identified upon submission in an HTML form.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the form value of the component that is submitted when the checkbox is checked.\n\t *\n\t * When a form containing `ui5-checkbox` elements is submitted, only the values of the\n\t * **checked** checkboxes are included in the form data sent to the server. Unchecked\n\t * checkboxes do not contribute any data to the form submission.\n\t *\n\t * This property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.\n\t *\n\t * @default \"on\"\n\t * @public\n\t */\n\t@property()\n\tvalue = \"on\";\n\n\t/**\n\t * Defines the active state (pressed or not) of the component.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tactive = false;\n\n\t/**\n\t * Defines custom aria implementation object.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_accInfo?: CheckBoxAccInfo;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\t_deactivate: () => void;\n\n\tget formValidityMessage() {\n\t\treturn CheckBox.i18nBundle.getText(FORM_CHECKABLE_REQUIRED);\n\t}\n\n\tget formValidity(): ValidityStateFlags {\n\t\treturn { valueMissing: this.required && !this.checked };\n\t}\n\n\tasync formElementAnchor() {\n\t\treturn this.getFocusDomRefAsync();\n\t}\n\n\tget formFormattedValue() {\n\t\treturn this.checked ? this.value : null;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._deactivate = () => {\n\t\t\tif (activeCb) {\n\t\t\t\tactiveCb.active = false;\n\t\t\t}\n\t\t};\n\n\t\tif (!isGlobalHandlerAttached) {\n\t\t\tdocument.addEventListener(\"mouseup\", this._deactivate);\n\t\t\tisGlobalHandlerAttached = true;\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\t_onclick() {\n\t\tthis.toggle();\n\t}\n\n\t_onmousedown() {\n\t\tif (this.readonly || this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.active = true;\n\t\tactiveCb = this; // eslint-disable-line\n\t}\n\n\t_onmouseup() {\n\t\tthis.active = false;\n\t}\n\n\t_onfocusout() {\n\t\tthis.active = false;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (this.readonly || this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.toggle();\n\t\t}\n\n\t\tthis.active = true;\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis.toggle();\n\t\t}\n\n\t\tthis.active = false;\n\t}\n\n\ttoggle() {\n\t\tif (this.canToggle()) {\n\t\t\tconst lastState = {\n\t\t\t\tchecked: this.checked,\n\t\t\t\tindeterminate: this.indeterminate,\n\t\t\t};\n\t\t\tif (this.indeterminate) {\n\t\t\t\tthis.indeterminate = false;\n\t\t\t\tthis.checked = true;\n\t\t\t} else {\n\t\t\t\tthis.checked = !this.checked;\n\t\t\t}\n\n\t\t\tconst changePrevented = !this.fireDecoratorEvent(\"change\");\n\t\t\t// Angular two way data binding\n\t\t\tconst valueChangePrevented = !this.fireDecoratorEvent(\"value-changed\");\n\n\t\t\tif (changePrevented || valueChangePrevented) {\n\t\t\t\tthis.checked = lastState.checked;\n\t\t\t\tthis.indeterminate = lastState.indeterminate;\n\t\t\t}\n\t\t}\n\t\treturn this;\n\t}\n\n\tcanToggle() {\n\t\treturn !(this.disabled || this.readonly || this.displayOnly);\n\t}\n\n\tvalueStateTextMappings() {\n\t\treturn {\n\t\t\t\"Negative\": CheckBox.i18nBundle.getText(VALUE_STATE_ERROR),\n\t\t\t\"Critical\": CheckBox.i18nBundle.getText(VALUE_STATE_WARNING),\n\t\t\t\"Positive\": CheckBox.i18nBundle.getText(VALUE_STATE_SUCCESS),\n\t\t};\n\t}\n\n\tget ariaLabelText() {\n\t\treturn getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this);\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-checkbox--hoverable\": !this.disabled && !this.readonly && isDesktop(),\n\t\t\t},\n\t\t};\n\t}\n\n\tget ariaReadonly() {\n\t\treturn this.readonly || this.displayOnly ? \"true\" : undefined;\n\t}\n\n\tget effectiveAriaDisabled() {\n\t\treturn this.disabled ? \"true\" : undefined;\n\t}\n\n\tget effectiveAriaChecked() {\n\t\treturn this.indeterminate && this.checked ? \"mixed\" : this.checked;\n\t}\n\n\tget ariaLabelledBy() {\n\t\tif (!this.ariaLabelText) {\n\t\t\treturn this.text ? `${this._id}-label` : undefined;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget ariaDescribedBy() {\n\t\treturn this.hasValueState ? `${this._id}-descr` : undefined;\n\t}\n\n\tget hasValueState() {\n\t\treturn this.valueState !== ValueState.None;\n\t}\n\n\tget valueStateText() {\n\t\tif (this.valueState !== ValueState.None && this.valueState !== ValueState.Information) {\n\t\t\treturn this.valueStateTextMappings()[this.valueState];\n\t\t}\n\t}\n\n\tget effectiveTabIndex() {\n\t\tconst tabindex = this.getAttribute(\"tabindex\");\n\n\t\tif (this.tabbable) {\n\t\t\treturn tabindex ? parseInt(tabindex) : 0;\n\t\t}\n\t}\n\n\tget tabbable() {\n\t\treturn !this.disabled && !this.displayOnly;\n\t}\n\n\tget isCompletelyChecked() {\n\t\treturn this.checked && !this.indeterminate;\n\t}\n\n\tget isDisplayOnly() {\n\t\treturn this.displayOnly && !this.disabled;\n\t}\n\n\tget accessibilityInfo() {\n\t\tconst checkboxState = this.checked ? CheckBox.i18nBundle.getText(CHECKBOX_CHECKED) : CheckBox.i18nBundle.getText(CHECKBOX_NOT_CHECKED);\n\t\tconst description = [this.text || \"\", checkboxState].filter(Boolean).join(\" \");\n\n\t\treturn {\n\t\t\trole: this.accInfo.role,\n\t\t\ttype: CheckBox.i18nBundle.getText(CHECKBOX_ARIA_TYPE),\n\t\t\tdescription,\n\t\t\tlabel: this.ariaLabelText,\n\t\t\tdisabled: !!this.accInfo.ariaDisabled,\n\t\t\treadonly: !!this.accInfo.ariaReadonly,\n\t\t\trequired: this.accInfo.ariaRequired,\n\t\t};\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"role\": this._accInfo ? this._accInfo.role : \"checkbox\" as AriaRole,\n\t\t\t\"ariaChecked\": this._accInfo ? this._accInfo.ariaChecked : this.effectiveAriaChecked as AriaChecked,\n\t\t\t\"ariaReadonly\": this._accInfo ? this._accInfo.ariaReadonly : this.ariaReadonly as AriaReadonly,\n\t\t\t\"ariaDisabled\": this._accInfo ? this._accInfo.ariaDisabled : this.effectiveAriaDisabled as AriaDisabled,\n\t\t\t\"ariaRequired\": this._accInfo ? this._accInfo.ariaRequired : this.required,\n\t\t\t\"tabindex\": this._accInfo ? this._accInfo.tabindex : this.effectiveTabIndex,\n\t\t};\n\t}\n}\n\nCheckBox.define();\n\nexport default CheckBox;\n"]}

package/dist/CheckBoxTemplate.d.ts

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

package/dist/CheckBoxTemplate.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import Label from "./Label.js";
+import Icon from "./Icon.js";
+import accept from "@ui5/webcomponents-icons/dist/accept.js";
+import complete from "@ui5/webcomponents-icons/dist/complete.js";
+import border from "@ui5/webcomponents-icons/dist/border.js";
+import triState from "@ui5/webcomponents-icons/dist/tri-state.js";
+export default function CheckBoxTemplate() {
+    return (_jsxs("div", { class: {
+            "ui5-checkbox-root": true,
+            "ui5-checkbox--hoverable": !this.disabled && !this.readonly && isDesktop(),
+        }, role: this.accInfo.role, part: "root", "aria-checked": this.accInfo.ariaChecked, "aria-readonly": this.accInfo.ariaReadonly, "aria-disabled": this.accInfo.ariaDisabled, "aria-label": this.ariaLabelText, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-required": this.accInfo.ariaRequired, tabindex: this.accInfo.tabindex, onMouseDown: this._onmousedown, onMouseUp: this._onmouseup, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onFocusOut: this._onfocusout, children: [this.isDisplayOnly ?
+                _jsx("div", { class: "ui5-checkbox-display-only-icon-inner", children: _jsx(Icon, { "aria-hidden": "true", name: displayOnlyIcon.call(this), class: "ui5-checkbox-display-only-icon", part: "icon" }) })
+                :
+                    _jsx("div", { id: `${this._id}-CbBg`, class: "ui5-checkbox-inner", children: this.isCompletelyChecked &&
+                            _jsx(Icon, { "aria-hidden": "true", name: accept, class: "ui5-checkbox-icon", part: "icon" }) }), this.accInfo.role === "checkbox" &&
+                _jsx("input", { id: `${this._id}-CB`, type: "checkbox", checked: this.checked, value: this.value, readonly: this.readonly, disabled: this.disabled, tabindex: -1, "aria-hidden": "true", "data-sap-no-tab-ref": true }), this.text &&
+                _jsx(Label, { id: `${this._id}-label`, part: "label", class: "ui5-checkbox-label", wrappingType: this.wrappingType, required: this.required, children: this.text }), this.hasValueState &&
+                _jsx("span", { id: `${this._id}-descr`, class: "ui5-hidden-text", children: this.valueStateText })] }));
+}
+function displayOnlyIcon() {
+    if (this.isCompletelyChecked) {
+        return complete;
+    }
+    if (this.checked && this.indeterminate) {
+        return triState;
+    }
+    return border;
+}
+//# sourceMappingURL=CheckBoxTemplate.js.map

package/dist/CheckBoxTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBoxTemplate.js","sourceRoot":"","sources":["../src/CheckBoxTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport type CheckBox from \"./CheckBox.js\";\nimport Label from \"./Label.js\";\nimport Icon from \"./Icon.js\";\nimport accept from \"@ui5/webcomponents-icons/dist/accept.js\";\nimport complete from \"@ui5/webcomponents-icons/dist/complete.js\";\nimport border from \"@ui5/webcomponents-icons/dist/border.js\";\nimport triState from \"@ui5/webcomponents-icons/dist/tri-state.js\";\n\nexport default function CheckBoxTemplate(this: CheckBox) {\n\treturn (\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-checkbox-root\": true,\n\t\t\t\t\"ui5-checkbox--hoverable\": !this.disabled && !this.readonly && isDesktop(),\n\t\t\t}}\n\t\t\trole={this.accInfo.role}\n\t\t\tpart=\"root\"\n\t\t\taria-checked={this.accInfo.ariaChecked}\n\t\t\taria-readonly={this.accInfo.ariaReadonly}\n\t\t\taria-disabled={this.accInfo.ariaDisabled}\n\t\t\taria-label={this.ariaLabelText}\n\t\t\taria-labelledby={this.ariaLabelledBy}\n\t\t\taria-describedby={this.ariaDescribedBy}\n\t\t\taria-required={this.accInfo.ariaRequired}\n\t\t\ttabindex={this.accInfo.tabindex}\n\t\t\tonMouseDown={this._onmousedown}\n\t\t\tonMouseUp={this._onmouseup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonClick={this._onclick}\n\t\t\tonFocusOut={this._onfocusout}\n\t\t>\n\n\t\t\t{this.isDisplayOnly ?\n\t\t\t\t<div class=\"ui5-checkbox-display-only-icon-inner\">\n\t\t\t\t\t<Icon aria-hidden=\"true\" name={displayOnlyIcon.call(this)} class=\"ui5-checkbox-display-only-icon\" part=\"icon\"/>\n\t\t\t\t</div>\n\t\t\t\t:\n\t\t\t\t<div id={`${this._id}-CbBg`} class=\"ui5-checkbox-inner\">\n\t\t\t\t\t{this.isCompletelyChecked &&\n\t\t\t\t\t<Icon aria-hidden=\"true\" name={accept} class=\"ui5-checkbox-icon\" part=\"icon\"/>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{this.accInfo.role === \"checkbox\" &&\n\t\t\t<input\n\t\t\t\tid={`${this._id}-CB`}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={this.checked}\n\t\t\t\tvalue={this.value}\n\t\t\t\treadonly={this.readonly}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\ttabindex={-1}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tdata-sap-no-tab-ref\n\t\t\t/>\n\t\t\t}\n\n\t\t\t{this.text &&\n\t\t\t<Label\n\t\t\t\tid={`${this._id}-label`}\n\t\t\t\tpart=\"label\"\n\t\t\t\tclass=\"ui5-checkbox-label\"\n\t\t\t\twrappingType={this.wrappingType}\n\t\t\t\trequired={this.required}\n\t\t\t>\n\t\t\t\t{this.text}\n\t\t\t</Label>\n\t\t\t}\n\n\t\t\t{this.hasValueState &&\n\t\t\t<span id={`${this._id}-descr`} class=\"ui5-hidden-text\">{this.valueStateText}</span>\n\t\t\t}\n\t\t</div>\n\t);\n}\n\nfunction displayOnlyIcon(this: CheckBox) {\n\tif (this.isCompletelyChecked) {\n\t\treturn complete;\n\t}\n\tif (this.checked && this.indeterminate) {\n\t\treturn triState;\n\t}\n\treturn border;\n}\n"]}