@sapudex/web-components 0.226.0 → 2.1.0

package/dist/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../src/TextField.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Float from \"@ui5/webcomponents-base/dist/types/Float.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport {\n  VALUE_STATE_SUCCESS,\n  VALUE_STATE_INFORMATION,\n  VALUE_STATE_WARNING,\n  VALUE_STATE_ERROR,\n  READ_ONLY,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport UDExControlButton from \"./ControlButton.js\";\nimport ValueState from \"./types/common.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\n\n// Template\nimport TextFieldTemplate from \"./generated/templates/TextFieldTemplate.lit\";\n\n// Styles\nimport TextFieldCss from \"./generated/themes/TextField.css.js\";\n\ntype AccInfo = {\n  ariaInvalid?: string;\n  ariaDescribedBy?: string;\n  ariaLabelledBy?: string;\n  ariaLabel?: string;\n  ariaHasPopup?: string,\n}\n\n/**\n * @class\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-text-field\n * @public\n */\n@customElement({\n  tag: \"udex-text-field\",\n  renderer: litRender,\n  styles: TextFieldCss,\n  template: TextFieldTemplate,\n  dependencies: [UDExControlButton, Icon, UDExStatusMessage],\n})\n\n/**\n   * Fired when the value of the component changes at each keystroke.\n   *\n   * @public\n   */\n@event(\"input\")\n/**\n   * Fired when the input operation has finished by pressing Enter or on focusout.\n   *\n   * @public\n   */\n@event(\"change\")\n/**\n * Fired event when the user clicks the icon.\n *\n * @private\n */\n@event(\"click-icon\")\nclass UDExTextField extends UI5Element {\n  _labelActiveClassName = \"udex-text-field__label_active\";\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 the value of the component.\n   * <br><br>\n   * <b>Note:</b> The property is updated upon typing.\n   *\n   * @default \"\"\n   * @formEvents input\n   * @formProperty\n   * @public\n   */\n  @property({ type: String })\n    value!: string;\n\n  /**\n   * Sets the maximum number of characters available in the input field.\n   * <br><br>\n   * <b>Note:</b> This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.\n   *\n   * @public\n   */\n  @property({ validator: Integer })\n    maxlength?: number;\n\n  /**\n   * Defines label text for the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    label!: string;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default \"\"\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({ defaultValue: \"\" })\n    accessibleNameRef!: string;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleIconName!: string;\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  @property({ type: Boolean })\n    displayonly!: boolean;\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   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property({ type: ValueState, defaultValue: ValueState.Standard })\n    valueState!: `${ValueState}`;\n\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText!: string;\n\n  /**\n   * Defines the icon name in the text-field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    icon!: string;\n\n  /**\n   * Defines if the text-field is active\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    active!: boolean;\n\n  /**\n   * Defines the inner stored show password button tooltip.\n   *\n   * @default \"\"\n   * @private\n   */\n\n  @property({ type: String, defaultValue: \"\" })\n    showButtonTooltip!: string;\n\n  /**\n   * Defines the inner stored class of the label.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true, defaultValue: \"\" })\n    labelActiveClass!: string;\n\n  /**\n   * Defines the behaviour of autocomplete.\n   * @default \"off\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"off\" })\n    autocomplete!: string;\n\n  /**\n   * Defines the inner stored value of the readonly attribute of the input.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isInputReadonly!: boolean;\n\n  /**\n   * Defines the inner stored value of the classes of the label.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true, defaultValue: \"\" })\n    labelClasses!: string;\n\n  /**\n   * Defines the inner stored value of the classes of the label.\n   *\n   * @default \"text\"\n   * @private\n   */\n  @property({ type: String, defaultValue: \"text\" })\n    type!: string;\n\n  /**\n   * Defines direction of the input.\n   *\n   * @public\n   */\n  @property({ type: String, noAttribute: true })\n    direction?: string;\n\n  /**\n   * Defines the max value for the \"number\" type of the input.\n   */\n  @property({ validator: Float })\n    max?: number;\n\n  /**\n   * Defines the min value for the \"number\" type of the input.\n   */\n  @property({ validator: Float })\n    min?: number;\n\n  /**\n   * Defines the step for the \"number\" type of the input.\n   */\n  @property({ validator: Float })\n    step?: number;\n\n  /**\n   * Allows setting the aria-describedby property on the internal input node.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    ariaDescribedBy?: string;\n\n  /**\n   * Defines the aria-has-popup attribute of the input.\n   * @private\n   */\n  @property({ type: String })\n    _ariaHasPopup?: string;\n\n  /**\n   * Defines is it the touch of the input field (only for mobile devices).\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isTouched!: boolean;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExTextField.i18nBundle = await getI18nBundle(\"@sapudex/web-components\");\n  }\n\n  get valueStateTypeMappings(): Record<string, string> {\n    return {\n      \"Success\": UDExTextField.i18nBundle.getText(VALUE_STATE_SUCCESS),\n      \"Standard\": UDExTextField.i18nBundle.getText(VALUE_STATE_INFORMATION),\n      \"Error\": UDExTextField.i18nBundle.getText(VALUE_STATE_ERROR),\n      \"Warning\": UDExTextField.i18nBundle.getText(VALUE_STATE_WARNING),\n    };\n  }\n\n  get hasValueState(): boolean {\n    return this.valueState !== ValueState.Standard;\n  }\n\n  get valueStateText(): string | undefined {\n    return this.valueState !== ValueState.Standard ? this.valueStateTypeMappings[this.valueState] : undefined;\n  }\n\n  get readOnlyStateText(): string {\n    return UDExTextField.i18nBundle.getText(READ_ONLY);\n  }\n\n  get ariaDescribedById(): string {\n    return `${this.supportingTextId} ${this.valueStateTextId} ${this.readOnlyStateTextId}`.trim();\n  }\n\n  get supportingTextId(): string {\n    return this.supportingText ? `${this._id}-supportingTextDesc` : \"\";\n  }\n\n  get valueStateTextId(): string {\n    return this.hasValueState ? `${this._id}-valueStateDesc` : \"\";\n  }\n\n  get readOnlyStateTextId(): string {\n    return this.readonly ? `${this._id}-stateReadOnlyDesc` : \"\";\n  }\n\n  get accInfo(): AccInfo {\n    return {\n      \"ariaInvalid\": this.valueState === ValueState.Error ? \"true\" : undefined,\n      \"ariaDescribedBy\": this.ariaDescribedBy ? this.ariaDescribedBy : this.ariaDescribedById || undefined,\n      \"ariaLabelledBy\": this.accessibleNameRef || undefined,\n      \"ariaLabel\": this.accessibleName || undefined,\n      \"ariaHasPopup\": this._ariaHasPopup || undefined,\n    };\n  }\n\n  get inputRole(): string | undefined {\n    return this.isAutoCompleteDisabled ? \"presentation\" : undefined;\n  }\n\n  get isAutoCompleteDisabled(): boolean {\n    return this.autocomplete === \"off\" || this.autocomplete === \"new-password\";\n  }\n\n  handleKeydown(e: KeyboardEvent): void {\n    e.stopPropagation();\n    this.fireEvent<KeyboardEvent>(\"keydown\", e);\n  }\n\n  handleChange = (): void => {\n    this.fireEvent(\"change\");\n  };\n\n  handleInput = (inputEvent: InputEvent) => {\n    this.value = (inputEvent.target as HTMLInputElement)?.value;\n  };\n\n  handleClick = (): void => {\n    if (!isDesktop()) {\n      this._isTouched = true;\n    }\n  };\n\n  handleFocus = (): void => {\n    if (!this.disabled && !this.readonly && !this.displayonly) {\n      this.labelActiveClass = this._labelActiveClassName;\n      this.active = true;\n    }\n  };\n\n  handleBlur = (): void => {\n    this.active = false;\n\n    if (this.value) {\n      this.labelActiveClass = this._labelActiveClassName;\n    } else {\n      this.labelActiveClass = \"\";\n    }\n    this._isTouched = false;\n  };\n\n  handleIconClick(): void {\n    this.fireEvent(\"click-icon\");\n  }\n\n  onBeforeRendering(): void {\n    if ((this.value || this.active) && this.labelActiveClass === \"\") {\n      this.labelActiveClass = this._labelActiveClassName;\n    } else if (!this.active && !this.value && this.labelActiveClass.length) {\n      this.labelActiveClass = \"\";\n    }\n\n    this.isInputReadonly = this.readonly || this.displayonly;\n\n    this.labelClasses = `udex-text-field__label ${this.labelActiveClass}`;\n  }\n\n  onAfterRendering(): void {\n    const directionStyles: string = window\n      .getComputedStyle(this)\n      .getPropertyValue(\"direction\");\n\n    if (!directionStyles) {\n      this.direction = \"ltr\";\n    } else {\n      this.direction = directionStyles;\n    }\n  }\n\n  get readonlyNotDisabled(): boolean {\n    return this.isInputReadonly && !this.disabled;\n  }\n}\n\nUDExTextField.define();\n\nexport default UDExTextField;\n"]}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../src/TextField.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  VALUE_STATE_SUCCESS,\n  VALUE_STATE_INFORMATION,\n  VALUE_STATE_WARNING,\n  VALUE_STATE_ERROR,\n  READ_ONLY,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport UDExControlButton from \"./ControlButton.js\";\nimport ValueState from \"./types/common.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\n\n// Template\nimport TextFieldTemplate from \"./generated/templates/TextFieldTemplate.lit.js\";\n\n// Styles\nimport TextFieldCss from \"./generated/themes/TextField.css.js\";\n\ntype AccInfo = {\n  ariaInvalid?: string;\n  ariaDescribedBy?: string;\n  ariaLabelledBy?: string;\n  ariaLabel?: string;\n  ariaHasPopup?: string,\n}\n\nexport type UDExTextFieldKeydownEventDetail = {\n  keyboardEvent: KeyboardEvent;\n}\n\n/**\n * @class\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-text-field\n * @public\n */\n@customElement({\n  tag: \"udex-text-field\",\n  renderer: litRender,\n  styles: TextFieldCss,\n  template: TextFieldTemplate,\n  dependencies: [UDExControlButton, Icon, UDExStatusMessage],\n})\n\n/**\n   * Fired when the value of the component changes at each keystroke.\n   *\n   * @public\n   */\n@event(\"input\", { bubbles: true })\n/**\n   * Fired when the input operation has finished by pressing Enter or on focusout.\n   *\n   * @public\n   */\n@event(\"change\", { bubbles: true })\n/**\n * Fired event when the user clicks the icon.\n *\n * @private\n */\n@event(\"click-icon\", { bubbles: true })\n\n/**\n * Fired event when the key is pressed in the input.\n *\n * @private\n */\n@event(\"keydown\", { bubbles: true })\nclass UDExTextField extends UI5Element {\n  eventDetails!: {\n    \"keydown\": UDExTextFieldKeydownEventDetail,\n    \"input\": void,\n    \"change\": void,\n    \"click-icon\": void,\n  };\n  _labelActiveClassName = \"udex-text-field__label_active\";\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 the value of the component.\n   * <br><br>\n   * <b>Note:</b> The property is updated upon typing.\n   *\n   * @default \"\"\n   * @formEvents input\n   * @formProperty\n   * @public\n   */\n  @property({ type: String })\n    value: string = \"\";\n\n  /**\n   * Sets the maximum number of characters available in the input field.\n   * <br><br>\n   * <b>Note:</b> This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.\n   *\n   * @public\n   */\n  @property({ type: Number })\n    maxlength?: number;\n\n  /**\n   * Defines label text for the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    label!: string;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default \"\"\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 the accessible ARIA name of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleIconName: string = \"\";\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  @property({ type: Boolean })\n    displayonly!: boolean;\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   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property()\n    valueState: `${ValueState}` = ValueState.Standard;\n\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText!: string;\n\n  /**\n   * Defines the icon name in the text-field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    icon!: string;\n\n  /**\n   * Defines if the text-field is active\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    active!: boolean;\n\n  /**\n   * Defines the inner stored show password button tooltip.\n   *\n   * @default \"\"\n   * @private\n   */\n\n  @property({ type: String })\n    showButtonTooltip: string = \"\";\n\n  /**\n   * Defines the inner stored class of the label.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    labelActiveClass: string = \"\";\n\n  /**\n   * Defines the inner stored value of the readonly attribute of the input.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isInputReadonly!: boolean;\n\n  /**\n   * Defines the inner stored value of the classes of the label.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    labelClasses: string = \"\";\n\n  /**\n   * Defines the inner stored value of the classes of the label.\n   *\n   * @default \"text\"\n   * @private\n   */\n  @property({ type: String })\n    type: \"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\" = \"Text\";\n\n  /**\n   * Defines direction of the input.\n   *\n   * @public\n   */\n  @property({ type: String, noAttribute: true })\n    direction?: string;\n\n  /**\n   * Defines the max value for the \"number\" type of the input.\n   */\n  @property({ type: Number })\n    max?: number;\n\n  /**\n   * Defines the min value for the \"number\" type of the input.\n   */\n  @property({ type: Number })\n    min?: number;\n\n  /**\n   * Defines the step for the \"number\" type of the input.\n   * @default undefined\n   */\n  @property({ type: Number })\n    step?: number;\n\n  /**\n   * Allows setting the aria-describedby property on the internal input node.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    ariaDescribedBy?: string;\n\n  /**\n   * Defines the aria-has-popup attribute of the input.\n   * @private\n   */\n  @property({ type: String })\n    _ariaHasPopup?: string;\n\n  /**\n   * Defines is it the touch of the input field (only for mobile devices).\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isTouched!: boolean;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  get valueStateTypeMappings(): Record<string, string> {\n    return {\n      \"Success\": UDExTextField.i18nBundle.getText(VALUE_STATE_SUCCESS),\n      \"Standard\": UDExTextField.i18nBundle.getText(VALUE_STATE_INFORMATION),\n      \"Error\": UDExTextField.i18nBundle.getText(VALUE_STATE_ERROR),\n      \"Warning\": UDExTextField.i18nBundle.getText(VALUE_STATE_WARNING),\n    };\n  }\n\n  get hasValueState(): boolean {\n    return this.valueState !== ValueState.Standard;\n  }\n\n  get valueStateText(): string | undefined {\n    return this.valueState !== ValueState.Standard ? this.valueStateTypeMappings[this.valueState] : undefined;\n  }\n\n  get readOnlyStateText(): string {\n    return UDExTextField.i18nBundle.getText(READ_ONLY);\n  }\n\n  get ariaDescribedById(): string {\n    return `${this.supportingTextId} ${this.valueStateTextId} ${this.readOnlyStateTextId}`.trim();\n  }\n\n  get supportingTextId(): string {\n    return this.supportingText ? `${this._id}-supportingTextDesc` : \"\";\n  }\n\n  get valueStateTextId(): string {\n    return this.hasValueState ? `${this._id}-valueStateDesc` : \"\";\n  }\n\n  get readOnlyStateTextId(): string {\n    return this.readonly ? `${this._id}-stateReadOnlyDesc` : \"\";\n  }\n\n  get accInfo(): AccInfo {\n    return {\n      \"ariaInvalid\": this.valueState === ValueState.Error ? \"true\" : undefined,\n      \"ariaDescribedBy\": this.ariaDescribedBy ? this.ariaDescribedBy : this.ariaDescribedById || undefined,\n      \"ariaLabelledBy\": this.accessibleNameRef || undefined,\n      \"ariaLabel\": this.accessibleName || undefined,\n      \"ariaHasPopup\": this._ariaHasPopup || undefined,\n    };\n  }\n\n  handleKeydown(e: KeyboardEvent): void {\n    e.stopPropagation();\n    this.fireDecoratorEvent(\"keydown\", { keyboardEvent: e });\n  }\n\n  handleChange = (): void => {\n    this.fireDecoratorEvent(\"change\");\n  };\n\n  handleInput = (inputEvent: InputEvent) => {\n    this.value = (inputEvent.target as HTMLInputElement)?.value;\n  };\n\n  handleClick = (): void => {\n    if (!isDesktop()) {\n      this._isTouched = true;\n    }\n  };\n\n  handleFocus = (): void => {\n    if (!this.disabled && !this.readonly && !this.displayonly) {\n      this.labelActiveClass = this._labelActiveClassName;\n      this.active = true;\n    }\n  };\n\n  handleBlur = (): void => {\n    this.active = false;\n\n    if (this.value) {\n      this.labelActiveClass = this._labelActiveClassName;\n    } else {\n      this.labelActiveClass = \"\";\n    }\n    this._isTouched = false;\n  };\n\n  handleIconClick(): void {\n    this.fireDecoratorEvent(\"click-icon\");\n  }\n\n  onBeforeRendering(): void {\n    if ((this.value || this.active) && this.labelActiveClass === \"\") {\n      this.labelActiveClass = this._labelActiveClassName;\n    } else if (!this.active && !this.value && this.labelActiveClass.length) {\n      this.labelActiveClass = \"\";\n    }\n\n    this.isInputReadonly = this.readonly || this.displayonly;\n\n    this.labelClasses = `udex-text-field__label ${this.labelActiveClass}`;\n  }\n\n  onAfterRendering(): void {\n    const directionStyles: string = window\n      .getComputedStyle(this)\n      .getPropertyValue(\"direction\");\n\n    if (!directionStyles) {\n      this.direction = \"ltr\";\n    } else {\n      this.direction = directionStyles;\n    }\n  }\n\n  get readonlyNotDisabled(): boolean {\n    return this.isInputReadonly && !this.disabled;\n  }\n}\n\nUDExTextField.define();\n\nexport default UDExTextField;\n"]}

