@ui5/webcomponents 0.0.0-d0bcf47c7 → 0.0.0-d4d43327a

package/dist/ResponsivePopover.js

@@ -0,0 +1,184 @@
+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 ResponsivePopover_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getNextZIndex } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import { RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON } from "./generated/i18n/i18n-defaults.js";
+import ResponsivePopoverTemplate from "./generated/templates/ResponsivePopoverTemplate.lit.js";
+import Popover from "./Popover.js";
+import Dialog from "./Dialog.js";
+import Button from "./Button.js";
+import Title from "./Title.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+// Styles
+import ResponsivePopoverCss from "./generated/themes/ResponsivePopover.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-responsive-popover</code> acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.
+ * The component improves tremendously the user experience on mobile.
+ *
+ * <h3>Usage</h3>
+ * Use it when you want to make sure that all the content is visible on any device.
+ *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-responsive-popover</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>header - Used to style the header of the component</li>
+ * <li>content - Used to style the content of the component</li>
+ * <li>footer - Used to style the footer of the component</li>
+ * </ul>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ResponsivePopover
+ * @extends sap.ui.webc.main.Popover
+ * @tagname ui5-responsive-popover
+ * @since 1.0.0-rc.6
+ * @public
+ */
+let ResponsivePopover = ResponsivePopover_1 = class ResponsivePopover extends Popover {
+    constructor() {
+        super();
+    }
+    /**
+     * Shows popover on desktop and dialog on mobile.
+     * @param {HTMLElement} opener the element that the popover is shown at
+     * @param {boolean} [preventInitialFocus=false] Prevents applying the focus inside the popup
+     * @public
+     * @async
+     * @method
+     * @name sap.ui.webc.main.ResponsivePopover#showAt
+     * @returns {Promise} Resolves when the responsive popover is open
+     */
+    async showAt(opener, preventInitialFocus = false) {
+        if (!isPhone()) {
+            await super.showAt(opener, preventInitialFocus);
+        }
+        else {
+            this.style.display = "contents";
+            const nextZIndex = getNextZIndex();
+            if (!nextZIndex) {
+                return;
+            }
+            this.style.zIndex = nextZIndex.toString();
+            await this._dialog.show(preventInitialFocus);
+        }
+    }
+    /**
+     * Closes the popover/dialog.
+     * @public
+     * @method
+     * @name sap.ui.webc.main.ResponsivePopover#close
+     * @returns {void}
+     */
+    close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
+        if (!isPhone()) {
+            super.close(escPressed, preventRegistryUpdate, preventFocusRestore);
+        }
+        else {
+            this._dialog.close(escPressed, preventRegistryUpdate, preventFocusRestore);
+        }
+    }
+    toggle(opener) {
+        if (this.isOpen()) {
+            return this.close();
+        }
+        this.showAt(opener);
+    }
+    /**
+     * Tells if the responsive popover is open.
+     * @public
+     * @method
+     * @name sap.ui.webc.main.ResponsivePopover#isOpen
+     * @returns {boolean}
+     */
+    isOpen() {
+        return (isPhone() && this._dialog) ? this._dialog.isOpen() : super.isOpen();
+    }
+    get classes() {
+        const allClasses = super.classes;
+        allClasses.header = {
+            "ui5-responsive-popover-header": true,
+            "ui5-responsive-popover-header-no-title": !this.headerText,
+        };
+        return allClasses;
+    }
+    get _dialog() {
+        return this.shadowRoot.querySelector("[ui5-dialog]");
+    }
+    get contentDOM() {
+        return isPhone() ? this._dialog.contentDOM : super.contentDOM;
+    }
+    get _isPhone() {
+        return isPhone();
+    }
+    get _displayHeader() {
+        return (isPhone() || !this.contentOnlyOnDesktop) && super._displayHeader;
+    }
+    get _displayFooter() {
+        return isPhone() || !this.contentOnlyOnDesktop;
+    }
+    get _closeDialogAriaLabel() {
+        return ResponsivePopover_1.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
+    }
+    _beforeDialogOpen(e) {
+        this.open = true;
+        this.opened = true;
+        this._propagateDialogEvent(e);
+    }
+    _afterDialogClose(e) {
+        this.open = false;
+        this.opened = false;
+        this._propagateDialogEvent(e);
+    }
+    _propagateDialogEvent(e) {
+        const type = e.type.replace("ui5-", "");
+        this.fireEvent(type, e.detail);
+    }
+    get isModal() {
+        if (!isPhone()) {
+            return super.isModal;
+        }
+        return this._dialog.isModal;
+    }
+    static async onDefine() {
+        ResponsivePopover_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ResponsivePopover.prototype, "contentOnlyOnDesktop", void 0);
+__decorate([
+    property({ type: Boolean })
+], ResponsivePopover.prototype, "_hideHeader", void 0);
+__decorate([
+    property({ type: Boolean })
+], ResponsivePopover.prototype, "_hideCloseButton", void 0);
+ResponsivePopover = ResponsivePopover_1 = __decorate([
+    customElement({
+        tag: "ui5-responsive-popover",
+        styles: [Popover.styles, ResponsivePopoverCss],
+        template: ResponsivePopoverTemplate,
+        dependencies: [
+            ...Popover.dependencies,
+            Button,
+            Dialog,
+            Title,
+        ],
+    })
+], ResponsivePopover);
+ResponsivePopover.define();
+export default ResponsivePopover;
+//# sourceMappingURL=ResponsivePopover.js.map

