@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/{Badge.d.ts → Tag.d.ts}

@@ -1,51 +1,48 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type { IIcon } from "./Interfaces.js";
+import type { IIcon } from "./Icon.js";
 import "@ui5/webcomponents-icons/dist/sys-help-2.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/information.js";
 import WrappingType from "./types/WrappingType.js";
-import BadgeDesign from "./types/BadgeDesign.js";
+import TagDesign from "./types/TagDesign.js";
+import TagSize from "./types/TagSize.js";
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-badge</code> is a component which serves
+ * The `ui5-tag` is a component which serves
  * the purpose to attract the user attention to some piece
  * of information (state, quantity, condition, etc.).
  * It can contain icon and text information, and its design can be chosen from specific design types.
  *
- * <h3>Usage Guidelines</h3>
- * <ul>
- * <li>If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the <code>wrappingType</code> property.</li>
-  * <li>Colors can be semantic or not semantic.</li>
- * </ul>
+ * ### Usage Guidelines
  *
- * <h3>ES6 Module Import</h3>
+ * - If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.
+  * - Colors can be semantic or not semantic.
  *
- * <code>import "@ui5/webcomponents/dist/Badge";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Tag.js";`
  * @constructor
  * @extends UI5Element
- * @since 0.12.0
+ * @since 2.0.0
  * @public
  */