package/dist/Tile.d.ts

@@ -1,4 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+type UDExTileClickEventDetail = {
+    originalEvent: PointerEvent;
+};
 /**
  * @class
  *
@@ -8,6 +11,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  * @public
  */
 declare class UDExTile extends UI5Element {
+    eventDetails: {
+        "click": UDExTileClickEventDetail;
+    };
     /**
      * Defines display the shadow for the Tile.
      *
@@ -69,6 +75,6 @@ declare class UDExTile extends UI5Element {
     default: Node;
     onEnterDOM(): void;
     _onkeydown(e: KeyboardEvent): void;
-    _onclick(e: Event): void;
+    _onclick(e: PointerEvent): void;
 }
 export default UDExTile;

package/dist/Tile.js

@@ -10,7 +10,7 @@ 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 { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import TileTemplate from "./generated/templates/TileTemplate.lit.js";
 // Styles
@@ -41,7 +41,7 @@ let UDExTile = class UDExTile extends UI5Element {
     _onclick(e) {
         e.stopImmediatePropagation();
         if (this.interactive) {
-            this.fireEvent("click", { originalEvent: e }, true);
+            this.fireDecoratorEvent("click", { originalEvent: e });
         }
     }
 };
@@ -75,11 +75,7 @@ UDExTile = __decorate([
      * @public
      */
     ,
-    event("click", {
-        detail: {
-            originalEvent: { type: Event },
-        },
-    })
+    event("click", { bubbles: true })
 ], UDExTile);
 UDExTile.define();
 export default UDExTile;

