@progress/kendo-angular-indicators 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/badge/badge.component.d.ts +45 -34
  2. package/badge/models/fill.d.ts +1 -1
  3. package/badge/models/rounded.d.ts +17 -0
  4. package/badge/models/size.d.ts +1 -1
  5. package/badge/models/theme-color.d.ts +1 -1
  6. package/bundles/kendo-angular-indicators.umd.js +1 -1
  7. package/esm2015/badge/badge.component.js +71 -40
  8. package/esm2015/badge/models/{shape.js → rounded.js} +0 -0
  9. package/esm2015/package-metadata.js +1 -1
  10. package/fesm2015/kendo-angular-indicators.js +72 -41
  11. package/main.d.ts +1 -1
  12. package/package.json +5 -5
  13. package/badge/models/shape.d.ts +0 -17
package/badge/badge.component.d.ts CHANGED
@@ -8,7 +8,7 @@ import { BadgeAlign } from './models/align';
8
8
  import { BadgeSize } from './models/size';
9
9
  import { BadgeFill } from './models/fill';
10
10
  import { BadgeThemeColor } from './models/theme-color';
11
- import { BadgeShape } from './models/shape';
11
+ import { BadgeRounded } from './models/rounded';
12
12
  import { BadgePosition } from './models/position';
13
13
  import * as i0 from "@angular/core";
14
14
  /**
@@ -26,84 +26,95 @@ export declare class BadgeComponent implements AfterViewInit, OnChanges, OnDestr
26
26
  */
27
27
  direction: string;
28
28
  /**
29
- * Specifies the alignment of the Badge.
29
+ * Specifies the alignment of the Badge ([see example]({% slug alignandposition_badge %}#toc-alignment)).
30
30
  *
31
31
  * The possible values are:
32
- * * `{ vertical: 'top', horizontal: 'end' }` (Default)
32
+ * * `{ vertical: 'top', horizontal: 'end' }`
33
33
  * * `{ vertical: 'top', horizontal: 'start' }`
34
34
  * * `{ vertical: 'bottom', horizontal: 'start' }`
35
35
  * * `{ vertical: 'bottom', horizontal: 'end' }`
36
36
  *
37
+ * @default "{ vertical: 'top', horizontal: 'end' }"
37
38
  */
38
39
  get align(): BadgeAlign;
39
40
  set align(align: BadgeAlign);
40
41
  /**
41
- * Specifies the size of the Badge.
42
+ * Specifies the size of the Badge ([see example]({% slug appearance_badge %}#toc-alignment)).
42
43
  *
43
44
  * The possible values are:
44
45
  * * `small`
45
- * * `medium` (Default)
46
+ * * `medium`
46
47
  * * `large`
48
+ * * `none`
47
49
  *
50
+ * @default medium
48
51
  */
49
52
  size: BadgeSize;
50
53
  /**
51
- * Specifies the appearance fill style of the Badge.
54
+ * Specifies the appearance fill style of the Badge ([see example]({% slug appearance_badge %}#toc-fill)).
52
55
  *
53
56
  * The possible values are:
54
- * * `solid` (Default)
57
+ * * `solid`
55
58
  * * `outline`
59
+ * * `none`
56
60
  *
61
+ * @default solid
57
62
  */
58
63
  fill: BadgeFill;
59
64
  /**
60
65
  * Specifies the theme color of the Badge.
61
- * The theme color will be applied as background and border color, while also amending the text color accordingly.
66
+ * The theme color will be applied as background and border color, while also amending the text color accordingly
67
+ * ([see example]({% slug appearance_badge %}#toc-themeColor)).
62
68
  *
63
69
  * The possible values are:
64
- * * `primary` (Default)—Applies coloring based on primary theme color.
65
- * * `secondary`—Applies coloring based on secondary theme color.
66
- * * `tertiary`— Applies coloring based on tertiary theme color.
67
- * * `inherit`— Applies inherited coloring value.
68
- * * `info`—Applies coloring based on info theme color.
69
- * * `success`— Applies coloring based on success theme color.
70
- * * `warning`— Applies coloring based on warning theme color.
71
- * * `error`— Applies coloring based on error theme color.
72
- * * `dark`— Applies coloring based on dark theme color.
73
- * * `light`— Applies coloring based on light theme color.
74
- * * `inverse`— Applies coloring based on inverted theme color.
70
+ * * `primary`
71
+ * * `secondary`
72
+ * * `tertiary`
73
+ * * `inherit`
74
+ * * `info`
75
+ * * `success`
76
+ * * `warning`
77
+ * * `error`
78
+ * * `dark`
79
+ * * `light`
80
+ * * `inverse`
81
+ * * `none`
75
82
  *
83
+ * @default primary
76
84
  */
77
85
  themeColor: BadgeThemeColor;
78
86
  /**
79
- * Specifies the shape of the Badge.
87
+ * Specifies the roundness of the Badge ([see example]({% slug appearance_badge %}#toc-rounded)).
80
88
  *
81
89
  * The possible values are:
82
- * * `circle` (Default)—Applies circular shape on the Badge.
83
- * * `rectangle`—Applies rectangular shape on the Badge.
84
- * * `rounded`—Applies rounded shape on the Badge.
85
- * * `dot`—Applies dot shape on the Badge.
86
- * * `pill`—Applies border radius equal to half of the height of the Badge.
90
+ * * `small`
91
+ * * `medium`
92
+ * * `large`
93
+ * * `full`
94
+ * * `none`
87
95
  *
96
+ * @default medium
88
97
  */
89
- shape: BadgeShape;
98
+ rounded: BadgeRounded;
90
99
  /**
91
- * Specifies the position of the Badge relative to the edge of the parent container element.
100
+ * Specifies the position of the Badge relative to the edge of the parent container element ([see example]({% slug alignandposition_badge %}#toc-position)).
92
101
  *
93
102
  * The possible values are:
94
- * * `edge` (Default)—The center of the Badge is positioned on the edge of the parent container element.
95
- * * `inside`—The Badge is entirely positioned inside the edge of the parent container element.
96
- * * `outside`—The Badge is entirely positioned outside the edge of the parent container element.
103
+ * * `edge`
104
+ * * `inside`
105
+ * * `outside`
97
106
  *
107
+ * @default edge
98
108
  */
99
109
  position: BadgePosition;
100
110
  /**
101
- * Specifies whether or not to render additional `cutout` border around the Badge.
111
+ * Specifies whether or not to render additional `cutout` border around the Badge ([see example]({% slug appearance_badge %}#toc-cutoutBorder)).
102
112
  *
103
113
  * The possible values are:
104
114
  * * `true`
105
- * * `false` (Default)
115
+ * * `false`
106
116
  *
117
+ * @default false
107
118
  */
108
119
  cutoutBorder: boolean;
109
120
  private badgeClasses;
@@ -117,10 +128,10 @@ export declare class BadgeComponent implements AfterViewInit, OnChanges, OnDestr
117
128
  private alignClass;
118
129
  private positionClass;
119
130
  private sizeClass;
120
- private shapeClass;
131
+ private roundedClass;
121
132
  private themeColorClass;
122
133
  private fillClass;
123
134
  private setBadgeClasses;
124
135
  static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
