@ui5/webcomponents 0.0.0-037d08c67

package/dist/Switch.d.ts

@@ -0,0 +1,160 @@
+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 "@ui5/webcomponents-icons/dist/accept.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/less.js";
+import SwitchDesign from "./types/SwitchDesign.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-switch` component is used for changing between binary states.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * Note: the component would not automatically stretch to fit the whole text width.
+ *
+ * ### Keyboard Handling
+ * The state can be changed by pressing the Space and Enter keys.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Switch";`
+ * @constructor
+ * @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 IFormInputElement {
+    eventDetails: {
+        change: void;
+        "value-changed": void;
+    };
+    /**
+     * Defines the component design.
+     *
+     * **Note:** If `Graphical` type is set,
+     * positive and negative icons will replace the `textOn` and `textOff`.
+     * @public
+     * @default "Textual"
+     */
+    design: `${SwitchDesign}`;
+    /**
+     * 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
+     */
+    checked: boolean;
+    /**
+     * Defines whether the component is disabled.
+     *
+     * **Note:** A disabled component is noninteractive.
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * 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 undefined
+     * @public
+     */
+    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 undefined
+     * @public
+     */
+    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 undefined
+     * @public
+     * @since 1.2.0
+     */
+    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 undefined
+     * @public
+     * @since 1.1.0
+     */
+    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 undefined
+     * @public
+     * @since 1.9.0
+     */
+    tooltip?: string;
+    /**
+     * Defines whether the component is required.
+     * @default false
+     * @public
+     * @since 1.16.0
+     */
+    required: boolean;
+    /**
+     * Determines the name by which the component will be identified upon submission in an HTML form.
+     *
+     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * @default undefined
+     * @public
+     * @since 1.16.0
+     */
+    name?: string;
+    /**
+     * Defines the form value of the component.
+     * @default ""
+     * @since 2.12.0
+     * @public
+     */
+    value: string;
+    _cancelAction: boolean;
+    _isSpacePressed: boolean;
+    static i18nBundle: I18nBundle;
+    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 | undefined;
+    get _textOff(): string | undefined;
+    get effectiveTabIndex(): 0 | undefined;
+    get effectiveAriaDisabled(): "true" | undefined;
+    get accessibilityOnText(): string | undefined;
+    get accessibilityOffText(): string | undefined;
+    get hiddenText(): string | undefined;
+    get ariaLabelText(): string;
+}
+export default Switch;

package/dist/Switch.js

