@sapudex/web-components 0.127.6 → 0.143.0

package/dist/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../src/Table.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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport getEffectiveScrollbarStyle from \"@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js\";\nimport {\n  isUp, isDown, isLeft, isRight,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UDExTableHeaderRow from \"./TableHeaderRow.js\";\nimport UDExTableRow from \"./TableRow.js\";\nimport UDExTableCell from \"./TableCell.js\";\nimport UDExTableGroupRow from \"./TableGroupRow.js\";\nimport UDExTableHeaderCell from \"./TableHeaderCell.js\";\nimport { TABLE_NO_DATA_FOUND } from \"./generated/i18n/i18n-defaults.js\";\nimport TableTemplate from \"./generated/templates/TableTemplate.lit.js\";\n\n// Styles\nimport TableCss from \"./generated/themes/Table.css.js\";\n\ntype TableBaseRow = UDExTableHeaderRow | UDExTableRow;\n\ntype KeyBoardItem = {\n  id: string;\n  group?: boolean;\n  elements: Array<HTMLElement>;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-table</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/Table.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-table\",\n  renderer: litRender,\n  styles: [TableCss, getEffectiveScrollbarStyle()],\n  template: TableTemplate,\n  dependencies: [\n    BusyIndicator,\n    UDExTableHeaderRow,\n    UDExTableRow,\n    UDExTableCell,\n    UDExTableGroupRow,\n  ],\n})\n\nclass UDExTable extends UI5Element {\n  /**\n   * Defines the height of the table.\n   * Allows control over the maximum height.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    maxHeight!: string;\n\n  /**\n   * Defines the accessible ARIA name of the table.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  /**\n   * Defines the heading of the table.\n   * @public\n   */\n  @property({ type: String })\n    heading!: string;\n\n  /**\n   * Defines the text to be displayed when there are no rows in the component.\n   * @public\n   */\n  @property()\n    noDataText?: string;\n\n  /**\n   * Defines if the loading indicator should be shown.\n   * @default false\n   * @public\n   */\n  @property({ type: String })\n    loading!: string;\n\n  /**\n   * Defines the delay in milliseconds, after which the loading indicator will show up for this component.\n   * @default 1000\n   * @public\n   */\n  @property({ defaultValue: 1000, type: Integer })\n    loadingDelay!: string;\n\n  /**\n   * Sticks the toolbar and header row to the top of the table.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    stickyHeader!: boolean;\n\n  /**\n   * Sticks the first column to the left of the table.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    stickyColumn!: boolean;\n\n  /**\n   * Defines the rows of the table.\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    rows!: Array<UDExTableRow | UDExTableGroupRow>;\n\n  /**\n   * Defines the header row of the table.\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    headerRow!: Array<UDExTableHeaderRow>;\n\n  /**\n   * Defines the actions of the table.\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    actions!: Array<HTMLElement>;\n\n  /**\n   * Defines the custom visualization if there is no data available.\n   * @public\n   */\n  @slot()\n    noData!: Array<HTMLElement>;\n\n  /**\n   * Defines the footnotes of the table.\n   * @public\n   */\n  @slot()\n    footnotes!: Array<HTMLElement>;\n\n  /**\n   * Defines the table has vertical scrolling.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _verticalOffset?: boolean;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine() {\n    UDExTable.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\n  }\n\n  onAfterRendering() {\n    if (this.stickyColumn) {\n      this._setStickyAttrToCells();\n    }\n\n    this._setIndexToCells();\n\n    if (this.headerRow) {\n      this._setCellsHighlighter();\n    }\n  }\n\n  _handleKeyDown(e: KeyboardEvent) {\n    this.handleUpArrow(e);\n    this.handleDownArrow(e);\n    this.handleLeftArrow(e);\n    this.handleRightArrow(e);\n  }\n\n  handleUpArrow(e: KeyboardEvent) {\n    if (isUp(e)) {\n      e.preventDefault();\n      this.navigateRows(-1);\n    }\n  }\n\n  handleDownArrow(e: KeyboardEvent) {\n    if (isDown(e)) {\n      e.preventDefault();\n      this.navigateRows(1);\n    }\n  }\n\n  handleRightArrow(e: KeyboardEvent) {\n    if (isRight(e)) {\n      e.preventDefault();\n      this.navigateCells(1);\n    }\n  }\n\n  handleLeftArrow(e: KeyboardEvent) {\n    if (isLeft(e)) {\n      e.preventDefault();\n      this.navigateCells(-1);\n    }\n  }\n\n  navigateRows(offset: number) {\n    const items = this.getKeyboardNavigationItems();\n    const activeItem = items.find(item => item.id === this.getParentRow()._id) as KeyBoardItem;\n    const activeIndex = items.indexOf(activeItem);\n    const nextItem = items[activeIndex + offset];\n\n    nextItem?.elements[0]?.focus();\n  }\n\n  navigateCells(offset: number) {\n    const parentRow = this.getParentRow();\n\n    if (!(parentRow as UDExTableGroupRow).isGroup) {\n      const interactiveElements = this.getInteractiveElements(parentRow as TableBaseRow);\n      const currentIndex = interactiveElements.indexOf(<HTMLElement>document.activeElement);\n      const targetIndex = currentIndex + offset;\n      if (targetIndex >= 0 && targetIndex < interactiveElements.length) {\n        interactiveElements[targetIndex]?.focus();\n      }\n    }\n  }\n\n  _onScroll() {\n    const { scrollLeft, scrollTop } = this._tableHolder;\n\n    if (this.stickyHeader) {\n      this._verticalOffset = scrollTop > 0;\n    }\n\n    if (this.stickyColumn) {\n      this._setHorizontalOffsetToCells(scrollLeft);\n    }\n  }\n\n  _setCellsHighlighter(): void {\n    const highlightedHeaderCells = this.headerRow.flatMap(header => {\n      return header.cells\n        .filter(cell => (cell as UDExTableHeaderCell).highlighted === true)\n        .map(cell => cell._individualSlot);\n    });\n\n    this.rows.forEach(row => {\n      if (!(row instanceof UDExTableGroupRow)) {\n        row.cells.forEach(cell => {\n          if (highlightedHeaderCells.includes(cell._individualSlot)) {\n            cell.setAttribute(\"_highlighted\", \"\");\n          }\n        });\n      }\n    });\n  }\n\n  _setStickyAttrToCells():void {\n    [...this.headerRow, ...this.rows].forEach(row => {\n      if (!(row instanceof UDExTableGroupRow)) {\n        row.cells[0]._sticky = true;\n      }\n    });\n  }\n\n  _setIndexToCells(): void {\n    [...this.headerRow, ...this.rows].forEach((row, index) => {\n      row._index = index;\n    });\n  }\n\n  _setHorizontalOffsetToCells(scrollLeft: number):void {\n    [...this.headerRow, ...this.rows].forEach(row => {\n      if (!(row instanceof UDExTableGroupRow)) {\n        row.cells[0]._horizontalOffset = scrollLeft > 0;\n      }\n    });\n  }\n\n  getParentRow(): UDExTableRow | UDExTableHeaderRow | UDExTableGroupRow {\n    const focusedElement = document.activeElement as HTMLElement;\n    return focusedElement.closest(\"udex-table-row, udex-table-header-row, udex-table-group-row\")!;\n  }\n\n  getKeyboardNavigationItems(): Array<KeyBoardItem> {\n    const items: Array<KeyBoardItem> = [];\n\n    const pushItemGroupToItems = (row: UDExTableHeaderRow | UDExTableRow | UDExTableGroupRow, collapsible: boolean | undefined) => {\n      if (collapsible) {\n        items.push(<KeyBoardItem>{\n          id: row._id,\n          elements: [row.shadowRoot?.querySelector(\"button\")],\n        });\n      }\n      (row as UDExTableGroupRow).rows.forEach(rowGroup => {\n        items.push({\n          id: rowGroup._id,\n          group: true,\n          elements: this.getInteractiveElements(rowGroup),\n        });\n      });\n    };\n\n    const pushItemBaseToItems = (row: UDExTableHeaderRow | UDExTableRow | UDExTableGroupRow) => {\n      items.push(<KeyBoardItem>{\n        id: row._id,\n        group: false,\n        elements: row.isGroup\n          ? [row.shadowRoot?.querySelector(\"button\")]\n          : this.getInteractiveElements(row as TableBaseRow),\n      });\n    };\n\n    [...this.headerRow, ...this.rows].forEach(row => {\n      const { isGroup, _isOpen, collapsible } = row as UDExTableGroupRow;\n      if (isGroup && _isOpen) {\n        pushItemGroupToItems(row, collapsible);\n      } else {\n        pushItemBaseToItems(row);\n      }\n    });\n\n    return items.filter(({ elements }) => elements.length);\n  }\n\n  getInteractiveElements(el: TableBaseRow): Array<HTMLElement> {\n    return el.cells.flatMap(cell => Array.from(\n      cell.querySelectorAll(\"button, a, udex-button, udex-link, udex-rating-indicator\"),\n    ));\n  }\n\n  get _effectiveNoDataText() {\n    return this.noDataText || UDExTable.i18nBundle.getText(TABLE_NO_DATA_FOUND);\n  }\n\n  get _hasToolbar(): boolean {\n    return this.heading.length > 0 || this.actions.length > 0;\n  }\n\n  get _tableMaxHeight(): string {\n    return this.maxHeight ? this.maxHeight : \"auto\";\n  }\n\n  get _tableHolder(): HTMLElement {\n    return this.shadowRoot?.getElementById(\"table\") as HTMLElement;\n  }\n\n  get _gridTemplateColumns(): string {\n    const cellsLength = this.headerRow?.[0]?.cells.length || (this.rows?.[0] as TableBaseRow).cells.length;\n    return `repeat(${cellsLength}, auto)`;\n  }\n\n  get _styles() {\n    const headerStyleMap = this.headerRow?.[0]?.cells?.reduce((headerStyles, headerCell) => {\n      if (headerCell.horizontalAlign !== undefined) {\n        headerStyles[`--horizontal-align-${headerCell._individualSlot}`] = headerCell.horizontalAlign;\n      }\n      return headerStyles;\n    }, {} as { [key: string]: string });\n\n    return {\n      table: {\n        \"grid-template-columns\": this._gridTemplateColumns,\n        \"max-height\": this._tableMaxHeight,\n        ...headerStyleMap,\n      },\n    };\n  }\n}\n\nUDExTable.define();\n\nexport default UDExTable;\n"]}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../src/Table.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,0BAA0B,MAAM,iEAAiE,CAAC;AACzG,OAAO,EACL,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAC9B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,aAAa,MAAM,gBAAgB,CAAC;AAC3C,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,aAAa,MAAM,4CAA4C,CAAC;AAEvE,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAUvD;;;;;;;;;;;;;;;GAeG;AAeH,IAAM,SAAS,iBAAf,MAAM,SAAU,SAAQ,UAAU;IAkHhC,MAAM,CAAC,KAAK,CAAC,QAAQ;QACnB,WAAS,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,sBAAsB,CAAC,CAAC;IACrE,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAC9B;QAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;IACH,CAAC;IAED,cAAc,CAAC,CAAgB;QAC7B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACtB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC;IAED,aAAa,CAAC,CAAgB;QAC5B,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE;YACX,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;SACvB;IACH,CAAC;IAED,eAAe,CAAC,CAAgB;QAC9B,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE;YACb,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;SACtB;IACH,CAAC;IAED,gBAAgB,CAAC,CAAgB;QAC/B,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;SACvB;IACH,CAAC;IAED,eAAe,CAAC,CAAgB;QAC9B,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE;YACb,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;SACxB;IACH,CAAC;IAED,YAAY,CAAC,MAAc;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAChD,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC,GAAG,CAAiB,CAAC;QAC3F,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAC9C,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC;QAE7C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACjC,CAAC;IAED,aAAa,CAAC,MAAc;QAC1B,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAEtC,IAAI,CAAE,SAA+B,CAAC,OAAO,EAAE;YAC7C,MAAM,mBAAmB,GAAG,IAAI,CAAC,sBAAsB,CAAC,SAAyB,CAAC,CAAC;YACnF,MAAM,YAAY,GAAG,mBAAmB,CAAC,OAAO,CAAc,QAAQ,CAAC,aAAa,CAAC,CAAC;YACtF,MAAM,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;YAC1C,IAAI,WAAW,IAAI,CAAC,IAAI,WAAW,GAAG,mBAAmB,CAAC,MAAM,EAAE;gBAChE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,CAAC;aAC3C;SACF;IACH,CAAC;IAED,SAAS;QACP,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;QAEpD,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,CAAC,CAAC;SACtC;QAED,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,2BAA2B,CAAC,UAAU,CAAC,CAAC;SAC9C;IACH,CAAC;IAED,oBAAoB;QAClB,MAAM,sBAAsB,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YAC7D,OAAO,MAAM,CAAC,KAAK;iBAChB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAE,IAA4B,CAAC,WAAW,KAAK,IAAI,CAAC;iBAClE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACtB,IAAI,CAAC,CAAC,GAAG,YAAY,iBAAiB,CAAC,EAAE;gBACvC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACvB,IAAI,sBAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE;wBACzD,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;qBACvC;gBACH,CAAC,CAAC,CAAC;aACJ;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,qBAAqB;QACnB,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,IAAI,CAAC,CAAC,GAAG,YAAY,iBAAiB,CAAC,EAAE;gBACvC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;aAC7B;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YACvD,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,2BAA2B,CAAC,UAAkB;QAC5C,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,IAAI,CAAC,CAAC,GAAG,YAAY,iBAAiB,CAAC,EAAE;gBACvC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,UAAU,GAAG,CAAC,CAAC;aACjD;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,YAAY;QACV,MAAM,cAAc,GAAG,QAAQ,CAAC,aAA4B,CAAC;QAC7D,OAAO,cAAc,CAAC,OAAO,CAAC,6DAA6D,CAAE,CAAC;IAChG,CAAC;IAED,0BAA0B;QACxB,MAAM,KAAK,GAAwB,EAAE,CAAC;QAEtC,MAAM,oBAAoB,GAAG,CAAC,GAA0D,EAAE,WAAgC,EAAE,EAAE;YAC5H,IAAI,WAAW,EAAE;gBACf,KAAK,CAAC,IAAI,CAAe;oBACvB,EAAE,EAAE,GAAG,CAAC,GAAG;oBACX,QAAQ,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;iBACpD,CAAC,CAAC;aACJ;YACA,GAAyB,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBACjD,KAAK,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,QAAQ,CAAC,GAAG;oBAChB,KAAK,EAAE,IAAI;oBACX,QAAQ,EAAE,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC;iBAChD,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,mBAAmB,GAAG,CAAC,GAA0D,EAAE,EAAE;YACzF,KAAK,CAAC,IAAI,CAAe;gBACvB,EAAE,EAAE,GAAG,CAAC,GAAG;gBACX,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,GAAG,CAAC,OAAO;oBACnB,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;oBAC3C,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,GAAmB,CAAC;aACrD,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,GAAwB,CAAC;YACnE,IAAI,OAAO,IAAI,OAAO,EAAE;gBACtB,oBAAoB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;aACxC;iBAAM;gBACL,mBAAmB,CAAC,GAAG,CAAC,CAAC;aAC1B;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACzD,CAAC;IAED,sBAAsB,CAAC,EAAgB;QACrC,OAAO,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CACxC,IAAI,CAAC,gBAAgB,CAAC,0DAA0D,CAAC,CAClF,CAAC,CAAC;IACL,CAAC;IAED,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,UAAU,IAAI,WAAS,CAAC,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC9E,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAC5D,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAClD,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,OAAO,CAAgB,CAAC;IACjE,CAAC;IAED,IAAI,oBAAoB;QACtB,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAkB,CAAA,CAAC,KAAK,CAAC,MAAM,CAAC;QACvG,OAAO,UAAU,WAAW,SAAS,CAAC;IACxC,CAAC;IAED,IAAI,OAAO;QACT,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,YAAY,EAAE,UAAU,EAAE,EAAE;YACrF,IAAI,UAAU,CAAC,eAAe,KAAK,SAAS,EAAE;gBAC5C,YAAY,CAAC,sBAAsB,UAAU,CAAC,eAAe,EAAE,CAAC,GAAG,UAAU,CAAC,eAAe,CAAC;aAC/F;YACD,OAAO,YAAY,CAAC;QACtB,CAAC,EAAE,EAA+B,CAAC,CAAC;QAEpC,OAAO;YACL,KAAK,EAAE;gBACL,uBAAuB,EAAE,IAAI,CAAC,oBAAoB;gBAClD,YAAY,EAAE,IAAI,CAAC,eAAe;gBAClC,GAAG,cAAc;aAClB;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA/TG;IADD,QAAQ,EAAE;4CACU;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACD;AAOxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACR;AAOjB;IADD,QAAQ,EAAE;6CACW;AAQpB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACR;AAQjB;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACxB;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACH;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACH;AAOvB;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;uCACI;AAO/C;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;4CACY;AAOtC;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;0CACG;AAO7B;IADD,IAAI,EAAE;yCACuB;AAO5B;IADD,IAAI,EAAE;4CAC0B;AAS/B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACA;AA9GxB,SAAS;IAdd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,QAAQ,EAAE,0BAA0B,EAAE,CAAC;QAChD,QAAQ,EAAE,aAAa;QACvB,YAAY,EAAE;YACZ,aAAa;YACb,kBAAkB;YAClB,YAAY;YACZ,aAAa;YACb,iBAAiB;SAClB;KACF,CAAC;GAEI,SAAS,CAwUd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport getEffectiveScrollbarStyle from \"@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js\";\nimport {\n  isUp, isDown, isLeft, isRight,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UDExTableHeaderRow from \"./TableHeaderRow.js\";\nimport UDExTableRow from \"./TableRow.js\";\nimport UDExTableCell from \"./TableCell.js\";\nimport UDExTableGroupRow from \"./TableGroupRow.js\";\nimport UDExTableHeaderCell from \"./TableHeaderCell.js\";\nimport { TABLE_NO_DATA_FOUND } from \"./generated/i18n/i18n-defaults.js\";\nimport TableTemplate from \"./generated/templates/TableTemplate.lit.js\";\n\n// Styles\nimport TableCss from \"./generated/themes/Table.css.js\";\n\ntype TableBaseRow = UDExTableHeaderRow | UDExTableRow;\n\ntype KeyBoardItem = {\n  id: string;\n  group?: boolean;\n  elements: Array<HTMLElement>;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-table</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/Table.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-table\",\n  renderer: litRender,\n  styles: [TableCss, getEffectiveScrollbarStyle()],\n  template: TableTemplate,\n  dependencies: [\n    BusyIndicator,\n    UDExTableHeaderRow,\n    UDExTableRow,\n    UDExTableCell,\n    UDExTableGroupRow,\n  ],\n})\n\nclass UDExTable extends UI5Element {\n  /**\n   * Defines the height of the table.\n   * Allows control over the maximum height.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    maxHeight!: string;\n\n  /**\n   * Defines the accessible ARIA name of the table.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  /**\n   * Defines the heading of the table.\n   * @public\n   */\n  @property({ type: String })\n    heading!: string;\n\n  /**\n   * Defines the text to be displayed when there are no rows in the component.\n   * @public\n   */\n  @property()\n    noDataText?: string;\n\n  /**\n   * Defines if the loading indicator should be shown.\n   * @default false\n   * @public\n   */\n  @property({ type: String })\n    loading!: string;\n\n  /**\n   * Defines the delay in milliseconds, after which the loading indicator will show up for this component.\n   * @default 1000\n   * @public\n   */\n  @property({ defaultValue: 1000, type: Integer })\n    loadingDelay!: string;\n\n  /**\n   * Sticks the toolbar and header row to the top of the table.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    stickyHeader!: boolean;\n\n  /**\n   * Sticks the first column to the left of the table.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    stickyColumn!: boolean;\n\n  /**\n   * Defines the rows of the table.\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    rows!: Array<UDExTableRow | UDExTableGroupRow>;\n\n  /**\n   * Defines the header row of the table.\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    headerRow!: Array<UDExTableHeaderRow>;\n\n  /**\n   * Defines the actions of the table.\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    actions!: Array<HTMLElement>;\n\n  /**\n   * Defines the custom visualization if there is no data available.\n   * @public\n   */\n  @slot()\n    noData!: Array<HTMLElement>;\n\n  /**\n   * Defines the footnotes of the table.\n   * @public\n   */\n  @slot()\n    footnotes!: Array<HTMLElement>;\n\n  /**\n   * Defines the table has vertical scrolling.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _verticalOffset?: boolean;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine() {\n    UDExTable.i18nBundle = await getI18nBundle(\"@udex/web-components\");\n  }\n\n  onAfterRendering() {\n    if (this.stickyColumn) {\n      this._setStickyAttrToCells();\n    }\n\n    this._setIndexToCells();\n\n    if (this.headerRow) {\n      this._setCellsHighlighter();\n    }\n  }\n\n  _handleKeyDown(e: KeyboardEvent) {\n    this.handleUpArrow(e);\n    this.handleDownArrow(e);\n    this.handleLeftArrow(e);\n    this.handleRightArrow(e);\n  }\n\n  handleUpArrow(e: KeyboardEvent) {\n    if (isUp(e)) {\n      e.preventDefault();\n      this.navigateRows(-1);\n    }\n  }\n\n  handleDownArrow(e: KeyboardEvent) {\n    if (isDown(e)) {\n      e.preventDefault();\n      this.navigateRows(1);\n    }\n  }\n\n  handleRightArrow(e: KeyboardEvent) {\n    if (isRight(e)) {\n      e.preventDefault();\n      this.navigateCells(1);\n    }\n  }\n\n  handleLeftArrow(e: KeyboardEvent) {\n    if (isLeft(e)) {\n      e.preventDefault();\n      this.navigateCells(-1);\n    }\n  }\n\n  navigateRows(offset: number) {\n    const items = this.getKeyboardNavigationItems();\n    const activeItem = items.find(item => item.id === this.getParentRow()._id) as KeyBoardItem;\n    const activeIndex = items.indexOf(activeItem);\n    const nextItem = items[activeIndex + offset];\n\n    nextItem?.elements[0]?.focus();\n  }\n\n  navigateCells(offset: number) {\n    const parentRow = this.getParentRow();\n\n    if (!(parentRow as UDExTableGroupRow).isGroup) {\n      const interactiveElements = this.getInteractiveElements(parentRow as TableBaseRow);\n      const currentIndex = interactiveElements.indexOf(<HTMLElement>document.activeElement);\n      const targetIndex = currentIndex + offset;\n      if (targetIndex >= 0 && targetIndex < interactiveElements.length) {\n        interactiveElements[targetIndex]?.focus();\n      }\n    }\n  }\n\n  _onScroll() {\n    const { scrollLeft, scrollTop } = this._tableHolder;\n\n    if (this.stickyHeader) {\n      this._verticalOffset = scrollTop > 0;\n    }\n\n    if (this.stickyColumn) {\n      this._setHorizontalOffsetToCells(scrollLeft);\n    }\n  }\n\n  _setCellsHighlighter(): void {\n    const highlightedHeaderCells = this.headerRow.flatMap(header => {\n      return header.cells\n        .filter(cell => (cell as UDExTableHeaderCell).highlighted === true)\n        .map(cell => cell._individualSlot);\n    });\n\n    this.rows.forEach(row => {\n      if (!(row instanceof UDExTableGroupRow)) {\n        row.cells.forEach(cell => {\n          if (highlightedHeaderCells.includes(cell._individualSlot)) {\n            cell.setAttribute(\"_highlighted\", \"\");\n          }\n        });\n      }\n    });\n  }\n\n  _setStickyAttrToCells():void {\n    [...this.headerRow, ...this.rows].forEach(row => {\n      if (!(row instanceof UDExTableGroupRow)) {\n        row.cells[0]._sticky = true;\n      }\n    });\n  }\n\n  _setIndexToCells(): void {\n    [...this.headerRow, ...this.rows].forEach((row, index) => {\n      row._index = index;\n    });\n  }\n\n  _setHorizontalOffsetToCells(scrollLeft: number):void {\n    [...this.headerRow, ...this.rows].forEach(row => {\n      if (!(row instanceof UDExTableGroupRow)) {\n        row.cells[0]._horizontalOffset = scrollLeft > 0;\n      }\n    });\n  }\n\n  getParentRow(): UDExTableRow | UDExTableHeaderRow | UDExTableGroupRow {\n    const focusedElement = document.activeElement as HTMLElement;\n    return focusedElement.closest(\"udex-table-row, udex-table-header-row, udex-table-group-row\")!;\n  }\n\n  getKeyboardNavigationItems(): Array<KeyBoardItem> {\n    const items: Array<KeyBoardItem> = [];\n\n    const pushItemGroupToItems = (row: UDExTableHeaderRow | UDExTableRow | UDExTableGroupRow, collapsible: boolean | undefined) => {\n      if (collapsible) {\n        items.push(<KeyBoardItem>{\n          id: row._id,\n          elements: [row.shadowRoot?.querySelector(\"button\")],\n        });\n      }\n      (row as UDExTableGroupRow).rows.forEach(rowGroup => {\n        items.push({\n          id: rowGroup._id,\n          group: true,\n          elements: this.getInteractiveElements(rowGroup),\n        });\n      });\n    };\n\n    const pushItemBaseToItems = (row: UDExTableHeaderRow | UDExTableRow | UDExTableGroupRow) => {\n      items.push(<KeyBoardItem>{\n        id: row._id,\n        group: false,\n        elements: row.isGroup\n          ? [row.shadowRoot?.querySelector(\"button\")]\n          : this.getInteractiveElements(row as TableBaseRow),\n      });\n    };\n\n    [...this.headerRow, ...this.rows].forEach(row => {\n      const { isGroup, _isOpen, collapsible } = row as UDExTableGroupRow;\n      if (isGroup && _isOpen) {\n        pushItemGroupToItems(row, collapsible);\n      } else {\n        pushItemBaseToItems(row);\n      }\n    });\n\n    return items.filter(({ elements }) => elements.length);\n  }\n\n  getInteractiveElements(el: TableBaseRow): Array<HTMLElement> {\n    return el.cells.flatMap(cell => Array.from(\n      cell.querySelectorAll(\"button, a, udex-button, udex-link, udex-rating-indicator\"),\n    ));\n  }\n\n  get _effectiveNoDataText() {\n    return this.noDataText || UDExTable.i18nBundle.getText(TABLE_NO_DATA_FOUND);\n  }\n\n  get _hasToolbar(): boolean {\n    return this.heading.length > 0 || this.actions.length > 0;\n  }\n\n  get _tableMaxHeight(): string {\n    return this.maxHeight ? this.maxHeight : \"auto\";\n  }\n\n  get _tableHolder(): HTMLElement {\n    return this.shadowRoot?.getElementById(\"table\") as HTMLElement;\n  }\n\n  get _gridTemplateColumns(): string {\n    const cellsLength = this.headerRow?.[0]?.cells.length || (this.rows?.[0] as TableBaseRow).cells.length;\n    return `repeat(${cellsLength}, auto)`;\n  }\n\n  get _styles() {\n    const headerStyleMap = this.headerRow?.[0]?.cells?.reduce((headerStyles, headerCell) => {\n      if (headerCell.horizontalAlign !== undefined) {\n        headerStyles[`--horizontal-align-${headerCell._individualSlot}`] = headerCell.horizontalAlign;\n      }\n      return headerStyles;\n    }, {} as { [key: string]: string });\n\n    return {\n      table: {\n        \"grid-template-columns\": this._gridTemplateColumns,\n        \"max-height\": this._tableMaxHeight,\n        ...headerStyleMap,\n      },\n    };\n  }\n}\n\nUDExTable.define();\n\nexport default UDExTable;\n"]}

