@sapudex/web-components 2.4.2 → 2.6.0

package/dist/AvatarTemplate.d.ts

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

package/dist/AvatarTemplate.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import UI5Avatar from "@ui5/webcomponents/dist/Avatar.js";
+export default function AvatarTemplate() {
+    return (_jsxs(UI5Avatar, { class: this.udexAvatarClass, accessibleName: this.avatarAccessibleName, colorScheme: this.getUDExAvatarColorScheme, onClick: this.handleClick, disabled: this.disabled, initials: this.initials, interactive: this.interactive, fallbackIcon: this.fallbackIcon, icon: this.icon, shape: this.shape, size: this.size, children: [this.imageSlot && _jsx("slot", {}), this.badgeSlot && _jsx("slot", { name: "badge", slot: "badge" })] }));
+}
+//# sourceMappingURL=AvatarTemplate.js.map

package/dist/AvatarTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarTemplate.js","sourceRoot":"","sources":["../src/AvatarTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,cAAc;IACpC,OAAO,CACL,MAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,cAAc,EAAE,IAAI,CAAC,oBAAoB,EACzC,WAAW,EAAE,IAAI,CAAC,wBAAwB,EAC1C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,aACd,IAAI,CAAC,SAAS,IAAI,gBAAa,EAC/B,IAAI,CAAC,SAAS,IAAI,eAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,IAChD,CACb,CAAC;AACJ,CAAC","sourcesContent":["import type Avatar from \"./Avatar.js\";\nimport UI5Avatar from \"@ui5/webcomponents/dist/Avatar.js\";\n\nexport default function AvatarTemplate(this: Avatar) {\n  return (\n    <UI5Avatar\n      class={this.udexAvatarClass}\n      accessibleName={this.avatarAccessibleName}\n      colorScheme={this.getUDExAvatarColorScheme}\n      onClick={this.handleClick}\n      disabled={this.disabled}\n      initials={this.initials}\n      interactive={this.interactive}\n      fallbackIcon={this.fallbackIcon}\n      icon={this.icon}\n      shape={this.shape}\n      size={this.size}>\n      {this.imageSlot && <slot></slot>}\n      {this.badgeSlot && <slot name=\"badge\" slot=\"badge\"></slot>}\n    </UI5Avatar>\n  );\n}\n"]}

package/dist/Badge.d.ts

@@ -6,7 +6,6 @@ import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTy
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- *
  * <h3>Usage</h3>
  *
  * For the <code>udex-badge</code>
@@ -36,7 +35,7 @@ declare class UDExBadge extends UI5Element {
     /**
      * Defines the design of text type component.
      *
-     * @default "Info"
+     * @default "Information"
      * @public
      */
     design: `${UDExTextBadgeDesign}`;

package/dist/Badge.js

@@ -8,19 +8,17 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
-// Styles
-import BadgeCss from "./generated/themes/Badge.css.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import BadgeTemplate from "./BadgeTemplate.js";
 import UDExIconPlacement from "./types/IconPlacement.js";
 import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign, } from "./types/BadgeDesign.js";
+// Styles
+import BadgeCss from "./generated/themes/Badge.css.js";
 /**
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- *
  * <h3>Usage</h3>
  *
  * For the <code>udex-badge</code>
@@ -52,7 +50,7 @@ let UDExBadge = class UDExBadge extends UI5Element {
         /**
          * Defines the design of text type component.
          *
-         * @default "Info"
+         * @default "Information"
          * @public
          */
         this.design = UDExTextBadgeDesign.Information;
@@ -114,10 +112,9 @@ __decorate([
 UDExBadge = __decorate([
     customElement({
         tag: "udex-badge",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: BadgeCss,
         template: BadgeTemplate,
-        dependencies: [Icon],
     })
 ], UDExBadge);
 UDExBadge.define();

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAEnD,OAAO,aAAa,MAAM,4CAA4C,CAAC;AAEvE,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AACvD,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EACL,qBAAqB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,GACrF,MAAM,wBAAwB,CAAC;AAEhC;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACE;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,IAAI,CAAC;QAE5D;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,MAAM,CAAC;QAE9D;;;;;WAKG;QAED,WAAM,GAA6B,mBAAmB,CAAC,WAAW,CAAC;QACrE;;;;;WAKG;QAED,iBAAY,GAA+B,qBAAqB,CAAC,IAAI,CAAC;QACxE;;;;;UAKE;QAEE,kBAAa,GAA2B,iBAAiB,CAAC,GAAG,CAAC;IAyCpE,CAAC;IAvBC,IAAI,SAAS;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,iBAAiB,CAAC,KAAK,CAAC;IACvE,CAAC;IAED,IAAI,OAAO;QACT,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,iBAAiB,CAAC,GAAG,CAAC;IACrE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,2CAA2C,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IACvH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,6CAA6C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC/H,CAAC;IAED,IAAI,YAAY;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,mBAAmB,CAAC,MAAM,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;QAED,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;CACF,CAAA;AA3EG;IADD,QAAQ,EAAE;uCACiD;AAS1D;IADD,QAAQ,EAAE;uCACmD;AAS5D;IADD,QAAQ,EAAE;yCAC0D;AAQnE;IADD,QAAQ,EAAE;+CAC6D;AAQpE;IADD,QAAQ,EAAE;gDACqD;AAQhE;IADD,QAAQ,EAAE;uCACK;AAQd;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACd;AA1DpB,SAAS;IAPd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;QACvB,YAAY,EAAE,CAAC,IAAI,CAAC;KACrB,CAAC;GACI,SAAS,CAmFd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\nimport BadgeTemplate from \"./generated/templates/BadgeTemplate.lit.js\";\n\n// Styles\nimport BadgeCss from \"./generated/themes/Badge.css.js\";\nimport UDExIconPlacement from \"./types/IconPlacement.js\";\n\nimport {\n  UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,\n} from \"./types/BadgeDesign.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-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Badge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-badge\",\n  renderer: litRender,\n  styles: BadgeCss,\n  template: BadgeTemplate,\n  dependencies: [Icon],\n})\nclass UDExBadge extends UI5Element {\n  /**\n   * Defines the type of the component.\n   *\n   * @default \"Text\"\n   * @public\n   */\n  @property()\n    type: `${UDExTypeBadgeDesign}` = UDExTypeBadgeDesign.Text;\n\n  /**\n   * Defines the size of the component.\n   *\n   * @default \"Medium\"\n   * @public\n   */\n  @property()\n    size: `${UDExSizeBadgeDesign}` = UDExSizeBadgeDesign.Medium;\n\n  /**\n   * Defines the design of text type component.\n   *\n   * @default \"Info\"\n   * @public\n   */\n  @property()\n    design: `${UDExTextBadgeDesign}` = UDExTextBadgeDesign.Information;\n  /**\n   * Defines the design of number type component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    numberDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;\n  /**\n   * Defines icon placement if icon was provided\n  *\n  * @default \"End\"\n  * @public\n  */\n    @property()\n      iconPlacement: `${UDExIconPlacement}` = UDExIconPlacement.End;\n  /**\n   * Defines icon name\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    icon!: string;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    default!: Array<Node>;\n\n  get startIcon(): boolean {\n    return !!this.icon && this.iconPlacement === UDExIconPlacement.Start;\n  }\n\n  get endIcon(): boolean {\n    return !!this.icon && this.iconPlacement === UDExIconPlacement.End;\n  }\n\n  get textClasses(): string {\n    return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get numberClasses(): string {\n    return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get badgeClasses(): string {\n    if (this.type !== UDExTypeBadgeDesign.Number) {\n      return this.textClasses;\n    }\n\n    return this.numberClasses;\n  }\n}\n\nUDExBadge.define();\n\nexport default UDExBadge;\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AACzD,OAAO,EACL,qBAAqB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,GACrF,MAAM,wBAAwB,CAAC;AAEhC,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD;;;;;;;;;;;;;;;GAeG;AAQH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACE;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,IAAI,CAAC;QAE5D;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,MAAM,CAAC;QAE9D;;;;;WAKG;QAED,WAAM,GAA6B,mBAAmB,CAAC,WAAW,CAAC;QACrE;;;;;WAKG;QAED,iBAAY,GAA+B,qBAAqB,CAAC,IAAI,CAAC;QACxE;;;;;UAKE;QAEE,kBAAa,GAA2B,iBAAiB,CAAC,GAAG,CAAC;IAyCpE,CAAC;IAvBC,IAAI,SAAS;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,iBAAiB,CAAC,KAAK,CAAC;IACvE,CAAC;IAED,IAAI,OAAO;QACT,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,iBAAiB,CAAC,GAAG,CAAC;IACrE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,2CAA2C,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IACvH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,6CAA6C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC/H,CAAC;IAED,IAAI,YAAY;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,mBAAmB,CAAC,MAAM,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;QAED,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;CACF,CAAA;AA3EG;IADD,QAAQ,EAAE;uCACiD;AAS1D;IADD,QAAQ,EAAE;uCACmD;AAS5D;IADD,QAAQ,EAAE;yCAC0D;AAQnE;IADD,QAAQ,EAAE;+CAC6D;AAQpE;IADD,QAAQ,EAAE;gDACqD;AAQhE;IADD,QAAQ,EAAE;uCACK;AAQd;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACd;AA1DpB,SAAS;IAPd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;KACxB,CAAC;GAEI,SAAS,CAmFd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport BadgeTemplate from \"./BadgeTemplate.js\";\nimport UDExIconPlacement from \"./types/IconPlacement.js\";\nimport {\n  UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,\n} from \"./types/BadgeDesign.js\";\n\n// Styles\nimport BadgeCss from \"./generated/themes/Badge.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Badge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-badge\",\n  renderer: jsxRenderer,\n  styles: BadgeCss,\n  template: BadgeTemplate,\n})\n\nclass UDExBadge extends UI5Element {\n  /**\n   * Defines the type of the component.\n   *\n   * @default \"Text\"\n   * @public\n   */\n  @property()\n    type: `${UDExTypeBadgeDesign}` = UDExTypeBadgeDesign.Text;\n\n  /**\n   * Defines the size of the component.\n   *\n   * @default \"Medium\"\n   * @public\n   */\n  @property()\n    size: `${UDExSizeBadgeDesign}` = UDExSizeBadgeDesign.Medium;\n\n  /**\n   * Defines the design of text type component.\n   *\n   * @default \"Information\"\n   * @public\n   */\n  @property()\n    design: `${UDExTextBadgeDesign}` = UDExTextBadgeDesign.Information;\n  /**\n   * Defines the design of number type component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    numberDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;\n  /**\n   * Defines icon placement if icon was provided\n  *\n  * @default \"End\"\n  * @public\n  */\n    @property()\n      iconPlacement: `${UDExIconPlacement}` = UDExIconPlacement.End;\n  /**\n   * Defines icon name\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    icon!: string;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    default!: Array<Node>;\n\n  get startIcon(): boolean {\n    return !!this.icon && this.iconPlacement === UDExIconPlacement.Start;\n  }\n\n  get endIcon(): boolean {\n    return !!this.icon && this.iconPlacement === UDExIconPlacement.End;\n  }\n\n  get textClasses(): string {\n    return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get numberClasses(): string {\n    return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get badgeClasses(): string {\n    if (this.type !== UDExTypeBadgeDesign.Number) {\n      return this.textClasses;\n    }\n\n    return this.numberClasses;\n  }\n}\n\nUDExBadge.define();\n\nexport default UDExBadge;\n"]}