@@ -0,0 +1,267 @@
+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 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-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { isSpace, isEnter, isShift, isEscape, isSpaceShift, } from "@ui5/webcomponents-base/dist/Keys.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 SwitchDesign from "./types/SwitchDesign.js";
+import { FORM_CHECKABLE_REQUIRED } from "./generated/i18n/i18n-defaults.js";
+// Template
+import SwitchTemplate from "./SwitchTemplate.js";
+// Styles
+import switchCss from "./generated/themes/Switch.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-switch` component is used for changing between binary states.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * Note: the component would not automatically stretch to fit the whole text width.
+ *
+ * ### Keyboard Handling
+ * The state can be changed by pressing the Space and Enter keys.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Switch";`
+ * @constructor
+ * @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 {
+    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 = "";
+        this._cancelAction = false;
+        this._isSpacePressed = false;
+    }
+    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";
+    }
+    _onclick() {
+        this.toggle();
+    }
+    _onkeydown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+            this._isSpacePressed = true;
+        }
+        else if (isShift(e) || isEscape(e)) {
+            this._cancelAction = true;
+        }
+        if (isEnter(e)) {
+            this._onclick();
+        }
+    }
+    _onkeyup(e) {
+        const isSpaceKey = isSpace(e);
+        const isCancelKey = isShift(e) || isEscape(e);
+        if (isSpaceKey || isSpaceShift(e)) {
+            if (this._cancelAction) {
+                this._cancelAction = false;
+                this._isSpacePressed = false;
+                e.preventDefault();
+                return;
+            }
+            this._isSpacePressed = false;
+        }
+        else if (isCancelKey && !this._isSpacePressed) {
+            this._cancelAction = false;
+        }
+        if (isSpaceKey) {
+            this._onclick();
+        }
+    }
+    toggle() {
+        if (!this.disabled) {
+            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 = !this.checked;
+            }
+        }
+    }
+    get graphical() {
+        return this.design === SwitchDesign.Graphical;
+    }
+    get hasNoLabel() {
+        return !(this.graphical || this.textOn || this.textOff);
+    }
+    get _textOn() {
+        return this.graphical ? "" : this.textOn;
+    }
+    get _textOff() {
+        return this.graphical ? "" : this.textOff;
+    }
+    get effectiveTabIndex() {
+        return this.disabled ? undefined : 0;
+    }
+    get effectiveAriaDisabled() {
+        return this.disabled ? "true" : undefined;
+    }
+    get accessibilityOnText() {
+        return this._textOn;
+    }
+    get accessibilityOffText() {
+        return this._textOff;
+    }
+    get hiddenText() {
+        return this.checked ? this.accessibilityOnText : this.accessibilityOffText;
+    }
+    get ariaLabelText() {
+        return [getEffectiveAriaLabelText(this), this.hiddenText].join(" ").trim();
+    }
+};
+__decorate([
+    property()
+], Switch.prototype, "design", void 0);
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "disabled", void 0);
+__decorate([
+    property()
+], Switch.prototype, "textOn", void 0);
+__decorate([
+    property()
+], Switch.prototype, "textOff", void 0);
+__decorate([
+    property()
+], Switch.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], Switch.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property()
+], Switch.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "required", void 0);
+__decorate([
+    property()
+], Switch.prototype, "name", void 0);
+__decorate([
+    property()
+], Switch.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Switch.prototype, "_cancelAction", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Switch.prototype, "_isSpacePressed", 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: jsxRenderer,
+        template: SwitchTemplate,
+    })
+    /**
+     * 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,
+    })
+], Switch);
+Switch.define();
+export default Switch;
+//# sourceMappingURL=Switch.js.map

package/dist/Switch.js.map

@@ -0,0 +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-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport {\n\tisSpace, isEnter, isShift, isEscape,\n\tisSpaceShift,\n} 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\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@property({ type: Boolean, noAttribute: true })\n\t_cancelAction = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_isSpacePressed = false;\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\tthis._isSpacePressed = true;\n\t\t} else if (isShift(e) || isEscape(e)) {\n\t\t\tthis._cancelAction = true;\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\tconst isSpaceKey = isSpace(e);\n\t\tconst isCancelKey = isShift(e) || isEscape(e);\n\n\t\tif (isSpaceKey || isSpaceShift(e)) {\n\t\t\tif (this._cancelAction) {\n\t\t\t\tthis._cancelAction = false;\n\t\t\t\tthis._isSpacePressed = false;\n\t\t\t\te.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis._isSpacePressed = false;\n\t\t} else if (isCancelKey && !this._isSpacePressed) {\n\t\t\tthis._cancelAction = false;\n\t\t}\n\t\tif (isSpaceKey) {\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"]}

package/dist/Tab.d.ts

@@ -0,0 +1,173 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import SemanticColor from "./types/SemanticColor.js";
+import ListItemType from "./types/ListItemType.js";
+import type { TabContainerStripInfo, TabContainerOverflowInfo, ITab } from "./TabContainer.js";
+import type ListItemCustom from "./ListItemCustom.js";
+import TabInStripTemplate from "./TabInStripTemplate.js";
+import TabInOverflowTemplate from "./TabInOverflowTemplate.js";
+interface TabInStrip extends HTMLElement {
+    realTabReference: Tab;
+}
+interface TabInOverflow extends ListItemCustom {
+    realTabReference: Tab;
+}
+/**
+ * @class
+ * The `ui5-tab` represents a selectable item inside a `ui5-tabcontainer`.
+ * It defines both the item in the tab strip (top part of the `ui5-tabcontainer`) and the
+ * content that is presented to the user once the tab is selected.
+ * @abstract
+ * @constructor
+ * @extends UI5Element
+ * @implements {ITab}
+ * @public
+ */
+declare class Tab extends UI5Element implements ITabbable, ITab {
+    /**
+     * The text to be displayed for the item.
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Disabled tabs can't be selected.
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Represents the "additionalText" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the "additionalText" is displayed larger.
+     * @default undefined
+     * @public
+     */
+    additionalText?: string;
+    /**
+     * Defines the icon source URI to be displayed as graphical element within the component.
+     * The SAP-icons font provides numerous built-in icons.
+     * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     * @default undefined
+     * @public
+     */
+    icon?: string;
+    /**
+     * Defines the component's design color.
+     *
+     * The design is applied to:
+     *
+     * - the component icon
+     * - the `text` when the component overflows
+     * - the tab selection line
+     *
+     * Available designs are: `"Default"`, `"Neutral"`, `"Positive"`, `"Critical"` and `"Negative"`.
+     *
+     * **Note:** The design depends on the current theme.
+     * @default "Default"
+     * @public
+     */
+    design: `${SemanticColor}`;
+    /**
+     * Specifies if the component is selected.
+     * @default false
+     * @public
+     */
+    selected: boolean;
+    /**
+     * Defines if the tab is movable.
+     *
+     * @default false
+     * @public
+     * @since 2.0.0
+     */
+    movable: boolean;
+    _isTopLevelTab: boolean;
+    _selectedTabReference?: Tab;
+    /**
+     * Holds the content associated with this tab.
+     * @public
+     */
+    content: DefaultSlot<Node>;
+    /**
+     * Defines hierarchies with nested sub tabs.
+     *
+     * **Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.
+     * @public
+     */
+    items: Slot<ITab>;
+    _isInline?: boolean;
+    _forcedMixedMode?: boolean;
+    _getElementInStrip?: () => HTMLElement | undefined;
+    _getElementInOverflow?: () => HTMLElement | undefined;
+    _forcedPosinset?: number;
+    _forcedSetsize?: number;
+    _forcedStyleInOverflow?: Record<string, any>;
+    static i18nBundle: I18nBundle;
+    set forcedTabIndex(val: string);
+    get forcedTabIndex(): string;
+    get displayText(): string | undefined;
+    get isSeparator(): boolean;
+    get stripPresentation(): object;
+    get overflowPresentation(): object;
+    get stableDomRef(): string;
+    get requiresExpandButton(): boolean;
+    get isSingleClickArea(): boolean;
+    get isTwoClickArea(): boolean;
+    get isOnSelectedTabPath(): boolean;
+    get _effectiveSlotName(): string | undefined;
+    get _defaultSlotName(): "" | "disabled-slot";
+    get hasOwnContent(): boolean;
+    get expandBtnAccessibilityAttributes(): Pick<AccessibilityAttributes, "hasPopup">;
+    receiveStripInfo({ getElementInStrip, posinset, setsize, isInline, isTopLevelTab, mixedMode, }: TabContainerStripInfo): void;
+    receiveOverflowInfo({ getElementInOverflow, style }: TabContainerOverflowInfo): void;
+    /**
+     * Returns the DOM reference of the tab that is placed in the header.
+     *
+     * **Note:** Tabs, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs will return `undefined`.
+     *
+     * **Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.
+     * @public
+     * @since 1.0.0-rc.16
+     */
+    getDomRefInStrip(): HTMLElement | undefined;
+    getFocusDomRef(): HTMLElement | undefined;
+    focus(focusOptions?: FocusOptions): Promise<void>;
+    get isMixedModeTab(): boolean | undefined;
+    get isTextOnlyTab(): boolean;
+    get isIconTab(): boolean;
+    get effectiveDisabled(): true | undefined;
+    get effectiveSelected(): boolean;
+    get effectiveHidden(): boolean;
+    get tabs(): Array<Tab>;
+    get ariaLabelledBy(): string;
+    get stripClasses(): {
+        itemClasses: string;
+        additionalTextClasses: string;
+    };
+    get additionalTextClasses(): string;
+    get expandButtonTitle(): string;
+    get _roleDescription(): string | undefined;
+    get _ariaHasPopup(): "menu" | undefined;
+    get semanticIconName(): "alert" | "sys-enter-2" | "error" | null;
+    get _designDescription(): string | null;
+    get semanticIconClasses(): string;
+    get overflowClasses(): string;
+    get overflowState(): ListItemType.Inactive | ListItemType.Active;
+    static get stripTemplate(): typeof TabInStripTemplate;
+    static get overflowTemplate(): typeof TabInOverflowTemplate;
+    _ondragstart(e: DragEvent): void;
+    _ondragend(e: DragEvent): void;
+    captureRef(ref: HTMLElement & {
+        realTabReference?: UI5Element;
+    } | null): void;
+    captureButtonRef(ref: HTMLElement & {
+        tab?: UI5Element;
+    } | null): void;
+}
+export default Tab;
+export type { TabInStrip, TabInOverflow, };