package/dist/Tag.d.ts

@@ -24,7 +24,7 @@ export declare enum TagSize {
  * For the <code>udex-tag</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Tag.js";</code>
+ * <code>import "@udex/web-components/dist/Tag.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -40,6 +40,13 @@ declare class UDExTag extends UI5Element {
     * @public
     */
     text: string;
+    /**
+     * Defines the href for behavior of the tag as a link
+     *
+     * @default ""
+     * @public
+     */
+    href: string;
     /**
      * Defines the design type of tag
     *
@@ -141,5 +148,6 @@ declare class UDExTag extends UI5Element {
     get isInteractiveTag(): boolean;
     get hasIcon(): boolean;
     get iconAccessibleName(): string;
+    tagLinkClickHandler(e: Event): void;
 }
 export default UDExTag;

package/dist/Tag.js

@@ -43,7 +43,7 @@ export var TagSize;
  * For the <code>udex-tag</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Tag.js";</code>
+ * <code>import "@udex/web-components/dist/Tag.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -59,6 +59,9 @@ let UDExTag = class UDExTag extends UI5Element {
         if (isDesktop()) {
             this.setAttribute("desktop", "");
         }
+        if (this.accessibleRole !== "button") {
+            this.shadowRoot?.firstElementChild?.removeAttribute("aria-pressed");
+        }
     }
     setSelected() {
         this.selected = !this.selected;
@@ -87,10 +90,11 @@ let UDExTag = class UDExTag extends UI5Element {
     get tagClasses() {
         const hasIconClass = this.hasIcon ? "udex-tag--has-icon" : "";
         const readOnlyClass = this.readOnly ? "udex-tag--readonly" : "";
-        const nonSelectableClass = this.nonSelectable ? "udex-tag--nonselectable" : "";
+        const nonSelectableClass = this.nonSelectable && !this.href ? "udex-tag--nonselectable" : "";
+        const linkTagClass = this.href ? "udex-tag--link" : "";
         const selectableClass = this.selected ? "udex-tag--selected" : "";
         const designClass = `udex-tag-${this.design?.toLowerCase()}`;
-        return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} ${designClass} ${hasIconClass} ${readOnlyClass} ${nonSelectableClass} ${selectableClass}`.trim();
+        return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} ${designClass} ${hasIconClass} ${readOnlyClass} ${nonSelectableClass} ${linkTagClass} ${selectableClass}`.trim();
     }
     get startIcon() {
         return this.hasIcon && this.iconPlacement === IconPlacement.Start;
@@ -122,10 +126,16 @@ let UDExTag = class UDExTag extends UI5Element {
     get iconAccessibleName() {
         return this.accessibleName || this.text;
     }
+    tagLinkClickHandler(e) {
+        this.fireEvent("tagLinkClick", { originalEvent: e }, true);
+    }
 };
 __decorate([
     property()
 ], UDExTag.prototype, "text", void 0);
+__decorate([
+    property()
+], UDExTag.prototype, "href", void 0);
 __decorate([
     property({ type: TagType, defaultValue: TagType.Grey })
 ], UDExTag.prototype, "design", void 0);
@@ -189,6 +199,13 @@ UDExTag = __decorate([
      */
     ,
     event("iconClick")
+    /**
+     * Emitted when tag link was clicked
+     *
+     * @public
+     */
+    ,
+    event("tagLinkClick")
 ], 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":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.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\";\n\nexport enum TagType {\n    Text = \"Text\",\n    White = \"White\",\n    Outlined = \"Outlined\",\n    Grey = \"Grey\"\n}\n\nexport enum IconPlacement {\n    Start = \"Start\",\n    End = \"End\"\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 @udex/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\")\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  /**\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  onBeforeRendering(): void {\n    this.toBeDeleted = false;\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\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  _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 ? \"udex-tag--nonselectable\" : \"\";\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} ${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\nUDExTag.define();\n\nexport default UDExTag;\n"]}
