@sapudex/web-components 0.111.0

package/config/dist/Switch.js

@@ -0,0 +1,83 @@
+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;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import "@ui5/webcomponents/dist/Switch.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import "@ui5/webcomponents-icons/dist/accept.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/less.js";
+// Template
+import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
+// Styles
+import SwitchCss from "./generated/themes/Switch.css.js";
+export var SwitchColor;
+(function (SwitchColor) {
+    SwitchColor["NonSemantic"] = "Non-Semantic";
+    SwitchColor["Semantic"] = "Semantic";
+})(SwitchColor || (SwitchColor = {}));
+let UDExSwitch = class UDExSwitch extends UI5Element {
+    handleSwitchClick() {
+        if (!this.disabled) {
+            this.checked = !this.checked;
+            this.fireEvent("change", null, true);
+        }
+    }
+    handleSwitchKeyDown(e) {
+        if (e.key === "Enter") {
+            this.handleSwitchClick();
+        }
+    }
+    get switchTabIndex() {
+        return this.disabled ? undefined : "0";
+    }
+    get isActiveTrackClass() {
+        return this.checked ? "udex-switch__track--active" : "udex-switch__track--inactive";
+    }
+    get isSemanticColor() {
+        return this.color === SwitchColor.Semantic;
+    }
+};
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExSwitch.prototype, "label", void 0);
+__decorate([
+    property({ type: SwitchColor, defaultValue: SwitchColor.NonSemantic })
+], UDExSwitch.prototype, "color", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExSwitch.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: Boolean, defaultValue: false })
+], UDExSwitch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, defaultValue: false })
+], UDExSwitch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExSwitch.prototype, "tooltip", void 0);
+UDExSwitch = __decorate([
+    customElement({
+        tag: "udex-switch",
+        renderer: litRender,
+        styles: SwitchCss,
+        template: SwitchTemplate,
+    })
+    /**
+     * Fired when the component checked state changes.
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("change")
+], UDExSwitch);
+UDExSwitch.define();
+export default UDExSwitch;
+//# sourceMappingURL=Switch.js.map

package/config/dist/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,mCAAmC,CAAC;AAC3C,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AAErE,OAAO,yCAAyC,CAAC;AACjD,OAAO,0CAA0C,CAAC;AAClD,OAAO,uCAAuC,CAAC;AAE/C,WAAW;AACX,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,SAAS;AACT,OAAO,SAAS,MAAM,kCAAkC,CAAC;AAEzD,MAAM,CAAN,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,2CAA4B,CAAA;IAC5B,oCAAqB,CAAA;AACvB,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB;AAeD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IA6DjC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SACtC;IACH,CAAC;IAED,mBAAmB,CAAC,CAAgB;QAClC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;IACH,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC;IACzC,CAAC;IAED,IAAI,kBAAkB;QAGpB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,8BAA8B,CAAC;IACtF,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,QAAQ,CAAC;IAC7C,CAAC;CACF,CAAA;AA9EG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;yCAC5B;AAUf;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC,WAAW,EAAE,CAAC;yCACjD;AAUpB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;kDACnB;AAUxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;2CAC7B;AAUlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;4CAC5B;AAUnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;2CAC1B;AA3Df,UAAU;IAbf,aAAa,CAAC;QACb,GAAG,EAAE,aAAa;QAClB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,cAAc;KACzB,CAAC;IACF;;;;;OAKG;;IACF,KAAK,CAAC,QAAQ,CAAC;GACV,UAAU,CAuFf;AAED,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport \"@ui5/webcomponents/dist/Switch.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\n\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/less.js\";\n\n// Template\nimport SwitchTemplate from \"./generated/templates/SwitchTemplate.lit.js\";\n\n// Styles\nimport SwitchCss from \"./generated/themes/Switch.css.js\";\n\nexport enum SwitchColor {\n  NonSemantic = \"Non-Semantic\",\n  Semantic = \"Semantic\",\n}\n\n@customElement({\n  tag: \"udex-switch\",\n  renderer: litRender,\n  styles: SwitchCss,\n  template: SwitchTemplate,\n})\n/**\n * Fired when the component checked state changes.\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"change\")\nclass UDExSwitch extends UI5Element {\n  /**\n   * Defines the label near switch.\n   * @type {string}\n   * @name udex.components.UDExSwitch.prototype.label\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    label!: string;\n\n  /**\n   * Defines the color of the component.\n   * @type {SwitchColor}\n   * @name udex.components.UDExSwitch.prototype.color\n   * @defaultvalue SwitchColor.NonSemantic\n   * @public\n   */\n  @property({ type: SwitchColor, defaultValue: SwitchColor.NonSemantic })\n    color!: SwitchColor;\n\n  /**\n   * Sets the accessible ARIA name of the component.\n   * @type {string}\n   * @name udex.components.UDExSwitch.prototype.accessibleName\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    accessibleName!: string;\n\n  /**\n   * Defines if the component is checked.\n   * @type {boolean}\n   * @name udex.components.UDExSwitch.prototype.checked\n   * @defaultvalue false\n   * @public\n   */\n  @property({ type: Boolean, defaultValue: false })\n    checked!: boolean;\n\n  /**\n   * Defines whether the component is disabled.\n   * @type {boolean}\n   * @name udex.components.UDExSwitch.prototype.disabled\n   * @defaultvalue false\n   * @public\n   */\n  @property({ type: Boolean, defaultValue: false })\n    disabled!: boolean;\n\n  /**\n   * Defines the tooltip of the component.\n   * @type {string}\n   * @name udex.components.UDExSwitch.prototype.tooltip\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    tooltip!: string;\n\n  handleSwitchClick(): void {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.fireEvent(\"change\", null, true);\n    }\n  }\n\n  handleSwitchKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"Enter\") {\n      this.handleSwitchClick();\n    }\n  }\n\n  get switchTabIndex(): \"0\" | undefined {\n    return this.disabled ? undefined : \"0\";\n  }\n\n  get isActiveTrackClass():\n    | \"udex-switch__track--active\"\n    | \"udex-switch__track--inactive\" {\n    return this.checked ? \"udex-switch__track--active\" : \"udex-switch__track--inactive\";\n  }\n\n  get isSemanticColor(): boolean {\n    return this.color === SwitchColor.Semantic;\n  }\n}\n\nUDExSwitch.define();\n\nexport default UDExSwitch;\n"]}

package/config/dist/Tab.d.ts

@@ -0,0 +1,159 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import TabHeaderTemplate from "./generated/templates/TabHeaderTemplate.lit.js";
+import TabInOverflowTemplate from "./generated/templates/TabInOverflowTemplate.lit.js";
+export declare enum Target {
+    Blank = "_blank",
+    Parent = "_parent",
+    Self = "_self",
+    Top = "_top"
+}
+interface ITab extends UI5Element {
+    getTabInHeaderDomRef: () => ITab | null;
+    disabled?: boolean;
+    icon?: string;
+    selected?: boolean;
+    text?: string;
+    showAttentionBadge?: boolean;
+    href?: string;
+    content?: Array<Node>;
+    hasIcon: boolean;
+    isOnSelectedTab: boolean;
+    hasNotIcon: boolean;
+    hasNotHref: boolean;
+    isSelected: boolean;
+    selectedClass: string;
+    tabNavigation: any;
+    _individualSlot: string;
+    _effectiveSlotName: string;
+    _slotName: string;
+    _selected?: boolean;
+    _tabIndex: string;
+    _iconWithoutBackground: boolean;
+    _posinset?: number;
+    _setsize?: number;
+    _contentId?: string;
+    getElementInHeader?: () => ITab | null;
+    _realTab?: UDExTab;
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-tab</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/Tab.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.web-components.UDExTab
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname udex-tab
+ * @public
+ */
+declare class UDExTab extends UI5Element implements ITab {
+    /**
+     * Defines the text of tab.
+     * @name udex.components.UDExTab.prototype.text
+     * @public
+     * @type { string }
+     */
+    text: string;
+    /**
+     * Defines the selected tab.
+     * @name udex.components.UDExTab.prototype.selected
+     * @public
+     * @type { boolean }
+     * @defaultValue "false"
+     */
+    selected: boolean;
+    /**
+     * Defines the displaying attention badge.
+     * @name udex.components.UDExTab.prototype.showAttentionBadge
+     * @public
+     * @type { boolean }
+     * @defaultValue "false"
+     */
+    showAttentionBadge: boolean;
+    /**
+     * Defines the icon in the tab.
+     * @name udex.components.UDExTab.prototype.icon
+     * @public
+     * @type { string }
+     */
+    icon: string;
+    /**
+     * Defines the href of the tab.
+     * @name udex.components.UDExTab.prototype.href
+     * @public
+     * @type { string }
+     */
+    href: string;
+    /**
+     * Define the target of the tab
+     * @name udex.components.UDExTab.property.target
+     * @public@type { string }
+     */
+    target: "_blank" | "_parent" | "_self" | "_top";
+    /**
+     * Defines the tab.
+     * @private
+     * @type { Object }
+     */
+    _realTab: UDExTab;
+    /**
+     * Defines the selected tab for private use.
+     * @private
+     * @type { boolean }
+     * @defaultValue "false"
+     */
+    _selected: boolean;
+    /**
+     * Defines the tabindex of the tab.
+     * @private
+     * @type { string }
+     * @defaultValue "false"
+     */
+    _tabIndex: string;
+    /**
+     * Defines the background color of the component.
+     * @private
+     * @type { boolean }
+     * @defaultValue "false"
+    */
+    _iconWithoutBackground: boolean;
+    /**
+     * Defines the content of the tab.
+     * @type { HTMLElement[] }
+     * @name sap.ui.webc.main.UDExTab.prototype.default
+     * @slot content
+     * @public
+     */
+    content: Array<Node>;
+    getElementInHeader?: () => ITab | null;
+    _individualSlot: string;
+    getTabInHeaderDomRef(): ITab | null;
+    get isOnSelectedTab(): boolean;
+    get _effectiveSlotName(): string;
+    get hasIcon(): boolean;
+    get classWithIcon(): string;
+    get buttonClassWithIcon(): string;
+    get hasNotIcon(): boolean;
+    get hasNotHref(): boolean;
+    get isSelected(): boolean;
+    get selectedClass(): string;
+    get classWithIconWithoutBackground(): string;
+    get tabNavigation(): object;
+    get tabInOverflow(): object;
+    get _slotName(): string;
+    get effectiveSelected(): boolean;
+    get ariaLabelledBy(): string;
+    static get headerTemplate(): typeof TabHeaderTemplate;
+    static get overflowTemplate(): typeof TabInOverflowTemplate;
+}
+export default UDExTab;
+export { ITab };

package/config/dist/Tab.js

@@ -0,0 +1,157 @@
+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 UDExTab_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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import TabNavigation from "./TabNavigation.js";
+import TabTemplate from "./generated/templates/TabTemplate.lit.js";
+import TabHeaderTemplate from "./generated/templates/TabHeaderTemplate.lit.js";
+import TabInOverflowTemplate from "./generated/templates/TabInOverflowTemplate.lit.js";
+// Styles
+import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
+export var Target;
+(function (Target) {
+    Target["Blank"] = "_blank";
+    Target["Parent"] = "_parent";
+    Target["Self"] = "_self";
+    Target["Top"] = "_top";
+})(Target || (Target = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-tab</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/Tab.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.web-components.UDExTab
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname udex-tab
+ * @public
+ */
+let UDExTab = UDExTab_1 = class UDExTab extends UI5Element {
+    getTabInHeaderDomRef() {
+        if (this.getElementInHeader) {
+            return this.getElementInHeader();
+        }
+        return null;
+    }
+    get isOnSelectedTab() {
+        return this._realTab === this;
+    }
+    get _effectiveSlotName() {
+        return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;
+    }
+    get hasIcon() {
+        return !!this.icon;
+    }
+    get classWithIcon() {
+        return this.hasIcon ? "udex-tab-navigation__button-text--icon" : "";
+    }
+    get buttonClassWithIcon() {
+        return this.hasIcon ? " udex-tab-navigation__button-tab--icon" : "";
+    }
+    get hasNotIcon() {
+        return !this.icon && this.showAttentionBadge;
+    }
+    get hasNotHref() {
+        return !this.href;
+    }
+    get isSelected() {
+        return this.selected || this._selected;
+    }
+    get selectedClass() {
+        return this.isSelected ? "udex-tab-navigation__button-tab--active" : "";
+    }
+    get classWithIconWithoutBackground() {
+        return this.hasIcon && !this._iconWithoutBackground ? " udex-tab-navigation__button-tab--icon-tab" : "";
+    }
+    get tabNavigation() {
+        return executeTemplate(UDExTab_1.headerTemplate, this);
+    }
+    get tabInOverflow() {
+        return executeTemplate(UDExTab_1.overflowTemplate, this);
+    }
+    get _slotName() {
+        return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;
+    }
+    get effectiveSelected() {
+        return this.selected || this._selected;
+    }
+    get ariaLabelledBy() {
+        const labels = [];
+        if (this.text) {
+            labels.push(`${this.__id}-text`);
+        }
+        if (this.icon) {
+            labels.push(`${this.__id}-icon`);
+        }
+        return labels.join(" ");
+    }
+    static get headerTemplate() {
+        return TabHeaderTemplate;
+    }
+    static get overflowTemplate() {
+        return TabInOverflowTemplate;
+    }
+};
+__decorate([
+    property({ type: String })
+], UDExTab.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTab.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTab.prototype, "showAttentionBadge", void 0);
+__decorate([
+    property({ type: String })
+], UDExTab.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], UDExTab.prototype, "href", void 0);
+__decorate([
+    property({ type: Target, defaultValue: "_self" })
+], UDExTab.prototype, "target", void 0);
+__decorate([
+    property({ type: Object })
+], UDExTab.prototype, "_realTab", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTab.prototype, "_selected", void 0);
+__decorate([
+    property({ type: String })
+], UDExTab.prototype, "_tabIndex", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTab.prototype, "_iconWithoutBackground", void 0);
+__decorate([
+    slot({ type: Node, "default": true })
+], UDExTab.prototype, "content", void 0);
+UDExTab = UDExTab_1 = __decorate([
+    customElement({
+        tag: "udex-tab",
+        renderer: litRender,
+        template: TabTemplate,
+        dependencies: [],
+    })
+], UDExTab);
+UDExTab.define();
+TabNavigation.registerStaticAreaTabStyles(TabInOverflowCss);
+export default UDExTab;
+//# sourceMappingURL=Tab.js.map

package/config/dist/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../src/Tab.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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport TabNavigation from \"./TabNavigation.js\";\n\nimport TabTemplate from \"./generated/templates/TabTemplate.lit.js\";\nimport TabHeaderTemplate from \"./generated/templates/TabHeaderTemplate.lit.js\";\nimport TabInOverflowTemplate from \"./generated/templates/TabInOverflowTemplate.lit.js\";\n\n// Styles\nimport TabInOverflowCss from \"./generated/themes/TabInOverflow.css.js\";\n\nexport enum Target {\n  Blank = \"_blank\",\n  Parent = \"_parent\",\n  Self = \"_self\",\n  Top = \"_top\",\n}\n\ninterface ITab extends UI5Element {\n  getTabInHeaderDomRef: () => ITab | null;\n  disabled?: boolean;\n  icon?: string;\n  selected?: boolean;\n  text?: string;\n  showAttentionBadge?: boolean;\n  href?: string;\n  content?: Array<Node>;\n  hasIcon: boolean;\n  isOnSelectedTab: boolean;\n  hasNotIcon: boolean;\n  hasNotHref: boolean;\n  isSelected: boolean;\n  selectedClass: string;\n  tabNavigation: any;\n  _individualSlot: string;\n  _effectiveSlotName: string;\n  _slotName: string;\n  _selected?: boolean;\n  _tabIndex: string;\n  _iconWithoutBackground: boolean;\n  _posinset?: number;\n  _setsize?: number;\n  _contentId?: string;\n  getElementInHeader?: () => ITab | null;\n  _realTab?: UDExTab;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-tab</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @udex/web-components/dist/Tab.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.web-components.UDExTab\n * @extends sap.ui.webc.base.UI5Element\n * @tagname udex-tab\n * @public\n */\n@customElement({\n  tag: \"udex-tab\",\n  renderer: litRender,\n  template: TabTemplate,\n  dependencies: [],\n})\n\nclass UDExTab extends UI5Element implements ITab {\n  /**\n   * Defines the text of tab.\n   * @name udex.components.UDExTab.prototype.text\n   * @public\n   * @type { string }\n   */\n  @property({ type: String })\n    text!: string;\n\n  /**\n   * Defines the selected tab.\n   * @name udex.components.UDExTab.prototype.selected\n   * @public\n   * @type { boolean }\n   * @defaultValue \"false\"\n   */\n  @property({ type: Boolean })\n    selected!: boolean;\n\n  /**\n   * Defines the displaying attention badge.\n   * @name udex.components.UDExTab.prototype.showAttentionBadge\n   * @public\n   * @type { boolean }\n   * @defaultValue \"false\"\n   */\n  @property({ type: Boolean })\n    showAttentionBadge!: boolean;\n\n  /**\n   * Defines the icon in the tab.\n   * @name udex.components.UDExTab.prototype.icon\n   * @public\n   * @type { string }\n   */\n  @property({ type: String })\n    icon!: string;\n\n  /**\n   * Defines the href of the tab.\n   * @name udex.components.UDExTab.prototype.href\n   * @public\n   * @type { string }\n   */\n  @property({ type: String })\n    href!: string;\n\n  /**\n   * Define the target of the tab\n   * @name udex.components.UDExTab.property.target\n   * @public@type { string }\n   */\n  @property({ type: Target, defaultValue: \"_self\" })\n    target!: \"_blank\" | \"_parent\" | \"_self\" | \"_top\";\n\n  /**\n   * Defines the tab.\n   * @private\n   * @type { Object }\n   */\n  @property({ type: Object })\n    _realTab!: UDExTab;\n\n  /**\n   * Defines the selected tab for private use.\n   * @private\n   * @type { boolean }\n   * @defaultValue \"false\"\n   */\n  @property({ type: Boolean })\n    _selected!: boolean;\n\n  /**\n   * Defines the tabindex of the tab.\n   * @private\n   * @type { string }\n   * @defaultValue \"false\"\n   */\n  @property({ type: String })\n    _tabIndex!: string;\n\n  /**\n   * Defines the background color of the component.\n   * @private\n   * @type { boolean }\n   * @defaultValue \"false\"\n  */\n  @property({ type: Boolean })\n    _iconWithoutBackground!: boolean;\n\n  /**\n   * Defines the content of the tab.\n   * @type { HTMLElement[] }\n   * @name sap.ui.webc.main.UDExTab.prototype.default\n   * @slot content\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: Array<Node>;\n\n  getElementInHeader?: () => ITab | null;\n  _individualSlot!: string;\n\n  getTabInHeaderDomRef(): ITab | null {\n    if (this.getElementInHeader) {\n      return this.getElementInHeader();\n    }\n\n    return null;\n  }\n\n  get isOnSelectedTab(): boolean {\n    return this._realTab === this;\n  }\n\n  get _effectiveSlotName() {\n    return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;\n  }\n\n  get hasIcon(): boolean {\n    return !!this.icon;\n  }\n\n  get classWithIcon(): string {\n    return this.hasIcon ? \"udex-tab-navigation__button-text--icon\" : \"\";\n  }\n\n  get buttonClassWithIcon(): string {\n    return this.hasIcon ? \" udex-tab-navigation__button-tab--icon\" : \"\";\n  }\n\n  get hasNotIcon(): boolean {\n    return !this.icon && this.showAttentionBadge;\n  }\n\n  get hasNotHref(): boolean {\n    return !this.href;\n  }\n\n  get isSelected() {\n    return this.selected || this._selected;\n  }\n\n  get selectedClass(): string {\n    return this.isSelected ? \"udex-tab-navigation__button-tab--active\" : \"\";\n  }\n\n  get classWithIconWithoutBackground(): string {\n    return this.hasIcon && !this._iconWithoutBackground ? \" udex-tab-navigation__button-tab--icon-tab\" : \"\";\n  }\n\n  get tabNavigation() {\n    return executeTemplate(UDExTab.headerTemplate, this);\n  }\n\n  get tabInOverflow() {\n    return executeTemplate(UDExTab.overflowTemplate, this);\n  }\n\n  get _slotName() {\n    return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;\n  }\n\n  get effectiveSelected() {\n    return this.selected || this._selected;\n  }\n\n  get ariaLabelledBy() {\n    const labels = [];\n\n    if (this.text) {\n      labels.push(`${this.__id!}-text`);\n    }\n\n    if (this.icon) {\n      labels.push(`${this.__id!}-icon`);\n    }\n\n    return labels.join(\" \");\n  }\n\n  static get headerTemplate() {\n    return TabHeaderTemplate;\n  }\n\n  static get overflowTemplate() {\n    return TabInOverflowTemplate;\n  }\n}\n\nUDExTab.define();\n\nTabNavigation.registerStaticAreaTabStyles(TabInOverflowCss);\n\nexport default UDExTab;\nexport { ITab };\n"]}

package/config/dist/TabNavigation.d.ts

@@ -0,0 +1,175 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { StyleData } from "@ui5/webcomponents-base/dist/types.js";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Tab, { ITab } from "./Tab.js";
+import "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+export declare enum SizeMoreButton {
+    Small = "Small",
+    Medium = "Medium"
+}
+export declare enum Mode {
+    Light = "Light",
+    Dark = "Dark"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-tab-navigation</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/TabNavigation.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.web-components.UDExTabNavigation
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname udex-tab-navigation
+ * @public
+ */
+declare class UDExTabNavigation extends UI5Element {
+    /**
+     * Defines the size of the "More" button.
+     * @name udex.components.UDExTabNavigation.prototype.sizeMoreButton
+     * @public
+     * @type { SizeMoreButton }
+     * @defaultValue: "Small"
+    */
+    sizeMoreButton: SizeMoreButton;
+    /**
+     * Defines the mode of the component.
+     * @name udex.components.UDExTabNavigation.prototype.mode
+     * @public
+     * @type { Mode }
+     * @defaultValue "Light"
+     */
+    mode: Mode;
+    /**
+     * Defines the background color of the component.
+     * @name udex.components.UDExTabNavigation.prototype.iconWithoutBackground
+     * @public
+     * @type { boolean }
+     * @defaultValue "false"
+     */
+    iconWithoutBackground: boolean;
+    /**
+     * Defines selected tab.
+     * @private
+     * @type { Object }
+     */
+    _selectedTab: Tab;
+    /**
+     * Defines the width of component.
+     * @private
+     * @type { sap.ui.webc.base.type.Integer }
+     */
+    _width?: number;
+    /**
+     * Defines the overflow items.
+     * @private
+     * @type { Object }
+     */
+    _overflowItems: Array<ITab>;
+    /**
+     * Defines the tabs and content.
+     * @type { HTMLElement[] }
+     * @name sap.ui.webc.base.UDExTabNavigation.prototype.default
+     * @slot items
+     * @public
+     */
+    items: Array<ITab>;
+    static i18nBundle: any;
+    _handleResizeBound: () => void;
+    _responsivePopover?: ResponsivePopover;
+    _visibleTabs?: Array<ITab | HTMLElement>;
+    _isExpanded: boolean;
+    _maxTitleLength: number;
+    _maxTitleLengthInSecondLines: number;
+    constructor();
+    static onDefine(): Promise<void>;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    _handleResize(): void;
+    emitClickEvent(pageIndex: number): void;
+    onBeforeRendering(): void;
+    setSelectedTab(): void;
+    resetSelectedTabs(): void;
+    setCurrentSelectedTab(): void;
+    setRealTabToItems(): void;
+    setElementInHeader(): void;
+    onAfterRendering(): void;
+    initOutsideClick(): void;
+    handleOutsideClick(): void;
+    onTabClick(e: Event): void;
+    getTab(el: HTMLElement | null): false | Tab;
+    updateSelectedTab(selectedTabIndex: number): void;
+    setItemsInHeader(): void;
+    getTabHeader(): HTMLElement;
+    removeHiddenAttributeInAllTabs(itemsDomRefs: Array<ITab>): void;
+    getTotalItemsWidth(itemsDomRefs: Array<ITab>): number;
+    getItemWidth(itemDomRef: HTMLElement): number;
+    private setItemWidth;
+    private getItemContext;
+    private getItemIndentation;
+    private getMaxWidthItemTitle;
+    private getOverloadMaxWidthItemTitle;
+    private getItemTitleWidth;
+    hideLastVisibleTab(itemsDomRefs: Array<ITab>): void;
+    getRootTab(tab: Tab): Tab;
+    getSelectedItemWidth(itemsDomRefs: Array<ITab>, selectedTabDomRef: ITab): number;
+    findLastVisibleItem(itemsDomRefs: Array<ITab>, containerWidth: number, selectedItemWidth: number, startIndex?: number): number;
+    hideInappropriateTabs(lastVisibleTabIndex: number, itemsDomRefs: Array<ITab>): void;
+    setVisibleTabs(): void;
+    applyTabIndex(): void;
+    setTabsIndex(currentIndex: number): void;
+    handleOverflowItemClick(e: Event): void;
+    onItemSelect(selectedId: string): void;
+    getMoreButton(): HTMLElement;
+    getHeader(): HTMLElement;
+    handleMoreButton(): Promise<void>;
+    updateOverflowItems(): void;
+    handleTogglePopover(): void;
+    handleClosePopover(): void;
+    handleOpenPopover(): Promise<void>;
+    handleKeyDown(e: KeyboardEvent): void;
+    handleRightArrow(e: KeyboardEvent): void;
+    onFocusRightItem(target: HTMLElement): void;
+    getTabIndexById(id: string): number;
+    handleLeftArrow(e: KeyboardEvent): void;
+    onFocusLeftItem(target: HTMLElement): void;
+    handleTabNext(e: KeyboardEvent): void;
+    onTabNext(e: KeyboardEvent, previousSelectedIndex: number): void;
+    handleTabPrevious(e: KeyboardEvent): void;
+    onTabPrevious(e: KeyboardEvent, previousSelectedIndex: number): void;
+    handleHomeKey(e: KeyboardEvent): void;
+    handleEndKey(e: KeyboardEvent): void;
+    onEndKey(): void;
+    handleFocusMoreButton(e: KeyboardEvent): Promise<void>;
+    handleUpMoreButton(e: KeyboardEvent): Promise<void>;
+    onFocusLastItemPopover(): Promise<void>;
+    handleTabPreviouMoreButton(e: KeyboardEvent): void;
+    handleHomeKeyMoreButton(e: KeyboardEvent): void;
+    handleEnterKeyMoreButton(e: KeyboardEvent): Promise<void>;
+    onOpenPopover(): void;
+    handleDownMoreButton(e: KeyboardEvent): Promise<void>;
+    onFocusFirstItemPopover(): Promise<void>;
+    handleFocusPopover(e: KeyboardEvent): void;
+    handleUp(e: KeyboardEvent): void;
+    onPreviousItemInPopover(target: HTMLElement): Promise<void>;
+    getItemsFromPopover(): Promise<HTMLElement[]>;
+    getPopoverTabIndexById(popoverItems: Array<HTMLElement>, id: string): number;
+    handleDown(e: KeyboardEvent): void;
+    onNextItemInPopover(target: HTMLElement): Promise<void>;
+    handleEnterOrSpace(e: KeyboardEvent): void;
+    handleEscape(e: KeyboardEvent): void;
+    handleHome(e: KeyboardEvent): Promise<void>;
+    handleEnd(e: KeyboardEvent): Promise<void>;
+    getResponsePopover(): Promise<ResponsivePopover>;
+    get moreButtonText(): string;
+    static registerStaticAreaTabStyles(styles: StyleData): void;
+}
+export default UDExTabNavigation;