package/dist/BadgeTemplate.d.ts

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

package/dist/BadgeTemplate.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+export default function BadgeTemplate() {
+    return (_jsxs("div", { className: this.badgeClasses, children: [this.startIcon &&
+                _jsx(UI5Icon, { class: "udex-badge__icon udex-badge__icon--start", name: this.icon }), _jsx("slot", {}), this.endIcon &&
+                _jsx(UI5Icon, { class: "udex-badge__icon udex-badge__icon--end", name: this.icon })] }));
+}
+//# sourceMappingURL=BadgeTemplate.js.map

package/dist/BadgeTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeTemplate.js","sourceRoot":"","sources":["../src/BadgeTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,aAAa;IACnC,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,YAAY,aAC9B,IAAI,CAAC,SAAS;gBACb,KAAC,OAAO,IACN,KAAK,EAAC,0CAA0C,EAChD,IAAI,EAAE,IAAI,CAAC,IAAI,GACP,EAEZ,gBAAa,EACZ,IAAI,CAAC,OAAO;gBACX,KAAC,OAAO,IACN,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAE,IAAI,CAAC,IAAI,GACP,IAER,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type Badge from \"./Badge.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\nexport default function BadgeTemplate(this: Badge) {\n  return (\n    <div className={this.badgeClasses}>\n      {this.startIcon &&\n        <UI5Icon\n          class=\"udex-badge__icon udex-badge__icon--start\"\n          name={this.icon}>\n        </UI5Icon>\n      }\n      <slot></slot>\n      {this.endIcon &&\n        <UI5Icon\n          class=\"udex-badge__icon udex-badge__icon--end\"\n          name={this.icon}>\n        </UI5Icon>\n      }\n    </div>\n  );\n}\n"]}

package/dist/Carousel.d.ts

@@ -1,15 +1,27 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
 export declare enum UDExCarouselNavigationPosition {
     top = "top",
     bottom = "bottom"
 }