+{"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,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;AAEhD,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,aAGX;AAHD,WAAY,aAAa;IACrB,gCAAe,CAAA;IACf,4BAAW,CAAA;AACf,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB;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;IA+H9B,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;IACH,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,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;AAtNG;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,CA8NZ;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 { 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\";\n\nexport enum TagType {\n    Text = \"Text\",\n    White = \"White\",\n    Outlined = \"Outlined\",\n    Grey = \"Grey\"\n}\n\nexport enum IconPlacement {\n    Start = \"Start\",\n    End = \"End\"\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 \"@udex/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  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  }\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  _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"]}

package/dist/TagGroup.d.ts

@@ -0,0 +1,94 @@
+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"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-tag-group</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/TagGroup.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExTagGroup extends UI5Element {
+    /**
+     * Defines whether the UI5Tokenizer is expanded.
+     *
+     * @default false
+     * @public
+     */
+    tokenizerExpanded: boolean;
+    /**
+     * Defines whether the component is in disabled state.
+     *
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines whether the component is readonly.
+     *
+     * @default false
+     * @public
+     */
+    readonly: boolean;
+    /**
+     * Defines whether the component is displayonly.
+     *
+     * @default false
+     * @public
+     */
+    displayonly: boolean;
+    /**
+     * Defines the tags.
+     *
+     * @public
+     */
+    items: Array<UDExTag>;
+    /**
+     * Determines on which side of the component the Tooltip is displayed.
+     *
+     * @default "Bottom"
+     * @public
+     */
+    tooltipPlacement: `${PlacementType}`;
+    /**
+     * @private
+     */
+    _isHiddenTags: boolean;
+    _tokenizer: Tokenizer;
+    _nMoreBtn: HTMLElement | null;
+    _resizeHandler: () => void;
+    constructor();
+    get hiddenTags(): Token[];
+    get isReadOrDisplayOnly(): boolean;
+    get tagTabIndex(): string;
+    get tokenizer(): Tokenizer;
+    get tagRole(): string;
+    onAfterRendering(): void;
+    _nMoreKeyDownHandler(e: Event): void;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    _onResize(): void;
+    tagClickHandler(e: CustomEvent): void;
+    tagIconClickHandler(e: CustomEvent): void;
+    handleShowMoreButtonKeydown(e: KeyboardEvent): void;
+    handleTagKeyDown(e: KeyboardEvent): void;
+    showMoreItems(): void;
+}
+export default UDExTagGroup;