125
- static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "kendo-badge", never, { "align": "align"; "size": "size"; "fill": "fill"; "themeColor": "themeColor"; "shape": "shape"; "position": "position"; "cutoutBorder": "cutoutBorder"; }, {}, never, ["*"]>;
136
+ static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "kendo-badge", never, { "align": "align"; "size": "size"; "fill": "fill"; "themeColor": "themeColor"; "rounded": "rounded"; "position": "position"; "cutoutBorder": "cutoutBorder"; }, {}, never, ["*"]>;
126
137
  }
package/badge/models/fill.d.ts CHANGED
@@ -11,4 +11,4 @@
11
11
  * * `outline`
12
12
  *
13
13
  */
14
- export declare type BadgeFill = 'solid' | 'outline';
14
+ export declare type BadgeFill = 'solid' | 'outline' | 'none';
package/badge/models/rounded.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ /**
6
+ * Specifies the roundness of the Badge
7
+ * ([see example]({% slug appearance_badge %}#toc-rounded)).
8
+ *
9
+ * The possible values are:
10
+ * * `small`&mdash;Sets the `border radius` to `1px`.
11
+ * * `medium` (Default)&mdash;Sets the `border radius` to `2px`.
12
+ * * `large`&mdash;Sets the `border radius` to `4px`.
13
+ * * `full`&mdash;Sets the `border radius` to `9999px`.
14
+ * * `none`&mdash;The none option removes the built-in roundness. Allows for custom `border radius`.
15
+ *
16
+ */
17
+ export declare type BadgeRounded = 'small' | 'medium' | 'large' | 'full' | 'none';
package/badge/models/size.d.ts CHANGED
@@ -12,4 +12,4 @@
12
12
  * * `large`
13
13
  *
14
14
  */
15
- export declare type BadgeSize = 'small' | 'medium' | 'large';
15
+ export declare type BadgeSize = 'small' | 'medium' | 'large' | 'none';
package/badge/models/theme-color.d.ts CHANGED
@@ -20,4 +20,4 @@
20
20
  * * `inverse`&mdash; Applies coloring based on inverted theme color.
21
21
  *
22
22
  */