package/dist/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","sourceRoot":"","sources":["../src/Tile.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,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAC/D,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,OAAO,YAAY,MAAM,2CAA2C,CAAC;AAErE,SAAS;AACT,OAAO,OAAO,MAAM,gCAAgC,CAAC;AAIrD;;;;;;;GAOG;AAiBH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAuE/B,UAAU;QACR,IAAI,SAAS,EAAE,EAAE;YACf,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;SAClC;IACH,CAAC;IAED,UAAU,CAAC,CAAgB;QACzB,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;YACd,MAAM,SAAS,GAAe,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;YAE5E,IAAI,SAAS,EAAE;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,oBAAoB;gBACxC,SAAS,CAAC,KAAK,EAAE,CAAC;aACnB;SACF;IACH,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;CACF,CAAA;AAxFG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACL;AAUrB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACJ;AAYtB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACX;AAsBd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACT;AAUhB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACD;AAQJ;IAArB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;yCAAgB;AArEjC,QAAQ;IAhBb,aAAa,CAAC;QACb,GAAG,EAAE,WAAW;QAChB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,YAAY;KACvB,CAAC;IAEF;;;OAGG;;IACF,KAAK,CAAC,OAAO,EAAE;QACd,MAAM,EAAE;YACN,aAAa,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;SAC/B;KACF,CAAC;GACI,QAAQ,CA+Fb;AAED,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,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 { isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport TileTemplate from \"./generated/templates/TileTemplate.lit.js\";\n\n// Styles\nimport TileCss from \"./generated/themes/Tile.css.js\";\n\ntype AnchorNode = HTMLAnchorElement | undefined | null;\n\n/**\n * @class\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-tile\n * @public\n */\n@customElement({\n  tag: \"udex-tile\",\n  renderer: litRender,\n  styles: TileCss,\n  template: TileTemplate,\n})\n\n/**\n * Fires when the user clicks inside the component in interactive mode.\n * @public\n */\n@event(\"click\", {\n  detail: {\n    originalEvent: { type: Event },\n  },\n})\nclass UDExTile extends UI5Element {\n  /**\n   * Defines display the shadow for the Tile.\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    hideShadow!: boolean;\n\n  /**\n   * Defines if the component would be interactive,\n   * e.g. gets hover effect, gets focus outline and <code>click</code> event is fired, when pressed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    interactive!: boolean;\n\n  /**\n   * Defines the component href.\n   *\n   * <b>This property must only be used when the <code>interactive</code> property is set.</b>\n   *\n   * <br><br>\n   * <b>Note:</b> Standard hyperlink behavior is supported.\n   * @public\n   */\n  @property({ type: String })\n    href!: string;\n\n  /**\n   * Defines the component target.\n   * <br><br>\n   * <b>Notes:</b>\n   *\n   * <ul>\n   * <li><code>_self</code></li>\n   * <li><code>_top</code></li>\n   * <li><code>_blank</code></li>\n   * <li><code>_parent</code></li>\n   * <li><code>_search</code></li>\n   * </ul>\n   *\n   * <b>This property must only be used when the <code>interactive</code> property is set.</b>\n   *\n   * <br><br>\n   * <b>Note:</b> Standard hyperlink behavior is supported.\n   * @public\n   */\n  @property({ type: String })\n    target!: string;\n\n  /**\n   * Defines the component aria-label accessibility attribute.\n   *\n   * <b>This property must only be used when the <code>interactive</code> property is set.</b>\n   *\n   * @public\n   */\n  @property({ type: String })\n    accessibleName!: string;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node }) default!: Node;\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (isSpace(e)) {\n      const component: AnchorNode = this.shadowRoot?.querySelector(\"a.udex-tile\");\n\n      if (component) {\n        e.preventDefault(); // prevent scrolling\n        component.click();\n      }\n    }\n  }\n\n  _onclick(e: Event) {\n    e.stopImmediatePropagation();\n\n    if (this.interactive) {\n      this.fireEvent(\"click\", { originalEvent: e }, true);\n    }\n  }\n}\n\nUDExTile.define();\n\nexport default UDExTile;\n"]}
+{"version":3,"file":"Tile.js","sourceRoot":"","sources":["../src/Tile.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,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAC/D,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,OAAO,YAAY,MAAM,2CAA2C,CAAC;AAErE,SAAS;AACT,OAAO,OAAO,MAAM,gCAAgC,CAAC;AAOrD;;;;;;;GAOG;AAaH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IA0E/B,UAAU;QACR,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,UAAU,CAAC,CAAgB;QACzB,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACf,MAAM,SAAS,GAAe,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;YAE5E,IAAI,SAAS,EAAE,CAAC;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,oBAAoB;gBACxC,SAAS,CAAC,KAAK,EAAE,CAAC;YACpB,CAAC;QACH,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,CAAe;QACtB,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;QACzD,CAAC;IACH,CAAC;CACF,CAAA;AAxFG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACL;AAUrB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACJ;AAYtB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACX;AAsBd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACT;AAUhB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACD;AAQJ;IAArB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;yCAAgB;AAxEjC,QAAQ;IAZb,aAAa,CAAC;QACb,GAAG,EAAE,WAAW;QAChB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,YAAY;KACvB,CAAC;IAEF;;;OAGG;;IACF,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAC5B,QAAQ,CAkGb;AAED,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,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 { isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport TileTemplate from \"./generated/templates/TileTemplate.lit.js\";\n\n// Styles\nimport TileCss from \"./generated/themes/Tile.css.js\";\n\ntype AnchorNode = HTMLAnchorElement | undefined | null;\n\ntype UDExTileClickEventDetail = {\n  originalEvent: PointerEvent,\n}\n/**\n * @class\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-tile\n * @public\n */\n@customElement({\n  tag: \"udex-tile\",\n  renderer: litRender,\n  styles: TileCss,\n  template: TileTemplate,\n})\n\n/**\n * Fires when the user clicks inside the component in interactive mode.\n * @public\n */\n@event(\"click\", { bubbles: true })\nclass UDExTile extends UI5Element {\n  eventDetails!: {\n    \"click\": UDExTileClickEventDetail\n  };\n  /**\n   * Defines display the shadow for the Tile.\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    hideShadow!: boolean;\n\n  /**\n   * Defines if the component would be interactive,\n   * e.g. gets hover effect, gets focus outline and <code>click</code> event is fired, when pressed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    interactive!: boolean;\n\n  /**\n   * Defines the component href.\n   *\n   * <b>This property must only be used when the <code>interactive</code> property is set.</b>\n   *\n   * <br><br>\n   * <b>Note:</b> Standard hyperlink behavior is supported.\n   * @public\n   */\n  @property({ type: String })\n    href!: string;\n\n  /**\n   * Defines the component target.\n   * <br><br>\n   * <b>Notes:</b>\n   *\n   * <ul>\n   * <li><code>_self</code></li>\n   * <li><code>_top</code></li>\n   * <li><code>_blank</code></li>\n   * <li><code>_parent</code></li>\n   * <li><code>_search</code></li>\n   * </ul>\n   *\n   * <b>This property must only be used when the <code>interactive</code> property is set.</b>\n   *\n   * <br><br>\n   * <b>Note:</b> Standard hyperlink behavior is supported.\n   * @public\n   */\n  @property({ type: String })\n    target!: string;\n\n  /**\n   * Defines the component aria-label accessibility attribute.\n   *\n   * <b>This property must only be used when the <code>interactive</code> property is set.</b>\n   *\n   * @public\n   */\n  @property({ type: String })\n    accessibleName!: string;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node }) default!: Node;\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (isSpace(e)) {\n      const component: AnchorNode = this.shadowRoot?.querySelector(\"a.udex-tile\");\n\n      if (component) {\n        e.preventDefault(); // prevent scrolling\n        component.click();\n      }\n    }\n  }\n\n  _onclick(e: PointerEvent) {\n    e.stopImmediatePropagation();\n\n    if (this.interactive) {\n      this.fireDecoratorEvent(\"click\", { originalEvent: e });\n    }\n  }\n}\n\nUDExTile.define();\n\nexport default UDExTile;\n"]}

