@ui5/webcomponents 0.0.0-037d08c67

package/dist/Tag.d.ts

@@ -0,0 +1,122 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.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 type WrappingType from "./types/WrappingType.js";
+import TagDesign from "./types/TagDesign.js";
+import type TagSize from "./types/TagSize.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * 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.
+ *
+ * ### Usage Guidelines
+ *
+ * - 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.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Tag.js";`
+ * @csspart root - Used to style the root element.
+ * @constructor
+ * @extends UI5Element
+ * @since 2.0.0
+ * @public
+ */
+declare class Tag extends UI5Element {
+    eventDetails: {
+        click: void;
+    };
+    /**
+     * Defines the design type of the component.
+     * @default "Neutral"
+     * @public
+     * @since 1.22.0
+     */
+    design: `${TagDesign}`;
+    /**
+     * Defines the color scheme of the component.
+     * There are 10 predefined schemes.
+     * To use one you can set a number from `"1"` to `"10"`. The `colorScheme` `"1"` will be set by default.
+     * @default "1"
+     * @public
+     */
+    colorScheme: string;
+    /**
+     * Defines if the default state icon is shown.
+     * @default false
+     * @public
+     * @since 1.22.0
+     */
+    hideStateIcon: boolean;
+    /**
+     * Defines if the component is interactive (focusable and pressable).
+     *
+     * @default false
+     * @public
+     * @since 1.22.0
+     */
+    interactive: boolean;
+    /**
+     * Defines how the text of a component will be displayed when there is not enough space.
+     *
+     * **Note:** For option "Normal" the text will wrap and the
+     * words will not be broken based on hyphenation.
+     * @default "Normal"
+     * @public
+     * @since 1.22.0
+     */
+    wrappingType: `${WrappingType}`;
+    /**
+     * Defines predefined size of the component.
+     * @default "S"
+     * @public
+     * @since 2.0.0
+     */
+    size: `${TagSize}`;
+    /**
+     * Defines if the tag has an icon.
+     * @private
+     */
+    _hasIcon: boolean;
+    /**
+     * Defines if the tag has only an icon (and no text).
+     * @private
+     */
+    _iconOnly: boolean;
+    /**
+     * Defines the text of the component.
+     *
+     * **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: DefaultSlot<Node>;
+    /**
+     * Defines the icon to be displayed in the component.
+     * @public
+     */
+    icon: Slot<IIcon>;
+    static i18nBundle: I18nBundle;
+    onEnterDOM(): void;
+    onBeforeRendering(): void;
+    get _roleDescription(): string;
+    get _valueState(): string | undefined;
+    get hasText(): boolean;
+    get hasIcon(): boolean;
+    get iconOnly(): boolean;
+    get _title(): string | undefined;
+    get tagDescription(): string | undefined;
+    get _semanticIconName(): "alert" | "sys-help-2" | "sys-enter-2" | "error" | "information" | null;
+    _onclick(e: Event): void;
+}
+export default Tag;

package/dist/Tag.js

