@sapudex/web-components 2.61.0 → 2.62.0

package/dist/SelectBoxTemplate.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
 import UDExTagGroup from "./TagGroup.js";
 import UDExTag from "./Tag.js";
 import UDExStatusMessage from "./StatusMessage.js";
@@ -9,7 +9,7 @@ import UI5PopoverHAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAli
 import { cleanLabel } from "./utils/listItemLabelUtils.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 export default function SelectBoxTemplate() {
-    return (_jsx("div", { class: this._rootClass, children: _jsxs("div", { class: "udex-text-field__container", children: [_jsxs("div", { class: "udex-text-field__wrap", ...(this.displayonly ? { displayonly: "" } : {}), children: [this.showMultiSelectedOptions && renderTagGroup.call(this), _jsxs("div", { class: "udex-text-field__input", onFocusIn: this.handleInputFocusIn, onFocusOut: this.handleInputFocusOut, ...(this.readonly ? { readonly: "" } : {}), ...(this.isDisabled ? { disabled: "" } : {}), ...(this._open ? { open: "" } : {}), children: [this.label && (_jsxs(_Fragment, { children: [_jsxs("label", { for: "search-input", class: this.labelClass, children: [this.label, this.required && " * "] }), _jsx("span", { class: "hidden", id: `${this._id}-aria-describedby`, children: this.ariaDescribedbyText })] })), this.showImageFlags && this.countryFlag, _jsxs("div", { class: "udex-text-field__holder", children: [_jsx("input", { role: "combobox", type: "text", id: "search-input", name: "search", class: "udex-text-field__search", value: this._inputValue, onInput: this.handleSearchChange, onClick: this.handleInputClick, onKeyDown: this.handleKeyDownSearch, disabled: this.isDisabled, readonly: this.isReadOrDisplayOnly, "aria-label": this.accInfo.ariaLabel, "aria-readonly": this.isReadOrDisplayOnly, "aria-disabled": this.disabled, "aria-required": this.required, "aria-haspopup": this.listboxRole, "aria-controls": this.listAriaControlsId, "aria-expanded": this._open, "aria-activedescendant": this._activeDescendantItem ? this._activeDescendantItem._id : undefined, "aria-autocomplete": this._ariaAutoComplete, "aria-describedby": `${this._id}-aria-describedby`, autocomplete: "off" }), this._selectedOption && (_jsx("div", { class: "udex-text-field__text-holder", children: _jsx("span", { class: "udex-text-field__single-label", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: this._selectedOption } }) }))] }), !this.displayonly && (_jsx("button", { onClick: this.handleButtonClick, disabled: this.isDisabled, "aria-label": this.accInfo.ariaLabel, class: "udex-text-field__trigger", tabindex: -1, children: _jsx(UI5Icon, { mode: "Decorative", name: "navigation-down-arrow" }) })), _jsxs(UI5Popover, { id: this.popoverId, accessibleRole: PopupAccessibleRole.None, "allow-target-overlap": this.allowTargetOverlap, onKeyDown: this.handleKeyDownDropdown, ...{
+    return (_jsx("div", { class: this._rootClass, children: _jsxs("div", { class: "udex-text-field__container", children: [_jsxs("div", { class: "udex-text-field__wrap", ...(this.displayonly ? { displayonly: "" } : {}), children: [this.showMultiSelectedOptions && renderTagGroup.call(this), _jsxs("div", { class: "udex-text-field__input", onFocusIn: this.handleInputFocusIn, onFocusOut: this.handleInputFocusOut, ...(this.readonly ? { readonly: "" } : {}), ...(this.isDisabled ? { disabled: "" } : {}), ...(this._open ? { open: "" } : {}), children: [this.label && (_jsxs("label", { for: "search-input", class: this.labelClass, children: [this.label, this.required && " * "] })), _jsx("span", { class: "hidden", id: `${this._id}-aria-describedby`, children: this.ariaDescribedbyText }), this.showImageFlags && this.countryFlag, _jsxs("div", { class: "udex-text-field__holder", children: [_jsx("input", { role: "combobox", type: "text", id: "search-input", name: "search", class: "udex-text-field__search", value: this._inputValue, onInput: this.handleSearchChange, onClick: this.handleInputClick, onKeyDown: this.handleKeyDownSearch, disabled: this.isDisabled, readonly: this.isReadOrDisplayOnly, "aria-label": this.accInfo.ariaLabel, "aria-readonly": this.isReadOrDisplayOnly, "aria-disabled": this.disabled, "aria-required": this.required, "aria-haspopup": this.listboxRole, "aria-controls": this.listAriaControlsId, "aria-expanded": this._open, "aria-activedescendant": this._activeDescendantItem ? this._activeDescendantItem.id : undefined, "aria-autocomplete": this._ariaAutoComplete, "aria-describedby": `${this._id}-aria-describedby`, autocomplete: "off" }), this._selectedOption && (_jsx("div", { class: "udex-text-field__text-holder", children: _jsx("span", { class: "udex-text-field__single-label", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: this._selectedOption } }) }))] }), !this.displayonly && (_jsx("button", { onClick: this.handleButtonClick, disabled: this.isDisabled, "aria-label": this.accInfo.ariaLabel, class: "udex-text-field__trigger", tabindex: -1, children: _jsx(UI5Icon, { mode: "Decorative", name: "navigation-down-arrow" }) })), _jsxs(UI5Popover, { id: this.popoverId, accessibleRole: PopupAccessibleRole.None, "allow-target-overlap": this.allowTargetOverlap, onKeyDown: this.handleKeyDownDropdown, onClick: this.handleDropdownClick, ...{
                                         onSelectAll: this.handleSelectAll,
                                         onItemPress: this.handleItemPress,
                                         onHeaderPress: this.handleHeaderPress,
@@ -20,7 +20,7 @@ export default function SelectBoxTemplate() {
 function renderTagGroup() {
     return (_jsx(UDExTagGroup, { class: "udex-tag-group", displayonly: this.displayonly, readonly: this.readonly, disabled: this.disabled, onFocusOut: this.resetTagsTabIndexes, "tooltip-placement": this.tooltipPlacement, onTagIconClick: this.handleRemoveTag, onTagClick: this.handleTagClick, onShowMoreTags: this.handlerShowMoreItems, onTagKeydown: this.handleKeyDownTag, "tokenizer-expanded": this.tokenizerExpanded, "_skip-more-button-focus": true, children: this.selectedItems
             .filter(item => !item.isGroup)
-            .map((item, index) => (item.label ? (_jsx(UDExTag, { text: cleanLabel(item.label), id: item._id, icon: "decline" }, index)) : (_jsx(UDExTag, { text: `${item.rating} ${this.startsText}`, id: item._id, icon: "decline" }, index)))) }));
+            .map((item, index) => (item.label ? (_jsx(UDExTag, { text: cleanLabel(item.label), id: `${this._id}-tag-${item._id}`, "data-id": item._id, icon: "decline" }, index)) : (_jsx(UDExTag, { text: `${item.rating} ${this.startsText}`, id: `${this._id}-tag-${item._id}`, "data-id": item._id, icon: "decline" }, index)))) }));
 }
 function renderTruncatableTagContent() {
     return (_jsxs("div", { class: "udex-truncatable-tag-content", children: [_jsx("span", { class: "udex-truncatable-tag-content__label", children: this.truncatableTagLabel }), _jsx(UI5Icon, { onClick: this.handleRemoveTruncatableTag, class: "udex-truncatable-tag-content__icon", mode: "Decorative", name: "decline" })] }));

package/dist/SelectBoxTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBoxTemplate.js","sourceRoot":"","sources":["../src/SelectBoxTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type UDExSelectBox from \"./SelectBox.js\";\nimport UDExTagGroup from \"./TagGroup.js\";\nimport UDExTag from \"./Tag.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UI5Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport UI5PopoverPlacement from \"@ui5/webcomponents/dist/types/PopoverPlacement.js\";\nimport UI5PopoverHAlign from \"@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js\";\nimport { cleanLabel } from \"./utils/listItemLabelUtils.js\";\nimport PopupAccessibleRole from \"@ui5/webcomponents/dist/types/PopupAccessibleRole.js\";\n\nexport default function SelectBoxTemplate(this: UDExSelectBox) {\n  return (\n    <div class={this._rootClass}>\n      <div class=\"udex-text-field__container\">\n        <div class=\"udex-text-field__wrap\" {...(this.displayonly ? { displayonly: \"\" } : {})}>\n          {this.showMultiSelectedOptions && renderTagGroup.call(this)}\n          <div\n            class=\"udex-text-field__input\"\n            onFocusIn={this.handleInputFocusIn}\n            onFocusOut={this.handleInputFocusOut}\n            {...(this.readonly ? { readonly: \"\" } : {})}\n            {...(this.isDisabled ? { disabled: \"\" } : {})}\n            {...(this._open ? { open: \"\" } : {})}>\n            {this.label && (\n              <>\n                <label for=\"search-input\" class={this.labelClass}>\n                  {this.label}{this.required && \" * \"}\n                </label>\n                <span class=\"hidden\" id={`${this._id}-aria-describedby`}>{this.ariaDescribedbyText}</span>\n              </>\n            )}\n            {this.showImageFlags && this.countryFlag}\n            <div class=\"udex-text-field__holder\">\n              <input\n                role=\"combobox\"\n                type=\"text\"\n                id=\"search-input\"\n                name=\"search\"\n                class=\"udex-text-field__search\"\n                value={this._inputValue}\n                onInput={this.handleSearchChange}\n                onClick={this.handleInputClick}\n                onKeyDown={this.handleKeyDownSearch}\n                disabled={this.isDisabled}\n                readonly={this.isReadOrDisplayOnly}\n                aria-label={this.accInfo.ariaLabel}\n                aria-readonly={this.isReadOrDisplayOnly}\n                aria-disabled={this.disabled}\n                aria-required={this.required}\n                aria-haspopup={this.listboxRole}\n                aria-controls={this.listAriaControlsId}\n                aria-expanded={this._open}\n                aria-activedescendant={this._activeDescendantItem ? this._activeDescendantItem._id : undefined}\n                aria-autocomplete={this._ariaAutoComplete}\n                aria-describedby={`${this._id}-aria-describedby`}\n                autocomplete=\"off\"\n              />\n              {this._selectedOption && (\n                <div class=\"udex-text-field__text-holder\">\n                  <span\n                    class=\"udex-text-field__single-label\"\n                    aria-hidden=\"true\"\n                    dangerouslySetInnerHTML={{ __html: this._selectedOption }}>\n                  </span>\n                </div>\n              )}\n            </div>\n            {!this.displayonly && (\n              <button\n                onClick={this.handleButtonClick}\n                disabled={this.isDisabled}\n                aria-label={this.accInfo.ariaLabel}\n                class=\"udex-text-field__trigger\"\n                tabindex={-1}>\n                <UI5Icon mode=\"Decorative\" name=\"navigation-down-arrow\"></UI5Icon>\n              </button>\n            )}\n            <UI5Popover\n              id={this.popoverId}\n              accessibleRole={PopupAccessibleRole.None}\n              allow-target-overlap={this.allowTargetOverlap}\n              onKeyDown={this.handleKeyDownDropdown}\n              {...({\n                onSelectAll: this.handleSelectAll,\n                onItemPress: this.handleItemPress,\n                onHeaderPress: this.handleHeaderPress,\n              } as any)}\n              onBeforeOpen={this.handleDropdownBeforeOpen}\n              onOpen={this.handleDropdownOpen}\n              onBeforeClose={this.handleDropdownBeforeClose}\n              onClose={this.handleDropdownClose}\n              class=\"udex-select-box__dropdown\"\n              horizontal-align={UI5PopoverHAlign.Start}\n              placement={UI5PopoverPlacement.Bottom}\n              prevent-focus-restore\n              prevent-initial-focus\n              hide-arrow>\n              {this._showTagsDropdownContent\n                ? renderTruncatableTagContent.call(this)\n                : this.searchableList}\n              {this.hasFooter && <slot name=\"footer\" slot=\"footer\" />}\n            </UI5Popover>\n            <span aria-live=\"polite\" aria-atomic=\"true\" class=\"hidden\">{this._liveRegionText}</span>\n          </div>\n        </div>\n        {this.supportingText && (\n          <UDExStatusMessage\n            disabled={this.disabled}\n            supporting-text={this.supportingText}\n            value-state={this.valueState}>\n          </UDExStatusMessage>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction renderTagGroup(this: UDExSelectBox) {\n  return (\n    <UDExTagGroup\n      class=\"udex-tag-group\"\n      displayonly={this.displayonly}\n      readonly={this.readonly}\n      disabled={this.disabled}\n      onFocusOut={this.resetTagsTabIndexes}\n      tooltip-placement={this.tooltipPlacement}\n      onTagIconClick={this.handleRemoveTag}\n      onTagClick={this.handleTagClick}\n      onShowMoreTags={this.handlerShowMoreItems}\n      onTagKeydown={this.handleKeyDownTag}\n      tokenizer-expanded={this.tokenizerExpanded}\n      _skip-more-button-focus>\n      {this.selectedItems\n        .filter(item => !item.isGroup)\n        .map((item, index) => (\n          item.label ? (\n            <UDExTag\n              key={index}\n              text={cleanLabel(item.label)}\n              id={item._id}\n              icon=\"decline\">\n            </UDExTag>\n          ) : (\n            <UDExTag\n              key={index}\n              text={`${item.rating} ${this.startsText}`}\n              id={item._id}\n              icon=\"decline\">\n            </UDExTag>\n          )\n        ))\n      }\n    </UDExTagGroup>\n  );\n}\n\nfunction renderTruncatableTagContent(this: UDExSelectBox) {\n  return (\n    <div class=\"udex-truncatable-tag-content\">\n      <span class=\"udex-truncatable-tag-content__label\">{this.truncatableTagLabel}</span>\n      <UI5Icon\n        onClick={this.handleRemoveTruncatableTag}\n        class=\"udex-truncatable-tag-content__icon\"\n        mode=\"Decorative\"\n        name=\"decline\">\n      </UI5Icon>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"SelectBoxTemplate.js","sourceRoot":"","sources":["../src/SelectBoxTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type UDExSelectBox from \"./SelectBox.js\";\nimport UDExTagGroup from \"./TagGroup.js\";\nimport UDExTag from \"./Tag.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UI5Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport UI5PopoverPlacement from \"@ui5/webcomponents/dist/types/PopoverPlacement.js\";\nimport UI5PopoverHAlign from \"@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js\";\nimport { cleanLabel } from \"./utils/listItemLabelUtils.js\";\nimport PopupAccessibleRole from \"@ui5/webcomponents/dist/types/PopupAccessibleRole.js\";\n\nexport default function SelectBoxTemplate(this: UDExSelectBox) {\n  return (\n    <div class={this._rootClass}>\n      <div class=\"udex-text-field__container\">\n        <div class=\"udex-text-field__wrap\" {...(this.displayonly ? { displayonly: \"\" } : {})}>\n          {this.showMultiSelectedOptions && renderTagGroup.call(this)}\n          <div\n            class=\"udex-text-field__input\"\n            onFocusIn={this.handleInputFocusIn}\n            onFocusOut={this.handleInputFocusOut}\n            {...(this.readonly ? { readonly: \"\" } : {})}\n            {...(this.isDisabled ? { disabled: \"\" } : {})}\n            {...(this._open ? { open: \"\" } : {})}>\n            {this.label && (\n              <label for=\"search-input\" class={this.labelClass}>\n                {this.label}{this.required && \" * \"}\n              </label>\n            )}\n            <span class=\"hidden\" id={`${this._id}-aria-describedby`}>{this.ariaDescribedbyText}</span>\n            {this.showImageFlags && this.countryFlag}\n            <div class=\"udex-text-field__holder\">\n              <input\n                role=\"combobox\"\n                type=\"text\"\n                id=\"search-input\"\n                name=\"search\"\n                class=\"udex-text-field__search\"\n                value={this._inputValue}\n                onInput={this.handleSearchChange}\n                onClick={this.handleInputClick}\n                onKeyDown={this.handleKeyDownSearch}\n                disabled={this.isDisabled}\n                readonly={this.isReadOrDisplayOnly}\n                aria-label={this.accInfo.ariaLabel}\n                aria-readonly={this.isReadOrDisplayOnly}\n                aria-disabled={this.disabled}\n                aria-required={this.required}\n                aria-haspopup={this.listboxRole}\n                aria-controls={this.listAriaControlsId}\n                aria-expanded={this._open}\n                aria-activedescendant={this._activeDescendantItem ? this._activeDescendantItem.id : undefined}\n                aria-autocomplete={this._ariaAutoComplete}\n                aria-describedby={`${this._id}-aria-describedby`}\n                autocomplete=\"off\"\n              />\n              {this._selectedOption && (\n                <div class=\"udex-text-field__text-holder\">\n                  <span\n                    class=\"udex-text-field__single-label\"\n                    aria-hidden=\"true\"\n                    dangerouslySetInnerHTML={{ __html: this._selectedOption }}>\n                  </span>\n                </div>\n              )}\n            </div>\n            {!this.displayonly && (\n              <button\n                onClick={this.handleButtonClick}\n                disabled={this.isDisabled}\n                aria-label={this.accInfo.ariaLabel}\n                class=\"udex-text-field__trigger\"\n                tabindex={-1}>\n                <UI5Icon mode=\"Decorative\" name=\"navigation-down-arrow\"></UI5Icon>\n              </button>\n            )}\n            <UI5Popover\n              id={this.popoverId}\n              accessibleRole={PopupAccessibleRole.None}\n              allow-target-overlap={this.allowTargetOverlap}\n              onKeyDown={this.handleKeyDownDropdown}\n              onClick={this.handleDropdownClick}\n              {...({\n                onSelectAll: this.handleSelectAll,\n                onItemPress: this.handleItemPress,\n                onHeaderPress: this.handleHeaderPress,\n              } as any)}\n              onBeforeOpen={this.handleDropdownBeforeOpen}\n              onOpen={this.handleDropdownOpen}\n              onBeforeClose={this.handleDropdownBeforeClose}\n              onClose={this.handleDropdownClose}\n              class=\"udex-select-box__dropdown\"\n              horizontal-align={UI5PopoverHAlign.Start}\n              placement={UI5PopoverPlacement.Bottom}\n              prevent-focus-restore\n              prevent-initial-focus\n              hide-arrow>\n              {this._showTagsDropdownContent\n                ? renderTruncatableTagContent.call(this)\n                : this.searchableList}\n              {this.hasFooter && <slot name=\"footer\" slot=\"footer\" />}\n            </UI5Popover>\n            <span aria-live=\"polite\" aria-atomic=\"true\" class=\"hidden\">{this._liveRegionText}</span>\n          </div>\n        </div>\n        {this.supportingText && (\n          <UDExStatusMessage\n            disabled={this.disabled}\n            supporting-text={this.supportingText}\n            value-state={this.valueState}>\n          </UDExStatusMessage>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction renderTagGroup(this: UDExSelectBox) {\n  return (\n    <UDExTagGroup\n      class=\"udex-tag-group\"\n      displayonly={this.displayonly}\n      readonly={this.readonly}\n      disabled={this.disabled}\n      onFocusOut={this.resetTagsTabIndexes}\n      tooltip-placement={this.tooltipPlacement}\n      onTagIconClick={this.handleRemoveTag}\n      onTagClick={this.handleTagClick}\n      onShowMoreTags={this.handlerShowMoreItems}\n      onTagKeydown={this.handleKeyDownTag}\n      tokenizer-expanded={this.tokenizerExpanded}\n      _skip-more-button-focus>\n      {this.selectedItems\n        .filter(item => !item.isGroup)\n        .map((item, index) => (\n          item.label ? (\n            <UDExTag\n              key={index}\n              text={cleanLabel(item.label)}\n              id={`${this._id}-tag-${item._id}`}\n              data-id={item._id}\n              icon=\"decline\">\n            </UDExTag>\n          ) : (\n            <UDExTag\n              key={index}\n              text={`${item.rating} ${this.startsText}`}\n              id={`${this._id}-tag-${item._id}`}\n              data-id={item._id}\n              icon=\"decline\">\n            </UDExTag>\n          )\n        ))\n      }\n    </UDExTagGroup>\n  );\n}\n\nfunction renderTruncatableTagContent(this: UDExSelectBox) {\n  return (\n    <div class=\"udex-truncatable-tag-content\">\n      <span class=\"udex-truncatable-tag-content__label\">{this.truncatableTagLabel}</span>\n      <UI5Icon\n        onClick={this.handleRemoveTruncatableTag}\n        class=\"udex-truncatable-tag-content__icon\"\n        mode=\"Decorative\"\n        name=\"decline\">\n      </UI5Icon>\n    </div>\n  );\n}\n"]}

package/dist/SideNavigationItem.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import SideNavigationItem from "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
+import SideNavigationItemTemplate from "./SideNavigationItemTemplate.js";
 // Styles
 import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js";
 import { isDesktop } from "@ui5/webcomponents-base";
@@ -112,6 +113,7 @@ UDExSideNavigationItem = __decorate([
     customElement({
         tag: "udex-side-navigation-item",
         renderer: jsxRenderer,
+        template: SideNavigationItemTemplate,
         styles: [SideNavigationItem.styles, SideNavigationItemCss],
     })
 ], UDExSideNavigationItem);

package/dist/SideNavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationItem.js","sourceRoot":"","sources":["../src/SideNavigationItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideNavigationItem from \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";\nimport type SideNavigationItemBase from \"@ui5/webcomponents-fiori/dist/SideNavigationItemBase.js\";\nimport type SideNavigationSelectableItemBase from \"@ui5/webcomponents-fiori/dist/SideNavigationSelectableItemBase.js\";\nimport type UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\n\n// Styles\nimport SideNavigationItemCss from \"./generated/themes/SideNavigationItem.css.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base\";\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-side-navigation-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationItem\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-item\",\n  renderer: jsxRenderer,\n  styles: [SideNavigationItem.styles, SideNavigationItemCss],\n})\n\nclass UDExSideNavigationItem extends SideNavigationItem {\n  get _selected() {\n    if (this.sideNavCollapsed) {\n      return this.selected || this.items.some(item => item.selected);\n    }\n    return this.selected;\n  }\n\n  get focusableItems(): Array<SideNavigationItemBase> {\n    // Recurse one level into expanded level-2 sub-items so their level-3 children join\n    // the Side Navigation's keyboard focus set (UI5's base getter is flat). Only one level\n    // of recursion is needed because the component supports at most three nesting levels.\n    if (!this.sideNavCollapsed && this.expanded) {\n      return [this, ...this.items.reduce((result, item) => {\n        return result.concat((item as UDExSideNavigationSubItem).focusableItems || [item]);\n      }, new Array<SideNavigationItemBase>())];\n    }\n    return super.focusableItems;\n  }\n\n  get selectableItems(): Array<SideNavigationSelectableItemBase> {\n    // Recurse one level into level-2 sub-items so their level-3 children are part of the\n    // Side Navigation's selection registry (UI5's base getter is flat). Without this the\n    // selection sweep in SideNavigation._selectItem never reaches level 3, so selecting a\n    // level-3 item would not deselect items at other levels, and vice versa.\n    return this.items.reduce((result, item) => {\n      return result.concat((item as UDExSideNavigationSubItem).selectableItems || [item]);\n    }, new Array<SideNavigationSelectableItemBase>(this));\n  }\n\n  get allItems(): Array<SideNavigationItemBase> {\n    // Recurse one level into level-2 sub-items so level-3 children are enumerated by\n    // SideNavigation._getAllItems. That loop wires `sideNavigation` (and collapsed state)\n    // onto every item; without this, level-3 items never get `sideNavigation` set and\n    // their click handler cannot reach SideNavigation._handleItemClick to fire selection-change.\n    return this.items.reduce((result, item) => {\n      return result.concat((item as UDExSideNavigationSubItem).allItems || [item]);\n    }, new Array<SideNavigationItemBase>(this));\n  }\n\n  _initialExpandDone = false;\n\n  onBeforeRendering() {\n    super.onBeforeRendering();\n    // Open the group once on initial render if it contains a selected child, so the\n    // selection is visible. Do not re-apply on later renders — that would prevent the\n    // user from collapsing a group while one of its children stays selected.\n    if (!this._initialExpandDone) {\n      this._initialExpandDone = true;\n      if (!this.sideNavCollapsed && !this.expanded && this.items.some(item => item.selected)) {\n        this.expanded = true;\n      }\n    }\n  }\n\n  _onclick(e: MouseEvent) {\n    // A grouping item (one with sub-items) toggles expand/collapse on click and\n    // never navigates — a parent with children must not have an href. Only leaf\n    // items navigate, so they fall through to the base handler.\n    if (this.hasSubItems && !this.sideNavCollapsed) {\n      e.preventDefault();\n      e.stopPropagation();\n      this.expanded = !this.expanded;\n      return;\n    }\n    super._onclick(e);\n  }\n\n  _onToggleClick(e: CustomEvent) {\n    e.preventDefault();\n    super._onToggleClick(e);\n  }\n\n  onEnterDOM() {\n    this.setAttribute(\"id\", this._id);\n\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n\n    this.items.map(item => {\n      if (this.icon) {\n        item.setAttribute(\"with-icon\", \"true\");\n      }\n      return item;\n    });\n  }\n}\n\nUDExSideNavigationItem.define();\n\nexport default UDExSideNavigationItem;\n"]}
+{"version":3,"file":"SideNavigationItem.js","sourceRoot":"","sources":["../src/SideNavigationItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideNavigationItem from \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";\nimport type SideNavigationItemBase from \"@ui5/webcomponents-fiori/dist/SideNavigationItemBase.js\";\nimport type SideNavigationSelectableItemBase from \"@ui5/webcomponents-fiori/dist/SideNavigationSelectableItemBase.js\";\nimport type UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\nimport SideNavigationItemTemplate from \"./SideNavigationItemTemplate.js\";\n\n// Styles\nimport SideNavigationItemCss from \"./generated/themes/SideNavigationItem.css.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base\";\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-side-navigation-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationItem\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-item\",\n  renderer: jsxRenderer,\n  template: SideNavigationItemTemplate,\n  styles: [SideNavigationItem.styles, SideNavigationItemCss],\n})\n\nclass UDExSideNavigationItem extends SideNavigationItem {\n  get _selected() {\n    if (this.sideNavCollapsed) {\n      return this.selected || this.items.some(item => item.selected);\n    }\n    return this.selected;\n  }\n\n  get focusableItems(): Array<SideNavigationItemBase> {\n    // Recurse one level into expanded level-2 sub-items so their level-3 children join\n    // the Side Navigation's keyboard focus set (UI5's base getter is flat). Only one level\n    // of recursion is needed because the component supports at most three nesting levels.\n    if (!this.sideNavCollapsed && this.expanded) {\n      return [this, ...this.items.reduce((result, item) => {\n        return result.concat((item as UDExSideNavigationSubItem).focusableItems || [item]);\n      }, new Array<SideNavigationItemBase>())];\n    }\n    return super.focusableItems;\n  }\n\n  get selectableItems(): Array<SideNavigationSelectableItemBase> {\n    // Recurse one level into level-2 sub-items so their level-3 children are part of the\n    // Side Navigation's selection registry (UI5's base getter is flat). Without this the\n    // selection sweep in SideNavigation._selectItem never reaches level 3, so selecting a\n    // level-3 item would not deselect items at other levels, and vice versa.\n    return this.items.reduce((result, item) => {\n      return result.concat((item as UDExSideNavigationSubItem).selectableItems || [item]);\n    }, new Array<SideNavigationSelectableItemBase>(this));\n  }\n\n  get allItems(): Array<SideNavigationItemBase> {\n    // Recurse one level into level-2 sub-items so level-3 children are enumerated by\n    // SideNavigation._getAllItems. That loop wires `sideNavigation` (and collapsed state)\n    // onto every item; without this, level-3 items never get `sideNavigation` set and\n    // their click handler cannot reach SideNavigation._handleItemClick to fire selection-change.\n    return this.items.reduce((result, item) => {\n      return result.concat((item as UDExSideNavigationSubItem).allItems || [item]);\n    }, new Array<SideNavigationItemBase>(this));\n  }\n\n  _initialExpandDone = false;\n\n  onBeforeRendering() {\n    super.onBeforeRendering();\n    // Open the group once on initial render if it contains a selected child, so the\n    // selection is visible. Do not re-apply on later renders — that would prevent the\n    // user from collapsing a group while one of its children stays selected.\n    if (!this._initialExpandDone) {\n      this._initialExpandDone = true;\n      if (!this.sideNavCollapsed && !this.expanded && this.items.some(item => item.selected)) {\n        this.expanded = true;\n      }\n    }\n  }\n\n  _onclick(e: MouseEvent) {\n    // A grouping item (one with sub-items) toggles expand/collapse on click and\n    // never navigates — a parent with children must not have an href. Only leaf\n    // items navigate, so they fall through to the base handler.\n    if (this.hasSubItems && !this.sideNavCollapsed) {\n      e.preventDefault();\n      e.stopPropagation();\n      this.expanded = !this.expanded;\n      return;\n    }\n    super._onclick(e);\n  }\n\n  _onToggleClick(e: CustomEvent) {\n    e.preventDefault();\n    super._onToggleClick(e);\n  }\n\n  onEnterDOM() {\n    this.setAttribute(\"id\", this._id);\n\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n\n    this.items.map(item => {\n      if (this.icon) {\n        item.setAttribute(\"with-icon\", \"true\");\n      }\n      return item;\n    });\n  }\n}\n\nUDExSideNavigationItem.define();\n\nexport default UDExSideNavigationItem;\n"]}

package/dist/SideNavigationItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type UDExSideNavigationItem from "./SideNavigationItem.js";
+export default function SideNavigationItemTemplate(this: UDExSideNavigationItem): import("@ui5/webcomponents-base").JSX.Element;

package/dist/SideNavigationItemTemplate.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import navRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
+export default function SideNavigationItemTemplate() {
+    if (this.sideNavCollapsed) {
+        return ItemTemplate.call(this);
+    }
+    return (_jsx("li", { id: this._id, class: "ui5-sn-list-li", role: "none", children: ItemTemplate.call(this) }));
+}
+function ItemTemplate() {
+    const EffectiveTag = this._effectiveTag;
+    return (_jsxs(_Fragment, { children: [_jsxs(EffectiveTag, { id: this._id, "data-sap-focus-ref": true, class: `ui5-sn-item ui5-sn-item-level1 ${this._classes}`, role: this.ariaRole, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onFocusIn: this._onfocusin, tabIndex: this.effectiveTabIndex, "aria-current": this._ariaCurrent, "aria-selected": this._ariaSelected, title: this._tooltip, "aria-disabled": this.effectiveDisabled, href: this._href, target: this._target, "aria-haspopup": this._ariaHasPopup, onFocusOut: this._onfocusout, onMouseEnter: this._onmouseenter, onMouseLeave: this._onmouseleave, "aria-checked": this._ariaChecked, "aria-owns": this._groupId, "aria-label": this._ariaLabel, "aria-expanded": this._expanded, "aria-labelledby": this._textId, "aria-describedby": this._describedBy, children: [this.sideNavCollapsed ? (_jsx(Icon, { class: "ui5-sn-item-icon", name: this.icon })) : (this.icon && _jsx(Icon, { class: "ui5-sn-item-icon", name: this.icon })), _jsx("div", { class: "ui5-sn-item-text", id: this._textId, children: this.text }), this.hasTag && (_jsx("div", { id: this._tagId, class: "ui5-sn-item-tag-slot", children: _jsx("slot", { name: "tag" }) })), this.sideNavCollapsed ? (!!this.items.length && (_jsx("div", { class: "ui5-sn-item-toggle-icon-wrap", children: _jsx(Icon, { class: "ui5-sn-item-toggle-icon", name: navRightArrow }) }))) : (!!this.items.length && (_jsx("div", { class: "ui5-sn-item-toggle-icon-wrap", children: _jsx(Icon, { class: "ui5-sn-item-toggle-icon", name: navRightArrow, accessibleName: this._arrowTooltip, showTooltip: true, onClick: this._onToggleClick }) }))), this.isExternalLink && (_jsx(Icon, { class: "ui5-sn-item-external-link-icon", name: arrowRight }))] }), !this.sideNavCollapsed && !!this.items.length && (_jsx("ul", { id: this._groupId, class: "ui5-sn-item-ul", "aria-label": this.accessibleName || this.text, role: "group", children: _jsx("slot", {}) })), this._selectableItemDescriptionText && (_jsx("span", { id: this._selectableItemDescriptionId, class: "ui5-hidden-text", children: this._selectableItemDescriptionText }))] }));
+}
+//# sourceMappingURL=SideNavigationItemTemplate.js.map

package/dist/SideNavigationItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationItemTemplate.js","sourceRoot":"","sources":["../src/SideNavigationItemTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport navRightArrow from \"@ui5/webcomponents-icons/dist/navigation-right-arrow.js\";\nimport arrowRight from \"@ui5/webcomponents-icons/dist/arrow-right.js\";\nimport type UDExSideNavigationItem from \"./SideNavigationItem.js\";\n\nexport default function SideNavigationItemTemplate(this: UDExSideNavigationItem) {\n  if (this.sideNavCollapsed) {\n    return ItemTemplate.call(this);\n  }\n\n  return (\n    <li id={this._id} class=\"ui5-sn-list-li\" role=\"none\">\n      {ItemTemplate.call(this)}\n    </li>\n  );\n}\n\nfunction ItemTemplate(this: UDExSideNavigationItem) {\n  const EffectiveTag = this._effectiveTag;\n\n  return (\n    <>\n      <EffectiveTag\n        id={this._id}\n        data-sap-focus-ref\n        class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}\n        role={this.ariaRole}\n        onKeyDown={this._onkeydown}\n        onKeyUp={this._onkeyup}\n        onClick={this._onclick}\n        onFocusIn={this._onfocusin}\n        tabIndex={this.effectiveTabIndex}\n        aria-current={this._ariaCurrent}\n        aria-selected={this._ariaSelected}\n        title={this._tooltip}\n        aria-disabled={this.effectiveDisabled}\n        href={this._href}\n        target={this._target}\n        aria-haspopup={this._ariaHasPopup}\n        onFocusOut={this._onfocusout}\n        onMouseEnter={this._onmouseenter}\n        onMouseLeave={this._onmouseleave}\n        aria-checked={this._ariaChecked}\n        aria-owns={this._groupId}\n        aria-label={this._ariaLabel}\n        aria-expanded={this._expanded}\n        aria-labelledby={this._textId}\n        aria-describedby={this._describedBy}>\n        {this.sideNavCollapsed ? (\n          <Icon class=\"ui5-sn-item-icon\" name={this.icon} />\n        ) : (\n          this.icon && <Icon class=\"ui5-sn-item-icon\" name={this.icon} />\n        )}\n        <div class=\"ui5-sn-item-text\" id={this._textId}>{this.text}</div>\n        {this.hasTag && (\n          <div id={this._tagId} class=\"ui5-sn-item-tag-slot\">\n            <slot name=\"tag\" />\n          </div>\n        )}\n        {this.sideNavCollapsed ? (\n          !!this.items.length && (\n            <div class=\"ui5-sn-item-toggle-icon-wrap\">\n              <Icon class=\"ui5-sn-item-toggle-icon\" name={navRightArrow} />\n            </div>\n          )\n        ) : (\n          !!this.items.length && (\n            <div class=\"ui5-sn-item-toggle-icon-wrap\">\n              <Icon\n                class=\"ui5-sn-item-toggle-icon\"\n                name={navRightArrow}\n                accessibleName={this._arrowTooltip}\n                showTooltip={true}\n                onClick={this._onToggleClick}\n              />\n            </div>\n          )\n        )}\n        {this.isExternalLink && (\n          <Icon class=\"ui5-sn-item-external-link-icon\" name={arrowRight} />\n        )}\n      </EffectiveTag>\n      {!this.sideNavCollapsed && !!this.items.length && (\n        <ul\n          id={this._groupId}\n          class=\"ui5-sn-item-ul\"\n          aria-label={this.accessibleName || this.text}\n          role=\"group\">\n          <slot />\n        </ul>\n      )}\n      {this._selectableItemDescriptionText && (\n        <span id={this._selectableItemDescriptionId} class=\"ui5-hidden-text\">{this._selectableItemDescriptionText}</span>\n      )}\n    </>\n  );\n}\n"]}

package/dist/SideNavigationMobile.js

@@ -12,7 +12,6 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import SideNavigationMobileTemplate from "./SideNavigationMobileTemplate.js";
 // Styles
 import SideNavigationMobileCss from "./generated/themes/SideNavigationMobile.css.js";
-import SideNavigationMobileDropdownCss from "./generated/themes/SideNavigationMobileDropdown.css.js";
 /**
  * @class
  *
@@ -104,7 +103,7 @@ UDExSideNavigationMobile = __decorate([
         tag: "udex-side-navigation-mobile",
         renderer: jsxRenderer,
         template: SideNavigationMobileTemplate,
-        styles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],
+        styles: [SideNavigationMobileCss],
     })
 ], UDExSideNavigationMobile);
 UDExSideNavigationMobile.define();

package/dist/SideNavigationMobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationMobile.js","sourceRoot":"","sources":["../src/SideNavigationMobile.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } 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-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideNavigationMobileTemplate from \"./SideNavigationMobileTemplate.js\";\nimport type UDExDropdown from \"./Dropdown.js\";\nimport type UDExSideNavigationItem from \"./SideNavigationItem.js\";\nimport type UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\nimport type UDExSideNavigationGroup from \"./SideNavigationGroup.js\";\n\n// Styles\nimport SideNavigationMobileCss from \"./generated/themes/SideNavigationMobile.css.js\";\nimport SideNavigationMobileDropdownCss from \"./generated/themes/SideNavigationMobileDropdown.css.js\";\n\nexport type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;\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-side-navigation-mobile</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-mobile\",\n  renderer: jsxRenderer,\n  template: SideNavigationMobileTemplate,\n  styles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],\n})\n\nclass UDExSideNavigationMobile extends UI5Element {\n  /**\n   * Indicates if dropdown is opened\n   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Boolean })\n    _dropdownOpened!: boolean;\n\n  /**\n   * Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\n   * for the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\n   * inside the items.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n    navItems!: DefaultSlot<UDExSideNavigationItem | UDExSideNavigationGroup>;\n\n  /**\n   * Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\n   * for the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.\n   *\n   * **Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true })\n    fixedItems!: Slot<UDExSideNavigationItem | UDExSideNavigationGroup>;\n\n  /**\n   * Indicates selected item element\n   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Object })\n    _selectedItem!: SelectedItem;\n\n  _navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;\n  _dropdown!: UDExDropdown;\n\n  onBeforeRendering() {\n    const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>(\"navItems\");\n    const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>(\"fixedItems\");\n    const allItems = items.concat(fixedItems);\n    if (allItems.length > 0) {\n      this._navItems = allItems;\n    }\n    if (!this._selectedItem && this._navItems?.length) {\n      this._selectedItem = this.getSelectedItem() || null;\n    }\n  }\n\n  onAfterRendering() {\n    this._dropdown = this._getResponsePopover();\n  }\n\n  _setNavItems = (sideNavigation: HTMLElement | null) => {\n    if (!sideNavigation) {\n      return;\n    }\n    this._navItems?.forEach(item => {\n      if (item.parentElement !== sideNavigation) {\n        sideNavigation.appendChild(item);\n      }\n    });\n  };\n\n  _getResponsePopover(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(`[udex-dropdown]`)!;\n  }\n\n  _afterDropdownOpen() {\n    this._dropdownOpened = true;\n  }\n\n  _afterDropdownClose() {\n    this._dropdownOpened = false;\n  }\n\n  handleTriggerClick() {\n    this._dropdown.open = !this._dropdown.open;\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if ((event.key === \"Enter\" || event.key === \" \")) {\n      this.handleTriggerClick();\n    }\n  }\n\n  _handleSelectionChanged(event: {detail: { item: UDExSideNavigationItem | UDExSideNavigationSubItem }}) {\n    this._dropdown = this._getResponsePopover();\n    this._dropdown.open = false;\n    this._selectedItem = event.detail.item;\n  }\n\n  getSelectedItem(): UDExSideNavigationItem | UDExSideNavigationSubItem | undefined {\n    const items = this._navItems.reduce((result, item) => {\n      return (result).concat((item.allItems as UDExSideNavigationSubItem[]) || []);\n    }, new Array<UDExSideNavigationItem | UDExSideNavigationSubItem>());\n    return items.find(item => item?._selected);\n  }\n}\n\nUDExSideNavigationMobile.define();\n\nexport default UDExSideNavigationMobile;\n"]}
+{"version":3,"file":"SideNavigationMobile.js","sourceRoot":"","sources":["../src/SideNavigationMobile.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,4BAA4B,MAAM,mCAAmC,CAAC;AAM7E,SAAS;AACT,OAAO,uBAAuB,MAAM,gDAAgD,CAAC;AAIrF;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAAjD;;QA2DE,iBAAY,GAAG,CAAC,cAAkC,EAAE,EAAE;YACpD,IAAI,CAAC,cAAc,EAAE,CAAC;gBACpB,OAAO;YACT,CAAC;YACD,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE;gBAC7B,IAAI,IAAI,CAAC,aAAa,KAAK,cAAc,EAAE,CAAC;oBAC1C,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IAoCJ,CAAC;IA7DC,iBAAiB;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAmD,UAAU,CAAC,CAAC;QACjG,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAmD,YAAY,CAAC,CAAC;QACxG,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAC1C,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC5B,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;YAClD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC;QACtD,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC9C,CAAC;IAaD,mBAAmB;QACjB,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAe,iBAAiB,CAAE,CAAC;IAC1E,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAC9B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IAC/B,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7C,CAAC;IAED,aAAa,CAAC,KAAoB;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;YACjD,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,uBAAuB,CAAC,KAA6E;QACnG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC5C,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;IACzC,CAAC;IAED,eAAe;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;YACnD,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAE,IAAI,CAAC,QAAwC,IAAI,EAAE,CAAC,CAAC;QAC/E,CAAC,EAAE,IAAI,KAAK,EAAsD,CAAC,CAAC;QACpE,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC7C,CAAC;CACF,CAAA;AAhGG;IADD,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iEACnB;AAU1B;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0DACD;AAWzE;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;4DACW;AASpE;IADD,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DACf;AAtC3B,wBAAwB;IAP7B,aAAa,CAAC;QACb,GAAG,EAAE,6BAA6B;QAClC,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,4BAA4B;QACtC,MAAM,EAAE,CAAC,uBAAuB,CAAC;KAClC,CAAC;GAEI,wBAAwB,CAwG7B;AAED,wBAAwB,CAAC,MAAM,EAAE,CAAC;AAElC,eAAe,wBAAwB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } 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-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideNavigationMobileTemplate from \"./SideNavigationMobileTemplate.js\";\nimport type UDExDropdown from \"./Dropdown.js\";\nimport type UDExSideNavigationItem from \"./SideNavigationItem.js\";\nimport type UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\nimport type UDExSideNavigationGroup from \"./SideNavigationGroup.js\";\n\n// Styles\nimport SideNavigationMobileCss from \"./generated/themes/SideNavigationMobile.css.js\";\n\nexport type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;\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-side-navigation-mobile</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-mobile\",\n  renderer: jsxRenderer,\n  template: SideNavigationMobileTemplate,\n  styles: [SideNavigationMobileCss],\n})\n\nclass UDExSideNavigationMobile extends UI5Element {\n  /**\n   * Indicates if dropdown is opened\n   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Boolean })\n    _dropdownOpened!: boolean;\n\n  /**\n   * Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\n   * for the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\n   * inside the items.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n    navItems!: DefaultSlot<UDExSideNavigationItem | UDExSideNavigationGroup>;\n\n  /**\n   * Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\n   * for the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.\n   *\n   * **Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true })\n    fixedItems!: Slot<UDExSideNavigationItem | UDExSideNavigationGroup>;\n\n  /**\n   * Indicates selected item element\n   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Object })\n    _selectedItem!: SelectedItem;\n\n  _navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;\n  _dropdown!: UDExDropdown;\n\n  onBeforeRendering() {\n    const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>(\"navItems\");\n    const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>(\"fixedItems\");\n    const allItems = items.concat(fixedItems);\n    if (allItems.length > 0) {\n      this._navItems = allItems;\n    }\n    if (!this._selectedItem && this._navItems?.length) {\n      this._selectedItem = this.getSelectedItem() || null;\n    }\n  }\n\n  onAfterRendering() {\n    this._dropdown = this._getResponsePopover();\n  }\n\n  _setNavItems = (sideNavigation: HTMLElement | null) => {\n    if (!sideNavigation) {\n      return;\n    }\n    this._navItems?.forEach(item => {\n      if (item.parentElement !== sideNavigation) {\n        sideNavigation.appendChild(item);\n      }\n    });\n  };\n\n  _getResponsePopover(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(`[udex-dropdown]`)!;\n  }\n\n  _afterDropdownOpen() {\n    this._dropdownOpened = true;\n  }\n\n  _afterDropdownClose() {\n    this._dropdownOpened = false;\n  }\n\n  handleTriggerClick() {\n    this._dropdown.open = !this._dropdown.open;\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if ((event.key === \"Enter\" || event.key === \" \")) {\n      this.handleTriggerClick();\n    }\n  }\n\n  _handleSelectionChanged(event: {detail: { item: UDExSideNavigationItem | UDExSideNavigationSubItem }}) {\n    this._dropdown = this._getResponsePopover();\n    this._dropdown.open = false;\n    this._selectedItem = event.detail.item;\n  }\n\n  getSelectedItem(): UDExSideNavigationItem | UDExSideNavigationSubItem | undefined {\n    const items = this._navItems.reduce((result, item) => {\n      return (result).concat((item.allItems as UDExSideNavigationSubItem[]) || []);\n    }, new Array<UDExSideNavigationItem | UDExSideNavigationSubItem>());\n    return items.find(item => item?._selected);\n  }\n}\n\nUDExSideNavigationMobile.define();\n\nexport default UDExSideNavigationMobile;\n"]}

package/dist/SideNavigationSubItem.js

@@ -13,6 +13,7 @@ import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationS
 import SideNavigationSubItemTemplate from "./SideNavigationSubItemTemplate.js";
 // Styles
 import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.css.js";
+import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js";
 /**
  * @class
  *
@@ -134,7 +135,7 @@ UDExSideNavigationSubItem = __decorate([
         tag: "udex-side-navigation-sub-item",
         renderer: jsxRenderer,
         template: SideNavigationSubItemTemplate,
-        styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],
+        styles: [SideNavigationSubItem.styles, SideNavigationItemCss, SideNavigationSubItemCss],
         dependencies: [UDExSideNavigationSubItem],
     })
 ], UDExSideNavigationSubItem);

package/dist/SideNavigationSubItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationSubItem.js","sourceRoot":"","sources":["../src/SideNavigationSubItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport {\n  isLeft,\n  isRight,\n  isMinus,\n  isPlus,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport SideNavigationSubItem from \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";\nimport SideNavigationSubItemTemplate from \"./SideNavigationSubItemTemplate.js\";\n\n// Styles\nimport SideNavigationSubItemCss from \"./generated/themes/SideNavigationSubItem.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-side-navigation-sub-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationSubItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationSubItem\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-sub-item\",\n  renderer: jsxRenderer,\n  template: SideNavigationSubItemTemplate,\n  styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],\n  dependencies: [UDExSideNavigationSubItem],\n})\n\nclass UDExSideNavigationSubItem extends SideNavigationSubItem {\n  /**\n   * Defines whether the sub-item is expanded (shows level-3 children).\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    expanded = false;\n\n  /**\n   * Defines the level-3 sub-items slotted inside this sub-item.\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n    subItems!: DefaultSlot<UDExSideNavigationSubItem>;\n\n  get hasSubItems() {\n    return this.subItems.length > 0;\n  }\n\n  get focusableItems(): Array<UDExSideNavigationSubItem> {\n    if (this.hasSubItems && this.expanded) {\n      return [this, ...this.subItems];\n    }\n    return [this];\n  }\n\n  get selectableItems(): Array<UDExSideNavigationSubItem> {\n    // Expose this level-2 sub-item plus its level-3 children so the Side Navigation's\n    // selection registry (built by UDExSideNavigationItem.selectableItems) reaches level 3.\n    return this.hasSubItems ? [this, ...this.subItems] : [this];\n  }\n\n  get allItems(): Array<UDExSideNavigationSubItem> {\n    // Expose this sub-item plus its level-3 children so SideNavigation._getAllItems wires\n    // `sideNavigation` and collapsed state onto level-3 items. Without it, a level-3 leaf's\n    // click handler has no `sideNavigation` reference and cannot fire selection-change.\n    return this.hasSubItems ? [this, ...this.subItems] : [this];\n  }\n\n  onBeforeRendering() {\n    super.onBeforeRendering();\n    this.subItems.forEach(subItem => {\n      if (!subItem.hasAttribute(\"nested\")) { subItem.setAttribute(\"nested\", \"\"); }\n    });\n  }\n\n  get _subGroupId(): string | undefined {\n    return this.hasSubItems ? `${this._id}-group` : undefined;\n  }\n\n  get _subExpanded(): boolean | undefined {\n    return this.hasSubItems ? this.expanded : undefined;\n  }\n\n  _onToggleClick(e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.expanded = !this.expanded;\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (this.hasSubItems && !this.sideNavCollapsed) {\n      const isRTL = this.effectiveDir === \"rtl\";\n      if (isLeft(e)) {\n        e.preventDefault();\n        this.expanded = isRTL;\n        return;\n      }\n      if (isRight(e)) {\n        e.preventDefault();\n        this.expanded = !isRTL;\n        return;\n      }\n      if (isMinus(e)) {\n        e.preventDefault();\n        this.expanded = false;\n        return;\n      }\n      if (isPlus(e)) {\n        e.preventDefault();\n        this.expanded = true;\n        return;\n      }\n    }\n    // Level-3 leaves fall through to the base, which activates on Enter and fires\n    // selection-change — the same behaviour as level-1 and level-2 leaves.\n    super._onkeydown(e);\n  }\n\n  _onclick(e: MouseEvent) {\n    // A group sub-item (one with sub-items) toggles expand/collapse and never navigates —\n    // a parent with children must not have an href. A leaf (including a level-3 leaf) falls\n    // through to the base handler, which fires selection-change and navigates via its href,\n    // exactly like level-1 and level-2 leaves.\n    if (this.hasSubItems) {\n      e.preventDefault();\n      e.stopPropagation();\n      this.expanded = !this.expanded;\n    } else {\n      super._onclick(e);\n    }\n  }\n}\n\nUDExSideNavigationSubItem.define();\n\nexport default UDExSideNavigationSubItem;\n"]}
+{"version":3,"file":"SideNavigationSubItem.js","sourceRoot":"","sources":["../src/SideNavigationSubItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport {\n  isLeft,\n  isRight,\n  isMinus,\n  isPlus,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport SideNavigationSubItem from \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";\nimport SideNavigationSubItemTemplate from \"./SideNavigationSubItemTemplate.js\";\n\n// Styles\nimport SideNavigationSubItemCss from \"./generated/themes/SideNavigationSubItem.css.js\";\nimport SideNavigationItemCss from \"./generated/themes/SideNavigationItem.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-side-navigation-sub-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationSubItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationSubItem\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-sub-item\",\n  renderer: jsxRenderer,\n  template: SideNavigationSubItemTemplate,\n  styles: [SideNavigationSubItem.styles, SideNavigationItemCss, SideNavigationSubItemCss],\n  dependencies: [UDExSideNavigationSubItem],\n})\n\nclass UDExSideNavigationSubItem extends SideNavigationSubItem {\n  /**\n   * Defines whether the sub-item is expanded (shows level-3 children).\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    expanded = false;\n\n  /**\n   * Defines the level-3 sub-items slotted inside this sub-item.\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n    subItems!: DefaultSlot<UDExSideNavigationSubItem>;\n\n  get hasSubItems() {\n    return this.subItems.length > 0;\n  }\n\n  get focusableItems(): Array<UDExSideNavigationSubItem> {\n    if (this.hasSubItems && this.expanded) {\n      return [this, ...this.subItems];\n    }\n    return [this];\n  }\n\n  get selectableItems(): Array<UDExSideNavigationSubItem> {\n    // Expose this level-2 sub-item plus its level-3 children so the Side Navigation's\n    // selection registry (built by UDExSideNavigationItem.selectableItems) reaches level 3.\n    return this.hasSubItems ? [this, ...this.subItems] : [this];\n  }\n\n  get allItems(): Array<UDExSideNavigationSubItem> {\n    // Expose this sub-item plus its level-3 children so SideNavigation._getAllItems wires\n    // `sideNavigation` and collapsed state onto level-3 items. Without it, a level-3 leaf's\n    // click handler has no `sideNavigation` reference and cannot fire selection-change.\n    return this.hasSubItems ? [this, ...this.subItems] : [this];\n  }\n\n  onBeforeRendering() {\n    super.onBeforeRendering();\n    this.subItems.forEach(subItem => {\n      if (!subItem.hasAttribute(\"nested\")) { subItem.setAttribute(\"nested\", \"\"); }\n    });\n  }\n\n  get _subGroupId(): string | undefined {\n    return this.hasSubItems ? `${this._id}-group` : undefined;\n  }\n\n  get _subExpanded(): boolean | undefined {\n    return this.hasSubItems ? this.expanded : undefined;\n  }\n\n  _onToggleClick(e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.expanded = !this.expanded;\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (this.hasSubItems && !this.sideNavCollapsed) {\n      const isRTL = this.effectiveDir === \"rtl\";\n      if (isLeft(e)) {\n        e.preventDefault();\n        this.expanded = isRTL;\n        return;\n      }\n      if (isRight(e)) {\n        e.preventDefault();\n        this.expanded = !isRTL;\n        return;\n      }\n      if (isMinus(e)) {\n        e.preventDefault();\n        this.expanded = false;\n        return;\n      }\n      if (isPlus(e)) {\n        e.preventDefault();\n        this.expanded = true;\n        return;\n      }\n    }\n    // Level-3 leaves fall through to the base, which activates on Enter and fires\n    // selection-change — the same behaviour as level-1 and level-2 leaves.\n    super._onkeydown(e);\n  }\n\n  _onclick(e: MouseEvent) {\n    // A group sub-item (one with sub-items) toggles expand/collapse and never navigates —\n    // a parent with children must not have an href. A leaf (including a level-3 leaf) falls\n    // through to the base handler, which fires selection-change and navigates via its href,\n    // exactly like level-1 and level-2 leaves.\n    if (this.hasSubItems) {\n      e.preventDefault();\n      e.stopPropagation();\n      this.expanded = !this.expanded;\n    } else {\n      super._onclick(e);\n    }\n  }\n}\n\nUDExSideNavigationSubItem.define();\n\nexport default UDExSideNavigationSubItem;\n"]}

package/dist/SideNavigationSubItemTemplate.js

@@ -2,9 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime"
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
 import navRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
-import navDownArrow from "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 export default function SideNavigationSubItemTemplate() {
     const EffectiveTag = this._effectiveTag;
-    return (_jsxs("li", { id: this._id, class: "ui5-sn-list-li", role: "none", children: [_jsxs(EffectiveTag, { id: this._id, "data-sap-focus-ref": true, class: `ui5-sn-item ui5-sn-item-level2 ${this._classes}`, role: this.ariaRole, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onFocusIn: this._onfocusin, tabIndex: this.effectiveTabIndex, "aria-current": this._ariaCurrent, "aria-selected": this._ariaSelected, "aria-label": this.accessibleName || undefined, title: this._tooltip, "aria-disabled": this.effectiveDisabled, href: this._href, target: this._target, "aria-haspopup": this._ariaHasPopup, "aria-describedby": this._describedBy, "aria-expanded": this._subExpanded, "aria-owns": this._subGroupId, children: [this.icon && _jsx(Icon, { class: "ui5-sn-item-icon", name: this.icon }), _jsx("div", { class: "ui5-sn-item-text", id: this._textId, children: this.text }), this.hasTag && (_jsx("div", { id: this._tagId, class: "ui5-sn-item-tag-slot", children: _jsx("slot", { name: "tag" }) })), this.hasSubItems && (_jsx(Icon, { class: "ui5-sn-item-toggle-icon", name: this.expanded ? navDownArrow : navRightArrow, onClick: (e) => this._onToggleClick(e) })), this.isExternalLink && _jsx(Icon, { class: "ui5-sn-item-external-link-icon", name: arrowRight })] }), this.hasSubItems && (_jsx("ul", { id: this._subGroupId, class: "ui5-sn-item-ul", role: "group", children: _jsx("slot", {}) }))] }));
+    return (_jsxs("li", { id: this._id, class: "ui5-sn-list-li", role: "none", children: [_jsxs(EffectiveTag, { id: this._id, "data-sap-focus-ref": true, class: `ui5-sn-item ui5-sn-item-level2 ${this._classes}`, role: this.ariaRole, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onFocusIn: this._onfocusin, tabIndex: this.effectiveTabIndex, "aria-current": this._ariaCurrent, "aria-selected": this._ariaSelected, "aria-label": this.accessibleName || undefined, title: this._tooltip, "aria-disabled": this.effectiveDisabled, href: this._href, target: this._target, "aria-haspopup": this._ariaHasPopup, "aria-describedby": this._describedBy, "aria-expanded": this._subExpanded, "aria-owns": this._subGroupId, children: [this.icon && _jsx(Icon, { class: "ui5-sn-item-icon", name: this.icon }), _jsx("div", { class: "ui5-sn-item-text", id: this._textId, children: this.text }), this.hasTag && (_jsx("div", { id: this._tagId, class: "ui5-sn-item-tag-slot", children: _jsx("slot", { name: "tag" }) })), this.hasSubItems && (_jsx("div", { class: "ui5-sn-item-toggle-icon-wrap", children: _jsx(Icon, { class: "ui5-sn-item-toggle-icon", name: navRightArrow, onClick: (e) => this._onToggleClick(e) }) })), this.isExternalLink && _jsx(Icon, { class: "ui5-sn-item-external-link-icon", name: arrowRight })] }), this.hasSubItems && (_jsx("ul", { id: this._subGroupId, class: "ui5-sn-item-ul", role: "group", children: _jsx("slot", {}) }))] }));
 }
 //# sourceMappingURL=SideNavigationSubItemTemplate.js.map

package/dist/SideNavigationSubItemTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationSubItemTemplate.js","sourceRoot":"","sources":["../src/SideNavigationSubItemTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,aAAa,MAAM,yDAAyD,CAAC;AACpF,OAAO,YAAY,MAAM,wDAAwD,CAAC;AAGlF,MAAM,CAAC,OAAO,UAAU,6BAA6B;IACnD,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;IACxC,OAAO,CACL,cAAI,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,aAClD,MAAC,YAAY,IACX,EAAE,EAAE,IAAI,CAAC,GAAG,8BAEZ,KAAK,EAAE,kCAAkC,IAAI,CAAC,QAAQ,EAAE,EACxD,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,kBAClB,IAAI,CAAC,YAAY,mBAChB,IAAI,CAAC,aAAa,gBACrB,IAAI,CAAC,cAAc,IAAI,SAAS,EAC5C,KAAK,EAAE,IAAI,CAAC,QAAQ,mBACL,IAAI,CAAC,iBAAiB,EACrC,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,MAAM,EAAE,IAAI,CAAC,OAAO,mBACL,IAAI,CAAC,aAAa,sBACf,IAAI,CAAC,YAAY,mBACpB,IAAI,CAAC,YAAY,eACrB,IAAI,CAAC,WAAW,aAE1B,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAChE,cAAK,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,YAAG,IAAI,CAAC,IAAI,GAAO,EAChE,IAAI,CAAC,MAAM,IAAI,CACd,cAAK,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,sBAAsB,YAChD,eAAM,IAAI,EAAC,KAAK,GAAG,GACf,CACP,EACA,IAAI,CAAC,WAAW,IAAI,CACnB,KAAC,IAAI,IACH,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EAClD,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GAC7C,CACH,EACA,IAAI,CAAC,cAAc,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAE,UAAU,GAAI,IAC5E,EACd,IAAI,CAAC,WAAW,IAAI,CACnB,aAAI,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,YAC3D,gBAAQ,GACL,CACN,IACE,CACN,CAAC;AACJ,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport arrowRight from \"@ui5/webcomponents-icons/dist/arrow-right.js\";\nimport navRightArrow from \"@ui5/webcomponents-icons/dist/navigation-right-arrow.js\";\nimport navDownArrow from \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport type UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\n\nexport default function SideNavigationSubItemTemplate(this: UDExSideNavigationSubItem) {\n  const EffectiveTag = this._effectiveTag;\n  return (\n    <li id={this._id} class=\"ui5-sn-list-li\" role=\"none\">\n      <EffectiveTag\n        id={this._id}\n        data-sap-focus-ref\n        class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}\n        role={this.ariaRole}\n        onKeyDown={this._onkeydown}\n        onKeyUp={this._onkeyup}\n        onClick={this._onclick}\n        onFocusIn={this._onfocusin}\n        tabIndex={this.effectiveTabIndex}\n        aria-current={this._ariaCurrent}\n        aria-selected={this._ariaSelected}\n        aria-label={this.accessibleName || undefined}\n        title={this._tooltip}\n        aria-disabled={this.effectiveDisabled}\n        href={this._href}\n        target={this._target}\n        aria-haspopup={this._ariaHasPopup}\n        aria-describedby={this._describedBy}\n        aria-expanded={this._subExpanded}\n        aria-owns={this._subGroupId}\n      >\n        {this.icon && <Icon class=\"ui5-sn-item-icon\" name={this.icon} />}\n        <div class=\"ui5-sn-item-text\" id={this._textId}>{this.text}</div>\n        {this.hasTag && (\n          <div id={this._tagId} class=\"ui5-sn-item-tag-slot\">\n            <slot name=\"tag\" />\n          </div>\n        )}\n        {this.hasSubItems && (\n          <Icon\n            class=\"ui5-sn-item-toggle-icon\"\n            name={this.expanded ? navDownArrow : navRightArrow}\n            onClick={(e: Event) => this._onToggleClick(e)}\n          />\n        )}\n        {this.isExternalLink && <Icon class=\"ui5-sn-item-external-link-icon\" name={arrowRight} />}\n      </EffectiveTag>\n      {this.hasSubItems && (\n        <ul id={this._subGroupId} class=\"ui5-sn-item-ul\" role=\"group\">\n          <slot />\n        </ul>\n      )}\n    </li>\n  );\n}\n"]}
+{"version":3,"file":"SideNavigationSubItemTemplate.js","sourceRoot":"","sources":["../src/SideNavigationSubItemTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,aAAa,MAAM,yDAAyD,CAAC;AAGpF,MAAM,CAAC,OAAO,UAAU,6BAA6B;IACnD,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;IACxC,OAAO,CACL,cAAI,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,aAClD,MAAC,YAAY,IACX,EAAE,EAAE,IAAI,CAAC,GAAG,8BAEZ,KAAK,EAAE,kCAAkC,IAAI,CAAC,QAAQ,EAAE,EACxD,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,kBAClB,IAAI,CAAC,YAAY,mBAChB,IAAI,CAAC,aAAa,gBACrB,IAAI,CAAC,cAAc,IAAI,SAAS,EAC5C,KAAK,EAAE,IAAI,CAAC,QAAQ,mBACL,IAAI,CAAC,iBAAiB,EACrC,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,MAAM,EAAE,IAAI,CAAC,OAAO,mBACL,IAAI,CAAC,aAAa,sBACf,IAAI,CAAC,YAAY,mBACpB,IAAI,CAAC,YAAY,eACrB,IAAI,CAAC,WAAW,aAE1B,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAChE,cAAK,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,YAAG,IAAI,CAAC,IAAI,GAAO,EAChE,IAAI,CAAC,MAAM,IAAI,CACd,cAAK,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,sBAAsB,YAChD,eAAM,IAAI,EAAC,KAAK,GAAG,GACf,CACP,EACA,IAAI,CAAC,WAAW,IAAI,CACnB,cAAK,KAAK,EAAC,8BAA8B,YACvC,KAAC,IAAI,IACH,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GAC7C,GACE,CACP,EACA,IAAI,CAAC,cAAc,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAE,UAAU,GAAI,IAC5E,EACd,IAAI,CAAC,WAAW,IAAI,CACnB,aAAI,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,YAC3D,gBAAQ,GACL,CACN,IACE,CACN,CAAC;AACJ,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport arrowRight from \"@ui5/webcomponents-icons/dist/arrow-right.js\";\nimport navRightArrow from \"@ui5/webcomponents-icons/dist/navigation-right-arrow.js\";\nimport type UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\n\nexport default function SideNavigationSubItemTemplate(this: UDExSideNavigationSubItem) {\n  const EffectiveTag = this._effectiveTag;\n  return (\n    <li id={this._id} class=\"ui5-sn-list-li\" role=\"none\">\n      <EffectiveTag\n        id={this._id}\n        data-sap-focus-ref\n        class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}\n        role={this.ariaRole}\n        onKeyDown={this._onkeydown}\n        onKeyUp={this._onkeyup}\n        onClick={this._onclick}\n        onFocusIn={this._onfocusin}\n        tabIndex={this.effectiveTabIndex}\n        aria-current={this._ariaCurrent}\n        aria-selected={this._ariaSelected}\n        aria-label={this.accessibleName || undefined}\n        title={this._tooltip}\n        aria-disabled={this.effectiveDisabled}\n        href={this._href}\n        target={this._target}\n        aria-haspopup={this._ariaHasPopup}\n        aria-describedby={this._describedBy}\n        aria-expanded={this._subExpanded}\n        aria-owns={this._subGroupId}\n      >\n        {this.icon && <Icon class=\"ui5-sn-item-icon\" name={this.icon} />}\n        <div class=\"ui5-sn-item-text\" id={this._textId}>{this.text}</div>\n        {this.hasTag && (\n          <div id={this._tagId} class=\"ui5-sn-item-tag-slot\">\n            <slot name=\"tag\" />\n          </div>\n        )}\n        {this.hasSubItems && (\n          <div class=\"ui5-sn-item-toggle-icon-wrap\">\n            <Icon\n              class=\"ui5-sn-item-toggle-icon\"\n              name={navRightArrow}\n              onClick={(e: Event) => this._onToggleClick(e)}\n            />\n          </div>\n        )}\n        {this.isExternalLink && <Icon class=\"ui5-sn-item-external-link-icon\" name={arrowRight} />}\n      </EffectiveTag>\n      {this.hasSubItems && (\n        <ul id={this._subGroupId} class=\"ui5-sn-item-ul\" role=\"group\">\n          <slot />\n        </ul>\n      )}\n    </li>\n  );\n}\n"]}

package/dist/TagGroup.d.ts

@@ -113,10 +113,13 @@ declare class UDExTagGroup extends UI5Element {
     _nMoreBtn: HTMLElement | null;
     _resizeHandler: () => void;
     _keydownCaptureHandler: (e: KeyboardEvent) => void;
+    _observedTokenizer?: Tokenizer;
     constructor();
     onEnterDOM(): void;
     onExitDOM(): void;
     onAfterRendering(): void;
+    /** @private UI5 exposes an empty listbox when all tokens have overflowed. */
+    _syncTokenizerAriaAfterRendering: () => void;
     _nMoreKeyDownHandler: (e: KeyboardEvent) => void;
     _onKeydownCapture(e: KeyboardEvent): void;
     handleTagFocusin(e: FocusEvent): void;

package/dist/TagGroup.js

@@ -63,6 +63,29 @@ let UDExTagGroup = class UDExTagGroup extends UI5Element {
          * @private
          */
         this._scrollToEnd = false;
+        /** @private UI5 exposes an empty listbox when all tokens have overflowed. */
+        this._syncTokenizerAriaAfterRendering = () => {
+            const tokenizer = this._observedTokenizer;
+            renderFinished().then(() => {
+                if (!this.isConnected || !tokenizer || this._observedTokenizer !== tokenizer) {
+                    return;
+                }
+                const list = tokenizer.shadowRoot?.querySelector(".ui5-tokenizer--list");
+                if (!list) {
+                    return;
+                }
+                const hasVisibleTokens = tokenizer._tokens.some(token => !token.overflows);
+                // Do not hide the tokenizer: its sibling "n more" button must stay
+                // accessible. Only the list with no exposed options is presentational.
+                list.setAttribute("role", hasVisibleTokens ? "listbox" : "presentation");
+                if (hasVisibleTokens) {
+                    list.setAttribute("aria-label", tokenizer.tokenizerLabel);
+                }
+                else {
+                    ["aria-label", "aria-description", "aria-disabled", "aria-readonly"].forEach(attribute => list.removeAttribute(attribute));
+                }
+            });
+        };
         this._nMoreKeyDownHandler = (e) => {
             if (isSpace(e) || isEnter(e)) {
                 this.showMoreItems();
@@ -79,9 +102,17 @@ let UDExTagGroup = class UDExTagGroup extends UI5Element {
         ResizeHandler.deregister(this, this._resizeHandler);
         this.removeEventListener("keydown", this._keydownCaptureHandler, true);
         this._nMoreBtn?.removeEventListener("keydown", this._nMoreKeyDownHandler);
+        this._observedTokenizer?.detachComponentStateFinalized(this._syncTokenizerAriaAfterRendering);
+        this._observedTokenizer = undefined;
     }
     onAfterRendering() {
         this._tokenizer = this.tokenizer;
+        if (this._observedTokenizer !== this._tokenizer) {
+            this._observedTokenizer?.detachComponentStateFinalized(this._syncTokenizerAriaAfterRendering);
+            this._observedTokenizer = this._tokenizer;
+            this._observedTokenizer.attachComponentStateFinalized(this._syncTokenizerAriaAfterRendering);
+        }
+        this._syncTokenizerAriaAfterRendering();
         const prevMoreBtn = this._nMoreBtn;
         this._nMoreBtn = this._tokenizer.moreLink || null;
         if (prevMoreBtn && prevMoreBtn !== this._nMoreBtn) {

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 type { DefaultSlot } 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 { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport {\n  isEnter, isSpace, isEscape, isTabNext, isTabPrevious,\n} 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-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport Token from \"@ui5/webcomponents/dist/Token.js\";\nimport UDExTag from \"./Tag.js\";\nimport UDExTooltip from \"./Tooltip.js\";\nimport { Placement } from \"./types/Dropdown.js\";\n\nimport TagGroupTemplate from \"./TagGroupTemplate.js\";\n\n// Styles\nimport TagGroupCss from \"./generated/themes/TagGroup.css.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: jsxRenderer,\n  styles: TagGroupCss,\n  template: TagGroupTemplate,\n  dependencies: [UDExTag, UDExTooltip, Tokenizer, Token],\n})\n/**\n * Emitted when tag was clicked\n *\n * @public\n * @param {UDExTag} tag the clicked tag\n */\n@event(\"tag-click\", { bubbles: true })\n/**\n * Emitted when icon in tag was clicked\n *\n * @public\n * @param {HTMLElement} tag the tag containing the clicked icon\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 * @param {KeyboardEvent} originalEvent the original keyboard event\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  /**\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   * @default \"[]\"\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    items!: DefaultSlot<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   * Defines the accessible name for the \"Show More\" tooltip, announced by screen readers\n   * when the tooltip containing hidden tags is opened.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    tooltipAccessibleName?: string;\n\n  /**\n   * Determines whether there are hidden tags in the component.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isHiddenTags!: boolean;\n\n  /**\n   * Determines whether the \"More\" button should skip focus.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _skipMoreButtonFocus!: boolean;\n\n  /**\n   * Determines whether the tokenizer should scroll to the end.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _scrollToEnd: boolean = false;\n\n  _tokenizer!: Tokenizer;\n  _nMoreBtn!: HTMLElement | null;\n  _resizeHandler: () => void;\n  _keydownCaptureHandler: (e: KeyboardEvent) => void;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n    this._keydownCaptureHandler = this._onKeydownCapture.bind(this);\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._resizeHandler);\n    this.addEventListener(\"keydown\", this._keydownCaptureHandler, true);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._resizeHandler);\n    this.removeEventListener(\"keydown\", this._keydownCaptureHandler, true);\n    this._nMoreBtn?.removeEventListener(\"keydown\", this._nMoreKeyDownHandler);\n  }\n\n  onAfterRendering(): void {\n    this._tokenizer = this.tokenizer;\n    const prevMoreBtn = this._nMoreBtn;\n    this._nMoreBtn = this._tokenizer.moreLink || null;\n\n    if (prevMoreBtn && prevMoreBtn !== this._nMoreBtn) {\n      prevMoreBtn.removeEventListener(\"keydown\", this._nMoreKeyDownHandler);\n    }\n\n    if (!this.disabled && this._nMoreBtn && this._nMoreBtn !== prevMoreBtn) {\n      this._nMoreBtn.setAttribute(\"tabindex\", \"0\");\n      this._nMoreBtn.addEventListener(\"keydown\", this._nMoreKeyDownHandler);\n    }\n\n    if (!this.displayonly && this._skipMoreButtonFocus && this._nMoreBtn) {\n      this._nMoreBtn.setAttribute(\"tabindex\", \"-1\");\n    }\n\n    if (this._scrollToEnd) {\n      setTimeout(() => {\n        this._tokenizer.scrollToEnd();\n      }, 50);\n    }\n  }\n\n  _nMoreKeyDownHandler = (e: KeyboardEvent) => {\n    if (isSpace(e) || isEnter(e)) {\n      this.showMoreItems();\n    }\n  };\n\n  _onKeydownCapture(e: KeyboardEvent): void {\n    if (!this._isHiddenTags) {\n      return;\n    }\n\n    if (isTabNext(e) && e.composedPath().includes(this._lastVisibleTag as EventTarget)) {\n      e.preventDefault();\n      this._nMoreBtn?.focus();\n      return;\n    }\n\n    if (isTabPrevious(e) && !this.isReadOrDisplayOnly) {\n      const active = getActiveElement();\n      const moreLink = this._tokenizer.moreLink;\n      if (active === moreLink) {\n        const focusDomRef = this._lastVisibleTag?.getFocusDomRef();\n        if (focusDomRef) {\n          e.preventDefault();\n          focusDomRef.focus();\n        }\n      }\n    }\n  }\n\n  handleTagFocusin(e: FocusEvent): void {\n    // Only block the Tokenizer's _onfocusin (which sets expanded=true and destroys\n    // the \"n more\" span) when there are actually hidden tags. When all tags are\n    // visible, let focusin propagate normally so consumers like SelectBox can use\n    // the expanded state for arrow-key navigation between tags.\n    if (this._isHiddenTags) {\n      e.stopPropagation();\n    }\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\n    if (isEscape(e) && this.tooltip) {\n      this.tooltip.open = false;\n      this._nMoreBtn?.focus();\n      return;\n    }\n\n    this.fireDecoratorEvent(\"tag-keydown\", { originalEvent: e });\n  }\n\n  async showMoreItems(): Promise<void> {\n    if (this.fireDecoratorEvent(\"show-more-tags\")) {\n      const moreBtn = this._tokenizer.moreLink;\n      if (moreBtn) {\n        this._tokenizer.expanded = false;\n        // The tooltip is only rendered while `_isHiddenTags` is true (see the\n        // template). Depending on resize timing (changed in @ui5/webcomponents\n        // 2.27) the flag can still be false when the \"n more\" button is clicked,\n        // so the presence of `moreBtn` is the authoritative signal that there\n        // are hidden tags. Set the flag and wait for the tooltip to render\n        // before opening it, otherwise `this.tooltip` is null.\n        this._isHiddenTags = true;\n        await renderFinished();\n        if (this.tooltip) {\n          this.tooltip.opener = moreBtn;\n          this.tooltip.open = true;\n        }\n      }\n    }\n  }\n\n  get hiddenTags(): Token[] {\n    return this._tokenizer?.overflownTokens || [];\n  }\n\n  get _lastVisibleTag(): UDExTag | null {\n    const tokens = this._tokenizer?._tokens;\n    if (!tokens?.length) {\n      return null;\n    }\n    const visibleCount = tokens.length - (this._tokenizer._nMoreCount ?? 0);\n    return (tokens[visibleCount - 1] as unknown as UDExTag) ?? null;\n  }\n\n  get isReadOrDisplayOnly(): boolean {\n    return this.readonly || this.displayonly;\n  }\n\n  get tokenizer(): Tokenizer {\n    return this.shadowRoot!.querySelector<Tokenizer>(`#${this._id}-tag-group-tokenizer`)!;\n  }\n\n  get tooltip(): UDExTooltip | null {\n    return this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`);\n  }\n}\n\nUDExTagGroup.define();\n\nexport default UDExTagGroup;\nexport type { UDExTagClickEventDetail, UDExTagKeydownEventDetail, UDExTagIconClickEventDetail };\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 type { DefaultSlot } 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 { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport {\n  isEnter, isSpace, isEscape, isTabNext, isTabPrevious,\n} 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-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport Token from \"@ui5/webcomponents/dist/Token.js\";\nimport UDExTag from \"./Tag.js\";\nimport UDExTooltip from \"./Tooltip.js\";\nimport { Placement } from \"./types/Dropdown.js\";\n\nimport TagGroupTemplate from \"./TagGroupTemplate.js\";\n\n// Styles\nimport TagGroupCss from \"./generated/themes/TagGroup.css.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: jsxRenderer,\n  styles: TagGroupCss,\n  template: TagGroupTemplate,\n  dependencies: [UDExTag, UDExTooltip, Tokenizer, Token],\n})\n/**\n * Emitted when tag was clicked\n *\n * @public\n * @param {UDExTag} tag the clicked tag\n */\n@event(\"tag-click\", { bubbles: true })\n/**\n * Emitted when icon in tag was clicked\n *\n * @public\n * @param {HTMLElement} tag the tag containing the clicked icon\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 * @param {KeyboardEvent} originalEvent the original keyboard event\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  /**\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   * @default \"[]\"\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    items!: DefaultSlot<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   * Defines the accessible name for the \"Show More\" tooltip, announced by screen readers\n   * when the tooltip containing hidden tags is opened.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    tooltipAccessibleName?: string;\n\n  /**\n   * Determines whether there are hidden tags in the component.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isHiddenTags!: boolean;\n\n  /**\n   * Determines whether the \"More\" button should skip focus.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _skipMoreButtonFocus!: boolean;\n\n  /**\n   * Determines whether the tokenizer should scroll to the end.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _scrollToEnd: boolean = false;\n\n  _tokenizer!: Tokenizer;\n  _nMoreBtn!: HTMLElement | null;\n  _resizeHandler: () => void;\n  _keydownCaptureHandler: (e: KeyboardEvent) => void;\n  _observedTokenizer?: Tokenizer;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n    this._keydownCaptureHandler = this._onKeydownCapture.bind(this);\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._resizeHandler);\n    this.addEventListener(\"keydown\", this._keydownCaptureHandler, true);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._resizeHandler);\n    this.removeEventListener(\"keydown\", this._keydownCaptureHandler, true);\n    this._nMoreBtn?.removeEventListener(\"keydown\", this._nMoreKeyDownHandler);\n    this._observedTokenizer?.detachComponentStateFinalized(this._syncTokenizerAriaAfterRendering);\n    this._observedTokenizer = undefined;\n  }\n\n  onAfterRendering(): void {\n    this._tokenizer = this.tokenizer;\n    if (this._observedTokenizer !== this._tokenizer) {\n      this._observedTokenizer?.detachComponentStateFinalized(this._syncTokenizerAriaAfterRendering);\n      this._observedTokenizer = this._tokenizer;\n      this._observedTokenizer.attachComponentStateFinalized(this._syncTokenizerAriaAfterRendering);\n    }\n    this._syncTokenizerAriaAfterRendering();\n    const prevMoreBtn = this._nMoreBtn;\n    this._nMoreBtn = this._tokenizer.moreLink || null;\n\n    if (prevMoreBtn && prevMoreBtn !== this._nMoreBtn) {\n      prevMoreBtn.removeEventListener(\"keydown\", this._nMoreKeyDownHandler);\n    }\n\n    if (!this.disabled && this._nMoreBtn && this._nMoreBtn !== prevMoreBtn) {\n      this._nMoreBtn.setAttribute(\"tabindex\", \"0\");\n      this._nMoreBtn.addEventListener(\"keydown\", this._nMoreKeyDownHandler);\n    }\n\n    if (!this.displayonly && this._skipMoreButtonFocus && this._nMoreBtn) {\n      this._nMoreBtn.setAttribute(\"tabindex\", \"-1\");\n    }\n\n    if (this._scrollToEnd) {\n      setTimeout(() => {\n        this._tokenizer.scrollToEnd();\n      }, 50);\n    }\n  }\n\n  /** @private UI5 exposes an empty listbox when all tokens have overflowed. */\n  _syncTokenizerAriaAfterRendering = (): void => {\n    const tokenizer = this._observedTokenizer;\n    renderFinished().then(() => {\n      if (!this.isConnected || !tokenizer || this._observedTokenizer !== tokenizer) {\n        return;\n      }\n      const list = tokenizer.shadowRoot?.querySelector<HTMLElement>(\".ui5-tokenizer--list\");\n      if (!list) {\n        return;\n      }\n      const hasVisibleTokens = tokenizer._tokens.some(token => !token.overflows);\n      // Do not hide the tokenizer: its sibling \"n more\" button must stay\n      // accessible. Only the list with no exposed options is presentational.\n      list.setAttribute(\"role\", hasVisibleTokens ? \"listbox\" : \"presentation\");\n      if (hasVisibleTokens) {\n        list.setAttribute(\"aria-label\", tokenizer.tokenizerLabel);\n      } else {\n        [\"aria-label\", \"aria-description\", \"aria-disabled\", \"aria-readonly\"].forEach(attribute => list.removeAttribute(attribute));\n      }\n    });\n  };\n\n  _nMoreKeyDownHandler = (e: KeyboardEvent) => {\n    if (isSpace(e) || isEnter(e)) {\n      this.showMoreItems();\n    }\n  };\n\n  _onKeydownCapture(e: KeyboardEvent): void {\n    if (!this._isHiddenTags) {\n      return;\n    }\n\n    if (isTabNext(e) && e.composedPath().includes(this._lastVisibleTag as EventTarget)) {\n      e.preventDefault();\n      this._nMoreBtn?.focus();\n      return;\n    }\n\n    if (isTabPrevious(e) && !this.isReadOrDisplayOnly) {\n      const active = getActiveElement();\n      const moreLink = this._tokenizer.moreLink;\n      if (active === moreLink) {\n        const focusDomRef = this._lastVisibleTag?.getFocusDomRef();\n        if (focusDomRef) {\n          e.preventDefault();\n          focusDomRef.focus();\n        }\n      }\n    }\n  }\n\n  handleTagFocusin(e: FocusEvent): void {\n    // Only block the Tokenizer's _onfocusin (which sets expanded=true and destroys\n    // the \"n more\" span) when there are actually hidden tags. When all tags are\n    // visible, let focusin propagate normally so consumers like SelectBox can use\n    // the expanded state for arrow-key navigation between tags.\n    if (this._isHiddenTags) {\n      e.stopPropagation();\n    }\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\n    if (isEscape(e) && this.tooltip) {\n      this.tooltip.open = false;\n      this._nMoreBtn?.focus();\n      return;\n    }\n\n    this.fireDecoratorEvent(\"tag-keydown\", { originalEvent: e });\n  }\n\n  async showMoreItems(): Promise<void> {\n    if (this.fireDecoratorEvent(\"show-more-tags\")) {\n      const moreBtn = this._tokenizer.moreLink;\n      if (moreBtn) {\n        this._tokenizer.expanded = false;\n        // The tooltip is only rendered while `_isHiddenTags` is true (see the\n        // template). Depending on resize timing (changed in @ui5/webcomponents\n        // 2.27) the flag can still be false when the \"n more\" button is clicked,\n        // so the presence of `moreBtn` is the authoritative signal that there\n        // are hidden tags. Set the flag and wait for the tooltip to render\n        // before opening it, otherwise `this.tooltip` is null.\n        this._isHiddenTags = true;\n        await renderFinished();\n        if (this.tooltip) {\n          this.tooltip.opener = moreBtn;\n          this.tooltip.open = true;\n        }\n      }\n    }\n  }\n\n  get hiddenTags(): Token[] {\n    return this._tokenizer?.overflownTokens || [];\n  }\n\n  get _lastVisibleTag(): UDExTag | null {\n    const tokens = this._tokenizer?._tokens;\n    if (!tokens?.length) {\n      return null;\n    }\n    const visibleCount = tokens.length - (this._tokenizer._nMoreCount ?? 0);\n    return (tokens[visibleCount - 1] as unknown as UDExTag) ?? null;\n  }\n\n  get isReadOrDisplayOnly(): boolean {\n    return this.readonly || this.displayonly;\n  }\n\n  get tokenizer(): Tokenizer {\n    return this.shadowRoot!.querySelector<Tokenizer>(`#${this._id}-tag-group-tokenizer`)!;\n  }\n\n  get tooltip(): UDExTooltip | null {\n    return this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`);\n  }\n}\n\nUDExTagGroup.define();\n\nexport default UDExTagGroup;\nexport type { UDExTagClickEventDetail, UDExTagKeydownEventDetail, UDExTagIconClickEventDetail };\n"]}

package/dist/TagGroupTemplate.js

@@ -7,6 +7,6 @@ export default function TagTemplate() {
     return (_jsx(_Fragment, { children: _jsxs("div", { class: `${rootClass}`, id: `${this._id}-tag-group`, role: "group", children: [_jsx(UI5Tokenizer, { part: "tokenizer", "show-more": true, "prevent-popover-open": true, disabled: this.disabled, expanded: this.tokenizerExpanded, id: `${this._id}-tag-group-tokenizer`, class: `${rootClass}__tokenizer`, onShowMoreItemsPress: this.showMoreItems, children: this.items.map((item, index) => (tag.call(this, rootClass, item, index))) }), this._isHiddenTags && (_jsx(_Fragment, { children: _jsx(UDExTooltip, { id: `${this._id}-tag-group-tooltip`, placement: this.tooltipPlacement, "accessible-name": this.tooltipAccessibleName, onKeyDown: this.handleShowMoreButtonKeydown, children: _jsx("div", { role: "group", class: `${rootClass}-tooltip__content`, children: this.hiddenTags.map((item, index) => (tag.call(this, rootClass, item, index))) }) }) }))] }) }));
 }
 function tag(rootClass, item, index) {
-    return (_jsx(_Fragment, { children: _jsx(UDExTag, { accessibleRole: "option", class: `${rootClass}__tag`, "data-id": `${item.id}`, part: `token-${index}`, "read-only": this.isReadOrDisplayOnly, id: `${this._id}-tag-group-tag`, text: item.text, icon: item.icon, href: item.href, design: item.design, size: item.size, "icon-placement": item.iconPlacement, "accessible-name": item.accessibleName, "non-selectable": item.nonSelectable, "data-overflows": item.overflows, onFocusIn: this.handleTagFocusin, onKeyDown: this.handleTagKeyDown, onSelectionChange: this.handleTagClick, onIconClick: this.tagIconClickHandler, ...(this.disabled ? { tabindex: -1 } : {}) }, index) }));
+    return (_jsx(_Fragment, { children: _jsx(UDExTag, { accessibleRole: "option", class: `${rootClass}__tag`, "data-id": item.getAttribute("data-id") ?? item.id, part: `token-${index}`, "read-only": this.isReadOrDisplayOnly, id: `${this._id}-tag-group-tag`, text: item.text, icon: item.icon, href: item.href, design: item.design, size: item.size, "icon-placement": item.iconPlacement, "accessible-name": item.accessibleName, "non-selectable": item.nonSelectable, "data-overflows": item.overflows, onFocusIn: this.handleTagFocusin, onKeyDown: this.handleTagKeyDown, onSelectionChange: this.handleTagClick, onIconClick: this.tagIconClickHandler, ...(this.disabled ? { tabindex: -1 } : {}) }, index) }));
 }
 //# sourceMappingURL=TagGroupTemplate.js.map

package/dist/TagGroupTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagGroupTemplate.js","sourceRoot":"","sources":["../src/TagGroupTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,UAAU,CAAC;AAC/B,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,YAAY,MAAM,sCAAsC,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,WAAW;IACjC,MAAM,SAAS,GAAG,gBAAgB,CAAC;IAEnC,OAAO,CACL,4BACE,eAAK,KAAK,EAAE,GAAG,SAAS,EAAE,EACxB,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,YAAY,EAC3B,IAAI,EAAC,OAAO,aACZ,KAAC,YAAY,IACX,IAAI,EAAC,WAAW,mDAGhB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,sBAAsB,EACrC,KAAK,EAAE,GAAG,SAAS,aAAa,EAChC,oBAAoB,EAAE,IAAI,CAAC,aAAa,YACvC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,CACvC,CAAC,GACW,EACd,IAAI,CAAC,aAAa,IAAI,CACrB,4BACE,KAAC,WAAW,IACV,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,oBAAoB,EACnC,SAAS,EAAE,IAAI,CAAC,gBAAgB,qBACf,IAAI,CAAC,qBAAqB,EAC3C,SAAS,EAAE,IAAI,CAAC,2BAA2B,YAC3C,cACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,GAAG,SAAS,mBAAmB,YACrC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,CACvC,CAAC,GACE,GACM,GACb,CACJ,IACG,GACL,CACJ,CAAC;AACJ,CAAC;AAED,SAAS,GAAG,CAAqB,SAAiB,EAAE,IAAS,EAAE,KAAa;IAC1E,OAAO,CACL,4BACE,KAAC,OAAO,IAEN,cAAc,EAAC,QAAQ,EACvB,KAAK,EAAE,GAAG,SAAS,OAAO,aACjB,GAAG,IAAI,CAAC,EAAE,EAAE,EACrB,IAAI,EAAE,SAAS,KAAK,EAAE,eACX,IAAI,CAAC,mBAAmB,EACnC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,gBAAgB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,oBACC,IAAI,CAAC,aAAa,qBACjB,IAAI,CAAC,cAAc,oBACpB,IAAI,CAAC,aAAa,oBAClB,IAAI,CAAC,SAAS,EAC9B,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,iBAAiB,EAAE,IAAI,CAAC,cAAc,EACtC,WAAW,EAAE,IAAI,CAAC,mBAAmB,KACjC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IApBtC,KAAK,CAqBF,GACT,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type UDExTagGroup from \"./TagGroup.js\";\nimport UDExTag from \"./Tag.js\";\nimport UDExTooltip from \"./Tooltip.js\";\nimport UI5Tokenizer from \"@ui5/webcomponents/dist/Tokenizer.js\";\n\nexport default function TagTemplate(this: UDExTagGroup) {\n  const rootClass = \"udex-tag-group\";\n\n  return (\n    <>\n      <div class={`${rootClass}`}\n        id={`${this._id}-tag-group`}\n        role=\"group\">\n        <UI5Tokenizer\n          part=\"tokenizer\"\n          show-more\n          prevent-popover-open\n          disabled={this.disabled}\n          expanded={this.tokenizerExpanded}\n          id={`${this._id}-tag-group-tokenizer`}\n          class={`${rootClass}__tokenizer`}\n          onShowMoreItemsPress={this.showMoreItems}>\n          {this.items.map((item, index) => (\n            tag.call(this, rootClass, item, index)\n          ))}\n        </UI5Tokenizer>\n        {this._isHiddenTags && (\n          <>\n            <UDExTooltip\n              id={`${this._id}-tag-group-tooltip`}\n              placement={this.tooltipPlacement}\n              accessible-name={this.tooltipAccessibleName}\n              onKeyDown={this.handleShowMoreButtonKeydown}>\n              <div\n                role=\"group\"\n                class={`${rootClass}-tooltip__content`}>\n                {this.hiddenTags.map((item, index) => (\n                  tag.call(this, rootClass, item, index)\n                ))}\n              </div>\n            </UDExTooltip>\n          </>\n        )}\n      </div>\n    </>\n  );\n}\n\nfunction tag(this: UDExTagGroup, rootClass: string, item: any, index: number) {\n  return (\n    <>\n      <UDExTag\n        key={index}\n        accessibleRole=\"option\"\n        class={`${rootClass}__tag`}\n        data-id={`${item.id}`}\n        part={`token-${index}`}\n        read-only={this.isReadOrDisplayOnly}\n        id={`${this._id}-tag-group-tag`}\n        text={item.text}\n        icon={item.icon}\n        href={item.href}\n        design={item.design}\n        size={item.size}\n        icon-placement={item.iconPlacement}\n        accessible-name={item.accessibleName}\n        non-selectable={item.nonSelectable}\n        data-overflows={item.overflows}\n        onFocusIn={this.handleTagFocusin}\n        onKeyDown={this.handleTagKeyDown}\n        onSelectionChange={this.handleTagClick}\n        onIconClick={this.tagIconClickHandler}\n        {...(this.disabled ? { tabindex: -1 } : {})}>\n      </UDExTag>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"TagGroupTemplate.js","sourceRoot":"","sources":["../src/TagGroupTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,UAAU,CAAC;AAC/B,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,YAAY,MAAM,sCAAsC,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,WAAW;IACjC,MAAM,SAAS,GAAG,gBAAgB,CAAC;IAEnC,OAAO,CACL,4BACE,eAAK,KAAK,EAAE,GAAG,SAAS,EAAE,EACxB,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,YAAY,EAC3B,IAAI,EAAC,OAAO,aACZ,KAAC,YAAY,IACX,IAAI,EAAC,WAAW,mDAGhB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,sBAAsB,EACrC,KAAK,EAAE,GAAG,SAAS,aAAa,EAChC,oBAAoB,EAAE,IAAI,CAAC,aAAa,YACvC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,CACvC,CAAC,GACW,EACd,IAAI,CAAC,aAAa,IAAI,CACrB,4BACE,KAAC,WAAW,IACV,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,oBAAoB,EACnC,SAAS,EAAE,IAAI,CAAC,gBAAgB,qBACf,IAAI,CAAC,qBAAqB,EAC3C,SAAS,EAAE,IAAI,CAAC,2BAA2B,YAC3C,cACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,GAAG,SAAS,mBAAmB,YACrC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,CACvC,CAAC,GACE,GACM,GACb,CACJ,IACG,GACL,CACJ,CAAC;AACJ,CAAC;AAED,SAAS,GAAG,CAAqB,SAAiB,EAAE,IAAS,EAAE,KAAa;IAC1E,OAAO,CACL,4BACE,KAAC,OAAO,IAEN,cAAc,EAAC,QAAQ,EACvB,KAAK,EAAE,GAAG,SAAS,OAAO,aACjB,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,EAAE,EAChD,IAAI,EAAE,SAAS,KAAK,EAAE,eACX,IAAI,CAAC,mBAAmB,EACnC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,gBAAgB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,oBACC,IAAI,CAAC,aAAa,qBACjB,IAAI,CAAC,cAAc,oBACpB,IAAI,CAAC,aAAa,oBAClB,IAAI,CAAC,SAAS,EAC9B,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,iBAAiB,EAAE,IAAI,CAAC,cAAc,EACtC,WAAW,EAAE,IAAI,CAAC,mBAAmB,KACjC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IApBtC,KAAK,CAqBF,GACT,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type UDExTagGroup from \"./TagGroup.js\";\nimport UDExTag from \"./Tag.js\";\nimport UDExTooltip from \"./Tooltip.js\";\nimport UI5Tokenizer from \"@ui5/webcomponents/dist/Tokenizer.js\";\n\nexport default function TagTemplate(this: UDExTagGroup) {\n  const rootClass = \"udex-tag-group\";\n\n  return (\n    <>\n      <div class={`${rootClass}`}\n        id={`${this._id}-tag-group`}\n        role=\"group\">\n        <UI5Tokenizer\n          part=\"tokenizer\"\n          show-more\n          prevent-popover-open\n          disabled={this.disabled}\n          expanded={this.tokenizerExpanded}\n          id={`${this._id}-tag-group-tokenizer`}\n          class={`${rootClass}__tokenizer`}\n          onShowMoreItemsPress={this.showMoreItems}>\n          {this.items.map((item, index) => (\n            tag.call(this, rootClass, item, index)\n          ))}\n        </UI5Tokenizer>\n        {this._isHiddenTags && (\n          <>\n            <UDExTooltip\n              id={`${this._id}-tag-group-tooltip`}\n              placement={this.tooltipPlacement}\n              accessible-name={this.tooltipAccessibleName}\n              onKeyDown={this.handleShowMoreButtonKeydown}>\n              <div\n                role=\"group\"\n                class={`${rootClass}-tooltip__content`}>\n                {this.hiddenTags.map((item, index) => (\n                  tag.call(this, rootClass, item, index)\n                ))}\n              </div>\n            </UDExTooltip>\n          </>\n        )}\n      </div>\n    </>\n  );\n}\n\nfunction tag(this: UDExTagGroup, rootClass: string, item: any, index: number) {\n  return (\n    <>\n      <UDExTag\n        key={index}\n        accessibleRole=\"option\"\n        class={`${rootClass}__tag`}\n        data-id={item.getAttribute(\"data-id\") ?? item.id}\n        part={`token-${index}`}\n        read-only={this.isReadOrDisplayOnly}\n        id={`${this._id}-tag-group-tag`}\n        text={item.text}\n        icon={item.icon}\n        href={item.href}\n        design={item.design}\n        size={item.size}\n        icon-placement={item.iconPlacement}\n        accessible-name={item.accessibleName}\n        non-selectable={item.nonSelectable}\n        data-overflows={item.overflows}\n        onFocusIn={this.handleTagFocusin}\n        onKeyDown={this.handleTagKeyDown}\n        onSelectionChange={this.handleTagClick}\n        onIconClick={this.tagIconClickHandler}\n        {...(this.disabled ? { tabindex: -1 } : {})}>\n      </UDExTag>\n    </>\n  );\n}\n"]}