-declare class Badge extends UI5Element {
+declare class Tag extends UI5Element {
     /**
      * Defines the design type of the component.
-     * @default "Set3"
+     * @default "Neutral"
      * @public
-     * @since 1.20
+     * @since 1.22.0
      */
-    design: `${BadgeDesign}`;
+    design: `${TagDesign}`;
     /**
      * Defines the color scheme of the component.
      * There are 10 predefined schemes.
-     * To use one you can set a number from <code>"1"</code> to <code>"10"</code>. The <code>colorScheme</code> <code>"1"</code> will be set by default.
-     * <br><br>
-     * <b>Note:</b> Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.
+     * To use one you can set a number from `"1"` to `"10"`. The `colorScheme` `"1"` will be set by default.
      * @default "1"
      * @public
      */
@@ -54,58 +51,66 @@ declare class Badge extends UI5Element {
      * Defines if the default state icon is shown.
      * @default false
      * @public
-     * @since 1.20
+     * @since 1.22.0
      */
     hideStateIcon: boolean;
     /**
      * Defines if the component is interactive (focusable and pressable).
-     * <br><b>Note:</b> The badge cannot be <code>interactive</code>
-     * when <code>design</code> property is <code>BadgeDesign.Set3</code>
+     *
+     * **Note:** The tag cannot be `interactive`
+     * when `design` property is `TagDesign.Set3`
      * @default false
      * @public
-     * @since 1.20
+     * @since 1.22.0
      */
     interactive: boolean;
     /**
      * Defines how the text of a component will be displayed when there is not enough space.
-     * <br><b>Note:</b> For option "Normal" the text will wrap and the
-     * words will not be broken based on hyphenation.
      *
+     * **Note:** For option "Normal" the text will wrap and the
+     * words will not be broken based on hyphenation.
      * @default "None"
      * @public
-     * @since 1.20
+     * @since 1.22.0
      */
     wrappingType: `${WrappingType}`;
     /**
-     * Defines if the badge has an icon.
+     * Defines predefined size of the component.
+     * @default "S"
+     * @public
+     * @since 2.0
+     */
+    size: `${TagSize}`;
+    /**
+     * Defines if the tag has an icon.
      * @private
      */
     _hasIcon: boolean;
     /**
-     * Defines if the badge has only an icon (and no text).
+     * Defines if the tag has only an icon (and no text).
      * @private
      */
     _iconOnly: boolean;
     /**
-     * Defines if the badge has "Tag" design type.
+     * Defines if the tag has "Tag" design type.
      * @private
      */
     _isTagDesign: boolean;
     /**
      * Defines the text of the component.
-     * <br><b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
      *
+     * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
      * @public
      */
     text: Array<Node>;
     /**
      * Defines the icon to be displayed in the component.
-     *
      * @public
      */
     icon: Array<IIcon>;
     static i18nBundle: I18nBundle;
     static onDefine(): Promise<void>;
+    onEnterDOM(): void;
     onBeforeRendering(): void;
     get _roleDescription(): string;
     get _valueState(): string | undefined;
@@ -113,8 +118,8 @@ declare class Badge extends UI5Element {
     get hasIcon(): boolean;
     get iconOnly(): boolean;
     get _title(): string | undefined;
-    get badgeDescription(): string | undefined;
+    get tagDescription(): string | undefined;
     get _semanticIconName(): "error" | "alert" | "sys-enter-2" | "information" | "sys-help-2" | null;
     _onclick(): void;
 }
-export default Badge;
+export default Tag;

package/dist/{Badge.js → Tag.js}

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var Badge_1;
+var Tag_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
@@ -13,6 +13,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
+import { isDesktop, } from "@ui5/webcomponents-base/dist/Device.js";
 import Icon from "./Icon.js";
 import "@ui5/webcomponents-icons/dist/sys-help-2.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
@@ -20,58 +21,62 @@ import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import WrappingType from "./types/WrappingType.js";
-import BadgeDesign from "./types/BadgeDesign.js";
+import TagDesign from "./types/TagDesign.js";
+import TagSize from "./types/TagSize.js";
 // Template
-import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
-import { BADGE_DESCRIPTION_BADGE, BADGE_DESCRIPTION_TAG, BADGE_ROLE_DESCRIPTION, BADGE_ERROR, BADGE_WARNING, BADGE_SUCCESS, BADGE_INFORMATION, } from "./generated/i18n/i18n-defaults.js";
+import TagTemplate from "./generated/templates/TagTemplate.lit.js";
+import { TAG_DESCRIPTION_BADGE, TAG_DESCRIPTION_TAG, TAG_ROLE_DESCRIPTION, TAG_ERROR, TAG_WARNING, TAG_SUCCESS, TAG_INFORMATION, } from "./generated/i18n/i18n-defaults.js";
 // Styles
-import badgeCss from "./generated/themes/Badge.css.js";
+import tagCss from "./generated/themes/Tag.css.js";
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-badge</code> is a component which serves
+ * The `ui5-tag` is a component which serves
  * the purpose to attract the user attention to some piece
  * of information (state, quantity, condition, etc.).
  * It can contain icon and text information, and its design can be chosen from specific design types.
  *
- * <h3>Usage Guidelines</h3>
- * <ul>
- * <li>If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the <code>wrappingType</code> property.</li>
-  * <li>Colors can be semantic or not semantic.</li>
- * </ul>
+ * ### Usage Guidelines
  *
- * <h3>ES6 Module Import</h3>
+ * - If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.
+  * - Colors can be semantic or not semantic.
  *
- * <code>import "@ui5/webcomponents/dist/Badge";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Tag.js";`
  * @constructor
  * @extends UI5Element
- * @since 0.12.0
+ * @since 2.0.0
  * @public
  */
-let Badge = Badge_1 = class Badge extends UI5Element {
+let Tag = Tag_1 = class Tag extends UI5Element {
     static async onDefine() {
-        Badge_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+        Tag_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
     }
     onBeforeRendering() {
         this._hasIcon = this.hasIcon || !!this._semanticIconName;
         this._iconOnly = this.iconOnly;
-        this._isTagDesign = this.design !== BadgeDesign.Set3;
+        this._isTagDesign = this.design !== TagDesign.Set3;
     }
     get _roleDescription() {
-        return Badge_1.i18nBundle.getText(BADGE_ROLE_DESCRIPTION);
+        return Tag_1.i18nBundle.getText(TAG_ROLE_DESCRIPTION);
     }
     get _valueState() {
         switch (this.design) {
-            case BadgeDesign.Positive:
-                return Badge_1.i18nBundle.getText(BADGE_SUCCESS);
-            case BadgeDesign.Negative:
-                return Badge_1.i18nBundle.getText(BADGE_ERROR);
-            case BadgeDesign.Critical:
-                return Badge_1.i18nBundle.getText(BADGE_WARNING);
-            case BadgeDesign.Information:
-                return Badge_1.i18nBundle.getText(BADGE_INFORMATION);
+            case TagDesign.Positive:
+                return Tag_1.i18nBundle.getText(TAG_SUCCESS);
+            case TagDesign.Negative:
+                return Tag_1.i18nBundle.getText(TAG_ERROR);
+            case TagDesign.Critical:
+                return Tag_1.i18nBundle.getText(TAG_WARNING);
+            case TagDesign.Information:
+                return Tag_1.i18nBundle.getText(TAG_INFORMATION);
         }
         return undefined;
     }
@@ -87,15 +92,15 @@ let Badge = Badge_1 = class Badge extends UI5Element {
     get _title() {
         return this.title || undefined;
     }
-    get badgeDescription() {
+    get tagDescription() {
         if (this.interactive) {
             return undefined;
         }
-        if (this.design === BadgeDesign.Set3) {
-            return Badge_1.i18nBundle.getText(BADGE_DESCRIPTION_BADGE);
+        if (this.design === TagDesign.Set3) {
+            return Tag_1.i18nBundle.getText(TAG_DESCRIPTION_BADGE);
         }
         const valueState = this._valueState;
-        let description = Badge_1.i18nBundle.getText(BADGE_DESCRIPTION_TAG);
+        let description = Tag_1.i18nBundle.getText(TAG_DESCRIPTION_TAG);
         if (valueState) {
             description = `${description} ${valueState}`;
         }
@@ -106,15 +111,15 @@ let Badge = Badge_1 = class Badge extends UI5Element {
             return null;
         }
         switch (this.design) {
-            case BadgeDesign.Neutral:
+            case TagDesign.Neutral:
                 return "sys-help-2";
-            case BadgeDesign.Positive:
+            case TagDesign.Positive:
                 return "sys-enter-2";
-            case BadgeDesign.Negative:
+            case TagDesign.Negative:
                 return "error";
-            case BadgeDesign.Critical:
+            case TagDesign.Critical:
                 return "alert";
-            case BadgeDesign.Information:
+            case TagDesign.Information:
                 return "information";
             default:
                 return null;
@@ -125,55 +130,59 @@ let Badge = Badge_1 = class Badge extends UI5Element {
     }
 };
 __decorate([
-    property({ defaultValue: BadgeDesign.Set3 })
-], Badge.prototype, "design", void 0);
+    property({ defaultValue: TagDesign.Neutral })
+], Tag.prototype, "design", void 0);
 __decorate([
     property({ defaultValue: "1" })
-], Badge.prototype, "colorScheme", void 0);
+], Tag.prototype, "colorScheme", void 0);
 __decorate([
     property({ type: Boolean })
-], Badge.prototype, "hideStateIcon", void 0);
+], Tag.prototype, "hideStateIcon", void 0);
 __decorate([
     property({ type: Boolean })
-], Badge.prototype, "interactive", void 0);
+], Tag.prototype, "interactive", void 0);
 __decorate([
     property({ type: WrappingType, defaultValue: WrappingType.None })
-], Badge.prototype, "wrappingType", void 0);
+], Tag.prototype, "wrappingType", void 0);
+__decorate([
+    property({ type: TagSize, defaultValue: TagSize.S })
+], Tag.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean })
-], Badge.prototype, "_hasIcon", void 0);
+], Tag.prototype, "_hasIcon", void 0);
 __decorate([
     property({ type: Boolean })
-], Badge.prototype, "_iconOnly", void 0);
+], Tag.prototype, "_iconOnly", void 0);
 __decorate([
     property({ type: Boolean })
-], Badge.prototype, "_isTagDesign", void 0);
+], Tag.prototype, "_isTagDesign", void 0);
 __decorate([
     slot({ type: Node, "default": true })
-], Badge.prototype, "text", void 0);
+], Tag.prototype, "text", void 0);
 __decorate([
     slot()
-], Badge.prototype, "icon", void 0);
-Badge = Badge_1 = __decorate([
+], Tag.prototype, "icon", void 0);
+Tag = Tag_1 = __decorate([
     customElement({
-        tag: "ui5-badge",
+        tag: "ui5-tag",
         languageAware: true,
         renderer: litRender,
-        template: BadgeTemplate,
-        styles: badgeCss,
+        template: TagTemplate,
+        styles: tagCss,
         dependencies: [
             Icon,
         ],
     })
     /**
-     * Fired when the user clicks on an interactive badge.
-     * <b>Note:</b> The event will be fired if the <code>interactive</code> property is <code>true</code>
+     * Fired when the user clicks on an interactive tag.
+     *
+     * **Note:** The event will be fired if the `interactive` property is `true`
      * @public
-     * @since 1.20
+     * @since 1.22.0
      */
     ,
     event("click")
-], Badge);
-Badge.define();
-export default Badge;
-//# sourceMappingURL=Badge.js.map
+], Tag);
+Tag.define();
+export default Tag;
+//# sourceMappingURL=Tag.js.map

