@sapudex/web-components 0.225.0 → 2.0.0

package/src/TableGroupRow.ts

@@ -1,7 +1,6 @@
 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 Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
@@ -9,6 +8,7 @@ import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExTableRow from "./TableRow.js";
 
 import TableGroupRowTemplate from "./generated/templates/TableGroupRowTemplate.lit.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 
 // Styles
 import TableGroupRowCss from "./generated/themes/TableGroupRow.css.js";
@@ -79,7 +79,7 @@ class UDExTableGroupRow extends UI5Element {
    *
    * @private
    */
-  @property({ validator: Integer })
+  @property({ type: Number })
     _index!: number;
 
   /**

package/src/TableHeaderCell.ts

@@ -48,8 +48,8 @@ class UDExTableHeaderCell extends UDExTableCellBase {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    iconStart!: string;
+  @property({ type: String })
+    iconStart: string = "";
 
   /**
    * Defines the name of the UI5 Icon, that will be displayed at the end of the content.
@@ -57,8 +57,8 @@ class UDExTableHeaderCell extends UDExTableCellBase {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    iconEnd!: string;
+  @property({ type: String })
+    iconEnd: string = "";
 
   protected ariaRole: string = "columnheader";
 

package/src/TableRowBase.ts

@@ -3,9 +3,8 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import UDExTableCell from "./TableCell.js";
-import UDExTableHeaderCell from "./TableHeaderCell.js";
+import type UDExTableHeaderCell from "./TableHeaderCell.js";
 
 // Styles
 import TableRowBase from "./generated/themes/TableRowBase.css.js";
@@ -39,7 +38,7 @@ abstract class UDExTableRowBase extends UI5Element {
    *
    * @private
    */
-  @property({ validator: Integer })
+  @property({ type: Number })
     _index!: number;
 
   onEnterDOM() {

package/src/Tag.ts

@@ -1,31 +1,36 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import IconPlacement from "./types/IconPlacement.js";
 
 import TagTemplate from "./generated/templates/TagTemplate.lit.js";
 
 // Styles
-import TagCss from "./generated/themes/Tag.css";
-import IconPlacement from "./types/IconPlacement.js";
+import TagCss from "./generated/themes/Tag.css.js";
 
-export enum TagType {
+export enum UDExTagType {
     Text = "Text",
     White = "White",
     Outlined = "Outlined",
     Grey = "Grey"
 }
 
-export enum TagSize {
+export enum UDExTagSize {
   Small = "Small",
   Medium = "Medium"
 }
 
+type UDExTagLinkClickEventDetail = {
+  originalEvent: Event,
+}
+
 /**
  * @class
  *
@@ -56,25 +61,28 @@ export enum TagSize {
 /**
  * Emitted when tag was clicked
  *
- * @event sap.ui.webc.web-components.UDExTag#selectionChange
  * @public
  */
-@event("selectionChange")
+@event("selectionChange", { bubbles: true })
 
 /**
  * Emitted when icon in tag was clicked
  *
- * @event sap.ui.webc.web-components.UDExTag#iconClick
  * @public
  */
-@event("iconClick")
+@event("iconClick", { bubbles: true })
 /**
  * Emitted when tag link was clicked
  *
  * @public
  */
-@event("tagLinkClick")
+@event("tagLinkClick", { cancelable: true, bubbles: true })
 class UDExTag extends UI5Element {
+  eventDetails!: {
+    "selectionChange": void,
+    "iconClick": void,
+    "tagLinkClick": UDExTagLinkClickEventDetail,
+  };
   /**
    * Defines the text of the tag
   *
@@ -97,8 +105,8 @@ class UDExTag extends UI5Element {
   * @default "Grey"
   * @public
   */
-  @property({ type: TagType, defaultValue: TagType.Grey })
-    design?: `${TagType}`;
+  @property()
+    design: `${UDExTagType}` = UDExTagType.Grey;
 
   /**
    * Defines the size of the component.
@@ -106,8 +114,8 @@ class UDExTag extends UI5Element {
    * @default "Small"
    * @public
    */
-  @property({ type: TagSize, defaultValue: TagSize.Small })
-    size!: `${TagSize}`;
+  @property()
+    size: `${UDExTagSize}` = UDExTagSize.Small;
 
   /**
    * Defines icon name
@@ -124,8 +132,8 @@ class UDExTag extends UI5Element {
   * @default "End"
   * @public
   */
-  @property({ type: IconPlacement, defaultValue: IconPlacement.End })
-    iconPlacement? : `${IconPlacement}`;
+  @property()
+    iconPlacement : `${IconPlacement}` = IconPlacement.End;
 
   /**
    * Defines if tag is in readnly state
@@ -142,7 +150,7 @@ class UDExTag extends UI5Element {
    * @public
    */
   @property()
-    accessibleName!: string;
+    accessibleName: string = "";
 
   /**
    * Defines the role attribute of component
@@ -150,8 +158,8 @@ class UDExTag extends UI5Element {
   * @default "button"
   * @public
   */
-  @property({ defaultValue: "button" })
-    accessibleRole!: string;
+  @property()
+    accessibleRole: string = "";
 
   /**
    * Defines if tag is selected
@@ -232,13 +240,13 @@ class UDExTag extends UI5Element {
 
   iconClickHandler(e: Event): void {
     e.stopPropagation();
-    this.fireEvent("iconClick");
+    this.fireDecoratorEvent("iconClick");
   }
 
   tagClickHandler(): void {
     if (this.isInteractiveTag) {
       this.setSelected();
-      this.fireEvent("selectionChange");
+      this.fireDecoratorEvent("selectionChange");
     }
   }
 
@@ -314,7 +322,7 @@ class UDExTag extends UI5Element {
   }
 
   tagLinkClickHandler(e: Event): void {
-    this.fireEvent("tagLinkClick", { originalEvent: e }, true);
+    this.fireDecoratorEvent("tagLinkClick", { originalEvent: e });
   }
 }
 

package/src/TagGroup.hbs

@@ -1,20 +1,28 @@
-<div id="{{_id}}-tag-group" @ui5-selectionChange="{{tagClickHandler}}" role="group">
+<div
+    id="{{_id}}-tag-group"
+    class="udex-tag-group"
+    role="group">
     <ui5-tokenizer
-            part="tokenizer"
-            show-more
-            prevent-popover-open
-            ?disabled="{{disabled}}"
-            id="{{_id}}-tag-group-tokenizer"
-            class="udex-tag-group__tokenizer"
-            @ui5-show-more-items-press="{{showMoreItems}}"
-            ?expanded="{{tokenizerExpanded}}">
+        part="tokenizer"
+        show-more
+        prevent-popover-open
+        ?disabled="{{disabled}}"
+        id="{{_id}}-tag-group-tokenizer"
+        class="udex-tag-group__tokenizer"
+        @ui5-show-more-items-press="{{showMoreItems}}"
+        ?expanded="{{tokenizerExpanded}}">
         {{#each items}}
             {{>TAG}}
         {{/each}}
     </ui5-tokenizer>
     {{#if _isHiddenTags}}
-        <udex-tooltip @keydown="{{handleShowMoreButtonKeydown}}" id="{{_id}}-tag-group-tooltip" placement="{{tooltipPlacement}}">
-            <div role="group" class="udex-tag-group-tooltip__content">
+        <udex-tooltip
+            @keydown="{{handleShowMoreButtonKeydown}}"
+            id="{{_id}}-tag-group-tooltip"
+            placement="{{tooltipPlacement}}">
+            <div
+                role="group"
+                class="udex-tag-group-tooltip__content">
                 {{#each hiddenTags}}
                     {{>TAG}}
                 {{/each}}
@@ -43,6 +51,7 @@
         ?non-selectable="{{this.nonSelectable}}"
         ?data-overflows="{{this.overflows}}"
         @keydown="{{../handleTagKeyDown}}"
+        @ui5-selectionChange="{{../handleTagClick}}"
         @ui5-iconClick="{{../tagIconClickHandler}}">
     </udex-tag>
 {{/inline}}

package/src/TagGroup.ts

@@ -5,7 +5,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import { isEnter, isSpace, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
 import UDExTag from "./Tag.js";
@@ -14,13 +14,19 @@ import UDExTooltip from "./Tooltip.js";
 import TagGroupTemplate from "./generated/templates/TagGroupTemplate.lit.js";
 
 // Styles
-import TagGroupCss from "./generated/themes/TagGroup.css";
+import TagGroupCss from "./generated/themes/TagGroup.css.js";
+import { Placement } from "./types/Dropdown.js";
 
-export enum PlacementType {
-  Left = "Left",
-  Right = "Right",
-  Top = "Top",
-  Bottom = "Bottom",
+type UDExTagClickEventDetail = {
+  tag: UDExTag,
+}
+
+type UDExTagIconClickEventDetail = {
+  tag: HTMLElement,
+}
+
+type UDExTagKeydownEventDetail = {
+  originalEvent: KeyboardEvent,
 }
 
 /**
@@ -52,27 +58,33 @@ export enum PlacementType {
  *
  * @public
  */
-@event("tag-click")
+@event("tag-click", { bubbles: true })
 /**
  * Emitted when icon in tag was clicked
  *
  * @public
  */
-@event("tag-icon-click")
+@event("tag-icon-click", { bubbles: true })
 /**
  * Emitted when the tooltip was opened, can be canceled
  *
  * @public
  */
-@event("show-more-tags")
+@event("show-more-tags", { cancelable: true, bubbles: true })
 /**
  * Emitted  when a keydown event occurs on a tag, can be canceled
  * Emitted custom event with keycode and tag details
  *
  * @public
  */
-@event("tag-keydown")
+@event("tag-keydown", { cancelable: true, bubbles: true })
 class UDExTagGroup extends UI5Element {
+  eventDetails!: {
+    "tag-click": UDExTagClickEventDetail,
+    "tag-icon-click": UDExTagIconClickEventDetail,
+    "show-more-tags": void,
+    "tag-keydown": UDExTagKeydownEventDetail,
+  };
   /**
    * Defines whether the UI5Tokenizer is expanded.
    *
@@ -80,7 +92,7 @@ class UDExTagGroup extends UI5Element {
    * @public
    */
   @property({ type: Boolean })
-    tokenizerExpanded!: boolean;
+    tokenizerExpanded: boolean = false;
   /**
    * Defines whether the component is in disabled state.
    *
@@ -122,8 +134,8 @@ class UDExTagGroup extends UI5Element {
    * @default "Bottom"
    * @public
    */
-  @property({ type: PlacementType, defaultValue: PlacementType.Bottom })
-    tooltipPlacement!: `${PlacementType}`;
+  @property()
+    tooltipPlacement: `${Placement}` = Placement.Bottom;
 
   /**
    * @private
@@ -162,7 +174,7 @@ class UDExTagGroup extends UI5Element {
 
   onAfterRendering(): void {
     this._tokenizer = this.tokenizer;
-    this._nMoreBtn = this._tokenizer.shadowRoot?.querySelector(`.ui5-tokenizer-more-text`) || null;
+    this._nMoreBtn = this._tokenizer.moreLink || null;
     if (!this.readonly && !this.disabled && this._nMoreBtn && !this._nMoreBtn.hasAttribute("tabindex")) {
       this._nMoreBtn.setAttribute("tabindex", "0");
       this._nMoreBtn.addEventListener("keydown", this._nMoreKeyDownHandler.bind(this));
@@ -189,12 +201,8 @@ class UDExTagGroup extends UI5Element {
     this._isHiddenTags = this._tokenizer?._nMoreCount > 0;
   }
 
-  tagClickHandler(e: CustomEvent): void {
-    this.fireEvent("tag-click", { tag: e.target as HTMLElement });
-  }
-
   tagIconClickHandler(e: CustomEvent): void {
-    this.fireEvent("tag-icon-click", { tag: e.target as HTMLElement });
+    this.fireDecoratorEvent("tag-icon-click", { tag: e.target as HTMLElement });
   }
 
   handleShowMoreButtonKeydown(e: KeyboardEvent): void {
@@ -203,15 +211,22 @@ class UDExTagGroup extends UI5Element {
     }
   }
 
+  handleTagClick(e: CustomEvent): void {
+    this.fireDecoratorEvent("tag-click", { tag: e.target as UDExTag });
+  }
+
   handleTagKeyDown(e: KeyboardEvent): void {
-    this.fireEvent("tag-keydown", { originalEvent: e }, true);
+    e.stopPropagation();
+    this.fireDecoratorEvent("tag-keydown", { originalEvent: e });
   }
 
   showMoreItems(): void {
-    if (this.fireEvent("show-more-tags", {}, true)) {
+    if (this.fireDecoratorEvent("show-more-tags")) {
       const tooltip = this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`)!;
       if (this._nMoreBtn) {
-        tooltip?.onOpen(this._nMoreBtn);
+        this._tokenizer.expanded = false;
+        tooltip.opener = this._nMoreBtn;
+        tooltip.open = true;
       }
     }
   }

package/src/TextArea.hbs

@@ -23,9 +23,9 @@
         ?disabled="{{disabled}}"
         ?readonly="{{isInputReadonly}}"
         ?required="{{required}}"
-        ?aria-label="{{accessibleName}}"
-        ?aria-describedby="{{ariaDescribedBy}}"
-        ?aria-labelledby="{{accessibleNameRef}}"
+        aria-label="{{accessibleName}}"
+        aria-describedby="{{ariaDescribedBy}}"
+        aria-labelledby="{{accessibleNameRef}}"
         aria-required="{{required}}"
         aria-readonly="{{isInputReadonly}}"
         aria-invalid="{{ariaInvalid}}"
@@ -38,10 +38,10 @@
   </div>
   {{#if _supportingText}}
     <udex-status-message 
-        supporting-text-alignment="Right"
-        ?disabled="{{disabled}}"
-        supporting-text="{{_supportingText}}"
-        value-state="{{fieldState}}">
+    supporting-text-alignment="Right"
+    ?disabled="{{disabled}}" 
+    supporting-text="{{_supportingText}}" 
+    value-state="{{valueState}}">
     </udex-status-message>
     <span id="{{_id}}-supportingTextDesc" class="hidden-text">{{_supportingText}}</span>
   {{/if}}

package/src/TextArea.ts

@@ -3,10 +3,9 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   READ_ONLY,
   TEXTAREA_CHARACTERS_LEFT,
@@ -46,6 +45,10 @@ import TextAreaCss from "./generated/themes/TextArea.css.js";
 })
 
 class UDExTextArea extends UI5Element {
+  eventDetails!: {
+    "change": void,
+  };
+
   _labelActiveClassName = "udex-textarea__label--active";
 
   /**
@@ -55,7 +58,7 @@ class UDExTextArea extends UI5Element {
    * @public
    */
   @property({ type: String })
-    label!: string;
+    label: string = "";
 
   /**
    * Defines the value of the component.
@@ -66,7 +69,7 @@ class UDExTextArea extends UI5Element {
    * @public
    */
   @property({ type: String })
-    value!: string;
+    value: string = "";
 
   /**
    * Defines the number of visible text lines for the component.
@@ -80,7 +83,7 @@ class UDExTextArea extends UI5Element {
    *
    * @public
    */
-  @property({ validator: Integer })
+  @property({ type: Number })
     rows!: number;
 
   /**
@@ -99,8 +102,8 @@ class UDExTextArea extends UI5Element {
    * @default 0
    * @public
    */
-  @property({ validator: Integer, defaultValue: 0 })
-    growingMaxLines!: number;
+  @property({ type: Number })
+    growingMaxLines: number = 0;
 
   /**
    * Defines supporting text under the input field.
@@ -109,14 +112,14 @@ class UDExTextArea extends UI5Element {
    * @public
    */
   @property({ type: String })
-    supportingText!: string;
+    supportingText: string = "";
 
   /**
    * Sets the maximum number of characters available in the textarea.
    *
    * @public
    */
-  @property({ validator: Integer })
+  @property({ type: Number })
     maxlength?: number;
 
   /**
@@ -125,8 +128,8 @@ class UDExTextArea extends UI5Element {
    * @default "Standard"
    * @public
    */
-  @property({ type: ValueState, defaultValue: ValueState.Standard })
-    fieldState!: `${ValueState}`;
+  @property()
+    valueState: `${ValueState}` = ValueState.Standard;
 
   /**
    * Defines whether the component is required.
@@ -188,7 +191,7 @@ class UDExTextArea extends UI5Element {
    * @private
    */
   @property({ type: String, noAttribute: true })
-    labelClasses!: string;
+    labelClasses: string = "";
 
   /**
    * Defines the inner stored class of the label.
@@ -197,7 +200,7 @@ class UDExTextArea extends UI5Element {
    * @private
    */
   @property({ type: String, noAttribute: true })
-    labelActiveClass!: string;
+    labelActiveClass: string = "";
 
   /**
    * Defines the accessible ARIA name of the component.
@@ -205,15 +208,15 @@ class UDExTextArea extends UI5Element {
    * @public
    */
   @property()
-    accessibleName!: string;
+    accessibleName: string = "";
 
   /**
    * Receives id (or many ids) of the elements that label the component.
    * @default ""
    * @public
    */
-  @property({ type: String })
-    accessibleNameRef!: string;
+  @property()
+    accessibleNameRef: string = "";
 
   /**
    * Defines the active (focus)
@@ -230,10 +233,11 @@ class UDExTextArea extends UI5Element {
   @property({ type: Boolean })
     _isTouched!: boolean;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static async onDefine() {
-    UDExTextArea.i18nBundle = await getI18nBundle("@sapudex/web-components");
+  getInputDomRef() {
+    return this.getDomRef()!.querySelector<HTMLTextAreaElement>("textarea")!;
   }
 
   onBeforeRendering() {
@@ -255,7 +259,7 @@ class UDExTextArea extends UI5Element {
   };
 
   handleChange = () => {
-    this.fireEvent("change");
+    this.fireDecoratorEvent("change");
   };
 
   handleGrowing = () => {
@@ -309,20 +313,20 @@ class UDExTextArea extends UI5Element {
     this.active = false;
   };
 
-  getInputDomRef() {
-    return this.getDomRef()!.querySelector<HTMLTextAreaElement>("textarea")!;
+  get ariaInvalid(): string | null {
+    return this.valueState === ValueState.Error ? "true" : null;
   }
 
   get hasValueState(): boolean {
-    return this.fieldState === ValueState.Error || this.fieldState === ValueState.Warning || this.fieldState === ValueState.Success;
+    return this.valueState === ValueState.Error || this.valueState === ValueState.Warning || this.valueState === ValueState.Success;
   }
 
-  get fieldStateTypeMappings(): Record<string, string> {
+  get valueStateTypeMappings() {
     return {
-      "Success": UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
-      "Standard": UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),
-      "Error": UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
-      "Warning": UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+      [ValueState.Success]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+      [ValueState.Standard]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),
+      [ValueState.Error]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+      [ValueState.Warning]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
     };
   }
 
@@ -331,11 +335,11 @@ class UDExTextArea extends UI5Element {
       return;
     }
 
-    if (this.fieldState === ValueState.Standard) {
+    if (this.valueState === ValueState.Standard) {
       return;
     }
 
-    return `${this.fieldStateTypeMappings[this.fieldState]}`;
+    return `${this.valueStateTypeMappings[this.valueState]}`;
   }
 
   get readOnlyText(): string {
@@ -368,10 +372,6 @@ class UDExTextArea extends UI5Element {
     }
   }
 
-  get ariaInvalid(): string | null {
-    return this.fieldState === ValueState.Error ? "true" : null;
-  }
-
   get textHiddenLabel(): string {
     return UDExTextArea.i18nBundle.getText(TEXT_FIELD);
   }

package/src/TextField.hbs

@@ -19,7 +19,6 @@
          @click="{{handleClick}}"
          @keydown="{{handleKeydown}}"
          maxlength="{{maxlength}}"
-         autocomplete="{{autocomplete}}"
          ?disabled="{{disabled}}"
          ?readonly="{{isInputReadonly}}"
          ?required="{{required}}"
@@ -31,7 +30,6 @@
          aria-haspopup="{{accInfo.ariaHasPopup}}"
          aria-label="{{accInfo.ariaLabel}}"
          aria-labelledby="{{accInfo.ariaLabelledBy}}"
-         role="{{inputRole}}"
          part="textfield-input"
          min="{{min}}"
          max="{{max}}"