@@ -18,29 +18,29 @@ import "@ui5/webcomponents-icons/dist/error.js";
1818import "@ui5/webcomponents-icons/dist/alert.js" ;
1919import "@ui5/webcomponents-icons/dist/information.js" ;
2020import WrappingType from "./types/WrappingType.js" ;
21- import BadgeDesign from "./types/BadgeDesign .js" ;
22- import BadgeSize from "./types/BadgeSize .js" ;
21+ import TagDesign from "./types/TagDesign .js" ;
22+ import TagSize from "./types/TagSize .js" ;
2323// Template
24- import BadgeTemplate from "./generated/templates/BadgeTemplate .lit.js" ;
24+ import TagTemplate from "./generated/templates/TagTemplate .lit.js" ;
2525
2626import {
27- BADGE_DESCRIPTION_BADGE ,
28- BADGE_DESCRIPTION_TAG ,
29- BADGE_ROLE_DESCRIPTION ,
30- BADGE_ERROR ,
31- BADGE_WARNING ,
32- BADGE_SUCCESS ,
33- BADGE_INFORMATION ,
27+ TAG_DESCRIPTION_BADGE ,
28+ TAG_DESCRIPTION_TAG ,
29+ TAG_ROLE_DESCRIPTION ,
30+ TAG_ERROR ,
31+ TAG_WARNING ,
32+ TAG_SUCCESS ,
33+ TAG_INFORMATION ,
3434} from "./generated/i18n/i18n-defaults.js" ;
3535
3636// Styles
37- import badgeCss from "./generated/themes/Badge .css.js" ;
37+ import tagCss from "./generated/themes/Tag .css.js" ;
3838
3939/**
4040 * @class
4141 * ### Overview
4242 *
43- * The `ui5-badge ` is a component which serves
43+ * The `ui5-tag ` is a component which serves
4444 * the purpose to attract the user attention to some piece
4545 * of information (state, quantity, condition, etc.).
4646 * It can contain icon and text information, and its design can be chosen from specific design types.
@@ -52,40 +52,40 @@ import badgeCss from "./generated/themes/Badge.css.js";
5252 *
5353 * ### ES6 Module Import
5454 *
55- * `import "@ui5/webcomponents/dist/Badge .js";`
55+ * `import "@ui5/webcomponents/dist/Tag .js";`
5656 * @constructor
5757 * @extends UI5Element
58- * @since 0.12 .0
58+ * @since 2.0 .0
5959 * @public
6060 */
6161@customElement ( {
62- tag : "ui5-badge " ,
62+ tag : "ui5-tag " ,
6363 languageAware : true ,
6464 renderer : litRender ,
65- template : BadgeTemplate ,
66- styles : badgeCss ,
65+ template : TagTemplate ,
66+ styles : tagCss ,
6767 dependencies : [
6868 Icon ,
6969 ] ,
7070} )
7171
7272/**
73- * Fired when the user clicks on an interactive badge .
73+ * Fired when the user clicks on an interactive tag .
7474 *
7575 * **Note:** The event will be fired if the `interactive` property is `true`
7676 * @public
7777 * @since 1.22.0
7878 */
7979@event ( "click" )
80- class Badge extends UI5Element {
80+ class Tag extends UI5Element {
8181 /**
8282 * Defines the design type of the component.
8383 * @default "Neutral"
8484 * @public
8585 * @since 1.22.0
8686 */
87- @property ( { defaultValue : BadgeDesign . Neutral } )
88- design ! : `${BadgeDesign } `;
87+ @property ( { defaultValue : TagDesign . Neutral } )
88+ design ! : `${TagDesign } `;
8989
9090 /**
9191 * Defines the color scheme of the component.
@@ -109,8 +109,8 @@ class Badge extends UI5Element {
109109 /**
110110 * Defines if the component is interactive (focusable and pressable).
111111 *
112- * **Note:** The badge cannot be `interactive`
113- * when `design` property is `BadgeDesign .Set3`
112+ * **Note:** The tag cannot be `interactive`
113+ * when `design` property is `TagDesign .Set3`
114114 * @default false
115115 * @public
116116 * @since 1.22.0
@@ -136,25 +136,25 @@ class Badge extends UI5Element {
136136 * @public
137137 * @since 2.0
138138 */
139- @property ( { type : BadgeSize , defaultValue : BadgeSize . S } )
140- size ! : `${BadgeSize } `;
139+ @property ( { type : TagSize , defaultValue : TagSize . S } )
140+ size ! : `${TagSize } `;
141141
142142 /**
143- * Defines if the badge has an icon.
143+ * Defines if the tag has an icon.
144144 * @private
145145 */
146146 @property ( { type : Boolean } )
147147 _hasIcon ! : boolean ;
148148
149149 /**
150- * Defines if the badge has only an icon (and no text).
150+ * Defines if the tag has only an icon (and no text).
151151 * @private
152152 */
153153 @property ( { type : Boolean } )
154154 _iconOnly ! : boolean ;
155155
156156 /**
157- * Defines if the badge has "Tag" design type.
157+ * Defines if the tag has "Tag" design type.
158158 * @private
159159 */
160160 @property ( { type : Boolean } )
@@ -179,7 +179,7 @@ class Badge extends UI5Element {
179179 static i18nBundle : I18nBundle ;
180180
181181 static async onDefine ( ) {
182- Badge . i18nBundle = await getI18nBundle ( "@ui5/webcomponents" ) ;
182+ Tag . i18nBundle = await getI18nBundle ( "@ui5/webcomponents" ) ;
183183 }
184184
185185 onEnterDOM ( ) {
@@ -191,23 +191,23 @@ class Badge extends UI5Element {
191191 onBeforeRendering ( ) {
192192 this . _hasIcon = this . hasIcon || ! ! this . _semanticIconName ;
193193 this . _iconOnly = this . iconOnly ;
194- this . _isTagDesign = this . design !== BadgeDesign . Set3 ;
194+ this . _isTagDesign = this . design !== TagDesign . Set3 ;
195195 }
196196
197197 get _roleDescription ( ) {
198- return Badge . i18nBundle . getText ( BADGE_ROLE_DESCRIPTION ) ;
198+ return Tag . i18nBundle . getText ( TAG_ROLE_DESCRIPTION ) ;
199199 }
200200
201201 get _valueState ( ) {
202202 switch ( this . design ) {
203- case BadgeDesign . Positive :
204- return Badge . i18nBundle . getText ( BADGE_SUCCESS ) ;
205- case BadgeDesign . Negative :
206- return Badge . i18nBundle . getText ( BADGE_ERROR ) ;
207- case BadgeDesign . Critical :
208- return Badge . i18nBundle . getText ( BADGE_WARNING ) ;
209- case BadgeDesign . Information :
210- return Badge . i18nBundle . getText ( BADGE_INFORMATION ) ;
203+ case TagDesign . Positive :
204+ return Tag . i18nBundle . getText ( TAG_SUCCESS ) ;
205+ case TagDesign . Negative :
206+ return Tag . i18nBundle . getText ( TAG_ERROR ) ;
207+ case TagDesign . Critical :
208+ return Tag . i18nBundle . getText ( TAG_WARNING ) ;
209+ case TagDesign . Information :
210+ return Tag . i18nBundle . getText ( TAG_INFORMATION ) ;
211211 }
212212
213213 return undefined ;
@@ -229,17 +229,17 @@ class Badge extends UI5Element {
229229 return this . title || undefined ;
230230 }
231231
232- get badgeDescription ( ) {
232+ get tagDescription ( ) {
233233 if ( this . interactive ) {
234234 return undefined ;
235235 }
236236
237- if ( this . design === BadgeDesign . Set3 ) {
238- return Badge . i18nBundle . getText ( BADGE_DESCRIPTION_BADGE ) ;
237+ if ( this . design === TagDesign . Set3 ) {
238+ return Tag . i18nBundle . getText ( TAG_DESCRIPTION_BADGE ) ;
239239 }
240240
241241 const valueState = this . _valueState ;
242- let description = Badge . i18nBundle . getText ( BADGE_DESCRIPTION_TAG ) ;
242+ let description = Tag . i18nBundle . getText ( TAG_DESCRIPTION_TAG ) ;
243243
244244 if ( valueState ) {
245245 description = `${ description } ${ valueState } ;
@@ -254,15 +254,15 @@ class Badge extends UI5Element {
254254 }
255255
256256 switch ( this . design ) {
257- case BadgeDesign . Neutral :
257+ case TagDesign . Neutral :
258258 return "sys-help-2" ;
259- case BadgeDesign . Positive :
259+ case TagDesign . Positive :
260260 return "sys-enter-2" ;
261- case BadgeDesign . Negative :
261+ case TagDesign . Negative :
262262 return "error" ;
263- case BadgeDesign . Critical :
263+ case TagDesign . Critical :
264264 return "alert" ;
265- case BadgeDesign . Information :
265+ case TagDesign . Information :
266266 return "information" ;
267267 default :
268268 return null ;
@@ -274,6 +274,6 @@ class Badge extends UI5Element {
274274 }
275275}
276276
277- Badge . define ( ) ;
277+ Tag . define ( ) ;
278278
279- export default Badge ;
279+ export default Tag ;
0 commit comments