From 8253dd9812140f8889ded19347e45b79f3dde27a Mon Sep 17 00:00:00 2001 From: Sergei Klimenko Date: Wed, 9 Sep 2020 18:50:44 +0300 Subject: [PATCH 01/14] feat(avatar): add avatar component --- .../assets/elonkit/avatar/account-round.svg | 1 + .../assets/elonkit/avatar/account-square.svg | 1 + .../src/assets/elonkit/avatar/seal.svg | 1 + projects/elonkit/src/theme.scss | 122 ++++++++++++++++++ .../avatar-story-basic.component.html | 9 ++ .../avatar-story-basic.component.scss | 3 + .../avatar-story-basic.component.ts | 22 ++++ .../avatar-story-basic.module.ts | 12 ++ .../avatar-story-basic.source.ts | 22 ++++ .../__stories__/avatar-story-basic/index.ts | 3 + .../avatar-story-custom.component.html | 11 ++ .../avatar-story-custom.component.scss | 3 + .../avatar-story-custom.component.ts | 25 ++++ .../avatar-story-custom.module.ts | 12 ++ .../avatar-story-custom.source.ts | 22 ++++ .../__stories__/avatar-story-custom/index.ts | 3 + .../ui/avatar/__stories__/avatar.stories.mdx | 3 +- .../elonkit/src/ui/avatar/ng-package.json | 5 + .../storybook/assets/icons/avatar/star.svg | 1 + 19 files changed, 280 insertions(+), 1 deletion(-) create mode 100644 projects/elonkit/src/assets/elonkit/avatar/account-round.svg create mode 100644 projects/elonkit/src/assets/elonkit/avatar/account-square.svg create mode 100644 projects/elonkit/src/assets/elonkit/avatar/seal.svg create mode 100644 projects/elonkit/src/theme.scss create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.html create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.scss create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.ts create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.module.ts create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.source.ts create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/index.ts create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.html create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.scss create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.ts create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.module.ts create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.source.ts create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/index.ts create mode 100644 projects/elonkit/src/ui/avatar/ng-package.json create mode 100644 projects/elonkit/storybook/assets/icons/avatar/star.svg diff --git a/projects/elonkit/src/assets/elonkit/avatar/account-round.svg b/projects/elonkit/src/assets/elonkit/avatar/account-round.svg new file mode 100644 index 00000000..48eb361b --- /dev/null +++ b/projects/elonkit/src/assets/elonkit/avatar/account-round.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/elonkit/src/assets/elonkit/avatar/account-square.svg b/projects/elonkit/src/assets/elonkit/avatar/account-square.svg new file mode 100644 index 00000000..06b55e49 --- /dev/null +++ b/projects/elonkit/src/assets/elonkit/avatar/account-square.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/elonkit/src/assets/elonkit/avatar/seal.svg b/projects/elonkit/src/assets/elonkit/avatar/seal.svg new file mode 100644 index 00000000..080ed072 --- /dev/null +++ b/projects/elonkit/src/assets/elonkit/avatar/seal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/elonkit/src/theme.scss b/projects/elonkit/src/theme.scss new file mode 100644 index 00000000..7a29e47a --- /dev/null +++ b/projects/elonkit/src/theme.scss @@ -0,0 +1,122 @@ +@import './ui/alert/alert.component.theme'; +@import './ui/dropzone/dropzone.component.theme'; +@import './ui/inline-form-field/inline-form-field.component.theme'; +@import './ui/paginator/paginator.component.theme'; +@import './ui/dropzone/dropzone.component.theme'; +@import './ui/avatar/avatar.component.theme'; + +$elonkit-default-theme: ( + info: + mat-palette( + ( + 50: #e9f4ff, + 100: #c8e3ff, + 200: #a3d1ff, + 300: #7ebfff, + 400: #63b1ff, + 500: #47a3ff, + 600: #409bff, + 700: #3791ff, + 800: #2f88ff, + 900: #2077ff, + A100: #fff, + A200: #fff, + A400: #cfe1ff, + A700: #b6d0ff, + contrast: ( + 50: #000, + 100: #000, + 200: #000, + 300: #000, + 400: #000, + 500: #000, + 600: #000, + 700: #000, + 800: #fff, + 900: #fff, + A100: #000, + A200: #000, + A400: #000, + A700: #000 + ) + ) + ), + success: + mat-palette( + ( + 50: #e7f9f2, + 100: #c3efdf, + 200: #9be4ca, + 300: #73d9b5, + 400: #55d1a5, + 500: #37c995, + 600: #31c38d, + 700: #2abc82, + 800: #23b578, + 900: #16a967, + A100: #dcffee, + A200: #a9ffd6, + A400: #76ffbd, + A700: #5dffb1, + contrast: ( + 50: #000, + 100: #000, + 200: #000, + 300: #000, + 400: #000, + 500: #000, + 600: #000, + 700: #000, + 800: #000, + 900: #fff, + A100: #000, + A200: #000, + A400: #000, + A700: #000 + ) + ) + ), + danger: + mat-palette( + ( + 50: #fdf2e5, + 100: #fadebe, + 200: #f7c992, + 300: #f3b366, + 400: #f1a246, + 500: #ee9225, + 600: #ec8a21, + 700: #e97f1b, + 800: #e77516, + 900: #e2630d, + A100: #fff, + A200: #ffe8da, + A400: #ffc7a7, + A700: #ffb78e, + contrast: ( + 50: #000, + 100: #000, + 200: #000, + 300: #000, + 400: #000, + 500: #000, + 600: #000, + 700: #000, + 800: #000, + 900: #fff, + A100: #000, + A200: #000, + A400: #000, + A700: #000 + ) + ) + ) +); + +@mixin elonkit-theme($theme, $elonkit-theme: $elonkit-default-theme) { + @include es-alert-theme($theme, $elonkit-theme); + @include es-dropzone-theme($theme, $elonkit-theme); + @include es-inline-form-field-theme($theme, $elonkit-theme); + @include es-paginator-theme($theme, $elonkit-theme); + @include es-avatar-theme($theme, $elonkit-theme); +} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.html b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.html new file mode 100644 index 00000000..61816183 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.html @@ -0,0 +1,9 @@ + diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.scss b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.scss new file mode 100644 index 00000000..7fcfd2d0 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.scss @@ -0,0 +1,3 @@ +.dropzone { + max-width: 400px; +} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.ts new file mode 100644 index 00000000..aa8c6f19 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.ts @@ -0,0 +1,22 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'es-avatar-basic', + templateUrl: './avatar-story-basic.component.html' +}) +export class AvatarStoryBasicComponent { + @Input() + public icon: string; + @Input() + public width: number; + @Input() + public height: number; + @Input() + public borderRadius: number; + @Input() + public showStatus: boolean; + @Input() + public statusWidth: number; + @Input() + public statusHeight: number; +} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.module.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.module.ts new file mode 100644 index 00000000..f5a2940f --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { AvatarStoryBasicComponent } from './avatar-story-basic.component'; +import { ESAvatarModule } from '../..'; + +@NgModule({ + declarations: [AvatarStoryBasicComponent], + imports: [CommonModule, ESAvatarModule], + exports: [AvatarStoryBasicComponent] +}) +export class AvatarStoryBasicModule {} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.source.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.source.ts new file mode 100644 index 00000000..f9aca7b6 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.source.ts @@ -0,0 +1,22 @@ +export const AVATAR_STORY_BASIC_SOURCE = { + ts: ` + export class AppComponent { + public docs = new FormControl([]); + } + `, + html: ` +
+ + This is an example of a hint message + +
+ ` +}; diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/index.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/index.ts new file mode 100644 index 00000000..30e5db49 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/index.ts @@ -0,0 +1,3 @@ +export { AvatarStoryBasicModule } from './avatar-story-basic.module'; +export { AvatarStoryBasicComponent } from './avatar-story-basic.component'; +export { AVATAR_STORY_BASIC_SOURCE } from './avatar-story-basic.source'; diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.html b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.html new file mode 100644 index 00000000..5a8f15d9 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.html @@ -0,0 +1,11 @@ + diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.scss b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.scss new file mode 100644 index 00000000..7fcfd2d0 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.scss @@ -0,0 +1,3 @@ +.dropzone { + max-width: 400px; +} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.ts new file mode 100644 index 00000000..e0f41400 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.ts @@ -0,0 +1,25 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'es-avatar-custom', + templateUrl: './avatar-story-custom.component.html' +}) +export class AvatarStoryCustomComponent { + @Input() + public icon: string; + @Input() + public width: number; + @Input() + public height: number; + @Input() + public borderRadius: number; + @Input() + public showStatus: boolean; + @Input() + public statusWidth: number; + @Input() + public statusHeight: number; + + public logo = '/img/es-logo.png'; + public status = '/icons/avatar/star.svg'; +} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.module.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.module.ts new file mode 100644 index 00000000..7ef3a7e8 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { AvatarStoryCustomComponent } from './avatar-story-custom.component'; +import { ESAvatarModule } from '../..'; + +@NgModule({ + declarations: [AvatarStoryCustomComponent], + imports: [CommonModule, ESAvatarModule], + exports: [AvatarStoryCustomComponent] +}) +export class AvatarStoryCustomModule {} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.source.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.source.ts new file mode 100644 index 00000000..149533ce --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.source.ts @@ -0,0 +1,22 @@ +export const AVATAR_STORY_CUSTOM_SOURCE = { + ts: ` + export class AppComponent { + public docs = new FormControl([]); + } + `, + html: ` +
+ + This is an example of a hint message + +
+ ` +}; diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/index.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/index.ts new file mode 100644 index 00000000..4eaa399f --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/index.ts @@ -0,0 +1,3 @@ +export { AvatarStoryCustomModule } from './avatar-story-custom.module'; +export { AvatarStoryCustomComponent } from './avatar-story-custom.component'; +export { AVATAR_STORY_CUSTOM_SOURCE } from './avatar-story-custom.source'; diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar.stories.mdx b/projects/elonkit/src/ui/avatar/__stories__/avatar.stories.mdx index d771e909..71304979 100644 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar.stories.mdx +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar.stories.mdx @@ -182,7 +182,7 @@ export interface ESAvatarDefaultOptions { } ``` -```ts +````ts export enum ESAvatarVariant { Round = 'round', Square = 'square' @@ -207,3 +207,4 @@ import { ES_AVATAR_DEFAULT_OPTIONS } from '@elonsoft/elonkit/ui/avatar'; ] }) ``` +```` diff --git a/projects/elonkit/src/ui/avatar/ng-package.json b/projects/elonkit/src/ui/avatar/ng-package.json new file mode 100644 index 00000000..789c95e4 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "public-api.ts" + } +} diff --git a/projects/elonkit/storybook/assets/icons/avatar/star.svg b/projects/elonkit/storybook/assets/icons/avatar/star.svg new file mode 100644 index 00000000..bc7ef0d6 --- /dev/null +++ b/projects/elonkit/storybook/assets/icons/avatar/star.svg @@ -0,0 +1 @@ + \ No newline at end of file From 5253bb953d3a8b11ee2d23fc11232868fea2651d Mon Sep 17 00:00:00 2001 From: Andrew Date: Fri, 26 Feb 2021 12:31:47 +0300 Subject: [PATCH 02/14] fix(avatar): delete status badge from avatar component, some fixies --- .../assets/elonkit/avatar/account-round.svg | 1 - .../assets/elonkit/avatar/account-square.svg | 1 - .../src/assets/elonkit/avatar/seal.svg | 1 - .../avatar-story-custom.module.ts | 12 ----- .../__stories__/avatar-story-custom/index.ts | 3 -- .../avatar-story-group.component.html | 13 +++++ .../avatar-story-group.component.ts | 23 ++++++++ .../avatar-story-group.module.ts | 12 +++++ .../avatar-story-group.source.ts | 44 ++++++++++++++++ .../avatar-story-typography.component.html | 8 +++ .../avatar-story-typography.component.ts | 17 ++++++ .../avatar-story-typography.source.ts | 15 ++++++ .../src/ui/avatar/avatar-group.component.html | 4 ++ .../src/ui/avatar/avatar-group.component.scss | 36 ++++++------- .../src/ui/avatar/avatar-group.component.ts | 52 ++----------------- 15 files changed, 158 insertions(+), 84 deletions(-) delete mode 100644 projects/elonkit/src/assets/elonkit/avatar/account-round.svg delete mode 100644 projects/elonkit/src/assets/elonkit/avatar/account-square.svg delete mode 100644 projects/elonkit/src/assets/elonkit/avatar/seal.svg delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.module.ts delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/index.ts create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.html create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.ts create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.module.ts create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.html create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.ts create mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.source.ts diff --git a/projects/elonkit/src/assets/elonkit/avatar/account-round.svg b/projects/elonkit/src/assets/elonkit/avatar/account-round.svg deleted file mode 100644 index 48eb361b..00000000 --- a/projects/elonkit/src/assets/elonkit/avatar/account-round.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/projects/elonkit/src/assets/elonkit/avatar/account-square.svg b/projects/elonkit/src/assets/elonkit/avatar/account-square.svg deleted file mode 100644 index 06b55e49..00000000 --- a/projects/elonkit/src/assets/elonkit/avatar/account-square.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/projects/elonkit/src/assets/elonkit/avatar/seal.svg b/projects/elonkit/src/assets/elonkit/avatar/seal.svg deleted file mode 100644 index 080ed072..00000000 --- a/projects/elonkit/src/assets/elonkit/avatar/seal.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.module.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.module.ts deleted file mode 100644 index 7ef3a7e8..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { AvatarStoryCustomComponent } from './avatar-story-custom.component'; -import { ESAvatarModule } from '../..'; - -@NgModule({ - declarations: [AvatarStoryCustomComponent], - imports: [CommonModule, ESAvatarModule], - exports: [AvatarStoryCustomComponent] -}) -export class AvatarStoryCustomModule {} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/index.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/index.ts deleted file mode 100644 index 4eaa399f..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { AvatarStoryCustomModule } from './avatar-story-custom.module'; -export { AvatarStoryCustomComponent } from './avatar-story-custom.component'; -export { AVATAR_STORY_CUSTOM_SOURCE } from './avatar-story-custom.source'; diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.html b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.html new file mode 100644 index 00000000..cd53dc02 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.html @@ -0,0 +1,13 @@ + + + diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.ts new file mode 100644 index 00000000..de9cd747 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.ts @@ -0,0 +1,23 @@ +import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@angular/core'; +import { ESAvatarForm } from '../../avatar.types'; +@Component({ + selector: 'es-avatar-group-aomponent', + templateUrl: './avatar-story-group.component.html', + styleUrls: ['./avatar-story-group.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class AvatarStoryGroupComponent { + @Input() + public size: number; + + public avatars = [ + { + size: 60, + src: '/img/es-logo.png', + alt: 'alt text' + }, + { avatarSrc: null, size: 60 }, + { avatarSrc: null, size: 60, textTypography: 'typography' } + ]; +} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.module.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.module.ts new file mode 100644 index 00000000..43194c37 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { AvatarStoryGroupComponent } from './avatar-story-group.component'; +import { ESAvatarModule } from '../..'; + +@NgModule({ + declarations: [AvatarStoryGroupComponent], + imports: [CommonModule, ESAvatarModule], + exports: [AvatarStoryGroupComponent] +}) +export class AvatarStoryGroupModule {} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.source.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.source.ts index 1a1c9078..3b2f161d 100644 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.source.ts +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.source.ts @@ -1,4 +1,5 @@ export const AVATAR_STORY_GROUP_SOURCE = { +<<<<<<< HEAD html: ` +======= + ts: ` + @Component({ + encapsulation: ViewEncapsulation.None + }) + export class AppComponent { + @Input() + public size: number; + + public avatars = [ + { + size: 60, + src: '/img/es-logo.png', + alt: 'alt text' + }, + { avatarSrc: null, size: 60 }, + { avatarSrc: null, size: 60, textTypography: 'typography' } + ]; + } + `, + html: ` + + + + `, + scss: ` + .typography { + font-family: 'Roboto', sans-serif; + font-size: 14px; + font-weight: 700; + letter-spacing: 0.25px; + } +>>>>>>> fix(avatar): delete status badge from avatar component, some fixies ` }; diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.html b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.html new file mode 100644 index 00000000..93864efb --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.html @@ -0,0 +1,8 @@ + + НФ + + diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.ts new file mode 100644 index 00000000..0b9a71f6 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.ts @@ -0,0 +1,17 @@ +import { Component, ChangeDetectionStrategy, Input, ViewEncapsulation } from '@angular/core'; +import { ESAvatarForm } from '../../avatar.types'; +@Component({ + selector: 'es-avatar-typography', + templateUrl: './avatar-story-typography.component.html', + styleUrls: ['./avatar-story-typography.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class AvatarStoryTypographyComponent { + @Input() + public alt: string; + @Input() + public size: number; + @Input() + public variant: ESAvatarForm; +} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.source.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.source.ts new file mode 100644 index 00000000..d89c2237 --- /dev/null +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.source.ts @@ -0,0 +1,15 @@ +export const AVATAR_STORY_TYPOGRAPHY_SOURCE = { + ts: ` + @Component({ + encapsulation: ViewEncapsulation.None + }) + `, + html: `НФ`, + scss: ` + .typography { + font-family: 'Roboto', sans-serif; + font-size: 28px; + letter-spacing: 0.5px; + } + ` +}; diff --git a/projects/elonkit/src/ui/avatar/avatar-group.component.html b/projects/elonkit/src/ui/avatar/avatar-group.component.html index 00e4a5a5..a2b9d367 100644 --- a/projects/elonkit/src/ui/avatar/avatar-group.component.html +++ b/projects/elonkit/src/ui/avatar/avatar-group.component.html @@ -1,3 +1,7 @@
+<<<<<<< HEAD +======= + +>>>>>>> fix(avatar): delete status badge from avatar component, some fixies
diff --git a/projects/elonkit/src/ui/avatar/avatar-group.component.scss b/projects/elonkit/src/ui/avatar/avatar-group.component.scss index 6c88e039..6b908d23 100644 --- a/projects/elonkit/src/ui/avatar/avatar-group.component.scss +++ b/projects/elonkit/src/ui/avatar/avatar-group.component.scss @@ -1,7 +1,8 @@ .es-avatar-group { display: flex; - es-avatar { + &__avatar { + border: 2px solid #fff; border-radius: 50%; &:last-child { @@ -11,26 +12,25 @@ &:not(:first-child) { margin-left: -12px; } + } +} - /* change the white border to mask only if it's supported: */ - @supports (mask: radial-gradient(transparent 12px, black 0)) { - /* stylelint-disable-next-line */ - - &:not(:last-of-type) { - mask: radial-gradient( - circle at calc((var(--size) * 0.75) + ((var(--size) / 2) + 2px)), - transparent calc((var(--size) / 2) + 2px), - #fff 0 - ); - } +/* change the white border to mask only if it's supported: */ +@supports (mask: radial-gradient(transparent 12px, black 0)) { + /* stylelint-disable-next-line */ + .es-avatar-group__avatar { + border: unset; - &:not(:first-of-type) { - margin-left: calc((var(--size) * -0.25) + 2.2px); - } + &:not(:last-of-type) { + mask: radial-gradient( + circle at calc((var(--size) * 0.75) + ((var(--size) / 2) + 2px)), + transparent calc((var(--size) / 2) + 2px), + #fff 0 + ); + } - .es-avatar { - border: unset !important; - } + &:not(:first-of-type) { + margin-left: calc(var(--size) * -0.25); } } } diff --git a/projects/elonkit/src/ui/avatar/avatar-group.component.ts b/projects/elonkit/src/ui/avatar/avatar-group.component.ts index 2a57814f..c85ba5b0 100644 --- a/projects/elonkit/src/ui/avatar/avatar-group.component.ts +++ b/projects/elonkit/src/ui/avatar/avatar-group.component.ts @@ -4,18 +4,9 @@ import { ChangeDetectionStrategy, ElementRef, ViewEncapsulation, - OnInit, - ContentChildren, - QueryList, - AfterContentInit, - Renderer2, - OnDestroy + OnInit } from '@angular/core'; -import { ESAvatarComponent } from './avatar.component'; -import { takeUntil } from 'rxjs/operators'; -import { Subject } from 'rxjs'; - @Component({ selector: 'es-avatar-group', templateUrl: './avatar-group.component.html', @@ -23,51 +14,16 @@ import { Subject } from 'rxjs'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None }) -export class ESAvatarGroupComponent implements OnInit, AfterContentInit, OnDestroy { - @ContentChildren(ESAvatarComponent, { read: ElementRef }) private avatars: QueryList; +export class ESAvatarGroupComponent implements OnInit { /** * Defines size of the avatar in pixels. */ @Input() public size: number; - private destroyed$ = new Subject(); - - /** - * @ignore - */ - constructor(private _elementRef: ElementRef, private renderer: Renderer2) {} + constructor(private _elementRef: ElementRef) {} - /** - * @ignore - */ public ngOnInit() { - console.log(this.size); - this._elementRef.nativeElement.style.setProperty('--size', `${this.size + `px`}`); - } - - /** - * @ignore - */ - public ngAfterContentInit() { - this.setAvatarsIndex(this.avatars); - this.avatars.changes.pipe(takeUntil(this.destroyed$)).subscribe((avatars) => { - if (avatars) { - this.setAvatarsIndex(avatars); - } - }); - } - - private setAvatarsIndex = (avatars): void => { - avatars.forEach((avatar, index) => { - this.renderer.setStyle(avatar.nativeElement, 'z-index', index); - }); - }; - - /** - * @ignore - */ - public ngOnDestroy() { - this.destroyed$.next(); + this._elementRef.nativeElement.style.setProperty('--size', `${this.size - 3 + `px`}`); } } From 2cc3f41ab0661146985887ba2ceaf6b2b235ba44 Mon Sep 17 00:00:00 2001 From: Andrew Date: Wed, 10 Mar 2021 14:43:50 +0300 Subject: [PATCH 03/14] feat(badge): add badge component --- projects/elonkit/src/theme.scss | 2 + projects/elonkit/src/theming/theming.scss | 2 + .../src/ui/badge/__specs__/badge.spec.ts | 43 ++++ .../badge-story-basic.source.ts | 12 ++ .../__stories__/badge-story-basic/index.ts | 1 + .../badge-story-count.source.ts | 12 ++ .../__stories__/badge-story-count/index.ts | 0 .../badge-story-icon.source.ts | 12 ++ .../__stories__/badge-story-icon/index.ts | 1 + .../ui/badge/__stories__/badge.stories.mdx | 200 ++++++++++++++++++ .../elonkit/src/ui/badge/badge.component.html | 27 +++ .../elonkit/src/ui/badge/badge.component.scss | 26 +++ .../src/ui/badge/badge.component.theme.scss | 18 ++ .../elonkit/src/ui/badge/badge.component.ts | 153 ++++++++++++++ projects/elonkit/src/ui/badge/badge.module.ts | 13 ++ projects/elonkit/src/ui/badge/badge.types.ts | 5 + projects/elonkit/src/ui/badge/index.ts | 1 + projects/elonkit/src/ui/badge/public-api.ts | 3 + 18 files changed, 531 insertions(+) create mode 100644 projects/elonkit/src/ui/badge/__specs__/badge.spec.ts create mode 100644 projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts create mode 100644 projects/elonkit/src/ui/badge/__stories__/badge-story-basic/index.ts create mode 100644 projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts create mode 100644 projects/elonkit/src/ui/badge/__stories__/badge-story-count/index.ts create mode 100644 projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts create mode 100644 projects/elonkit/src/ui/badge/__stories__/badge-story-icon/index.ts create mode 100644 projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx create mode 100644 projects/elonkit/src/ui/badge/badge.component.html create mode 100644 projects/elonkit/src/ui/badge/badge.component.scss create mode 100644 projects/elonkit/src/ui/badge/badge.component.theme.scss create mode 100644 projects/elonkit/src/ui/badge/badge.component.ts create mode 100644 projects/elonkit/src/ui/badge/badge.module.ts create mode 100644 projects/elonkit/src/ui/badge/badge.types.ts create mode 100644 projects/elonkit/src/ui/badge/index.ts create mode 100644 projects/elonkit/src/ui/badge/public-api.ts diff --git a/projects/elonkit/src/theme.scss b/projects/elonkit/src/theme.scss index 7a29e47a..c9e84fa6 100644 --- a/projects/elonkit/src/theme.scss +++ b/projects/elonkit/src/theme.scss @@ -4,6 +4,7 @@ @import './ui/paginator/paginator.component.theme'; @import './ui/dropzone/dropzone.component.theme'; @import './ui/avatar/avatar.component.theme'; +@import './ui//badge//badge.component.theme.scss'; $elonkit-default-theme: ( info: @@ -119,4 +120,5 @@ $elonkit-default-theme: ( @include es-inline-form-field-theme($theme, $elonkit-theme); @include es-paginator-theme($theme, $elonkit-theme); @include es-avatar-theme($theme, $elonkit-theme); + @include es-badge-theme($theme, $elonkit-theme); } diff --git a/projects/elonkit/src/theming/theming.scss b/projects/elonkit/src/theming/theming.scss index 230d0de4..21c1bc5f 100644 --- a/projects/elonkit/src/theming/theming.scss +++ b/projects/elonkit/src/theming/theming.scss @@ -9,6 +9,7 @@ @import '../ui/paginator/paginator.component.theme'; @import '../ui/surface/surface.component.theme'; @import '../ui/tooltip/tooltip.component.theme'; +@import './ui/badge/badge.component.theme'; @function es-make-theme($es-theme) { $result: $es-theme; @@ -45,4 +46,5 @@ @include es-paginator-theme($theme, $es-theme); @include es-surface-theme($theme, $es-theme); @include es-tooltip-theme($theme, $es-theme); + @include es-badge-theme($theme, $es-theme); } diff --git a/projects/elonkit/src/ui/badge/__specs__/badge.spec.ts b/projects/elonkit/src/ui/badge/__specs__/badge.spec.ts new file mode 100644 index 00000000..74779b04 --- /dev/null +++ b/projects/elonkit/src/ui/badge/__specs__/badge.spec.ts @@ -0,0 +1,43 @@ +import { Component } from '@angular/core'; +import { render } from '@testing-library/angular'; + +import { ESBadgeModule } from '../badge.module'; +import { ESBadgeComponent } from '../badge.component'; + +describe('Badge', () => { + it('Should change badge size', async () => { + const component = await render(ESBadgeComponent, { + componentProperties: { + size: 40 + }, + imports: [ESBadgeModule], + excludeComponentDeclaration: true + }); + + expect(component.fixture.componentInstance.size).toBe(40); + }); + + it('Should render alt text on icon', async () => { + const component = await render(ESBadgeComponent, { + componentProperties: { + src: './test-path-to-icon', + alt: 'alt text' + }, + imports: [ESBadgeModule], + excludeComponentDeclaration: true + }); + + expect(component.getByAltText('alt text')).toBeInTheDocument(); + }); + + it('Should change badge count', async () => { + const component = await render(ESBadgeComponent, { + componentProperties: { + count: 1 + }, + imports: [ESBadgeModule], + excludeComponentDeclaration: true + }); + expect(component.getByTestId('badge')).toHaveClass('es-caption es-badge__count'); + }); +}); diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts new file mode 100644 index 00000000..476ac568 --- /dev/null +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts @@ -0,0 +1,12 @@ +export const BADGE_STORY_BASIC_SOURCE = { + html: ` + + + + + + + ` +}; diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/index.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/index.ts new file mode 100644 index 00000000..b1f2714c --- /dev/null +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/index.ts @@ -0,0 +1 @@ +export { BADGE_STORY_BASIC_SOURCE } from './badge-story-basic.source'; diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts new file mode 100644 index 00000000..0f65b8c7 --- /dev/null +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts @@ -0,0 +1,12 @@ +export const BADGE_STORY_COUNT_SOURCE = { + html: ` + + + + + + + ` +}; diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-count/index.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-count/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts new file mode 100644 index 00000000..9965af83 --- /dev/null +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts @@ -0,0 +1,12 @@ +export const BADGE_STORY_ICON_SOURCE = { + html: ` + + + + + + + ` +}; diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/index.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/index.ts new file mode 100644 index 00000000..997c9432 --- /dev/null +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/index.ts @@ -0,0 +1 @@ +export { BADGE_STORY_ICON_SOURCE } from './badge-story-icon.source'; diff --git a/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx b/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx new file mode 100644 index 00000000..4fcd7d43 --- /dev/null +++ b/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx @@ -0,0 +1,200 @@ +import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks'; +import { Canvas } from '~storybook/components'; +import { action } from '@storybook/addon-actions'; + +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; + +import { ESBadgeComponent, ESBadgeModule } from '..'; + +import { ESAvatarModule } from '@elonsoft/elonkit/ui/avatar'; + +import { BADGE_STORY_BASIC_SOURCE } from './badge-story-basic'; +import { BADGE_STORY_ICON_SOURCE } from './badge-story-icon'; + + + +# Badge + +This component allows to display default or custom badge. + +## Demos + +#### + +#### + +### Basic badge + +Basic badge with no image: + +#### + +`color` - background color; +`borderColor` - border color; + + + + {((args) => ({ + template: ` + + + + + + + `, + moduleMetadata: { + imports: [ESBadgeModule, ESAvatarModule, MatButtonModule, MatIconModule] + }, + props: { + ...args + } + })).bind({})} + + + +#### + +#### + +### Icon badge + +Badge with icon: + +#### + +`src` - path to icon; +`alt` - text for alt attribute; + + + + {((args) => ({ + template: ` + + + + + + + `, + moduleMetadata: { + imports: [ESBadgeModule, ESAvatarModule, MatButtonModule, MatIconModule] + }, + props: { + ...args + } + })).bind({})} + + + +#### + +#### + +### Count badge + +Badge with count: + +#### + +`count` - count number; + + + + {((args) => ({ + template: ` + + + + + + + `, + moduleMetadata: { + imports: [ESBadgeModule, ESAvatarModule, MatButtonModule, MatIconModule] + }, + props: { + ...args + } + })).bind({})} + + + +## API + + + +## Interfaces + +ESBadgeDefaultOptions defines default badge size + +```ts +export interface ESBadgeDefaultOptions { + size?: number; +} +``` + +Injection token that can be used to configure the default options for all components within an app. + +```ts +import { ES_BADGE_DEFAULT_OPTIONS } from '@elonsoft/elonkit/ui/badge'; + +@NgModule({ + providers: [ + { + provide: ES_BADGE_DEFAULT_OPTIONS, + useValue: { + size: 14 + } + } + ] +}) +``` diff --git a/projects/elonkit/src/ui/badge/badge.component.html b/projects/elonkit/src/ui/badge/badge.component.html new file mode 100644 index 00000000..3ccc4be8 --- /dev/null +++ b/projects/elonkit/src/ui/badge/badge.component.html @@ -0,0 +1,27 @@ +
+
+ + + {{count}} + +
+ + +
diff --git a/projects/elonkit/src/ui/badge/badge.component.scss b/projects/elonkit/src/ui/badge/badge.component.scss new file mode 100644 index 00000000..f4b05ca7 --- /dev/null +++ b/projects/elonkit/src/ui/badge/badge.component.scss @@ -0,0 +1,26 @@ +.es-badge { + position: relative; + width: fit-content; + + &__content { + align-items: center; + border-radius: 50%; + box-sizing: border-box; + display: flex; + justify-content: center; + position: absolute; + z-index: 1000; + } + + &__img { + height: 96%; + object-fit: cover; + width: 96%; + } + + &__count { + font-size: 11px; + font-weight: 700; + line-height: 16px; + } +} diff --git a/projects/elonkit/src/ui/badge/badge.component.theme.scss b/projects/elonkit/src/ui/badge/badge.component.theme.scss new file mode 100644 index 00000000..1e51dddf --- /dev/null +++ b/projects/elonkit/src/ui/badge/badge.component.theme.scss @@ -0,0 +1,18 @@ +@mixin es-badge-theme($theme, $elonkit-theme) { + $cl-mono-b: map-get($elonkit-theme, mono-b); + $attention: map-get($elonkit-theme, attention); + + /* stylelint-disable-next-line */ + .es-badge__content { + background-color: mat-color($attention, 500); + border: 2px solid mat-color($cl-mono-b, 500); + + &_with-icon { + background-color: mat-color($cl-mono-b, 500); + } + + &_with-count { + color: mat-color($cl-mono-b, 500); + } + } +} diff --git a/projects/elonkit/src/ui/badge/badge.component.ts b/projects/elonkit/src/ui/badge/badge.component.ts new file mode 100644 index 00000000..933d7bb9 --- /dev/null +++ b/projects/elonkit/src/ui/badge/badge.component.ts @@ -0,0 +1,153 @@ +import { + Component, + ChangeDetectionStrategy, + ChangeDetectorRef, + ViewEncapsulation, + Input, + InjectionToken, + Optional, + Inject +} from '@angular/core'; + +import { coerceNumberProperty } from '@angular/cdk/coercion'; +import { ESBadgeDefaultOptions } from './badge.types'; + +export const ES_BADGE_DEFAULT_OPTIONS = new InjectionToken( + 'ES_BADGE_DEFAULT_OPTIONS' +); + +@Component({ + selector: 'es-badge', + templateUrl: './badge.component.html', + styleUrls: ['./badge.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class ESBadgeComponent { + /** + * Defines badge size in pixels. + */ + @Input() + public get size(): number { + return this._size; + } + public set size(value: number) { + this._size = coerceNumberProperty(value, 16); + } + private _size: number; + + /** + * Defines badge background color. + */ + @Input() + public get color(): string { + return this._color; + } + public set color(value: string) { + this._color = value; + } + private _color: string; + + /** + * Defines badge border color. + */ + @Input() + public get borderColor(): string { + return this._borderColor; + } + public set borderColor(value: string) { + this._borderColor = value; + } + private _borderColor: string; + + /** + * Defines badge position top in pixels. + */ + @Input() + public get top(): number { + return this._top; + } + public set top(value: number) { + this._top = coerceNumberProperty(value); + } + private _top: number; + + /** + * Defines badge position bottom in pixels. + */ + @Input() + public get bottom(): number { + return this._bottom; + } + public set bottom(value: number) { + this._bottom = coerceNumberProperty(value, 0) || -2; + } + private _bottom: number; + + /** + * Defines badge position right in pixels. + */ + @Input() + public get right(): number { + return this._right; + } + public set right(value: number) { + this._right = coerceNumberProperty(value, 0) || -2; + } + private _right: number; + + /** + * Defines badge position left in pixels. + */ + @Input() + public get left(): number { + return this._left; + } + public set left(value: number) { + this._left = coerceNumberProperty(value); + } + private _left: number; + + /** + * Path to image to display icon. + */ + @Input() public src?: string; + + /** + * Alt text for icon + */ + @Input() public alt?: string; + + /** + * Defines badge count. + */ + @Input() + public get count(): number { + return this._count; + } + public set count(value: number) { + this._count = coerceNumberProperty(value); + } + private _count: number; + + /** + * @internal + * @ignore + */ + constructor( + /** + * @internal + */ + public changeDetector: ChangeDetectorRef, + /** + * @internal + */ + @Optional() + @Inject('ES_BADGE_DEFAULT_OPTIONS') + private defaultOptions: ESBadgeDefaultOptions + ) { + this.size = this.defaultOptions?.size; + this.bottom = this.defaultOptions?.bottom; + this.right = this.defaultOptions?.right; + } +} diff --git a/projects/elonkit/src/ui/badge/badge.module.ts b/projects/elonkit/src/ui/badge/badge.module.ts new file mode 100644 index 00000000..8aabe7bb --- /dev/null +++ b/projects/elonkit/src/ui/badge/badge.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { MatIconModule } from '@angular/material/icon'; + +import { ESBadgeComponent } from './badge.component'; + +@NgModule({ + declarations: [ESBadgeComponent], + imports: [CommonModule, MatIconModule], + exports: [ESBadgeComponent] +}) +export class ESBadgeModule {} diff --git a/projects/elonkit/src/ui/badge/badge.types.ts b/projects/elonkit/src/ui/badge/badge.types.ts new file mode 100644 index 00000000..f20ce2f8 --- /dev/null +++ b/projects/elonkit/src/ui/badge/badge.types.ts @@ -0,0 +1,5 @@ +export interface ESBadgeDefaultOptions { + size?: number; + bottom?: number; + right?: number; +} diff --git a/projects/elonkit/src/ui/badge/index.ts b/projects/elonkit/src/ui/badge/index.ts new file mode 100644 index 00000000..7e1a213e --- /dev/null +++ b/projects/elonkit/src/ui/badge/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/projects/elonkit/src/ui/badge/public-api.ts b/projects/elonkit/src/ui/badge/public-api.ts new file mode 100644 index 00000000..6f61c70e --- /dev/null +++ b/projects/elonkit/src/ui/badge/public-api.ts @@ -0,0 +1,3 @@ +export { ESBadgeModule } from './badge.module'; +export { ESBadgeComponent } from './badge.component'; +export { ESBadgeDefaultOptions } from './badge.types'; From de4a16d3dcbd733000e3c915fa20c52723f0e84a Mon Sep 17 00:00:00 2001 From: Andrew Date: Thu, 11 Mar 2021 12:08:26 +0300 Subject: [PATCH 04/14] fix(badge): add mask to badge --- .../badge-story-basic.source.ts | 4 +- .../badge-story-count.source.ts | 4 +- .../badge-story-icon.source.ts | 4 +- .../ui/badge/__stories__/badge.stories.mdx | 31 +++++---- .../elonkit/src/ui/badge/badge.component.html | 8 +-- .../elonkit/src/ui/badge/badge.component.scss | 13 ++++ .../src/ui/badge/badge.component.theme.scss | 1 - .../elonkit/src/ui/badge/badge.component.ts | 66 ++++++++++++++----- projects/elonkit/src/ui/badge/badge.types.ts | 1 + 9 files changed, 94 insertions(+), 38 deletions(-) diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts index 476ac568..22c0f02f 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts @@ -1,9 +1,9 @@ export const BADGE_STORY_BASIC_SOURCE = { html: ` - + - + diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts index 0f65b8c7..0e62f370 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts @@ -1,9 +1,9 @@ export const BADGE_STORY_COUNT_SOURCE = { html: ` - + - + diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts index 9965af83..4caa3903 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts @@ -1,9 +1,9 @@ export const BADGE_STORY_ICON_SOURCE = { html: ` - + - + diff --git a/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx b/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx index 4fcd7d43..c98a7e7a 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx +++ b/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx @@ -39,20 +39,23 @@ Basic badge with no image: args={{ size: 14, color: '', - borderColor: '' + borderSize: 2 }} argTypes={{ size: { control: 'number' + }, + borderSize: { + control: 'number' } }} > {((args) => ({ template: ` - + - + @@ -88,20 +91,23 @@ Badge with icon: size: 14, src: '/icons/avatar/star.svg', alt: 'icon', - borderColor: '' + borderSize: 2 }} argTypes={{ size: { control: 'number' + }, + borderSize: { + control: 'number' } }} > {((args) => ({ template: ` - + - + @@ -133,10 +139,10 @@ Badge with count: {((args) => ({ template: ` - + - + diff --git a/projects/elonkit/src/ui/badge/badge.component.html b/projects/elonkit/src/ui/badge/badge.component.html index 3ccc4be8..e6806f16 100644 --- a/projects/elonkit/src/ui/badge/badge.component.html +++ b/projects/elonkit/src/ui/badge/badge.component.html @@ -8,8 +8,7 @@ 'right.px': right, 'bottom.px': bottom, 'left.px': left, - 'background-color': color, - 'border-color': borderColor + 'background-color': color }" > - - +
+ +
diff --git a/projects/elonkit/src/ui/badge/badge.component.scss b/projects/elonkit/src/ui/badge/badge.component.scss index f4b05ca7..ccad0ba8 100644 --- a/projects/elonkit/src/ui/badge/badge.component.scss +++ b/projects/elonkit/src/ui/badge/badge.component.scss @@ -1,7 +1,20 @@ +$div-width: 40; +$badge-size: 16; + .es-badge { position: relative; width: fit-content; + > :nth-child(2) { + display: block; + mask: radial-gradient( + circle at calc(var(--childElement) - var(--right) - var(--borderSize)) + calc(var(--childElement) - var(--bottom) - var(--borderSize)), + transparent var(--transparent), + #fff 0 + ); + } + &__content { align-items: center; border-radius: 50%; diff --git a/projects/elonkit/src/ui/badge/badge.component.theme.scss b/projects/elonkit/src/ui/badge/badge.component.theme.scss index 1e51dddf..fdeb76bb 100644 --- a/projects/elonkit/src/ui/badge/badge.component.theme.scss +++ b/projects/elonkit/src/ui/badge/badge.component.theme.scss @@ -5,7 +5,6 @@ /* stylelint-disable-next-line */ .es-badge__content { background-color: mat-color($attention, 500); - border: 2px solid mat-color($cl-mono-b, 500); &_with-icon { background-color: mat-color($cl-mono-b, 500); diff --git a/projects/elonkit/src/ui/badge/badge.component.ts b/projects/elonkit/src/ui/badge/badge.component.ts index 933d7bb9..620da1c4 100644 --- a/projects/elonkit/src/ui/badge/badge.component.ts +++ b/projects/elonkit/src/ui/badge/badge.component.ts @@ -6,7 +6,12 @@ import { Input, InjectionToken, Optional, - Inject + Inject, + ElementRef, + Renderer2, + OnInit, + AfterViewInit, + ViewChild } from '@angular/core'; import { coerceNumberProperty } from '@angular/cdk/coercion'; @@ -23,7 +28,12 @@ export const ES_BADGE_DEFAULT_OPTIONS = new InjectionToken Date: Thu, 18 Mar 2021 14:40:30 +0300 Subject: [PATCH 05/14] fix(badge): rework in position inputs --- projects/elonkit/src/theme.scss | 2 +- .../badge-story-basic.source.ts | 20 ++- .../badge-story-count.source.ts | 22 ++- .../badge-story-icon.source.ts | 22 ++- .../ui/badge/__stories__/badge.stories.mdx | 124 +++++++++++++-- .../elonkit/src/ui/badge/badge.component.scss | 4 +- .../elonkit/src/ui/badge/badge.component.ts | 144 ++++++++++++++---- projects/elonkit/src/ui/badge/badge.types.ts | 18 ++- 8 files changed, 305 insertions(+), 51 deletions(-) diff --git a/projects/elonkit/src/theme.scss b/projects/elonkit/src/theme.scss index c9e84fa6..6c68deca 100644 --- a/projects/elonkit/src/theme.scss +++ b/projects/elonkit/src/theme.scss @@ -4,7 +4,7 @@ @import './ui/paginator/paginator.component.theme'; @import './ui/dropzone/dropzone.component.theme'; @import './ui/avatar/avatar.component.theme'; -@import './ui//badge//badge.component.theme.scss'; +@import './ui//badge//badge.component.theme'; $elonkit-default-theme: ( info: diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts index 22c0f02f..986e6d08 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts @@ -1,9 +1,25 @@ export const BADGE_STORY_BASIC_SOURCE = { html: ` - + - + diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts index 0e62f370..179fe7c7 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts @@ -1,9 +1,27 @@ export const BADGE_STORY_COUNT_SOURCE = { html: ` - + - + diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts index 4caa3903..eb9e4901 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts @@ -1,9 +1,27 @@ export const BADGE_STORY_ICON_SOURCE = { html: ` - + - + diff --git a/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx b/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx index c98a7e7a..9e159492 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx +++ b/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx @@ -39,7 +39,10 @@ Basic badge with no image: args={{ size: 14, color: '', - borderSize: 2 + borderSize: 2, + position: 'above after', + offsetHorizontal: '', + offsetVertical: '' }} argTypes={{ size: { @@ -47,15 +50,41 @@ Basic badge with no image: }, borderSize: { control: 'number' + }, + offsetHorizontal: { + control: 'number' + }, + offsetVertical: { + control: 'number' + }, + position: { + control: { + type: 'select', + options: ['above before', 'above after', 'below before', 'below after'] + } } }} > {((args) => ({ template: ` - + - + @@ -91,7 +120,10 @@ Badge with icon: size: 14, src: '/icons/avatar/star.svg', alt: 'icon', - borderSize: 2 + borderSize: 2, + position: 'below after', + offsetHorizontal: '', + offsetVertical: '' }} argTypes={{ size: { @@ -99,15 +131,43 @@ Badge with icon: }, borderSize: { control: 'number' + }, + offsetHorizontal: { + control: 'number' + }, + offsetVertical: { + control: 'number' + }, + position: { + control: { + type: 'select', + options: ['above before', 'above after', 'below before', 'below after'] + } } }} > {((args) => ({ template: ` - + - + @@ -142,7 +202,9 @@ Badge with count: size: 14, color: '', count: 1, - borderSize: 2 + borderSize: 2, + position: 'below after', + offsetVertical: '' }} argTypes={{ size: { @@ -153,15 +215,43 @@ Badge with count: }, borderSize: { control: 'number' + }, + offsetHorizontal: { + control: 'number' + }, + offsetVertical: { + control: 'number' + }, + position: { + control: { + type: 'select', + options: ['above before', 'above after', 'below before', 'below after'] + } } }} > {((args) => ({ template: ` - + - + @@ -188,9 +278,25 @@ ESBadgeDefaultOptions defines default badge size ```ts export interface ESBadgeDefaultOptions { size?: number; + position?: ESBadgePositionVariant; + borderSize?: number; } ``` +ESBadgePositionVariant defines badge position type + +```ts +export type ESBadgePositionVariant = + | 'before' + | 'after' + | 'above' + | 'below' + | 'above before' + | 'above after' + | 'below before' + | 'below after'; +``` + Injection token that can be used to configure the default options for all components within an app. ```ts diff --git a/projects/elonkit/src/ui/badge/badge.component.scss b/projects/elonkit/src/ui/badge/badge.component.scss index ccad0ba8..c798a53d 100644 --- a/projects/elonkit/src/ui/badge/badge.component.scss +++ b/projects/elonkit/src/ui/badge/badge.component.scss @@ -8,8 +8,8 @@ $badge-size: 16; > :nth-child(2) { display: block; mask: radial-gradient( - circle at calc(var(--childElement) - var(--right) - var(--borderSize)) - calc(var(--childElement) - var(--bottom) - var(--borderSize)), + circle at calc(var(--childElement) - var(--offsetHorizontal) - var(--borderSize)) + calc(var(--childElement) - var(--offsetVertical) - var(--borderSize)), transparent var(--transparent), #fff 0 ); diff --git a/projects/elonkit/src/ui/badge/badge.component.ts b/projects/elonkit/src/ui/badge/badge.component.ts index 620da1c4..c8e503e5 100644 --- a/projects/elonkit/src/ui/badge/badge.component.ts +++ b/projects/elonkit/src/ui/badge/badge.component.ts @@ -8,14 +8,11 @@ import { Optional, Inject, ElementRef, - Renderer2, - OnInit, - AfterViewInit, ViewChild } from '@angular/core'; import { coerceNumberProperty } from '@angular/cdk/coercion'; -import { ESBadgeDefaultOptions } from './badge.types'; +import { ESBadgeDefaultOptions, ESBadgePositionVariant, ESBadgePositions } from './badge.types'; export const ES_BADGE_DEFAULT_OPTIONS = new InjectionToken( 'ES_BADGE_DEFAULT_OPTIONS' @@ -28,12 +25,7 @@ export const ES_BADGE_DEFAULT_OPTIONS = new InjectionToken { + const childElement = this.childElement.nativeElement.offsetWidth; + const transparent = this.size / 2 + this.borderSize; + + switch (this.position) { + case this.badgePosition.AboveAfter: { + this.top = 0; + this.right = -1; + this.offsetVertical = childElement - transparent; + this.offsetHorizontal = this.borderSize * 2; + break; + } + case this.badgePosition.AboveBefore: { + this.top = 0; + this.left = 0; + this.offsetVertical = childElement - transparent; + this.offsetHorizontal = this.offsetVertical; + break; + } + case this.badgePosition.BelowAfter: { + this.bottom = -1; + this.right = -1; + this.offsetVertical = this.borderSize * 2; + this.offsetHorizontal = this.borderSize * 2; + break; + } + case this.badgePosition.BelowBefore: { + this.left = 0; + this.bottom = -1; + this.offsetVertical = this.borderSize * 2; + this.offsetHorizontal = childElement - transparent; + break; + } + } + this.setOffsets(); + this.setStyles(); + this.changeDetector.detectChanges(); + }, 1000); + } + + private setOffsets(): void { this._elementRef.nativeElement.style.setProperty( - '--transparent', - `${this.size / 2 + this.borderSize + 1 + `px`}` + '--offsetVertical', + `${this.offsetVertical + `px`}` + ); + this._elementRef.nativeElement.style.setProperty( + '--offsetHorizontal', + `${this.offsetHorizontal + `px`}` ); } - public ngAfterViewInit() { + private setStyles() { const childElement = this.childElement.nativeElement.offsetWidth; + this._elementRef.nativeElement.style.setProperty('--borderSize', `${this.borderSize + `px`}`); + this._elementRef.nativeElement.style.setProperty( + '--transparent', + `${this.size / 2 + this.borderSize + 1 + `px`}` + ); this._elementRef.nativeElement.style.setProperty('--childElement', `${childElement + `px`}`); } } diff --git a/projects/elonkit/src/ui/badge/badge.types.ts b/projects/elonkit/src/ui/badge/badge.types.ts index 41c3973c..d8a47034 100644 --- a/projects/elonkit/src/ui/badge/badge.types.ts +++ b/projects/elonkit/src/ui/badge/badge.types.ts @@ -1,6 +1,20 @@ export interface ESBadgeDefaultOptions { size?: number; - bottom?: number; - right?: number; + position?: ESBadgePositionVariant; borderSize?: number; + offsetVertical?: number; + offsetHorizontal?: number; +} + +export type ESBadgePositionVariant = + | 'above before' + | 'above after' + | 'below before' + | 'below after'; + +export enum ESBadgePositions { + AboveBefore = 'above before', + AboveAfter = 'above after', + BelowBefore = 'below before', + BelowAfter = 'below after' } From 7ca1aac189146ae3d541d292213b96ecb2a40804 Mon Sep 17 00:00:00 2001 From: Andrew Date: Fri, 19 Mar 2021 12:48:54 +0300 Subject: [PATCH 06/14] fix(badge): rework badge position --- .../badge-story-basic.source.ts | 4 - .../badge-story-count.source.ts | 4 - .../__stories__/badge-story-count/index.ts | 1 + .../badge-story-custom.source.ts | 22 ++ .../__stories__/badge-story-custom/index.ts | 1 + .../badge-story-icon.source.ts | 4 - .../ui/badge/__stories__/badge.stories.mdx | 214 ++++++++++-------- .../elonkit/src/ui/badge/badge.component.html | 10 +- .../elonkit/src/ui/badge/badge.component.ts | 111 +++++---- projects/elonkit/src/ui/badge/badge.types.ts | 7 + 10 files changed, 205 insertions(+), 173 deletions(-) create mode 100644 projects/elonkit/src/ui/badge/__stories__/badge-story-custom/badge-story-custom.source.ts create mode 100644 projects/elonkit/src/ui/badge/__stories__/badge-story-custom/index.ts diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts index 986e6d08..6e0bc557 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts @@ -6,8 +6,6 @@ export const BADGE_STORY_BASIC_SOURCE = { [borderColor]="borderColor" [borderSize]="borderSize" [position]="position" - [offsetHorizontal]="offsetHorizontal" - [offsetVertical]="offsetVertical" > @@ -17,8 +15,6 @@ export const BADGE_STORY_BASIC_SOURCE = { [borderColor]="borderColor" [borderSize]="borderSize" [position]="position" - [offsetHorizontal]="offsetHorizontal" - [offsetVertical]="offsetVertical" > + + ` +}; diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-custom/index.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-custom/index.ts new file mode 100644 index 00000000..11c8e8aa --- /dev/null +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-custom/index.ts @@ -0,0 +1 @@ +export { BADGE_STORY_CUSTOM_SOURCE } from './badge-story-custom.source'; diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts index eb9e4901..e48c5c89 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts @@ -7,8 +7,6 @@ export const BADGE_STORY_ICON_SOURCE = { [borderColor]="borderColor" [borderSize]="borderSize" [position]="position" - [offsetHorizontal]="offsetHorizontal" - [offsetVertical]="offsetVertical" > @@ -19,8 +17,6 @@ export const BADGE_STORY_ICON_SOURCE = { [borderColor]="borderColor" [borderSize]="borderSize" [position]="position" - [offsetHorizontal]="offsetHorizontal" - [offsetVertical]="offsetVertical" > + + `, + moduleMetadata: { + imports: [ESBadgeModule, ESAvatarModule, MatButtonModule, MatIconModule] }, - borderSize: { - control: 'number' + props: { + ...args + } + })).bind({})} + + + +#### + +### Custom badge + +Badge with custom position. If position input is undefined use offsetHorizontal/offsetVertical inputs +to set horizontal and vertical offset of child element mask; to change badge positions use +positions input as object of positions: + + + {((args) => ({ template: ` @@ -267,6 +284,10 @@ Badge with count: +#### + +#### + ## API @@ -287,16 +308,23 @@ ESBadgePositionVariant defines badge position type ```ts export type ESBadgePositionVariant = - | 'before' - | 'after' - | 'above' - | 'below' | 'above before' | 'above after' | 'below before' | 'below after'; ``` +ESBadgePositionStyles defines types for object of custom positions + +```ts +export interface ESBadgePositionStyles { + 'top.px'?: number; + 'right.px'?: number; + 'bottom.px'?: number; + 'left.px'?: number; +} +``` + Injection token that can be used to configure the default options for all components within an app. ```ts diff --git a/projects/elonkit/src/ui/badge/badge.component.html b/projects/elonkit/src/ui/badge/badge.component.html index e6806f16..7780e443 100644 --- a/projects/elonkit/src/ui/badge/badge.component.html +++ b/projects/elonkit/src/ui/badge/badge.component.html @@ -1,15 +1,7 @@
( 'ES_BADGE_DEFAULT_OPTIONS' @@ -46,8 +51,10 @@ export class ESBadgeComponent { return this._position; } public set position(value: ESBadgePositionVariant) { - this._position = value || 'below after'; - this.setPositions(); + this._position = value; + if (this._position) { + this.setPositions(); + } } private _position: ESBadgePositionVariant; @@ -76,56 +83,17 @@ export class ESBadgeComponent { private _color: string; /** - * @internal - * @ignore - */ - public get top(): number { - return this._top; - } - public set top(value: number) { - this._top = coerceNumberProperty(value); - this.setPositions(); - } - private _top: number; - - /** - * @internal - * @ignore - */ - public get bottom(): number { - return this._bottom; - } - public set bottom(value: number) { - this._bottom = coerceNumberProperty(value); - this.setPositions(); - } - private _bottom: number; - - /** - * @internal - * @ignore + * Defines badge custom positions. */ - public get right(): number { - return this._right; - } - public set right(value: number) { - this._right = coerceNumberProperty(value); - this.setPositions(); - } - private _right: number; - - /** - * @internal - * @ignore - */ - public get left(): number { - return this._left; + @Input() + public get positions(): ESBadgePositionStyles { + return this._positions; } - public set left(value: number) { - this._left = coerceNumberProperty(value); + public set positions(value: ESBadgePositionStyles) { + this._positions = value; this.setPositions(); } - private _left: number; + private _positions: ESBadgePositionStyles; /** * Path to image to display icon. @@ -160,6 +128,14 @@ export class ESBadgeComponent { } public set offsetVertical(value: number) { this._offsetVertical = coerceNumberProperty(value); + setTimeout(() => { + this._elementRef.nativeElement.style.setProperty( + '--offsetVertical', + `${this._offsetVertical + `px`}` + ); + this.setStyles(); + this.changeDetector.markForCheck(); + }, 800); } private _offsetVertical: number; @@ -172,6 +148,14 @@ export class ESBadgeComponent { } public set offsetHorizontal(value: number) { this._offsetHorizontal = coerceNumberProperty(value); + setTimeout(() => { + this._elementRef.nativeElement.style.setProperty( + '--offsetHorizontal', + `${this._offsetHorizontal + `px`}` + ); + this.setStyles(); + this.changeDetector.markForCheck(); + }, 800); } private _offsetHorizontal: number; @@ -212,29 +196,25 @@ export class ESBadgeComponent { switch (this.position) { case this.badgePosition.AboveAfter: { - this.top = 0; - this.right = -1; + this.positions = { 'top.px': 0, 'right.px': -1 }; this.offsetVertical = childElement - transparent; this.offsetHorizontal = this.borderSize * 2; break; } case this.badgePosition.AboveBefore: { - this.top = 0; - this.left = 0; + this.positions = { 'top.px': 0, 'left.px': 0 }; this.offsetVertical = childElement - transparent; this.offsetHorizontal = this.offsetVertical; break; } case this.badgePosition.BelowAfter: { - this.bottom = -1; - this.right = -1; + this.positions = { 'bottom.px': -1, 'right.px': -1 }; this.offsetVertical = this.borderSize * 2; this.offsetHorizontal = this.borderSize * 2; break; } case this.badgePosition.BelowBefore: { - this.left = 0; - this.bottom = -1; + this.positions = { 'left.px': 0, 'bottom.px': -1 }; this.offsetVertical = this.borderSize * 2; this.offsetHorizontal = childElement - transparent; break; @@ -242,8 +222,21 @@ export class ESBadgeComponent { } this.setOffsets(); this.setStyles(); - this.changeDetector.detectChanges(); - }, 1000); + this.changeDetector.markForCheck(); + }, 800); + } + + /** + * @internal + * @ignore + */ + public stylesObject() { + return { + 'height.px': this.size, + 'width.px': this.size, + 'background-color.px': this.color, + ...this.positions + }; } private setOffsets(): void { diff --git a/projects/elonkit/src/ui/badge/badge.types.ts b/projects/elonkit/src/ui/badge/badge.types.ts index d8a47034..e77ae67c 100644 --- a/projects/elonkit/src/ui/badge/badge.types.ts +++ b/projects/elonkit/src/ui/badge/badge.types.ts @@ -18,3 +18,10 @@ export enum ESBadgePositions { BelowBefore = 'below before', BelowAfter = 'below after' } + +export interface ESBadgePositionStyles { + 'top.px'?: number; + 'right.px'?: number; + 'bottom.px'?: number; + 'left.px'?: number; +} From a662f6b1fa94ce8e5261eb9dbf72d57125bb5af1 Mon Sep 17 00:00:00 2001 From: Andrew Date: Fri, 19 Mar 2021 17:14:58 +0300 Subject: [PATCH 07/14] fix(badge): fix story and tests --- .../src/ui/badge/__specs__/badge.spec.ts | 27 +++++--- .../badge-story-basic.source.ts | 4 +- .../badge-story-count.source.ts | 8 +-- .../badge-story-custom.source.ts | 4 +- .../badge-story-icon.source.ts | 40 ++++++------ .../ui/badge/__stories__/badge.stories.mdx | 61 ++++++------------- .../elonkit/src/ui/badge/badge.component.html | 16 ++--- .../elonkit/src/ui/badge/badge.component.scss | 17 ++---- .../src/ui/badge/badge.component.theme.scss | 8 ++- .../elonkit/src/ui/badge/badge.component.ts | 22 ------- 10 files changed, 81 insertions(+), 126 deletions(-) diff --git a/projects/elonkit/src/ui/badge/__specs__/badge.spec.ts b/projects/elonkit/src/ui/badge/__specs__/badge.spec.ts index 74779b04..e64ddb94 100644 --- a/projects/elonkit/src/ui/badge/__specs__/badge.spec.ts +++ b/projects/elonkit/src/ui/badge/__specs__/badge.spec.ts @@ -4,6 +4,11 @@ import { render } from '@testing-library/angular'; import { ESBadgeModule } from '../badge.module'; import { ESBadgeComponent } from '../badge.component'; +@Component({ + template: ` Count ` +}) +class BadgeWrapperComponent {} + describe('Badge', () => { it('Should change badge size', async () => { const component = await render(ESBadgeComponent, { @@ -17,27 +22,35 @@ describe('Badge', () => { expect(component.fixture.componentInstance.size).toBe(40); }); - it('Should render alt text on icon', async () => { + it('Should change badge offsetVertical', async () => { const component = await render(ESBadgeComponent, { componentProperties: { - src: './test-path-to-icon', - alt: 'alt text' + offsetVertical: 10 }, imports: [ESBadgeModule], excludeComponentDeclaration: true }); - expect(component.getByAltText('alt text')).toBeInTheDocument(); + expect(component.fixture.componentInstance.offsetVertical).toBe(10); }); - it('Should change badge count', async () => { + it('Should change badge offsetHorizontal', async () => { const component = await render(ESBadgeComponent, { componentProperties: { - count: 1 + offsetHorizontal: 20 }, imports: [ESBadgeModule], excludeComponentDeclaration: true }); - expect(component.getByTestId('badge')).toHaveClass('es-caption es-badge__count'); + + expect(component.fixture.componentInstance.offsetHorizontal).toBe(20); + }); + + it('Should accept count', async () => { + const component = await render(BadgeWrapperComponent, { + imports: [ESBadgeModule] + }); + + expect(component.getByText('Count')).toBeInTheDocument(); }); }); diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts index 6e0bc557..4ac178d2 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-basic/badge-story-basic.source.ts @@ -7,7 +7,7 @@ export const BADGE_STORY_BASIC_SOURCE = { [borderSize]="borderSize" [position]="position" > - + - diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts index e1e182a4..6a0cebab 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-count/badge-story-count.source.ts @@ -5,20 +5,20 @@ export const BADGE_STORY_COUNT_SOURCE = { [color]="color" [borderColor]="borderColor" [borderSize]="borderSize" - [count]="count" [position]="position" > - + + - diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-custom/badge-story-custom.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-custom/badge-story-custom.source.ts index cb164ca9..1cc7f958 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge-story-custom/badge-story-custom.source.ts +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-custom/badge-story-custom.source.ts @@ -6,7 +6,7 @@ export const BADGE_STORY_CUSTOM_SOURCE = { [offsetHorizontal]="offsetHorizontal" [offsetVertical]="offsetVertical" > - + - diff --git a/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts b/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts index e48c5c89..d86f89f0 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts +++ b/projects/elonkit/src/ui/badge/__stories__/badge-story-icon/badge-story-icon.source.ts @@ -1,26 +1,22 @@ export const BADGE_STORY_ICON_SOURCE = { html: ` - - - - - - + + favorite + + + + favorite + + ` }; diff --git a/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx b/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx index 10e22daa..3fe81bd4 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx +++ b/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx @@ -39,7 +39,8 @@ import { BADGE_STORY_CUSTOM_SOURCE } from './badge-story-custom'; # Badge -Generates a badge component to the different positions of its children. +Generates a badge component to the different positions of its children. Pass children component +with attribute es-role="child" ## Demos @@ -70,22 +71,16 @@ Basic badge with no image using color input as background color and borderSize i [color]="color" [borderSize]="borderSize" [position]="position" - [offsetHorizontal]="offsetHorizontal" - [offsetVertical]="offsetVertical" - [positions]="positions" > - + - @@ -106,45 +101,29 @@ Basic badge with no image using color input as background color and borderSize i ### Icon badge -Badge with icon using src input as path to icon and alt input as text for alt attribute: +Badge with icon. Pass icon via ng-content with attribute es-role="icon": #### - + {((args) => ({ template: ` - + face + - @@ -165,7 +144,7 @@ Badge with icon using src input as path to icon and alt input as text for alt at ### Count badge -Badge with count using count input as count number: +Badge with count. Pass count via ng-content with attribute es-role="count": #### @@ -173,15 +152,11 @@ Badge with count using count input as count number: @@ -191,19 +166,19 @@ Badge with count using count input as count number: [size]="size" [color]="color" [borderSize]="borderSize" - [count]="count" [position]="position" > - + 1 + - @@ -261,7 +236,7 @@ positions input as object of positions: [offsetHorizontal]="offsetHorizontal" [offsetVertical]="offsetVertical" > - + - diff --git a/projects/elonkit/src/ui/badge/badge.component.html b/projects/elonkit/src/ui/badge/badge.component.html index 7780e443..2fed181b 100644 --- a/projects/elonkit/src/ui/badge/badge.component.html +++ b/projects/elonkit/src/ui/badge/badge.component.html @@ -1,19 +1,13 @@
- - - {{count}} - + +
+ +
- +
diff --git a/projects/elonkit/src/ui/badge/badge.component.scss b/projects/elonkit/src/ui/badge/badge.component.scss index c798a53d..6a4253dc 100644 --- a/projects/elonkit/src/ui/badge/badge.component.scss +++ b/projects/elonkit/src/ui/badge/badge.component.scss @@ -23,17 +23,12 @@ $badge-size: 16; justify-content: center; position: absolute; z-index: 1000; - } - - &__img { - height: 96%; - object-fit: cover; - width: 96%; - } - &__count { - font-size: 11px; - font-weight: 700; - line-height: 16px; + [es-role='icon'] { + border-radius: 50%; + font-size: 16px; + height: fit-content; + width: fit-content; + } } } diff --git a/projects/elonkit/src/ui/badge/badge.component.theme.scss b/projects/elonkit/src/ui/badge/badge.component.theme.scss index fdeb76bb..519bd988 100644 --- a/projects/elonkit/src/ui/badge/badge.component.theme.scss +++ b/projects/elonkit/src/ui/badge/badge.component.theme.scss @@ -6,11 +6,15 @@ .es-badge__content { background-color: mat-color($attention, 500); - &_with-icon { + [es-role='icon'] { background-color: mat-color($cl-mono-b, 500); } - &_with-count { + [es-role='child'] { + color: mat-color($cl-mono-b, 500); + } + + [es-role='count'] { color: mat-color($cl-mono-b, 500); } } diff --git a/projects/elonkit/src/ui/badge/badge.component.ts b/projects/elonkit/src/ui/badge/badge.component.ts index 088357c9..28013c18 100644 --- a/projects/elonkit/src/ui/badge/badge.component.ts +++ b/projects/elonkit/src/ui/badge/badge.component.ts @@ -95,28 +95,6 @@ export class ESBadgeComponent { } private _positions: ESBadgePositionStyles; - /** - * Path to image to display icon. - */ - @Input() public src?: string; - - /** - * Alt text for icon - */ - @Input() public alt?: string; - - /** - * Defines badge count. - */ - @Input() - public get count(): number { - return this._count; - } - public set count(value: number) { - this._count = coerceNumberProperty(value); - } - private _count: number; - private badgePosition = ESBadgePositions; /** From 6b49235b2436f6fbb00a537a656cb6c0b7ac6be9 Mon Sep 17 00:00:00 2001 From: Andrew Date: Fri, 19 Mar 2021 17:20:02 +0300 Subject: [PATCH 08/14] fix(badge): delete internal from constructor --- projects/elonkit/src/ui/badge/badge.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/elonkit/src/ui/badge/badge.component.ts b/projects/elonkit/src/ui/badge/badge.component.ts index 28013c18..545f71a8 100644 --- a/projects/elonkit/src/ui/badge/badge.component.ts +++ b/projects/elonkit/src/ui/badge/badge.component.ts @@ -144,7 +144,6 @@ export class ESBadgeComponent { public childElement: ElementRef; /** - * @internal * @ignore */ constructor( From a50964696bd49d97f49bd832e65ebb7a53b0b947 Mon Sep 17 00:00:00 2001 From: Andrew Date: Mon, 22 Mar 2021 14:39:33 +0300 Subject: [PATCH 09/14] fix(badge): fixes after review --- projects/elonkit/src/theme.scss | 1 - .../ui/badge/__stories__/badge.stories.mdx | 31 ++++++------- .../elonkit/src/ui/badge/badge.component.html | 4 +- .../elonkit/src/ui/badge/badge.component.ts | 44 ++++++++----------- projects/elonkit/src/ui/badge/badge.module.ts | 4 +- projects/elonkit/src/ui/badge/badge.types.ts | 10 +---- 6 files changed, 40 insertions(+), 54 deletions(-) diff --git a/projects/elonkit/src/theme.scss b/projects/elonkit/src/theme.scss index 6c68deca..4cd2238c 100644 --- a/projects/elonkit/src/theme.scss +++ b/projects/elonkit/src/theme.scss @@ -1,7 +1,6 @@ @import './ui/alert/alert.component.theme'; @import './ui/dropzone/dropzone.component.theme'; @import './ui/inline-form-field/inline-form-field.component.theme'; -@import './ui/paginator/paginator.component.theme'; @import './ui/dropzone/dropzone.component.theme'; @import './ui/avatar/avatar.component.theme'; @import './ui//badge//badge.component.theme'; diff --git a/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx b/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx index 3fe81bd4..fa74bda0 100644 --- a/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx +++ b/projects/elonkit/src/ui/badge/__stories__/badge.stories.mdx @@ -72,7 +72,7 @@ Basic badge with no image using color input as background color and borderSize i [borderSize]="borderSize" [position]="position" > - + - @@ -115,7 +115,7 @@ Badge with icon. Pass icon via ng-content with attribute es-role="icon": [position]="position" > face - + face - @@ -169,7 +169,7 @@ Badge with count. Pass count via ng-content with attribute es-role="count": [position]="position" > 1 - + 1 - @@ -236,7 +236,7 @@ positions input as object of positions: [offsetHorizontal]="offsetHorizontal" [offsetVertical]="offsetVertical" > - + - @@ -274,19 +274,20 @@ ESBadgeDefaultOptions defines default badge size ```ts export interface ESBadgeDefaultOptions { size?: number; - position?: ESBadgePositionVariant; + position?: ESBadgePosition; borderSize?: number; } ``` -ESBadgePositionVariant defines badge position type +ESBadgePosition defines badge position type ```ts -export type ESBadgePositionVariant = - | 'above before' - | 'above after' - | 'below before' - | 'below after'; +export enum ESBadgePosition { + AboveBefore = 'above before', + AboveAfter = 'above after', + BelowBefore = 'below before', + BelowAfter = 'below after' +} ``` ESBadgePositionStyles defines types for object of custom positions diff --git a/projects/elonkit/src/ui/badge/badge.component.html b/projects/elonkit/src/ui/badge/badge.component.html index 2fed181b..e545fc25 100644 --- a/projects/elonkit/src/ui/badge/badge.component.html +++ b/projects/elonkit/src/ui/badge/badge.component.html @@ -3,11 +3,11 @@ [ngStyle]="stylesObject()" > -
+
- +
diff --git a/projects/elonkit/src/ui/badge/badge.component.ts b/projects/elonkit/src/ui/badge/badge.component.ts index 545f71a8..0d7c36a0 100644 --- a/projects/elonkit/src/ui/badge/badge.component.ts +++ b/projects/elonkit/src/ui/badge/badge.component.ts @@ -12,12 +12,7 @@ import { } from '@angular/core'; import { coerceNumberProperty } from '@angular/cdk/coercion'; -import { - ESBadgeDefaultOptions, - ESBadgePositionVariant, - ESBadgePositions, - ESBadgePositionStyles -} from './badge.types'; +import { ESBadgeDefaultOptions, ESBadgePosition, ESBadgePositionStyles } from './badge.types'; export const ES_BADGE_DEFAULT_OPTIONS = new InjectionToken( 'ES_BADGE_DEFAULT_OPTIONS' @@ -47,16 +42,16 @@ export class ESBadgeComponent { * Defines badge position. */ @Input() - public get position(): ESBadgePositionVariant { + public get position(): ESBadgePosition { return this._position; } - public set position(value: ESBadgePositionVariant) { + public set position(value: ESBadgePosition) { this._position = value; if (this._position) { this.setPositions(); } } - private _position: ESBadgePositionVariant; + private _position: ESBadgePosition; /** * Defines badge border width in pixels. @@ -95,7 +90,7 @@ export class ESBadgeComponent { } private _positions: ESBadgePositionStyles; - private badgePosition = ESBadgePositions; + private badgePosition = ESBadgePosition; /** * Defines badge vertical offset. @@ -113,7 +108,7 @@ export class ESBadgeComponent { ); this.setStyles(); this.changeDetector.markForCheck(); - }, 800); + }); } private _offsetVertical: number; @@ -133,7 +128,7 @@ export class ESBadgeComponent { ); this.setStyles(); this.changeDetector.markForCheck(); - }, 800); + }); } private _offsetHorizontal: number; @@ -170,37 +165,36 @@ export class ESBadgeComponent { setTimeout(() => { const childElement = this.childElement.nativeElement.offsetWidth; const transparent = this.size / 2 + this.borderSize; + let offsetVertical = childElement - transparent; + let offsetHorizontal = this.borderSize * 2; switch (this.position) { case this.badgePosition.AboveAfter: { this.positions = { 'top.px': 0, 'right.px': -1 }; - this.offsetVertical = childElement - transparent; - this.offsetHorizontal = this.borderSize * 2; break; } case this.badgePosition.AboveBefore: { this.positions = { 'top.px': 0, 'left.px': 0 }; - this.offsetVertical = childElement - transparent; - this.offsetHorizontal = this.offsetVertical; + offsetHorizontal = offsetVertical; break; } case this.badgePosition.BelowAfter: { this.positions = { 'bottom.px': -1, 'right.px': -1 }; - this.offsetVertical = this.borderSize * 2; - this.offsetHorizontal = this.borderSize * 2; + offsetVertical = this.borderSize * 2; + offsetHorizontal = this.borderSize * 2; break; } case this.badgePosition.BelowBefore: { this.positions = { 'left.px': 0, 'bottom.px': -1 }; - this.offsetVertical = this.borderSize * 2; - this.offsetHorizontal = childElement - transparent; + offsetVertical = this.borderSize * 2; + offsetHorizontal = childElement - transparent; break; } } - this.setOffsets(); + this.setOffsets(offsetVertical, offsetHorizontal); this.setStyles(); this.changeDetector.markForCheck(); - }, 800); + }); } /** @@ -216,14 +210,14 @@ export class ESBadgeComponent { }; } - private setOffsets(): void { + private setOffsets(offsetVertical, offsetHorizontal): void { this._elementRef.nativeElement.style.setProperty( '--offsetVertical', - `${this.offsetVertical + `px`}` + `${offsetVertical + `px`}` ); this._elementRef.nativeElement.style.setProperty( '--offsetHorizontal', - `${this.offsetHorizontal + `px`}` + `${offsetHorizontal + `px`}` ); } diff --git a/projects/elonkit/src/ui/badge/badge.module.ts b/projects/elonkit/src/ui/badge/badge.module.ts index 8aabe7bb..12cb257a 100644 --- a/projects/elonkit/src/ui/badge/badge.module.ts +++ b/projects/elonkit/src/ui/badge/badge.module.ts @@ -1,13 +1,11 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MatIconModule } from '@angular/material/icon'; - import { ESBadgeComponent } from './badge.component'; @NgModule({ declarations: [ESBadgeComponent], - imports: [CommonModule, MatIconModule], + imports: [CommonModule], exports: [ESBadgeComponent] }) export class ESBadgeModule {} diff --git a/projects/elonkit/src/ui/badge/badge.types.ts b/projects/elonkit/src/ui/badge/badge.types.ts index e77ae67c..4272fd98 100644 --- a/projects/elonkit/src/ui/badge/badge.types.ts +++ b/projects/elonkit/src/ui/badge/badge.types.ts @@ -1,18 +1,12 @@ export interface ESBadgeDefaultOptions { size?: number; - position?: ESBadgePositionVariant; + position?: ESBadgePosition; borderSize?: number; offsetVertical?: number; offsetHorizontal?: number; } -export type ESBadgePositionVariant = - | 'above before' - | 'above after' - | 'below before' - | 'below after'; - -export enum ESBadgePositions { +export enum ESBadgePosition { AboveBefore = 'above before', AboveAfter = 'above after', BelowBefore = 'below before', From 31b6ea5a2b9e628162e0e20a70205aefbda3bae3 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 30 Mar 2021 10:12:06 +0300 Subject: [PATCH 10/14] fix(badge): delete unnecessary --- projects/elonkit/src/ui/badge/badge.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/elonkit/src/ui/badge/badge.component.ts b/projects/elonkit/src/ui/badge/badge.component.ts index 0d7c36a0..dadd4f65 100644 --- a/projects/elonkit/src/ui/badge/badge.component.ts +++ b/projects/elonkit/src/ui/badge/badge.component.ts @@ -192,7 +192,6 @@ export class ESBadgeComponent { } } this.setOffsets(offsetVertical, offsetHorizontal); - this.setStyles(); this.changeDetector.markForCheck(); }); } From 36075bde9335b9875b0b64e7fc668723dc9db05e Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 30 Mar 2021 11:02:35 +0300 Subject: [PATCH 11/14] fix(badge): move changeDetector to method --- projects/elonkit/src/ui/badge/badge.component.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/projects/elonkit/src/ui/badge/badge.component.ts b/projects/elonkit/src/ui/badge/badge.component.ts index dadd4f65..3966cd4c 100644 --- a/projects/elonkit/src/ui/badge/badge.component.ts +++ b/projects/elonkit/src/ui/badge/badge.component.ts @@ -107,7 +107,6 @@ export class ESBadgeComponent { `${this._offsetVertical + `px`}` ); this.setStyles(); - this.changeDetector.markForCheck(); }); } private _offsetVertical: number; @@ -127,7 +126,6 @@ export class ESBadgeComponent { `${this._offsetHorizontal + `px`}` ); this.setStyles(); - this.changeDetector.markForCheck(); }); } private _offsetHorizontal: number; @@ -192,7 +190,6 @@ export class ESBadgeComponent { } } this.setOffsets(offsetVertical, offsetHorizontal); - this.changeDetector.markForCheck(); }); } @@ -218,6 +215,7 @@ export class ESBadgeComponent { '--offsetHorizontal', `${offsetHorizontal + `px`}` ); + this.changeDetector.markForCheck(); } private setStyles() { @@ -228,5 +226,6 @@ export class ESBadgeComponent { `${this.size / 2 + this.borderSize + 1 + `px`}` ); this._elementRef.nativeElement.style.setProperty('--childElement', `${childElement + `px`}`); + this.changeDetector.markForCheck(); } } From d6b17e712c08db87923eb289b5c8118ed5b5fb14 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 20 Apr 2021 17:00:46 +0300 Subject: [PATCH 12/14] fix(badge): fixes after rebase --- .../avatar-story-basic.component.html | 9 ---- .../avatar-story-basic.component.scss | 3 -- .../avatar-story-basic.component.ts | 22 -------- .../avatar-story-basic.module.ts | 12 ----- .../avatar-story-basic.source.ts | 22 -------- .../__stories__/avatar-story-basic/index.ts | 3 -- .../avatar-story-custom.component.html | 11 ---- .../avatar-story-custom.component.scss | 3 -- .../avatar-story-custom.component.ts | 25 --------- .../avatar-story-custom.source.ts | 22 -------- .../avatar-story-group.component.html | 13 ----- .../avatar-story-group.component.ts | 23 --------- .../avatar-story-group.module.ts | 12 ----- .../avatar-story-group.source.ts | 44 ---------------- ...avatar-story-no-image-typography.source.ts | 1 + .../ui/avatar/__stories__/avatar.stories.mdx | 3 +- .../src/ui/avatar/avatar-group.component.html | 4 -- .../src/ui/avatar/avatar-group.component.scss | 36 ++++++------- .../src/ui/avatar/avatar-group.component.ts | 51 +++++++++++++++++-- 19 files changed, 67 insertions(+), 252 deletions(-) delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.html delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.scss delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.ts delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.module.ts delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.source.ts delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/index.ts delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.html delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.scss delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.ts delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.source.ts delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.html delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.ts delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.module.ts diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.html b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.html deleted file mode 100644 index 61816183..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.html +++ /dev/null @@ -1,9 +0,0 @@ - diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.scss b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.scss deleted file mode 100644 index 7fcfd2d0..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.dropzone { - max-width: 400px; -} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.ts deleted file mode 100644 index aa8c6f19..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'es-avatar-basic', - templateUrl: './avatar-story-basic.component.html' -}) -export class AvatarStoryBasicComponent { - @Input() - public icon: string; - @Input() - public width: number; - @Input() - public height: number; - @Input() - public borderRadius: number; - @Input() - public showStatus: boolean; - @Input() - public statusWidth: number; - @Input() - public statusHeight: number; -} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.module.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.module.ts deleted file mode 100644 index f5a2940f..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { AvatarStoryBasicComponent } from './avatar-story-basic.component'; -import { ESAvatarModule } from '../..'; - -@NgModule({ - declarations: [AvatarStoryBasicComponent], - imports: [CommonModule, ESAvatarModule], - exports: [AvatarStoryBasicComponent] -}) -export class AvatarStoryBasicModule {} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.source.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.source.ts deleted file mode 100644 index f9aca7b6..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/avatar-story-basic.source.ts +++ /dev/null @@ -1,22 +0,0 @@ -export const AVATAR_STORY_BASIC_SOURCE = { - ts: ` - export class AppComponent { - public docs = new FormControl([]); - } - `, - html: ` -
- - This is an example of a hint message - -
- ` -}; diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/index.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/index.ts deleted file mode 100644 index 30e5db49..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-basic/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { AvatarStoryBasicModule } from './avatar-story-basic.module'; -export { AvatarStoryBasicComponent } from './avatar-story-basic.component'; -export { AVATAR_STORY_BASIC_SOURCE } from './avatar-story-basic.source'; diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.html b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.html deleted file mode 100644 index 5a8f15d9..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.html +++ /dev/null @@ -1,11 +0,0 @@ - diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.scss b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.scss deleted file mode 100644 index 7fcfd2d0..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.dropzone { - max-width: 400px; -} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.ts deleted file mode 100644 index e0f41400..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'es-avatar-custom', - templateUrl: './avatar-story-custom.component.html' -}) -export class AvatarStoryCustomComponent { - @Input() - public icon: string; - @Input() - public width: number; - @Input() - public height: number; - @Input() - public borderRadius: number; - @Input() - public showStatus: boolean; - @Input() - public statusWidth: number; - @Input() - public statusHeight: number; - - public logo = '/img/es-logo.png'; - public status = '/icons/avatar/star.svg'; -} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.source.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.source.ts deleted file mode 100644 index 149533ce..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-custom/avatar-story-custom.source.ts +++ /dev/null @@ -1,22 +0,0 @@ -export const AVATAR_STORY_CUSTOM_SOURCE = { - ts: ` - export class AppComponent { - public docs = new FormControl([]); - } - `, - html: ` -
- - This is an example of a hint message - -
- ` -}; diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.html b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.html deleted file mode 100644 index cd53dc02..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.html +++ /dev/null @@ -1,13 +0,0 @@ - - - diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.ts deleted file mode 100644 index de9cd747..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@angular/core'; -import { ESAvatarForm } from '../../avatar.types'; -@Component({ - selector: 'es-avatar-group-aomponent', - templateUrl: './avatar-story-group.component.html', - styleUrls: ['./avatar-story-group.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None -}) -export class AvatarStoryGroupComponent { - @Input() - public size: number; - - public avatars = [ - { - size: 60, - src: '/img/es-logo.png', - alt: 'alt text' - }, - { avatarSrc: null, size: 60 }, - { avatarSrc: null, size: 60, textTypography: 'typography' } - ]; -} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.module.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.module.ts deleted file mode 100644 index 43194c37..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { AvatarStoryGroupComponent } from './avatar-story-group.component'; -import { ESAvatarModule } from '../..'; - -@NgModule({ - declarations: [AvatarStoryGroupComponent], - imports: [CommonModule, ESAvatarModule], - exports: [AvatarStoryGroupComponent] -}) -export class AvatarStoryGroupModule {} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.source.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.source.ts index 3b2f161d..1a1c9078 100644 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.source.ts +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-group/avatar-story-group.source.ts @@ -1,5 +1,4 @@ export const AVATAR_STORY_GROUP_SOURCE = { -<<<<<<< HEAD html: ` -======= - ts: ` - @Component({ - encapsulation: ViewEncapsulation.None - }) - export class AppComponent { - @Input() - public size: number; - - public avatars = [ - { - size: 60, - src: '/img/es-logo.png', - alt: 'alt text' - }, - { avatarSrc: null, size: 60 }, - { avatarSrc: null, size: 60, textTypography: 'typography' } - ]; - } - `, - html: ` - - - - `, - scss: ` - .typography { - font-family: 'Roboto', sans-serif; - font-size: 14px; - font-weight: 700; - letter-spacing: 0.25px; - } ->>>>>>> fix(avatar): delete status badge from avatar component, some fixies ` }; diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-no-image-typography/avatar-story-no-image-typography.source.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-no-image-typography/avatar-story-no-image-typography.source.ts index 9801db98..29c688e1 100644 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-no-image-typography/avatar-story-no-image-typography.source.ts +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-no-image-typography/avatar-story-no-image-typography.source.ts @@ -3,6 +3,7 @@ export const AVATAR_STORY_NO_IMAGE_TYPOGRAPHY_SOURCE = { НФ ` }; diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar.stories.mdx b/projects/elonkit/src/ui/avatar/__stories__/avatar.stories.mdx index 71304979..d771e909 100644 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar.stories.mdx +++ b/projects/elonkit/src/ui/avatar/__stories__/avatar.stories.mdx @@ -182,7 +182,7 @@ export interface ESAvatarDefaultOptions { } ``` -````ts +```ts export enum ESAvatarVariant { Round = 'round', Square = 'square' @@ -207,4 +207,3 @@ import { ES_AVATAR_DEFAULT_OPTIONS } from '@elonsoft/elonkit/ui/avatar'; ] }) ``` -```` diff --git a/projects/elonkit/src/ui/avatar/avatar-group.component.html b/projects/elonkit/src/ui/avatar/avatar-group.component.html index a2b9d367..00e4a5a5 100644 --- a/projects/elonkit/src/ui/avatar/avatar-group.component.html +++ b/projects/elonkit/src/ui/avatar/avatar-group.component.html @@ -1,7 +1,3 @@
-<<<<<<< HEAD -======= - ->>>>>>> fix(avatar): delete status badge from avatar component, some fixies
diff --git a/projects/elonkit/src/ui/avatar/avatar-group.component.scss b/projects/elonkit/src/ui/avatar/avatar-group.component.scss index 6b908d23..6c88e039 100644 --- a/projects/elonkit/src/ui/avatar/avatar-group.component.scss +++ b/projects/elonkit/src/ui/avatar/avatar-group.component.scss @@ -1,8 +1,7 @@ .es-avatar-group { display: flex; - &__avatar { - border: 2px solid #fff; + es-avatar { border-radius: 50%; &:last-child { @@ -12,25 +11,26 @@ &:not(:first-child) { margin-left: -12px; } - } -} -/* change the white border to mask only if it's supported: */ -@supports (mask: radial-gradient(transparent 12px, black 0)) { - /* stylelint-disable-next-line */ - .es-avatar-group__avatar { - border: unset; + /* change the white border to mask only if it's supported: */ + @supports (mask: radial-gradient(transparent 12px, black 0)) { + /* stylelint-disable-next-line */ - &:not(:last-of-type) { - mask: radial-gradient( - circle at calc((var(--size) * 0.75) + ((var(--size) / 2) + 2px)), - transparent calc((var(--size) / 2) + 2px), - #fff 0 - ); - } + &:not(:last-of-type) { + mask: radial-gradient( + circle at calc((var(--size) * 0.75) + ((var(--size) / 2) + 2px)), + transparent calc((var(--size) / 2) + 2px), + #fff 0 + ); + } + + &:not(:first-of-type) { + margin-left: calc((var(--size) * -0.25) + 2.2px); + } - &:not(:first-of-type) { - margin-left: calc(var(--size) * -0.25); + .es-avatar { + border: unset !important; + } } } } diff --git a/projects/elonkit/src/ui/avatar/avatar-group.component.ts b/projects/elonkit/src/ui/avatar/avatar-group.component.ts index c85ba5b0..7f74e02f 100644 --- a/projects/elonkit/src/ui/avatar/avatar-group.component.ts +++ b/projects/elonkit/src/ui/avatar/avatar-group.component.ts @@ -4,9 +4,18 @@ import { ChangeDetectionStrategy, ElementRef, ViewEncapsulation, - OnInit + OnInit, + ContentChildren, + QueryList, + AfterContentInit, + Renderer2, + OnDestroy } from '@angular/core'; +import { ESAvatarComponent } from './avatar.component'; +import { takeUntil } from 'rxjs/operators'; +import { Subject } from 'rxjs'; + @Component({ selector: 'es-avatar-group', templateUrl: './avatar-group.component.html', @@ -14,16 +23,50 @@ import { changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None }) -export class ESAvatarGroupComponent implements OnInit { +export class ESAvatarGroupComponent implements OnInit, AfterContentInit, OnDestroy { + @ContentChildren(ESAvatarComponent, { read: ElementRef }) private avatars: QueryList; /** * Defines size of the avatar in pixels. */ @Input() public size: number; - constructor(private _elementRef: ElementRef) {} + private destroyed$ = new Subject(); + + /** + * @ignore + */ + constructor(private _elementRef: ElementRef, private renderer: Renderer2) {} + /** + * @ignore + */ public ngOnInit() { - this._elementRef.nativeElement.style.setProperty('--size', `${this.size - 3 + `px`}`); + this._elementRef.nativeElement.style.setProperty('--size', `${this.size + `px`}`); + } + + /** + * @ignore + */ + public ngAfterContentInit() { + this.setAvatarsIndex(this.avatars); + this.avatars.changes.pipe(takeUntil(this.destroyed$)).subscribe((avatars) => { + if (avatars) { + this.setAvatarsIndex(avatars); + } + }); + } + + private setAvatarsIndex = (avatars): void => { + avatars.forEach((avatar, index) => { + this.renderer.setStyle(avatar.nativeElement, 'z-index', index); + }); + }; + + /** + * @ignore + */ + public ngOnDestroy() { + this.destroyed$.next(); } } From 3915d3575a908a344d1786d214f50054cb83257a Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 20 Apr 2021 17:09:23 +0300 Subject: [PATCH 13/14] fix(badge): fixes after review --- .../avatar-story-typography.component.html | 8 -------- .../avatar-story-typography.component.ts | 17 ----------------- .../avatar-story-typography.source.ts | 15 --------------- .../src/ui/avatar/avatar-group.component.ts | 11 ++++++----- .../elonkit/src/ui/avatar/avatar.component.ts | 4 ++-- .../elonkit/src/ui/badge/badge.component.ts | 9 +-------- 6 files changed, 9 insertions(+), 55 deletions(-) delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.html delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.ts delete mode 100644 projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.source.ts diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.html b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.html deleted file mode 100644 index 93864efb..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.html +++ /dev/null @@ -1,8 +0,0 @@ - - НФ - - diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.ts deleted file mode 100644 index 0b9a71f6..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, ChangeDetectionStrategy, Input, ViewEncapsulation } from '@angular/core'; -import { ESAvatarForm } from '../../avatar.types'; -@Component({ - selector: 'es-avatar-typography', - templateUrl: './avatar-story-typography.component.html', - styleUrls: ['./avatar-story-typography.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None -}) -export class AvatarStoryTypographyComponent { - @Input() - public alt: string; - @Input() - public size: number; - @Input() - public variant: ESAvatarForm; -} diff --git a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.source.ts b/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.source.ts deleted file mode 100644 index d89c2237..00000000 --- a/projects/elonkit/src/ui/avatar/__stories__/avatar-story-typography/avatar-story-typography.source.ts +++ /dev/null @@ -1,15 +0,0 @@ -export const AVATAR_STORY_TYPOGRAPHY_SOURCE = { - ts: ` - @Component({ - encapsulation: ViewEncapsulation.None - }) - `, - html: `НФ`, - scss: ` - .typography { - font-family: 'Roboto', sans-serif; - font-size: 28px; - letter-spacing: 0.5px; - } - ` -}; diff --git a/projects/elonkit/src/ui/avatar/avatar-group.component.ts b/projects/elonkit/src/ui/avatar/avatar-group.component.ts index 7f74e02f..cb1c6303 100644 --- a/projects/elonkit/src/ui/avatar/avatar-group.component.ts +++ b/projects/elonkit/src/ui/avatar/avatar-group.component.ts @@ -13,7 +13,7 @@ import { } from '@angular/core'; import { ESAvatarComponent } from './avatar.component'; -import { takeUntil } from 'rxjs/operators'; +import { takeUntil, filter } from 'rxjs/operators'; import { Subject } from 'rxjs'; @Component({ @@ -50,10 +50,11 @@ export class ESAvatarGroupComponent implements OnInit, AfterContentInit, OnDestr */ public ngAfterContentInit() { this.setAvatarsIndex(this.avatars); - this.avatars.changes.pipe(takeUntil(this.destroyed$)).subscribe((avatars) => { - if (avatars) { - this.setAvatarsIndex(avatars); - } + this.avatars.changes.pipe( + filter((avatars) => !!avatars), + takeUntil(this.destroyed$) + ).subscribe((avatars) => { + this.setAvatarsIndex(avatars); }); } diff --git a/projects/elonkit/src/ui/avatar/avatar.component.ts b/projects/elonkit/src/ui/avatar/avatar.component.ts index 5172428f..3d973791 100644 --- a/projects/elonkit/src/ui/avatar/avatar.component.ts +++ b/projects/elonkit/src/ui/avatar/avatar.component.ts @@ -46,10 +46,10 @@ export class ESAvatarComponent { */ @Input() public get typography(): string { - return this._typography; + return this._typography || 'es-subtitle-2'; } public set typography(value: string) { - this._typography = value || 'es-subtitle-2'; + this._typography = value; } private _typography: string; diff --git a/projects/elonkit/src/ui/badge/badge.component.ts b/projects/elonkit/src/ui/badge/badge.component.ts index 3966cd4c..e71be857 100644 --- a/projects/elonkit/src/ui/badge/badge.component.ts +++ b/projects/elonkit/src/ui/badge/badge.component.ts @@ -68,14 +68,7 @@ export class ESBadgeComponent { /** * Defines badge background color. */ - @Input() - public get color(): string { - return this._color; - } - public set color(value: string) { - this._color = value; - } - private _color: string; + @Input() public color: string /** * Defines badge custom positions. From 08fb6772097b99184f2c96b3782f18dfb2b8eed5 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 20 Apr 2021 17:20:20 +0300 Subject: [PATCH 14/14] fix(badge): fix lint --- .../src/ui/avatar/avatar-group.component.ts | 16 +++++++++------- projects/elonkit/src/ui/badge/badge.component.ts | 2 +- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/projects/elonkit/src/ui/avatar/avatar-group.component.ts b/projects/elonkit/src/ui/avatar/avatar-group.component.ts index cb1c6303..fab39c24 100644 --- a/projects/elonkit/src/ui/avatar/avatar-group.component.ts +++ b/projects/elonkit/src/ui/avatar/avatar-group.component.ts @@ -48,14 +48,16 @@ export class ESAvatarGroupComponent implements OnInit, AfterContentInit, OnDestr /** * @ignore */ - public ngAfterContentInit() { + public ngAfterContentInit() { this.setAvatarsIndex(this.avatars); - this.avatars.changes.pipe( - filter((avatars) => !!avatars), - takeUntil(this.destroyed$) - ).subscribe((avatars) => { - this.setAvatarsIndex(avatars); - }); + this.avatars.changes + .pipe( + filter((avatars) => !!avatars), + takeUntil(this.destroyed$) + ) + .subscribe((avatars) => { + this.setAvatarsIndex(avatars); + }); } private setAvatarsIndex = (avatars): void => { diff --git a/projects/elonkit/src/ui/badge/badge.component.ts b/projects/elonkit/src/ui/badge/badge.component.ts index e71be857..89a0e94a 100644 --- a/projects/elonkit/src/ui/badge/badge.component.ts +++ b/projects/elonkit/src/ui/badge/badge.component.ts @@ -68,7 +68,7 @@ export class ESBadgeComponent { /** * Defines badge background color. */ - @Input() public color: string + @Input() public color: string; /** * Defines badge custom positions.