@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/SuggestionListItem.d.ts

@@ -1,15 +1,15 @@
-import StandardListItem from "./StandardListItem.js";
+import ListItemStandard from "./ListItemStandard.js";
 /**
  * @class
  * The `ui5-li-suggestion-item` represents the suggestion item in the `ui5-input`
  * suggestion popover.
  * @constructor
- * @extends StandardListItem
+ * @extends ListItemStandard
  * @csspart title - Used to style the title of the suggestion list item
  * @csspart description - Used to style the description of the suggestion list item
  * @csspart info - Used to style the info of the suggestion list item
  */
-declare class SuggestionListItem extends StandardListItem {
+declare class SuggestionListItem extends ListItemStandard {
     /**
      * Defines a description that can contain HTML.
      * **Note:** If not specified, the `description` property will be used.
@@ -24,7 +24,7 @@ declare class SuggestionListItem extends StandardListItem {
     titleText: Array<Node>;
     onBeforeRendering(): void;
     get effectiveTitle(): string;
-    get hasDescription(): string | number;
+    get hasDescription(): string | true | undefined;
     get groupItem(): boolean;
 }
 export default SuggestionListItem;

package/dist/SuggestionListItem.js

@@ -5,20 +5,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import StandardListItem from "./StandardListItem.js";
-import SuggestionListItemTemplate from "./generated/templates/SuggestionListItemTemplate.lit.js";
+import ListItemStandard from "./ListItemStandard.js";
+import SuggestionListItemTemplate from "./SuggestionListItemTemplate.js";
 /**
  * @class
  * The `ui5-li-suggestion-item` represents the suggestion item in the `ui5-input`
  * suggestion popover.
  * @constructor
- * @extends StandardListItem
+ * @extends ListItemStandard
  * @csspart title - Used to style the title of the suggestion list item
  * @csspart description - Used to style the description of the suggestion list item
  * @csspart info - Used to style the info of the suggestion list item
  */
-let SuggestionListItem = class SuggestionListItem extends StandardListItem {
+let SuggestionListItem = class SuggestionListItem extends ListItemStandard {
     onBeforeRendering() {
         super.onBeforeRendering();
         this.hasTitle = !!this.titleText.length;
@@ -27,7 +28,7 @@ let SuggestionListItem = class SuggestionListItem extends StandardListItem {
         return this.titleText.filter(node => node.nodeType !== Node.COMMENT_NODE).map(el => el.textContent).join("");
     }
     get hasDescription() {
-        return this.richDescription.length || this.description;
+        return this.richDescription.length > 0 || this.description;
     }
     get groupItem() {
         return false;
@@ -41,6 +42,7 @@ __decorate([
 ], SuggestionListItem.prototype, "titleText", void 0);
 SuggestionListItem = __decorate([
     customElement({
+        renderer: jsxRenderer,
         tag: "ui5-li-suggestion-item",
         template: SuggestionListItemTemplate,
     })

package/dist/SuggestionListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuggestionListItem.js","sourceRoot":"","sources":["../src/SuggestionListItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,0BAA0B,MAAM,yDAAyD,CAAC;AAEjG;;;;;;;;;GASG;AAKH,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;IAiBhD,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IACzC,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9G,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,CAAC;IACxD,CAAC;IAED,IAAI,SAAS;QACZ,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AAzBA;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;2DACQ;AAOpC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;qDACd;AAfnB,kBAAkB;IAJvB,aAAa,CAAC;QACd,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,0BAA0B;KACpC,CAAC;GACI,kBAAkB,CAiCvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,eAAe,kBAAkB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport StandardListItem from \"./StandardListItem.js\";\nimport SuggestionListItemTemplate from \"./generated/templates/SuggestionListItemTemplate.lit.js\";\n\n/**\n * @class\n * The `ui5-li-suggestion-item` represents the suggestion item in the `ui5-input`\n * suggestion popover.\n * @constructor\n * @extends StandardListItem\n * @csspart title - Used to style the title of the suggestion list item\n * @csspart description - Used to style the description of the suggestion list item\n * @csspart info - Used to style the info of the suggestion list item\n */\n@customElement({\n\ttag: \"ui5-li-suggestion-item\",\n\ttemplate: SuggestionListItemTemplate,\n})\nclass SuggestionListItem extends StandardListItem {\n\t/**\n\t * Defines a description that can contain HTML.\n\t * **Note:** If not specified, the `description` property will be used.\n\t * @since 1.0.0-rc.8\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\trichDescription!: Array<HTMLElement>\n\n\t/**\n\t * Defines the title text of the suggestion item.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttitleText!: Array<Node>;\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tthis.hasTitle = !!this.titleText.length;\n\t}\n\n\tget effectiveTitle() {\n\t\treturn this.titleText.filter(node => node.nodeType !== Node.COMMENT_NODE).map(el => el.textContent).join(\"\");\n\t}\n\n\tget hasDescription() {\n\t\treturn this.richDescription.length || this.description;\n\t}\n\n\tget groupItem() {\n\t\treturn false;\n\t}\n}\n\nSuggestionListItem.define();\n\nexport default SuggestionListItem;\n"]}
+{"version":3,"file":"SuggestionListItem.js","sourceRoot":"","sources":["../src/SuggestionListItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AAEzE;;;;;;;;;GASG;AAMH,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;IAiBhD,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IACzC,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9G,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC;IAC5D,CAAC;IAED,IAAI,SAAS;QACZ,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AAzBA;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;2DACQ;AAOpC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;qDACd;AAfnB,kBAAkB;IALvB,aAAa,CAAC;QACd,QAAQ,EAAE,WAAW;QACrB,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,0BAA0B;KACpC,CAAC;GACI,kBAAkB,CAiCvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,eAAe,kBAAkB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport ListItemStandard from \"./ListItemStandard.js\";\nimport SuggestionListItemTemplate from \"./SuggestionListItemTemplate.js\";\n\n/**\n * @class\n * The `ui5-li-suggestion-item` represents the suggestion item in the `ui5-input`\n * suggestion popover.\n * @constructor\n * @extends ListItemStandard\n * @csspart title - Used to style the title of the suggestion list item\n * @csspart description - Used to style the description of the suggestion list item\n * @csspart info - Used to style the info of the suggestion list item\n */\n@customElement({\n\trenderer: jsxRenderer,\n\ttag: \"ui5-li-suggestion-item\",\n\ttemplate: SuggestionListItemTemplate,\n})\nclass SuggestionListItem extends ListItemStandard {\n\t/**\n\t * Defines a description that can contain HTML.\n\t * **Note:** If not specified, the `description` property will be used.\n\t * @since 1.0.0-rc.8\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\trichDescription!: Array<HTMLElement>\n\n\t/**\n\t * Defines the title text of the suggestion item.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttitleText!: Array<Node>;\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tthis.hasTitle = !!this.titleText.length;\n\t}\n\n\tget effectiveTitle() {\n\t\treturn this.titleText.filter(node => node.nodeType !== Node.COMMENT_NODE).map(el => el.textContent).join(\"\");\n\t}\n\n\tget hasDescription() {\n\t\treturn this.richDescription.length > 0 || this.description;\n\t}\n\n\tget groupItem() {\n\t\treturn false;\n\t}\n}\n\nSuggestionListItem.define();\n\nexport default SuggestionListItem;\n"]}

package/dist/SuggestionListItemTemplate.d.ts

@@ -0,0 +1,3 @@
+import type SuggestionListItem from "./SuggestionListItem.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+export default function SuggestionListItemTemplate(this: SuggestionListItem, hooks?: Partial<ListItemHooks>): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/SuggestionListItemTemplate.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import ListItemStandardTemplate from "./ListItemStandardTemplate.js";
+const predefinedHooks = {
+    listItemContent,
+};
+export default function SuggestionListItemTemplate(hooks) {
+    const currentHooks = { ...predefinedHooks, ...hooks };
+    return ListItemStandardTemplate.call(this, currentHooks);
+}
+function listItemContent() {
+    return _jsxs(_Fragment, { children: [_jsxs("div", { class: "ui5-li-text-wrapper", children: [this.hasTitle && (_jsx("span", { part: "title", class: "ui5-li-title", children: _jsx("slot", {}) })), this.hasDescription && (_jsxs("div", { class: "ui5-li-description-info-wrapper", children: [_jsx("span", { part: "description", class: "ui5-li-desc", children: this.richDescription.length ? (_jsx("slot", { name: "richDescription" })) : (this.description) }), this.additionalText && (_jsx("span", { part: "additional-text", class: "ui5-li-additional-text", children: this.additionalText }))] })), !this.typeActive && _jsx("span", { class: "ui5-hidden-text", children: this.type })] }), !this.description && this.additionalText && (_jsx("span", { part: "additional-text", class: "ui5-li-additional-text", children: this.additionalText }))] });
+}
+//# sourceMappingURL=SuggestionListItemTemplate.js.map

package/dist/SuggestionListItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionListItemTemplate.js","sourceRoot":"","sources":["../src/SuggestionListItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAGrE,MAAM,eAAe,GAA2B;IAC/C,eAAe;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAA2B,KAA8B;IAC1G,MAAM,YAAY,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE,CAAC;IAEtD,OAAO,wBAAwB,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAED,SAAS,eAAe;IACvB,OAAO,8BACN,eAAK,KAAK,EAAC,qBAAqB,aAC9B,IAAI,CAAC,QAAQ,IAAI,CACjB,eAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,cAAc,YACtC,gBAAa,GACP,CACP,EAEA,IAAI,CAAC,cAAc,IAAI,CACvB,eAAK,KAAK,EAAC,iCAAiC,aAC3C,eAAM,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,aAAa,YAE1C,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,CAC7B,eAAM,IAAI,EAAC,iBAAiB,GAAQ,CACpC,CAAC,CAAC,CAAC,CACH,IAAI,CAAC,WAAW,CAChB,GACI,EAGN,IAAI,CAAC,cAAc,IAAI,CACtB,eAAM,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,wBAAwB,YAAE,IAAI,CAAC,cAAc,GAAQ,CACxF,IAEG,CACN,EAEA,CAAC,IAAI,CAAC,UAAU,IAAI,eAAM,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,IAAI,GAAQ,IAChE,EAEL,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,IAAI,CAC5C,eAAM,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,wBAAwB,YAAE,IAAI,CAAC,cAAc,GAAQ,CACxF,IACC,CAAC;AACL,CAAC","sourcesContent":["import type SuggestionListItem from \"./SuggestionListItem.js\";\nimport ListItemStandardTemplate from \"./ListItemStandardTemplate.js\";\nimport type { ListItemHooks } from \"./ListItemTemplate.js\";\n\nconst predefinedHooks: Partial<ListItemHooks> = {\n\tlistItemContent,\n};\n\nexport default function SuggestionListItemTemplate(this: SuggestionListItem, hooks?: Partial<ListItemHooks>) {\n\tconst currentHooks = { ...predefinedHooks, ...hooks };\n\n\treturn ListItemStandardTemplate.call(this, currentHooks);\n}\n\nfunction listItemContent(this: SuggestionListItem) {\n\treturn <>\n\t\t<div class=\"ui5-li-text-wrapper\">\n\t\t\t{this.hasTitle && (\n\t\t\t\t<span part=\"title\" class=\"ui5-li-title\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\t\t\t)}\n\n\t\t\t{this.hasDescription && (\n\t\t\t\t<div class=\"ui5-li-description-info-wrapper\">\n\t\t\t\t\t<span part=\"description\" class=\"ui5-li-desc\">\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tthis.richDescription.length ? (\n\t\t\t\t\t\t\t\t<slot name=\"richDescription\"></slot>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tthis.description\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\n\t\t\t\t\t{\n\t\t\t\t\t\tthis.additionalText && (\n\t\t\t\t\t\t\t<span part=\"additional-text\" class=\"ui5-li-additional-text\">{this.additionalText}</span>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{!this.typeActive && <span class=\"ui5-hidden-text\">{this.type}</span>}\n\t\t</div>\n\n\t\t{!this.description && this.additionalText && (\n\t\t\t<span part=\"additional-text\" class=\"ui5-li-additional-text\">{this.additionalText}</span>\n\t\t)}\n\t</>;\n}\n"]}

package/dist/Switch.d.ts

@@ -1,10 +1,9 @@
 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
@@ -34,7 +33,11 @@ import SwitchDesign from "./types/SwitchDesign.js";
  * @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 {
+    eventDetails: {
+        change: void;
+        "value-changed": void;
+    };
     /**
      * Defines the component design.
      *
@@ -67,47 +70,47 @@ declare class Switch extends UI5Element implements IFormElement {
      * Defines the text, displayed when the component is checked.
      *
      * **Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).
-     * @default ""
+     * @default undefined
      * @public
      */
-    textOn: string;
+    textOn?: string;
     /**
      * Defines the text, displayed when the component is not checked.
      *
      * **Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).
-     * @default ""
+     * @default undefined
      * @public
      */
-    textOff: string;
+    textOff?: string;
     /**
      * Sets the accessible ARIA name of the component.
      *
      * **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 ""
+     * @default undefined
      * @public
      * @since 1.2.0
      */
-    accessibleName: string;
+    accessibleName?: string;
     /**
      * Receives id(or many ids) of the elements that label the component.
      *
      * **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 ""
+     * @default undefined
      * @public
      * @since 1.1.0
      */
-    accessibleNameRef: string;
+    accessibleNameRef?: string;
     /**
      * Defines the tooltip of the component.
      *
      * **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 ""
+     * @default undefined
      * @public
      * @since 1.9.0
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Defines whether the component is required.
      * @default false
@@ -116,44 +119,40 @@ declare class Switch extends UI5Element implements IFormElement {
      */
     required: boolean;
     /**
-     * Determines the name with which the component will be submitted in an HTML form.
+     * Determines the name by which the component will be identified upon submission in an HTML form.
      *
-     * **Important:** For the `name` property to have effect, you must add the following import to your project:
-     * `import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`
-     *
-     * **Note:** When set, a native `input` 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.
-     * @default ""
+     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * @default undefined
      * @public
      * @since 1.16.0
      */
-    name: string;
+    name?: string;
     /**
-     * The slot is used to render native `input` HTML element within Light DOM to enable form submit, when `Switch` is a part of HTML form.
-     * @private
-     * @since 1.16.0
+     * Defines the form value of the component.
+     * @default ""
+     * @since 2.12.0
+     * @public
      */
-    formSupport: Array<HTMLElement>;
+    value: string;
     static i18nBundle: I18nBundle;
-    onBeforeRendering(): void;
-    _enableFormSupport(): void;
-    get sapNextIcon(): "less" | "accept";
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): string | null;
+    get sapNextIcon(): "accept" | "less";
     _onclick(): void;
     _onkeydown(e: KeyboardEvent): void;
     _onkeyup(e: KeyboardEvent): void;
     toggle(): void;
     get graphical(): boolean;
     get hasNoLabel(): boolean;
-    get _textOn(): string;
-    get _textOff(): string;
-    get effectiveTabIndex(): "0" | undefined;
-    get classes(): ClassMap;
+    get _textOn(): string | undefined;
+    get _textOff(): string | undefined;
+    get effectiveTabIndex(): 0 | undefined;
     get effectiveAriaDisabled(): "true" | undefined;
-    get accessibilityOnText(): string;
-    get accessibilityOffText(): string;
-    get hiddenText(): string;
+    get accessibilityOnText(): string | undefined;
+    get accessibilityOffText(): string | undefined;
+    get hiddenText(): string | undefined;
     get ariaLabelText(): string;
-    static onDefine(): Promise<void>;
 }
 export default Switch;

package/dist/Switch.js

@@ -8,21 +8,18 @@ var Switch_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.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";
+import SwitchTemplate from "./SwitchTemplate.js";
 // Styles
 import switchCss from "./generated/themes/Switch.css.js";
 /**
@@ -54,22 +51,65 @@ import switchCss from "./generated/themes/Switch.css.js";
  * @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
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the component design.
+         *
+         * **Note:** If `Graphical` type is set,
+         * positive and negative icons will replace the `textOn` and `textOff`.
+         * @public
+         * @default "Textual"
+         */
+        this.design = "Textual";
+        /**
+         * Defines if the component is checked.
+         *
+         * **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
+         */
+        this.checked = false;
+        /**
+         * Defines whether the component is disabled.
+         *
+         * **Note:** A disabled component is noninteractive.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Defines whether the component is required.
+         * @default false
+         * @public
+         * @since 1.16.0
+         */
+        this.required = false;
+        /**
+         * Defines the form value of the component.
+         * @default ""
+         * @since 2.12.0
+         * @public
+         */
+        this.value = "";
+    }
+    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() {
+        if (this.checked) {
+            return this.value || "on";
         }
+        return null;
     }
     get sapNextIcon() {
         return this.checked ? "accept" : "less";
@@ -93,9 +133,9 @@ let Switch = Switch_1 = class Switch extends UI5Element {
     toggle() {
         if (!this.disabled) {
             this.checked = !this.checked;
-            const changePrevented = !this.fireEvent("change", null, true);
+            const changePrevented = !this.fireDecoratorEvent("change");
             // Angular two way data binding;
-            const valueChangePrevented = !this.fireEvent("value-changed", null, true);
+            const valueChangePrevented = !this.fireDecoratorEvent("value-changed");
             if (changePrevented || valueChangePrevented) {
                 this.checked = !this.checked;
             }
@@ -114,20 +154,7 @@ let Switch = Switch_1 = class Switch extends UI5Element {
         return this.graphical ? "" : this.textOff;
     }
     get effectiveTabIndex() {
-        return this.disabled ? undefined : "0";
-    }
-    get classes() {
-        const hasLabel = this.graphical || this.textOn || this.textOff;
-        return {
-            main: {
-                "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(),
-            },
-        };
+        return this.disabled ? undefined : 0;
     }
     get effectiveAriaDisabled() {
         return this.disabled ? "true" : undefined;
@@ -144,12 +171,9 @@ let Switch = Switch_1 = class Switch extends UI5Element {
     get ariaLabelText() {
         return [getEffectiveAriaLabelText(this), this.hiddenText].join(" ").trim();
     }
-    static async onDefine() {
-        Switch_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-    }
 };
 __decorate([
-    property({ type: SwitchDesign, defaultValue: SwitchDesign.Textual })
+    property()
 ], Switch.prototype, "design", void 0);
 __decorate([
     property({ type: Boolean })
@@ -167,7 +191,7 @@ __decorate([
     property()
 ], Switch.prototype, "accessibleName", void 0);
 __decorate([
-    property({ defaultValue: "" })
+    property()
 ], Switch.prototype, "accessibleNameRef", void 0);
 __decorate([
     property()
@@ -179,24 +203,38 @@ __decorate([
     property()
 ], Switch.prototype, "name", void 0);
 __decorate([
-    slot()
-], Switch.prototype, "formSupport", void 0);
+    property()
+], Switch.prototype, "value", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], Switch, "i18nBundle", void 0);
 Switch = Switch_1 = __decorate([
     customElement({
         tag: "ui5-switch",
+        formAssociated: true,
         languageAware: true,
         styles: switchCss,
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: SwitchTemplate,
-        dependencies: [Icon],
     })
     /**
      * Fired when the component checked state changes.
      * @public
-     * @allowPreventDefault
      */
     ,
-    event("change")
+    event("change", {
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * Fired to make Angular two way data binding work properly.
+     * @private
+     */
+    ,
+    event("value-changed", {
+        bubbles: true,
+        cancelable: true,
+    })
 ], Switch);
 Switch.define();
 export default Switch;

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, 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 { 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 * ### 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\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 IFormElement {\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 with which the component will be submitted in an HTML form.\n\t *\n\t * **Important:** For the `name` property to have effect, you must add the following import to your project:\n\t * `import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\t *\n\t * **Note:** When set, a native `input` 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 * @default \"\"\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 `input` HTML element within Light DOM to enable form submit, when `Switch` is a part of HTML form.\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\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"]}
+{"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-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/less.js\";\nimport SwitchDesign from \"./types/SwitchDesign.js\";\nimport { FORM_CHECKABLE_REQUIRED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport SwitchTemplate from \"./SwitchTemplate.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: jsxRenderer,\n\ttemplate: SwitchTemplate,\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 Switch extends UI5Element implements IFormInputElement {\n\teventDetails!: {\n\t\tchange: void\n\t\t\"value-changed\": void\n\t}\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()\n\tdesign: `${SwitchDesign}` = \"Textual\";\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 = false;\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 = false\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 undefined\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 undefined\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 undefined\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 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 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 undefined\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 = false;\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 * @since 1.16.0\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the form value of the component.\n\t * @default \"\"\n\t * @since 2.12.0\n\t * @public\n\t */\n\t@property()\n\tvalue = \"\";\n\n\t@i18n(\"@ui5/webcomponents\")\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\tif (this.checked) {\n\t\t\treturn this.value || \"on\";\n\t\t}\n\n\t\treturn 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.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 = !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 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\nSwitch.define();\n\nexport default Switch;\n"]}

package/dist/SwitchTemplate.d.ts

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

package/dist/SwitchTemplate.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "./Icon.js";
+import { isDesktop, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
+import acceptIcon from "@ui5/webcomponents-icons/dist/accept.js";
+import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
+export default function SwitchTemplate() {
+    return (_jsxs("div", { class: {
+            "ui5-switch-root": true,
+            "ui5-switch--desktop": isDesktop(),
+            "ui5-switch--disabled": this.disabled,
+            "ui5-switch--checked": this.checked,
+            "ui5-switch--semantic": this.graphical,
+            "ui5-switch--no-label": !(this.graphical || this.textOn || this.textOff),
+            "ui5-switch--safari": isSafari(),
+        }, role: "switch", "aria-label": this.ariaLabelText, "aria-checked": this.checked, "aria-disabled": this.effectiveAriaDisabled, "aria-required": this.required, onClick: this._onclick, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, tabindex: this.effectiveTabIndex, title: this.tooltip, children: [_jsx("div", { class: "ui5-switch-inner", children: _jsx("div", { class: "ui5-switch-track", part: "slider", children: _jsxs("div", { class: "ui5-switch-slider", children: [this.graphical ?
+                                _jsxs(_Fragment, { children: [_jsx("span", { class: "ui5-switch-text ui5-switch-text--on", children: _jsx(Icon, { name: acceptIcon, class: "ui5-switch-icon-on" }) }), _jsx("span", { class: "ui5-switch-text ui5-switch-text--off", children: _jsx(Icon, { name: declineIcon, class: "ui5-switch-icon-off" }) })] })
+                                :
+                                    _jsx(_Fragment, { children: this.hasNoLabel ?
+                                            _jsxs(_Fragment, { children: [_jsx("span", { class: "ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon", part: "text-on", children: _jsx(Icon, { name: this.sapNextIcon, class: "ui5-switch-no-label-icon-on" }) }), _jsx("span", { class: "ui5-switch-text ui5-switch-text--off ui5-switch-no-label-icon", part: "text-off", children: _jsx(Icon, { name: this.sapNextIcon, class: "ui5-switch-no-label-icon-off" }) })] })
+                                            :
+                                                _jsxs(_Fragment, { children: [_jsx("span", { class: "ui5-switch-text ui5-switch-text--on", part: "text-on", children: this._textOn }), _jsx("span", { class: "ui5-switch-text ui5-switch-text--off", part: "text-off", children: this._textOff })] }) }), _jsx("span", { class: "ui5-switch-handle", part: "handle" })] }) }) }), _jsx("input", { type: 'checkbox', checked: this.checked, class: "ui5-switch-input", "data-sap-no-tab-ref": true })] }));
+}
+//# sourceMappingURL=SwitchTemplate.js.map

package/dist/SwitchTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchTemplate.js","sourceRoot":"","sources":["../src/SwitchTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAE7E,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,WAAW,MAAM,0CAA0C,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,cAAc;IACrC,OAAO,CACN,eACC,KAAK,EAAE;YACN,iBAAiB,EAAE,IAAI;YACvB,qBAAqB,EAAE,SAAS,EAAE;YAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,qBAAqB,EAAE,IAAI,CAAC,OAAO;YACnC,sBAAsB,EAAE,IAAI,CAAC,SAAS;YACtC,sBAAsB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC;YACxE,oBAAoB,EAAE,QAAQ,EAAE;SAChC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,aAAa,kBAChB,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,qBAAqB,mBAC1B,IAAI,CAAC,QAAQ,EAC5B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,KAAK,EAAE,IAAI,CAAC,OAAO,aAEnB,cAAK,KAAK,EAAC,kBAAkB,YAC5B,cAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,YAC1C,eAAK,KAAK,EAAC,mBAAmB,aAC5B,IAAI,CAAC,SAAS,CAAC,CAAC;gCAChB,8BACC,eAAM,KAAK,EAAC,qCAAqC,YAChD,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,oBAAoB,GAAE,GAC9C,EACP,eAAM,KAAK,EAAC,sCAAsC,YACjD,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,qBAAqB,GAAE,GAChD,IACL;gCACH,CAAC;oCACD,4BACE,IAAI,CAAC,UAAU,CAAC,CAAC;4CACjB,8BACC,eAAM,KAAK,EAAC,8DAA8D,EAAC,IAAI,EAAC,SAAS,YACxF,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,6BAA6B,GAAG,GAC9D,EACP,eAAM,KAAK,EAAC,+DAA+D,EAAC,IAAI,EAAC,UAAU,YAC1F,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,8BAA8B,GAAG,GAC/D,IACL;4CACH,CAAC;gDACD,8BACC,eAAM,KAAK,EAAC,qCAAqC,EAAC,IAAI,EAAC,SAAS,YAAE,IAAI,CAAC,OAAO,GAAQ,EACtF,eAAM,KAAK,EAAC,sCAAsC,EAAC,IAAI,EAAC,UAAU,YAAE,IAAI,CAAC,QAAQ,GAAQ,IACvF,GAEF,EAGJ,eAAM,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,GAAQ,IAChD,GACD,GACD,EACN,gBAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,kBAAkB,gCAAsB,IACvF,CAAC,CAAC;AACV,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport { isDesktop, isSafari } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type Switch from \"./Switch.js\";\nimport acceptIcon from \"@ui5/webcomponents-icons/dist/accept.js\";\nimport declineIcon from \"@ui5/webcomponents-icons/dist/decline.js\";\n\nexport default function SwitchTemplate(this: Switch) {\n\treturn (\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-switch-root\": true,\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\": !(this.graphical || this.textOn || this.textOff),\n\t\t\t\t\"ui5-switch--safari\": isSafari(),\n\t\t\t}}\n\t\t\trole=\"switch\"\n\t\t\taria-label={this.ariaLabelText}\n\t\t\taria-checked={this.checked}\n\t\t\taria-disabled={this.effectiveAriaDisabled}\n\t\t\taria-required={this.required}\n\t\t\tonClick={this._onclick}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\ttabindex={this.effectiveTabIndex}\n\t\t\ttitle={this.tooltip}\n\t\t>\n\t\t\t<div class=\"ui5-switch-inner\">\n\t\t\t\t<div class=\"ui5-switch-track\" part=\"slider\">\n\t\t\t\t\t<div class=\"ui5-switch-slider\">\n\t\t\t\t\t\t{this.graphical ?\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on\">\n\t\t\t\t\t\t\t\t\t<Icon name={acceptIcon} class=\"ui5-switch-icon-on\"/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off\">\n\t\t\t\t\t\t\t\t\t<Icon name={declineIcon} class=\"ui5-switch-icon-off\"/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{this.hasNoLabel ?\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon\" part=\"text-on\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon name={this.sapNextIcon} class=\"ui5-switch-no-label-icon-on\" />\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off ui5-switch-no-label-icon\" part=\"text-off\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon name={this.sapNextIcon} class=\"ui5-switch-no-label-icon-off\" />\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on\" part=\"text-on\">{this._textOn}</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off\" part=\"text-off\">{this._textOff}</span>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<span class=\"ui5-switch-handle\" part=\"handle\"></span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<input type='checkbox' checked={this.checked} class=\"ui5-switch-input\" data-sap-no-tab-ref/>\n\t\t</div>);\n}\n"]}