@@ -0,0 +1,239 @@
+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;
+};
+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-strict.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
+import { isDesktop, } from "@ui5/webcomponents-base/dist/Device.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 TagDesign from "./types/TagDesign.js";
+// Template
+import TagTemplate from "./TagTemplate.js";
+import { TAG_DESCRIPTION_TAG, TAG_ROLE_DESCRIPTION, TAG_ERROR, TAG_WARNING, TAG_SUCCESS, TAG_INFORMATION, } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import tagCss from "./generated/themes/Tag.css.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * 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.
+ *
+ * ### Usage Guidelines
+ *
+ * - 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.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Tag.js";`
+ * @csspart root - Used to style the root element.
+ * @constructor
+ * @extends UI5Element
+ * @since 2.0.0
+ * @public
+ */
+let Tag = Tag_1 = class Tag extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the design type of the component.
+         * @default "Neutral"
+         * @public
+         * @since 1.22.0
+         */
+        this.design = "Neutral";
+        /**
+         * Defines the color scheme of the component.
+         * There are 10 predefined schemes.
+         * To use one you can set a number from `"1"` to `"10"`. The `colorScheme` `"1"` will be set by default.
+         * @default "1"
+         * @public
+         */
+        this.colorScheme = "1";
+        /**
+         * Defines if the default state icon is shown.
+         * @default false
+         * @public
+         * @since 1.22.0
+         */
+        this.hideStateIcon = false;
+        /**
+         * Defines if the component is interactive (focusable and pressable).
+         *
+         * @default false
+         * @public
+         * @since 1.22.0
+         */
+        this.interactive = false;
+        /**
+         * Defines how the text of a component will be displayed when there is not enough space.
+         *
+         * **Note:** For option "Normal" the text will wrap and the
+         * words will not be broken based on hyphenation.
+         * @default "Normal"
+         * @public
+         * @since 1.22.0
+         */
+        this.wrappingType = "Normal";
+        /**
+         * Defines predefined size of the component.
+         * @default "S"
+         * @public
+         * @since 2.0.0
+         */
+        this.size = "S";
+        /**
+         * Defines if the tag has an icon.
+         * @private
+         */
+        this._hasIcon = false;
+        /**
+         * Defines if the tag has only an icon (and no text).
+         * @private
+         */
+        this._iconOnly = false;
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    onBeforeRendering() {
+        this._hasIcon = this.hasIcon || !!this._semanticIconName;
+        this._iconOnly = this.iconOnly;
+    }
+    get _roleDescription() {
+        return Tag_1.i18nBundle.getText(TAG_ROLE_DESCRIPTION);
+    }
+    get _valueState() {
+        switch (this.design) {
+            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;
+    }
+    get hasText() {
+        return willShowContent(this.text);
+    }
+    get hasIcon() {
+        return !!this.icon.length;
+    }
+    get iconOnly() {
+        return this.hasIcon && !this.hasText;
+    }
+    get _title() {
+        return this.title || undefined;
+    }
+    get tagDescription() {
+        if (this.interactive) {
+            return undefined;
+        }
+        const valueState = this._valueState;
+        let description = Tag_1.i18nBundle.getText(TAG_DESCRIPTION_TAG);
+        if (valueState) {
+            description = `${description} ${valueState}`;
+        }
+        return description;
+    }
+    get _semanticIconName() {
+        if (this.hideStateIcon || this.hasIcon) {
+            return null;
+        }
+        switch (this.design) {
+            case TagDesign.Neutral:
+                return "sys-help-2";
+            case TagDesign.Positive:
+                return "sys-enter-2";
+            case TagDesign.Negative:
+                return "error";
+            case TagDesign.Critical:
+                return "alert";
+            case TagDesign.Information:
+                return "information";
+            default:
+                return null;
+        }
+    }
+    _onclick(e) {
+        e.stopPropagation();
+        this.fireDecoratorEvent("click");
+    }
+};
+__decorate([
+    property()
+], Tag.prototype, "design", void 0);
+__decorate([
+    property()
+], Tag.prototype, "colorScheme", void 0);
+__decorate([
+    property({ type: Boolean })
+], Tag.prototype, "hideStateIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], Tag.prototype, "interactive", void 0);
+__decorate([
+    property()
+], Tag.prototype, "wrappingType", void 0);
+__decorate([
+    property()
+], Tag.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], Tag.prototype, "_hasIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], Tag.prototype, "_iconOnly", void 0);
+__decorate([
+    slot({ type: Node, "default": true })
+], Tag.prototype, "text", void 0);
+__decorate([
+    slot()
+], Tag.prototype, "icon", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], Tag, "i18nBundle", void 0);
+Tag = Tag_1 = __decorate([
+    customElement({
+        tag: "ui5-tag",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: TagTemplate,
+        styles: tagCss,
+    })
+    /**
+     * Fired when the user clicks on an interactive tag.
+     *
+     * **Note:** The event will be fired if the `interactive` property is `true`
+     * @public
+     * @since 1.22.0
+     */
+    ,
+    event("click", {
+        bubbles: true,
+    })
+], 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 type { Slot, DefaultSlot } 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-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.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 \"@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 type WrappingType from \"./types/WrappingType.js\";\nimport TagDesign from \"./types/TagDesign.js\";\nimport type TagSize from \"./types/TagSize.js\";\n// Template\nimport TagTemplate from \"./TagTemplate.js\";\n\nimport {\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 * @csspart root - Used to style the root element.\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-tag\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: TagTemplate,\n\tstyles: tagCss,\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\", {\n\tbubbles: true,\n})\nclass Tag extends UI5Element {\n\teventDetails!: {\n\t\tclick: void;\n\t}\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()\n\tdesign: `${TagDesign}` = \"Neutral\"\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()\n\tcolorScheme = \"1\";\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 = false;\n\n\t/**\n\t * Defines if the component is interactive (focusable and pressable).\n\t *\n\t * @default false\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\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 \"Normal\"\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property()\n\twrappingType: `${WrappingType}` = \"Normal\";\n\n\t/**\n\t * Defines predefined size of the component.\n\t * @default \"S\"\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\tsize: `${TagSize}` = \"S\";\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 = false;\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 = false;\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!: DefaultSlot<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!: Slot<IIcon>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\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}\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\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(e: Event) {\n\t\te.stopPropagation();\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n}\n\nTag.define();\n\nexport default Tag;\n"]}