package/dist/ResponsivePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsivePopover.js","sourceRoot":"","sources":["../src/ResponsivePopover.ts"],"names":[],"mappings":"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"}

package/dist/SegmentedButton.d.ts

@@ -0,0 +1,89 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import SegmentedButtonItem from "./SegmentedButtonItem.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-segmented-button</code> shows a group of items. When the user clicks or taps
+ * one of the items, it stays in a pressed state. It automatically resizes the items
+ * to fit proportionally within the component. When no width is set, the component uses the available width.
+ * <br><br>
+ * <b>Note:</b> There can be just one selected <code>item</code> at a time.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/SegmentedButton";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.SegmentedButton
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-segmented-button
+ * @since 1.0.0-rc.6
+ * @appenddocs sap.ui.webc.main.SegmentedButtonItem
+ * @public
+ */
+declare class SegmentedButton extends UI5Element {
+    /**
+     * Defines the accessible ARIA name of the component.
+     *
+     * @type {string}
+     * @defaultvalue undefined
+     * @public
+     * @name sap.ui.webc.main.SegmentedButton.prototype.accessibleName
+     * @since 1.0.3
+     */
+    accessibleName?: string;
+    /**
+     * Defines the items of <code>ui5-segmented-button</code>.
+     * <br><br>
+     * <b>Note:</b> Multiple items are allowed.
+     * <br><br>
+     * <b>Note:</b> Use the <code>ui5-segmented-button-item</code> for the intended design.
+     * @type {sap.ui.webc.main.ISegmentedButtonItem[]}
+     * @name sap.ui.webc.main.SegmentedButton.prototype.default
+     * @slot items
+     * @public
+     */
+    items: Array<SegmentedButtonItem>;
+    static i18nBundle: I18nBundle;
+    _itemNavigation: ItemNavigation;
+    absoluteWidthSet: boolean;
+    percentageWidthSet: boolean;
+    hasPreviouslyFocusedItem: boolean;
+    _handleResizeBound: ResizeObserverCallback;
+    widths?: Array<number>;
+    _selectedItem?: SegmentedButtonItem;
+    static onDefine(): Promise<void>;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    onBeforeRendering(): void;
+    onAfterRendering(): Promise<void>;
+    prepareToMeasureItems(): void;
+    measureItemsWidth(): Promise<void>;
+    normalizeSelection(): void;
+    _selectItem(e: MouseEvent | KeyboardEvent): this | undefined;
+    _onclick(e: MouseEvent): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent): void;
+    _onmousedown(e: MouseEvent): void;
+    _onfocusin(e: FocusEvent): void;
+    _doLayout(): Promise<void>;
+    /**
+     * Currently selected item.
+     *
+     * @readonly
+     * @type {sap.ui.webc.main.ISegmentedButtonItem}
+     * @name sap.ui.webc.main.SegmentedButton.prototype.selectedItem
+     * @public
+     */
+    get selectedItem(): SegmentedButtonItem | undefined;
+    get ariaDescribedBy(): string;
+    get ariaDescription(): string;
+}
+export default SegmentedButton;