+export declare enum UDExCarouselButtonDesign {
+    Secondary = "Secondary",
+    Tertiary = "Tertiary"
+}
 /**
  * @class
  *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-carousel</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Carousel.js";</code>
+ *
  * @constructor
  * @extends UI5Element
  * @tagname udex-carousel
@@ -60,7 +72,7 @@ declare class UDExCarousel extends UI5Element {
     get nextPageText(): string;
     get previousPageText(): string;
     get carouselClass(): string;
-    get buttonDesign(): "Secondary" | "Tertiary";
+    get buttonDesign(): UDExCarouselButtonDesign;
     get showNavigationButtons(): {
         top: boolean;
         bottom: boolean;

package/dist/Carousel.js

@@ -9,26 +9,37 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { isUp, isDown, isRight, isLeft, } from "@ui5/webcomponents-base/dist/Keys.js";
-import UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
-import { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT, } from "./generated/i18n/i18n-defaults.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from "./generated/i18n/i18n-defaults.js";
 import redirectAttributes from "./utils/redirectAttributes.js";
-import CarouselTemplate from "./generated/templates/CarouselTemplate.lit.js";
+import CarouselTemplate from "./CarouselTemplate.js";
 // Styles
 import CarouselCss from "./generated/themes/Carousel.css.js";
-import UDExButton from "./Button.js";
 export var UDExCarouselNavigationPosition;
 (function (UDExCarouselNavigationPosition) {
     UDExCarouselNavigationPosition["top"] = "top";
     UDExCarouselNavigationPosition["bottom"] = "bottom";
 })(UDExCarouselNavigationPosition || (UDExCarouselNavigationPosition = {}));
+export var UDExCarouselButtonDesign;
+(function (UDExCarouselButtonDesign) {
+    UDExCarouselButtonDesign["Secondary"] = "Secondary";
+    UDExCarouselButtonDesign["Tertiary"] = "Tertiary";
+})(UDExCarouselButtonDesign || (UDExCarouselButtonDesign = {}));
 /**
  * @class
  *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-carousel</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Carousel.js";</code>
+ *
  * @constructor
  * @extends UI5Element
  * @tagname udex-carousel
@@ -69,8 +80,8 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
     }
     get buttonDesign() {
         return this.navigationPlacement === UDExCarouselNavigationPosition.top
-            ? "Secondary"
-            : "Tertiary";
+            ? UDExCarouselButtonDesign.Secondary
+            : UDExCarouselButtonDesign.Tertiary;
     }
     get showNavigationButtons() {
         return {
@@ -138,10 +149,9 @@ __decorate([
 UDExCarousel = UDExCarousel_1 = __decorate([
     customElement({
         tag: "udex-carousel",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: CarouselCss,
         template: CarouselTemplate,
-        dependencies: [UI5Carousel, UDExButton],
     })
 ], UDExCarousel);
 UDExCarousel.define();

package/dist/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../src/Carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  isUp,\n  isDown,\n  isRight,\n  isLeft,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport {\n  CAROUSEL_NEXT_ARROW_TEXT,\n  CAROUSEL_PREVIOUS_ARROW_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport redirectAttributes from \"./utils/redirectAttributes.js\";\n\nimport CarouselTemplate from \"./generated/templates/CarouselTemplate.lit.js\";\n\n// Styles\nimport CarouselCss from \"./generated/themes/Carousel.css.js\";\nimport UDExButton from \"./Button.js\";\n\nexport enum UDExCarouselNavigationPosition {\n  top = \"top\",\n  bottom = \"bottom\",\n}\n\n/**\n * @class\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-carousel\n * @public\n */\n@customElement({\n  tag: \"udex-carousel\",\n  renderer: litRender,\n  styles: CarouselCss,\n  template: CarouselTemplate,\n  dependencies: [UI5Carousel, UDExButton],\n})\nclass UDExCarousel extends UI5Element {\n  /**\n   * Defines the position of the navigation.\n   * <br><br>\n   * Available options are:\n   * <ul>\n   * <li><code>top</code> - the navigation button are placed above the component.</li>\n   * <li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n   * </ul>\n   *\n   * @public\n   */\n  @property()\n    navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n    items!: Array<HTMLElement>;\n\n  /**\n   * Defines the prev button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isPrevButtonDisabled!: boolean;\n\n  /**\n   * Defines the next button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isNextButtonDisabled!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default ''\n   * @public\n   */\n  @property({ type: String })\n    accessibleName: string = \"\";\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  get nextPageText() {\n    return UDExCarousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);\n  }\n\n  get previousPageText() {\n    return UDExCarousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);\n  }\n\n  get carouselClass(): string {\n    const classes = \"udex-carousel\";\n\n    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;\n  }\n\n  get buttonDesign() {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top\n      ? \"Secondary\"\n      : \"Tertiary\";\n  }\n\n  get showNavigationButtons() {\n    return {\n      top: this.navigationPlacement === UDExCarouselNavigationPosition.top,\n      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,\n    };\n  }\n\n  get _hidePageIndicator() {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top;\n  }\n\n  get _carousel() {\n    return this.shadowRoot!.querySelector<UI5Carousel>(\"[ui5-carousel]\");\n  }\n\n  get _ui5CarouselRoot(): HTMLElement | null | undefined {\n    return this._carousel?.shadowRoot?.querySelector(\".ui5-carousel-root\");\n  }\n\n  _calculateDisabledButtonsState() {\n    this.isPrevButtonDisabled = !this._carousel?.hasPrev;\n    this.isNextButtonDisabled = !this._carousel?.hasNext;\n  }\n\n  _prevButtonClick() {\n    if (this.isPrevButtonDisabled) {\n      return;\n    }\n\n    this._carousel?.navigateLeft();\n    this._ui5CarouselRoot?.focus();\n    this._calculateDisabledButtonsState();\n  }\n\n  _nextButtonClick() {\n    if (this.isNextButtonDisabled) {\n      return;\n    }\n\n    this._carousel?.navigateRight();\n    this._ui5CarouselRoot?.focus();\n    this._calculateDisabledButtonsState();\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (isLeft(e) || isDown(e) || isRight(e) || isUp(e)) {\n      this._calculateDisabledButtonsState();\n    }\n  }\n\n  onAfterRendering() {\n    redirectAttributes(this, \"carousel\");\n\n    this._calculateDisabledButtonsState();\n  }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\n"]}
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../src/Carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  isUp, isDown, isRight, isLeft,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from \"./generated/i18n/i18n-defaults.js\";\nimport redirectAttributes from \"./utils/redirectAttributes.js\";\nimport type UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\n\nimport CarouselTemplate from \"./CarouselTemplate.js\";\n\n// Styles\nimport CarouselCss from \"./generated/themes/Carousel.css.js\";\n\nexport enum UDExCarouselNavigationPosition {\n  top = \"top\",\n  bottom = \"bottom\",\n}\n\nexport enum UDExCarouselButtonDesign {\n  Secondary = \"Secondary\",\n  Tertiary = \"Tertiary\",\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-carousel</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-carousel\n * @public\n */\n@customElement({\n  tag: \"udex-carousel\",\n  renderer: jsxRenderer,\n  styles: CarouselCss,\n  template: CarouselTemplate,\n})\n\nclass UDExCarousel extends UI5Element {\n  /**\n   * Defines the position of the navigation.\n   * <br><br>\n   * Available options are:\n   * <ul>\n   * <li><code>top</code> - the navigation button are placed above the component.</li>\n   * <li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n   * </ul>\n   *\n   * @public\n   */\n  @property()\n    navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n    items!: Array<HTMLElement>;\n\n  /**\n   * Defines the prev button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isPrevButtonDisabled!: boolean;\n\n  /**\n   * Defines the next button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isNextButtonDisabled!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default ''\n   * @public\n   */\n  @property({ type: String })\n    accessibleName: string = \"\";\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  get nextPageText(): string {\n    return UDExCarousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);\n  }\n\n  get previousPageText(): string {\n    return UDExCarousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);\n  }\n\n  get carouselClass(): string {\n    const classes = \"udex-carousel\";\n\n    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;\n  }\n\n  get buttonDesign(): UDExCarouselButtonDesign {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top\n      ? UDExCarouselButtonDesign.Secondary\n      : UDExCarouselButtonDesign.Tertiary;\n  }\n\n  get showNavigationButtons(): { top: boolean; bottom: boolean } {\n    return {\n      top: this.navigationPlacement === UDExCarouselNavigationPosition.top,\n      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,\n    };\n  }\n\n  get _hidePageIndicator(): boolean {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top;\n  }\n\n  get _carousel(): UI5Carousel | null {\n    return this.shadowRoot!.querySelector<UI5Carousel>(\"[ui5-carousel]\");\n  }\n\n  get _ui5CarouselRoot(): HTMLElement | null | undefined {\n    return this._carousel?.shadowRoot?.querySelector(\".ui5-carousel-root\");\n  }\n\n  _calculateDisabledButtonsState() {\n    this.isPrevButtonDisabled = !this._carousel?.hasPrev;\n    this.isNextButtonDisabled = !this._carousel?.hasNext;\n  }\n\n  _prevButtonClick() {\n    if (this.isPrevButtonDisabled) {\n      return;\n    }\n\n    this._carousel?.navigateLeft();\n    this._ui5CarouselRoot?.focus();\n    this._calculateDisabledButtonsState();\n  }\n\n  _nextButtonClick() {\n    if (this.isNextButtonDisabled) {\n      return;\n    }\n\n    this._carousel?.navigateRight();\n    this._ui5CarouselRoot?.focus();\n    this._calculateDisabledButtonsState();\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (isLeft(e) || isDown(e) || isRight(e) || isUp(e)) {\n      this._calculateDisabledButtonsState();\n    }\n  }\n\n  onAfterRendering() {\n    redirectAttributes(this, \"carousel\");\n\n    this._calculateDisabledButtonsState();\n  }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\n"]}

package/dist/CarouselTemplate.d.ts

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