package/dist/TagTemplate.d.ts

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

package/dist/TagTemplate.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "./Icon.js";
+export default function TagTemplate() {
+    return (_jsx(_Fragment, { children: this.interactive ?
+            _jsx("button", { class: "ui5-tag-root", title: this._title, "aria-roledescription": this._roleDescription, "aria-description": this._valueState, onClick: this._onclick, part: "root", children: content.call(this) })
+            :
+                _jsx("div", { class: "ui5-tag-root", title: this._title, part: "root", children: content.call(this) }) }));
+}
+function content() {
+    return (_jsxs(_Fragment, { children: [_jsx("slot", { name: "icon" }), this._semanticIconName &&
+                _jsx(Icon, { class: "ui5-tag-semantic-icon", name: this._semanticIconName }), _jsx("span", { class: "ui5-hidden-text", children: this.tagDescription }), this.hasText &&
+                _jsx("span", { class: "ui5-tag-text", children: _jsx("slot", {}) })] }));
+}
+//# sourceMappingURL=TagTemplate.js.map

package/dist/TagTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagTemplate.js","sourceRoot":"","sources":["../src/TagTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAG7B,MAAM,CAAC,OAAO,UAAU,WAAW;IAClC,OAAO,CACN,4BAEE,IAAI,CAAC,WAAW,CAAC,CAAC;YACjB,iBACC,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,IAAI,CAAC,MAAM,0BACI,IAAI,CAAC,gBAAgB,sBACzB,IAAI,CAAC,WAAW,EAClC,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,MAAM,YAET,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GACZ;YACT,CAAC;gBACD,cAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,YACtD,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GACf,GAEN,CACH,CAAC;AACH,CAAC;AAED,SAAS,OAAO;IACf,OAAO,CACN,8BACC,eAAM,IAAI,EAAC,MAAM,GAAQ,EACxB,IAAI,CAAC,iBAAiB;gBACtB,KAAC,IAAI,IAAC,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,GAAI,EAErE,eAAM,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,cAAc,GAAQ,EACzD,IAAI,CAAC,OAAO;gBACZ,eAAM,KAAK,EAAC,cAAc,YAAC,gBAAa,GAAO,IAE9C,CACH,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport type Tag from \"./Tag.js\";\n\nexport default function TagTemplate(this: Tag) {\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\tthis.interactive ?\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"ui5-tag-root\"\n\t\t\t\t\t\ttitle={this._title}\n\t\t\t\t\t\taria-roledescription={this._roleDescription}\n\t\t\t\t\t\taria-description={this._valueState}\n\t\t\t\t\t\tonClick={this._onclick}\n\t\t\t\t\t\tpart=\"root\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content.call(this) }\n\t\t\t\t\t</button>\n\t\t\t\t\t:\n\t\t\t\t\t<div class=\"ui5-tag-root\" title={this._title} part=\"root\">\n\t\t\t\t\t\t{ content.call(this) }\n\t\t\t\t\t</div>\n\t\t\t}\n\t\t</>\n\t);\n}\n\nfunction content(this: Tag) {\n\treturn (\n\t\t<>\n\t\t\t<slot name=\"icon\"></slot>\n\t\t\t{this._semanticIconName &&\n\t\t\t\t<Icon class=\"ui5-tag-semantic-icon\" name={this._semanticIconName} />\n\t\t\t}\n\t\t\t<span class=\"ui5-hidden-text\">{this.tagDescription}</span>\n\t\t\t{this.hasText &&\n\t\t\t\t<span class=\"ui5-tag-text\"><slot></slot></span>\n\t\t\t}\n\t\t</>\n\t);\n}\n"]}

