-
Notifications
You must be signed in to change notification settings - Fork 253
/
Badge.js
145 lines (123 loc) · 3.66 KB
/
Badge.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
// Template
import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
import { BADGE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
// Styles
import badgeCss from "./generated/themes/Badge.css.js";
/**
* @public
*/
const metadata = {
tag: "ui5-badge",
properties: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
/**
* Defines the color scheme of the <code>ui5-badge</code>.
* There are 10 predefined schemes. Each scheme applies different values for the <code>background-color</code> and <code>border-color</code>.
* 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.
* @type {string}
* @defaultvalue ""
* @public
*/
colorScheme: {
type: String,
defaultValue: "1",
},
},
slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
/**
* Defines the text of the <code>ui5-badge</code>.
* <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
*
* @type {Node[]}
* @slot
* @public
*/
"default": {
type: Node,
},
/**
* Defines the <code>ui5-icon</code> to be displayed in the <code>ui5-badge</code>.
*
* @type {HTMLElement[]}
* @slot
* @public
*/
icon: {
type: HTMLElement,
},
},
};
/**
* @class
* <h3 class="comment-api-title">Overview</h3>
*
* The <code>ui5-badge</code> is a small non-interactive component which contains text information and color chosen from a list of predefined color schemes.
* It serves the purpose to attract the user attention to some piece of information (state, quantity, condition, etc.).
*
* <h3>Usage Guidelines</h3>
* <ul>
* <li>If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.</li>
* <li>When truncated, the full text is not visible, therefore, it’s recommended to make more space for longer texts to be fully displayed.</li>
* <li>Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.</li>
* </ul>
*
* <h3>ES6 Module Import</h3>
*
* <code>import "@ui5/webcomponents/dist/Badge";</code>
*
* @constructor
* @author SAP SE
* @alias sap.ui.webcomponents.main.Badge
* @extends sap.ui.webcomponents.base.UI5Element
* @tagname ui5-badge
* @since 0.12.0
* @public
*/
class Badge extends UI5Element {
constructor() {
super();
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
}
static get metadata() {
return metadata;
}
static get render() {
return litRender;
}
static get template() {
return BadgeTemplate;
}
static get styles() {
return badgeCss;
}
static async define(...params) {
await fetchI18nBundle("@ui5/webcomponents");
super.define(...params);
}
onBeforeRendering() {
if (this.hasIcon) {
this.setAttribute("__has-icon", "");
} else {
this.removeAttribute("__has-icon");
}
}
get hasText() {
return !!this.textContent.trim().length;
}
get hasIcon() {
return !!this.icon.length;
}
get rtl() {
return getRTL() ? "rtl" : undefined;
}
get badgeDescription() {
return this.i18nBundle.getText(BADGE_DESCRIPTION);
}
}
Badge.define();
export default Badge;