package/dist/Toast.d.ts

@@ -2,7 +2,9 @@ import Toast from "@ui5/webcomponents/dist/Toast.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
-export declare enum ToastValueState {
+import "@ui5/webcomponents-icons/dist/decline.js";
+import IconDesign from "@ui5/webcomponents/dist/types/IconDesign.js";
+export declare enum UDExToastValueState {
     Action = "Action",
     Success = "Success",
     Warning = "Warning",
@@ -32,7 +34,7 @@ declare class UDExToast extends Toast {
     * @public
     * @default "Action"
     */
-    valueState: `${ToastValueState}`;
+    valueState: `${UDExToastValueState}`;
     /**
     * Defines if close icon should be visible
     *
@@ -50,7 +52,7 @@ declare class UDExToast extends Toast {
     onEnterDOM(): void;
     get withIcon(): boolean;
     get iconName(): string;
-    get iconDesign(): string;
+    get iconDesign(): IconDesign;
     closeToast(): void;
 }
 export default UDExToast;

package/dist/Toast.js

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Toast from "@ui5/webcomponents/dist/Toast.js";
@@ -14,17 +13,19 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
 import UDExButton from "./Button.js";
+import IconDesign from "@ui5/webcomponents/dist/types/IconDesign.js";
 import ToastTemplate from "./generated/templates/ToastTemplate.lit.js";
 // Styles
 import ToastCss from "./generated/themes/Toast.css.js";
-export var ToastValueState;
-(function (ToastValueState) {
-    ToastValueState["Action"] = "Action";
-    ToastValueState["Success"] = "Success";
-    ToastValueState["Warning"] = "Warning";
-    ToastValueState["Error"] = "Error";
-})(ToastValueState || (ToastValueState = {}));
+export var UDExToastValueState;
+(function (UDExToastValueState) {
+    UDExToastValueState["Action"] = "Action";
+    UDExToastValueState["Success"] = "Success";
+    UDExToastValueState["Warning"] = "Warning";
+    UDExToastValueState["Error"] = "Error";
+})(UDExToastValueState || (UDExToastValueState = {}));
 /**
  * @class
  *
@@ -46,6 +47,13 @@ let UDExToast = class UDExToast extends Toast {
     constructor() {
         super(...arguments);
         /**
+        * Defines design state of component
+        *
+        * @public
+        * @default "Action"
+        */
+        this.valueState = UDExToastValueState.Action;
+        /**
         * Indicates whether the component is open (visible).
         * @default false
         * @public
@@ -54,20 +62,21 @@ let UDExToast = class UDExToast extends Toast {
         this.open = false;
     }
     onEnterDOM() {
+        super.onEnterDOM();
         if (isDesktop()) {
             this.setAttribute("desktop", "");
         }
     }
     get withIcon() {
-        return this.valueState !== ToastValueState.Action;
+        return this.valueState !== UDExToastValueState.Action;
     }
     get iconName() {
         switch (this.valueState) {
-            case ToastValueState.Success:
+            case UDExToastValueState.Success:
                 return "sys-enter-2";
-            case ToastValueState.Error:
+            case UDExToastValueState.Error:
                 return "error";
-            case ToastValueState.Warning:
+            case UDExToastValueState.Warning:
                 return "alert";
             default:
                 return "";
@@ -75,23 +84,23 @@ let UDExToast = class UDExToast extends Toast {
     }
     get iconDesign() {
         switch (this.valueState) {
-            case ToastValueState.Success:
-                return "Positive";
-            case ToastValueState.Error:
-                return "Negative";
-            case ToastValueState.Warning:
-                return "Critical";
+            case UDExToastValueState.Success:
+                return IconDesign.Positive;
+            case UDExToastValueState.Error:
+                return IconDesign.Negative;
+            case UDExToastValueState.Warning:
+                return IconDesign.Critical;
             default:
-                return "Default";
+                return IconDesign.Default;
         }
     }
     closeToast() {
         this.open = false;
-        this.fireEvent("close");
+        this.fireDecoratorEvent("close");
     }
 };
 __decorate([
-    property({ type: ToastValueState, defaultValue: ToastValueState.Action })
+    property()
 ], UDExToast.prototype, "valueState", void 0);
 __decorate([
     property()
@@ -107,13 +116,6 @@ UDExToast = __decorate([
         template: ToastTemplate,
         dependencies: [Icon, UDExButton],
     })
-    /**
-     * Emit when close icon was clicked
-     *
-     * @public
-     */
-    ,
-    event("close")
 ], UDExToast);
 UDExToast.define();
 export default UDExToast;

package/dist/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../src/Toast.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,8CAA8C,CAAC;AACtD,OAAO,wCAAwC,CAAC;AAChD,OAAO,wCAAwC,CAAC;AAChD,OAAO,UAAU,MAAM,aAAa,CAAC;AAErC,OAAO,aAAa,MAAM,4CAA4C,CAAC;AAEvE,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;IACzB,oCAAiB,CAAA;IACjB,sCAAmB,CAAA;IACnB,sCAAmB,CAAA;IACnB,kCAAe,CAAA;AACjB,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B;AAED;;;;;;;;;;;;;;;;GAgBG;AAeH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,KAAK;IAA7B;;QAmBE;;;;;UAKE;QAEA,SAAI,GAAG,KAAK,CAAC;IA0CjB,CAAC;IAxCC,UAAU;QACR,IAAI,SAAS,EAAE,EAAE;YACf,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;SAClC;IACH,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,UAAU,KAAK,eAAe,CAAC,MAAM,CAAC;IACpD,CAAC;IAED,IAAI,QAAQ;QACV,QAAQ,IAAI,CAAC,UAAU,EAAE;YACzB,KAAK,eAAe,CAAC,OAAO;gBAC1B,OAAO,aAAa,CAAC;YACvB,KAAK,eAAe,CAAC,KAAK;gBACxB,OAAO,OAAO,CAAC;YACjB,KAAK,eAAe,CAAC,OAAO;gBAC1B,OAAO,OAAO,CAAC;YACjB;gBACE,OAAO,EAAE,CAAC;SACX;IACH,CAAC;IAED,IAAI,UAAU;QACZ,QAAQ,IAAI,CAAC,UAAU,EAAE;YACzB,KAAK,eAAe,CAAC,OAAO;gBAC1B,OAAO,UAAU,CAAC;YACpB,KAAK,eAAe,CAAC,KAAK;gBACxB,OAAO,UAAU,CAAC;YACpB,KAAK,eAAe,CAAC,OAAO;gBAC1B,OAAO,UAAU,CAAC;YACpB;gBACE,OAAO,SAAS,CAAC;SAClB;IACH,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC;CACF,CAAA;AA5DG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe,CAAC,MAAM,EAAE,CAAC;6CACtC;AASlC;IADD,QAAQ,EAAE;gDACe;AASxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACb;AA1BX,SAAS;IAdd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC;QAChC,QAAQ,EAAE,aAAa;QACvB,YAAY,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC;KACjC,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,OAAO,CAAC;GACT,SAAS,CAoEd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Toast from \"@ui5/webcomponents/dist/Toast.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\nimport UDExButton from \"./Button.js\";\n\nimport ToastTemplate from \"./generated/templates/ToastTemplate.lit.js\";\n\n// Styles\nimport ToastCss from \"./generated/themes/Toast.css.js\";\n\nexport enum ToastValueState {\n  Action = \"Action\",\n  Success = \"Success\",\n  Warning = \"Warning\",\n  Error = \"Error\"\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-toast</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Toast.js\";</code>\n *\n * @constructor\n * @extends Toast\n * @public\n */\n@customElement({\n  tag: \"udex-toast\",\n  renderer: litRender,\n  styles: [Toast.styles, ToastCss],\n  template: ToastTemplate,\n  dependencies: [Icon, UDExButton],\n})\n\n/**\n * Emit when close icon was clicked\n *\n * @public\n */\n@event(\"close\")\nclass UDExToast extends Toast {\n  /**\n  * Defines design state of component\n  *\n  * @public\n  * @default \"Action\"\n  */\n  @property({ type: ToastValueState, defaultValue: ToastValueState.Action })\n    valueState!: `${ToastValueState}`;\n\n  /**\n  * Defines if close icon should be visible\n  *\n  * @public\n  * @default false\n  */\n  @property()\n    showCloseIcon!: boolean;\n\n  /**\n  * Indicates whether the component is open (visible).\n  * @default false\n  * @public\n  * @since 2.0.0\n  */\n  @property({ type: Boolean })\n    open = false;\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  get withIcon(): boolean {\n    return this.valueState !== ToastValueState.Action;\n  }\n\n  get iconName(): string {\n    switch (this.valueState) {\n    case ToastValueState.Success:\n      return \"sys-enter-2\";\n    case ToastValueState.Error:\n      return \"error\";\n    case ToastValueState.Warning:\n      return \"alert\";\n    default:\n      return \"\";\n    }\n  }\n\n  get iconDesign(): string {\n    switch (this.valueState) {\n    case ToastValueState.Success:\n      return \"Positive\";\n    case ToastValueState.Error:\n      return \"Negative\";\n    case ToastValueState.Warning:\n      return \"Critical\";\n    default:\n      return \"Default\";\n    }\n  }\n\n  closeToast() {\n    this.open = false;\n    this.fireEvent(\"close\");\n  }\n}\n\nUDExToast.define();\n\nexport default UDExToast;\n"]}
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../src/Toast.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Toast from \"@ui5/webcomponents/dist/Toast.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport UDExButton from \"./Button.js\";\nimport IconDesign from \"@ui5/webcomponents/dist/types/IconDesign.js\";\nimport ToastTemplate from \"./generated/templates/ToastTemplate.lit.js\";\n\n// Styles\nimport ToastCss from \"./generated/themes/Toast.css.js\";\n\nexport enum UDExToastValueState {\n  Action = \"Action\",\n  Success = \"Success\",\n  Warning = \"Warning\",\n  Error = \"Error\"\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-toast</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Toast.js\";</code>\n *\n * @constructor\n * @extends Toast\n * @public\n */\n@customElement({\n  tag: \"udex-toast\",\n  renderer: litRender,\n  styles: [Toast.styles, ToastCss],\n  template: ToastTemplate,\n  dependencies: [Icon, UDExButton],\n})\nclass UDExToast extends Toast {\n  /**\n  * Defines design state of component\n  *\n  * @public\n  * @default \"Action\"\n  */\n  @property()\n    valueState: `${UDExToastValueState}` = UDExToastValueState.Action;\n\n  /**\n  * Defines if close icon should be visible\n  *\n  * @public\n  * @default false\n  */\n  @property()\n    showCloseIcon!: boolean;\n\n  /**\n  * Indicates whether the component is open (visible).\n  * @default false\n  * @public\n  * @since 2.0.0\n  */\n  @property({ type: Boolean })\n    open = false;\n\n  onEnterDOM(): void {\n    super.onEnterDOM();\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  get withIcon(): boolean {\n    return this.valueState !== UDExToastValueState.Action;\n  }\n\n  get iconName(): string {\n    switch (this.valueState) {\n    case UDExToastValueState.Success:\n      return \"sys-enter-2\";\n    case UDExToastValueState.Error:\n      return \"error\";\n    case UDExToastValueState.Warning:\n      return \"alert\";\n    default:\n      return \"\";\n    }\n  }\n\n  get iconDesign(): IconDesign {\n    switch (this.valueState) {\n    case UDExToastValueState.Success:\n      return IconDesign.Positive;\n    case UDExToastValueState.Error:\n      return IconDesign.Negative;\n    case UDExToastValueState.Warning:\n      return IconDesign.Critical;\n    default:\n      return IconDesign.Default;\n    }\n  }\n\n  closeToast() {\n    this.open = false;\n    this.fireDecoratorEvent(\"close\");\n  }\n}\n\nUDExToast.define();\n\nexport default UDExToast;\n"]}

