diff --git a/projects/ui/src/lib/components/po-button/po-button.component.html b/projects/ui/src/lib/components/po-button/po-button.component.html index 39ede74e4..389659fcd 100644 --- a/projects/ui/src/lib/components/po-button/po-button.component.html +++ b/projects/ui/src/lib/components/po-button/po-button.component.html @@ -11,9 +11,11 @@ (click)="onClick()" >
- +
- - {{ label }} +
+ + {{ label }} +
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon-size-enum.ts b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon-size-enum.ts new file mode 100644 index 000000000..186f4f20d --- /dev/null +++ b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon-size-enum.ts @@ -0,0 +1,10 @@ +export enum PoLoadingIconSize { + /** Extra small */ + xs = 'xs', + /** Small */ + sm = 'sm', + /** Medium*/ + md = 'md', + /** Large*/ + lg = 'lg' +} diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.html b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.html index d25e3660c..71703be45 100644 --- a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.html +++ b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.html @@ -1,10 +1,33 @@ -
- - - - - - - - +
+ + + + + + + + + + + + + + + + + + +
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.spec.ts b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.spec.ts index 1c4297ee7..662efc535 100644 --- a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.spec.ts +++ b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.spec.ts @@ -45,10 +45,34 @@ describe('PoLoadingOverlayComponent', () => { }); describe('Templates', () => { - it('should count the amount of `po-loading-icon-bar` elements', () => { - const iconBars = fixture.debugElement.queryAll(By.css('.po-loading-icon-bar')); + it('should contain `po-loading-svg-xs` size is `xs`', () => { + component.size = 'xs'; + fixture.detectChanges(); + expect(nativeElement.querySelector('.po-loading-svg-xs')).toBeTruthy(); + }); + + it('should contain `po-loading-svg-sm` size is `sm`', () => { + component.size = 'sm'; + fixture.detectChanges(); + expect(nativeElement.querySelector('.po-loading-svg-sm')).toBeTruthy(); + }); + + it('should contain `po-loading-svg-md` size is `md`', () => { + component.size = 'md'; + fixture.detectChanges(); + expect(nativeElement.querySelector('.po-loading-svg-md')).toBeTruthy(); + }); + + it('should contain `po-loading-svg-lg` size is `lg`', () => { + component.size = 'lg'; + fixture.detectChanges(); + expect(nativeElement.querySelector('.po-loading-svg-lg')).toBeTruthy(); + }); - expect(iconBars.length).toBe(8); + it('should contain `po-loading-svg-md` size is invalid value', () => { + component.size = 'huge'; + fixture.detectChanges(); + expect(nativeElement.querySelector('.po-loading-svg-md')).toBeTruthy(); }); }); }); diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.ts b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.ts index 29e6434dd..98accf8a8 100644 --- a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.ts +++ b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.ts @@ -1,6 +1,7 @@ import { Component, Input } from '@angular/core'; -import { convertToBoolean } from '../../../utils/util'; +import { convertToBoolean, uuid } from '../../../utils/util'; +import { PoLoadingIconSize } from './po-loading-icon-size-enum'; /** * @docsPrivate @@ -16,6 +17,8 @@ import { convertToBoolean } from '../../../utils/util'; }) export class PoLoadingIconComponent { private _neutralColor: boolean; + private _size: string = 'md'; + id = uuid(); /** * @optional @@ -33,4 +36,27 @@ export class PoLoadingIconComponent { get neutralColor(): boolean { return this._neutralColor; } + + /** + * @optional + * + * @description + * + * Definição do tamanho do ícone. + * + * Valores válidos: + * - `xs`: tamanho `extra small` + * - `sm`: tamanho `small` + * - `md`: tamanho `medium` + * - `lg`: tamanho `large` + * + * @default `md` + */ + @Input('p-size') set size(value: string) { + this._size = PoLoadingIconSize[value] ? PoLoadingIconSize[value] : PoLoadingIconSize.md; + } + + get size(): string { + return this._size; + } } diff --git a/projects/ui/src/lib/components/po-loading/po-loading.component.html b/projects/ui/src/lib/components/po-loading/po-loading.component.html index 1a72d2b10..a18980a0c 100644 --- a/projects/ui/src/lib/components/po-loading/po-loading.component.html +++ b/projects/ui/src/lib/components/po-loading/po-loading.component.html @@ -1,5 +1,5 @@
- + {{ text }} diff --git a/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.html b/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.html index 6dc9bf0e0..956d206d0 100644 --- a/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.html +++ b/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.html @@ -9,7 +9,7 @@
- +
diff --git a/projects/ui/src/lib/components/po-search/po-search.component.html b/projects/ui/src/lib/components/po-search/po-search.component.html index 820e59b23..f6eb7b38e 100644 --- a/projects/ui/src/lib/components/po-search/po-search.component.html +++ b/projects/ui/src/lib/components/po-search/po-search.component.html @@ -1,7 +1,7 @@
- +