package/dist/SegmentedButton.js

@@ -0,0 +1,237 @@
+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 SegmentedButton_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 ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import { isSpace, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { SEGMENTEDBUTTON_ARIA_DESCRIPTION, SEGMENTEDBUTTON_ARIA_DESCRIBEDBY } from "./generated/i18n/i18n-defaults.js";
+import SegmentedButtonItem from "./SegmentedButtonItem.js";
+// Template
+import SegmentedButtonTemplate from "./generated/templates/SegmentedButtonTemplate.lit.js";
+// Styles
+import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-segmented-button</code> shows a group of items. When the user clicks or taps
+ * one of the items, it stays in a pressed state. It automatically resizes the items
+ * to fit proportionally within the component. When no width is set, the component uses the available width.
+ * <br><br>
+ * <b>Note:</b> There can be just one selected <code>item</code> at a time.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/SegmentedButton";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.SegmentedButton
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-segmented-button
+ * @since 1.0.0-rc.6
+ * @appenddocs sap.ui.webc.main.SegmentedButtonItem
+ * @public
+ */
+let SegmentedButton = SegmentedButton_1 = class SegmentedButton extends UI5Element {
+    static async onDefine() {
+        SegmentedButton_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    constructor() {
+        super();
+        this._itemNavigation = new ItemNavigation(this, {
+            getItemsCallback: () => this.getSlottedNodes("items"),
+        });
+        this.absoluteWidthSet = false; // true when component width is set to absolute
+        this.percentageWidthSet = false; // true when component width is set to 100%
+        this.hasPreviouslyFocusedItem = false;
+        this._handleResizeBound = this._doLayout.bind(this);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this.parentNode, this._handleResizeBound);
+    }
+    onExitDOM() {
+        if (this.parentNode) {
+            ResizeHandler.deregister(this.parentNode, this._handleResizeBound);
+        }
+    }
+    onBeforeRendering() {
+        const items = this.getSlottedNodes("items");
+        items.forEach((item, index, arr) => {
+            item.posInSet = index + 1;
+            item.sizeOfSet = arr.length;
+        });
+        this.normalizeSelection();
+    }
+    async onAfterRendering() {
+        await this._doLayout();
+    }
+    prepareToMeasureItems() {
+        this.style.width = "";
+        this.items.forEach(item => {
+            item.style.width = "";
+        });
+    }
+    async measureItemsWidth() {
+        await renderFinished();
+        this.prepareToMeasureItems();
+        this.widths = this.items.map(item => {
+            // 1 is added because for width 100.44px the offsetWidth property is 100px and not 101px
+            return item.offsetWidth + 1;
+        });
+    }
+    normalizeSelection() {
+        const selectedItems = this.items.filter(item => item.pressed);
+        const selectedIndex = this._selectedItem ? selectedItems.indexOf(this._selectedItem) : -1;
+        if (this._selectedItem && selectedItems.length > 1) {
+            selectedItems.splice(selectedIndex, 1);
+        }
+        this._selectedItem = selectedItems.pop();
+        if (this._selectedItem) {
+            this.items.forEach(item => {
+                item.pressed = false;
+            });
+            this._selectedItem.pressed = true;
+        }
+    }
+    _selectItem(e) {
+        const target = e.target;
+        const isTargetSegmentedButtonItem = target.hasAttribute("ui5-segmented-button-item");
+        if (target.disabled || target === this.getDomRef() || !isTargetSegmentedButtonItem) {
+            return;
+        }
+        if (target !== this._selectedItem) {
+            if (this._selectedItem) {
+                this._selectedItem.pressed = false;
+            }
+            this._selectedItem = target;
+            this.fireEvent("selection-change", {
+                selectedItem: this._selectedItem,
+            });
+        }
+        this._selectedItem.pressed = true;
+        this._itemNavigation.setCurrentItem(this._selectedItem);
+        this.selectedItem.focus();
+        return this;
+    }
+    _onclick(e) {
+        this._selectItem(e);
+    }
+    _onkeydown(e) {
+        if (isEnter(e)) {
+            this._selectItem(e);
+        }
+        else if (isSpace(e)) {
+            e.preventDefault();
+        }
+    }
+    _onkeyup(e) {
+        if (isSpace(e)) {
+            this._selectItem(e);
+        }
+    }
+    _onmousedown(e) {
+        const eventTarget = e.target;
+        const isTargetSegmentedButtonItem = eventTarget.hasAttribute("ui5-segmented-button-item");
+        if (isTargetSegmentedButtonItem) {
+            eventTarget.focus();
+            this._itemNavigation.setCurrentItem(eventTarget);
+            this.hasPreviouslyFocusedItem = true;
+        }
+    }
+    _onfocusin(e) {
+        // If the component was previously focused,
+        // update the ItemNavigation to sync the button's tabindex values
+        if (this.hasPreviouslyFocusedItem) {
+            this._itemNavigation.setCurrentItem(e.target);
+            return;
+        }
+        // If the component is focused for the first time
+        // focus the selected item if such is present
+        if (this.selectedItem) {
+            this.selectedItem.focus();
+            this._itemNavigation.setCurrentItem(this._selectedItem);
+            this.hasPreviouslyFocusedItem = true;
+        }
+    }
+    async _doLayout() {
+        const itemsHaveWidth = this.widths && this.widths.some(itemWidth => itemWidth > 2); // 2 pixels added for rounding
+        if (!itemsHaveWidth) {
+            await this.measureItemsWidth();
+        }
+        const parentWidth = this.parentNode ? this.parentNode.offsetWidth : 0;
+        if (!this.style.width || this.percentageWidthSet) {
+            this.style.width = `${Math.max(...this.widths) * this.items.length}px`;
+            this.absoluteWidthSet = true;
+        }
+        this.items.forEach(item => {
+            item.style.width = "100%";
+        });
+        if (parentWidth <= this.offsetWidth && this.absoluteWidthSet) {
+            this.style.width = "100%";
+            this.percentageWidthSet = true;
+        }
+    }
+    /**
+     * Currently selected item.
+     *
+     * @readonly
+     * @type {sap.ui.webc.main.ISegmentedButtonItem}
+     * @name sap.ui.webc.main.SegmentedButton.prototype.selectedItem
+     * @public
+     */
+    get selectedItem() {
+        return this._selectedItem;
+    }
+    get ariaDescribedBy() {
+        return SegmentedButton_1.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY);
+    }
+    get ariaDescription() {
+        return SegmentedButton_1.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIPTION);
+    }
+};
+__decorate([
+    property({ defaultValue: undefined })
+], SegmentedButton.prototype, "accessibleName", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
+], SegmentedButton.prototype, "items", void 0);
+SegmentedButton = SegmentedButton_1 = __decorate([
+    customElement({
+        tag: "ui5-segmented-button",
+        languageAware: true,
+        renderer: litRender,
+        template: SegmentedButtonTemplate,
+        styles: SegmentedButtonCss,
+        dependencies: [SegmentedButtonItem],
+    })
+    /**
+     * Fired when the selected item changes.
+     *
+     * @event sap.ui.webc.main.SegmentedButton#selection-change
+     * @param {HTMLElement} selectedItem the pressed item.
+     * @public
+     */
+    ,
+    event("selection-change", {
+        detail: {
+            selectedItem: { type: HTMLElement },
+        },
+    })
+], SegmentedButton);
+SegmentedButton.define();
+export default SegmentedButton;
+//# sourceMappingURL=SegmentedButton.js.map