package/dist/Tooltip.d.ts

@@ -1,14 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import Popover from "@ui5/webcomponents/dist/Popover.js";
-import PopoverVerticalAlign from "@ui5/webcomponents/dist/types/PopoverVerticalAlign.js";
-import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
-export declare enum PlacementType {
-    Left = "Left",
-    Right = "Right",
-    Top = "Top",
-    Bottom = "Bottom"
-}
+import { HorizontalAlign, Placement, VerticalAlign } from "./types/Dropdown.js";
 /**
  * @class
  *
@@ -52,22 +44,23 @@ declare class UDExTooltip extends UI5Element {
     /**
      * Determines on which side of the component the Tooltip is displayed.
      *
-     * @default "Right"
+     * @default "End"
      * @public
      */
-    placement: `${PlacementType}`;
+    placement: `${Placement}`;
     /**
      * Determines the horizontal alignment of the component.
      * @default "Center"
      * @public
      */
-    horizontalAlign: `${PopoverHorizontalAlign}`;
+    horizontalAlign: `${HorizontalAlign}`;
     /**
      * Determines the vertical alignment of the component.
      * @default "Center"
      * @public
      */
-    verticalAlign: `${PopoverVerticalAlign}`;
+    verticalAlign: `${VerticalAlign}`;
+    opener: HTMLElement | string;
     /**
      * Defines the accessible name of the component.
      * @default undefined
@@ -86,21 +79,20 @@ declare class UDExTooltip extends UI5Element {
      * @public
      */
     accessibleRole: `${PopupAccessibleRole}`;
