@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/Switch.d.ts

@@ -1,72 +1,55 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/less.js";
-import type { IFormElement } from "./features/InputElementsFormSupport.js";
 import SwitchDesign from "./types/SwitchDesign.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-switch</code> component is used for changing between binary states.
- * <br>
- * The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties,
- * but texts longer than 3 letters will be cutted off.
- * <br>
- * However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (<code>&lt;ui5-switch style="width: 200px"></code>), and set widths, depending on the texts they would use.
- * <br>
- * Note: the component would not automatically stretch to fit the whole text width.
+ * ### Overview
+ * The `ui5-switch` component is used for changing between binary states.
  *
- * <h3>Keyboard Handling</h3>
- * The state can be changed by pressing the Space and Enter keys.
+ * The component can display texts, that will be switched, based on the component state, via the `textOn` and `textOff` properties,
+ * but texts longer than 3 letters will be cutted off.
  *
- * <h3>CSS Shadow Parts</h3>
+ * However, users are able to customize the width of `ui5-switch` with pure CSS (`<ui5-switch style="width: 200px">`), and set widths, depending on the texts they would use.
  *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-switch</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>slider - Used to style the track, where the handle is being slid</li>
- * <li>text-on - Used to style the <code>textOn</code> property text</li>
- * <li>text-off - Used to style the <code>textOff</code> property text</li>
- * <li>handle - Used to style the handle of the switch</li>
- * </ul>
+ * Note: the component would not automatically stretch to fit the whole text width.
  *
- * <h3>ES6 Module Import</h3>
+ * ### Keyboard Handling
+ * The state can be changed by pressing the Space and Enter keys.
  *
- * <code>import "@ui5/webcomponents/dist/Switch";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Switch";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Switch
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-switch
+ * @extends UI5Element
  * @public
  * @since 0.8.0
+ * @csspart slider - Used to style the track, where the handle is being slid
+ * @csspart text-on - Used to style the `textOn` property text
+ * @csspart text-off - Used to style the `textOff` property text
+ * @csspart handle - Used to style the handle of the switch
  */