package/dist/Text.d.ts

@@ -0,0 +1,59 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import TextEmptyIndicatorMode from "./types/TextEmptyIndicatorMode.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-text` component displays text that can be used in any content area of an application.
+ *
+ * ### Usage
+ *
+ * - 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).
+ *
+ * ### Responsive behavior
+ *
+ * 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 `max-lines` property,
+ * by defining the number of lines the text should wrap before start truncating.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Text";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @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;
+    /**
+     * Specifies if an empty indicator should be displayed when there is no text.
+     * @default "Off"
+     * @since 2.2.0
+     * @public
+     */
+    emptyIndicatorMode: `${TextEmptyIndicatorMode}`;
+    /**
+     * Defines the text of the component.
+     * @public
+     */
+    text: DefaultSlot<Node>;
+    static i18nBundle: I18nBundle;
+    onBeforeRendering(): void;
+    get hasText(): boolean;
+    get _renderEmptyIndicator(): boolean;
+    get _emptyIndicatorAriaLabel(): string;
+    get _emptyIndicatorSymbol(): string;
+}
+export default Text;

package/dist/Text.js

@@ -0,0 +1,104 @@
+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;
+};
+var Text_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
+import TextEmptyIndicatorMode from "./types/TextEmptyIndicatorMode.js";
+// Template
+import TextTemplate2 from "./TextTemplate.js";
+import { EMPTY_INDICATOR_SYMBOL, EMPTY_INDICATOR_ACCESSIBLE_TEXT, } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import styles from "./generated/themes/Text.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-text` component displays text that can be used in any content area of an application.
+ *
+ * ### Usage
+ *
+ * - 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).
+ *
+ * ### Responsive behavior
+ *
+ * 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 `max-lines` property,
+ * by defining the number of lines the text should wrap before start truncating.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Text";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.0.0
+ */
+let Text = Text_1 = class Text extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the number of lines the text should wrap before it truncates.
+         * @default Infinity
+         * @public
+         */
+        this.maxLines = Infinity;
+        /**
+         * Specifies if an empty indicator should be displayed when there is no text.
+         * @default "Off"
+         * @since 2.2.0
+         * @public
+         */
+        this.emptyIndicatorMode = "Off";
+    }
+    onBeforeRendering() {
+        this.style.setProperty("--_ui5_text_max_lines", `${this.maxLines}`);
+    }
+    get hasText() {
+        return willShowContent(this.text);
+    }
+    get _renderEmptyIndicator() {
+        return !this.hasText && this.emptyIndicatorMode === TextEmptyIndicatorMode.On;
+    }
+    get _emptyIndicatorAriaLabel() {
+        return Text_1.i18nBundle.getText(EMPTY_INDICATOR_ACCESSIBLE_TEXT);
+    }
+    get _emptyIndicatorSymbol() {
+        return Text_1.i18nBundle.getText(EMPTY_INDICATOR_SYMBOL);
+    }
+};
+__decorate([
+    property({ type: Number })
+], Text.prototype, "maxLines", void 0);
+__decorate([
+    property()
+], Text.prototype, "emptyIndicatorMode", void 0);
+__decorate([
+    slot({ type: Node, "default": true })
+], Text.prototype, "text", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], Text, "i18nBundle", void 0);
+Text = Text_1 = __decorate([
+    customElement({
+        tag: "ui5-text",
+        renderer: jsxRenderer,
+        template: TextTemplate2,
+        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;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,eAAe,MAAM,sDAAsD,CAAC;AACnF,OAAO,sBAAsB,MAAM,mCAAmC,CAAC;AACvE,WAAW;AACX,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EACN,sBAAsB,EACtB,+BAA+B,GAC/B,MAAM,mCAAmC,CAAC;AAE3C,SAAS;AACT,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAOH,IAAM,IAAI,YAAV,MAAM,IAAK,SAAQ,UAAU;IAA7B;;QACC;;;;WAIG;QAEH,aAAQ,GAAW,QAAQ,CAAC;QAE5B;;;;;WAKG;QAEH,uBAAkB,GAAgC,KAAK,CAAC;IA+BzD,CAAC;IAnBA,iBAAiB;QAChB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACrE,CAAC;IAED,IAAI,OAAO;QACV,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,IAAI,qBAAqB;QACxB,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,kBAAkB,KAAK,sBAAsB,CAAC,EAAE,CAAC;IAC/E,CAAC;IAED,IAAI,wBAAwB;QAC3B,OAAO,MAAI,CAAC,UAAU,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAC;IACjE,CAAC;IAED,IAAI,qBAAqB;QACxB,OAAO,MAAI,CAAC,UAAU,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;IACxD,CAAC;CACD,CAAA;AAxCA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACC;AAS5B;IADC,QAAQ,EAAE;gDAC6C;AAOxD;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;kCACb;AAGlB;IADN,IAAI,CAAC,oBAAoB,CAAC;8BACG;AA1BzB,IAAI;IANT,aAAa,CAAC;QACd,GAAG,EAAE,UAAU;QACf,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,aAAa;QACvB,MAAM;KACN,CAAC;GACI,IAAI,CA+CT;AAED,IAAI,CAAC,MAAM,EAAE,CAAC;AAEd,eAAe,IAAI,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport willShowContent from \"@ui5/webcomponents-base/dist/util/willShowContent.js\";\nimport TextEmptyIndicatorMode from \"./types/TextEmptyIndicatorMode.js\";\n// Template\nimport TextTemplate2 from \"./TextTemplate.js\";\n\nimport {\n\tEMPTY_INDICATOR_SYMBOL,\n\tEMPTY_INDICATOR_ACCESSIBLE_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport styles from \"./generated/themes/Text.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-text` component displays text that can be used in any content area of an application.\n *\n * ### Usage\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 * ### Responsive behavior\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 `max-lines` property,\n * by defining the number of lines the text should wrap before start truncating.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Text\";`\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-text\",\n\trenderer: jsxRenderer,\n\ttemplate: TextTemplate2,\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({ type: Number })\n\tmaxLines: number = Infinity;\n\n\t/**\n\t * Specifies if an empty indicator should be displayed when there is no text.\n\t * @default \"Off\"\n\t * @since 2.2.0\n\t * @public\n\t */\n\t@property()\n\temptyIndicatorMode: `${TextEmptyIndicatorMode}` = \"Off\";\n\n\t/**\n\t * Defines the text of the component.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttext!: DefaultSlot<Node>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\tthis.style.setProperty(\"--_ui5_text_max_lines\", `${this.maxLines}`);\n\t}\n\n\tget hasText() {\n\t\treturn willShowContent(this.text);\n\t}\n\n\tget _renderEmptyIndicator() {\n\t\treturn !this.hasText && this.emptyIndicatorMode === TextEmptyIndicatorMode.On;\n\t}\n\n\tget _emptyIndicatorAriaLabel() {\n\t\treturn Text.i18nBundle.getText(EMPTY_INDICATOR_ACCESSIBLE_TEXT);\n\t}\n\n\tget _emptyIndicatorSymbol() {\n\t\treturn Text.i18nBundle.getText(EMPTY_INDICATOR_SYMBOL);\n\t}\n}\n\nText.define();\n\nexport default Text;\n"]}