23
- export declare type BadgeThemeColor = 'primary' | 'secondary' | 'tertiary' | 'inherit' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
23
+ export declare type BadgeThemeColor = 'primary' | 'secondary' | 'tertiary' | 'inherit' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'none';
package/bundles/kendo-angular-indicators.umd.js CHANGED
@@ -2,4 +2,4 @@
2
2
  * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-angular-l10n"),require("@progress/kendo-licensing"),require("@angular/common")):"function"==typeof define&&define.amd?define("KendoAngularIndicators",["exports","@angular/core","@progress/kendo-angular-l10n","@progress/kendo-licensing","@angular/common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularIndicators={},e.ng.core,e.KendoAngularL10N,e.KendoLicensing,e.ng.common)}(this,function(e,t,n,r,o){"use strict";function i(n){if(n&&n.__esModule)return n;var o=Object.create(null);return n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),o.default=n,Object.freeze(o)}var s=i(t),a=i(n),l=i(o),p={name:"@progress/kendo-angular-indicators",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1650441023,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"},c={small:"k-badge-sm",medium:"k-badge-md",large:"k-badge-lg"},d=(Object.defineProperty(g.prototype,"cutoutBorderClass",{get:function(){return this.cutoutBorder},enumerable:!1,configurable:!0}),Object.defineProperty(g.prototype,"align",{get:function(){return this.badgeAlign},set:function(e){this.badgeAlign=Object.assign(this.badgeAlign,e)},enumerable:!1,configurable:!0}),g.prototype.ngAfterViewInit=function(){this.badgeClasses.length||this.setBadgeClasses()},g.prototype.ngOnChanges=function(){this.setBadgeClasses()},g.prototype.ngOnDestroy=function(){this.dynamicRTLSubscription&&this.dynamicRTLSubscription.unsubscribe()},g.prototype.alignClass=function(){return"k-"+this.badgeAlign.vertical+"-"+this.badgeAlign.horizontal},g.prototype.positionClass=function(){return"k-badge-"+this.position},g.prototype.sizeClass=function(){return c[this.size]},g.prototype.shapeClass=function(){return"k-badge-"+this.shape},g.prototype.themeColorClass=function(){return"k-badge-"+this.themeColor},g.prototype.fillClass=function(){return"k-badge-"+this.fill},g.prototype.setBadgeClasses=function(){var t=this,n=this.element.nativeElement;this.badgeClasses.forEach(function(e){t.renderer.removeClass(n,e)}),this.badgeClasses=[this.themeColorClass(),this.fillClass(),this.sizeClass(),this.shapeClass(),this.alignClass(),this.positionClass()],this.badgeClasses.forEach(function(e){t.renderer.addClass(n,e)})},g);function g(e,t,n){var o=this;this.element=e,this.renderer=t,this.localizationService=n,this.hostClass=!0,this.size="medium",this.fill="solid",this.themeColor="primary",this.shape="circle",this.position="edge",this.cutoutBorder=!1,this.badgeClasses=[],this.badgeAlign={vertical:"top",horizontal:"end"},this.rtl=!1,r.validatePackage(p),this.dynamicRTLSubscription=this.localizationService.changes.subscribe(function(e){e=e.rtl;o.rtl=e,o.direction=o.rtl?"rtl":"ltr"})}d.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:d,deps:[{token:s.ElementRef},{token:s.Renderer2},{token:a.LocalizationService}],target:s.ɵɵFactoryTarget.Component}),d.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:d,selector:"kendo-badge",inputs:{align:"align",size:"size",fill:"fill",themeColor:"themeColor",shape:"shape",position:"position",cutoutBorder:"cutoutBorder"},host:{properties:{"class.k-badge":"this.hostClass","class.k-badge-border-cutout":"this.cutoutBorderClass","attr.dir":"this.direction"}},providers:[n.LocalizationService,{provide:n.L10N_PREFIX,useValue:"kendo.badge.component"}],usesOnChanges:!0,ngImport:s,template:"<ng-content></ng-content>",isInline:!0}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:d,decorators:[{type:t.Component,args:[{selector:"kendo-badge",providers:[n.LocalizationService,{provide:n.L10N_PREFIX,useValue:"kendo.badge.component"}],template:"<ng-content></ng-content>"}]}],ctorParameters:function(){return[{type:s.ElementRef},{type:s.Renderer2},{type:a.LocalizationService}]},propDecorators:{hostClass:[{type:t.HostBinding,args:["class.k-badge"]}],cutoutBorderClass:[{type:t.HostBinding,args:["class.k-badge-border-cutout"]}],direction:[{type:t.HostBinding,args:["attr.dir"]}],align:[{type:t.Input}],size:[{type:t.Input}],fill:[{type:t.Input}],themeColor:[{type:t.Input}],shape:[{type:t.Input}],position:[{type:t.Input}],cutoutBorder:[{type:t.Input}]}});Object.create;function u(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,i=n.call(e),s=[];try{for(;(void 0===t||0<t--)&&!(o=i.next()).done;)s.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return s}function m(e,t,n){if(n||2===arguments.length)for(var o,r=0,i=t.length;r<i;r++)!o&&r in t||((o=o||Array.prototype.slice.call(t,0,r))[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))}Object.create;y.prototype.ngOnDestroy=function(){this.dynamicRTLSubscription&&this.dynamicRTLSubscription.unsubscribe()};var h=y;function y(e){var t=this;this.localizationService=e,this.hostClass=!0,this.rtl=!1,this.dynamicRTLSubscription=this.localizationService.changes.subscribe(function(e){e=e.rtl;t.rtl=e,t.direction=t.rtl?"rtl":"ltr"})}h.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:h,deps:[{token:a.LocalizationService}],target:s.ɵɵFactoryTarget.Component}),h.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:h,selector:"kendo-badge-container",host:{properties:{"class.k-badge-container":"this.hostClass","attr.dir":"this.direction"}},providers:[n.LocalizationService,{provide:n.L10N_PREFIX,useValue:"kendo.badge.component"}],ngImport:s,template:"<ng-content></ng-content>",isInline:!0}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:h,decorators:[{type:t.Component,args:[{selector:"kendo-badge-container",providers:[n.LocalizationService,{provide:n.L10N_PREFIX,useValue:"kendo.badge.component"}],template:"<ng-content></ng-content>"}]}],ctorParameters:function(){return[{type:a.LocalizationService}]},propDecorators:{hostClass:[{type:t.HostBinding,args:["class.k-badge-container"]}],direction:[{type:t.HostBinding,args:["attr.dir"]}]}});var n=[d,h],f=m([],u(n)),C=function(){},v=(C.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:C,deps:[],target:s.ɵɵFactoryTarget.NgModule}),C.ɵmod=s.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:C,declarations:[d,h],imports:[o.CommonModule],exports:[d,h]}),C.ɵinj=s.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:C,imports:[[o.CommonModule]]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:C,decorators:[{type:t.NgModule,args:[{declarations:[f],exports:[n],imports:[o.CommonModule]}]}]}),{small:"k-loader-sm",medium:"k-loader-md",large:"k-loader-lg"}),b={pulsing:2,"infinite-spinner":3,"converging-spinner":4},k={pulsing:"k-loader-pulsing-2","infinite-spinner":"k-loader-spinner-3","converging-spinner":"k-loader-spinner-4"},f=(Object.defineProperty(I.prototype,"type",{get:function(){return this._type},set:function(e){this.renderer.removeClass(this.loader,k[this.type]),this.renderer.addClass(this.loader,k[e]),this._type=e},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"themeColor",{get:function(){return this._themeColor},set:function(e){this.renderer.removeClass(this.loader,"k-loader-"+this.themeColor),this.renderer.addClass(this.loader,"k-loader-"+e),this._themeColor=e},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"size",{get:function(){return this._size},set:function(e){this.renderer.removeClass(this.loader,v[this.size]),this.renderer.addClass(this.loader,v[e]),this._size=e},enumerable:!1,configurable:!0}),I.prototype.ngAfterViewInit=function(){this.setLoaderClasses()},Object.defineProperty(I.prototype,"segmentCount",{get:function(){return new Array(b[this.type])},enumerable:!1,configurable:!0}),I.prototype.setLoaderClasses=function(){this.renderer.addClass(this.loader,k[this.type]),this.renderer.addClass(this.loader,"k-loader-"+this.themeColor),this.renderer.addClass(this.loader,v[this.size])},I);function I(e,t){this.element=e,this.renderer=t,this.hostClass=!0,this._type="pulsing",this._themeColor="primary",this._size="medium",this.loader=this.element.nativeElement,r.validatePackage(p)}f.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:f,deps:[{token:s.ElementRef},{token:s.Renderer2}],target:s.ɵɵFactoryTarget.Component}),f.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:f,selector:"kendo-loader",inputs:{type:"type",themeColor:"themeColor",size:"size"},host:{properties:{"class.k-loader":"this.hostClass"}},ngImport:s,template:'\n <div class="k-loader-canvas">\n <span *ngFor="let segment of segmentCount" class="k-loader-segment"></span>\n </div>\n ',isInline:!0,directives:[{type:l.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:f,decorators:[{type:t.Component,args:[{selector:"kendo-loader",template:'\n <div class="k-loader-canvas">\n <span *ngFor="let segment of segmentCount" class="k-loader-segment"></span>\n </div>\n '}]}],ctorParameters:function(){return[{type:s.ElementRef},{type:s.Renderer2}]},propDecorators:{hostClass:[{type:t.HostBinding,args:["class.k-loader"]}],type:[{type:t.Input}],themeColor:[{type:t.Input}],size:[{type:t.Input}]}});var n=[f],l=m([],u(n)),D=function(){},M=(D.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:D,deps:[],target:s.ɵɵFactoryTarget.NgModule}),D.ɵmod=s.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:D,declarations:[f],imports:[o.CommonModule],exports:[f]}),D.ɵinj=s.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:D,imports:[[o.CommonModule]]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:D,decorators:[{type:t.NgModule,args:[{declarations:[l],exports:[n],imports:[o.CommonModule]}]}]}),[!1,"pulse","wave"]),V=["circle","rectangle","text"],E={pulse:"k-skeleton-pulse",wave:"k-skeleton-wave"},O={rectangle:"k-skeleton-rect",circle:"k-skeleton-circle",text:"k-skeleton-text"},l=(Object.defineProperty(z.prototype,"animation",{get:function(){return this._animation},set:function(e){if(t.isDevMode()&&-1===M.indexOf(e))throw new Error('"'+e+"\" is not a valid kendo-skeleton animation. Valid values are: 'pulse' | 'wave' | false.");this.animation&&this.renderer.removeClass(this.hostElement.nativeElement,E[this.animation]),e&&this.renderer.addClass(this.hostElement.nativeElement,E[e]),this._animation=e},enumerable:!1,configurable:!0}),Object.defineProperty(z.prototype,"shape",{get:function(){return this._shape},set:function(e){if(t.isDevMode()&&-1===V.indexOf(e))throw new Error('"'+e+'" is not a valid kendo-skeleton shape. Valid shapes are: '+V.map(function(e){return'"'+e+'"'}).join(" | ")+".");this.renderer.removeClass(this.hostElement.nativeElement,O[this.shape]),this.renderer.addClass(this.hostElement.nativeElement,O[e]),this._shape=e},enumerable:!1,configurable:!0}),Object.defineProperty(z.prototype,"width",{set:function(e){this.renderer.setStyle(this.hostElement.nativeElement,"width","string"==typeof e?e:e+"px")},enumerable:!1,configurable:!0}),Object.defineProperty(z.prototype,"height",{set:function(e){this.renderer.setStyle(this.hostElement.nativeElement,"height","string"==typeof e?e:e+"px")},enumerable:!1,configurable:!0}),z.prototype.ngAfterViewInit=function(){var e=this.hostElement.nativeElement;e.classList.add("k-skeleton",O[this.shape]),this.animation&&e.classList.add(E[this.animation])},z);function z(e,t){this.renderer=e,this.hostElement=t,this._animation="pulse",this._shape="text"}l.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:l,deps:[{token:s.Renderer2},{token:s.ElementRef}],target:s.ɵɵFactoryTarget.Component}),l.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:l,selector:"kendo-skeleton",inputs:{animation:"animation",shape:"shape",width:"width",height:"height"},ngImport:s,template:"",isInline:!0,changeDetection:s.ChangeDetectionStrategy.OnPush}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:l,decorators:[{type:t.Component,args:[{selector:"kendo-skeleton",changeDetection:t.ChangeDetectionStrategy.OnPush,template:""}]}],ctorParameters:function(){return[{type:s.Renderer2},{type:s.ElementRef}]},propDecorators:{animation:[{type:t.Input}],shape:[{type:t.Input}],width:[{type:t.Input}],height:[{type:t.Input}]}});n=function(){},n.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:n,deps:[],target:s.ɵɵFactoryTarget.NgModule}),n.ɵmod=s.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:n,declarations:[l],imports:[o.CommonModule],exports:[l]}),n.ɵinj=s.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:n,imports:[[o.CommonModule]]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:n,decorators:[{type:t.NgModule,args:[{declarations:[l],exports:[l],imports:[o.CommonModule]}]}]}),o=function(){};o.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:o,deps:[],target:s.ɵɵFactoryTarget.NgModule}),o.ɵmod=s.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:o,exports:[C,D,n]}),o.ɵinj=s.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:o,imports:[C,D,n]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:o,decorators:[{type:t.NgModule,args:[{exports:[C,D,n]}]}]}),e.BadgeComponent=d,e.BadgeContainerComponent=h,e.BadgeModule=C,e.IndicatorsModule=o,e.LoaderComponent=f,e.LoaderModule=D,e.SkeletonComponent=l,e.SkeletonModule=n,Object.defineProperty(e,"__esModule",{value:!0})});
5
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-angular-l10n"),require("@progress/kendo-licensing"),require("@angular/common")):"function"==typeof define&&define.amd?define("KendoAngularIndicators",["exports","@angular/core","@progress/kendo-angular-l10n","@progress/kendo-licensing","@angular/common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularIndicators={},e.ng.core,e.KendoAngularL10N,e.KendoLicensing,e.ng.common)}(this,function(e,t,n,r,o){"use strict";function i(n){var o;return n&&n.__esModule?n:(o=Object.create(null),n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),o.default=n,Object.freeze(o))}var s=i(t),a=i(n),l=i(o),p={name:"@progress/kendo-angular-indicators",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1662560634,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"},d={small:"k-badge-sm",medium:"k-badge-md",large:"k-badge-lg"},c={small:"k-rounded-sm",medium:"k-rounded-md",large:"k-rounded-lg",full:"k-rounded-full"},g=(Object.defineProperty(u.prototype,"cutoutBorderClass",{get:function(){return this.cutoutBorder},enumerable:!1,configurable:!0}),Object.defineProperty(u.prototype,"align",{get:function(){return this.badgeAlign},set:function(e){this.badgeAlign=Object.assign(this.badgeAlign,e)},enumerable:!1,configurable:!0}),u.prototype.ngAfterViewInit=function(){this.badgeClasses.length||this.setBadgeClasses()},u.prototype.ngOnChanges=function(){this.setBadgeClasses()},u.prototype.ngOnDestroy=function(){this.dynamicRTLSubscription&&this.dynamicRTLSubscription.unsubscribe()},u.prototype.alignClass=function(){return"k-"+this.badgeAlign.vertical+"-"+this.badgeAlign.horizontal},u.prototype.positionClass=function(){return"k-badge-"+this.position},u.prototype.sizeClass=function(){return"none"!==this.size?d[this.size]:""},u.prototype.roundedClass=function(){return"none"!==this.rounded?c[this.rounded]:""},u.prototype.themeColorClass=function(){return"none"!==this.themeColor&&"none"!==this.fill?"k-badge-"+this.fill+"-"+this.themeColor:""},u.prototype.fillClass=function(){return"none"!==this.fill?"k-badge-"+this.fill:""},u.prototype.setBadgeClasses=function(){var t=this,n=this.element.nativeElement;this.badgeClasses.forEach(function(e){t.renderer.removeClass(n,e)}),this.badgeClasses=[this.themeColorClass(),this.fillClass(),this.sizeClass(),this.roundedClass(),this.alignClass(),this.positionClass()],this.badgeClasses.forEach(function(e){e&&t.renderer.addClass(n,e)})},u);function u(e,t,n){var o=this;this.element=e,this.renderer=t,this.localizationService=n,this.hostClass=!0,this.size="medium",this.fill="solid",this.themeColor="primary",this.rounded="medium",this.position="edge",this.cutoutBorder=!1,this.badgeClasses=[],this.badgeAlign={vertical:"top",horizontal:"end"},this.rtl=!1,r.validatePackage(p),this.dynamicRTLSubscription=this.localizationService.changes.subscribe(function(e){e=e.rtl;o.rtl=e,o.direction=o.rtl?"rtl":"ltr"})}g.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:g,deps:[{token:s.ElementRef},{token:s.Renderer2},{token:a.LocalizationService}],target:s.ɵɵFactoryTarget.Component}),g.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:g,selector:"kendo-badge",inputs:{align:"align",size:"size",fill:"fill",themeColor:"themeColor",rounded:"rounded",position:"position",cutoutBorder:"cutoutBorder"},host:{properties:{"class.k-badge":"this.hostClass","class.k-badge-border-cutout":"this.cutoutBorderClass","attr.dir":"this.direction"}},providers:[n.LocalizationService,{provide:n.L10N_PREFIX,useValue:"kendo.badge.component"}],usesOnChanges:!0,ngImport:s,template:"<ng-content></ng-content>",isInline:!0}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:g,decorators:[{type:t.Component,args:[{selector:"kendo-badge",providers:[n.LocalizationService,{provide:n.L10N_PREFIX,useValue:"kendo.badge.component"}],template:"<ng-content></ng-content>"}]}],ctorParameters:function(){return[{type:s.ElementRef},{type:s.Renderer2},{type:a.LocalizationService}]},propDecorators:{hostClass:[{type:t.HostBinding,args:["class.k-badge"]}],cutoutBorderClass:[{type:t.HostBinding,args:["class.k-badge-border-cutout"]}],direction:[{type:t.HostBinding,args:["attr.dir"]}],align:[{type:t.Input}],size:[{type:t.Input}],fill:[{type:t.Input}],themeColor:[{type:t.Input}],rounded:[{type:t.Input}],position:[{type:t.Input}],cutoutBorder:[{type:t.Input}]}});Object.create;function m(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,i=n.call(e),s=[];try{for(;(void 0===t||0<t--)&&!(o=i.next()).done;)s.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return s}function h(e,t,n){if(n||2===arguments.length)for(var o,r=0,i=t.length;r<i;r++)!o&&r in t||((o=o||Array.prototype.slice.call(t,0,r))[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))}Object.create;f.prototype.ngOnDestroy=function(){this.dynamicRTLSubscription&&this.dynamicRTLSubscription.unsubscribe()};var y=f;function f(e){var t=this;this.localizationService=e,this.hostClass=!0,this.rtl=!1,this.dynamicRTLSubscription=this.localizationService.changes.subscribe(function(e){e=e.rtl;t.rtl=e,t.direction=t.rtl?"rtl":"ltr"})}y.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:y,deps:[{token:a.LocalizationService}],target:s.ɵɵFactoryTarget.Component}),y.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:y,selector:"kendo-badge-container",host:{properties:{"class.k-badge-container":"this.hostClass","attr.dir":"this.direction"}},providers:[n.LocalizationService,{provide:n.L10N_PREFIX,useValue:"kendo.badge.component"}],ngImport:s,template:"<ng-content></ng-content>",isInline:!0}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:y,decorators:[{type:t.Component,args:[{selector:"kendo-badge-container",providers:[n.LocalizationService,{provide:n.L10N_PREFIX,useValue:"kendo.badge.component"}],template:"<ng-content></ng-content>"}]}],ctorParameters:function(){return[{type:a.LocalizationService}]},propDecorators:{hostClass:[{type:t.HostBinding,args:["class.k-badge-container"]}],direction:[{type:t.HostBinding,args:["attr.dir"]}]}});var n=[g,y],C=h([],m(n)),v=function(){},b=(v.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:v,deps:[],target:s.ɵɵFactoryTarget.NgModule}),v.ɵmod=s.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:v,declarations:[g,y],imports:[o.CommonModule],exports:[g,y]}),v.ɵinj=s.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:v,imports:[[o.CommonModule]]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:v,decorators:[{type:t.NgModule,args:[{declarations:[C],exports:[n],imports:[o.CommonModule]}]}]}),{small:"k-loader-sm",medium:"k-loader-md",large:"k-loader-lg"}),k={pulsing:2,"infinite-spinner":3,"converging-spinner":4},I={pulsing:"k-loader-pulsing-2","infinite-spinner":"k-loader-spinner-3","converging-spinner":"k-loader-spinner-4"},C=(Object.defineProperty(D.prototype,"type",{get:function(){return this._type},set:function(e){this.renderer.removeClass(this.loader,I[this.type]),this.renderer.addClass(this.loader,I[e]),this._type=e},enumerable:!1,configurable:!0}),Object.defineProperty(D.prototype,"themeColor",{get:function(){return this._themeColor},set:function(e){this.renderer.removeClass(this.loader,"k-loader-"+this.themeColor),this.renderer.addClass(this.loader,"k-loader-"+e),this._themeColor=e},enumerable:!1,configurable:!0}),Object.defineProperty(D.prototype,"size",{get:function(){return this._size},set:function(e){this.renderer.removeClass(this.loader,b[this.size]),this.renderer.addClass(this.loader,b[e]),this._size=e},enumerable:!1,configurable:!0}),D.prototype.ngAfterViewInit=function(){this.setLoaderClasses()},Object.defineProperty(D.prototype,"segmentCount",{get:function(){return new Array(k[this.type])},enumerable:!1,configurable:!0}),D.prototype.setLoaderClasses=function(){this.renderer.addClass(this.loader,I[this.type]),this.renderer.addClass(this.loader,"k-loader-"+this.themeColor),this.renderer.addClass(this.loader,b[this.size])},D);function D(e,t){this.element=e,this.renderer=t,this.hostClass=!0,this._type="pulsing",this._themeColor="primary",this._size="medium",this.loader=this.element.nativeElement,r.validatePackage(p)}C.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:C,deps:[{token:s.ElementRef},{token:s.Renderer2}],target:s.ɵɵFactoryTarget.Component}),C.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:C,selector:"kendo-loader",inputs:{type:"type",themeColor:"themeColor",size:"size"},host:{properties:{"class.k-loader":"this.hostClass"}},ngImport:s,template:'\n <div class="k-loader-canvas">\n <span *ngFor="let segment of segmentCount" class="k-loader-segment"></span>\n </div>\n ',isInline:!0,directives:[{type:l.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:C,decorators:[{type:t.Component,args:[{selector:"kendo-loader",template:'\n <div class="k-loader-canvas">\n <span *ngFor="let segment of segmentCount" class="k-loader-segment"></span>\n </div>\n '}]}],ctorParameters:function(){return[{type:s.ElementRef},{type:s.Renderer2}]},propDecorators:{hostClass:[{type:t.HostBinding,args:["class.k-loader"]}],type:[{type:t.Input}],themeColor:[{type:t.Input}],size:[{type:t.Input}]}});var n=[C],l=h([],m(n)),M=function(){},V=(M.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:M,deps:[],target:s.ɵɵFactoryTarget.NgModule}),M.ɵmod=s.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:M,declarations:[C],imports:[o.CommonModule],exports:[C]}),M.ɵinj=s.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:M,imports:[[o.CommonModule]]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:M,decorators:[{type:t.NgModule,args:[{declarations:[l],exports:[n],imports:[o.CommonModule]}]}]}),[!1,"pulse","wave"]),E=["circle","rectangle","text"],O={pulse:"k-skeleton-pulse",wave:"k-skeleton-wave"},z={rectangle:"k-skeleton-rect",circle:"k-skeleton-circle",text:"k-skeleton-text"},l=(Object.defineProperty(j.prototype,"animation",{get:function(){return this._animation},set:function(e){if(t.isDevMode()&&-1===V.indexOf(e))throw new Error('"'+e+"\" is not a valid kendo-skeleton animation. Valid values are: 'pulse' | 'wave' | false.");this.animation&&this.renderer.removeClass(this.hostElement.nativeElement,O[this.animation]),e&&this.renderer.addClass(this.hostElement.nativeElement,O[e]),this._animation=e},enumerable:!1,configurable:!0}),Object.defineProperty(j.prototype,"shape",{get:function(){return this._shape},set:function(e){if(t.isDevMode()&&-1===E.indexOf(e))throw new Error('"'+e+'" is not a valid kendo-skeleton shape. Valid shapes are: '+E.map(function(e){return'"'+e+'"'}).join(" | ")+".");this.renderer.removeClass(this.hostElement.nativeElement,z[this.shape]),this.renderer.addClass(this.hostElement.nativeElement,z[e]),this._shape=e},enumerable:!1,configurable:!0}),Object.defineProperty(j.prototype,"width",{set:function(e){this.renderer.setStyle(this.hostElement.nativeElement,"width","string"==typeof e?e:e+"px")},enumerable:!1,configurable:!0}),Object.defineProperty(j.prototype,"height",{set:function(e){this.renderer.setStyle(this.hostElement.nativeElement,"height","string"==typeof e?e:e+"px")},enumerable:!1,configurable:!0}),j.prototype.ngAfterViewInit=function(){var e=this.hostElement.nativeElement;e.classList.add("k-skeleton",z[this.shape]),this.animation&&e.classList.add(O[this.animation])},j);function j(e,t){this.renderer=e,this.hostElement=t,this._animation="pulse",this._shape="text"}l.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:l,deps:[{token:s.Renderer2},{token:s.ElementRef}],target:s.ɵɵFactoryTarget.Component}),l.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:l,selector:"kendo-skeleton",inputs:{animation:"animation",shape:"shape",width:"width",height:"height"},ngImport:s,template:"",isInline:!0,changeDetection:s.ChangeDetectionStrategy.OnPush}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:l,decorators:[{type:t.Component,args:[{selector:"kendo-skeleton",changeDetection:t.ChangeDetectionStrategy.OnPush,template:""}]}],ctorParameters:function(){return[{type:s.Renderer2},{type:s.ElementRef}]},propDecorators:{animation:[{type:t.Input}],shape:[{type:t.Input}],width:[{type:t.Input}],height:[{type:t.Input}]}});n=function(){},n.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:n,deps:[],target:s.ɵɵFactoryTarget.NgModule}),n.ɵmod=s.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:n,declarations:[l],imports:[o.CommonModule],exports:[l]}),n.ɵinj=s.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:n,imports:[[o.CommonModule]]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:n,decorators:[{type:t.NgModule,args:[{declarations:[l],exports:[l],imports:[o.CommonModule]}]}]}),o=function(){};o.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:o,deps:[],target:s.ɵɵFactoryTarget.NgModule}),o.ɵmod=s.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:o,exports:[v,M,n]}),o.ɵinj=s.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:o,imports:[v,M,n]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:o,decorators:[{type:t.NgModule,args:[{exports:[v,M,n]}]}]}),e.BadgeComponent=g,e.BadgeContainerComponent=y,e.BadgeModule=v,e.IndicatorsModule=o,e.LoaderComponent=C,e.LoaderModule=M,e.SkeletonComponent=l,e.SkeletonModule=n,Object.defineProperty(e,"__esModule",{value:!0})});
package/esm2015/badge/badge.component.js CHANGED
@@ -13,6 +13,12 @@ const SIZE_CLASSES = {
13
13
  'medium': 'k-badge-md',
14
14
  'large': 'k-badge-lg'
15
15
  };
16
+ const ROUNDED_CLASSES = {
17
+ 'small': 'k-rounded-sm',
18
+ 'medium': 'k-rounded-md',
19
+ 'large': 'k-rounded-lg',
20
+ 'full': 'k-rounded-full'
21
+ };
16
22
  /**
17
23
  * Represents the [Kendo UI Badge component for Angular]({% slug overview_badge %}).
18
24
  * Used to display additional information or status that is related to an element.
@@ -24,72 +30,82 @@ export class BadgeComponent {
24
30
  this.localizationService = localizationService;
25
31
  this.hostClass = true;
26
32
  /**
27
- * Specifies the size of the Badge.
33
+ * Specifies the size of the Badge ([see example]({% slug appearance_badge %}#toc-alignment)).
28
34
  *
29
35
  * The possible values are:
30
36
  * * `small`
31
- * * `medium` (Default)
37
+ * * `medium`
32
38
  * * `large`
39
+ * * `none`
33
40
  *
41
+ * @default medium
34
42
  */
35
43
  this.size = 'medium';
36
44
  /**
37
- * Specifies the appearance fill style of the Badge.
45
+ * Specifies the appearance fill style of the Badge ([see example]({% slug appearance_badge %}#toc-fill)).
38
46
  *
39
47
  * The possible values are:
40
- * * `solid` (Default)
48
+ * * `solid`
41
49
  * * `outline`
50
+ * * `none`
42
51
  *
52
+ * @default solid
43
53
  */
44
54
  this.fill = 'solid';
45
55
  /**
46
56
  * Specifies the theme color of the Badge.
47
- * The theme color will be applied as background and border color, while also amending the text color accordingly.
57
+ * The theme color will be applied as background and border color, while also amending the text color accordingly
58
+ * ([see example]({% slug appearance_badge %}#toc-themeColor)).
48
59
  *
49
60
  * The possible values are:
50
- * * `primary` (Default)&mdash;Applies coloring based on primary theme color.
51
- * * `secondary`&mdash;Applies coloring based on secondary theme color.
52
- * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
53
- * * `inherit`&mdash; Applies inherited coloring value.
54
- * * `info`&mdash;Applies coloring based on info theme color.
55
- * * `success`&mdash; Applies coloring based on success theme color.
56
- * * `warning`&mdash; Applies coloring based on warning theme color.
57
- * * `error`&mdash; Applies coloring based on error theme color.
58
- * * `dark`&mdash; Applies coloring based on dark theme color.
59
- * * `light`&mdash; Applies coloring based on light theme color.
60
- * * `inverse`&mdash; Applies coloring based on inverted theme color.
61
+ * * `primary`
62
+ * * `secondary`
63
+ * * `tertiary`
64
+ * * `inherit`
65
+ * * `info`
66
+ * * `success`
67
+ * * `warning`
68
+ * * `error`
69
+ * * `dark`
70
+ * * `light`
71
+ * * `inverse`
72
+ * * `none`
61
73
  *
74
+ * @default primary
62
75
  */
63
76
  this.themeColor = 'primary';
64
77
  /**
65
- * Specifies the shape of the Badge.
78
+ * Specifies the roundness of the Badge ([see example]({% slug appearance_badge %}#toc-rounded)).
66
79
  *
67
80
  * The possible values are:
68
- * * `circle` (Default)&mdash;Applies circular shape on the Badge.
69
- * * `rectangle`&mdash;Applies rectangular shape on the Badge.
70
- * * `rounded`&mdash;Applies rounded shape on the Badge.
71
- * * `dot`&mdash;Applies dot shape on the Badge.
72
- * * `pill`&mdash;Applies border radius equal to half of the height of the Badge.
81
+ * * `small`
82
+ * * `medium`
83
+ * * `large`
84
+ * * `full`
85
+ * * `none`
73
86
  *
87
+ * @default medium
74
88
  */
75
- this.shape = 'circle';
89
+ this.rounded = 'medium';
76
90
  /**
77
- * Specifies the position of the Badge relative to the edge of the parent container element.
91
+ * Specifies the position of the Badge relative to the edge of the parent container element ([see example]({% slug alignandposition_badge %}#toc-position)).
78
92
  *
79
93
  * The possible values are:
80
- * * `edge` (Default)&mdash;The center of the Badge is positioned on the edge of the parent container element.
81
- * * `inside`&mdash;The Badge is entirely positioned inside the edge of the parent container element.
82
- * * `outside`&mdash;The Badge is entirely positioned outside the edge of the parent container element.
94
+ * * `edge`
95
+ * * `inside`
96
+ * * `outside`
83
97
  *
98
+ * @default edge
84
99
  */
85
100
  this.position = 'edge';
86
101
  /**
87
- * Specifies whether or not to render additional `cutout` border around the Badge.
102
+ * Specifies whether or not to render additional `cutout` border around the Badge ([see example]({% slug appearance_badge %}#toc-cutoutBorder)).
88
103
  *
89
104
  * The possible values are:
90
105
  * * `true`
91
- * * `false` (Default)
106
+ * * `false`
92
107
  *
108
+ * @default false
93
109
  */
94
110
  this.cutoutBorder = false;
95
111
  this.badgeClasses = [];
@@ -105,14 +121,15 @@ export class BadgeComponent {
105
121
  return this.cutoutBorder;
106
122
  }
107
123
  /**
108
- * Specifies the alignment of the Badge.
124
+ * Specifies the alignment of the Badge ([see example]({% slug alignandposition_badge %}#toc-alignment)).
109
125
  *
110
126
  * The possible values are:
111
- * * `{ vertical: 'top', horizontal: 'end' }` (Default)
127
+ * * `{ vertical: 'top', horizontal: 'end' }`
112
128
  * * `{ vertical: 'top', horizontal: 'start' }`
113
129
  * * `{ vertical: 'bottom', horizontal: 'start' }`
114
130
  * * `{ vertical: 'bottom', horizontal: 'end' }`
115
131
  *
132
+ * @default "{ vertical: 'top', horizontal: 'end' }"
116
133
  */
117
134
  get align() {
118
135
  return this.badgeAlign;
@@ -140,16 +157,28 @@ export class BadgeComponent {
140
157
  return `k-badge-${this.position}`;
141
158
  }
142
159
  sizeClass() {
143
- return SIZE_CLASSES[this.size];
160
+ if (this.size !== 'none') {
161
+ return SIZE_CLASSES[this.size];
162
+ }
163
+ return '';
144
164
  }
145
- shapeClass() {
146
- return `k-badge-${this.shape}`;
165
+ roundedClass() {
166
+ if (this.rounded !== 'none') {
167
+ return ROUNDED_CLASSES[this.rounded];
168
+ }
169
+ return '';
147
170
  }
148
171
  themeColorClass() {
149
- return `k-badge-${this.themeColor}`;
172
+ if (this.themeColor !== 'none' && this.fill !== 'none') {
173
+ return `k-badge-${this.fill}-${this.themeColor}`;
174
+ }
175
+ return '';
150
176
  }
151
177
  fillClass() {
152
- return `k-badge-${this.fill}`;
178
+ if (this.fill !== 'none') {
179
+ return `k-badge-${this.fill}`;
180
+ }
181
+ return '';
153
182
  }
154
183
  setBadgeClasses() {
155
184
  const element = this.element.nativeElement;
@@ -160,17 +189,19 @@ export class BadgeComponent {
160
189
  this.themeColorClass(),
161
190
  this.fillClass(),
162
191
  this.sizeClass(),
163
- this.shapeClass(),
192
+ this.roundedClass(),
164
193
  this.alignClass(),
165
194
  this.positionClass()
166
195
  ];
167
196
  this.badgeClasses.forEach((className) => {
168
- this.renderer.addClass(element, className);
197
+ if (className) {
198
+ this.renderer.addClass(element, className);
199
+ }
169
200
  });
170
201
  }
171
202
  }
172
203
  BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BadgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
173
- BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BadgeComponent, selector: "kendo-badge", inputs: { align: "align", size: "size", fill: "fill", themeColor: "themeColor", shape: "shape", position: "position", cutoutBorder: "cutoutBorder" }, host: { properties: { "class.k-badge": "this.hostClass", "class.k-badge-border-cutout": "this.cutoutBorderClass", "attr.dir": "this.direction" } }, providers: [
204
+ BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BadgeComponent, selector: "kendo-badge", inputs: { align: "align", size: "size", fill: "fill", themeColor: "themeColor", rounded: "rounded", position: "position", cutoutBorder: "cutoutBorder" }, host: { properties: { "class.k-badge": "this.hostClass", "class.k-badge-border-cutout": "this.cutoutBorderClass", "attr.dir": "this.direction" } }, providers: [
174
205
  LocalizationService,
175
206
  {
176
207
  provide: L10N_PREFIX,
@@ -207,7 +238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
207
238
  type: Input
208
239
  }], themeColor: [{
209
240
  type: Input
210
- }], shape: [{
241
+ }], rounded: [{
211
242
  type: Input
212
243
  }], position: [{
213
244
  type: Input
package/esm2015/badge/models/{shape.js → rounded.js} RENAMED
File without changes
package/esm2015/package-metadata.js CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-indicators',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1650441023,
12
+ publishDate: 1662560634,
13
13
  version: '',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
15
15
  };
package/fesm2015/kendo-angular-indicators.js CHANGED
@@ -17,7 +17,7 @@ const packageMetadata = {
17
17
  name: '@progress/kendo-angular-indicators',
18
18
  productName: 'Kendo UI for Angular',
19
19
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
20
- publishDate: 1650441023,
20
+ publishDate: 1662560634,
21
21
  version: '',
22
22
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
23
23
  };
@@ -27,6 +27,12 @@ const SIZE_CLASSES$1 = {
27
27
  'medium': 'k-badge-md',
28
28
  'large': 'k-badge-lg'
29
29
  };
30
+ const ROUNDED_CLASSES = {
31
+ 'small': 'k-rounded-sm',
32
+ 'medium': 'k-rounded-md',
33
+ 'large': 'k-rounded-lg',
34
+ 'full': 'k-rounded-full'
35
+ };
30
36
  /**
31
37
  * Represents the [Kendo UI Badge component for Angular]({% slug overview_badge %}).
32
38
  * Used to display additional information or status that is related to an element.
@@ -38,72 +44,82 @@ class BadgeComponent {
38
44
  this.localizationService = localizationService;
39
45
  this.hostClass = true;
40
46
  /**
41
- * Specifies the size of the Badge.
47
+ * Specifies the size of the Badge ([see example]({% slug appearance_badge %}#toc-alignment)).
42
48
  *
43
49
  * The possible values are:
44
50
  * * `small`
45
- * * `medium` (Default)
51
+ * * `medium`
46
52
  * * `large`
53
+ * * `none`
47
54
  *
55
+ * @default medium
48
56
  */
49
57
  this.size = 'medium';
50
58
  /**
51
- * Specifies the appearance fill style of the Badge.
59
+ * Specifies the appearance fill style of the Badge ([see example]({% slug appearance_badge %}#toc-fill)).
52
60
  *
53
61
  * The possible values are:
54
- * * `solid` (Default)
62
+ * * `solid`
55
63
  * * `outline`
64
+ * * `none`
56
65
  *
66
+ * @default solid
57
67
  */
58
68
  this.fill = 'solid';
59
69
  /**
60
70
  * Specifies the theme color of the Badge.
61
- * The theme color will be applied as background and border color, while also amending the text color accordingly.
71
+ * The theme color will be applied as background and border color, while also amending the text color accordingly
72
+ * ([see example]({% slug appearance_badge %}#toc-themeColor)).
62
73
  *
63
74
  * The possible values are:
64
- * * `primary` (Default)&mdash;Applies coloring based on primary theme color.
65
- * * `secondary`&mdash;Applies coloring based on secondary theme color.
66
- * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
67
- * * `inherit`&mdash; Applies inherited coloring value.
68
- * * `info`&mdash;Applies coloring based on info theme color.
69
- * * `success`&mdash; Applies coloring based on success theme color.
70
- * * `warning`&mdash; Applies coloring based on warning theme color.
71
- * * `error`&mdash; Applies coloring based on error theme color.
72
- * * `dark`&mdash; Applies coloring based on dark theme color.
73
- * * `light`&mdash; Applies coloring based on light theme color.
74
- * * `inverse`&mdash; Applies coloring based on inverted theme color.
75
+ * * `primary`
76
+ * * `secondary`
77
+ * * `tertiary`
78
+ * * `inherit`
79
+ * * `info`
80
+ * * `success`
81
+ * * `warning`
82
+ * * `error`
83
+ * * `dark`
84
+ * * `light`
85
+ * * `inverse`
86
+ * * `none`
75
87
  *
88
+ * @default primary
76
89
  */
77
90
  this.themeColor = 'primary';
78
91
  /**
79
- * Specifies the shape of the Badge.
92
+ * Specifies the roundness of the Badge ([see example]({% slug appearance_badge %}#toc-rounded)).
80
93
  *
81
94
  * The possible values are:
82
- * * `circle` (Default)&mdash;Applies circular shape on the Badge.
83
- * * `rectangle`&mdash;Applies rectangular shape on the Badge.
84
- * * `rounded`&mdash;Applies rounded shape on the Badge.
85
- * * `dot`&mdash;Applies dot shape on the Badge.
86
- * * `pill`&mdash;Applies border radius equal to half of the height of the Badge.
95
+ * * `small`
96
+ * * `medium`
97
+ * * `large`
98
+ * * `full`
99
+ * * `none`
87
100
  *
101
+ * @default medium
88
102
  */
89
- this.shape = 'circle';
103
+ this.rounded = 'medium';
90
104
  /**
91
- * Specifies the position of the Badge relative to the edge of the parent container element.
105
+ * Specifies the position of the Badge relative to the edge of the parent container element ([see example]({% slug alignandposition_badge %}#toc-position)).
92
106
  *
93
107
  * The possible values are:
94
- * * `edge` (Default)&mdash;The center of the Badge is positioned on the edge of the parent container element.
95
- * * `inside`&mdash;The Badge is entirely positioned inside the edge of the parent container element.
96
- * * `outside`&mdash;The Badge is entirely positioned outside the edge of the parent container element.
108
+ * * `edge`
109
+ * * `inside`
110
+ * * `outside`
97
111
  *
112
+ * @default edge
98
113
  */
99
114
  this.position = 'edge';
100
115
  /**
101
- * Specifies whether or not to render additional `cutout` border around the Badge.
116
+ * Specifies whether or not to render additional `cutout` border around the Badge ([see example]({% slug appearance_badge %}#toc-cutoutBorder)).
102
117
  *
103
118
  * The possible values are:
104
119
  * * `true`
105
- * * `false` (Default)
120
+ * * `false`
106
121
  *
122
+ * @default false
107
123
  */
108
124
  this.cutoutBorder = false;
109
125
  this.badgeClasses = [];
@@ -119,14 +135,15 @@ class BadgeComponent {
119
135
  return this.cutoutBorder;
120
136
  }
121
137
  /**
122
- * Specifies the alignment of the Badge.
138
+ * Specifies the alignment of the Badge ([see example]({% slug alignandposition_badge %}#toc-alignment)).
123
139
  *
124
140
  * The possible values are:
125
- * * `{ vertical: 'top', horizontal: 'end' }` (Default)
141
+ * * `{ vertical: 'top', horizontal: 'end' }`
126
142
  * * `{ vertical: 'top', horizontal: 'start' }`
127
143
  * * `{ vertical: 'bottom', horizontal: 'start' }`
128
144
  * * `{ vertical: 'bottom', horizontal: 'end' }`
129
145
  *
146
+ * @default "{ vertical: 'top', horizontal: 'end' }"
130
147
  */
131
148
  get align() {
132
149
  return this.badgeAlign;
@@ -154,16 +171,28 @@ class BadgeComponent {
154
171
  return `k-badge-${this.position}`;
155
172
  }
156
173
  sizeClass() {
157
- return SIZE_CLASSES$1[this.size];
174
+ if (this.size !== 'none') {
175
+ return SIZE_CLASSES$1[this.size];
176
+ }
177
+ return '';
158
178
  }
159
- shapeClass() {
160
- return `k-badge-${this.shape}`;
179
+ roundedClass() {
180
+ if (this.rounded !== 'none') {
181
+ return ROUNDED_CLASSES[this.rounded];
182
+ }
183
+ return '';
161
184
  }
162
185
  themeColorClass() {
163
- return `k-badge-${this.themeColor}`;
186
+ if (this.themeColor !== 'none' && this.fill !== 'none') {
187
+ return `k-badge-${this.fill}-${this.themeColor}`;
188
+ }
189
+ return '';
164
190
  }
165
191
  fillClass() {
166
- return `k-badge-${this.fill}`;
192
+ if (this.fill !== 'none') {
193
+ return `k-badge-${this.fill}`;
194
+ }
195
+ return '';
167
196
  }
168
197
  setBadgeClasses() {
169
198
  const element = this.element.nativeElement;
@@ -174,17 +203,19 @@ class BadgeComponent {
174
203
  this.themeColorClass(),
175
204
  this.fillClass(),
176
205
  this.sizeClass(),
177
- this.shapeClass(),
206
+ this.roundedClass(),
178
207
  this.alignClass(),
179
208
  this.positionClass()
180
209
  ];
181
210
  this.badgeClasses.forEach((className) => {
182
- this.renderer.addClass(element, className);
211
+ if (className) {
212
+ this.renderer.addClass(element, className);
213
+ }
183
214
  });
184
215
  }
185
216
  }
186
217
  BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BadgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
187
- BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BadgeComponent, selector: "kendo-badge", inputs: { align: "align", size: "size", fill: "fill", themeColor: "themeColor", shape: "shape", position: "position", cutoutBorder: "cutoutBorder" }, host: { properties: { "class.k-badge": "this.hostClass", "class.k-badge-border-cutout": "this.cutoutBorderClass", "attr.dir": "this.direction" } }, providers: [
218
+ BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BadgeComponent, selector: "kendo-badge", inputs: { align: "align", size: "size", fill: "fill", themeColor: "themeColor", rounded: "rounded", position: "position", cutoutBorder: "cutoutBorder" }, host: { properties: { "class.k-badge": "this.hostClass", "class.k-badge-border-cutout": "this.cutoutBorderClass", "attr.dir": "this.direction" } }, providers: [
188
219
  LocalizationService,
189
220
  {
190
221
  provide: L10N_PREFIX,
@@ -221,7 +252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
221
252
  type: Input
222
253
  }], themeColor: [{
223
254
  type: Input
224
- }], shape: [{
255
+ }], rounded: [{
225
256
  type: Input
226
257
  }], position: [{
227
258
  type: Input
package/main.d.ts CHANGED
@@ -9,7 +9,7 @@ export { BadgeAlign } from './badge/models/align';
9
9
  export { BadgeSize } from './badge/models/size';
10
10
  export { BadgeFill } from './badge/models/fill';
11
11
  export { BadgeThemeColor } from './badge/models/theme-color';
12
- export { BadgeShape } from './badge/models/shape';
12
+ export { BadgeRounded } from './badge/models/rounded';
13
13
  export { BadgePosition } from './badge/models/position';
14
14
  export { LoaderComponent } from './loader/loader.component';
15
15
  export { LoaderModule } from './loader.module';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-indicators",
3
- "version": "2.0.0",
3
+ "version": "3.0.0",
4
4
  "description": "Kendo UI Indicators for Angular",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -64,11 +64,11 @@
64
64
  "fallbackTags": {
65
65
  "dev": "latest"
66
66
  },
67
- "analyzeCommits": "@telerik/semantic-prerelease/analyzeCommits",
67
+ "analyzeCommits": "@progress/semantic-prerelease/analyzeCommits",
68
68
  "generateNotes": "@progress/kendo-angular-tasks/lib/generateNotes",
69
- "getLastRelease": "@telerik/semantic-prerelease/getLastRelease",
70
- "verifyConditions": "@telerik/semantic-prerelease/verifyConditions",
71
- "verifyRelease": "@telerik/semantic-prerelease/verifyRelease"
69
+ "getLastRelease": "@progress/semantic-prerelease/getLastRelease",
70
+ "verifyConditions": "@progress/semantic-prerelease/verifyConditions",
71
+ "verifyRelease": "@progress/semantic-prerelease/verifyRelease"
72
72
  },
73
73
  "main": "bundles/kendo-angular-indicators.umd.js",
74
74
  "module": "fesm2015/kendo-angular-indicators.js",
package/badge/models/shape.d.ts DELETED
@@ -1,17 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- /**
6
- * Specifies the shape of the Badge
7
- * ([see example]({% slug appearance_badge %}#toc-shape)).
8
- *
9
- * The possible values are:
10
- * * `circle` (Default)&mdash;Applies circular shape on the Badge.
11
- * * `rectangle`&mdash;Applies rectangular shape on the Badge.
12
- * * `rounded`&mdash;Applies rounded shape on the Badge.
13
- * * `dot`&mdash;Applies dot shape on the Badge.
14
- * * `pill`&mdash;Applies border radius equal to half of the height of the Badge.
15
- *
16
- */
17
- export declare type BadgeShape = 'circle' | 'rectangle' | 'rounded' | 'dot' | 'pill';