package/dist/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../src/Tag.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.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 { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport willShowContent from \"@ui5/webcomponents-base/dist/util/willShowContent.js\";\nimport {\n\tisDesktop,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { IIcon } from \"./Icon.js\";\nimport Icon from \"./Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-help-2.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/information.js\";\nimport WrappingType from \"./types/WrappingType.js\";\nimport TagDesign from \"./types/TagDesign.js\";\nimport TagSize from \"./types/TagSize.js\";\n// Template\nimport TagTemplate from \"./generated/templates/TagTemplate.lit.js\";\n\nimport {\n\tTAG_DESCRIPTION_BADGE,\n\tTAG_DESCRIPTION_TAG,\n\tTAG_ROLE_DESCRIPTION,\n\tTAG_ERROR,\n\tTAG_WARNING,\n\tTAG_SUCCESS,\n\tTAG_INFORMATION,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport tagCss from \"./generated/themes/Tag.css.js\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-tag` is a component which serves\n * the purpose to attract the user attention to some piece\n * of information (state, quantity, condition, etc.).\n * It can contain icon and text information, and its design can be chosen from specific design types.\n *\n * ### Usage Guidelines\n *\n * - If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n  * - Colors can be semantic or not semantic.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Tag.js\";`\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-tag\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: TagTemplate,\n\tstyles: tagCss,\n\tdependencies: [\n\t\tIcon,\n\t],\n})\n\n/**\n * Fired when the user clicks on an interactive tag.\n *\n * **Note:** The event will be fired if the `interactive` property is `true`\n * @public\n * @since 1.22.0\n */\n@event(\"click\")\nclass Tag extends UI5Element {\n\t/**\n\t * Defines the design type of the component.\n\t * @default \"Neutral\"\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property({ defaultValue: TagDesign.Neutral })\n\tdesign!: `${TagDesign}`;\n\n\t/**\n\t * Defines the color scheme of the component.\n\t * There are 10 predefined schemes.\n\t * To use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.\n\t * @default \"1\"\n\t * @public\n\t */\n\t@property({ defaultValue: \"1\" })\n\tcolorScheme!: string;\n\n\t/**\n\t * Defines if the default state icon is shown.\n\t * @default false\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property({ type: Boolean })\n\thideStateIcon!: boolean;\n\n\t/**\n\t * Defines if the component is interactive (focusable and pressable).\n\t *\n\t * **Note:** The tag cannot be `interactive`\n\t * when `design` property is `TagDesign.Set3`\n\t * @default false\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property({ type: Boolean })\n\tinteractive!: boolean;\n\n\t/**\n\t * Defines how the text of a component will be displayed when there is not enough space.\n\t *\n\t * **Note:** For option \"Normal\" the text will wrap and the\n\t * words will not be broken based on hyphenation.\n\t * @default \"None\"\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property({ type: WrappingType, defaultValue: WrappingType.None })\n\twrappingType!: `${WrappingType}`;\n\n\t/**\n\t * Defines predefined size of the component.\n\t * @default \"S\"\n\t * @public\n\t * @since 2.0\n\t */\n\t@property({ type: TagSize, defaultValue: TagSize.S })\n\tsize!: `${TagSize}`;\n\n\t/**\n\t * Defines if the tag has an icon.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasIcon!: boolean;\n\n\t/**\n\t * Defines if the tag has only an icon (and no text).\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_iconOnly!: boolean;\n\n\t/**\n\t * Defines if the tag has \"Tag\" design type.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_isTagDesign!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t *\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttext!: Array<Node>;\n\n\t/**\n\t * Defines the icon to be displayed in the component.\n\t * @public\n\t */\n\t@slot()\n\ticon!: Array<IIcon>;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tTag.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._hasIcon = this.hasIcon || !!this._semanticIconName;\n\t\tthis._iconOnly = this.iconOnly;\n\t\tthis._isTagDesign = this.design !== TagDesign.Set3;\n\t}\n\n\tget _roleDescription() {\n\t\treturn Tag.i18nBundle.getText(TAG_ROLE_DESCRIPTION);\n\t}\n\n\tget _valueState() {\n\t\tswitch (this.design) {\n\t\tcase TagDesign.Positive:\n\t\t\treturn Tag.i18nBundle.getText(TAG_SUCCESS);\n\t\tcase TagDesign.Negative:\n\t\t\treturn Tag.i18nBundle.getText(TAG_ERROR);\n\t\tcase TagDesign.Critical:\n\t\t\treturn Tag.i18nBundle.getText(TAG_WARNING);\n\t\tcase TagDesign.Information:\n\t\t\treturn Tag.i18nBundle.getText(TAG_INFORMATION);\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget hasText() {\n\t\treturn willShowContent(this.text);\n\t}\n\n\tget hasIcon() {\n\t\treturn !!this.icon.length;\n\t}\n\n\tget iconOnly() {\n\t\treturn this.hasIcon && !this.hasText;\n\t}\n\n\tget _title() {\n\t\treturn this.title || undefined;\n\t}\n\n\tget tagDescription() {\n\t\tif (this.interactive) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tif (this.design === TagDesign.Set3) {\n\t\t\treturn Tag.i18nBundle.getText(TAG_DESCRIPTION_BADGE);\n\t\t}\n\n\t\tconst valueState = this._valueState;\n\t\tlet description = Tag.i18nBundle.getText(TAG_DESCRIPTION_TAG);\n\n\t\tif (valueState) {\n\t\t\tdescription = `${description} ${valueState}`;\n\t\t}\n\n\t\treturn description;\n\t}\n\n\tget _semanticIconName() {\n\t\tif (this.hideStateIcon || this.hasIcon) {\n\t\t\treturn null;\n\t\t}\n\n\t\tswitch (this.design) {\n\t\tcase TagDesign.Neutral:\n\t\t\treturn \"sys-help-2\";\n\t\tcase TagDesign.Positive:\n\t\t\treturn \"sys-enter-2\";\n\t\tcase TagDesign.Negative:\n\t\t\treturn \"error\";\n\t\tcase TagDesign.Critical:\n\t\t\treturn \"alert\";\n\t\tcase TagDesign.Information:\n\t\t\treturn \"information\";\n\t\tdefault:\n\t\t\treturn null;\n\t\t}\n\t}\n\n\t_onclick() {\n\t\tthis.fireEvent(\"click\");\n\t}\n}\n\nTag.define();\n\nexport default Tag;\n"]}