-    getPopover(): Popover;
-    /** Returns whether the tooltip is currently open.
+    /**
+     * Defines if the tooltip is open.
      * @public
      */
-    isOpen(): boolean;
+    open: boolean;
     /**
-     * Used to open tooltip
-     * @param opener element at which the popover is shown
+     * Defines if the initial focus should be prevented.
      * @public
      */
-    onOpen(opener: HTMLElement): void;
+    preventInitialFocus: boolean;
     /**
-     * Used to close tooltip
+     * Defines if the focus should be returned to the previously focused element.
      * @public
      */
-    onClose(): void;
+    preventFocusRestore: boolean;
 }
 export default UDExTooltip;

package/dist/Tooltip.js

@@ -10,20 +10,12 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
-import PopoverVerticalAlign from "@ui5/webcomponents/dist/types/PopoverVerticalAlign.js";
-import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
+import { HorizontalAlign, Placement, VerticalAlign } from "./types/Dropdown.js";
 // Template
 import TooltipTemplate from "./generated/templates/TooltipTemplate.lit.js";
 // Styles
-import TooltipCss from "./generated/themes/Tooltip.css";
-export var PlacementType;
-(function (PlacementType) {
-    PlacementType["Left"] = "Left";
-    PlacementType["Right"] = "Right";
-    PlacementType["Top"] = "Top";
-    PlacementType["Bottom"] = "Bottom";
-})(PlacementType || (PlacementType = {}));
+import TooltipCss from "./generated/themes/Tooltip.css.js";
 /**
  * @class
  *
@@ -43,61 +35,87 @@ export var PlacementType;
  * @public
  */
 let UDExTooltip = class UDExTooltip extends UI5Element {
-    getPopover() {
-        return this.shadowRoot.querySelector("[ui5-popover]");
-    }
-    /** Returns whether the tooltip is currently open.
-     * @public
-     */
-    isOpen() {
-        const popover = this.getPopover();
-        return popover.isOpen();
-    }
-    /**
-     * Used to open tooltip
-     * @param opener element at which the popover is shown
-     * @public
-     */
-    onOpen(opener) {
-        const popover = this.getPopover();
-        popover.showAt(opener);
-    }
-    /**
-     * Used to close tooltip
-     * @public
-     */
-    onClose() {
-        const popover = this.getPopover();
-        popover.close(true);
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the Tooltip title.
+         *
+         * @default ""
+         * @public
+         */
+        this.title = "";
+        /**
+         * Determines on which side of the component the Tooltip is displayed.
+         *
+         * @default "End"
+         * @public
+         */
+        this.placement = Placement.End;
+        /**
+         * Determines the horizontal alignment of the component.
+         * @default "Center"
+         * @public
+         */
+        this.horizontalAlign = HorizontalAlign.Center;
+        /**
+         * Determines the vertical alignment of the component.
+         * @default "Center"
+         * @public
+         */
+        this.verticalAlign = VerticalAlign.Center;
+        /**
+         * Defines the IDs of the elements that label the component.
+         * @default ""
+         * @public
+         */
+        this.accessibleNameRef = "";
+        /**
+         * Allows setting a custom role.
+         * @default "Dialog"
+         * @public
+         */
+        this.accessibleRole = PopupAccessibleRole.Dialog;
     }
 };
 __decorate([
     slot({ type: Node })
 ], UDExTooltip.prototype, "default", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExTooltip.prototype, "title", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExTooltip.prototype, "hideArrow", void 0);
 __decorate([
-    property({ type: PlacementType, defaultValue: PlacementType.Right })
+    property()
 ], UDExTooltip.prototype, "placement", void 0);
 __decorate([
-    property({ type: PopoverHorizontalAlign, defaultValue: PopoverHorizontalAlign.Center })
+    property()
 ], UDExTooltip.prototype, "horizontalAlign", void 0);
 __decorate([
-    property({ type: PopoverVerticalAlign, defaultValue: PopoverVerticalAlign.Center })
+    property()
 ], UDExTooltip.prototype, "verticalAlign", void 0);
 __decorate([
-    property({ defaultValue: undefined })
+    property()
+], UDExTooltip.prototype, "opener", void 0);
+__decorate([
+    property()
 ], UDExTooltip.prototype, "accessibleName", void 0);
 __decorate([
-    property({ defaultValue: "" })
+    property()
 ], UDExTooltip.prototype, "accessibleNameRef", void 0);
 __decorate([
-    property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.Dialog })
+    property()
 ], UDExTooltip.prototype, "accessibleRole", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTooltip.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTooltip.prototype, "preventInitialFocus", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTooltip.prototype, "preventFocusRestore", void 0);
 UDExTooltip = __decorate([
     customElement({
         tag: "udex-tooltip",

package/dist/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,OAAO,MAAM,oCAAoC,CAAC;AACzD,OAAO,oBAAoB,MAAM,uDAAuD,CAAC;AACzF,OAAO,sBAAsB,MAAM,yDAAyD,CAAC;AAC7F,OAAO,mBAAmB,MAAM,sDAAsD,CAAC;AAEvF,WAAW;AACX,OAAO,eAAe,MAAM,8CAA8C,CAAC;AAE3E,SAAS;AACT,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAExD,MAAM,CAAN,IAAY,aAKX;AALD,WAAY,aAAa;IACvB,8BAAa,CAAA;IACb,gCAAe,CAAA;IACf,4BAAW,CAAA;IACX,kCAAiB,CAAA;AACnB,CAAC,EALW,aAAa,KAAb,aAAa,QAKxB;AAED;;;;;;;;;;;;;;;;;GAiBG;AAQH,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IA0ElC,UAAU;QACR,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CACnC,eAAe,CACf,CAAC;IACL,CAAC;IAED;;OAEG;IACH,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAClC,OAAO,OAAO,CAAC,MAAM,EAAE,CAAC;IAC1B,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,MAAmB;QACxB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAClC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,OAAO;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAClC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC;CACF,CAAA;AAnGuB;IAArB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;4CAAgB;AAQS;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;0CAAgB;AAS3D;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACN;AASpB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,CAAC,KAAK,EAAE,CAAC;8CACpC;AAO/B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,sBAAsB,EAAE,YAAY,EAAE,sBAAsB,CAAC,MAAM,EAAE,CAAC;oDACxC;AAQ9C;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,oBAAoB,EAAE,YAAY,EAAE,oBAAoB,CAAC,MAAM,EAAE,CAAC;kDACxC;AAQ1C;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;mDACZ;AAQxB;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;sDACF;AAQ3B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,CAAC;mDACtC;AAxExC,WAAW;IAPhB,aAAa,CAAC;QACb,GAAG,EAAE,cAAc;QACnB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,eAAe;QACzB,YAAY,EAAE,CAAC,OAAO,CAAC;KACxB,CAAC;GACI,WAAW,CA0GhB;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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport PopoverVerticalAlign from \"@ui5/webcomponents/dist/types/PopoverVerticalAlign.js\";\nimport PopoverHorizontalAlign from \"@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js\";\nimport PopupAccessibleRole from \"@ui5/webcomponents/dist/types/PopupAccessibleRole.js\";\n\n// Template\nimport TooltipTemplate from \"./generated/templates/TooltipTemplate.lit.js\";\n\n// Styles\nimport TooltipCss from \"./generated/themes/Tooltip.css\";\n\nexport enum PlacementType {\n  Left = \"Left\",\n  Right = \"Right\",\n  Top = \"Top\",\n  Bottom = \"Bottom\",\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-tooltip</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Tooltip.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-tooltip\n * @public\n */\n@customElement({\n  tag: \"udex-tooltip\",\n  renderer: litRender,\n  styles: TooltipCss,\n  template: TooltipTemplate,\n  dependencies: [Popover],\n})\nclass UDExTooltip extends UI5Element {\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node }) default!: Node;\n\n  /**\n   * Defines the Tooltip title.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" }) title!: string;\n\n  /**\n   * Defines if Tooltip has an arrow or not.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    hideArrow!: boolean;\n\n  /**\n   * Determines on which side of the component the Tooltip is displayed.\n   *\n   * @default \"Right\"\n   * @public\n   */\n  @property({ type: PlacementType, defaultValue: PlacementType.Right })\n    placement!: `${PlacementType}`;\n  /**\n   * Determines the horizontal alignment of the component.\n   * @default \"Center\"\n   * @public\n   */\n  @property({ type: PopoverHorizontalAlign, defaultValue: PopoverHorizontalAlign.Center })\n    horizontalAlign!: `${PopoverHorizontalAlign}`;\n\n  /**\n   * Determines the vertical alignment of the component.\n   * @default \"Center\"\n   * @public\n   */\n  @property({ type: PopoverVerticalAlign, defaultValue: PopoverVerticalAlign.Center })\n    verticalAlign!: `${PopoverVerticalAlign}`;\n\n  /**\n   * Defines the accessible name of the component.\n   * @default undefined\n   * @public\n   */\n  @property({ defaultValue: undefined })\n    accessibleName?: string;\n\n  /**\n   * Defines the IDs of the elements that label the component.\n   * @default \"\"\n   * @public\n   */\n  @property({ defaultValue: \"\" })\n    accessibleNameRef!: string;\n\n  /**\n   * Allows setting a custom role.\n   * @default \"Dialog\"\n   * @public\n   */\n  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.Dialog })\n    accessibleRole!: `${PopupAccessibleRole}`;\n\n  getPopover() {\n    return this.shadowRoot!.querySelector<Popover>(\n      \"[ui5-popover]\",\n    )!;\n  }\n\n  /** Returns whether the tooltip is currently open.\n   * @public\n   */\n  isOpen(): boolean {\n    const popover = this.getPopover();\n    return popover.isOpen();\n  }\n\n  /**\n   * Used to open tooltip\n   * @param opener element at which the popover is shown\n   * @public\n   */\n  onOpen(opener: HTMLElement): void {\n    const popover = this.getPopover();\n    popover.showAt(opener);\n  }\n\n  /**\n   * Used to close tooltip\n   * @public\n   */\n  onClose(): void {\n    const popover = this.getPopover();\n    popover.close(true);\n  }\n}\n\nUDExTooltip.define();\n\nexport default UDExTooltip;\n"]}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,OAAO,MAAM,oCAAoC,CAAC;AACzD,OAAO,mBAAmB,MAAM,sDAAsD,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEhF,WAAW;AACX,OAAO,eAAe,MAAM,8CAA8C,CAAC;AAE3E,SAAS;AACT,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAE3D;;;;;;;;;;;;;;;;;GAiBG;AAQH,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QASE;;;;;WAKG;QAED,UAAK,GAAW,EAAE,CAAC;QAWrB;;;;;WAKG;QAED,cAAS,GAAmB,SAAS,CAAC,GAAG,CAAC;QAC5C;;;;WAIG;QAED,oBAAe,GAAyB,eAAe,CAAC,MAAM,CAAC;QAEjE;;;;WAIG;QAED,kBAAa,GAAuB,aAAa,CAAC,MAAM,CAAC;QAa3D;;;;WAIG;QAED,sBAAiB,GAAW,EAAE,CAAC;QAEjC;;;;WAIG;QAED,mBAAc,GAA6B,mBAAmB,CAAC,MAAM,CAAC;IAsB1E,CAAC;CAAA,CAAA;AA3FuB;IAArB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;4CAAgB;AASnC;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACN;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACN;AASpB;IADD,QAAQ,EAAE;8CACiC;AAO1C;IADD,QAAQ,EAAE;oDACsD;AAQ/D;IADD,QAAQ,EAAE;kDACgD;AAGzD;IADD,QAAQ,EAAE;2CACqB;AAQ9B;IADD,QAAQ,EAAE;mDACe;AAQxB;IADD,QAAQ,EAAE;sDACsB;AAQ/B;IADD,QAAQ,EAAE;mDAC6D;AAOtE;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAOd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACI;AAO/B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACI;AAjG5B,WAAW;IAPhB,aAAa,CAAC;QACb,GAAG,EAAE,cAAc;QACnB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,eAAe;QACzB,YAAY,EAAE,CAAC,OAAO,CAAC;KACxB,CAAC;GACI,WAAW,CAkGhB;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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport PopupAccessibleRole from \"@ui5/webcomponents/dist/types/PopupAccessibleRole.js\";\nimport { HorizontalAlign, Placement, VerticalAlign } from \"./types/Dropdown.js\";\n\n// Template\nimport TooltipTemplate from \"./generated/templates/TooltipTemplate.lit.js\";\n\n// Styles\nimport TooltipCss from \"./generated/themes/Tooltip.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-tooltip</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Tooltip.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-tooltip\n * @public\n */\n@customElement({\n  tag: \"udex-tooltip\",\n  renderer: litRender,\n  styles: TooltipCss,\n  template: TooltipTemplate,\n  dependencies: [Popover],\n})\nclass UDExTooltip extends UI5Element {\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node }) default!: Node;\n\n  /**\n   * Defines the Tooltip title.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    title: string = \"\";\n\n  /**\n   * Defines if Tooltip has an arrow or not.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    hideArrow!: boolean;\n\n  /**\n   * Determines on which side of the component the Tooltip is displayed.\n   *\n   * @default \"End\"\n   * @public\n   */\n  @property()\n    placement: `${Placement}` = Placement.End;\n  /**\n   * Determines the horizontal alignment of the component.\n   * @default \"Center\"\n   * @public\n   */\n  @property()\n    horizontalAlign: `${HorizontalAlign}` = HorizontalAlign.Center;\n\n  /**\n   * Determines the vertical alignment of the component.\n   * @default \"Center\"\n   * @public\n   */\n  @property()\n    verticalAlign: `${VerticalAlign}` = VerticalAlign.Center;\n\n  @property()\n    opener!: HTMLElement | string;\n\n  /**\n   * Defines the accessible name of the component.\n   * @default undefined\n   * @public\n   */\n  @property()\n    accessibleName?: string;\n\n  /**\n   * Defines the IDs of the elements that label the component.\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleNameRef: string = \"\";\n\n  /**\n   * Allows setting a custom role.\n   * @default \"Dialog\"\n   * @public\n   */\n  @property()\n    accessibleRole: `${PopupAccessibleRole}` = PopupAccessibleRole.Dialog;\n\n  /**\n   * Defines if the tooltip is open.\n   * @public\n   */\n  @property({ type: Boolean })\n    open!: boolean;\n\n  /**\n   * Defines if the initial focus should be prevented.\n   * @public\n   */\n   @property({ type: Boolean })\n     preventInitialFocus!: boolean;\n\n  /**\n   * Defines if the focus should be returned to the previously focused element.\n   * @public\n   */\n  @property({ type: Boolean })\n    preventFocusRestore!: boolean;\n}\n\nUDExTooltip.define();\n\nexport default UDExTooltip;\n"]}