package/dist/SegmentedButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedButton.js","sourceRoot":"","sources":["../src/SegmentedButton.ts"],"names":[],"mappings":"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"}

package/dist/SegmentedButtonItem.d.ts

@@ -0,0 +1,74 @@
+import ToggleButton from "./ToggleButton.js";
+import ButtonDesign from "./types/ButtonDesign.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * Users can use the <code>ui5-segmented-button-item</code> as part of a <code>ui5-segmented-button</code>.
+ * <br><br>
+ * Clicking or tapping on a <code>ui5-segmented-button-item</code> changes its state to <code>pressed</code>.
+ * The item returns to its initial state when the user clicks or taps on it again.
+ * By applying additional custom CSS-styling classes, apps can give a different style to any
+ * <code>ui5-segmented-button-item</code>.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/SegmentedButtonItem";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.SegmentedButtonItem
+ * @extends sap.ui.webc.main.ToggleButton
+ * @abstract
+ * @tagname ui5-segmented-button-item
+ * @implements sap.ui.webc.main.ISegmentedButtonItem
+ * @public
+ */
+declare class SegmentedButtonItem extends ToggleButton {
+    /**
+     * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
+     *
+     * @type {sap.ui.webc.main.types.ButtonDesign}
+     * @defaultvalue "Default"
+     * @name sap.ui.webc.main.SegmentedButtonItem.prototype.design
+     * @public
+     */
+    design: ButtonDesign;
+    /**
+     * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
+     *
+     * @type {boolean}
+     * @defaultvalue false
+     * @name sap.ui.webc.main.SegmentedButtonItem.prototype.iconEnd
+     * @public
+     */
+    iconEnd: boolean;
+    /**
+     * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
+     *
+     * @type {boolean}
+     * @defaultvalue false
+     * @name sap.ui.webc.main.SegmentedButtonItem.prototype.submits
+     * @public
+     */
+    submits: boolean;
+    /**
+     * Defines the index of the item inside of the SegmentedButton.
+     *
+     * @type {sap.ui.webc.base.types.Integer}
+     * @defaultvalue 0
+     * @private
+     */
+    posInSet: number;
+    /**
+     * Defines how many items are inside of the SegmentedButton.
+     *
+     * @type {sap.ui.webc.base.types.Integer}
+     * @defaultvalue 0
+     * @private
+     */
+    sizeOfSet: number;
+    get ariaDescription(): string;
+}
+export default SegmentedButtonItem;