package/dist/Text.d.ts

@@ -0,0 +1,40 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * <h3>Overview</h3>
+ *
+ * The `ui5-text` component displays text that can be used in any content area of an application.
+ *
+ * <h3>Usage</h3>
+ *
+ * - Use the `ui5-text` if you want to display text inside a form, table, or any other content area.
+ * - Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).
+ *
+ * <h3>Responsive behavior</h3>
+ *
+ * The `ui5-text` component is fully adaptive to all screen sizes.
+ * By default, the text will wrap when the space is not enough.
+ * In addition, the component supports truncation via the <code>max-lines</code> property,
+ * by defining the number of lines the text should wrap before start truncating.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Text";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @slot {Array<Node>} default - Defines the text of the component.
+ * @since 2.0.0
+ */
+declare class Text extends UI5Element {
+    /**
+     * Defines the number of lines the text should wrap before it truncates.
+     * @default Infinity
+     * @public
+     */
+    maxLines: number;
+    onBeforeRendering(): void;
+}
+export default Text;

package/dist/Text.js

@@ -0,0 +1,64 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import renderer, { html } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.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 { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+// Styles
+import styles from "./generated/themes/Text.css.js";
+/**
+ * @class
+ *
+ * <h3>Overview</h3>
+ *
+ * The `ui5-text` component displays text that can be used in any content area of an application.
+ *
+ * <h3>Usage</h3>
+ *
+ * - Use the `ui5-text` if you want to display text inside a form, table, or any other content area.
+ * - Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).
+ *
+ * <h3>Responsive behavior</h3>
+ *
+ * The `ui5-text` component is fully adaptive to all screen sizes.
+ * By default, the text will wrap when the space is not enough.
+ * In addition, the component supports truncation via the <code>max-lines</code> property,
+ * by defining the number of lines the text should wrap before start truncating.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Text";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @slot {Array<Node>} default - Defines the text of the component.
+ * @since 2.0.0
+ */
+let Text = class Text extends UI5Element {
+    onBeforeRendering() {
+        this.style.setProperty(getScopedVarName("--_ui5_text_max_lines"), `${this.maxLines}`);
+    }
+};
+__decorate([
+    property({ validator: Integer, defaultValue: Infinity })
+], Text.prototype, "maxLines", void 0);
+Text = __decorate([
+    customElement({
+        tag: "ui5-text",
+        renderer,
+        template: () => {
+            return html `<bdi><slot></slot></bdi>`;
+        },
+        styles,
+    })
+], Text);
+Text.define();
+export default Text;
+//# sourceMappingURL=Text.js.map

package/dist/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AAEvF,SAAS;AACT,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AASH,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,UAAU;IAS5B,iBAAiB;QAChB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACvF,CAAC;CACD,CAAA;AALA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC;sCACvC;AAPb,IAAI;IART,aAAa,CAAC;QACd,GAAG,EAAE,UAAU;QACf,QAAQ;QACR,QAAQ,EAAE,GAAG,EAAE;YACd,OAAO,IAAI,CAAA,0BAA0B,CAAC;QACvC,CAAC;QACD,MAAM;KACN,CAAC;GACI,IAAI,CAYT;AAED,IAAI,CAAC,MAAM,EAAE,CAAC;AAEd,eAAe,IAAI,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport renderer, { html } from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\n\n// Styles\nimport styles from \"./generated/themes/Text.css.js\";\n\n/**\n * @class\n *\n * <h3>Overview</h3>\n *\n * The `ui5-text` component displays text that can be used in any content area of an application.\n *\n * <h3>Usage</h3>\n *\n * - Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n * - Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n *\n * <h3>Responsive behavior</h3>\n *\n * The `ui5-text` component is fully adaptive to all screen sizes.\n * By default, the text will wrap when the space is not enough.\n * In addition, the component supports truncation via the <code>max-lines</code> property,\n * by defining the number of lines the text should wrap before start truncating.\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/Text\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @slot {Array<Node>} default - Defines the text of the component.\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-text\",\n\trenderer,\n\ttemplate: () => {\n\t\treturn html`<bdi><slot></slot></bdi>`;\n\t},\n\tstyles,\n})\nclass Text extends UI5Element {\n\t/**\n\t * Defines the number of lines the text should wrap before it truncates.\n\t * @default Infinity\n\t * @public\n\t */\n\t@property({ validator: Integer, defaultValue: Infinity })\n\tmaxLines!: number;\n\n\tonBeforeRendering() {\n\t\tthis.style.setProperty(getScopedVarName(\"--_ui5_text_max_lines\"), `${this.maxLines}`);\n\t}\n}\n\nText.define();\n\nexport default Text;\n"]}