-declare class Switch extends UI5Element implements IFormElement {
+declare class Switch extends UI5Element implements IFormInputElement {
     /**
      * Defines the component design.
-     * <br><br>
-     * <b>Note:</b> If <code>Graphical</code> type is set,
-     * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
      *
+     * **Note:** If `Graphical` type is set,
+     * positive and negative icons will replace the `textOn` and `textOff`.
      * @public
-     * @type {sap.ui.webc.main.types.SwitchDesign}
-     * @name sap.ui.webc.main.Switch.prototype.design
-     * @defaultValue "Textual"
+     * @default "Textual"
      */
     design: `${SwitchDesign}`;
     /**
      * Defines if the component is checked.
-     * <br><br>
-     * <b>Note:</b> The property can be changed with user interaction,
-     * either by cliking the component, or by pressing the <code>Enter</code> or <code>Space</code> key.
-     * @type {boolean}
-     * @name sap.ui.webc.main.Switch.prototype.checked
-     * @defaultvalue false
+     *
+     * **Note:** The property can be changed with user interaction,
+     * either by cliking the component, or by pressing the `Enter` or `Space` key.
+     * @default false
      * @formEvents change
      * @formProperty
      * @public
@@ -74,46 +57,34 @@ declare class Switch extends UI5Element implements IFormElement {
     checked: boolean;
     /**
      * Defines whether the component is disabled.
-     * <br><br>
-     * <b>Note:</b> A disabled component is noninteractive.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Switch.prototype.disabled
-     * @defaultvalue false
+     * **Note:** A disabled component is noninteractive.
+     * @default false
      * @public
      */
     disabled: boolean;
     /**
      * Defines the text, displayed when the component is checked.
      *
-     * <br><br>
-     * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.Switch.prototype.textOn
-     * @defaultvalue ""
+     * **Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).
+     * @default ""
      * @public
      */
     textOn: string;
     /**
      * Defines the text, displayed when the component is not checked.
-     * <br><br>
-     * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
      *
-     * @type {string}
-     * @name sap.ui.webc.main.Switch.prototype.textOff
-     * @defaultvalue ""
+     * **Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).
+     * @default ""
      * @public
      */
     textOff: string;
     /**
      * Sets the accessible ARIA name of the component.
      *
-     * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.
-     * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.
-     * @type {string}
-     * @name sap.ui.webc.main.Switch.prototype.accessibleName
-     * @defaultvalue: ""
+     * **Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.
+     * Providing an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.
+     * @default ""
      * @public
      * @since 1.2.0
      */
@@ -121,67 +92,43 @@ declare class Switch extends UI5Element implements IFormElement {
     /**
      * Receives id(or many ids) of the elements that label the component.
      *
-     * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.
-     * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.
-     * @type {string}
-     * @name sap.ui.webc.main.Switch.prototype.accessibleNameRef
-     * @defaultvalue ""
+     * **Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.
+     * Providing an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.
+     * @default ""
      * @public
      * @since 1.1.0
      */
     accessibleNameRef: string;
     /**
      * Defines the tooltip of the component.
-     * <br>
-     * <b>Note:</b> If applicable an external label reference should always be the preferred option to provide context to the <code>ui5-switch</code> component over a tooltip.
-     * @type {string}
-     * @name sap.ui.webc.main.Switch.prototype.tooltip
-     * @defaultvalue: ""
+     *
+     * **Note:** If applicable an external label reference should always be the preferred option to provide context to the `ui5-switch` component over a tooltip.
+     * @default ""
      * @public
      * @since 1.9.0
      */
     tooltip: string;
     /**
      * Defines whether the component is required.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.Switch.prototype.required
-     * @defaultvalue false
+     * @default false
      * @public
      * @since 1.16.0
      */
     required: boolean;
     /**
-     * Determines the name with which the component 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 component so that it can be submitted as
-     * part of an HTML form. Do not use this property unless you need to submit a form.
+     * Determines the name by which the component will be identified upon submission in an HTML form.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.Switch.prototype.name
-     * @defaultvalue ""
+     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * @default ""
      * @public
      * @since 1.16.0
      */
     name: string;
-    /**
-     * The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit, when <code>Switch</code> is a part of HTML form.
-     *
-     * @type {HTMLElement[]}
-     * @slot
-     * @private
-     * @since 1.16.0
-     */
-    formSupport: Array<HTMLElement>;
     static i18nBundle: I18nBundle;
-    onBeforeRendering(): void;
-    _enableFormSupport(): void;
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): "on" | null;
     get sapNextIcon(): "less" | "accept";
     _onclick(): void;
     _onkeydown(e: KeyboardEvent): void;

package/dist/Switch.js

@@ -9,18 +9,17 @@ 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.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { isDesktop, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/less.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import Icon from "./Icon.js";
 import SwitchDesign from "./types/SwitchDesign.js";
+import { FORM_CHECKABLE_REQUIRED } from "./generated/i18n/i18n-defaults.js";
 // Template
 import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
 // Styles
@@ -28,60 +27,43 @@ import switchCss from "./generated/themes/Switch.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-switch</code> component is used for changing between binary states.
- * <br>
- * The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties,
- * but texts longer than 3 letters will be cutted off.
- * <br>
- * However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (<code>&lt;ui5-switch style="width: 200px"></code>), and set widths, depending on the texts they would use.
- * <br>
- * Note: the component would not automatically stretch to fit the whole text width.
+ * ### Overview
+ * The `ui5-switch` component is used for changing between binary states.
  *
- * <h3>Keyboard Handling</h3>
- * The state can be changed by pressing the Space and Enter keys.
+ * The component can display texts, that will be switched, based on the component state, via the `textOn` and `textOff` properties,
+ * but texts longer than 3 letters will be cutted off.
  *
- * <h3>CSS Shadow Parts</h3>
+ * However, users are able to customize the width of `ui5-switch` with pure CSS (`<ui5-switch style="width: 200px">`), and set widths, depending on the texts they would use.
  *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-switch</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>slider - Used to style the track, where the handle is being slid</li>
- * <li>text-on - Used to style the <code>textOn</code> property text</li>
- * <li>text-off - Used to style the <code>textOff</code> property text</li>
- * <li>handle - Used to style the handle of the switch</li>
- * </ul>
+ * Note: the component would not automatically stretch to fit the whole text width.
  *
- * <h3>ES6 Module Import</h3>
+ * ### Keyboard Handling
+ * The state can be changed by pressing the Space and Enter keys.
  *
- * <code>import "@ui5/webcomponents/dist/Switch";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Switch";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Switch
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-switch
+ * @extends UI5Element
  * @public
  * @since 0.8.0
+ * @csspart slider - Used to style the track, where the handle is being slid
+ * @csspart text-on - Used to style the `textOn` property text
+ * @csspart text-off - Used to style the `textOff` property text
+ * @csspart handle - Used to style the handle of the switch
  */
 let Switch = Switch_1 = class Switch extends UI5Element {
-    onBeforeRendering() {
-        this._enableFormSupport();
-    }
-    _enableFormSupport() {
-        const formSupport = getFeature("FormSupport");
-        if (formSupport) {
-            formSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-                const switchComponent = element;
-                nativeInput.checked = !!switchComponent.checked;
-                nativeInput.disabled = !!switchComponent.disabled;
-                nativeInput.value = switchComponent.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
-        }
+    get formValidityMessage() {
+        return Switch_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;
     }
     get sapNextIcon() {
         return this.checked ? "accept" : "less";
@@ -132,11 +114,12 @@ let Switch = Switch_1 = class Switch extends UI5Element {
         const hasLabel = this.graphical || this.textOn || this.textOff;
         return {
             main: {
-                "ui5-switch-desktop": isDesktop(),
+                "ui5-switch--desktop": isDesktop(),
                 "ui5-switch--disabled": this.disabled,
                 "ui5-switch--checked": this.checked,
                 "ui5-switch--semantic": this.graphical,
                 "ui5-switch--no-label": !hasLabel,
+                "ui5-switch--safari": isSafari(),
             },
         };
     }
@@ -189,12 +172,10 @@ __decorate([
 __decorate([
     property()
 ], Switch.prototype, "name", void 0);
-__decorate([
-    slot()
-], Switch.prototype, "formSupport", void 0);
 Switch = Switch_1 = __decorate([
     customElement({
         tag: "ui5-switch",
+        formAssociated: true,
         languageAware: true,
         styles: switchCss,
         renderer: litRender,
@@ -203,9 +184,8 @@ Switch = Switch_1 = __decorate([
     })
     /**
      * Fired when the component checked state changes.
-     *
      * @public
-     * @event sap.ui.webc.main.Switch#change
+     * @allowPreventDefault
      */
     ,
     event("change")

package/dist/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/less.js\";\nimport { getFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.js\";\nimport type FormSupport from \"./features/InputElementsFormSupport.js\";\nimport type { IFormElement, NativeFormElement } from \"./features/InputElementsFormSupport.js\";\nimport Icon from \"./Icon.js\";\nimport SwitchDesign from \"./types/SwitchDesign.js\";\n\n// Template\nimport SwitchTemplate from \"./generated/templates/SwitchTemplate.lit.js\";\n\n// Styles\nimport switchCss from \"./generated/themes/Switch.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-switch</code> component is used for changing between binary states.\n * <br>\n * The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties,\n * but texts longer than 3 letters will be cutted off.\n * <br>\n * However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (<code>&lt;ui5-switch style=\"width: 200px\"></code>), and set widths, depending on the texts they would use.\n * <br>\n * Note: the component would not automatically stretch to fit the whole text width.\n *\n * <h3>Keyboard Handling</h3>\n * The state can be changed by pressing the Space and Enter keys.\n *\n * <h3>CSS Shadow Parts</h3>\n *\n * <ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.\n * <br>\n * The <code>ui5-switch</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>slider - Used to style the track, where the handle is being slid</li>\n * <li>text-on - Used to style the <code>textOn</code> property text</li>\n * <li>text-off - Used to style the <code>textOff</code> property text</li>\n * <li>handle - Used to style the handle of the switch</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/Switch\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.Switch\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-switch\n * @public\n * @since 0.8.0\n */\n@customElement({\n\ttag: \"ui5-switch\",\n\tlanguageAware: true,\n\tstyles: switchCss,\n\trenderer: litRender,\n\ttemplate: SwitchTemplate,\n\tdependencies: [Icon],\n})\n/**\n * Fired when the component checked state changes.\n *\n * @public\n * @event sap.ui.webc.main.Switch#change\n */\n@event(\"change\")\nclass Switch extends UI5Element implements IFormElement {\n\t/**\n\t * Defines the component design.\n\t * <br><br>\n\t * <b>Note:</b> If <code>Graphical</code> type is set,\n\t * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.\n\t *\n\t * @public\n\t * @type {sap.ui.webc.main.types.SwitchDesign}\n\t * @name sap.ui.webc.main.Switch.prototype.design\n\t * @defaultValue \"Textual\"\n\t */\n\t@property({ type: SwitchDesign, defaultValue: SwitchDesign.Textual })\n\tdesign!: `${SwitchDesign}`;\n\n\t/**\n\t * Defines if the component is checked.\n\t * <br><br>\n\t * <b>Note:</b> The property can be changed with user interaction,\n\t * either by cliking the component, or by pressing the <code>Enter</code> or <code>Space</code> key.\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.Switch.prototype.checked\n\t * @defaultvalue false\n\t * @formEvents change\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tchecked!: boolean;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t * <br><br>\n\t * <b>Note:</b> A disabled component is noninteractive.\n\t *\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.Switch.prototype.disabled\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean\n\n\t/**\n\t * Defines the text, displayed when the component is checked.\n\t *\n\t * <br><br>\n\t * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.Switch.prototype.textOn\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\ttextOn!: string\n\n\t/**\n\t * Defines the text, displayed when the component is not checked.\n\t * <br><br>\n\t * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.Switch.prototype.textOff\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\ttextOff!: string\n\n\t/**\n\t * Sets the accessible ARIA name of the component.\n\t *\n\t * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.\n\t * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.\n\t * @type {string}\n\t * @name sap.ui.webc.main.Switch.prototype.accessibleName\n\t * @defaultvalue: \"\"\n\t * @public\n\t * @since 1.2.0\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component.\n\t *\n\t * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.\n\t * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.\n\t * @type {string}\n\t * @name sap.ui.webc.main.Switch.prototype.accessibleNameRef\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property({ defaultValue: \"\" })\n\taccessibleNameRef!: string;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t * <br>\n\t * <b>Note:</b> If applicable an external label reference should always be the preferred option to provide context to the <code>ui5-switch</code> component over a tooltip.\n\t * @type {string}\n\t * @name sap.ui.webc.main.Switch.prototype.tooltip\n\t * @defaultvalue: \"\"\n\t * @public\n\t * @since 1.9.0\n\t */\n\t@property()\n\ttooltip!: string;\n\n\t/**\n\t * Defines whether the component is required.\n\t *\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.Switch.prototype.required\n\t * @defaultvalue false\n\t * @public\n\t * @since 1.16.0\n\t */\n\t@property({ type: Boolean })\n\trequired!: boolean;\n\n\t/**\n\t * Determines the name with which the component will be submitted in an HTML form.\n\t *\n\t * <br><br>\n\t * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:\n\t * <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\t *\n\t * <br><br>\n\t * <b>Note:</b> When set, a native <code>input</code> HTML element\n\t * will be created inside the component so that it can be submitted as\n\t * part of an HTML form. Do not use this property unless you need to submit a form.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.Switch.prototype.name\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.16.0\n\t */\n\t@property()\n\tname!: string;\n\n\t/**\n\t * The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit, when <code>Switch</code> is a part of HTML form.\n\t *\n\t * @type {HTMLElement[]}\n\t * @slot\n\t * @private\n\t * @since 1.16.0\n\t */\n\t@slot()\n\tformSupport!: Array<HTMLElement>;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\tthis._enableFormSupport();\n\t}\n\n\t_enableFormSupport() {\n\t\tconst formSupport = getFeature<typeof FormSupport>(\"FormSupport\");\n\t\tif (formSupport) {\n\t\t\tformSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: NativeFormElement) => {\n\t\t\t\tconst switchComponent = (element as Switch);\n\t\t\t\t(nativeInput as HTMLInputElement).checked = !!switchComponent.checked;\n\t\t\t\tnativeInput.disabled = !!switchComponent.disabled;\n\t\t\t\tnativeInput.value = switchComponent.checked ? \"on\" : \"\";\n\t\t\t});\n\t\t} else if (this.name) {\n\t\t\tconsole.warn(`In order for the \"name\" property to have effect, you should also: import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`); // eslint-disable-line\n\t\t}\n\t}\n\n\tget sapNextIcon() {\n\t\treturn this.checked ? \"accept\" : \"less\";\n\t}\n\n\t_onclick() {\n\t\tthis.toggle();\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 (isEnter(e)) {\n\t\t\tthis._onclick();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis._onclick();\n\t\t}\n\t}\n\n\ttoggle() {\n\t\tif (!this.disabled) {\n\t\t\tthis.checked = !this.checked;\n\t\t\tconst changePrevented = !this.fireEvent(\"change\", null, true);\n\t\t\t// Angular two way data binding;\n\t\t\tconst valueChangePrevented = !this.fireEvent(\"value-changed\", null, true);\n\n\t\t\tif (changePrevented || valueChangePrevented) {\n\t\t\t\tthis.checked = !this.checked;\n\t\t\t}\n\t\t}\n\t}\n\n\tget graphical() {\n\t\treturn this.design === SwitchDesign.Graphical;\n\t}\n\n\tget hasNoLabel() {\n\t\treturn !(this.graphical || this.textOn || this.textOff);\n\t}\n\n\tget _textOn() {\n\t\treturn this.graphical ? \"\" : this.textOn;\n\t}\n\n\tget _textOff() {\n\t\treturn this.graphical ? \"\" : this.textOff;\n\t}\n\n\tget effectiveTabIndex() {\n\t\treturn this.disabled ? undefined : \"0\";\n\t}\n\n\tget classes(): ClassMap {\n\t\tconst hasLabel = this.graphical || this.textOn || this.textOff;\n\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-switch-desktop\": isDesktop(),\n\t\t\t\t\"ui5-switch--disabled\": this.disabled,\n\t\t\t\t\"ui5-switch--checked\": this.checked,\n\t\t\t\t\"ui5-switch--semantic\": this.graphical,\n\t\t\t\t\"ui5-switch--no-label\": !hasLabel,\n\t\t\t},\n\t\t};\n\t}\n\n\tget effectiveAriaDisabled() {\n\t\treturn this.disabled ? \"true\" : undefined;\n\t}\n\n\tget accessibilityOnText() {\n\t\treturn this._textOn;\n\t}\n\n\tget accessibilityOffText() {\n\t\treturn this._textOff;\n\t}\n\n\tget hiddenText() {\n\t\treturn this.checked ? this.accessibilityOnText : this.accessibilityOffText;\n\t}\n\n\tget ariaLabelText() {\n\t\treturn [getEffectiveAriaLabelText(this), this.hiddenText].join(\" \").trim();\n\t}\n\n\tstatic async onDefine() {\n\t\tSwitch.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nSwitch.define();\n\nexport default Switch;\n"]}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop, isSafari } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/less.js\";\nimport Icon from \"./Icon.js\";\nimport SwitchDesign from \"./types/SwitchDesign.js\";\nimport { FORM_CHECKABLE_REQUIRED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport SwitchTemplate from \"./generated/templates/SwitchTemplate.lit.js\";\n\n// Styles\nimport switchCss from \"./generated/themes/Switch.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-switch` component is used for changing between binary states.\n *\n * The component can display texts, that will be switched, based on the component state, via the `textOn` and `textOff` properties,\n * but texts longer than 3 letters will be cutted off.\n *\n * However, users are able to customize the width of `ui5-switch` with pure CSS (`<ui5-switch style=\"width: 200px\">`), and set widths, depending on the texts they would use.\n *\n * Note: the component would not automatically stretch to fit the whole text width.\n *\n * ### Keyboard Handling\n * The state can be changed by pressing the Space and Enter keys.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Switch\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 0.8.0\n * @csspart slider - Used to style the track, where the handle is being slid\n * @csspart text-on - Used to style the `textOn` property text\n * @csspart text-off - Used to style the `textOff` property text\n * @csspart handle - Used to style the handle of the switch\n */\n@customElement({\n\ttag: \"ui5-switch\",\n\tformAssociated: true,\n\tlanguageAware: true,\n\tstyles: switchCss,\n\trenderer: litRender,\n\ttemplate: SwitchTemplate,\n\tdependencies: [Icon],\n})\n/**\n * Fired when the component checked state changes.\n * @public\n * @allowPreventDefault\n */\n@event(\"change\")\nclass Switch extends UI5Element implements IFormInputElement {\n\t/**\n\t * Defines the component design.\n\t *\n\t * **Note:** If `Graphical` type is set,\n\t * positive and negative icons will replace the `textOn` and `textOff`.\n\t * @public\n\t * @default \"Textual\"\n\t */\n\t@property({ type: SwitchDesign, defaultValue: SwitchDesign.Textual })\n\tdesign!: `${SwitchDesign}`;\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 the component, or by 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!: boolean;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t *\n\t * **Note:** A disabled component is noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean\n\n\t/**\n\t * Defines the text, displayed when the component is checked.\n\t *\n\t * **Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttextOn!: string\n\n\t/**\n\t * Defines the text, displayed when the component is not checked.\n\t *\n\t * **Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttextOff!: string\n\n\t/**\n\t * Sets the accessible ARIA name of the component.\n\t *\n\t * **Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\n\t * Providing an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.\n\t * @default \"\"\n\t * @public\n\t * @since 1.2.0\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component.\n\t *\n\t * **Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\n\t * Providing an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.\n\t * @default \"\"\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property({ defaultValue: \"\" })\n\taccessibleNameRef!: string;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t *\n\t * **Note:** If applicable an external label reference should always be the preferred option to provide context to the `ui5-switch` component over a tooltip.\n\t * @default \"\"\n\t * @public\n\t * @since 1.9.0\n\t */\n\t@property()\n\ttooltip!: string;\n\n\t/**\n\t * Defines whether the component is required.\n\t * @default false\n\t * @public\n\t * @since 1.16.0\n\t */\n\t@property({ type: Boolean })\n\trequired!: boolean;\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 \"\"\n\t * @public\n\t * @since 1.16.0\n\t */\n\t@property()\n\tname!: string;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tget formValidityMessage() {\n\t\treturn Switch.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 ? \"on\" : null;\n\t}\n\n\tget sapNextIcon() {\n\t\treturn this.checked ? \"accept\" : \"less\";\n\t}\n\n\t_onclick() {\n\t\tthis.toggle();\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 (isEnter(e)) {\n\t\t\tthis._onclick();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis._onclick();\n\t\t}\n\t}\n\n\ttoggle() {\n\t\tif (!this.disabled) {\n\t\t\tthis.checked = !this.checked;\n\t\t\tconst changePrevented = !this.fireEvent(\"change\", null, true);\n\t\t\t// Angular two way data binding;\n\t\t\tconst valueChangePrevented = !this.fireEvent(\"value-changed\", null, true);\n\n\t\t\tif (changePrevented || valueChangePrevented) {\n\t\t\t\tthis.checked = !this.checked;\n\t\t\t}\n\t\t}\n\t}\n\n\tget graphical() {\n\t\treturn this.design === SwitchDesign.Graphical;\n\t}\n\n\tget hasNoLabel() {\n\t\treturn !(this.graphical || this.textOn || this.textOff);\n\t}\n\n\tget _textOn() {\n\t\treturn this.graphical ? \"\" : this.textOn;\n\t}\n\n\tget _textOff() {\n\t\treturn this.graphical ? \"\" : this.textOff;\n\t}\n\n\tget effectiveTabIndex() {\n\t\treturn this.disabled ? undefined : \"0\";\n\t}\n\n\tget classes(): ClassMap {\n\t\tconst hasLabel = this.graphical || this.textOn || this.textOff;\n\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-switch--desktop\": isDesktop(),\n\t\t\t\t\"ui5-switch--disabled\": this.disabled,\n\t\t\t\t\"ui5-switch--checked\": this.checked,\n\t\t\t\t\"ui5-switch--semantic\": this.graphical,\n\t\t\t\t\"ui5-switch--no-label\": !hasLabel,\n\t\t\t\t\"ui5-switch--safari\": isSafari(),\n\t\t\t},\n\t\t};\n\t}\n\n\tget effectiveAriaDisabled() {\n\t\treturn this.disabled ? \"true\" : undefined;\n\t}\n\n\tget accessibilityOnText() {\n\t\treturn this._textOn;\n\t}\n\n\tget accessibilityOffText() {\n\t\treturn this._textOff;\n\t}\n\n\tget hiddenText() {\n\t\treturn this.checked ? this.accessibilityOnText : this.accessibilityOffText;\n\t}\n\n\tget ariaLabelText() {\n\t\treturn [getEffectiveAriaLabelText(this), this.hiddenText].join(\" \").trim();\n\t}\n\n\tstatic async onDefine() {\n\t\tSwitch.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nSwitch.define();\n\nexport default Switch;\n"]}