From 9f36fdc66bbc3804935cde7a8d181a69506394ad Mon Sep 17 00:00:00 2001 From: Gabriel Nogueira Date: Tue, 28 Dec 2021 10:26:49 -0300 Subject: [PATCH] :sparkles: ngIfLoaded directive --- design-system/documentation.json | 578 +++++++++++++++--- design-system/projects/lib/package.json | 2 +- .../src/directives/ng-if-loaded/injection.ts | 7 + .../ng-if-loaded.directive.spec.ts | 8 + .../ng-if-loaded/ng-if-loaded.directive.ts | 42 ++ .../ng-if-loaded/ng-if-loaded.module.ts | 35 ++ .../spinner/spinner.component.html | 11 + .../spinner/spinner.component.scss | 211 +++++++ .../spinner/spinner.component.spec.ts | 25 + .../ng-if-loaded/spinner/spinner.component.ts | 16 + .../ng-if-loaded/spinner/spinner.stories.mdx | 81 +++ .../ng-if-loaded/spinner/spinner.stories.ts | 26 + design-system/projects/lib/src/public-api.ts | 6 + 13 files changed, 957 insertions(+), 91 deletions(-) create mode 100644 design-system/projects/lib/src/directives/ng-if-loaded/injection.ts create mode 100644 design-system/projects/lib/src/directives/ng-if-loaded/ng-if-loaded.directive.spec.ts create mode 100644 design-system/projects/lib/src/directives/ng-if-loaded/ng-if-loaded.directive.ts create mode 100644 design-system/projects/lib/src/directives/ng-if-loaded/ng-if-loaded.module.ts create mode 100644 design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.html create mode 100644 design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.scss create mode 100644 design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.spec.ts create mode 100644 design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.ts create mode 100644 design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.mdx create mode 100644 design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts diff --git a/design-system/documentation.json b/design-system/documentation.json index fbb5cf6..dd7e60a 100644 --- a/design-system/documentation.json +++ b/design-system/documentation.json @@ -203,10 +203,10 @@ }, { "name": "MultiSelectOption", - "id": "interface-MultiSelectOption-4f8173d2946f3d4bb3ef55d5f99b78c0", + "id": "interface-MultiSelectOption-42a26a2cb5f3b43a2989786162fdb7c9", "file": "projects/lib/src/components/inputs/multi-select/multi-select.component.ts", "type": "interface", - "sourceCode": "import {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnInit,\n Output,\n ViewChild\n} from '@angular/core';\nimport {FormControl} from '@angular/forms';\nimport {Observable} from 'rxjs';\nimport {map, startWith} from 'rxjs/operators';\nimport _ from 'lodash';\nimport {MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteTrigger} from '@angular/material/autocomplete';\nimport {Sizes} from '../../../models/sizes';\n\nexport interface MultiSelectOption {\n label: string;\n value: any;\n thumbnail: string;\n}\n\n@Component({\n selector: 'pm-multi-select',\n templateUrl: './multi-select.component.html',\n styleUrls: ['./multi-select.component.scss'],\n providers: [\n {\n provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,\n useValue: {\n autoActiveFirstOption: false,\n overlayPanelClass: 'pm-multi-select-autocomplete-panel'\n }\n }\n ]\n})\nexport class MultiSelectComponent implements OnInit, AfterViewInit {\n\n @ViewChild('inputBox') inputBoxEl: ElementRef;\n @ViewChild('trigger') trigger: MatAutocompleteTrigger;\n @Output() selectedOptions = new EventEmitter();\n @Input() placeholder: string = '';\n @Input() options: MultiSelectOption[] = [];\n @Input() borderRadius: Sizes = Sizes.md;\n @Input() roundedThumbnail: boolean = true;\n myControl = new FormControl();\n _selectedOptions: MultiSelectOption[] = [];\n filteredOptions: Observable;\n\n constructor(\n private cdr: ChangeDetectorRef\n ) {\n }\n\n ngOnInit(): void {\n this.filteredOptions = this.myControl.valueChanges.pipe(\n startWith(''),\n map(value => (typeof value === 'string' ? value : `${value.label}`)),\n map(label => this._filter(label)),\n );\n }\n\n ngAfterViewInit(): void {\n this.clearInput();\n }\n\n displayFn(user: MultiSelectOption): string {\n return user && user.label ? user.label : '';\n }\n\n private _filter(label: string): MultiSelectOption[] {\n const filterValue = label.toLowerCase();\n\n return _.difference(\n this.options.filter(option => option.label.toLowerCase().includes(filterValue)),\n this._selectedOptions\n );\n }\n\n public selectOption(option: any): void {\n this._selectedOptions.push(option);\n this.selectedOptions.emit(this._selectedOptions);\n this.clearInput();\n }\n\n private clearInput(): void {\n this.myControl.setValue('');\n try { this.inputBoxEl.nativeElement.blur(); } catch (e) {}\n this.cdr.detectChanges();\n }\n\n public removeSelectedOption(option: MultiSelectOption): void {\n _.remove(this._selectedOptions, option);\n this.clearInput();\n }\n\n public isOptionSelected(option: MultiSelectOption): boolean {\n return !!this._selectedOptions.find(sOptions => _.isEqual(sOptions, option));\n }\n\n public openSelect(): void {\n setTimeout(() => {\n try { this.inputBoxEl.nativeElement.focus(); } catch (e) {}\n }, 0);\n }\n\n public clearSelected(): void {\n this._selectedOptions = [];\n this.selectedOptions.emit(this._selectedOptions);\n this.clearInput();\n }\n\n}\n", + "sourceCode": "import {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnInit,\n Output,\n ViewChild\n} from '@angular/core';\nimport {FormControl} from '@angular/forms';\nimport {Observable} from 'rxjs';\nimport {map, startWith} from 'rxjs/operators';\nimport _ from 'lodash';\nimport {MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteTrigger} from '@angular/material/autocomplete';\nimport {Sizes} from '../../../models/sizes';\n\nexport interface MultiSelectOption {\n label: string;\n value: any;\n thumbnail: string;\n}\n\n@Component({\n selector: 'pm-multi-select',\n templateUrl: './multi-select.component.html',\n styleUrls: ['./multi-select.component.scss'],\n providers: [\n {\n provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,\n useValue: {\n autoActiveFirstOption: false,\n overlayPanelClass: 'pm-multi-select-autocomplete-panel'\n }\n }\n ]\n})\nexport class MultiSelectComponent implements OnInit, AfterViewInit {\n\n @ViewChild('inputBox') inputBoxEl: ElementRef;\n @ViewChild('trigger') trigger: MatAutocompleteTrigger;\n /**\n * Ao ser selecionada uma opção nova, emite\n */\n @Output() selectedOptions = new EventEmitter();\n /**\n * Texto a ser exibido no input\n */\n @Input() placeholder: string = '';\n /**\n * opções a serem exibidas no input\n */\n @Input() options: MultiSelectOption[] = [];\n @Input() borderRadius: Sizes = Sizes.md;\n /**\n * se as thumbnails serão arredondadas\n */\n @Input() roundedThumbnail: boolean = true;\n /**\n * limite máximo de seleções de itens\n */\n @Input() limit: number = 0;\n myControl = new FormControl();\n _selectedOptions: MultiSelectOption[] = [];\n filteredOptions: Observable;\n\n constructor(\n private cdr: ChangeDetectorRef\n ) {\n }\n\n ngOnInit(): void {\n this.filteredOptions = this.myControl.valueChanges.pipe(\n startWith(''),\n map(value => (typeof value === 'string' ? value : `${value.label}`)),\n map(label => this._filter(label)),\n );\n }\n\n ngAfterViewInit(): void {\n this.clearInput();\n }\n\n displayFn(user: MultiSelectOption): string {\n return user && user.label ? user.label : '';\n }\n\n private _filter(label: string): MultiSelectOption[] {\n const filterValue = label.toLowerCase();\n\n return _.difference(\n this.options.filter(option => option.label.toLowerCase().includes(filterValue)),\n this._selectedOptions\n );\n }\n\n public selectOption(option: any): void {\n this._selectedOptions.push(option);\n this.selectedOptions.emit(this._selectedOptions);\n this.clearInput();\n }\n\n private clearInput(): void {\n this.myControl.setValue('');\n try { this.inputBoxEl.nativeElement.blur(); } catch (e) {}\n this.cdr.detectChanges();\n }\n\n public removeSelectedOption(option: MultiSelectOption): void {\n _.remove(this._selectedOptions, option);\n this.clearInput();\n }\n\n public isOptionSelected(option: MultiSelectOption): boolean {\n return !!this._selectedOptions.find(sOptions => _.isEqual(sOptions, option));\n }\n\n public openSelect(): void {\n setTimeout(() => {\n try { this.inputBoxEl.nativeElement.focus(); } catch (e) {}\n }, 0);\n }\n\n public clearSelected(): void {\n this._selectedOptions = [];\n this.selectedOptions.emit(this._selectedOptions);\n this.clearInput();\n }\n\n}\n", "properties": [ { "name": "label", @@ -741,6 +741,114 @@ ], "classes": [], "directives": [ + { + "name": "NgIfLoadedDirective", + "id": "directive-NgIfLoadedDirective-30cc31fbd7bff9edadec5796d889ca74", + "file": "projects/lib/src/directives/ng-if-loaded/ng-if-loaded.directive.ts", + "type": "directive", + "description": "", + "sourceCode": "import {\n ComponentFactoryResolver,\n Directive,\n Inject,\n Input,\n TemplateRef,\n ViewContainerRef\n} from '@angular/core';\nimport {IF_LOADED_SPINNER} from './injection';\nimport {ComponentType} from '@angular/cdk/overlay';\n\n@Directive({\n // tslint:disable-next-line:directive-selector\n selector: '[ngIfLoaded]'\n})\nexport class NgIfLoadedDirective {\n\n spinner: ComponentType;\n\n constructor(\n @Inject(IF_LOADED_SPINNER) spinnerComponent: ComponentType,\n private templateRef: TemplateRef,\n private viewContainer: ViewContainerRef,\n private resolver: ComponentFactoryResolver\n ) {\n this.spinner = spinnerComponent;\n }\n\n\n @Input()\n set ngIfLoaded(value) {\n if (value) {\n this.viewContainer.clear();\n this.viewContainer.createEmbeddedView(this.templateRef);\n } else {\n this.viewContainer.clear();\n const factory = this.resolver.resolveComponentFactory(this.spinner);\n this.viewContainer.createComponent(factory);\n }\n }\n\n}\n", + "selector": "[ngIfLoaded]", + "providers": [], + "inputsClass": [ + { + "name": "ngIfLoaded", + "line": 31 + } + ], + "outputsClass": [], + "hostBindings": [], + "hostListeners": [], + "propertiesClass": [ + { + "name": "spinner", + "type": "ComponentType", + "optional": false, + "description": "", + "line": 18 + } + ], + "methodsClass": [], + "constructorObj": { + "name": "constructor", + "description": "", + "args": [ + { + "name": "spinnerComponent", + "type": "ComponentType" + }, + { + "name": "templateRef", + "type": "TemplateRef" + }, + { + "name": "viewContainer", + "type": "ViewContainerRef" + }, + { + "name": "resolver", + "type": "ComponentFactoryResolver" + } + ], + "line": 18, + "jsdoctags": [ + { + "name": "spinnerComponent", + "type": "ComponentType", + "tagName": { + "text": "param" + } + }, + { + "name": "templateRef", + "type": "TemplateRef", + "tagName": { + "text": "param" + } + }, + { + "name": "viewContainer", + "type": "ViewContainerRef", + "tagName": { + "text": "param" + } + }, + { + "name": "resolver", + "type": "ComponentFactoryResolver", + "tagName": { + "text": "param" + } + } + ] + }, + "accessors": { + "ngIfLoaded": { + "name": "ngIfLoaded", + "setSignature": { + "name": "ngIfLoaded", + "type": "void", + "args": [ + { + "name": "value", + "type": "" + } + ], + "returnType": "void", + "line": 31, + "jsdoctags": [ + { + "name": "value", + "type": "", + "tagName": { + "text": "param" + } + } + ] + } + } + } + }, { "name": "ResultSearchElements", "id": "directive-ResultSearchElements-f9354be50d181e1b286a81c65aa6d881", @@ -2937,7 +3045,7 @@ }, { "name": "MultiSelectComponent", - "id": "component-MultiSelectComponent-4f8173d2946f3d4bb3ef55d5f99b78c0", + "id": "component-MultiSelectComponent-42a26a2cb5f3b43a2989786162fdb7c9", "file": "projects/lib/src/components/inputs/multi-select/multi-select.component.ts", "encapsulation": [], "entryComponents": [], @@ -2961,25 +3069,35 @@ { "name": "borderRadius", "defaultValue": "Sizes.md", - "line": 46, + "line": 55, "type": "Sizes" }, + { + "name": "limit", + "defaultValue": "0", + "description": "

limite máximo de seleções de itens

\n", + "line": 63, + "type": "number" + }, { "name": "options", "defaultValue": "[]", - "line": 45, + "description": "

opções a serem exibidas no input

\n", + "line": 54, "type": "MultiSelectOption[]" }, { "name": "placeholder", "defaultValue": "''", - "line": 44, + "description": "

Texto a ser exibido no input

\n", + "line": 50, "type": "string" }, { "name": "roundedThumbnail", "defaultValue": "true", - "line": 47, + "description": "

se as thumbnails serão arredondadas

\n", + "line": 59, "type": "boolean" } ], @@ -2987,7 +3105,8 @@ { "name": "selectedOptions", "defaultValue": "new EventEmitter()", - "line": 43, + "description": "

Ao ser selecionada uma opção nova, emite

\n", + "line": 46, "type": "EventEmitter" } ], @@ -2998,14 +3117,14 @@ "type": "MultiSelectOption[]", "optional": false, "description": "", - "line": 49 + "line": 65 }, { "name": "filteredOptions", "type": "Observable", "optional": false, "description": "", - "line": 50 + "line": 66 }, { "name": "inputBoxEl", @@ -3026,7 +3145,7 @@ "type": "", "optional": false, "description": "", - "line": 48 + "line": 64 }, { "name": "trigger", @@ -3054,7 +3173,7 @@ "optional": false, "returnType": "MultiSelectOption[]", "typeParameters": [], - "line": 73, + "line": 89, "modifierKind": [ 112 ], @@ -3074,7 +3193,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 88, + "line": 104, "modifierKind": [ 112 ] @@ -3085,7 +3204,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 109, + "line": 125, "modifierKind": [ 114 ] @@ -3101,7 +3220,7 @@ "optional": false, "returnType": "string", "typeParameters": [], - "line": 69, + "line": 85, "jsdoctags": [ { "name": "user", @@ -3123,7 +3242,7 @@ "optional": false, "returnType": "boolean", "typeParameters": [], - "line": 99, + "line": 115, "modifierKind": [ 114 ], @@ -3143,7 +3262,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 65 + "line": 81 }, { "name": "ngOnInit", @@ -3151,7 +3270,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 57 + "line": 73 }, { "name": "openSelect", @@ -3159,7 +3278,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 103, + "line": 119, "modifierKind": [ 114 ] @@ -3175,7 +3294,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 94, + "line": 110, "modifierKind": [ 114 ], @@ -3200,7 +3319,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 82, + "line": 98, "modifierKind": [ 114 ], @@ -3220,11 +3339,11 @@ "description": "", "rawdescription": "", "type": "component", - "sourceCode": "import {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnInit,\n Output,\n ViewChild\n} from '@angular/core';\nimport {FormControl} from '@angular/forms';\nimport {Observable} from 'rxjs';\nimport {map, startWith} from 'rxjs/operators';\nimport _ from 'lodash';\nimport {MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteTrigger} from '@angular/material/autocomplete';\nimport {Sizes} from '../../../models/sizes';\n\nexport interface MultiSelectOption {\n label: string;\n value: any;\n thumbnail: string;\n}\n\n@Component({\n selector: 'pm-multi-select',\n templateUrl: './multi-select.component.html',\n styleUrls: ['./multi-select.component.scss'],\n providers: [\n {\n provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,\n useValue: {\n autoActiveFirstOption: false,\n overlayPanelClass: 'pm-multi-select-autocomplete-panel'\n }\n }\n ]\n})\nexport class MultiSelectComponent implements OnInit, AfterViewInit {\n\n @ViewChild('inputBox') inputBoxEl: ElementRef;\n @ViewChild('trigger') trigger: MatAutocompleteTrigger;\n @Output() selectedOptions = new EventEmitter();\n @Input() placeholder: string = '';\n @Input() options: MultiSelectOption[] = [];\n @Input() borderRadius: Sizes = Sizes.md;\n @Input() roundedThumbnail: boolean = true;\n myControl = new FormControl();\n _selectedOptions: MultiSelectOption[] = [];\n filteredOptions: Observable;\n\n constructor(\n private cdr: ChangeDetectorRef\n ) {\n }\n\n ngOnInit(): void {\n this.filteredOptions = this.myControl.valueChanges.pipe(\n startWith(''),\n map(value => (typeof value === 'string' ? value : `${value.label}`)),\n map(label => this._filter(label)),\n );\n }\n\n ngAfterViewInit(): void {\n this.clearInput();\n }\n\n displayFn(user: MultiSelectOption): string {\n return user && user.label ? user.label : '';\n }\n\n private _filter(label: string): MultiSelectOption[] {\n const filterValue = label.toLowerCase();\n\n return _.difference(\n this.options.filter(option => option.label.toLowerCase().includes(filterValue)),\n this._selectedOptions\n );\n }\n\n public selectOption(option: any): void {\n this._selectedOptions.push(option);\n this.selectedOptions.emit(this._selectedOptions);\n this.clearInput();\n }\n\n private clearInput(): void {\n this.myControl.setValue('');\n try { this.inputBoxEl.nativeElement.blur(); } catch (e) {}\n this.cdr.detectChanges();\n }\n\n public removeSelectedOption(option: MultiSelectOption): void {\n _.remove(this._selectedOptions, option);\n this.clearInput();\n }\n\n public isOptionSelected(option: MultiSelectOption): boolean {\n return !!this._selectedOptions.find(sOptions => _.isEqual(sOptions, option));\n }\n\n public openSelect(): void {\n setTimeout(() => {\n try { this.inputBoxEl.nativeElement.focus(); } catch (e) {}\n }, 0);\n }\n\n public clearSelected(): void {\n this._selectedOptions = [];\n this.selectedOptions.emit(this._selectedOptions);\n this.clearInput();\n }\n\n}\n", + "sourceCode": "import {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnInit,\n Output,\n ViewChild\n} from '@angular/core';\nimport {FormControl} from '@angular/forms';\nimport {Observable} from 'rxjs';\nimport {map, startWith} from 'rxjs/operators';\nimport _ from 'lodash';\nimport {MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteTrigger} from '@angular/material/autocomplete';\nimport {Sizes} from '../../../models/sizes';\n\nexport interface MultiSelectOption {\n label: string;\n value: any;\n thumbnail: string;\n}\n\n@Component({\n selector: 'pm-multi-select',\n templateUrl: './multi-select.component.html',\n styleUrls: ['./multi-select.component.scss'],\n providers: [\n {\n provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,\n useValue: {\n autoActiveFirstOption: false,\n overlayPanelClass: 'pm-multi-select-autocomplete-panel'\n }\n }\n ]\n})\nexport class MultiSelectComponent implements OnInit, AfterViewInit {\n\n @ViewChild('inputBox') inputBoxEl: ElementRef;\n @ViewChild('trigger') trigger: MatAutocompleteTrigger;\n /**\n * Ao ser selecionada uma opção nova, emite\n */\n @Output() selectedOptions = new EventEmitter();\n /**\n * Texto a ser exibido no input\n */\n @Input() placeholder: string = '';\n /**\n * opções a serem exibidas no input\n */\n @Input() options: MultiSelectOption[] = [];\n @Input() borderRadius: Sizes = Sizes.md;\n /**\n * se as thumbnails serão arredondadas\n */\n @Input() roundedThumbnail: boolean = true;\n /**\n * limite máximo de seleções de itens\n */\n @Input() limit: number = 0;\n myControl = new FormControl();\n _selectedOptions: MultiSelectOption[] = [];\n filteredOptions: Observable;\n\n constructor(\n private cdr: ChangeDetectorRef\n ) {\n }\n\n ngOnInit(): void {\n this.filteredOptions = this.myControl.valueChanges.pipe(\n startWith(''),\n map(value => (typeof value === 'string' ? value : `${value.label}`)),\n map(label => this._filter(label)),\n );\n }\n\n ngAfterViewInit(): void {\n this.clearInput();\n }\n\n displayFn(user: MultiSelectOption): string {\n return user && user.label ? user.label : '';\n }\n\n private _filter(label: string): MultiSelectOption[] {\n const filterValue = label.toLowerCase();\n\n return _.difference(\n this.options.filter(option => option.label.toLowerCase().includes(filterValue)),\n this._selectedOptions\n );\n }\n\n public selectOption(option: any): void {\n this._selectedOptions.push(option);\n this.selectedOptions.emit(this._selectedOptions);\n this.clearInput();\n }\n\n private clearInput(): void {\n this.myControl.setValue('');\n try { this.inputBoxEl.nativeElement.blur(); } catch (e) {}\n this.cdr.detectChanges();\n }\n\n public removeSelectedOption(option: MultiSelectOption): void {\n _.remove(this._selectedOptions, option);\n this.clearInput();\n }\n\n public isOptionSelected(option: MultiSelectOption): boolean {\n return !!this._selectedOptions.find(sOptions => _.isEqual(sOptions, option));\n }\n\n public openSelect(): void {\n setTimeout(() => {\n try { this.inputBoxEl.nativeElement.focus(); } catch (e) {}\n }, 0);\n }\n\n public clearSelected(): void {\n this._selectedOptions = [];\n this.selectedOptions.emit(this._selectedOptions);\n this.clearInput();\n }\n\n}\n", "assetsDirs": [], "styleUrlsData": [ { - "data": "@import '../../../styles/default/mixins/buttons';\n\n.pm-multi-select {\n @include btn-styles(var(--color-light), var(--color-light-sat), false);\n\n form {\n padding-top: 1px;\n }\n\n input {\n padding: 0.5em;\n background-color: transparent;\n\n color: var(--color-gray-darker) !important;\n }\n\n .chip-container {\n background-color: var(--color-light);\n border: 1px solid var(--color-light-states);\n border-radius: var(--border-radius-md);\n padding: 3px;\n color: var(--color-gray-dark);\n\n button {\n border: none !important;\n }\n }\n\n i {\n color: var(--color-light-states);\n right: 0.5em;\n height: 100%;\n display: flex;\n flex-direction: row;\n align-content: center;\n justify-content: center;\n margin-top: -4px;\n\n &:before {\n align-self: center;\n }\n }\n\n}\n\n::ng-deep {\n .pm-multi-select-autocomplete-panel {\n margin-left: -4px;\n left: 20px !important;\n\n * {\n box-shadow: none !important;\n }\n\n .mat-autocomplete-panel {\n background-color: var(--color-light);\n margin-top: -2px;\n }\n }\n\n .pm-multi-select-thumbnail-container {\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n outline: none;\n flex: 0 0 auto;\n\n &.circular {\n border-radius: 50%;\n margin: 0;\n overflow: hidden;\n border: 1px solid var(--color-light-states);\n }\n\n img {\n object-fit: cover;\n }\n }\n}\n", + "data": "@import '../../../styles/default/mixins/buttons';\n\n.pm-multi-select {\n @include btn-styles(var(--color-light), var(--color-light-sat), false);\n\n form, input {\n width: -webkit-fill-available;\n }\n\n form {\n padding-top: 1px;\n }\n\n input {\n padding: 0.5em;\n background-color: transparent;\n\n color: var(--color-gray-darker) !important;\n }\n\n .chip-container {\n background-color: var(--color-light);\n border: 1px solid var(--color-light-states);\n border-radius: var(--border-radius-md);\n padding: 3px;\n color: var(--color-gray-dark);\n\n button {\n border: none !important;\n }\n }\n\n i {\n color: var(--color-light-states);\n right: 0.5em;\n height: 100%;\n display: flex;\n flex-direction: row;\n align-content: center;\n justify-content: center;\n margin-top: -4px;\n\n &:before {\n align-self: center;\n }\n }\n\n}\n\n::ng-deep {\n .pm-multi-select-autocomplete-panel {\n margin-left: -4px;\n\n * {\n box-shadow: none !important;\n }\n\n .mat-autocomplete-panel {\n background-color: var(--color-light);\n margin-top: -2px;\n }\n }\n\n .pm-multi-select-thumbnail-container {\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n outline: none;\n flex: 0 0 auto;\n\n &.circular {\n border-radius: 50%;\n margin: 0;\n overflow: hidden;\n border: 1px solid var(--color-light-states);\n }\n\n img {\n object-fit: cover;\n }\n }\n}\n", "styleUrl": "./multi-select.component.scss" } ], @@ -3238,7 +3357,7 @@ "type": "ChangeDetectorRef" } ], - "line": 50, + "line": 66, "jsdoctags": [ { "name": "cdr", @@ -3253,7 +3372,7 @@ "OnInit", "AfterViewInit" ], - "templateData": "
\n
\n
\n
\n
\n \n

{{selected.label}}

\n \n
\n
\n
\n
\n \n\n \n \n \n
\n \n {{option.label}}\n
\n \n \n \n
\n \n
\n
\n\n\n
\n \n
\n\n" + "templateData": "
\n
\n
\n
\n
\n \n

{{selected.label}}

\n \n
\n
\n
\n
\n = limit)\"\n matInput\n class=\"form-control h-100 border-0\"\n type=\"text\"\n [formControl]=\"myControl\"\n [placeholder]=\"placeholder\"\n [matAutocomplete]=\"auto\"\n >\n\n \n \n \n
\n \n {{option.label}}\n
\n \n \n \n
\n \n
\n
\n\n\n
\n \n
\n\n" }, { "name": "RadioButtonComponent", @@ -3360,6 +3479,62 @@ }, "templateData": "
\n \n \n {{value}}\n \n \n
\n" }, + { + "name": "SpinnerComponent", + "id": "component-SpinnerComponent-ce3a3f486d1d19fefeea8af5c834bea6", + "file": "projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.ts", + "encapsulation": [], + "entryComponents": [], + "inputs": [], + "outputs": [], + "providers": [], + "selector": "pm-spinner", + "styleUrls": [ + "./spinner.component.scss" + ], + "styles": [], + "templateUrl": [ + "./spinner.component.html" + ], + "viewProviders": [], + "inputsClass": [], + "outputsClass": [], + "propertiesClass": [], + "methodsClass": [ + { + "name": "ngOnInit", + "args": [], + "optional": false, + "returnType": "void", + "typeParameters": [], + "line": 13 + } + ], + "hostBindings": [], + "hostListeners": [], + "description": "", + "rawdescription": "", + "type": "component", + "sourceCode": "import {Component, OnInit} from '@angular/core';\n\n@Component({\n selector: 'pm-spinner',\n templateUrl: './spinner.component.html',\n styleUrls: ['./spinner.component.scss']\n})\nexport class SpinnerComponent implements OnInit {\n\n constructor() {\n }\n\n ngOnInit(): void {\n }\n\n}\n", + "assetsDirs": [], + "styleUrlsData": [ + { + "data": ".pm-spinner {\n\n}\n", + "styleUrl": "./spinner.component.scss" + } + ], + "stylesData": "", + "constructorObj": { + "name": "constructor", + "description": "", + "args": [], + "line": 8 + }, + "implements": [ + "OnInit" + ], + "templateData": "
\n Spinner component created successfully!\n
\n" + }, { "name": "StepperComponent", "id": "component-StepperComponent-3da625f623e2a5940f942c81f06d1447", @@ -4573,6 +4748,49 @@ } ] }, + { + "name": "NgIfLoadedModule", + "children": [ + { + "type": "providers", + "elements": [] + }, + { + "type": "declarations", + "elements": [ + { + "name": "NgIfLoadedDirective" + }, + { + "name": "SpinnerComponent" + } + ] + }, + { + "type": "imports", + "elements": [] + }, + { + "type": "exports", + "elements": [ + { + "name": "NgIfLoadedDirective" + }, + { + "name": "SpinnerComponent" + } + ] + }, + { + "type": "bootstrap", + "elements": [] + }, + { + "type": "classes", + "elements": [] + } + ] + }, { "name": "PrismaComponentsModule", "children": [ @@ -4898,9 +5116,9 @@ "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/cards/basic-card/basic-card.stories.ts", + "file": "projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts", "type": "object", - "defaultValue": "{\n hoverable: false,\n borderRadius: Sizes.md,\n paddingClass: 'p-3'\n}" + "defaultValue": "{\n flag: true\n}" }, { "name": "defaultArgs", @@ -4922,15 +5140,15 @@ "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/containers/tabs/tabs.stories.ts", + "file": "projects/lib/src/components/cards/basic-card/basic-card.stories.ts", "type": "object", - "defaultValue": "{\n}" + "defaultValue": "{\n hoverable: false,\n borderRadius: Sizes.md,\n paddingClass: 'p-3'\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/lists/grid-list/grid-list.stories.ts", + "file": "projects/lib/src/components/containers/tabs/tabs.stories.ts", "type": "object", "defaultValue": "{\n}" }, @@ -4942,6 +5160,14 @@ "type": "object", "defaultValue": "{\n showIndex: true,\n itemActionLabel: undefined,\n itemMainLabel: undefined,\n itemSubLabel: undefined,\n actions: undefined,\n itemList: undefined,\n roundedBorders: true,\n enableDragging: true,\n enableSelection: true,\n}" }, + { + "name": "defaultArgs", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/components/lists/grid-list/grid-list.stories.ts", + "type": "object", + "defaultValue": "{\n}" + }, { "name": "defaultArgs", "ctype": "miscellaneous", @@ -4962,25 +5188,25 @@ "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/inputs/combo-box/combo-box.stories.ts", + "file": "projects/lib/src/components/inputs/button/button.stories.ts", "type": "object", - "defaultValue": "{\n items: [],\n disabled: false,\n selectedItem: undefined\n}" + "defaultValue": "{\n label: '',\n type: MainColors.default,\n busy: false,\n busyText: '',\n iconClass: '',\n iconPosition: 'start',\n outline: false,\n disabled: false,\n size: 'md',\n fillWidth: false\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/inputs/copy-content-input/copy-content-input.stories.ts", + "file": "projects/lib/src/components/inputs/combo-box/combo-box.stories.ts", "type": "object", - "defaultValue": "{\n disabled: false,\n text: '',\n copyCallback: undefined,\n fillHeight: false,\n btnColor: MainColors.primary,\n borderRadius: Sizes.md\n}" + "defaultValue": "{\n items: [],\n disabled: false,\n selectedItem: undefined\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/inputs/button/button.stories.ts", + "file": "projects/lib/src/components/inputs/copy-content-input/copy-content-input.stories.ts", "type": "object", - "defaultValue": "{\n label: '',\n type: MainColors.default,\n busy: false,\n busyText: '',\n iconClass: '',\n iconPosition: 'start',\n outline: false,\n disabled: false,\n size: 'md',\n fillWidth: false\n}" + "defaultValue": "{\n disabled: false,\n text: '',\n copyCallback: undefined,\n fillHeight: false,\n btnColor: MainColors.primary,\n borderRadius: Sizes.md\n}" }, { "name": "defaultArgs", @@ -4996,7 +5222,7 @@ "subtype": "variable", "file": "projects/lib/src/components/inputs/multi-select/multi-select.stories.ts", "type": "object", - "defaultValue": "{\n options: [],\n placeholder: '',\n borderRadius: Sizes.md,\n roundedThumbnail: true\n}" + "defaultValue": "{\n options: [],\n placeholder: '',\n borderRadius: Sizes.md,\n roundedThumbnail: true,\n limit: 0\n}" }, { "name": "defaultArgs", @@ -5134,6 +5360,22 @@ "type": "", "defaultValue": "Template.bind({})" }, + { + "name": "defaultSpinner", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/directives/ng-if-loaded/injection.ts", + "type": "ComponentType", + "defaultValue": "SpinnerComponent" + }, + { + "name": "DefaultSpinner", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts", + "type": "", + "defaultValue": "Template.bind({})" + }, { "name": "DefaultStepper", "ctype": "miscellaneous", @@ -5174,6 +5416,14 @@ "type": "", "defaultValue": "Template.bind({})" }, + { + "name": "directives", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/directives/ng-if-loaded/ng-if-loaded.module.ts", + "type": "[]", + "defaultValue": "[\n NgIfLoadedDirective,\n SpinnerComponent\n]" + }, { "name": "DisabledButton", "ctype": "miscellaneous", @@ -5238,6 +5488,14 @@ "type": "", "defaultValue": "Template.bind({})" }, + { + "name": "IF_LOADED_SPINNER", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/directives/ng-if-loaded/injection.ts", + "type": "", + "defaultValue": "new InjectionToken>('defaultSpinner')" + }, { "name": "InfoButton", "ctype": "miscellaneous", @@ -5329,9 +5587,9 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/cards/basic-card/basic-card.stories.ts", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "file": "projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts", + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n
\n Conteúdo normal\n
\n `\n})" }, { "name": "Template", @@ -5353,17 +5611,17 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/containers/tabs/tabs.stories.ts", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "file": "projects/lib/src/components/cards/basic-card/basic-card.stories.ts", + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/lists/grid-list/grid-list.stories.ts", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "file": "projects/lib/src/components/containers/tabs/tabs.stories.ts", + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, { "name": "Template", @@ -5373,6 +5631,14 @@ "type": "Story", "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, + { + "name": "Template", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/components/lists/grid-list/grid-list.stories.ts", + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + }, { "name": "Template", "ctype": "miscellaneous", @@ -5389,6 +5655,14 @@ "type": "Story", "defaultValue": "(args) => ({\n props: args,\n template: `\n \n Checkbox\n \n `\n})" }, + { + "name": "Template", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/components/inputs/button/button.stories.ts", + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n Button Content\n \n `\n})" + }, { "name": "Template", "ctype": "miscellaneous", @@ -5405,14 +5679,6 @@ "type": "Story", "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, - { - "name": "Template", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/lib/src/components/inputs/button/button.stories.ts", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n Button Content\n \n `\n})" - }, { "name": "Template", "ctype": "miscellaneous", @@ -5427,7 +5693,7 @@ "subtype": "variable", "file": "projects/lib/src/components/inputs/multi-select/multi-select.stories.ts", "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, { "name": "Template", @@ -6026,20 +6292,20 @@ "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], - "projects/lib/src/components/cards/basic-card/basic-card.stories.ts": [ + "projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/cards/basic-card/basic-card.stories.ts", + "file": "projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts", "type": "object", - "defaultValue": "{\n hoverable: false,\n borderRadius: Sizes.md,\n paddingClass: 'p-3'\n}" + "defaultValue": "{\n flag: true\n}" }, { - "name": "DefaultBasicCard", + "name": "DefaultSpinner", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/cards/basic-card/basic-card.stories.ts", + "file": "projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts", "type": "", "defaultValue": "Template.bind({})" }, @@ -6047,9 +6313,9 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/cards/basic-card/basic-card.stories.ts", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "file": "projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts", + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n
\n Conteúdo normal\n
\n `\n})" } ], "projects/lib/src/components/containers/expansion-panel/expansion-panel.stories.ts": [ @@ -6078,20 +6344,20 @@ "defaultValue": "(args) => ({\n props: args,\n template: `\n \n Conteúdo aqui\n \n `\n})" } ], - "projects/lib/src/components/containers/tabs/tabs.stories.ts": [ + "projects/lib/src/components/cards/basic-card/basic-card.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/containers/tabs/tabs.stories.ts", + "file": "projects/lib/src/components/cards/basic-card/basic-card.stories.ts", "type": "object", - "defaultValue": "{\n}" + "defaultValue": "{\n hoverable: false,\n borderRadius: Sizes.md,\n paddingClass: 'p-3'\n}" }, { - "name": "DefaultTabs", + "name": "DefaultBasicCard", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/containers/tabs/tabs.stories.ts", + "file": "projects/lib/src/components/cards/basic-card/basic-card.stories.ts", "type": "", "defaultValue": "Template.bind({})" }, @@ -6099,43 +6365,35 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/containers/tabs/tabs.stories.ts", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "file": "projects/lib/src/components/cards/basic-card/basic-card.stories.ts", + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], - "projects/lib/src/components/lists/grid-list/grid-list.stories.ts": [ + "projects/lib/src/components/containers/tabs/tabs.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/lists/grid-list/grid-list.stories.ts", + "file": "projects/lib/src/components/containers/tabs/tabs.stories.ts", "type": "object", "defaultValue": "{\n}" }, { - "name": "DefaultGridList", + "name": "DefaultTabs", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/lists/grid-list/grid-list.stories.ts", + "file": "projects/lib/src/components/containers/tabs/tabs.stories.ts", "type": "", "defaultValue": "Template.bind({})" }, - { - "name": "getColor", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/lib/src/components/lists/grid-list/grid-list.stories.ts", - "type": "", - "defaultValue": "() => MainColors.primary" - }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/lib/src/components/lists/grid-list/grid-list.stories.ts", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "file": "projects/lib/src/components/containers/tabs/tabs.stories.ts", + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], "projects/lib/src/components/lists/draggable-list/draggable-list.stories.ts": [ @@ -6180,6 +6438,40 @@ "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], + "projects/lib/src/components/lists/grid-list/grid-list.stories.ts": [ + { + "name": "defaultArgs", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/components/lists/grid-list/grid-list.stories.ts", + "type": "object", + "defaultValue": "{\n}" + }, + { + "name": "DefaultGridList", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/components/lists/grid-list/grid-list.stories.ts", + "type": "", + "defaultValue": "Template.bind({})" + }, + { + "name": "getColor", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/components/lists/grid-list/grid-list.stories.ts", + "type": "", + "defaultValue": "() => MainColors.primary" + }, + { + "name": "Template", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/components/lists/grid-list/grid-list.stories.ts", + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + } + ], "projects/lib/src/components/inputs/checkbox/checkbox.stories.ts": [ { "name": "defaultArgs", @@ -6307,7 +6599,7 @@ "subtype": "variable", "file": "projects/lib/src/components/inputs/multi-select/multi-select.stories.ts", "type": "object", - "defaultValue": "{\n options: [],\n placeholder: '',\n borderRadius: Sizes.md,\n roundedThumbnail: true\n}" + "defaultValue": "{\n options: [],\n placeholder: '',\n borderRadius: Sizes.md,\n roundedThumbnail: true,\n limit: 0\n}" }, { "name": "DefaultMultiSelect", @@ -6323,7 +6615,7 @@ "subtype": "variable", "file": "projects/lib/src/components/inputs/multi-select/multi-select.stories.ts", "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, { "name": "ThumbnailMultiSelect", @@ -6411,6 +6703,34 @@ "type": "Story", "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } + ], + "projects/lib/src/directives/ng-if-loaded/injection.ts": [ + { + "name": "defaultSpinner", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/directives/ng-if-loaded/injection.ts", + "type": "ComponentType", + "defaultValue": "SpinnerComponent" + }, + { + "name": "IF_LOADED_SPINNER", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/directives/ng-if-loaded/injection.ts", + "type": "", + "defaultValue": "new InjectionToken>('defaultSpinner')" + } + ], + "projects/lib/src/directives/ng-if-loaded/ng-if-loaded.module.ts": [ + { + "name": "directives", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/lib/src/directives/ng-if-loaded/ng-if-loaded.module.ts", + "type": "[]", + "defaultValue": "[\n NgIfLoadedDirective,\n SpinnerComponent\n]" + } ] }, "groupedFunctions": {}, @@ -7165,8 +7485,8 @@ "type": "component", "linktype": "component", "name": "MultiSelectComponent", - "coveragePercent": 0, - "coverageCount": "0/22", + "coveragePercent": 21, + "coverageCount": "5/23", "status": "low" }, { @@ -7541,6 +7861,84 @@ "coverageCount": "0/1", "status": "low" }, + { + "filePath": "projects/lib/src/directives/ng-if-loaded/injection.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "defaultSpinner", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/lib/src/directives/ng-if-loaded/injection.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "IF_LOADED_SPINNER", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/lib/src/directives/ng-if-loaded/ng-if-loaded.directive.ts", + "type": "directive", + "linktype": "directive", + "name": "NgIfLoadedDirective", + "coveragePercent": 0, + "coverageCount": "0/4", + "status": "low" + }, + { + "filePath": "projects/lib/src/directives/ng-if-loaded/ng-if-loaded.module.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "directives", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.ts", + "type": "component", + "linktype": "component", + "name": "SpinnerComponent", + "coveragePercent": 0, + "coverageCount": "0/3", + "status": "low" + }, + { + "filePath": "projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "defaultArgs", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "DefaultSpinner", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Template", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, { "filePath": "projects/lib/src/services/color-theme/color-theme.module.ts", "type": "interface", diff --git a/design-system/projects/lib/package.json b/design-system/projects/lib/package.json index addef9f..49bee16 100644 --- a/design-system/projects/lib/package.json +++ b/design-system/projects/lib/package.json @@ -1,6 +1,6 @@ { "name": "@mprisma/components", - "version": "0.0.73", + "version": "0.0.74", "repository": { "type": "git", "url": "https://github.com/gabriel-gn/prisma-components.git" diff --git a/design-system/projects/lib/src/directives/ng-if-loaded/injection.ts b/design-system/projects/lib/src/directives/ng-if-loaded/injection.ts new file mode 100644 index 0000000..196c87f --- /dev/null +++ b/design-system/projects/lib/src/directives/ng-if-loaded/injection.ts @@ -0,0 +1,7 @@ +import {InjectionToken} from '@angular/core'; +import {SpinnerComponent} from './spinner/spinner.component'; +import {ComponentType} from '@angular/cdk/overlay'; + +export const defaultSpinner: ComponentType = SpinnerComponent; + +export const IF_LOADED_SPINNER = new InjectionToken>('defaultSpinner'); diff --git a/design-system/projects/lib/src/directives/ng-if-loaded/ng-if-loaded.directive.spec.ts b/design-system/projects/lib/src/directives/ng-if-loaded/ng-if-loaded.directive.spec.ts new file mode 100644 index 0000000..6905686 --- /dev/null +++ b/design-system/projects/lib/src/directives/ng-if-loaded/ng-if-loaded.directive.spec.ts @@ -0,0 +1,8 @@ +import { NgIfLoadedDirective } from './ng-if-loaded.directive'; + +describe('NgIfLoadedDirective', () => { + it('should create an instance', () => { + const directive = new NgIfLoadedDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/design-system/projects/lib/src/directives/ng-if-loaded/ng-if-loaded.directive.ts b/design-system/projects/lib/src/directives/ng-if-loaded/ng-if-loaded.directive.ts new file mode 100644 index 0000000..f961138 --- /dev/null +++ b/design-system/projects/lib/src/directives/ng-if-loaded/ng-if-loaded.directive.ts @@ -0,0 +1,42 @@ +import { + ComponentFactoryResolver, + Directive, + Inject, + Input, + TemplateRef, + ViewContainerRef +} from '@angular/core'; +import {IF_LOADED_SPINNER} from './injection'; +import {ComponentType} from '@angular/cdk/overlay'; + +@Directive({ + // tslint:disable-next-line:directive-selector + selector: '[ngIfLoaded]' +}) +export class NgIfLoadedDirective { + + spinner: ComponentType; + + constructor( + @Inject(IF_LOADED_SPINNER) spinnerComponent: ComponentType, + private templateRef: TemplateRef, + private viewContainer: ViewContainerRef, + private resolver: ComponentFactoryResolver + ) { + this.spinner = spinnerComponent; + } + + + @Input() + set ngIfLoaded(value) { + if (value) { + this.viewContainer.clear(); + this.viewContainer.createEmbeddedView(this.templateRef); + } else { + this.viewContainer.clear(); + const factory = this.resolver.resolveComponentFactory(this.spinner); + this.viewContainer.createComponent(factory); + } + } + +} diff --git a/design-system/projects/lib/src/directives/ng-if-loaded/ng-if-loaded.module.ts b/design-system/projects/lib/src/directives/ng-if-loaded/ng-if-loaded.module.ts new file mode 100644 index 0000000..6b7eb19 --- /dev/null +++ b/design-system/projects/lib/src/directives/ng-if-loaded/ng-if-loaded.module.ts @@ -0,0 +1,35 @@ +import {ModuleWithProviders, NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {NgIfLoadedDirective} from './ng-if-loaded.directive'; +import {SpinnerComponent} from './spinner/spinner.component'; +import {IF_LOADED_SPINNER} from './injection'; +import {CommandPaletteService} from '../../services/command-palette/command-palette.service'; +import {CommandPaletteEntriesService} from '../../services/command-palette/command-palette-entries.service'; +import {ComponentInjectorService} from '../../services/command-palette/component-injector.service'; +import {ComponentType} from '@angular/cdk/overlay'; + +const directives = [ + NgIfLoadedDirective, + SpinnerComponent +]; + +@NgModule({ + declarations: directives, + exports: directives, + imports: [ + CommonModule + ], +}) +export class NgIfLoadedModule { + public static forRoot(spinnerComponent: ComponentType = undefined): ModuleWithProviders { + return { + ngModule: NgIfLoadedModule, + providers: [ + CommandPaletteService, + CommandPaletteEntriesService, + ComponentInjectorService, + {provide: IF_LOADED_SPINNER, useValue: spinnerComponent || SpinnerComponent}, + ] + }; + } +} diff --git a/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.html b/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.html new file mode 100644 index 0000000..8cc75b2 --- /dev/null +++ b/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.html @@ -0,0 +1,11 @@ + diff --git a/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.scss b/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.scss new file mode 100644 index 0000000..6648e76 --- /dev/null +++ b/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.scss @@ -0,0 +1,211 @@ +.pm-spinner { + // Cube parameters + $colorBorder: #f5f5f5; + $colorMin: #dddddd; + //$colorMax: #505050; + $colorMax: #dddddd; + $size: 30px; + // Time parameters + $duration: 1s; + $wait: 20%; + $borderSize: $size * 0.1; + + .spinner-wrap { + perspective: 2 * $size; + perspective-origin: 50% 0px; + min-height: 50px; + padding-top: 3px; + align-self: center; + } + + .spinner-cube { + position: relative; + width: $size; + transform-style: preserve-3d; + } + + .spinner-cube div { + position: absolute; + width: $size; + height: $size; + } + + .spinner-front { + background: $colorMin; + border: $borderSize solid $colorBorder; + transform: translateZ($size * 0.5); + animation: colorsf $duration ease-in-out infinite; + -moz-animation: colorsf $duration ease-in-out infinite; + -webkit-animation: colorsf $duration ease-in-out infinite; + -o-animation: colorsf $duration ease-in-out infinite; + -ms-animation: colorsf $duration ease-in-out infinite; + } + + .spinner-left { + background: $colorMax; + border: $borderSize solid $colorBorder; + transform: rotateY(270deg) translateX(-$size * 0.5); + transform-origin: center left; + animation: colorsl $duration ease-in-out infinite; + -moz-animation: colorsl $duration ease-in-out infinite; + -webkit-animation: colorsl $duration ease-in-out infinite; + -o-animation: colorsl $duration ease-in-out infinite; + -ms-animation: colorsl $duration ease-in-out infinite; + } + + .spinner-top { + background: $colorMax; + border: $borderSize solid $colorBorder; + transform: rotateX(90deg) translateZ($size * 0.5); + animation: colorsl $duration ease-in-out infinite; + -moz-animation: colorsl $duration ease-in-out infinite; + -webkit-animation: colorsl $duration ease-in-out infinite; + -o-animation: colorsl $duration ease-in-out infinite; + -ms-animation: colorsl $duration ease-in-out infinite; + } + + @keyframes colorsf { + #{$wait} { + background: $colorMin; + } + 100% { + background: $colorMax; + } + } + + @keyframes colorsl { + #{$wait} { + background: $colorMax; + } + 100% { + background: $colorMin; + } + } + + @keyframes cube { + #{$wait} { + transform: rotateY(0deg); + } + 100% { + transform: rotateY(90deg); + } + } + + @-webkit-keyframes colorsf { + #{$wait} { + background: $colorMin; + } + 100% { + background: $colorMax; + } + } + + @-webkit-keyframes colorsl { + #{$wait} { + background: $colorMax; + } + 100% { + background: $colorMin; + } + } + + @-webkit-keyframes cube { + #{$wait} { + transform: rotateY(0deg); + } + 100% { + transform: rotateY(90deg); + } + } + + + @-o-keyframes colorsf { + #{$wait} { + background: $colorMin; + } + 100% { + background: $colorMax; + } + } + + @-o-keyframes colorsl { + #{$wait} { + background: $colorMax; + } + 100% { + background: $colorMin; + } + } + + @-o-keyframes cube { + #{$wait} { + transform: rotateY(0deg); + } + 100% { + transform: rotateY(90deg); + } + } + + @-ms-keyframes colorsf { + #{$wait} { + background: $colorMin; + } + 100% { + background: $colorMax; + } + } + + @-ms-keyframes colorsl { + #{$wait} { + background: $colorMax; + } + 100% { + background: $colorMin; + } + } + + @-ms-keyframes cube { + #{$wait} { + transform: rotateY(0deg); + } + 100% { + transform: rotateY(90deg); + } + } + + @-ms-keyframes colorsf { + #{$wait} { + background: $colorMin; + } + 100% { + background: $colorMax; + } + } + + @-moz-keyframes colorsl { + #{$wait} { + background: $colorMax; + } + 100% { + background: $colorMin; + } + } + + @-moz-keyframes cube { + #{$wait} { + transform: rotateY(0deg); + } + 100% { + transform: rotateY(90deg); + } + } + + .spinner-cube { + z-index: 999; + animation: cube $duration ease-in-out infinite; + -moz-animation: cube $duration ease-in-out infinite; + -webkit-animation: cube $duration ease-in-out infinite; + -o-animation: cube $duration ease-in-out infinite; + -ms-animation: cube $duration ease-in-out infinite; + } +} diff --git a/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.spec.ts b/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.spec.ts new file mode 100644 index 0000000..32b4801 --- /dev/null +++ b/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.spec.ts @@ -0,0 +1,25 @@ +import {ComponentFixture, TestBed} from '@angular/core/testing'; + +import {SpinnerComponent} from './spinner.component'; + +describe('SpinnerComponent', () => { + let component: SpinnerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SpinnerComponent] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SpinnerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.ts b/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.ts new file mode 100644 index 0000000..e9180b7 --- /dev/null +++ b/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.component.ts @@ -0,0 +1,16 @@ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'pm-spinner', + templateUrl: './spinner.component.html', + styleUrls: ['./spinner.component.scss'] +}) +export class SpinnerComponent implements OnInit { + + constructor() { + } + + ngOnInit(): void { + } + +} diff --git a/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.mdx b/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.mdx new file mode 100644 index 0000000..2c4f11e --- /dev/null +++ b/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.mdx @@ -0,0 +1,81 @@ +import {Meta, Story, ArgsTable, Canvas, Source} from '@storybook/addon-docs'; +import {SpinnerComponent} from './spinner.component'; +import {moduleMetadata} from "@storybook/angular"; +import {NgIfLoadedModule} from "../ng-if-loaded.module"; +import SourceStory from '!!raw-loader!./spinner.stories'; +import { + defaultArgs, + DefaultSpinner, +} from "./spinner.stories"; + +export const argTypes = { + // XXXArg1: { + // // description: 'CRIAR A DESCRIÇÃO COMO COMENTÁRIO MULTILINHA ACIMA DOS INPUTS NO COMPONENTE', + // table: { + // defaultValue: { summary: defaultArgs.XXXArg1}, + // }, + // control: { type: 'inline-radio'}, options: [true, false], + // }, +} + + + +export const Template = (args) => + +# Spinner + +#### Descrição do componente Spinner + +
+
+ +## Spinner padrão + +Descrição do componente Spinner padrão + +Deve ser usado da seguinte forma: + +``` +
+ Conteúdo normal +
+``` + + + + + +## Module Config + +``` +import {SpinnerModule} from '@mprisma/components'; + +@NgModule({ + imports: [ + ..., + NgIfLoadedModule.forRoot() + ..., + ] +}) +``` + +## Args Table + + + +## Source + +
+ The source stories on file spinner.stories.ts + +
diff --git a/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts b/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts new file mode 100644 index 0000000..7c34917 --- /dev/null +++ b/design-system/projects/lib/src/directives/ng-if-loaded/spinner/spinner.stories.ts @@ -0,0 +1,26 @@ +import {SpinnerComponent} from './spinner.component'; +import {Meta} from '@storybook/angular/types-6-0'; +import {Story} from '@storybook/angular'; + +export default { + title: 'Prisma/Stories/Spinner', + component: SpinnerComponent, +} as Meta; + +export const Template: Story = (args) => ({ + props: args, + template: ` +
+ Conteúdo normal +
+ ` +}); + +export const defaultArgs = { + flag: true +}; + +export const DefaultSpinner = Template.bind({}); +DefaultSpinner.args = { + ...defaultArgs +}; diff --git a/design-system/projects/lib/src/public-api.ts b/design-system/projects/lib/src/public-api.ts index cdebcfc..ffa897c 100644 --- a/design-system/projects/lib/src/public-api.ts +++ b/design-system/projects/lib/src/public-api.ts @@ -20,6 +20,12 @@ export * from './services/color-theme/color-theme.module'; export * from './services/command-palette/command-palette.service'; export * from './services/command-palette/command-palette.module'; +/****************** + * DIRECTIVES + ******************/ + +export * from './directives/ng-if-loaded/ng-if-loaded.module'; + /****************** * COMPONENTS ******************/