@sapudex/web-components 0.224.0 → 2.0.0

package/dist/TableHeaderCell.js

@@ -31,6 +31,20 @@ import TableHeaderCellCss from "./generated/themes/TableHeaderCell.css.js";
 let UDExTableHeaderCell = class UDExTableHeaderCell extends UDExTableCellBase {
     constructor() {
         super(...arguments);
+        /**
+         * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.
+         *
+         * @default ""
+         * @public
+         */
+        this.iconStart = "";
+        /**
+         * Defines the name of the UI5 Icon, that will be displayed at the end of the content.
+         *
+         * @default ""
+         * @public
+         */
+        this.iconEnd = "";
         this.ariaRole = "columnheader";
     }
     onBeforeRendering() {
@@ -45,10 +59,10 @@ __decorate([
     property({ type: Boolean })
 ], UDExTableHeaderCell.prototype, "highlighted", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExTableHeaderCell.prototype, "iconStart", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExTableHeaderCell.prototype, "iconEnd", void 0);
 UDExTableHeaderCell = __decorate([
     customElement({

package/dist/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../src/TableHeaderCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,uBAAuB,MAAM,sDAAsD,CAAC;AAC3F,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AAEnD,SAAS;AACT,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAE3E;;;;;;;;;;;;;;;;GAgBG;AASH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB;IAAnD;;QA4BY,aAAQ,GAAW,cAAc,CAAC;IAU9C,CAAC;IARC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,IAAI,CAAC,eAAe,GAAG,CAAC;IAChF,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9D,CAAC;CACF,CAAA;AA9BG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;sDACxB;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;oDAC1B;AA1Bf,mBAAmB;IARxB,aAAa,CAAC;QACb,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,iBAAiB,CAAC,MAAM,EAAE,kBAAkB,CAAC;QACtD,QAAQ,EAAE,uBAAuB;QACjC,YAAY,EAAE,CAAC,GAAG,iBAAiB,CAAC,YAAY,CAAC;KAClD,CAAC;GAEI,mBAAmB,CAsCxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport TableHeaderCellTemplate from \"./generated/templates/TableHeaderCellTemplate.lit.js\";\nimport UDExTableCellBase from \"./TableCellBase.js\";\n\n// Styles\nimport TableHeaderCellCss from \"./generated/themes/TableHeaderCell.css.js\";\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-table-header-cell</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableHeaderCell.js\";</code>\n *\n * @constructor\n * @extends UDExTableCellBase\n * @public\n */\n@customElement({\n  tag: \"udex-table-header-cell\",\n  renderer: litRender,\n  styles: [UDExTableCellBase.styles, TableHeaderCellCss],\n  template: TableHeaderCellTemplate,\n  dependencies: [...UDExTableCellBase.dependencies],\n})\n\nclass UDExTableHeaderCell extends UDExTableCellBase {\n  /**\n   * Defines highlighted the header cell.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    highlighted?: boolean;\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    iconStart!: string;\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed at the end of the content.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    iconEnd!: string;\n\n  protected ariaRole: string = \"columnheader\";\n\n  onBeforeRendering() {\n    super.onBeforeRendering();\n    this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;\n  }\n\n  get _hasIcons(): boolean {\n    return this.iconStart.length > 0 || this.iconEnd.length > 0;\n  }\n}\n\nUDExTableHeaderCell.define();\n\nexport default UDExTableHeaderCell;\n"]}
+{"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../src/TableHeaderCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,uBAAuB,MAAM,sDAAsD,CAAC;AAC3F,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AAEnD,SAAS;AACT,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAE3E;;;;;;;;;;;;;;;;GAgBG;AASH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB;IAAnD;;QAUE;;;;;WAKG;QAED,cAAS,GAAW,EAAE,CAAC;QAEzB;;;;;WAKG;QAED,YAAO,GAAW,EAAE,CAAC;QAEb,aAAQ,GAAW,cAAc,CAAC;IAU9C,CAAC;IARC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,IAAI,CAAC,eAAe,GAAG,CAAC;IAChF,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9D,CAAC;CACF,CAAA;AA9BG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACF;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACJ;AA1BnB,mBAAmB;IARxB,aAAa,CAAC;QACb,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,iBAAiB,CAAC,MAAM,EAAE,kBAAkB,CAAC;QACtD,QAAQ,EAAE,uBAAuB;QACjC,YAAY,EAAE,CAAC,GAAG,iBAAiB,CAAC,YAAY,CAAC;KAClD,CAAC;GAEI,mBAAmB,CAsCxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport TableHeaderCellTemplate from \"./generated/templates/TableHeaderCellTemplate.lit.js\";\nimport UDExTableCellBase from \"./TableCellBase.js\";\n\n// Styles\nimport TableHeaderCellCss from \"./generated/themes/TableHeaderCell.css.js\";\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-table-header-cell</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableHeaderCell.js\";</code>\n *\n * @constructor\n * @extends UDExTableCellBase\n * @public\n */\n@customElement({\n  tag: \"udex-table-header-cell\",\n  renderer: litRender,\n  styles: [UDExTableCellBase.styles, TableHeaderCellCss],\n  template: TableHeaderCellTemplate,\n  dependencies: [...UDExTableCellBase.dependencies],\n})\n\nclass UDExTableHeaderCell extends UDExTableCellBase {\n  /**\n   * Defines highlighted the header cell.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    highlighted?: boolean;\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    iconStart: string = \"\";\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed at the end of the content.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    iconEnd: string = \"\";\n\n  protected ariaRole: string = \"columnheader\";\n\n  onBeforeRendering() {\n    super.onBeforeRendering();\n    this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;\n  }\n\n  get _hasIcons(): boolean {\n    return this.iconStart.length > 0 || this.iconEnd.length > 0;\n  }\n}\n\nUDExTableHeaderCell.define();\n\nexport default UDExTableHeaderCell;\n"]}

package/dist/TableRowBase.d.ts

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import UDExTableCell from "./TableCell.js";
-import UDExTableHeaderCell from "./TableHeaderCell.js";
+import type UDExTableHeaderCell from "./TableHeaderCell.js";
 /**
  * @class
  * A class to serve as a foundation for the `UDExTableRow` and `UDExTableHeaderRow` classes.

package/dist/TableRowBase.js

@@ -9,7 +9,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 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 Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import UDExTableCell from "./TableCell.js";
 // Styles
 import TableRowBase from "./generated/themes/TableRowBase.css.js";
@@ -30,7 +29,7 @@ __decorate([
     slot({ type: HTMLElement, "default": true, individualSlots: true })
 ], UDExTableRowBase.prototype, "cells", void 0);
 __decorate([
-    property({ validator: Integer })
+    property({ type: Number })
 ], UDExTableRowBase.prototype, "_index", void 0);
 UDExTableRowBase = __decorate([
     customElement({

package/dist/TableRowBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRowBase.js","sourceRoot":"","sources":["../src/TableRowBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,aAAa,MAAM,gBAAgB,CAAC;AAG3C,SAAS;AACT,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE;;;;;;;GAOG;AAQH,IAAe,gBAAgB,GAA/B,MAAe,gBAAiB,SAAQ,UAAU;IAiBhD,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;CACF,CAAA;AAbG;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;+CACf;AAQnD;IADD,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;gDACf;AAfL,gBAAgB;IAN9B,aAAa,CAAC;QACb,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,YAAY;QACpB,YAAY,EAAE,CAAC,aAAa,CAAC;KAC9B,CAAC;GAEa,gBAAgB,CAoB9B;AAED,eAAe,gBAAgB,CAAC","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 Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport UDExTableCell from \"./TableCell.js\";\nimport UDExTableHeaderCell from \"./TableHeaderCell.js\";\n\n// Styles\nimport TableRowBase from \"./generated/themes/TableRowBase.css.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `UDExTableRow` and `UDExTableHeaderRow` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @public\n */\n\n@customElement({\n  renderer: litRender,\n  styles: TableRowBase,\n  dependencies: [UDExTableCell],\n})\n\nabstract class UDExTableRowBase extends UI5Element {\n  /**\n   * Defines the cells of the component.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    cells!: Array<UDExTableCell | UDExTableHeaderCell>;\n\n  /**\n   * Defines the index of the component.\n   *\n   * @private\n   */\n  @property({ validator: Integer })\n    _index!: number;\n\n  onEnterDOM() {\n    this.setAttribute(\"role\", \"row\");\n  }\n}\n\nexport default UDExTableRowBase;\n"]}
+{"version":3,"file":"TableRowBase.js","sourceRoot":"","sources":["../src/TableRowBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,aAAa,MAAM,gBAAgB,CAAC;AAG3C,SAAS;AACT,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE;;;;;;;GAOG;AAQH,IAAe,gBAAgB,GAA/B,MAAe,gBAAiB,SAAQ,UAAU;IAiBhD,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;CACF,CAAA;AAbG;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;+CACf;AAQnD;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACT;AAfL,gBAAgB;IAN9B,aAAa,CAAC;QACb,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,YAAY;QACpB,YAAY,EAAE,CAAC,aAAa,CAAC;KAC9B,CAAC;GAEa,gBAAgB,CAoB9B;AAED,eAAe,gBAAgB,CAAC","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 UDExTableCell from \"./TableCell.js\";\nimport type UDExTableHeaderCell from \"./TableHeaderCell.js\";\n\n// Styles\nimport TableRowBase from \"./generated/themes/TableRowBase.css.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `UDExTableRow` and `UDExTableHeaderRow` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @public\n */\n\n@customElement({\n  renderer: litRender,\n  styles: TableRowBase,\n  dependencies: [UDExTableCell],\n})\n\nabstract class UDExTableRowBase extends UI5Element {\n  /**\n   * Defines the cells of the component.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    cells!: Array<UDExTableCell | UDExTableHeaderCell>;\n\n  /**\n   * Defines the index of the component.\n   *\n   * @private\n   */\n  @property({ type: Number })\n    _index!: number;\n\n  onEnterDOM() {\n    this.setAttribute(\"role\", \"row\");\n  }\n}\n\nexport default UDExTableRowBase;\n"]}

package/dist/Tag.d.ts

@@ -1,16 +1,19 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import IconPlacement from "./types/IconPlacement.js";
-export declare enum TagType {
+export declare enum UDExTagType {
     Text = "Text",
     White = "White",
     Outlined = "Outlined",
     Grey = "Grey"
 }
-export declare enum TagSize {
+export declare enum UDExTagSize {
     Small = "Small",
     Medium = "Medium"
 }
+type UDExTagLinkClickEventDetail = {
+    originalEvent: Event;
+};
 /**
  * @class
  *
@@ -31,6 +34,11 @@ export declare enum TagSize {
  * @public
  */
 declare class UDExTag extends UI5Element {
+    eventDetails: {
+        "selectionChange": void;
+        "iconClick": void;
+        "tagLinkClick": UDExTagLinkClickEventDetail;
+    };
     /**
      * Defines the text of the tag
     *
@@ -51,14 +59,14 @@ declare class UDExTag extends UI5Element {
     * @default "Grey"
     * @public
     */
-    design?: `${TagType}`;
+    design: `${UDExTagType}`;
     /**
      * Defines the size of the component.
      *
      * @default "Small"
      * @public
      */
-    size: `${TagSize}`;
+    size: `${UDExTagSize}`;
     /**
      * Defines icon name
     *
@@ -72,7 +80,7 @@ declare class UDExTag extends UI5Element {
     * @default "End"
     * @public
     */
-    iconPlacement?: `${IconPlacement}`;
+    iconPlacement: `${IconPlacement}`;
     /**
      * Defines if tag is in readnly state
     *

package/dist/Tag.js

@@ -7,28 +7,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import IconPlacement from "./types/IconPlacement.js";
 import TagTemplate from "./generated/templates/TagTemplate.lit.js";
 // Styles
-import TagCss from "./generated/themes/Tag.css";
-import IconPlacement from "./types/IconPlacement.js";
-export var TagType;
-(function (TagType) {
-    TagType["Text"] = "Text";
-    TagType["White"] = "White";
-    TagType["Outlined"] = "Outlined";
-    TagType["Grey"] = "Grey";
-})(TagType || (TagType = {}));
-export var TagSize;
-(function (TagSize) {
-    TagSize["Small"] = "Small";
-    TagSize["Medium"] = "Medium";
-})(TagSize || (TagSize = {}));
+import TagCss from "./generated/themes/Tag.css.js";
+export var UDExTagType;
+(function (UDExTagType) {
+    UDExTagType["Text"] = "Text";
+    UDExTagType["White"] = "White";
+    UDExTagType["Outlined"] = "Outlined";
+    UDExTagType["Grey"] = "Grey";
+})(UDExTagType || (UDExTagType = {}));
+export var UDExTagSize;
+(function (UDExTagSize) {
+    UDExTagSize["Small"] = "Small";
+    UDExTagSize["Medium"] = "Medium";
+})(UDExTagSize || (UDExTagSize = {}));
 /**
  * @class
  *
@@ -51,6 +51,40 @@ export var TagSize;
 let UDExTag = class UDExTag extends UI5Element {
     constructor() {
         super();
+        /**
+         * Defines the design type of tag
+        *
+        * @default "Grey"
+        * @public
+        */
+        this.design = UDExTagType.Grey;
+        /**
+         * Defines the size of the component.
+         *
+         * @default "Small"
+         * @public
+         */
+        this.size = UDExTagSize.Small;
+        /**
+         * Defines icon placement if icon was provided
+        *
+        * @default "End"
+        * @public
+        */
+        this.iconPlacement = IconPlacement.End;
+        /**
+         * Defines the accessible ARIA name of the component.
+         * @default ""
+         * @public
+         */
+        this.accessibleName = "";
+        /**
+         * Defines the role attribute of component
+        *
+        * @default "button"
+        * @public
+        */
+        this.accessibleRole = "";
         this._handleResizeBound = this._handleResize.bind(this);
     }
     onBeforeRendering() {
@@ -73,12 +107,12 @@ let UDExTag = class UDExTag extends UI5Element {
     }
     iconClickHandler(e) {
         e.stopPropagation();
-        this.fireEvent("iconClick");
+        this.fireDecoratorEvent("iconClick");
     }
     tagClickHandler() {
         if (this.isInteractiveTag) {
             this.setSelected();
-            this.fireEvent("selectionChange");
+            this.fireDecoratorEvent("selectionChange");
         }
     }
     tagKeyDown(e) {
@@ -140,7 +174,7 @@ let UDExTag = class UDExTag extends UI5Element {
         return this.accessibleName || this.text;
     }
     tagLinkClickHandler(e) {
-        this.fireEvent("tagLinkClick", { originalEvent: e }, true);
+        this.fireDecoratorEvent("tagLinkClick", { originalEvent: e });
     }
 };
 __decorate([
@@ -150,16 +184,16 @@ __decorate([
     property()
 ], UDExTag.prototype, "href", void 0);
 __decorate([
-    property({ type: TagType, defaultValue: TagType.Grey })
+    property()
 ], UDExTag.prototype, "design", void 0);
 __decorate([
-    property({ type: TagSize, defaultValue: TagSize.Small })
+    property()
 ], UDExTag.prototype, "size", void 0);
 __decorate([
     property()
 ], UDExTag.prototype, "icon", void 0);
 __decorate([
-    property({ type: IconPlacement, defaultValue: IconPlacement.End })
+    property()
 ], UDExTag.prototype, "iconPlacement", void 0);
 __decorate([
     property({ type: Boolean })
@@ -168,7 +202,7 @@ __decorate([
     property()
 ], UDExTag.prototype, "accessibleName", void 0);
 __decorate([
-    property({ defaultValue: "button" })
+    property()
 ], UDExTag.prototype, "accessibleRole", void 0);
 __decorate([
     property({ type: Boolean })
@@ -199,26 +233,24 @@ UDExTag = __decorate([
     /**
      * Emitted when tag was clicked
      *
-     * @event sap.ui.webc.web-components.UDExTag#selectionChange
      * @public
      */
     ,
-    event("selectionChange")
+    event("selectionChange", { bubbles: true })
     /**
      * Emitted when icon in tag was clicked
      *
-     * @event sap.ui.webc.web-components.UDExTag#iconClick
      * @public
      */
     ,
-    event("iconClick")
+    event("iconClick", { bubbles: true })
     /**
      * Emitted when tag link was clicked
      *
      * @public
      */
     ,
-    event("tagLinkClick")
+    event("tagLinkClick", { cancelable: true, bubbles: true })
 ], UDExTag);
 UDExTag.define();
 export default UDExTag;

package/dist/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../src/Tag.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,aAAyC,MAAM,wDAAwD,CAAC;AAC/G,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,OAAO,WAAW,MAAM,0CAA0C,CAAC;AAEnE,SAAS;AACT,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,aAAa,MAAM,0BAA0B,CAAC;AAErD,MAAM,CAAN,IAAY,OAKX;AALD,WAAY,OAAO;IACf,wBAAa,CAAA;IACb,0BAAe,CAAA;IACf,gCAAqB,CAAA;IACrB,wBAAa,CAAA;AACjB,CAAC,EALW,OAAO,KAAP,OAAO,QAKlB;AAED,MAAM,CAAN,IAAY,OAGX;AAHD,WAAY,OAAO;IACjB,0BAAe,CAAA;IACf,4BAAiB,CAAA;AACnB,CAAC,EAHW,OAAO,KAAP,OAAO,QAGlB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AA8BH,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAiI9B;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1D,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,UAAU;QACR,IAAI,SAAS,EAAE,EAAE;YACf,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,cAAc,KAAK,QAAQ,EAAE;YACpC,IAAI,CAAC,UAAU,EAAE,iBAAiB,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;SACrE;QACD,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACxD,CAAC;IAED,SAAS;QACP,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC1D,CAAC;IAED,WAAW;QACT,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IACjC,CAAC;IAED,gBAAgB,CAAC,CAAQ;QACvB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IAED,eAAe;QACb,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;SACnC;IACH,CAAC;IAED,UAAU,CAAC,CAAgB;QACzB,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;YACd,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;IACH,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;SACxB;aAAM;YACL,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;SAC/B;IACH,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED,IAAI,UAAU;QACZ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9D,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7F,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;QACvD,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;QAClE,MAAM,WAAW,GAAG,YAAY,IAAI,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC;QAC7D,OAAO,sBAAsB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,WAAW,IAAI,YAAY,IAAI,aAAa,IAAI,kBAAkB,IAAI,YAAY,IAAI,eAAe,EAAE,CAAC,IAAI,EAAE,CAAC;IAC/K,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;IACpE,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,CAAC;IAClE,CAAC;IAED,IAAI,SAAS;QACX,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,EAAE;YACxC,OAAO,CAAC,CAAC,CAAC;SACX;QACD,OAAO,CAAC,CAAC;IACX,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,SAAS,EAAG,CAAC,aAAa,CAAC,iBAAiB,CAAE,CAAC;IAC7D,CAAC;IAED,IAAI,aAAa;QACf,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,OAAO,KAAK,CAAC;SACd;QAED,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACrG,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;IACpE,CAAC;IAED,IAAI,OAAO;QACT,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IACvC,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,IAAI,CAAC;IAC1C,CAAC;IAED,mBAAmB,CAAC,CAAQ;QAC1B,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IAC7D,CAAC;CACF,CAAA;AA1OG;IADD,QAAQ,EAAE;qCACK;AAQd;IADD,QAAQ,EAAE;qCACK;AAQd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC;uCAChC;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC;qCACnC;AASpB;IADD,QAAQ,EAAE;qCACK;AASd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,CAAC,GAAG,EAAE,CAAC;8CAC7B;AASpC;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACP;AAQnB;IADD,QAAQ,EAAE;+CACe;AASxB;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC;+CACX;AASxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACP;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACR;AAUlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACN;AAGpB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACJ;AAQtB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACF;AA7HtB,OAAO;IA7BZ,aAAa,CAAC;QACb,GAAG,EAAE,UAAU;QACf,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,WAAW;QACrB,YAAY,EAAE,CAAC,IAAI,CAAC;KACrB,CAAC;IAEF;;;;;OAKG;;IACF,KAAK,CAAC,iBAAiB,CAAC;IAEzB;;;;;OAKG;;IACF,KAAK,CAAC,WAAW,CAAC;IACnB;;;;OAIG;;IACF,KAAK,CAAC,cAAc,CAAC;GAChB,OAAO,CAkPZ;AAED,OAAO,CAAC,MAAM,EAAE,CAAC;AAEjB,eAAe,OAAO,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport ResizeHandler, { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport TagTemplate from \"./generated/templates/TagTemplate.lit.js\";\n\n// Styles\nimport TagCss from \"./generated/themes/Tag.css\";\nimport IconPlacement from \"./types/IconPlacement.js\";\n\nexport enum TagType {\n    Text = \"Text\",\n    White = \"White\",\n    Outlined = \"Outlined\",\n    Grey = \"Grey\"\n}\n\nexport enum TagSize {\n  Small = \"Small\",\n  Medium = \"Medium\"\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-tag</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Tag.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-tag\n * @public\n */\n@customElement({\n  tag: \"udex-tag\",\n  renderer: litRender,\n  styles: TagCss,\n  template: TagTemplate,\n  dependencies: [Icon],\n})\n\n/**\n * Emitted when tag was clicked\n *\n * @event sap.ui.webc.web-components.UDExTag#selectionChange\n * @public\n */\n@event(\"selectionChange\")\n\n/**\n * Emitted when icon in tag was clicked\n *\n * @event sap.ui.webc.web-components.UDExTag#iconClick\n * @public\n */\n@event(\"iconClick\")\n/**\n * Emitted when tag link was clicked\n *\n * @public\n */\n@event(\"tagLinkClick\")\nclass UDExTag extends UI5Element {\n  /**\n   * Defines the text of the tag\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    text!: string;\n  /**\n   * Defines the href for behavior of the tag as a link\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    href!: string;\n  /**\n   * Defines the design type of tag\n  *\n  * @default \"Grey\"\n  * @public\n  */\n  @property({ type: TagType, defaultValue: TagType.Grey })\n    design?: `${TagType}`;\n\n  /**\n   * Defines the size of the component.\n   *\n   * @default \"Small\"\n   * @public\n   */\n  @property({ type: TagSize, defaultValue: TagSize.Small })\n    size!: `${TagSize}`;\n\n  /**\n   * Defines icon name\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    icon!: string;\n\n  /**\n   * Defines icon placement if icon was provided\n  *\n  * @default \"End\"\n  * @public\n  */\n  @property({ type: IconPlacement, defaultValue: IconPlacement.End })\n    iconPlacement? : `${IconPlacement}`;\n\n  /**\n   * Defines if tag is in readnly state\n  *\n  * @default false\n  * @public\n  */\n  @property({ type: Boolean })\n    readOnly!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleName!: string;\n\n  /**\n   * Defines the role attribute of component\n  *\n  * @default \"button\"\n  * @public\n  */\n  @property({ defaultValue: \"button\" })\n    accessibleRole!: string;\n\n  /**\n   * Defines if tag is selected\n  *\n  * @default false\n  * @public\n  */\n  @property({ type: Boolean })\n    selected!: boolean;\n\n  /**\n   * Defines whether the component is focused or not.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    focused!: boolean;\n\n  /**\n   * Defines whether the token is being deleted\n   * This flag is used in the udex-select-box\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    toBeDeleted!: boolean;\n\n  /**\n   * Set by the tokenizer when a token is in the \"more\" area (overflowing)\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    overflows!: boolean;\n\n  @property({ type: Boolean })\n    singleToken!: boolean;\n\n  /**\n  * Toggle on/off nonSelectable property on tag\n  * @default true\n  * @private\n  */\n  @property({ type: Boolean })\n    nonSelectable!: boolean;\n\n  _handleResizeBound: ResizeObserverCallback;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onBeforeRendering(): void {\n    this.toBeDeleted = false;\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n    if (this.accessibleRole !== \"button\") {\n      this.shadowRoot?.firstElementChild?.removeAttribute(\"aria-pressed\");\n    }\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  setSelected(): void {\n    this.selected = !this.selected;\n  }\n\n  iconClickHandler(e: Event): void {\n    e.stopPropagation();\n    this.fireEvent(\"iconClick\");\n  }\n\n  tagClickHandler(): void {\n    if (this.isInteractiveTag) {\n      this.setSelected();\n      this.fireEvent(\"selectionChange\");\n    }\n  }\n\n  tagKeyDown(e: KeyboardEvent): void {\n    if (isEnter(e)) {\n      this.tagClickHandler();\n    }\n  }\n\n  _handleResize() {\n    if (this.isTruncatable) {\n      this.title = this.text;\n    } else {\n      this.removeAttribute(\"title\");\n    }\n  }\n\n  _focusin(): void {\n    this.focused = true;\n  }\n\n  _focusout(): void {\n    this.focused = !this.focused;\n  }\n\n  get tagClasses(): string {\n    const hasIconClass = this.hasIcon ? \"udex-tag--has-icon\" : \"\";\n    const readOnlyClass = this.readOnly ? \"udex-tag--readonly\" : \"\";\n    const nonSelectableClass = this.nonSelectable && !this.href ? \"udex-tag--nonselectable\" : \"\";\n    const linkTagClass = this.href ? \"udex-tag--link\" : \"\";\n    const selectableClass = this.selected ? \"udex-tag--selected\" : \"\";\n    const designClass = `udex-tag-${this.design?.toLowerCase()}`;\n    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} ${designClass} ${hasIconClass} ${readOnlyClass} ${nonSelectableClass} ${linkTagClass} ${selectableClass}`.trim();\n  }\n\n  get startIcon(): boolean {\n    return this.hasIcon && this.iconPlacement === IconPlacement.Start;\n  }\n\n  get endIcon(): boolean {\n    return this.hasIcon && this.iconPlacement === IconPlacement.End;\n  }\n\n  get _tabIndex(): number {\n    if (this.overflows || this.nonSelectable) {\n      return -1;\n    }\n    return 0;\n  }\n\n  get textDom(): HTMLElement {\n    return this.getDomRef()!.querySelector(\".udex-tag__text\")!;\n  }\n\n  get isTruncatable(): boolean {\n    if (!this.textDom) {\n      return false;\n    }\n\n    return Math.ceil(this.textDom.getBoundingClientRect().width) < Math.ceil(this.textDom.scrollWidth);\n  }\n\n  get isInteractiveTag(): boolean {\n    return !this.readOnly && !this.toBeDeleted && !this.nonSelectable;\n  }\n\n  get hasIcon(): boolean {\n    return !!this.icon && !this.readOnly;\n  }\n\n  get iconAccessibleName(): string {\n    return this.accessibleName || this.text;\n  }\n\n  tagLinkClickHandler(e: Event): void {\n    this.fireEvent(\"tagLinkClick\", { originalEvent: e }, true);\n  }\n}\n\nUDExTag.define();\n\nexport default UDExTag;\n"]}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../src/Tag.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport IconPlacement from \"./types/IconPlacement.js\";\n\nimport TagTemplate from \"./generated/templates/TagTemplate.lit.js\";\n\n// Styles\nimport TagCss from \"./generated/themes/Tag.css.js\";\n\nexport enum UDExTagType {\n    Text = \"Text\",\n    White = \"White\",\n    Outlined = \"Outlined\",\n    Grey = \"Grey\"\n}\n\nexport enum UDExTagSize {\n  Small = \"Small\",\n  Medium = \"Medium\"\n}\n\ntype UDExTagLinkClickEventDetail = {\n  originalEvent: Event,\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-tag</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Tag.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-tag\n * @public\n */\n@customElement({\n  tag: \"udex-tag\",\n  renderer: litRender,\n  styles: TagCss,\n  template: TagTemplate,\n  dependencies: [Icon],\n})\n\n/**\n * Emitted when tag was clicked\n *\n * @public\n */\n@event(\"selectionChange\", { bubbles: true })\n\n/**\n * Emitted when icon in tag was clicked\n *\n * @public\n */\n@event(\"iconClick\", { bubbles: true })\n/**\n * Emitted when tag link was clicked\n *\n * @public\n */\n@event(\"tagLinkClick\", { cancelable: true, bubbles: true })\nclass UDExTag extends UI5Element {\n  eventDetails!: {\n    \"selectionChange\": void,\n    \"iconClick\": void,\n    \"tagLinkClick\": UDExTagLinkClickEventDetail,\n  };\n  /**\n   * Defines the text of the tag\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    text!: string;\n  /**\n   * Defines the href for behavior of the tag as a link\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    href!: string;\n  /**\n   * Defines the design type of tag\n  *\n  * @default \"Grey\"\n  * @public\n  */\n  @property()\n    design: `${UDExTagType}` = UDExTagType.Grey;\n\n  /**\n   * Defines the size of the component.\n   *\n   * @default \"Small\"\n   * @public\n   */\n  @property()\n    size: `${UDExTagSize}` = UDExTagSize.Small;\n\n  /**\n   * Defines icon name\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    icon!: string;\n\n  /**\n   * Defines icon placement if icon was provided\n  *\n  * @default \"End\"\n  * @public\n  */\n  @property()\n    iconPlacement : `${IconPlacement}` = IconPlacement.End;\n\n  /**\n   * Defines if tag is in readnly state\n  *\n  * @default false\n  * @public\n  */\n  @property({ type: Boolean })\n    readOnly!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleName: string = \"\";\n\n  /**\n   * Defines the role attribute of component\n  *\n  * @default \"button\"\n  * @public\n  */\n  @property()\n    accessibleRole: string = \"\";\n\n  /**\n   * Defines if tag is selected\n  *\n  * @default false\n  * @public\n  */\n  @property({ type: Boolean })\n    selected!: boolean;\n\n  /**\n   * Defines whether the component is focused or not.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    focused!: boolean;\n\n  /**\n   * Defines whether the token is being deleted\n   * This flag is used in the udex-select-box\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    toBeDeleted!: boolean;\n\n  /**\n   * Set by the tokenizer when a token is in the \"more\" area (overflowing)\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    overflows!: boolean;\n\n  @property({ type: Boolean })\n    singleToken!: boolean;\n\n  /**\n  * Toggle on/off nonSelectable property on tag\n  * @default true\n  * @private\n  */\n  @property({ type: Boolean })\n    nonSelectable!: boolean;\n\n  _handleResizeBound: ResizeObserverCallback;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onBeforeRendering(): void {\n    this.toBeDeleted = false;\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n    if (this.accessibleRole !== \"button\") {\n      this.shadowRoot?.firstElementChild?.removeAttribute(\"aria-pressed\");\n    }\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  setSelected(): void {\n    this.selected = !this.selected;\n  }\n\n  iconClickHandler(e: Event): void {\n    e.stopPropagation();\n    this.fireDecoratorEvent(\"iconClick\");\n  }\n\n  tagClickHandler(): void {\n    if (this.isInteractiveTag) {\n      this.setSelected();\n      this.fireDecoratorEvent(\"selectionChange\");\n    }\n  }\n\n  tagKeyDown(e: KeyboardEvent): void {\n    if (isEnter(e)) {\n      this.tagClickHandler();\n    }\n  }\n\n  _handleResize() {\n    if (this.isTruncatable) {\n      this.title = this.text;\n    } else {\n      this.removeAttribute(\"title\");\n    }\n  }\n\n  _focusin(): void {\n    this.focused = true;\n  }\n\n  _focusout(): void {\n    this.focused = !this.focused;\n  }\n\n  get tagClasses(): string {\n    const hasIconClass = this.hasIcon ? \"udex-tag--has-icon\" : \"\";\n    const readOnlyClass = this.readOnly ? \"udex-tag--readonly\" : \"\";\n    const nonSelectableClass = this.nonSelectable && !this.href ? \"udex-tag--nonselectable\" : \"\";\n    const linkTagClass = this.href ? \"udex-tag--link\" : \"\";\n    const selectableClass = this.selected ? \"udex-tag--selected\" : \"\";\n    const designClass = `udex-tag-${this.design?.toLowerCase()}`;\n    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} ${designClass} ${hasIconClass} ${readOnlyClass} ${nonSelectableClass} ${linkTagClass} ${selectableClass}`.trim();\n  }\n\n  get startIcon(): boolean {\n    return this.hasIcon && this.iconPlacement === IconPlacement.Start;\n  }\n\n  get endIcon(): boolean {\n    return this.hasIcon && this.iconPlacement === IconPlacement.End;\n  }\n\n  get _tabIndex(): number {\n    if (this.overflows || this.nonSelectable) {\n      return -1;\n    }\n    return 0;\n  }\n\n  get textDom(): HTMLElement {\n    return this.getDomRef()!.querySelector(\".udex-tag__text\")!;\n  }\n\n  get isTruncatable(): boolean {\n    if (!this.textDom) {\n      return false;\n    }\n\n    return Math.ceil(this.textDom.getBoundingClientRect().width) < Math.ceil(this.textDom.scrollWidth);\n  }\n\n  get isInteractiveTag(): boolean {\n    return !this.readOnly && !this.toBeDeleted && !this.nonSelectable;\n  }\n\n  get hasIcon(): boolean {\n    return !!this.icon && !this.readOnly;\n  }\n\n  get iconAccessibleName(): string {\n    return this.accessibleName || this.text;\n  }\n\n  tagLinkClickHandler(e: Event): void {\n    this.fireDecoratorEvent(\"tagLinkClick\", { originalEvent: e });\n  }\n}\n\nUDExTag.define();\n\nexport default UDExTag;\n"]}

package/dist/TagGroup.d.ts

@@ -2,12 +2,16 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
 import UDExTag from "./Tag.js";
-export declare enum PlacementType {
-    Left = "Left",
-    Right = "Right",
-    Top = "Top",
-    Bottom = "Bottom"
-}
+import { Placement } from "./types/Dropdown.js";
+type UDExTagClickEventDetail = {
+    tag: UDExTag;
+};
+type UDExTagIconClickEventDetail = {
+    tag: HTMLElement;
+};
+type UDExTagKeydownEventDetail = {
+    originalEvent: KeyboardEvent;
+};
 /**
  * @class
  *
@@ -26,6 +30,12 @@ export declare enum PlacementType {
  * @public
  */
 declare class UDExTagGroup extends UI5Element {
+    eventDetails: {
+        "tag-click": UDExTagClickEventDetail;
+        "tag-icon-click": UDExTagIconClickEventDetail;
+        "show-more-tags": void;
+        "tag-keydown": UDExTagKeydownEventDetail;
+    };
     /**
      * Defines whether the UI5Tokenizer is expanded.
      *
@@ -66,7 +76,7 @@ declare class UDExTagGroup extends UI5Element {
      * @default "Bottom"
      * @public
      */
-    tooltipPlacement: `${PlacementType}`;
+    tooltipPlacement: `${Placement}`;
     /**
      * @private
      */
@@ -85,9 +95,9 @@ declare class UDExTagGroup extends UI5Element {
     onEnterDOM(): void;
     onExitDOM(): void;
     _onResize(): void;
-    tagClickHandler(e: CustomEvent): void;
     tagIconClickHandler(e: CustomEvent): void;
     handleShowMoreButtonKeydown(e: KeyboardEvent): void;
+    handleTagClick(e: CustomEvent): void;
     handleTagKeyDown(e: KeyboardEvent): void;
     showMoreItems(): void;
 }

package/dist/TagGroup.js

@@ -11,21 +11,15 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import { isEnter, isSpace, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
 import UDExTag from "./Tag.js";
 import UDExTooltip from "./Tooltip.js";
 import TagGroupTemplate from "./generated/templates/TagGroupTemplate.lit.js";
 // Styles
-import TagGroupCss from "./generated/themes/TagGroup.css";
-export var PlacementType;
-(function (PlacementType) {
-    PlacementType["Left"] = "Left";
-    PlacementType["Right"] = "Right";
-    PlacementType["Top"] = "Top";
-    PlacementType["Bottom"] = "Bottom";
-})(PlacementType || (PlacementType = {}));
+import TagGroupCss from "./generated/themes/TagGroup.css.js";
+import { Placement } from "./types/Dropdown.js";
 /**
  * @class
  *
@@ -46,6 +40,20 @@ export var PlacementType;
 let UDExTagGroup = class UDExTagGroup extends UI5Element {
     constructor() {
         super();
+        /**
+         * Defines whether the UI5Tokenizer is expanded.
+         *
+         * @default false
+         * @public
+         */
+        this.tokenizerExpanded = false;
+        /**
+         * Determines on which side of the component the Tooltip is displayed.
+         *
+         * @default "Bottom"
+         * @public
+         */
+        this.tooltipPlacement = Placement.Bottom;
         this._resizeHandler = this._onResize.bind(this);
     }
     get hiddenTags() {
@@ -65,7 +73,7 @@ let UDExTagGroup = class UDExTagGroup extends UI5Element {
     }
     onAfterRendering() {
         this._tokenizer = this.tokenizer;
-        this._nMoreBtn = this._tokenizer.shadowRoot?.querySelector(`.ui5-tokenizer-more-text`) || null;
+        this._nMoreBtn = this._tokenizer.moreLink || null;
         if (!this.readonly && !this.disabled && this._nMoreBtn && !this._nMoreBtn.hasAttribute("tabindex")) {
             this._nMoreBtn.setAttribute("tabindex", "0");
             this._nMoreBtn.addEventListener("keydown", this._nMoreKeyDownHandler.bind(this));
@@ -87,25 +95,28 @@ let UDExTagGroup = class UDExTagGroup extends UI5Element {
         this._isHiddenTags = false;
         this._isHiddenTags = this._tokenizer?._nMoreCount > 0;
     }
-    tagClickHandler(e) {
-        this.fireEvent("tag-click", { tag: e.target });
-    }
     tagIconClickHandler(e) {
-        this.fireEvent("tag-icon-click", { tag: e.target });
+        this.fireDecoratorEvent("tag-icon-click", { tag: e.target });
     }
     handleShowMoreButtonKeydown(e) {
         if (isEscape(e)) {
             this._nMoreBtn?.focus();
         }
     }
+    handleTagClick(e) {
+        this.fireDecoratorEvent("tag-click", { tag: e.target });
+    }
     handleTagKeyDown(e) {
-        this.fireEvent("tag-keydown", { originalEvent: e }, true);
+        e.stopPropagation();
+        this.fireDecoratorEvent("tag-keydown", { originalEvent: e });
     }
     showMoreItems() {
-        if (this.fireEvent("show-more-tags", {}, true)) {
+        if (this.fireDecoratorEvent("show-more-tags")) {
             const tooltip = this.shadowRoot.querySelector(`#${this._id}-tag-group-tooltip`);
             if (this._nMoreBtn) {
-                tooltip?.onOpen(this._nMoreBtn);
+                this._tokenizer.expanded = false;
+                tooltip.opener = this._nMoreBtn;
+                tooltip.open = true;
             }
         }
     }
@@ -126,7 +137,7 @@ __decorate([
     slot({ type: HTMLElement, "default": true })
 ], UDExTagGroup.prototype, "items", void 0);
 __decorate([
-    property({ type: PlacementType, defaultValue: PlacementType.Bottom })
+    property()
 ], UDExTagGroup.prototype, "tooltipPlacement", void 0);
 __decorate([
     property({ type: Boolean })
@@ -145,21 +156,21 @@ UDExTagGroup = __decorate([
      * @public
      */
     ,
-    event("tag-click")
+    event("tag-click", { bubbles: true })
     /**
      * Emitted when icon in tag was clicked
      *
      * @public
      */
     ,
-    event("tag-icon-click")
+    event("tag-icon-click", { bubbles: true })
     /**
      * Emitted when the tooltip was opened, can be canceled
      *
      * @public
      */
     ,
-    event("show-more-tags")
+    event("show-more-tags", { cancelable: true, bubbles: true })
     /**
      * Emitted  when a keydown event occurs on a tag, can be canceled
      * Emitted custom event with keycode and tag details
@@ -167,7 +178,7 @@ UDExTagGroup = __decorate([
      * @public
      */
     ,
-    event("tag-keydown")
+    event("tag-keydown", { cancelable: true, bubbles: true })
 ], UDExTagGroup);
 UDExTagGroup.define();
 export default UDExTagGroup;

package/dist/TagGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.js","sourceRoot":"","sources":["../src/TagGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport Tokenizer from \"@ui5/webcomponents/dist/Tokenizer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport { isEnter, isSpace, isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Token from \"@ui5/webcomponents/dist/Token.js\";\nimport UDExTag from \"./Tag.js\";\nimport UDExTooltip from \"./Tooltip.js\";\n\nimport TagGroupTemplate from \"./generated/templates/TagGroupTemplate.lit.js\";\n\n// Styles\nimport TagGroupCss from \"./generated/themes/TagGroup.css\";\n\nexport enum PlacementType {\n  Left = \"Left\",\n  Right = \"Right\",\n  Top = \"Top\",\n  Bottom = \"Bottom\",\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-tag-group</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TagGroup.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-tag-group\",\n  renderer: litRender,\n  styles: TagGroupCss,\n  template: TagGroupTemplate,\n  dependencies: [UDExTag, UDExTooltip, Tokenizer, Token],\n})\n/**\n * Emitted when tag was clicked\n *\n * @public\n */\n@event(\"tag-click\")\n/**\n * Emitted when icon in tag was clicked\n *\n * @public\n */\n@event(\"tag-icon-click\")\n/**\n * Emitted when the tooltip was opened, can be canceled\n *\n * @public\n */\n@event(\"show-more-tags\")\n/**\n * Emitted  when a keydown event occurs on a tag, can be canceled\n * Emitted custom event with keycode and tag details\n *\n * @public\n */\n@event(\"tag-keydown\")\nclass UDExTagGroup extends UI5Element {\n  /**\n   * Defines whether the UI5Tokenizer is expanded.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    tokenizerExpanded!: boolean;\n  /**\n   * Defines whether the component is in disabled state.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines whether the component is readonly.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is displayonly.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    displayonly!: boolean;\n\n  /**\n   * Defines the tags.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    items!: Array<UDExTag>;\n\n  /**\n   * Determines on which side of the component the Tooltip is displayed.\n   *\n   * @default \"Bottom\"\n   * @public\n   */\n  @property({ type: PlacementType, defaultValue: PlacementType.Bottom })\n    tooltipPlacement!: `${PlacementType}`;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean })\n    _isHiddenTags!: boolean;\n\n  _tokenizer!: Tokenizer;\n  _nMoreBtn!: HTMLElement | null;\n  _resizeHandler: () => void;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n  }\n\n  get hiddenTags(): Token[] {\n    return this._tokenizer?.overflownTokens || [];\n  }\n\n  get isReadOrDisplayOnly(): boolean {\n    return this.readonly || this.displayonly;\n  }\n\n  get tagTabIndex(): string {\n    return this.disabled ? \"-1\" : \"\";\n  }\n\n  get tokenizer(): Tokenizer {\n    return this.shadowRoot!.querySelector<Tokenizer>(`#${this._id}-tag-group-tokenizer`)!;\n  }\n\n  get tagRole(): string {\n    return this.displayonly || this.readonly ? \"option\" : \"\";\n  }\n\n  onAfterRendering(): void {\n    this._tokenizer = this.tokenizer;\n    this._nMoreBtn = this._tokenizer.shadowRoot?.querySelector(`.ui5-tokenizer-more-text`) || null;\n    if (!this.readonly && !this.disabled && this._nMoreBtn && !this._nMoreBtn.hasAttribute(\"tabindex\")) {\n      this._nMoreBtn.setAttribute(\"tabindex\", \"0\");\n      this._nMoreBtn.addEventListener(\"keydown\", this._nMoreKeyDownHandler.bind(this));\n    }\n  }\n\n  _nMoreKeyDownHandler(e: Event) {\n    if (isSpace(e as KeyboardEvent) || isEnter(e as KeyboardEvent)) {\n      this.showMoreItems();\n    }\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._resizeHandler);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._resizeHandler);\n    this._nMoreBtn?.removeEventListener(\"keydown\", this._nMoreKeyDownHandler.bind(this));\n  }\n\n  _onResize(): void {\n    this._isHiddenTags = false;\n    this._isHiddenTags = this._tokenizer?._nMoreCount > 0;\n  }\n\n  tagClickHandler(e: CustomEvent): void {\n    this.fireEvent(\"tag-click\", { tag: e.target as HTMLElement });\n  }\n\n  tagIconClickHandler(e: CustomEvent): void {\n    this.fireEvent(\"tag-icon-click\", { tag: e.target as HTMLElement });\n  }\n\n  handleShowMoreButtonKeydown(e: KeyboardEvent): void {\n    if (isEscape(e)) {\n      this._nMoreBtn?.focus();\n    }\n  }\n\n  handleTagKeyDown(e: KeyboardEvent): void {\n    this.fireEvent(\"tag-keydown\", { originalEvent: e }, true);\n  }\n\n  showMoreItems(): void {\n    if (this.fireEvent(\"show-more-tags\", {}, true)) {\n      const tooltip = this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`)!;\n      if (this._nMoreBtn) {\n        tooltip?.onOpen(this._nMoreBtn);\n      }\n    }\n  }\n}\n\nUDExTagGroup.define();\n\nexport default UDExTagGroup;\n"]}
+{"version":3,"file":"TagGroup.js","sourceRoot":"","sources":["../src/TagGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport Tokenizer from \"@ui5/webcomponents/dist/Tokenizer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport { isEnter, isSpace, isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Token from \"@ui5/webcomponents/dist/Token.js\";\nimport UDExTag from \"./Tag.js\";\nimport UDExTooltip from \"./Tooltip.js\";\n\nimport TagGroupTemplate from \"./generated/templates/TagGroupTemplate.lit.js\";\n\n// Styles\nimport TagGroupCss from \"./generated/themes/TagGroup.css.js\";\nimport { Placement } from \"./types/Dropdown.js\";\n\ntype UDExTagClickEventDetail = {\n  tag: UDExTag,\n}\n\ntype UDExTagIconClickEventDetail = {\n  tag: HTMLElement,\n}\n\ntype UDExTagKeydownEventDetail = {\n  originalEvent: KeyboardEvent,\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-tag-group</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TagGroup.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-tag-group\",\n  renderer: litRender,\n  styles: TagGroupCss,\n  template: TagGroupTemplate,\n  dependencies: [UDExTag, UDExTooltip, Tokenizer, Token],\n})\n/**\n * Emitted when tag was clicked\n *\n * @public\n */\n@event(\"tag-click\", { bubbles: true })\n/**\n * Emitted when icon in tag was clicked\n *\n * @public\n */\n@event(\"tag-icon-click\", { bubbles: true })\n/**\n * Emitted when the tooltip was opened, can be canceled\n *\n * @public\n */\n@event(\"show-more-tags\", { cancelable: true, bubbles: true })\n/**\n * Emitted  when a keydown event occurs on a tag, can be canceled\n * Emitted custom event with keycode and tag details\n *\n * @public\n */\n@event(\"tag-keydown\", { cancelable: true, bubbles: true })\nclass UDExTagGroup extends UI5Element {\n  eventDetails!: {\n    \"tag-click\": UDExTagClickEventDetail,\n    \"tag-icon-click\": UDExTagIconClickEventDetail,\n    \"show-more-tags\": void,\n    \"tag-keydown\": UDExTagKeydownEventDetail,\n  };\n  /**\n   * Defines whether the UI5Tokenizer is expanded.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    tokenizerExpanded: boolean = false;\n  /**\n   * Defines whether the component is in disabled state.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines whether the component is readonly.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is displayonly.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    displayonly!: boolean;\n\n  /**\n   * Defines the tags.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    items!: Array<UDExTag>;\n\n  /**\n   * Determines on which side of the component the Tooltip is displayed.\n   *\n   * @default \"Bottom\"\n   * @public\n   */\n  @property()\n    tooltipPlacement: `${Placement}` = Placement.Bottom;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean })\n    _isHiddenTags!: boolean;\n\n  _tokenizer!: Tokenizer;\n  _nMoreBtn!: HTMLElement | null;\n  _resizeHandler: () => void;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n  }\n\n  get hiddenTags(): Token[] {\n    return this._tokenizer?.overflownTokens || [];\n  }\n\n  get isReadOrDisplayOnly(): boolean {\n    return this.readonly || this.displayonly;\n  }\n\n  get tagTabIndex(): string {\n    return this.disabled ? \"-1\" : \"\";\n  }\n\n  get tokenizer(): Tokenizer {\n    return this.shadowRoot!.querySelector<Tokenizer>(`#${this._id}-tag-group-tokenizer`)!;\n  }\n\n  get tagRole(): string {\n    return this.displayonly || this.readonly ? \"option\" : \"\";\n  }\n\n  onAfterRendering(): void {\n    this._tokenizer = this.tokenizer;\n    this._nMoreBtn = this._tokenizer.moreLink || null;\n    if (!this.readonly && !this.disabled && this._nMoreBtn && !this._nMoreBtn.hasAttribute(\"tabindex\")) {\n      this._nMoreBtn.setAttribute(\"tabindex\", \"0\");\n      this._nMoreBtn.addEventListener(\"keydown\", this._nMoreKeyDownHandler.bind(this));\n    }\n  }\n\n  _nMoreKeyDownHandler(e: Event) {\n    if (isSpace(e as KeyboardEvent) || isEnter(e as KeyboardEvent)) {\n      this.showMoreItems();\n    }\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._resizeHandler);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._resizeHandler);\n    this._nMoreBtn?.removeEventListener(\"keydown\", this._nMoreKeyDownHandler.bind(this));\n  }\n\n  _onResize(): void {\n    this._isHiddenTags = false;\n    this._isHiddenTags = this._tokenizer?._nMoreCount > 0;\n  }\n\n  tagIconClickHandler(e: CustomEvent): void {\n    this.fireDecoratorEvent(\"tag-icon-click\", { tag: e.target as HTMLElement });\n  }\n\n  handleShowMoreButtonKeydown(e: KeyboardEvent): void {\n    if (isEscape(e)) {\n      this._nMoreBtn?.focus();\n    }\n  }\n\n  handleTagClick(e: CustomEvent): void {\n    this.fireDecoratorEvent(\"tag-click\", { tag: e.target as UDExTag });\n  }\n\n  handleTagKeyDown(e: KeyboardEvent): void {\n    e.stopPropagation();\n    this.fireDecoratorEvent(\"tag-keydown\", { originalEvent: e });\n  }\n\n  showMoreItems(): void {\n    if (this.fireDecoratorEvent(\"show-more-tags\")) {\n      const tooltip = this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`)!;\n      if (this._nMoreBtn) {\n        this._tokenizer.expanded = false;\n        tooltip.opener = this._nMoreBtn;\n        tooltip.open = true;\n      }\n    }\n  }\n}\n\nUDExTagGroup.define();\n\nexport default UDExTagGroup;\n"]}