package/dist/CarouselTemplate.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import CarouselArrowsPlacement from "@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js";
+import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+export default function CarouselTemplate() {
+    return (_jsxs("div", { className: this.carouselClass, onKeyDown: this._onkeydown, children: [this.showNavigationButtons.top && navigation.call(this), _jsx(UI5Carousel, { id: "carousel", hideNavigationArrows: true, arrowsPlacement: CarouselArrowsPlacement.Navigation, accessibleName: this.accessibleName, hidePageIndicator: this._hidePageIndicator, children: this.items.map(item => _jsx("slot", { name: item._individualSlot })) }), this.showNavigationButtons.bottom && navigation.call(this)] }));
+}
+function navigation() {
+    const btnClassName = "udex-carousel__navigation-button";
+    return (_jsxs("div", { class: "udex-carousel__navigation-wrapper", part: "navigation", children: [_jsx(UDExButton, { size: UDExButtonSize.Large, disabled: this.isPrevButtonDisabled, class: btnClassName, icon: slimArrowLeft, design: this.buttonDesign, tooltip: this.previousPageText, onClick: this._prevButtonClick, part: "prev-button" }), _jsx(UDExButton, { size: UDExButtonSize.Large, disabled: this.isNextButtonDisabled, class: btnClassName, icon: slimArrowRight, design: this.buttonDesign, tooltip: this.nextPageText, onClick: this._nextButtonClick, part: "next-button" })] }));
+}
+//# sourceMappingURL=CarouselTemplate.js.map

package/dist/CarouselTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselTemplate.js","sourceRoot":"","sources":["../src/CarouselTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AAEnD,OAAO,uBAAuB,MAAM,0DAA0D,CAAC;AAC/F,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,aAC3D,IAAI,CAAC,qBAAqB,CAAC,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACxD,KAAC,WAAW,IACV,EAAE,EAAC,UAAU,EACb,oBAAoB,QACpB,eAAe,EAAE,uBAAuB,CAAC,UAAU,EACnD,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,YACzC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrB,eAAM,IAAI,EAAG,IAAqB,CAAC,eAAe,GAAS,CAC5D,GACW,EACb,IAAI,CAAC,qBAAqB,CAAC,MAAM,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IACvD,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU;IACjB,MAAM,YAAY,GAAG,kCAAkC,CAAC;IAExD,OAAO,CACL,eAAK,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,YAAY,aAC9D,KAAC,UAAU,IACT,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,aAAa,GACP,EACb,KAAC,UAAU,IACT,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,aAAa,GACP,IACT,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type Carousel from \"./Carousel.js\";\nimport UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport type SlottedChild from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport CarouselArrowsPlacement from \"@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js\";\nimport slimArrowLeft from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function CarouselTemplate(this: Carousel) {\n  return (\n    <div className={this.carouselClass} onKeyDown={this._onkeydown}>\n      {this.showNavigationButtons.top && navigation.call(this)}\n      <UI5Carousel\n        id=\"carousel\"\n        hideNavigationArrows\n        arrowsPlacement={CarouselArrowsPlacement.Navigation}\n        accessibleName={this.accessibleName}\n        hidePageIndicator={this._hidePageIndicator}>\n        {this.items.map(item =>\n          <slot name={(item as SlottedChild)._individualSlot}></slot>\n        )}\n      </UI5Carousel>\n      {this.showNavigationButtons.bottom && navigation.call(this)}\n    </div>\n  );\n}\n\nfunction navigation(this: Carousel) {\n  const btnClassName = \"udex-carousel__navigation-button\";\n\n  return (\n    <div class=\"udex-carousel__navigation-wrapper\" part=\"navigation\">\n      <UDExButton\n        size={UDExButtonSize.Large}\n        disabled={this.isPrevButtonDisabled}\n        class={btnClassName}\n        icon={slimArrowLeft}\n        design={this.buttonDesign}\n        tooltip={this.previousPageText}\n        onClick={this._prevButtonClick}\n        part=\"prev-button\">\n      </UDExButton>\n      <UDExButton\n        size={UDExButtonSize.Large}\n        disabled={this.isNextButtonDisabled}\n        class={btnClassName}\n        icon={slimArrowRight}\n        design={this.buttonDesign}\n        tooltip={this.nextPageText}\n        onClick={this._nextButtonClick}\n        part=\"next-button\">\n      </UDExButton>\n    </div>\n  );\n}\n"]}

package/dist/ContactItemTemplate.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExLink from "./Link.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
 export default function ContactItemTemplate() {
-    return (_jsxs("div", { class: "udex-contact-item", children: [this.icon && _jsx(UI5Icon, { class: "udex-contact-item__icon", name: this._iconName, mode: "Decorative" }), _jsxs("div", { class: "udex-contact-item__content", children: [labelContent.call(this), _jsx("p", { class: "udex-contact-item__description", children: _jsx("slot", {}) })] })] }));
+    return (_jsxs("div", { class: "udex-contact-item", children: [this.icon && _jsx(UI5Icon, { class: "udex-contact-item__icon", name: this._iconName, mode: IconMode.Decorative }), _jsxs("div", { class: "udex-contact-item__content", children: [labelContent.call(this), _jsx("p", { class: "udex-contact-item__description", children: _jsx("slot", {}) })] })] }));
 }
 function labelContent() {
     if (this.href) {

package/dist/ContactItemTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactItemTemplate.js","sourceRoot":"","sources":["../src/ContactItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,mBAAmB;IACzC,OAAO,CACL,eAAK,KAAK,EAAC,mBAAmB,aAC3B,IAAI,CAAC,IAAI,IAAI,KAAC,OAAO,IAAC,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,YAAY,GAAW,EACzG,eAAK,KAAK,EAAC,4BAA4B,aACpC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EACxB,YAAG,KAAK,EAAC,gCAAgC,YAAC,gBAAa,GAAI,IACvD,IACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,YAAY;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,OAAO,KAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,IAAI,CAAC,KAAK,GAAY,CAAC;IACpJ,CAAC;IACD,OAAO,eAAM,KAAK,EAAC,yBAAyB,YAAE,IAAI,CAAC,KAAK,GAAQ,CAAC;AACnE,CAAC","sourcesContent":["import type ContactItem from \"./ContactItem.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExLink from \"./Link.js\";\n\nexport default function ContactItemTemplate(this: ContactItem) {\n  return (\n    <div class=\"udex-contact-item\">\n      {this.icon && <UI5Icon class=\"udex-contact-item__icon\" name={this._iconName} mode=\"Decorative\"></UI5Icon>}\n      <div class=\"udex-contact-item__content\">\n        {labelContent.call(this)}\n        <p class=\"udex-contact-item__description\"><slot></slot></p>\n      </div>\n    </div>\n  );\n}\n\nfunction labelContent(this: ContactItem) {\n  if (this.href) {\n    return <UDExLink onClick={this._fireItemClickEvent} target={this.target} class=\"udex-contact-item__link\" href={this.href}>{this.label}</UDExLink>;\n  }\n  return <span class=\"udex-contact-item__text\">{this.label}</span>;\n}\n"]}
+{"version":3,"file":"ContactItemTemplate.js","sourceRoot":"","sources":["../src/ContactItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AAEjE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IACzC,OAAO,CACL,eAAK,KAAK,EAAC,mBAAmB,aAC3B,IAAI,CAAC,IAAI,IAAI,KAAC,OAAO,IAAC,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,CAAC,UAAU,GAAY,EAClH,eAAK,KAAK,EAAC,4BAA4B,aACpC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EACxB,YAAG,KAAK,EAAC,gCAAgC,YAAC,gBAAa,GAAI,IACvD,IACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,YAAY;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,OAAO,KAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,IAAI,CAAC,KAAK,GAAY,CAAC;IACpJ,CAAC;IACD,OAAO,eAAM,KAAK,EAAC,yBAAyB,YAAE,IAAI,CAAC,KAAK,GAAQ,CAAC;AACnE,CAAC","sourcesContent":["import type ContactItem from \"./ContactItem.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExLink from \"./Link.js\";\nimport IconMode from \"@ui5/webcomponents/dist/types/IconMode.js\";\n\nexport default function ContactItemTemplate(this: ContactItem) {\n  return (\n    <div class=\"udex-contact-item\">\n      {this.icon && <UI5Icon class=\"udex-contact-item__icon\" name={this._iconName} mode={IconMode.Decorative}></UI5Icon>}\n      <div class=\"udex-contact-item__content\">\n        {labelContent.call(this)}\n        <p class=\"udex-contact-item__description\"><slot></slot></p>\n      </div>\n    </div>\n  );\n}\n\nfunction labelContent(this: ContactItem) {\n  if (this.href) {\n    return <UDExLink onClick={this._fireItemClickEvent} target={this.target} class=\"udex-contact-item__link\" href={this.href}>{this.label}</UDExLink>;\n  }\n  return <span class=\"udex-contact-item__text\">{this.label}</span>;\n}\n"]}

package/dist/CountrySelector.d.ts

@@ -166,7 +166,6 @@ declare class UDExCountrySelector extends UDExSearchableListBase {
     handleItemPress(e: CustomEvent): void;
     handleKeyPress(keyEvent: KeyboardEvent): void;
     handleInputMouseDown(e: CustomEvent): void;
-    onValueSearch(searchValue: string): void;
     handleTriggerClick(): void;
     handleValueSearch(e: CustomEvent): void;
     handleSubmitSearch(): void;
@@ -175,6 +174,7 @@ declare class UDExCountrySelector extends UDExSearchableListBase {
     dropDownClose(): void;
     handleResetSearch(): void;
     prepareCountrySelectorItems(): void;
+    fireChangeSearch(): void;
     getItemTemplate(country: Country): string | undefined;
     getCountryLabel(countryName?: string, localName?: string): string | null;
     get ariaControls(): string | null | undefined;

package/dist/CountrySelector.js

@@ -138,23 +138,19 @@ let UDExCountrySelector = UDExCountrySelector_1 = class UDExCountrySelector exte
         this._dropdown.open = true;
         this._search.focus();
         this._search.value = key;
-        this.onValueSearch(key);
+        this.fireChangeSearch();
     }
     handleInputMouseDown(e) {
         e.preventDefault();
     }
-    onValueSearch(searchValue) {
-        this._shouldFilterItems = true;
-        this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
-        this.fireDecoratorEvent("change-search", { value: searchValue });
-    }
     handleTriggerClick() {
         if (!this.isOpenerDisabled) {
             this._dropdown.open = !this._dropdown.open;
         }
     }
     handleValueSearch(e) {
-        this.onValueSearch(e.detail.value);
+        this.onSearch(e);
+        this.fireChangeSearch();
     }
     handleSubmitSearch() {
         this.onSubmitSearch();
@@ -190,6 +186,9 @@ let UDExCountrySelector = UDExCountrySelector_1 = class UDExCountrySelector exte
             });
         });
     }