package/dist/SegmentedButtonItem.js

@@ -0,0 +1,70 @@
+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 SegmentedButtonItem_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js";
+import ToggleButton from "./ToggleButton.js";
+import ButtonDesign from "./types/ButtonDesign.js";
+import Icon from "./Icon.js";
+import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * Users can use the <code>ui5-segmented-button-item</code> as part of a <code>ui5-segmented-button</code>.
+ * <br><br>
+ * Clicking or tapping on a <code>ui5-segmented-button-item</code> changes its state to <code>pressed</code>.
+ * The item returns to its initial state when the user clicks or taps on it again.
+ * By applying additional custom CSS-styling classes, apps can give a different style to any
+ * <code>ui5-segmented-button-item</code>.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/SegmentedButtonItem";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.SegmentedButtonItem
+ * @extends sap.ui.webc.main.ToggleButton
+ * @abstract
+ * @tagname ui5-segmented-button-item
+ * @implements sap.ui.webc.main.ISegmentedButtonItem
+ * @public
+ */
+let SegmentedButtonItem = SegmentedButtonItem_1 = class SegmentedButtonItem extends ToggleButton {
+    get ariaDescription() {
+        return SegmentedButtonItem_1.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION);
+    }
+};
+__decorate([
+    property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })
+], SegmentedButtonItem.prototype, "design", void 0);
+__decorate([
+    property({ type: Boolean })
+], SegmentedButtonItem.prototype, "iconEnd", void 0);
+__decorate([
+    property({ type: Boolean })
+], SegmentedButtonItem.prototype, "submits", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 0 })
+], SegmentedButtonItem.prototype, "posInSet", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 0 })
+], SegmentedButtonItem.prototype, "sizeOfSet", void 0);
+SegmentedButtonItem = SegmentedButtonItem_1 = __decorate([
+    customElement({
+        tag: "ui5-segmented-button-item",
+        template: SegmentedButtonItemTemplate,
+        dependencies: [Icon],
+    })
+], SegmentedButtonItem);
+SegmentedButtonItem.define();
+export default SegmentedButtonItem;
+//# sourceMappingURL=SegmentedButtonItem.js.map