package/dist/TagGroup.js

@@ -0,0 +1,174 @@
+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 Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+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 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 = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-tag-group</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/TagGroup.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExTagGroup = class UDExTagGroup extends UI5Element {
+    constructor() {
+        super();
+        this._resizeHandler = this._onResize.bind(this);
+    }
+    get hiddenTags() {
+        return this._tokenizer?.overflownTokens || [];
+    }
+    get isReadOrDisplayOnly() {
+        return this.readonly || this.displayonly;
+    }
+    get tagTabIndex() {
+        return this.disabled ? "-1" : "";
+    }
+    get tokenizer() {
+        return this.shadowRoot.querySelector(`#${this._id}-tag-group-tokenizer`);
+    }
+    get tagRole() {
+        return this.displayonly || this.readonly ? "option" : "";
+    }
+    onAfterRendering() {
+        this._tokenizer = this.tokenizer;
+        this._nMoreBtn = this._tokenizer.shadowRoot?.querySelector(`.ui5-tokenizer-more-text`) || 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));
+        }
+    }
+    _nMoreKeyDownHandler(e) {
+        if (isSpace(e) || isEnter(e)) {
+            this.showMoreItems();
+        }
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._resizeHandler);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._resizeHandler);
+        this._nMoreBtn?.removeEventListener("keydown", this._nMoreKeyDownHandler.bind(this));
+    }
+    _onResize() {
+        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 });
+    }
+    handleShowMoreButtonKeydown(e) {
+        if (isEscape(e)) {
+            this._nMoreBtn?.focus();
+        }
+    }
+    handleTagKeyDown(e) {
+        this.fireEvent("tag-keydown", { originalEvent: e }, true);
+    }
+    showMoreItems() {
+        if (this.fireEvent("show-more-tags", {}, true)) {
+            const tooltip = this.shadowRoot.querySelector(`#${this._id}-tag-group-tooltip`);
+            if (this._nMoreBtn) {
+                tooltip?.onOpen(this._nMoreBtn);
+            }
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], UDExTagGroup.prototype, "tokenizerExpanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTagGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTagGroup.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTagGroup.prototype, "displayonly", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExTagGroup.prototype, "items", void 0);
+__decorate([
+    property({ type: PlacementType, defaultValue: PlacementType.Bottom })
+], UDExTagGroup.prototype, "tooltipPlacement", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTagGroup.prototype, "_isHiddenTags", void 0);
+UDExTagGroup = __decorate([
+    customElement({
+        tag: "udex-tag-group",
+        renderer: litRender,
+        styles: TagGroupCss,
+        template: TagGroupTemplate,
+        dependencies: [UDExTag, UDExTooltip, Tokenizer, Token],
+    })
+    /**
+     * Emitted when tag was clicked
+     *
+     * @public
+     */
+    ,
+    event("tag-click")
+    /**
+     * Emitted when icon in tag was clicked
+     *
+     * @public
+     */
+    ,
+    event("tag-icon-click")
+    /**
+     * Emitted when the tooltip was opened, can be canceled
+     *
+     * @public
+     */
+    ,
+    event("show-more-tags")
+    /**
+     * Emitted  when a keydown event occurs on a tag, can be canceled
+     * Emitted custom event with keycode and tag details
+     *
+     * @public
+     */
+    ,
+    event("tag-keydown")
+], UDExTagGroup);
+UDExTagGroup.define();
+export default UDExTagGroup;
+//# sourceMappingURL=TagGroup.js.map

package/dist/TagGroup.js.map

@@ -0,0 +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 \"@udex/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"]}