+    fireChangeSearch() {
+        this.fireDecoratorEvent("change-search", { value: this._search.value });
+    }
     getItemTemplate(country) {
         return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
     }

package/dist/CountrySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountrySelector.js","sourceRoot":"","sources":["../src/CountrySelector.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport {\n  isEscape,\n  isTabPrevious,\n  isTabNext,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-up-arrow.js\";\nimport type { Country } from \"./data/CountryListISO3166.js\";\nimport { CountryListDB } from \"./data/CountryListISO3166.js\";\nimport { COUNTRY_SELECT } from \"./generated/i18n/i18n-defaults.js\";\nimport Search from \"./Search.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExList from \"./List.js\";\nimport UDExSearchableListBase from \"./SearchableListBase.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExTextField from \"./TextField.js\";\nimport UDExValueState from \"./types/common.js\";\nimport StatusMessage from \"./StatusMessage.js\";\nimport type { UDExSearchKeydownEventDetail } from \"./Search.js\";\nimport type { UDExSearchableListBaseEvents } from \"./SearchableListBase.js\";\nimport CountrySelectorTemplate from \"./generated/templates/CountrySelectorTemplate.lit.js\";\nimport SearchableListBaseTemplate from \"./generated/templates/SearchableListBaseTemplate.lit.js\";\n\n// Styles\nimport CountrySelectorCss from \"./generated/themes/CountrySelector.css.js\";\n\ntype UDExCountrySelectorChangeSearchEventDetail = {\n  value: string,\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-country-selector</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/CountrySelector.js\";</code>\n *\n * @constructor\n * @extends UDExSearchableListBase\n * @tagname udex-country-selector\n * @public\n */\n@customElement({\n  tag: \"udex-country-selector\",\n  renderer: litRender,\n  styles: CountrySelectorCss,\n  template: CountrySelectorTemplate,\n  dependencies: [\n    Search,\n    Button,\n    UDExList,\n    UDExListItem,\n    UDExDropdown,\n    UDExTextField,\n    StatusMessage,\n  ],\n})\n\n/**\n * Fired before the dropdown pane is opened.\n *\n * @public\n */\n@event(\"before-open\", { bubbles: true })\n\n/**\n * Fired after the dropdown pane is opened.\n *\n * @public\n */\n@event(\"open\", { bubbles: true })\n\n/**\n * Fired before the dropdown pane is closed.\n *\n * @public\n */\n@event(\"before-close\", { bubbles: true })\n\n/**\n * Fired after the dropdown pane is closed.\n *\n * @public\n */\n@event(\"close\", { bubbles: true })\n\n/**\n * Fired event when the user submitted the value in the search.\n *\n * @public\n */\n@event(\"change-search\", { bubbles: true })\n\n/**\n * Fired event when the user clicks on the reset button in the search.\n *\n * @public\n */\n@event(\"reset-search\", { bubbles: true })\n\n/**\n * Fired event when the user clicks on the submitted icon in the search.\n *\n * @public\n */\n@event(\"submit-search\", { bubbles: true })\n\nclass UDExCountrySelector extends UDExSearchableListBase {\n  eventDetails!: {\n    \"open\": void,\n    \"close\": void,\n    \"before-close\": void,\n    \"before-open\": void,\n    \"change-search\": UDExCountrySelectorChangeSearchEventDetail,\n  } & Omit<UDExSearchableListBaseEvents, \"change-search\">;\n\n  /**\n   * Defines label text for the input field.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    label?: string;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    accessibleName?: string;\n\n  /**\n   * Receives id (or many ids) of the elements that label the component.\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleNameRef: string = \"\";\n\n  /**\n   * Defines whether the component is required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\n\n  /**\n   * Allows control over the height.\n   *\n   * @public\n   */\n  @property({ type: String })\n    height?: string;\n\n  /**\n   * Defines whether the component is in disabled state.\n   * <br><br>\n   * <b>Note:</b> A disabled component is completely noninteractive.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines whether the component is read-only.\n   * <br><br>\n   * <b>Note:</b> A read-only component is not editable,\n   * but still provides visual feedback upon user interaction.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is display-only.\n   * <br><br>\n   * <b>Note:</b> A display-only component is not editable,\n   * but still provides visual feedback upon user interaction, input border is not visible.\n   *\n   * @default false\n   * @public\n   */\n\n  @property({ type: Boolean })\n    displayonly!: boolean;\n\n  /**\n   * Allows to define the initially preselected country.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    preselectedCountry!: string;\n\n  /**\n   * Allows to define the list of blocked country.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    blockedCountryCodes?: string;\n\n  /**\n   * Defines the placeholder of the search.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    searchPlaceholder!: string;\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property()\n    valueState: `${UDExValueState}` = UDExValueState.Standard;\n\n  /**\n   * Defines supporting text under the country selector.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    supportingText?: string;\n\n  /**\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    hideFlagImages?: boolean;\n\n  @property({ type: Boolean })\n    _open?: boolean = false;\n\n  countryList: Country[] = CountryListDB;\n  selectedCountry!: Country | undefined;\n  _trigger!: UDExTextField;\n\n  _dropdown!: UDExDropdown;\n  _search!: Search;\n  _handleResizeBound: ResizeObserverCallback;\n\n  constructor() {\n    super();\n    this._shouldFilterItems = false;\n    this._handleResizeBound = this._handleResize.bind(this);\n    this._filteredItems = [];\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  onBeforeRendering(): void {\n    if (this.blockedCountryCodes?.length) {\n      const blockedCountryCodesArray = this.blockedCountryCodes.split(\",\").map(code => code.trim().toUpperCase());\n      this.countryList = this.countryList.filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));\n    }\n\n    if (!this.selectedCountry) {\n      this.selectedCountry = this.countryList.find(country => country.iso.toUpperCase() === this.preselectedCountry?.toUpperCase());\n    }\n\n    this.prepareCountrySelectorItems();\n\n    if (!this._shouldFilterItems) {\n      this._filteredItems = this.getProcessedItems();\n    }\n  }\n\n  onAfterRendering() {\n    this._dropdown = this.getDropdown();\n    this._search = this.getSearch();\n    this._trigger = this.getTrigger();\n  }\n\n  getTrigger(): UDExTextField {\n    return this.shadowRoot!.querySelector<UDExTextField>(\"[udex-text-field]\")!;\n  }\n\n  _dropdownClose() {\n    this.fireDecoratorEvent(\"close\");\n    this._trigger.iconActive = false;\n  }\n\n  _dropdownOpen() {\n    this.fireDecoratorEvent(\"open\");\n    this._trigger.iconActive = true;\n  }\n\n  _dropdownBeforeOpen() {\n    this._open = true;\n    this.onResetSearch();\n    this.fireDecoratorEvent(\"before-open\");\n  }\n\n  _dropdownBeforeClose() {\n    this._open = false;\n    this.fireDecoratorEvent(\"before-close\");\n  }\n\n  get searchableList() {\n    this.defaultAccessibleRole = \"listbox\";\n    return executeTemplate(UDExCountrySelector.searchableListBaseTemplate, this);\n  }\n\n  static get searchableListBaseTemplate() {\n    return SearchableListBaseTemplate;\n  }\n\n  _handleResize() {\n    this._dropdown.style.setProperty(\"--udex-dropdown-pane-width\", `${this._trigger.offsetWidth}px`);\n  }\n\n  handleCloseSearch() {\n    this.getInput()?.shadowRoot!.querySelector<Button>(\"[udex-control-button]\")?.focus();\n  }\n\n  handleItemPress(e: CustomEvent) {\n    this.onItemPress(e);\n    const target = e.target as HTMLElement;\n    const item: any = this.getItemFromList(target?.getAttribute(\"data-token-id\") as string);\n    this.selectedCountry = this.countryList.find(country => country.iso === item._id);\n    this.dropDownClose();\n  }\n\n  handleKeyPress(keyEvent: KeyboardEvent) {\n    const key = keyEvent.key;\n    this._dropdown.open = true;\n    this._search.focus();\n    this._search.value = key;\n    this.onValueSearch(key);\n  }\n\n  handleInputMouseDown(e: CustomEvent): void {\n    e.preventDefault();\n  }\n\n  onValueSearch(searchValue: string) {\n    this._shouldFilterItems = true;\n    this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);\n    this.fireDecoratorEvent(\"change-search\", { value: searchValue });\n  }\n\n  handleTriggerClick() {\n    if (!this.isOpenerDisabled) {\n      this._dropdown.open = !this._dropdown.open;\n    }\n  }\n\n  handleValueSearch(e: CustomEvent) {\n    this.onValueSearch(e.detail.value as string);\n  }\n\n  handleSubmitSearch() {\n    this.onSubmitSearch();\n  }\n\n  handleKeyDownSearch(keyEvent: CustomEvent<UDExSearchKeydownEventDetail>) {\n    const { detail: { e } } = keyEvent;\n\n    if (isTabPrevious(e) || isEscape(e)) {\n      e.preventDefault();\n      this.dropDownClose();\n      this.handleCloseSearch();\n    }\n  }\n\n  handleKeyDownDropdown(e: KeyboardEvent) {\n    if ((isTabNext(e) && (e.target !== this._search || this.isListEmpty))) {\n      this.dropDownClose();\n    }\n  }\n\n  dropDownClose(): void {\n    this._dropdown.open = false;\n  }\n\n  handleResetSearch() {\n    this.onResetSearch();\n  }\n\n  prepareCountrySelectorItems(): void {\n    this.items.length = 0;\n    this.countryList.forEach(country => {\n      const selected = country.iso.toUpperCase() === this.selectedCountry?.iso.toUpperCase();\n      this.items.push({\n        label: this.getCountryLabel(country.countryName, country.localName),\n        innerHTML: this.getItemTemplate(country),\n        selected,\n        _id: country.iso.toUpperCase(),\n      } as UDExListItem);\n    });\n  }\n\n  getItemTemplate(country: Country) {\n    return this.hideFlagImages ? undefined : `<span class=\"udex-country-selector-item__image\" style=\"background-position:${country.flagX}\">`;\n  }\n\n  getCountryLabel(countryName?: string, localName?: string): string | null {\n    return localName ? `${countryName} (${localName})` : countryName || null;\n  }\n\n  get ariaControls(): string | null | undefined {\n    const list = this.shadowRoot!.querySelector<UDExList>(\"[udex-list]\");\n    return list?.getAttribute(\"id\");\n  }\n\n  get selectedCountryFlagX(): string | undefined {\n    return this.selectedCountry?.flagX;\n  }\n\n  get selectedCountryFlagY(): string | undefined {\n    return this.selectedCountry?.flagY;\n  }\n\n  get selectedCountryName(): string | null {\n    return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : \"\";\n  }\n\n  get flagAriaLabel(): string {\n    return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || \"None\";\n  }\n\n  get triggerIcon(): string {\n    return this._open ? \"navigation-up-arrow\" : \"navigation-down-arrow\";\n  }\n\n  get countrySelectorClasses(): string {\n    const baseClass = \"udex-country-selector__dropdown\";\n    return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;\n  }\n\n  get countrySelectorTriggerClasses(): string {\n    const baseClass = \"udex-country-selector__trigger\";\n    const classes = [baseClass];\n\n    if (this.disabled) {\n      classes.push(`${baseClass}--disabled`);\n    }\n\n    if (this.readonly) {\n      classes.push(`${baseClass}--readonly`);\n    }\n\n    if (this.displayonly) {\n      classes.push(`${baseClass}--displayonly`);\n    }\n\n    return classes.join(\" \");\n  }\n\n  get showFlagImages(): boolean {\n    return !this.hideFlagImages;\n  }\n\n  get isOpenerDisabled(): boolean {\n    return this.readonly || this.displayonly || this.disabled;\n  }\n\n  getSearch(): Search {\n    return this.shadowRoot!.querySelector<Search>(\"[udex-search]\")!;\n  }\n\n  getDropdownPopover(): Popover {\n    return this._dropdown.shadowRoot!.querySelector<Popover>(\"[ui5-popover]\")!;\n  }\n\n  getDropdown(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(\"[udex-dropdown]\")!;\n  }\n\n  getInput(): UDExTextField {\n    return this.shadowRoot!.querySelector<UDExTextField>(\"[udex-text-field]\")!;\n  }\n\n  get effectiveAriaLabel(): string {\n    return this.label || this.accessibleName || UDExCountrySelector.i18nBundle.getText(COUNTRY_SELECT);\n  }\n}\n\nUDExCountrySelector.define();\n\nexport default UDExCountrySelector;\n"]}
+{"version":3,"file":"CountrySelector.js","sourceRoot":"","sources":["../src/CountrySelector.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport {\n  isEscape,\n  isTabPrevious,\n  isTabNext,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-up-arrow.js\";\nimport type { Country } from \"./data/CountryListISO3166.js\";\nimport { CountryListDB } from \"./data/CountryListISO3166.js\";\nimport { COUNTRY_SELECT } from \"./generated/i18n/i18n-defaults.js\";\nimport Search from \"./Search.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExList from \"./List.js\";\nimport UDExSearchableListBase from \"./SearchableListBase.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExTextField from \"./TextField.js\";\nimport UDExValueState from \"./types/common.js\";\nimport StatusMessage from \"./StatusMessage.js\";\nimport type { UDExSearchKeydownEventDetail } from \"./Search.js\";\nimport type { UDExSearchableListBaseEvents } from \"./SearchableListBase.js\";\nimport CountrySelectorTemplate from \"./generated/templates/CountrySelectorTemplate.lit.js\";\nimport SearchableListBaseTemplate from \"./generated/templates/SearchableListBaseTemplate.lit.js\";\n\n// Styles\nimport CountrySelectorCss from \"./generated/themes/CountrySelector.css.js\";\n\ntype UDExCountrySelectorChangeSearchEventDetail = {\n  value: string,\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-country-selector</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/CountrySelector.js\";</code>\n *\n * @constructor\n * @extends UDExSearchableListBase\n * @tagname udex-country-selector\n * @public\n */\n@customElement({\n  tag: \"udex-country-selector\",\n  renderer: litRender,\n  styles: CountrySelectorCss,\n  template: CountrySelectorTemplate,\n  dependencies: [\n    Search,\n    Button,\n    UDExList,\n    UDExListItem,\n    UDExDropdown,\n    UDExTextField,\n    StatusMessage,\n  ],\n})\n\n/**\n * Fired before the dropdown pane is opened.\n *\n * @public\n */\n@event(\"before-open\", { bubbles: true })\n\n/**\n * Fired after the dropdown pane is opened.\n *\n * @public\n */\n@event(\"open\", { bubbles: true })\n\n/**\n * Fired before the dropdown pane is closed.\n *\n * @public\n */\n@event(\"before-close\", { bubbles: true })\n\n/**\n * Fired after the dropdown pane is closed.\n *\n * @public\n */\n@event(\"close\", { bubbles: true })\n\n/**\n * Fired event when the user submitted the value in the search.\n *\n * @public\n */\n@event(\"change-search\", { bubbles: true })\n\n/**\n * Fired event when the user clicks on the reset button in the search.\n *\n * @public\n */\n@event(\"reset-search\", { bubbles: true })\n\n/**\n * Fired event when the user clicks on the submitted icon in the search.\n *\n * @public\n */\n@event(\"submit-search\", { bubbles: true })\n\nclass UDExCountrySelector extends UDExSearchableListBase {\n  eventDetails!: {\n    \"open\": void,\n    \"close\": void,\n    \"before-close\": void,\n    \"before-open\": void,\n    \"change-search\": UDExCountrySelectorChangeSearchEventDetail,\n  } & Omit<UDExSearchableListBaseEvents, \"change-search\">;\n\n  /**\n   * Defines label text for the input field.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    label?: string;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    accessibleName?: string;\n\n  /**\n   * Receives id (or many ids) of the elements that label the component.\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleNameRef: string = \"\";\n\n  /**\n   * Defines whether the component is required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\n\n  /**\n   * Allows control over the height.\n   *\n   * @public\n   */\n  @property({ type: String })\n    height?: string;\n\n  /**\n   * Defines whether the component is in disabled state.\n   * <br><br>\n   * <b>Note:</b> A disabled component is completely noninteractive.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines whether the component is read-only.\n   * <br><br>\n   * <b>Note:</b> A read-only component is not editable,\n   * but still provides visual feedback upon user interaction.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is display-only.\n   * <br><br>\n   * <b>Note:</b> A display-only component is not editable,\n   * but still provides visual feedback upon user interaction, input border is not visible.\n   *\n   * @default false\n   * @public\n   */\n\n  @property({ type: Boolean })\n    displayonly!: boolean;\n\n  /**\n   * Allows to define the initially preselected country.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    preselectedCountry!: string;\n\n  /**\n   * Allows to define the list of blocked country.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    blockedCountryCodes?: string;\n\n  /**\n   * Defines the placeholder of the search.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    searchPlaceholder!: string;\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property()\n    valueState: `${UDExValueState}` = UDExValueState.Standard;\n\n  /**\n   * Defines supporting text under the country selector.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    supportingText?: string;\n\n  /**\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    hideFlagImages?: boolean;\n\n  @property({ type: Boolean })\n    _open?: boolean = false;\n\n  countryList: Country[] = CountryListDB;\n  selectedCountry!: Country | undefined;\n  _trigger!: UDExTextField;\n\n  _dropdown!: UDExDropdown;\n  _search!: Search;\n  _handleResizeBound: ResizeObserverCallback;\n\n  constructor() {\n    super();\n    this._shouldFilterItems = false;\n    this._handleResizeBound = this._handleResize.bind(this);\n    this._filteredItems = [];\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  onBeforeRendering(): void {\n    if (this.blockedCountryCodes?.length) {\n      const blockedCountryCodesArray = this.blockedCountryCodes.split(\",\").map(code => code.trim().toUpperCase());\n      this.countryList = this.countryList.filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));\n    }\n\n    if (!this.selectedCountry) {\n      this.selectedCountry = this.countryList.find(country => country.iso.toUpperCase() === this.preselectedCountry?.toUpperCase());\n    }\n\n    this.prepareCountrySelectorItems();\n\n    if (!this._shouldFilterItems) {\n      this._filteredItems = this.getProcessedItems();\n    }\n  }\n\n  onAfterRendering() {\n    this._dropdown = this.getDropdown();\n    this._search = this.getSearch();\n    this._trigger = this.getTrigger();\n  }\n\n  getTrigger(): UDExTextField {\n    return this.shadowRoot!.querySelector<UDExTextField>(\"[udex-text-field]\")!;\n  }\n\n  _dropdownClose() {\n    this.fireDecoratorEvent(\"close\");\n    this._trigger.iconActive = false;\n  }\n\n  _dropdownOpen() {\n    this.fireDecoratorEvent(\"open\");\n    this._trigger.iconActive = true;\n  }\n\n  _dropdownBeforeOpen() {\n    this._open = true;\n    this.onResetSearch();\n    this.fireDecoratorEvent(\"before-open\");\n  }\n\n  _dropdownBeforeClose() {\n    this._open = false;\n    this.fireDecoratorEvent(\"before-close\");\n  }\n\n  get searchableList() {\n    this.defaultAccessibleRole = \"listbox\";\n    return executeTemplate(UDExCountrySelector.searchableListBaseTemplate, this);\n  }\n\n  static get searchableListBaseTemplate() {\n    return SearchableListBaseTemplate;\n  }\n\n  _handleResize() {\n    this._dropdown.style.setProperty(\"--udex-dropdown-pane-width\", `${this._trigger.offsetWidth}px`);\n  }\n\n  handleCloseSearch() {\n    this.getInput()?.shadowRoot!.querySelector<Button>(\"[udex-control-button]\")?.focus();\n  }\n\n  handleItemPress(e: CustomEvent) {\n    this.onItemPress(e);\n    const target = e.target as HTMLElement;\n    const item: any = this.getItemFromList(target?.getAttribute(\"data-token-id\") as string);\n    this.selectedCountry = this.countryList.find(country => country.iso === item._id);\n    this.dropDownClose();\n  }\n\n  handleKeyPress(keyEvent: KeyboardEvent) {\n    const key = keyEvent.key;\n    this._dropdown.open = true;\n    this._search.focus();\n    this._search.value = key;\n    this.fireChangeSearch();\n  }\n\n  handleInputMouseDown(e: CustomEvent): void {\n    e.preventDefault();\n  }\n\n  handleTriggerClick() {\n    if (!this.isOpenerDisabled) {\n      this._dropdown.open = !this._dropdown.open;\n    }\n  }\n\n  handleValueSearch(e: CustomEvent): void {\n    this.onSearch(e);\n    this.fireChangeSearch();\n  }\n\n  handleSubmitSearch(): void {\n    this.onSubmitSearch();\n  }\n\n  handleKeyDownSearch(keyEvent: CustomEvent<UDExSearchKeydownEventDetail>) {\n    const { detail: { e } } = keyEvent;\n\n    if (isTabPrevious(e) || isEscape(e)) {\n      e.preventDefault();\n      this.dropDownClose();\n      this.handleCloseSearch();\n    }\n  }\n\n  handleKeyDownDropdown(e: KeyboardEvent) {\n    if ((isTabNext(e) && (e.target !== this._search || this.isListEmpty))) {\n      this.dropDownClose();\n    }\n  }\n\n  dropDownClose(): void {\n    this._dropdown.open = false;\n  }\n\n  handleResetSearch() {\n    this.onResetSearch();\n  }\n\n  prepareCountrySelectorItems(): void {\n    this.items.length = 0;\n    this.countryList.forEach(country => {\n      const selected = country.iso.toUpperCase() === this.selectedCountry?.iso.toUpperCase();\n      this.items.push({\n        label: this.getCountryLabel(country.countryName, country.localName),\n        innerHTML: this.getItemTemplate(country),\n        selected,\n        _id: country.iso.toUpperCase(),\n      } as UDExListItem);\n    });\n  }\n\n  fireChangeSearch(): void {\n    this.fireDecoratorEvent(\"change-search\", { value: this._search.value });\n  }\n\n  getItemTemplate(country: Country) {\n    return this.hideFlagImages ? undefined : `<span class=\"udex-country-selector-item__image\" style=\"background-position:${country.flagX}\">`;\n  }\n\n  getCountryLabel(countryName?: string, localName?: string): string | null {\n    return localName ? `${countryName} (${localName})` : countryName || null;\n  }\n\n  get ariaControls(): string | null | undefined {\n    const list = this.shadowRoot!.querySelector<UDExList>(\"[udex-list]\");\n    return list?.getAttribute(\"id\");\n  }\n\n  get selectedCountryFlagX(): string | undefined {\n    return this.selectedCountry?.flagX;\n  }\n\n  get selectedCountryFlagY(): string | undefined {\n    return this.selectedCountry?.flagY;\n  }\n\n  get selectedCountryName(): string | null {\n    return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : \"\";\n  }\n\n  get flagAriaLabel(): string {\n    return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || \"None\";\n  }\n\n  get triggerIcon(): string {\n    return this._open ? \"navigation-up-arrow\" : \"navigation-down-arrow\";\n  }\n\n  get countrySelectorClasses(): string {\n    const baseClass = \"udex-country-selector__dropdown\";\n    return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;\n  }\n\n  get countrySelectorTriggerClasses(): string {\n    const baseClass = \"udex-country-selector__trigger\";\n    const classes = [baseClass];\n\n    if (this.disabled) {\n      classes.push(`${baseClass}--disabled`);\n    }\n\n    if (this.readonly) {\n      classes.push(`${baseClass}--readonly`);\n    }\n\n    if (this.displayonly) {\n      classes.push(`${baseClass}--displayonly`);\n    }\n\n    return classes.join(\" \");\n  }\n\n  get showFlagImages(): boolean {\n    return !this.hideFlagImages;\n  }\n\n  get isOpenerDisabled(): boolean {\n    return this.readonly || this.displayonly || this.disabled;\n  }\n\n  getSearch(): Search {\n    return this.shadowRoot!.querySelector<Search>(\"[udex-search]\")!;\n  }\n\n  getDropdownPopover(): Popover {\n    return this._dropdown.shadowRoot!.querySelector<Popover>(\"[ui5-popover]\")!;\n  }\n\n  getDropdown(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(\"[udex-dropdown]\")!;\n  }\n\n  getInput(): UDExTextField {\n    return this.shadowRoot!.querySelector<UDExTextField>(\"[udex-text-field]\")!;\n  }\n\n  get effectiveAriaLabel(): string {\n    return this.label || this.accessibleName || UDExCountrySelector.i18nBundle.getText(COUNTRY_SELECT);\n  }\n}\n\nUDExCountrySelector.define();\n\nexport default UDExCountrySelector;\n"]}

package/dist/Divider.d.ts

@@ -1,10 +1,18 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
 /**
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>udex-divider</code> component is a divider component used to separate content in a page.
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-divider</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Divider.js";</code>
+ *
  *
  * @constructor
  * @extends UI5Element
@@ -19,6 +27,6 @@ declare class UDExDivider extends UI5Element {
      * @public
      */
     accessibleRole: string;
-    get effectiveAccRole(): string;
+    get effectiveAccRole(): AriaRole;
 }
 export default UDExDivider;

package/dist/Divider.js

@@ -6,10 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 // Template
-import DividerTemplate from "./generated/templates/DividerTemplate.lit.js";
+import DividerTemplate from "./DividerTemplate.js";
 // Styles
 import DividerCss from "./generated/themes/Divider.css.js";
 /**
@@ -17,7 +17,14 @@ import DividerCss from "./generated/themes/Divider.css.js";
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>udex-divider</code> component is a divider component used to separate content in a page.
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-divider</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Divider.js";</code>
+ *
  *
  * @constructor
  * @extends UI5Element
@@ -45,7 +52,7 @@ __decorate([
 UDExDivider = __decorate([
     customElement({
         tag: "udex-divider",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: DividerCss,
         template: DividerTemplate,
     })

package/dist/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../src/Divider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E,WAAW;AACX,OAAO,eAAe,MAAM,8CAA8C,CAAC;AAE3E,SAAS;AACT,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAE3D;;;;;;;;;;;GAWG;AAOH,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACE;;;;;WAKG;QAED,mBAAc,GAAW,WAAW,CAAC;IAKzC,CAAC;IAHC,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,CAAC;IAC3C,CAAC;CACF,CAAA;AALG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACY;AARnC,WAAW;IANhB,aAAa,CAAC;QACb,GAAG,EAAE,cAAc;QACnB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,eAAe;KAC1B,CAAC;GACI,WAAW,CAahB;AAED,WAAW,CAAC,MAAM,EAAE,CAAC;AAErB,eAAe,WAAW,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\n\n// Template\nimport DividerTemplate from \"./generated/templates/DividerTemplate.lit.js\";\n\n// Styles\nimport DividerCss from \"./generated/themes/Divider.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>udex-divider</code> component is a divider component used to separate content in a page.\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-divider\n * @public\n */\n@customElement({\n  tag: \"udex-divider\",\n  renderer: litRender,\n  styles: DividerCss,\n  template: DividerTemplate,\n})\nclass UDExDivider extends UI5Element {\n  /**\n   * Defines the ARIA role of the component.\n   *\n   * @default \"separator\"\n   * @public\n   */\n  @property({ type: String })\n    accessibleRole: string = \"separator\";\n\n  get effectiveAccRole() {\n    return this.accessibleRole.toLowerCase();\n  }\n}\n\nUDExDivider.define();\n\nexport default UDExDivider;\n"]}
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../src/Divider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAG3E,WAAW;AACX,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAEnD,SAAS;AACT,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAE3D;;;;;;;;;;;;;;;;;;GAkBG;AAOH,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACE;;;;;WAKG;QAED,mBAAc,GAAW,WAAW,CAAC;IAKzC,CAAC;IAHC,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,WAAW,EAAc,CAAC;IACvD,CAAC;CACF,CAAA;AALG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACY;AARnC,WAAW;IANhB,aAAa,CAAC;QACb,GAAG,EAAE,cAAc;QACnB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,eAAe;KAC1B,CAAC;GACI,WAAW,CAahB;AAED,WAAW,CAAC,MAAM,EAAE,CAAC;AAErB,eAAe,WAAW,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\n\n// Template\nimport DividerTemplate from \"./DividerTemplate.js\";\n\n// Styles\nimport DividerCss from \"./generated/themes/Divider.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-divider</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Divider.js\";</code>\n *\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-divider\n * @public\n */\n@customElement({\n  tag: \"udex-divider\",\n  renderer: jsxRenderer,\n  styles: DividerCss,\n  template: DividerTemplate,\n})\nclass UDExDivider extends UI5Element {\n  /**\n   * Defines the ARIA role of the component.\n   *\n   * @default \"separator\"\n   * @public\n   */\n  @property({ type: String })\n    accessibleRole: string = \"separator\";\n\n  get effectiveAccRole() {\n    return this.accessibleRole.toLowerCase() as AriaRole;\n  }\n}\n\nUDExDivider.define();\n\nexport default UDExDivider;\n"]}

package/dist/DividerTemplate.d.ts

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

package/dist/DividerTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function DividerTemplate() {
+    return (_jsx("div", { class: "udex-divider-wrapper", role: this.effectiveAccRole, children: _jsx("span", { class: "udex-divider" }) }));
+}
+//# sourceMappingURL=DividerTemplate.js.map