package/dist/TextArea.d.ts

@@ -153,6 +153,18 @@ declare class UDExTextArea extends UI5Element {
      * @public
      */
     accessibleNameRef: string;
+    /**
+     * Defines the active (focus)
+     * @default false
+     * @private
+     */
+    active: boolean;
+    /**
+     * Defines is it the touch of the textarea (only for mobile devices).
+     * @default false
+     * @private
+     */
+    _isTouched: boolean;
     static i18nBundle: I18nBundle;
     static onDefine(): Promise<void>;
     getInputDomRef(): HTMLTextAreaElement;
@@ -171,6 +183,7 @@ declare class UDExTextArea extends UI5Element {
     handleChange: () => void;
     handleGrowing: () => void;
     handleFocus: () => void;
+    handleClick(): void;
     handleBlur: () => void;
     get ariaInvalid(): "true" | null;
     onBeforeRendering(): void;

package/dist/TextArea.js

@@ -12,6 +12,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { READ_ONLY, TEXTAREA_CHARACTERS_LEFT, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_STANDARD, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_WARNING, } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
@@ -69,20 +70,23 @@ let UDExTextArea = UDExTextArea_1 = class UDExTextArea extends UI5Element {
         };
         this.handleFocus = () => {
             if (!this.disabled && !this.readonly && !this.displayonly) {
+                this.active = true;
                 this.labelActiveClass = this._labelActiveClassName;
             }
         };
         this.handleBlur = () => {
+            this._isTouched = false;
             if (this.value) {
                 this.labelActiveClass = this._labelActiveClassName;
             }
             else {
                 this.labelActiveClass = "";
             }
+            this.active = false;
         };
     }
     static async onDefine() {
-        UDExTextArea_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+        UDExTextArea_1.i18nBundle = await getI18nBundle("@udex/web-components");
     }
     getInputDomRef() {
         return this.getDomRef().querySelector("textarea");
@@ -131,6 +135,11 @@ let UDExTextArea = UDExTextArea_1 = class UDExTextArea extends UI5Element {
             }
         }
     }
+    handleClick() {
+        if (!isDesktop()) {
+            this._isTouched = true;
+        }
+    }
     get ariaInvalid() {
         return this.fieldState === FieldState.Error ? "true" : null;
     }
@@ -196,6 +205,12 @@ __decorate([
 __decorate([
     property({ defaultValue: "" })
 ], UDExTextArea.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTextArea.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTextArea.prototype, "_isTouched", void 0);
 UDExTextArea = UDExTextArea_1 = __decorate([
     customElement({
         tag: "udex-textarea",