diff --git a/README.md b/README.md index 1b7bf1d..901da40 100755 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ | Angular Version | NPM Version | |-----------------|-------------| -| 13.2.3 | 13.0.2 | +| 13.2.3 | 13.0.3 | | < 13.0.0 | 0.0.77 | ## Reference diff --git a/documentation.json b/documentation.json index 5c3ae9d..ed2281a 100644 --- a/documentation.json +++ b/documentation.json @@ -262,12 +262,12 @@ }, { "name": "MultiSelectOption", - "id": "interface-MultiSelectOption-a3fbe1a5eb57bdcc86cf2728223b3e8cffce19d4834cfe61a266793a58ac5c113b6b2d7c03c9b1c0676cd9effc3d22b41fc8b9267467413ef646116962bed871", + "id": "interface-MultiSelectOption-63cbd62bba70e3af0aa479c3155425f73a4d3b1b90c14842289b0b9d970f4f5bfb7cdd98be248e351c69a30e011384c4e54a6e7ddc11bb9ee98544722a217d82", "file": "src/components/inputs/multi-select/multi-select.component.ts", "deprecated": false, "deprecationMessage": "", "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', {static: true}) inputBoxEl: ElementRef;\n @ViewChild('trigger', {static: true}) trigger: MatAutocompleteTrigger;\n /**\n * Ao ser selecionada uma opção nova, emite\n */\n @Output() selectedOptionsChanged = 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 /**\n * Opções que ja vem selecionadas\n */\n @Input() selectedOptions: MultiSelectOption[] = [];\n\n public myControl: FormControl;\n public inputValue: string = '';\n public filteredOptions: Observable;\n\n constructor(\n private cdr: ChangeDetectorRef\n ) {\n this.myControl = new FormControl();\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 '';\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.selectedOptionsChanged.emit(this.selectedOptions);\n this.clearInput();\n }\n\n private clearInput(): void {\n this.inputValue = '';\n console.log(this.myControl);\n this.myControl.setValue(this.inputValue);\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.selectedOptionsChanged.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', {static: true}) inputBoxEl: ElementRef;\n @ViewChild('trigger', {static: true}) trigger: MatAutocompleteTrigger;\n /**\n * Ao ser selecionada uma opção nova, emite\n */\n @Output() selectedOptionsChanged = 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 /**\n * Opções que ja vem selecionadas\n */\n @Input() selectedOptions: MultiSelectOption[] = [];\n\n public readonly myControl: FormControl;\n public inputValue: string = '';\n public filteredOptions: Observable;\n\n constructor(\n private cdr: ChangeDetectorRef\n ) {\n this.myControl = new FormControl();\n console.log(this.myControl);\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 /**\n * Função utilizada para colocar texto na caixa de input ao selecionar uma opção\n * @param user\n */\n displayFn(option: MultiSelectOption): string {\n return '';\n // return option && option.label ? option.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.selectedOptionsChanged.emit(this.selectedOptions);\n this.clearInput();\n }\n\n private clearInput(): void {\n this.inputValue = '';\n this.myControl.setValue(this.inputValue);\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 this.trigger.openPanel();\n }\n\n public clearSelected(): void {\n this.selectedOptions = [];\n this.selectedOptionsChanged.emit(this.selectedOptions);\n this.clearInput();\n }\n\n public togglePanel(): void {\n if (this.trigger.panelOpen === false) {\n this.trigger.openPanel();\n } else {\n this.trigger.closePanel();\n }\n }\n\n}\n", "properties": [ { "name": "label", @@ -1145,12 +1145,12 @@ }, { "name": "ResultSearchElements", - "id": "directive-ResultSearchElements-66c6f0cf938f4082a89bf59007fe3ce360f4af47b7b5e66f6905692e416ea71a00d9b154e084cb11a53e877b33af693cc66f261a28e3193c4b320953e407ad4f", + "id": "directive-ResultSearchElements-e045ec44455b7b88a9e2653ae48cfdc41bf04aa10bf96e0e71a2b4c15118ace05e9c47cd7778d80650379a16c1ba53cfde1171b0b9410d4bb8bb9865c021f2bb", "file": "src/services/command-palette/dialog/dialog.component.ts", "type": "directive", "description": "", "rawdescription": "\n", - "sourceCode": "import {\n Component,\n ElementRef,\n AfterViewInit,\n ViewChild,\n Renderer2,\n OnDestroy,\n ViewChildren, QueryList, Directive\n} from '@angular/core';\nimport {ComponentInjectorService} from '../component-injector.service';\nimport _ from 'lodash';\nimport {PaletteEntry, PaletteTreeEntry} from '../models';\nimport {CommandPaletteEntriesService} from '../command-palette-entries.service';\n\n// tslint:disable-next-line:directive-selector directive-class-suffix\n@Directive({selector: '.palette-result-entry'}) export class ResultSearchElements {\n //\n}\n\n@Component({\n selector: 'pm-command-palette-dialog',\n templateUrl: './dialog.component.html',\n styleUrls: ['./dialog.component.scss']\n})\nexport class DialogComponent implements AfterViewInit, OnDestroy {\n\n @ViewChild('rootPanel', {static: true}) rootPanelComponent: ElementRef;\n @ViewChild('searchResultContainer', {static: true}) searchResultContainer: ElementRef;\n @ViewChildren(ResultSearchElements, { read: ElementRef }) resultEntryElements: QueryList;\n public searchString = '';\n public searchIdTree: PaletteTreeEntry[] = []; // utilizado para navegar entre os ids da lista de entradas\n public itself: any;\n private currentFocusedElement: ElementRef;\n private unlistener: () => void;\n private deleteLatestSearchEntryOnDelete: boolean = false;\n\n public paletteEntries: PaletteEntry[] = [];\n public currentPaletteEntries: PaletteEntry[];\n public searchPaletteEntries: PaletteEntry[];\n\n constructor(\n public readonly commandPaletteEntriesService: CommandPaletteEntriesService,\n private componentInjectorService: ComponentInjectorService,\n private renderer2: Renderer2\n ) {\n document.documentElement.style.setProperty(`overflow-x`, `hidden`, 'important');\n this.commandPaletteEntriesService.paletteEntries$.subscribe(entries => {\n this.paletteEntries = [...entries];\n this.currentPaletteEntries = [...this.paletteEntries];\n this.searchPaletteEntries = [...this.paletteEntries];\n });\n }\n\n public ngAfterViewInit(): void {\n this.clearAll();\n this.unlistener = this.renderer2.listen('window', 'focusin', event => {\n if (!(\n event.target === this.rootPanelComponent.nativeElement\n || this.rootPanelComponent.nativeElement.contains(event.target)\n )) {\n this.destroyItself();\n }\n });\n }\n\n public ngOnDestroy(): void {\n document.documentElement.style.removeProperty(`overflow-x`);\n }\n\n public destroyItself(): void {\n this.componentInjectorService.removeComponentFromBody(this.itself);\n }\n\n private focusSearchInput(): void {\n setTimeout(() => {\n this.currentFocusedElement = this.rootPanelComponent;\n this.rootPanelComponent.nativeElement.children[0].children[1].focus();\n }, 50);\n }\n\n private isSearchInputFocused(): boolean {\n return this.currentFocusedElement === this.rootPanelComponent;\n }\n\n public focusNext(): void {\n const arrayResultEntryElements = this.resultEntryElements.toArray();\n const currentFocusIndex = arrayResultEntryElements.findIndex(item => item === this.currentFocusedElement);\n const focusNextIndex = currentFocusIndex + 1;\n if (focusNextIndex >= arrayResultEntryElements.length) {\n this.focusSearchInput();\n }\n else if (isNaN(focusNextIndex)) {\n this.currentFocusedElement = arrayResultEntryElements[focusNextIndex];\n this.currentFocusedElement.nativeElement.focus();\n } else {\n this.focusSearchInput();\n }\n }\n\n public focusPrevious(): void {\n const arrayResultEntryElements = this.resultEntryElements.toArray();\n const currentFocusIndex = arrayResultEntryElements.findIndex(item => item === this.currentFocusedElement);\n const focusPreviousIndex = currentFocusIndex - 1;\n if (focusPreviousIndex < 0) {\n this.focusSearchInput();\n }\n else if (isNaN(focusPreviousIndex)) {\n this.currentFocusedElement = arrayResultEntryElements[focusPreviousIndex];\n this.currentFocusedElement.nativeElement.focus();\n } else {\n this.focusSearchInput();\n }\n }\n\n public buildTreeIdEntriesFromPaletteEntry(paletteEntry: PaletteEntry, entriesToVerify: PaletteEntry[]): any {\n let result;\n let foundEqual: boolean = false;\n\n const verifyEqual = (entryToVerify: PaletteEntry) => {\n result.push({id: entryToVerify.id, label: entryToVerify.label});\n foundEqual = _.isEqual(entryToVerify, paletteEntry);\n };\n\n const verifyChildren = (entryToVerify: PaletteEntry) => {\n verifyEqual(entryToVerify);\n if (!foundEqual) {\n if (this.hasChildEntries(entryToVerify)) {\n //@ts-ignore\n for (const child of entryToVerify.entries) {\n if (!foundEqual) {\n verifyChildren(child);\n } else {\n break;\n }\n }\n } else {\n result = result.slice(0, 1);\n }\n }\n };\n\n for (const entry of entriesToVerify) {\n if (!foundEqual) {\n result = []; // toda vez que itera sobre um novo item do array base zera a árvore de results\n verifyChildren(entry);\n } else {\n break;\n }\n }\n return result;\n }\n\n public rebuildCurrentEntriesFromTree(treeEntryIndex: number, sliceTree: boolean = true): void {\n let resultEntries = [...this.paletteEntries];\n if (this.searchIdTree.length > 0) {\n const slicedTreeEntries = this.searchIdTree.slice(0, treeEntryIndex);\n // tslint:disable-next-line:prefer-for-of\n for (let i = 0; i < slicedTreeEntries.length; i++) {\n const treeEntry = slicedTreeEntries[i];\n let paletteEntry;\n if (i === 0) {\n paletteEntry = resultEntries.find(entry => entry.id === treeEntry.id);\n } else {\n //@ts-ignore\n paletteEntry = resultEntries[0].entries.find(entry => entry.id === treeEntry.id);\n }\n resultEntries = [paletteEntry];\n }\n }\n if (sliceTree) {\n this.searchIdTree = this.searchIdTree.slice(0, treeEntryIndex);\n }\n this.searchPaletteEntries = resultEntries;\n this.currentPaletteEntries = resultEntries;\n }\n\n public searchAction(searchValue: any): void {\n searchValue = `${searchValue}`; // força string\n const entriesToFlat: (paletteEntries: PaletteEntry[]) => string[] = (paletteEntries: PaletteEntry[]) => {\n const idTreeArray: string[] = [];\n\n const isSearchValueInEntry: (paletteEntry: PaletteEntry) => boolean = (paletteEntry: PaletteEntry) => {\n return paletteEntry.label.toLowerCase().includes(searchValue.toLowerCase())\n || paletteEntry.id.toLowerCase().includes(searchValue.toLowerCase());\n };\n\n const entryToFlat: (paletteEntry: PaletteEntry, idPrefix: string) => void = (paletteEntry: PaletteEntry, idPrefix: string = '') => {\n idPrefix = !!idPrefix ? `${idPrefix}` : `${paletteEntry.id}`;\n if (this.hasChildEntries(paletteEntry)) {\n idTreeArray.push(`${idPrefix}`);\n //@ts-ignore\n for (let i = 0; i < paletteEntry.entries.length; i++) {\n //@ts-ignore\n const entry = paletteEntry.entries[i];\n const idSuffix = `.entries[${i}]`;\n entryToFlat(entry, `${idPrefix}${idSuffix}`);\n }\n } else {\n if (isSearchValueInEntry(paletteEntry)) {\n idTreeArray.push(`${idPrefix}`);\n }\n }\n };\n\n if (paletteEntries.length > 0 && paletteEntries[0].id === 'results') {\n //@ts-ignore\n paletteEntries = paletteEntries[0].entries;\n }\n const resultEntry: PaletteEntry = {\n label: 'Results',\n id: 'results',\n entries: paletteEntries\n };\n\n entryToFlat(resultEntry, '');\n if (this.searchIdTree.length === 0) {\n return idTreeArray.slice(1);\n } else {\n return idTreeArray.slice(2);\n }\n };\n\n const flatEntriesToEntries: (flatEntries: string[], entriesToCheck: PaletteEntry[]) => PaletteEntry[] = (flatEntries: string[], entriesToCheck: PaletteEntry[]) => {\n const resultObjToCheck = {results: {entries: [...entriesToCheck]}};\n const entries: PaletteEntry[] = [];\n for (const flatEntry of flatEntries) {\n const entryToAdd: PaletteEntry = _.get(resultObjToCheck, flatEntry);\n entryToAdd.treeId = flatEntry;\n entries.push(entryToAdd);\n }\n return _.uniqWith(entries, _.isEqual); // remove objetos iguais\n };\n\n if (!!searchValue) {\n this.deleteLatestSearchEntryOnDelete = false;\n let entries;\n if (!!this.searchPaletteEntries && this.searchPaletteEntries.length > 0 && this.searchPaletteEntries[0].id === 'results') {\n entries = this.searchPaletteEntries[0].entries;\n } else {\n entries = this.searchPaletteEntries;\n }\n this.searchPaletteEntries = [\n {\n label: 'Results',\n id: 'results',\n entries: flatEntriesToEntries(entriesToFlat(entries), entries)\n }\n ];\n } else {\n if (this.deleteLatestSearchEntryOnDelete) {\n this.goBackOneLevel();\n }\n this.deleteLatestSearchEntryOnDelete = true;\n this.searchPaletteEntries = [...this.currentPaletteEntries];\n }\n }\n\n public goBackOneLevel(): void {\n if (this.isSearchInputFocused()) {\n if (this.searchIdTree.length === 0) {\n this.destroyItself();\n } else {\n this.rebuildCurrentEntriesFromTree(this.searchIdTree.length - 1);\n this.focusSearchInput();\n }\n } else {\n this.focusSearchInput();\n }\n }\n\n public hasChildEntries(paletteEntry: PaletteEntry): boolean {\n //@ts-ignore\n return paletteEntry?.entries && paletteEntry.entries.length > 0;\n }\n\n /**\n * Com uma palette entry, cria toda a estrutura baseado na raiz e abre o dialog nela já\n * @param paletteEntry: Entrada da lista raiz\n */\n public initFromPaletteEntry(paletteEntry: PaletteEntry): void {\n this.searchIdTree = this.buildTreeIdEntriesFromPaletteEntry(paletteEntry, this.paletteEntries);\n this.rebuildCurrentEntriesFromTree(this.searchIdTree.length, false);\n this.searchString = '';\n this.focusSearchInput();\n }\n\n /**\n * caso tenha child entries, atualiza o dialog, senão executa a ação da entry.\n */\n public paletteEntryAction(paletteEntry: PaletteEntry): void {\n if (this.hasChildEntries(paletteEntry)) {\n this.initFromPaletteEntry(paletteEntry);\n } else {\n //@ts-ignore\n paletteEntry.action();\n this.destroyItself();\n }\n }\n\n public clearAll(): void {\n this.searchString = '';\n this.searchIdTree = [];\n this.searchPaletteEntries = [...this.paletteEntries];\n this.currentPaletteEntries = [...this.paletteEntries];\n this.focusSearchInput();\n }\n\n}\n", + "sourceCode": "import {\n Component,\n ElementRef,\n AfterViewInit,\n ViewChild,\n Renderer2,\n OnDestroy,\n ViewChildren, QueryList, Directive\n} from '@angular/core';\nimport {ComponentInjectorService} from '../component-injector.service';\nimport _ from 'lodash';\nimport {PaletteEntry, PaletteTreeEntry} from '../models';\nimport {CommandPaletteEntriesService} from '../command-palette-entries.service';\n\n// tslint:disable-next-line:directive-selector directive-class-suffix\n@Directive({selector: '.palette-result-entry'}) export class ResultSearchElements {\n //\n}\n\n@Component({\n selector: 'pm-command-palette-dialog',\n templateUrl: './dialog.component.html',\n styleUrls: ['./dialog.component.scss']\n})\nexport class DialogComponent implements AfterViewInit, OnDestroy {\n\n @ViewChild('rootPanel', {static: true}) rootPanelComponent: ElementRef;\n @ViewChild('searchResultContainer', {static: true}) searchResultContainer: ElementRef;\n @ViewChildren(ResultSearchElements, { read: ElementRef }) resultEntryElements: QueryList;\n public searchString = '';\n public searchIdTree: PaletteTreeEntry[] = []; // utilizado para navegar entre os ids da lista de entradas\n public itself: any;\n private currentFocusedElement: ElementRef;\n private unlistener: () => void;\n private deleteLatestSearchEntryOnDelete: boolean = false;\n\n public paletteEntries: PaletteEntry[] = [];\n public currentPaletteEntries: PaletteEntry[];\n public searchPaletteEntries: PaletteEntry[];\n\n constructor(\n public readonly commandPaletteEntriesService: CommandPaletteEntriesService,\n private componentInjectorService: ComponentInjectorService,\n private renderer2: Renderer2\n ) {\n document.documentElement.style.setProperty(`overflow-x`, `hidden`, 'important');\n this.commandPaletteEntriesService.paletteEntries$.subscribe(entries => {\n this.paletteEntries = [...entries];\n this.currentPaletteEntries = [...this.paletteEntries];\n this.searchPaletteEntries = [...this.paletteEntries];\n });\n }\n\n public ngAfterViewInit(): void {\n this.clearAll();\n this.unlistener = this.renderer2.listen('window', 'focusin', event => {\n if (!(\n event.target === this.rootPanelComponent.nativeElement\n || this.rootPanelComponent.nativeElement.contains(event.target)\n )) {\n this.destroyItself();\n }\n });\n }\n\n public ngOnDestroy(): void {\n document.documentElement.style.removeProperty(`overflow-x`);\n }\n\n public destroyItself(): void {\n this.componentInjectorService.removeComponentFromBody(this.itself);\n }\n\n private focusSearchInput(): void {\n setTimeout(() => {\n this.currentFocusedElement = this.rootPanelComponent;\n this.rootPanelComponent.nativeElement.children[0].children[1].focus();\n }, 50);\n }\n\n private isSearchInputFocused(): boolean {\n return this.currentFocusedElement === this.rootPanelComponent;\n }\n\n public focusNext(): void {\n const arrayResultEntryElements = this.resultEntryElements.toArray();\n const currentFocusIndex = arrayResultEntryElements.findIndex(item => item === this.currentFocusedElement);\n const focusNextIndex = currentFocusIndex + 1;\n if (focusNextIndex >= arrayResultEntryElements.length) {\n this.focusSearchInput();\n }\n else if (!isNaN(focusNextIndex)) {\n this.currentFocusedElement = arrayResultEntryElements[focusNextIndex];\n this.currentFocusedElement.nativeElement.focus();\n } else {\n this.focusSearchInput();\n }\n }\n\n public focusPrevious(): void {\n const arrayResultEntryElements = this.resultEntryElements.toArray();\n const currentFocusIndex = arrayResultEntryElements.findIndex(item => item === this.currentFocusedElement);\n const focusPreviousIndex = currentFocusIndex - 1;\n if (focusPreviousIndex < 0) {\n this.focusSearchInput();\n }\n else if (!isNaN(focusPreviousIndex)) {\n this.currentFocusedElement = arrayResultEntryElements[focusPreviousIndex];\n this.currentFocusedElement.nativeElement.focus();\n } else {\n this.focusSearchInput();\n }\n }\n\n public buildTreeIdEntriesFromPaletteEntry(paletteEntry: PaletteEntry, entriesToVerify: PaletteEntry[]): any {\n let result;\n let foundEqual: boolean = false;\n\n const verifyEqual = (entryToVerify: PaletteEntry) => {\n result.push({id: entryToVerify.id, label: entryToVerify.label});\n foundEqual = _.isEqual(entryToVerify, paletteEntry);\n };\n\n const verifyChildren = (entryToVerify: PaletteEntry) => {\n verifyEqual(entryToVerify);\n if (!foundEqual) {\n if (this.hasChildEntries(entryToVerify)) {\n //@ts-ignore\n for (const child of entryToVerify.entries) {\n if (!foundEqual) {\n verifyChildren(child);\n } else {\n break;\n }\n }\n } else {\n result = result.slice(0, 1);\n }\n }\n };\n\n for (const entry of entriesToVerify) {\n if (!foundEqual) {\n result = []; // toda vez que itera sobre um novo item do array base zera a árvore de results\n verifyChildren(entry);\n } else {\n break;\n }\n }\n return result;\n }\n\n public rebuildCurrentEntriesFromTree(treeEntryIndex: number, sliceTree: boolean = true): void {\n let resultEntries = [...this.paletteEntries];\n if (this.searchIdTree.length > 0) {\n const slicedTreeEntries = this.searchIdTree.slice(0, treeEntryIndex);\n // tslint:disable-next-line:prefer-for-of\n for (let i = 0; i < slicedTreeEntries.length; i++) {\n const treeEntry = slicedTreeEntries[i];\n let paletteEntry;\n if (i === 0) {\n paletteEntry = resultEntries.find(entry => entry.id === treeEntry.id);\n } else {\n //@ts-ignore\n paletteEntry = resultEntries[0].entries.find(entry => entry.id === treeEntry.id);\n }\n resultEntries = [paletteEntry];\n }\n }\n if (sliceTree) {\n this.searchIdTree = this.searchIdTree.slice(0, treeEntryIndex);\n }\n this.searchPaletteEntries = resultEntries;\n this.currentPaletteEntries = resultEntries;\n }\n\n public searchAction(searchValue: any): void {\n searchValue = `${searchValue}`.toLowerCase(); // força string\n let idTreeArray: string[] = [];\n\n const isSearchValueInEntry: (paletteEntry: PaletteEntry) => boolean = (paletteEntry: PaletteEntry) => {\n const label = !!paletteEntry?.label ? `${paletteEntry.label}`.toLowerCase() : '';\n const id = !!paletteEntry?.id ? `${paletteEntry.id}`.toLowerCase() : '';\n return label.includes(searchValue)\n || id.includes(searchValue);\n };\n\n const entryToFlat: (paletteEntry: PaletteEntry, idPrefix: string, parentIds: string[]) => void = (paletteEntry: PaletteEntry, idPrefix: string = '', parentIds: string[] = []) => {\n idPrefix = !!idPrefix ? `${idPrefix}` : `${paletteEntry.id}`;\n if (this.hasChildEntries(paletteEntry)) {\n //@ts-ignore\n for (let i = 0; i < paletteEntry.entries.length; i++) {\n //@ts-ignore\n const entry = paletteEntry.entries[i];\n const idSuffix = `.entries[${i}]`;\n const currentEntryId = `${idPrefix}${idSuffix}`;\n if (isSearchValueInEntry(paletteEntry)) {\n idTreeArray.push(idPrefix);\n }\n entryToFlat(entry, currentEntryId, parentIds);\n }\n } else {\n if (isSearchValueInEntry(paletteEntry)) {\n parentIds.push(idPrefix);\n idTreeArray = [...idTreeArray, ...parentIds];\n }\n }\n };\n\n const entriesToFlat: (paletteEntries: PaletteEntry[]) => string[] = (paletteEntries: PaletteEntry[]) => {\n if (paletteEntries.length > 0 && paletteEntries[0].id === 'results') {\n //@ts-ignore\n paletteEntries = paletteEntries[0].entries;\n }\n const resultEntry: PaletteEntry = {\n label: 'Results',\n id: 'results',\n entries: paletteEntries\n };\n\n entryToFlat(resultEntry, '', []);\n // if (this.searchIdTree.length === 0) {\n // return idTreeArray.slice(0);\n // } else {\n // }\n return idTreeArray;\n };\n\n const flatEntriesToEntries: (flatEntries: string[], entriesToCheck: PaletteEntry[]) => PaletteEntry[] = (flatEntries: string[], entriesToCheck: PaletteEntry[]) => {\n const resultObjToCheck = {results: {entries: [...entriesToCheck]}};\n const entries: PaletteEntry[] = [];\n for (const flatEntry of flatEntries) {\n const entryToAdd: PaletteEntry = _.get(resultObjToCheck, flatEntry);\n entryToAdd.treeId = flatEntry;\n entries.push(entryToAdd);\n }\n return _.uniqWith(entries, _.isEqual); // remove objetos iguais\n };\n\n const doSearch = () => {\n let entries: PaletteEntry[];\n if (this.searchIdTree.length > 0) { // caso tenha entrado em alguma subcategoria, não busca por ela mesma\n entries = this.currentPaletteEntries[0].entries;\n } else {\n entries = this.currentPaletteEntries;\n }\n this.rebuildCurrentEntriesFromTree(this.searchIdTree.length, false);\n this.searchPaletteEntries = [\n {\n label: 'Results',\n id: 'results',\n entries: flatEntriesToEntries(\n entriesToFlat(entries),\n entries\n )\n }\n ];\n }\n\n if (!!searchValue) {\n this.deleteLatestSearchEntryOnDelete = false;\n doSearch();\n } else {\n if (this.deleteLatestSearchEntryOnDelete) {\n this.goBackOneLevel();\n }\n this.deleteLatestSearchEntryOnDelete = true;\n this.searchPaletteEntries = [...this.currentPaletteEntries];\n }\n }\n\n public goBackOneLevel(): void {\n if (this.isSearchInputFocused()) {\n if (this.searchIdTree.length === 0) {\n this.destroyItself();\n } else {\n this.rebuildCurrentEntriesFromTree(this.searchIdTree.length - 1);\n this.focusSearchInput();\n }\n } else {\n this.focusSearchInput();\n }\n }\n\n public hasChildEntries(paletteEntry: PaletteEntry): boolean {\n //@ts-ignore\n return paletteEntry?.entries && paletteEntry.entries.length > 0;\n }\n\n /**\n * Com uma palette entry, cria toda a estrutura baseado na raiz e abre o dialog nela já\n * @param paletteEntry: Entrada da lista raiz\n */\n public initFromPaletteEntry(paletteEntry: PaletteEntry): void {\n this.searchIdTree = this.buildTreeIdEntriesFromPaletteEntry(paletteEntry, this.paletteEntries);\n this.rebuildCurrentEntriesFromTree(this.searchIdTree.length, false);\n this.searchString = '';\n this.focusSearchInput();\n }\n\n /**\n * caso tenha child entries, atualiza o dialog, senão executa a ação da entry.\n */\n public paletteEntryAction(paletteEntry: PaletteEntry): void {\n if (this.hasChildEntries(paletteEntry)) {\n this.initFromPaletteEntry(paletteEntry);\n } else {\n //@ts-ignore\n paletteEntry.action();\n this.destroyItself();\n }\n }\n\n public clearAll(): void {\n this.searchString = '';\n this.searchIdTree = [];\n this.searchPaletteEntries = [...this.paletteEntries];\n this.currentPaletteEntries = [...this.paletteEntries];\n this.focusSearchInput();\n }\n\n}\n", "selector": ".palette-result-entry", "providers": [], "inputsClass": [], @@ -1915,7 +1915,7 @@ }, { "name": "DialogComponent", - "id": "component-DialogComponent-66c6f0cf938f4082a89bf59007fe3ce360f4af47b7b5e66f6905692e416ea71a00d9b154e084cb11a53e877b33af693cc66f261a28e3193c4b320953e407ad4f", + "id": "component-DialogComponent-e045ec44455b7b88a9e2653ae48cfdc41bf04aa10bf96e0e71a2b4c15118ace05e9c47cd7778d80650379a16c1ba53cfde1171b0b9410d4bb8bb9865c021f2bb", "file": "src/services/command-palette/dialog/dialog.component.ts", "encapsulation": [], "entryComponents": [], @@ -2158,7 +2158,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 300, + "line": 314, "deprecated": false, "deprecationMessage": "", "modifierKind": [ @@ -2223,7 +2223,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 258, + "line": 272, "deprecated": false, "deprecationMessage": "", "modifierKind": [ @@ -2243,7 +2243,7 @@ "optional": false, "returnType": "boolean", "typeParameters": [], - "line": 271, + "line": 285, "deprecated": false, "deprecationMessage": "", "modifierKind": [ @@ -2274,7 +2274,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 280, + "line": 294, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCom uma palette entry, cria toda a estrutura baseado na raiz e abre o dialog nela já\n", @@ -2285,8 +2285,8 @@ "jsdoctags": [ { "name": { - "pos": 9763, - "end": 9775, + "pos": 10207, + "end": 10219, "flags": 4227072, "modifierFlagsCache": 0, "transformFlags": 0, @@ -2297,8 +2297,8 @@ "deprecated": false, "deprecationMessage": "", "tagName": { - "pos": 9757, - "end": 9762, + "pos": 10201, + "end": 10206, "flags": 4227072, "modifierFlagsCache": 0, "transformFlags": 0, @@ -2361,7 +2361,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 290, + "line": 304, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\ncaso tenha child entries, atualiza o dialog, senão executa a ação da entry.\n", @@ -2468,7 +2468,7 @@ "description": "", "rawdescription": "\n", "type": "component", - "sourceCode": "import {\n Component,\n ElementRef,\n AfterViewInit,\n ViewChild,\n Renderer2,\n OnDestroy,\n ViewChildren, QueryList, Directive\n} from '@angular/core';\nimport {ComponentInjectorService} from '../component-injector.service';\nimport _ from 'lodash';\nimport {PaletteEntry, PaletteTreeEntry} from '../models';\nimport {CommandPaletteEntriesService} from '../command-palette-entries.service';\n\n// tslint:disable-next-line:directive-selector directive-class-suffix\n@Directive({selector: '.palette-result-entry'}) export class ResultSearchElements {\n //\n}\n\n@Component({\n selector: 'pm-command-palette-dialog',\n templateUrl: './dialog.component.html',\n styleUrls: ['./dialog.component.scss']\n})\nexport class DialogComponent implements AfterViewInit, OnDestroy {\n\n @ViewChild('rootPanel', {static: true}) rootPanelComponent: ElementRef;\n @ViewChild('searchResultContainer', {static: true}) searchResultContainer: ElementRef;\n @ViewChildren(ResultSearchElements, { read: ElementRef }) resultEntryElements: QueryList;\n public searchString = '';\n public searchIdTree: PaletteTreeEntry[] = []; // utilizado para navegar entre os ids da lista de entradas\n public itself: any;\n private currentFocusedElement: ElementRef;\n private unlistener: () => void;\n private deleteLatestSearchEntryOnDelete: boolean = false;\n\n public paletteEntries: PaletteEntry[] = [];\n public currentPaletteEntries: PaletteEntry[];\n public searchPaletteEntries: PaletteEntry[];\n\n constructor(\n public readonly commandPaletteEntriesService: CommandPaletteEntriesService,\n private componentInjectorService: ComponentInjectorService,\n private renderer2: Renderer2\n ) {\n document.documentElement.style.setProperty(`overflow-x`, `hidden`, 'important');\n this.commandPaletteEntriesService.paletteEntries$.subscribe(entries => {\n this.paletteEntries = [...entries];\n this.currentPaletteEntries = [...this.paletteEntries];\n this.searchPaletteEntries = [...this.paletteEntries];\n });\n }\n\n public ngAfterViewInit(): void {\n this.clearAll();\n this.unlistener = this.renderer2.listen('window', 'focusin', event => {\n if (!(\n event.target === this.rootPanelComponent.nativeElement\n || this.rootPanelComponent.nativeElement.contains(event.target)\n )) {\n this.destroyItself();\n }\n });\n }\n\n public ngOnDestroy(): void {\n document.documentElement.style.removeProperty(`overflow-x`);\n }\n\n public destroyItself(): void {\n this.componentInjectorService.removeComponentFromBody(this.itself);\n }\n\n private focusSearchInput(): void {\n setTimeout(() => {\n this.currentFocusedElement = this.rootPanelComponent;\n this.rootPanelComponent.nativeElement.children[0].children[1].focus();\n }, 50);\n }\n\n private isSearchInputFocused(): boolean {\n return this.currentFocusedElement === this.rootPanelComponent;\n }\n\n public focusNext(): void {\n const arrayResultEntryElements = this.resultEntryElements.toArray();\n const currentFocusIndex = arrayResultEntryElements.findIndex(item => item === this.currentFocusedElement);\n const focusNextIndex = currentFocusIndex + 1;\n if (focusNextIndex >= arrayResultEntryElements.length) {\n this.focusSearchInput();\n }\n else if (isNaN(focusNextIndex)) {\n this.currentFocusedElement = arrayResultEntryElements[focusNextIndex];\n this.currentFocusedElement.nativeElement.focus();\n } else {\n this.focusSearchInput();\n }\n }\n\n public focusPrevious(): void {\n const arrayResultEntryElements = this.resultEntryElements.toArray();\n const currentFocusIndex = arrayResultEntryElements.findIndex(item => item === this.currentFocusedElement);\n const focusPreviousIndex = currentFocusIndex - 1;\n if (focusPreviousIndex < 0) {\n this.focusSearchInput();\n }\n else if (isNaN(focusPreviousIndex)) {\n this.currentFocusedElement = arrayResultEntryElements[focusPreviousIndex];\n this.currentFocusedElement.nativeElement.focus();\n } else {\n this.focusSearchInput();\n }\n }\n\n public buildTreeIdEntriesFromPaletteEntry(paletteEntry: PaletteEntry, entriesToVerify: PaletteEntry[]): any {\n let result;\n let foundEqual: boolean = false;\n\n const verifyEqual = (entryToVerify: PaletteEntry) => {\n result.push({id: entryToVerify.id, label: entryToVerify.label});\n foundEqual = _.isEqual(entryToVerify, paletteEntry);\n };\n\n const verifyChildren = (entryToVerify: PaletteEntry) => {\n verifyEqual(entryToVerify);\n if (!foundEqual) {\n if (this.hasChildEntries(entryToVerify)) {\n //@ts-ignore\n for (const child of entryToVerify.entries) {\n if (!foundEqual) {\n verifyChildren(child);\n } else {\n break;\n }\n }\n } else {\n result = result.slice(0, 1);\n }\n }\n };\n\n for (const entry of entriesToVerify) {\n if (!foundEqual) {\n result = []; // toda vez que itera sobre um novo item do array base zera a árvore de results\n verifyChildren(entry);\n } else {\n break;\n }\n }\n return result;\n }\n\n public rebuildCurrentEntriesFromTree(treeEntryIndex: number, sliceTree: boolean = true): void {\n let resultEntries = [...this.paletteEntries];\n if (this.searchIdTree.length > 0) {\n const slicedTreeEntries = this.searchIdTree.slice(0, treeEntryIndex);\n // tslint:disable-next-line:prefer-for-of\n for (let i = 0; i < slicedTreeEntries.length; i++) {\n const treeEntry = slicedTreeEntries[i];\n let paletteEntry;\n if (i === 0) {\n paletteEntry = resultEntries.find(entry => entry.id === treeEntry.id);\n } else {\n //@ts-ignore\n paletteEntry = resultEntries[0].entries.find(entry => entry.id === treeEntry.id);\n }\n resultEntries = [paletteEntry];\n }\n }\n if (sliceTree) {\n this.searchIdTree = this.searchIdTree.slice(0, treeEntryIndex);\n }\n this.searchPaletteEntries = resultEntries;\n this.currentPaletteEntries = resultEntries;\n }\n\n public searchAction(searchValue: any): void {\n searchValue = `${searchValue}`; // força string\n const entriesToFlat: (paletteEntries: PaletteEntry[]) => string[] = (paletteEntries: PaletteEntry[]) => {\n const idTreeArray: string[] = [];\n\n const isSearchValueInEntry: (paletteEntry: PaletteEntry) => boolean = (paletteEntry: PaletteEntry) => {\n return paletteEntry.label.toLowerCase().includes(searchValue.toLowerCase())\n || paletteEntry.id.toLowerCase().includes(searchValue.toLowerCase());\n };\n\n const entryToFlat: (paletteEntry: PaletteEntry, idPrefix: string) => void = (paletteEntry: PaletteEntry, idPrefix: string = '') => {\n idPrefix = !!idPrefix ? `${idPrefix}` : `${paletteEntry.id}`;\n if (this.hasChildEntries(paletteEntry)) {\n idTreeArray.push(`${idPrefix}`);\n //@ts-ignore\n for (let i = 0; i < paletteEntry.entries.length; i++) {\n //@ts-ignore\n const entry = paletteEntry.entries[i];\n const idSuffix = `.entries[${i}]`;\n entryToFlat(entry, `${idPrefix}${idSuffix}`);\n }\n } else {\n if (isSearchValueInEntry(paletteEntry)) {\n idTreeArray.push(`${idPrefix}`);\n }\n }\n };\n\n if (paletteEntries.length > 0 && paletteEntries[0].id === 'results') {\n //@ts-ignore\n paletteEntries = paletteEntries[0].entries;\n }\n const resultEntry: PaletteEntry = {\n label: 'Results',\n id: 'results',\n entries: paletteEntries\n };\n\n entryToFlat(resultEntry, '');\n if (this.searchIdTree.length === 0) {\n return idTreeArray.slice(1);\n } else {\n return idTreeArray.slice(2);\n }\n };\n\n const flatEntriesToEntries: (flatEntries: string[], entriesToCheck: PaletteEntry[]) => PaletteEntry[] = (flatEntries: string[], entriesToCheck: PaletteEntry[]) => {\n const resultObjToCheck = {results: {entries: [...entriesToCheck]}};\n const entries: PaletteEntry[] = [];\n for (const flatEntry of flatEntries) {\n const entryToAdd: PaletteEntry = _.get(resultObjToCheck, flatEntry);\n entryToAdd.treeId = flatEntry;\n entries.push(entryToAdd);\n }\n return _.uniqWith(entries, _.isEqual); // remove objetos iguais\n };\n\n if (!!searchValue) {\n this.deleteLatestSearchEntryOnDelete = false;\n let entries;\n if (!!this.searchPaletteEntries && this.searchPaletteEntries.length > 0 && this.searchPaletteEntries[0].id === 'results') {\n entries = this.searchPaletteEntries[0].entries;\n } else {\n entries = this.searchPaletteEntries;\n }\n this.searchPaletteEntries = [\n {\n label: 'Results',\n id: 'results',\n entries: flatEntriesToEntries(entriesToFlat(entries), entries)\n }\n ];\n } else {\n if (this.deleteLatestSearchEntryOnDelete) {\n this.goBackOneLevel();\n }\n this.deleteLatestSearchEntryOnDelete = true;\n this.searchPaletteEntries = [...this.currentPaletteEntries];\n }\n }\n\n public goBackOneLevel(): void {\n if (this.isSearchInputFocused()) {\n if (this.searchIdTree.length === 0) {\n this.destroyItself();\n } else {\n this.rebuildCurrentEntriesFromTree(this.searchIdTree.length - 1);\n this.focusSearchInput();\n }\n } else {\n this.focusSearchInput();\n }\n }\n\n public hasChildEntries(paletteEntry: PaletteEntry): boolean {\n //@ts-ignore\n return paletteEntry?.entries && paletteEntry.entries.length > 0;\n }\n\n /**\n * Com uma palette entry, cria toda a estrutura baseado na raiz e abre o dialog nela já\n * @param paletteEntry: Entrada da lista raiz\n */\n public initFromPaletteEntry(paletteEntry: PaletteEntry): void {\n this.searchIdTree = this.buildTreeIdEntriesFromPaletteEntry(paletteEntry, this.paletteEntries);\n this.rebuildCurrentEntriesFromTree(this.searchIdTree.length, false);\n this.searchString = '';\n this.focusSearchInput();\n }\n\n /**\n * caso tenha child entries, atualiza o dialog, senão executa a ação da entry.\n */\n public paletteEntryAction(paletteEntry: PaletteEntry): void {\n if (this.hasChildEntries(paletteEntry)) {\n this.initFromPaletteEntry(paletteEntry);\n } else {\n //@ts-ignore\n paletteEntry.action();\n this.destroyItself();\n }\n }\n\n public clearAll(): void {\n this.searchString = '';\n this.searchIdTree = [];\n this.searchPaletteEntries = [...this.paletteEntries];\n this.currentPaletteEntries = [...this.paletteEntries];\n this.focusSearchInput();\n }\n\n}\n", + "sourceCode": "import {\n Component,\n ElementRef,\n AfterViewInit,\n ViewChild,\n Renderer2,\n OnDestroy,\n ViewChildren, QueryList, Directive\n} from '@angular/core';\nimport {ComponentInjectorService} from '../component-injector.service';\nimport _ from 'lodash';\nimport {PaletteEntry, PaletteTreeEntry} from '../models';\nimport {CommandPaletteEntriesService} from '../command-palette-entries.service';\n\n// tslint:disable-next-line:directive-selector directive-class-suffix\n@Directive({selector: '.palette-result-entry'}) export class ResultSearchElements {\n //\n}\n\n@Component({\n selector: 'pm-command-palette-dialog',\n templateUrl: './dialog.component.html',\n styleUrls: ['./dialog.component.scss']\n})\nexport class DialogComponent implements AfterViewInit, OnDestroy {\n\n @ViewChild('rootPanel', {static: true}) rootPanelComponent: ElementRef;\n @ViewChild('searchResultContainer', {static: true}) searchResultContainer: ElementRef;\n @ViewChildren(ResultSearchElements, { read: ElementRef }) resultEntryElements: QueryList;\n public searchString = '';\n public searchIdTree: PaletteTreeEntry[] = []; // utilizado para navegar entre os ids da lista de entradas\n public itself: any;\n private currentFocusedElement: ElementRef;\n private unlistener: () => void;\n private deleteLatestSearchEntryOnDelete: boolean = false;\n\n public paletteEntries: PaletteEntry[] = [];\n public currentPaletteEntries: PaletteEntry[];\n public searchPaletteEntries: PaletteEntry[];\n\n constructor(\n public readonly commandPaletteEntriesService: CommandPaletteEntriesService,\n private componentInjectorService: ComponentInjectorService,\n private renderer2: Renderer2\n ) {\n document.documentElement.style.setProperty(`overflow-x`, `hidden`, 'important');\n this.commandPaletteEntriesService.paletteEntries$.subscribe(entries => {\n this.paletteEntries = [...entries];\n this.currentPaletteEntries = [...this.paletteEntries];\n this.searchPaletteEntries = [...this.paletteEntries];\n });\n }\n\n public ngAfterViewInit(): void {\n this.clearAll();\n this.unlistener = this.renderer2.listen('window', 'focusin', event => {\n if (!(\n event.target === this.rootPanelComponent.nativeElement\n || this.rootPanelComponent.nativeElement.contains(event.target)\n )) {\n this.destroyItself();\n }\n });\n }\n\n public ngOnDestroy(): void {\n document.documentElement.style.removeProperty(`overflow-x`);\n }\n\n public destroyItself(): void {\n this.componentInjectorService.removeComponentFromBody(this.itself);\n }\n\n private focusSearchInput(): void {\n setTimeout(() => {\n this.currentFocusedElement = this.rootPanelComponent;\n this.rootPanelComponent.nativeElement.children[0].children[1].focus();\n }, 50);\n }\n\n private isSearchInputFocused(): boolean {\n return this.currentFocusedElement === this.rootPanelComponent;\n }\n\n public focusNext(): void {\n const arrayResultEntryElements = this.resultEntryElements.toArray();\n const currentFocusIndex = arrayResultEntryElements.findIndex(item => item === this.currentFocusedElement);\n const focusNextIndex = currentFocusIndex + 1;\n if (focusNextIndex >= arrayResultEntryElements.length) {\n this.focusSearchInput();\n }\n else if (!isNaN(focusNextIndex)) {\n this.currentFocusedElement = arrayResultEntryElements[focusNextIndex];\n this.currentFocusedElement.nativeElement.focus();\n } else {\n this.focusSearchInput();\n }\n }\n\n public focusPrevious(): void {\n const arrayResultEntryElements = this.resultEntryElements.toArray();\n const currentFocusIndex = arrayResultEntryElements.findIndex(item => item === this.currentFocusedElement);\n const focusPreviousIndex = currentFocusIndex - 1;\n if (focusPreviousIndex < 0) {\n this.focusSearchInput();\n }\n else if (!isNaN(focusPreviousIndex)) {\n this.currentFocusedElement = arrayResultEntryElements[focusPreviousIndex];\n this.currentFocusedElement.nativeElement.focus();\n } else {\n this.focusSearchInput();\n }\n }\n\n public buildTreeIdEntriesFromPaletteEntry(paletteEntry: PaletteEntry, entriesToVerify: PaletteEntry[]): any {\n let result;\n let foundEqual: boolean = false;\n\n const verifyEqual = (entryToVerify: PaletteEntry) => {\n result.push({id: entryToVerify.id, label: entryToVerify.label});\n foundEqual = _.isEqual(entryToVerify, paletteEntry);\n };\n\n const verifyChildren = (entryToVerify: PaletteEntry) => {\n verifyEqual(entryToVerify);\n if (!foundEqual) {\n if (this.hasChildEntries(entryToVerify)) {\n //@ts-ignore\n for (const child of entryToVerify.entries) {\n if (!foundEqual) {\n verifyChildren(child);\n } else {\n break;\n }\n }\n } else {\n result = result.slice(0, 1);\n }\n }\n };\n\n for (const entry of entriesToVerify) {\n if (!foundEqual) {\n result = []; // toda vez que itera sobre um novo item do array base zera a árvore de results\n verifyChildren(entry);\n } else {\n break;\n }\n }\n return result;\n }\n\n public rebuildCurrentEntriesFromTree(treeEntryIndex: number, sliceTree: boolean = true): void {\n let resultEntries = [...this.paletteEntries];\n if (this.searchIdTree.length > 0) {\n const slicedTreeEntries = this.searchIdTree.slice(0, treeEntryIndex);\n // tslint:disable-next-line:prefer-for-of\n for (let i = 0; i < slicedTreeEntries.length; i++) {\n const treeEntry = slicedTreeEntries[i];\n let paletteEntry;\n if (i === 0) {\n paletteEntry = resultEntries.find(entry => entry.id === treeEntry.id);\n } else {\n //@ts-ignore\n paletteEntry = resultEntries[0].entries.find(entry => entry.id === treeEntry.id);\n }\n resultEntries = [paletteEntry];\n }\n }\n if (sliceTree) {\n this.searchIdTree = this.searchIdTree.slice(0, treeEntryIndex);\n }\n this.searchPaletteEntries = resultEntries;\n this.currentPaletteEntries = resultEntries;\n }\n\n public searchAction(searchValue: any): void {\n searchValue = `${searchValue}`.toLowerCase(); // força string\n let idTreeArray: string[] = [];\n\n const isSearchValueInEntry: (paletteEntry: PaletteEntry) => boolean = (paletteEntry: PaletteEntry) => {\n const label = !!paletteEntry?.label ? `${paletteEntry.label}`.toLowerCase() : '';\n const id = !!paletteEntry?.id ? `${paletteEntry.id}`.toLowerCase() : '';\n return label.includes(searchValue)\n || id.includes(searchValue);\n };\n\n const entryToFlat: (paletteEntry: PaletteEntry, idPrefix: string, parentIds: string[]) => void = (paletteEntry: PaletteEntry, idPrefix: string = '', parentIds: string[] = []) => {\n idPrefix = !!idPrefix ? `${idPrefix}` : `${paletteEntry.id}`;\n if (this.hasChildEntries(paletteEntry)) {\n //@ts-ignore\n for (let i = 0; i < paletteEntry.entries.length; i++) {\n //@ts-ignore\n const entry = paletteEntry.entries[i];\n const idSuffix = `.entries[${i}]`;\n const currentEntryId = `${idPrefix}${idSuffix}`;\n if (isSearchValueInEntry(paletteEntry)) {\n idTreeArray.push(idPrefix);\n }\n entryToFlat(entry, currentEntryId, parentIds);\n }\n } else {\n if (isSearchValueInEntry(paletteEntry)) {\n parentIds.push(idPrefix);\n idTreeArray = [...idTreeArray, ...parentIds];\n }\n }\n };\n\n const entriesToFlat: (paletteEntries: PaletteEntry[]) => string[] = (paletteEntries: PaletteEntry[]) => {\n if (paletteEntries.length > 0 && paletteEntries[0].id === 'results') {\n //@ts-ignore\n paletteEntries = paletteEntries[0].entries;\n }\n const resultEntry: PaletteEntry = {\n label: 'Results',\n id: 'results',\n entries: paletteEntries\n };\n\n entryToFlat(resultEntry, '', []);\n // if (this.searchIdTree.length === 0) {\n // return idTreeArray.slice(0);\n // } else {\n // }\n return idTreeArray;\n };\n\n const flatEntriesToEntries: (flatEntries: string[], entriesToCheck: PaletteEntry[]) => PaletteEntry[] = (flatEntries: string[], entriesToCheck: PaletteEntry[]) => {\n const resultObjToCheck = {results: {entries: [...entriesToCheck]}};\n const entries: PaletteEntry[] = [];\n for (const flatEntry of flatEntries) {\n const entryToAdd: PaletteEntry = _.get(resultObjToCheck, flatEntry);\n entryToAdd.treeId = flatEntry;\n entries.push(entryToAdd);\n }\n return _.uniqWith(entries, _.isEqual); // remove objetos iguais\n };\n\n const doSearch = () => {\n let entries: PaletteEntry[];\n if (this.searchIdTree.length > 0) { // caso tenha entrado em alguma subcategoria, não busca por ela mesma\n entries = this.currentPaletteEntries[0].entries;\n } else {\n entries = this.currentPaletteEntries;\n }\n this.rebuildCurrentEntriesFromTree(this.searchIdTree.length, false);\n this.searchPaletteEntries = [\n {\n label: 'Results',\n id: 'results',\n entries: flatEntriesToEntries(\n entriesToFlat(entries),\n entries\n )\n }\n ];\n }\n\n if (!!searchValue) {\n this.deleteLatestSearchEntryOnDelete = false;\n doSearch();\n } else {\n if (this.deleteLatestSearchEntryOnDelete) {\n this.goBackOneLevel();\n }\n this.deleteLatestSearchEntryOnDelete = true;\n this.searchPaletteEntries = [...this.currentPaletteEntries];\n }\n }\n\n public goBackOneLevel(): void {\n if (this.isSearchInputFocused()) {\n if (this.searchIdTree.length === 0) {\n this.destroyItself();\n } else {\n this.rebuildCurrentEntriesFromTree(this.searchIdTree.length - 1);\n this.focusSearchInput();\n }\n } else {\n this.focusSearchInput();\n }\n }\n\n public hasChildEntries(paletteEntry: PaletteEntry): boolean {\n //@ts-ignore\n return paletteEntry?.entries && paletteEntry.entries.length > 0;\n }\n\n /**\n * Com uma palette entry, cria toda a estrutura baseado na raiz e abre o dialog nela já\n * @param paletteEntry: Entrada da lista raiz\n */\n public initFromPaletteEntry(paletteEntry: PaletteEntry): void {\n this.searchIdTree = this.buildTreeIdEntriesFromPaletteEntry(paletteEntry, this.paletteEntries);\n this.rebuildCurrentEntriesFromTree(this.searchIdTree.length, false);\n this.searchString = '';\n this.focusSearchInput();\n }\n\n /**\n * caso tenha child entries, atualiza o dialog, senão executa a ação da entry.\n */\n public paletteEntryAction(paletteEntry: PaletteEntry): void {\n if (this.hasChildEntries(paletteEntry)) {\n this.initFromPaletteEntry(paletteEntry);\n } else {\n //@ts-ignore\n paletteEntry.action();\n this.destroyItself();\n }\n }\n\n public clearAll(): void {\n this.searchString = '';\n this.searchIdTree = [];\n this.searchPaletteEntries = [...this.paletteEntries];\n this.currentPaletteEntries = [...this.paletteEntries];\n this.focusSearchInput();\n }\n\n}\n", "assetsDirs": [], "styleUrlsData": [ { @@ -2537,7 +2537,7 @@ "AfterViewInit", "OnDestroy" ], - "templateData": "\n
\n
\n
\n
\n \n {{treeEntry.label}}\n \n
\n 0 ? '' : commandPaletteEntriesService.dialogSearchPlaceholder\"\n >\n \n {{commandPaletteEntriesService.dialogClearButtonLabel}}\n \n
\n
\n
\n

{{searchEntry.label}}

\n
\n

{{childEntry.label}}{{hasChildEntries(childEntry) ? '...' : ''}}

\n
\n
\n
\n
\n
\n\n" + "templateData": "\n
\n
\n
\n
\n \n {{treeEntry.label}}\n \n
\n 0 ? '' : commandPaletteEntriesService.dialogSearchPlaceholder\"\n >\n \n {{commandPaletteEntriesService.dialogClearButtonLabel}}\n \n
\n
\n
\n

{{searchEntry.label}}

\n \n
\n

{{childEntry.label}}{{hasChildEntries(childEntry) ? '...' : ''}}

\n
\n \n
\n
\n
\n
\n\n" }, { "name": "DraggableListComponent", @@ -3719,7 +3719,7 @@ }, { "name": "MultiSelectComponent", - "id": "component-MultiSelectComponent-a3fbe1a5eb57bdcc86cf2728223b3e8cffce19d4834cfe61a266793a58ac5c113b6b2d7c03c9b1c0676cd9effc3d22b41fc8b9267467413ef646116962bed871", + "id": "component-MultiSelectComponent-63cbd62bba70e3af0aa479c3155425f73a4d3b1b90c14842289b0b9d970f4f5bfb7cdd98be248e351c69a30e011384c4e54a6e7ddc11bb9ee98544722a217d82", "file": "src/components/inputs/multi-select/multi-select.component.ts", "encapsulation": [], "entryComponents": [], @@ -3867,7 +3867,8 @@ "description": "", "line": 69, "modifierKind": [ - 123 + 123, + 144 ] }, { @@ -3900,7 +3901,7 @@ "optional": false, "returnType": "MultiSelectOption[]", "typeParameters": [], - "line": 96, + "line": 101, "deprecated": false, "deprecationMessage": "", "modifierKind": [ @@ -3924,7 +3925,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 111, + "line": 116, "deprecated": false, "deprecationMessage": "", "modifierKind": [ @@ -3937,7 +3938,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 134, + "line": 139, "deprecated": false, "deprecationMessage": "", "modifierKind": [ @@ -3948,7 +3949,7 @@ "name": "displayFn", "args": [ { - "name": "user", + "name": "option", "type": "MultiSelectOption", "deprecated": false, "deprecationMessage": "" @@ -3957,12 +3958,14 @@ "optional": false, "returnType": "string", "typeParameters": [], - "line": 91, + "line": 96, "deprecated": false, "deprecationMessage": "", + "rawdescription": "\n\nFunção utilizada para colocar texto na caixa de input ao selecionar uma opção\n", + "description": "

Função utilizada para colocar texto na caixa de input ao selecionar uma opção

\n", "jsdoctags": [ { - "name": "user", + "name": "option", "type": "MultiSelectOption", "deprecated": false, "deprecationMessage": "", @@ -3985,7 +3988,7 @@ "optional": false, "returnType": "boolean", "typeParameters": [], - "line": 124, + "line": 128, "deprecated": false, "deprecationMessage": "", "modifierKind": [ @@ -4009,7 +4012,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 87, + "line": 88, "deprecated": false, "deprecationMessage": "" }, @@ -4019,7 +4022,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 79, + "line": 80, "deprecated": false, "deprecationMessage": "" }, @@ -4029,7 +4032,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 128, + "line": 132, "deprecated": false, "deprecationMessage": "", "modifierKind": [ @@ -4049,7 +4052,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 119, + "line": 123, "deprecated": false, "deprecationMessage": "", "modifierKind": [ @@ -4080,7 +4083,7 @@ "optional": false, "returnType": "void", "typeParameters": [], - "line": 105, + "line": 110, "deprecated": false, "deprecationMessage": "", "modifierKind": [ @@ -4097,6 +4100,19 @@ } } ] + }, + { + "name": "togglePanel", + "args": [], + "optional": false, + "returnType": "void", + "typeParameters": [], + "line": 145, + "deprecated": false, + "deprecationMessage": "", + "modifierKind": [ + 123 + ] } ], "deprecated": false, @@ -4106,7 +4122,7 @@ "description": "", "rawdescription": "\n", "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', {static: true}) inputBoxEl: ElementRef;\n @ViewChild('trigger', {static: true}) trigger: MatAutocompleteTrigger;\n /**\n * Ao ser selecionada uma opção nova, emite\n */\n @Output() selectedOptionsChanged = 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 /**\n * Opções que ja vem selecionadas\n */\n @Input() selectedOptions: MultiSelectOption[] = [];\n\n public myControl: FormControl;\n public inputValue: string = '';\n public filteredOptions: Observable;\n\n constructor(\n private cdr: ChangeDetectorRef\n ) {\n this.myControl = new FormControl();\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 '';\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.selectedOptionsChanged.emit(this.selectedOptions);\n this.clearInput();\n }\n\n private clearInput(): void {\n this.inputValue = '';\n console.log(this.myControl);\n this.myControl.setValue(this.inputValue);\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.selectedOptionsChanged.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', {static: true}) inputBoxEl: ElementRef;\n @ViewChild('trigger', {static: true}) trigger: MatAutocompleteTrigger;\n /**\n * Ao ser selecionada uma opção nova, emite\n */\n @Output() selectedOptionsChanged = 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 /**\n * Opções que ja vem selecionadas\n */\n @Input() selectedOptions: MultiSelectOption[] = [];\n\n public readonly myControl: FormControl;\n public inputValue: string = '';\n public filteredOptions: Observable;\n\n constructor(\n private cdr: ChangeDetectorRef\n ) {\n this.myControl = new FormControl();\n console.log(this.myControl);\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 /**\n * Função utilizada para colocar texto na caixa de input ao selecionar uma opção\n * @param user\n */\n displayFn(option: MultiSelectOption): string {\n return '';\n // return option && option.label ? option.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.selectedOptionsChanged.emit(this.selectedOptions);\n this.clearInput();\n }\n\n private clearInput(): void {\n this.inputValue = '';\n this.myControl.setValue(this.inputValue);\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 this.trigger.openPanel();\n }\n\n public clearSelected(): void {\n this.selectedOptions = [];\n this.selectedOptionsChanged.emit(this.selectedOptions);\n this.clearInput();\n }\n\n public togglePanel(): void {\n if (this.trigger.panelOpen === false) {\n this.trigger.openPanel();\n } else {\n this.trigger.closePanel();\n }\n }\n\n}\n", "assetsDirs": [], "styleUrlsData": [ { @@ -4145,7 +4161,7 @@ "OnInit", "AfterViewInit" ], - "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 [required]=\"false\"\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 [required]=\"false\"\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", @@ -5818,13 +5834,13 @@ }, { "name": "MultiSelectModule", - "id": "module-MultiSelectModule-242098b4d203068abd5b84735636bc2ccb148423359d8f9dd05639dbc3be92d8c926f1d809290216c2311a0662f78c5cff069e6a83dc6f9c919c5e40f301c784", + "id": "module-MultiSelectModule-640ae1218eff07507b8791dbcf1189746bc8df1560047a6dbc672dc6b85d3de29ed9d4b85f40df85e70c51604ba861b99b8790aa35e8e0ef1259ce1d699210f1", "description": "", "deprecationMessage": "", "deprecated": false, "file": "src/components/inputs/multi-select/multi-select.module.ts", "methods": [], - "sourceCode": "import {NgModule} from '@angular/core';\nimport {MultiSelectComponent} from './multi-select.component';\nimport {FormsModule, ReactiveFormsModule} from '@angular/forms';\n\nimport {MatAutocompleteModule} from '@angular/material/autocomplete';\nimport {MatInputModule} from '@angular/material/input';\nimport {CommonModule} from '@angular/common';\nimport {BrowserAnimationsModule} from \"@angular/platform-browser/animations\";\nimport {BrowserModule} from \"@angular/platform-browser\";\n\n\n@NgModule({\n declarations: [\n MultiSelectComponent\n ],\n exports: [\n MultiSelectComponent\n ],\n imports: [\n CommonModule,\n BrowserAnimationsModule,\n BrowserModule,\n FormsModule,\n ReactiveFormsModule,\n MatAutocompleteModule,\n MatInputModule,\n ]\n})\nexport class MultiSelectModule {\n}\n", + "sourceCode": "import {NgModule} from '@angular/core';\nimport {MultiSelectComponent} from './multi-select.component';\nimport {FormsModule, ReactiveFormsModule} from '@angular/forms';\n\nimport {MatAutocompleteModule} from '@angular/material/autocomplete';\nimport {MatInputModule} from '@angular/material/input';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n declarations: [\n MultiSelectComponent\n ],\n exports: [\n MultiSelectComponent\n ],\n imports: [\n CommonModule,\n FormsModule,\n ReactiveFormsModule,\n MatAutocompleteModule,\n MatInputModule,\n ]\n})\nexport class MultiSelectModule {\n}\n", "children": [ { "type": "providers", @@ -6261,161 +6277,161 @@ "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/directives/ng-if-loaded/spinner/spinner.stories.ts", + "file": "src/components/cards/basic-card/basic-card.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n flag: true\n}" + "defaultValue": "{\n hoverable: false,\n borderRadius: Sizes.md,\n paddingClass: 'p-3'\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/copy-content-input/copy-content-input.stories.ts", + "file": "src/components/cards/icon-card/icon-card.stories.ts", "deprecated": false, "deprecationMessage": "", "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 textPosition: 'center',\n paddingClass: 'p-3',\n hoverable: true,\n orientation: OrientationEnum.Y,\n iconClass: 'uil uil-star',\n title: '',\n subtitle: '',\n iconCardArray: [],\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/dropdown-actions/dropdown-actions.stories.ts", + "file": "src/components/containers/expansion-panel/expansion-panel.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n actions: []\n}" + "defaultValue": "{\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/multi-select/multi-select.stories.ts", + "file": "src/components/containers/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n options: [],\n placeholder: '',\n borderRadius: Sizes.md,\n roundedThumbnail: true,\n limit: 0,\n selectedOptions: []\n}" + "defaultValue": "{\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/radio-button/radio-button.stories.ts", + "file": "src/components/inputs/button/button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n orientation: OrientationEnum.Y,\n values: [],\n disabled: false,\n selectedValue: 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": "src/components/navigation/stepper/stepper.stories.ts", + "file": "src/components/inputs/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{}" + "defaultValue": "{\n checked: false,\n disabled: false,\n selectedItem: undefined,\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/button/button.stories.ts", + "file": "src/components/inputs/combo-box/combo-box.stories.ts", "deprecated": false, "deprecationMessage": "", "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 items: [],\n disabled: false,\n selectedItem: undefined\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/checkbox/checkbox.stories.ts", + "file": "src/components/inputs/copy-content-input/copy-content-input.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n checked: false,\n disabled: false,\n selectedItem: undefined,\n}" + "defaultValue": "{\n disabled: false,\n text: '',\n copyCallback: undefined,\n fillHeight: false,\n btnColor: MainColors.primary,\n borderRadius: Sizes.md\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/combo-box/combo-box.stories.ts", + "file": "src/components/inputs/dropdown-actions/dropdown-actions.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n items: [],\n disabled: false,\n selectedItem: undefined\n}" + "defaultValue": "{\n actions: []\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/containers/expansion-panel/expansion-panel.stories.ts", + "file": "src/components/inputs/multi-select/multi-select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n}" + "defaultValue": "{\n options: [],\n placeholder: '',\n borderRadius: Sizes.md,\n roundedThumbnail: true,\n limit: 0,\n selectedOptions: []\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/containers/tabs/tabs.stories.ts", + "file": "src/components/inputs/radio-button/radio-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n}" + "defaultValue": "{\n orientation: OrientationEnum.Y,\n values: [],\n disabled: false,\n selectedValue: undefined\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/cards/basic-card/basic-card.stories.ts", + "file": "src/components/lists/draggable-list/draggable-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n hoverable: false,\n borderRadius: Sizes.md,\n paddingClass: 'p-3'\n}" + "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": "src/components/cards/icon-card/icon-card.stories.ts", + "file": "src/components/lists/grid-list/grid-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n textPosition: 'center',\n paddingClass: 'p-3',\n hoverable: true,\n orientation: OrientationEnum.Y,\n iconClass: 'uil uil-star',\n title: '',\n subtitle: '',\n iconCardArray: [],\n}" + "defaultValue": "{\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/lists/grid-list/grid-list.stories.ts", + "file": "src/components/lists/table-list/table-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n}" + "defaultValue": "{\n columns: [],\n columnNames: [],\n imageColumns: [],\n imageHeight: '50px',\n showHeader: true,\n numberFormat: '1.2-2',\n numberPrefix: '',\n actionsTemplate: undefined,\n itemList: undefined,\n borderRadius: undefined,\n backgroundColor: undefined,\n expandedDetailTemplate: undefined,\n disableExpandedOnDisabledRow: true,\n expandedRow: undefined\n}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/lists/table-list/table-list.stories.ts", + "file": "src/components/navigation/stepper/stepper.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n columns: [],\n columnNames: [],\n imageColumns: [],\n imageHeight: '50px',\n showHeader: true,\n numberFormat: '1.2-2',\n numberPrefix: '',\n actionsTemplate: undefined,\n itemList: undefined,\n borderRadius: undefined,\n backgroundColor: undefined,\n expandedDetailTemplate: undefined,\n disableExpandedOnDisabledRow: true,\n expandedRow: undefined\n}" + "defaultValue": "{}" }, { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/lists/draggable-list/draggable-list.stories.ts", + "file": "src/directives/ng-if-loaded/spinner/spinner.stories.ts", "deprecated": false, "deprecationMessage": "", "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}" + "defaultValue": "{\n flag: true\n}" }, { "name": "DefaultBasicCard", @@ -6860,61 +6876,41 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/directives/ng-if-loaded/spinner/spinner.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n
\n Conteúdo normal\n
\n `\n})" - }, - { - "name": "Template", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "src/components/inputs/copy-content-input/copy-content-input.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" - }, - { - "name": "Template", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "src/components/inputs/dropdown-actions/dropdown-actions.stories.ts", + "file": "src/components/cards/basic-card/basic-card.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/multi-select/multi-select.stories.ts", + "file": "src/components/cards/icon-card/icon-card.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/radio-button/radio-button.stories.ts", + "file": "src/components/containers/expansion-panel/expansion-panel.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n Conteúdo aqui\n \n `\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/navigation/stepper/stepper.stories.ts", + "file": "src/components/containers/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n

This is any content of \"Step 1\"

\n

This is any content of \"Step 2\"

\n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, { "name": "Template", @@ -6950,41 +6946,51 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/containers/expansion-panel/expansion-panel.stories.ts", + "file": "src/components/inputs/copy-content-input/copy-content-input.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n Conteúdo aqui\n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/containers/tabs/tabs.stories.ts", + "file": "src/components/inputs/dropdown-actions/dropdown-actions.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/cards/basic-card/basic-card.stories.ts", + "file": "src/components/inputs/multi-select/multi-select.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/cards/icon-card/icon-card.stories.ts", + "file": "src/components/inputs/radio-button/radio-button.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + }, + { + "name": "Template", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "src/components/lists/draggable-list/draggable-list.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" }, { "name": "Template", @@ -7010,11 +7016,21 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/lists/draggable-list/draggable-list.stories.ts", + "file": "src/components/navigation/stepper/stepper.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n

This is any content of \"Step 1\"

\n

This is any content of \"Step 2\"

\n \n `\n})" + }, + { + "name": "Template", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "src/directives/ng-if-loaded/spinner/spinner.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n
\n Conteúdo normal\n
\n `\n})" }, { "name": "ThumbnailMultiSelect", @@ -7775,22 +7791,22 @@ "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], - "src/directives/ng-if-loaded/spinner/spinner.stories.ts": [ + "src/components/cards/basic-card/basic-card.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/directives/ng-if-loaded/spinner/spinner.stories.ts", + "file": "src/components/cards/basic-card/basic-card.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n flag: true\n}" + "defaultValue": "{\n hoverable: false,\n borderRadius: Sizes.md,\n paddingClass: 'p-3'\n}" }, { - "name": "DefaultSpinner", + "name": "DefaultBasicCard", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/directives/ng-if-loaded/spinner/spinner.stories.ts", + "file": "src/components/cards/basic-card/basic-card.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", @@ -7800,29 +7816,29 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/directives/ng-if-loaded/spinner/spinner.stories.ts", + "file": "src/components/cards/basic-card/basic-card.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n
\n Conteúdo normal\n
\n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], - "src/components/inputs/copy-content-input/copy-content-input.stories.ts": [ + "src/components/containers/expansion-panel/expansion-panel.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/copy-content-input/copy-content-input.stories.ts", + "file": "src/components/containers/expansion-panel/expansion-panel.stories.ts", "deprecated": false, "deprecationMessage": "", "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}" }, { - "name": "DefaultCopyContentInput", + "name": "DefaultExpansionPanel", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/copy-content-input/copy-content-input.stories.ts", + "file": "src/components/containers/expansion-panel/expansion-panel.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", @@ -7832,29 +7848,29 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/copy-content-input/copy-content-input.stories.ts", + "file": "src/components/containers/expansion-panel/expansion-panel.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n Conteúdo aqui\n \n `\n})" } ], - "src/components/inputs/dropdown-actions/dropdown-actions.stories.ts": [ + "src/components/containers/tabs/tabs.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/dropdown-actions/dropdown-actions.stories.ts", + "file": "src/components/containers/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n actions: []\n}" + "defaultValue": "{\n}" }, { - "name": "DefaultDropdownActions", + "name": "DefaultTabs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/dropdown-actions/dropdown-actions.stories.ts", + "file": "src/components/containers/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", @@ -7864,39 +7880,39 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/dropdown-actions/dropdown-actions.stories.ts", + "file": "src/components/containers/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], - "src/components/inputs/multi-select/multi-select.stories.ts": [ + "src/components/inputs/checkbox/checkbox.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/multi-select/multi-select.stories.ts", + "file": "src/components/inputs/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n options: [],\n placeholder: '',\n borderRadius: Sizes.md,\n roundedThumbnail: true,\n limit: 0,\n selectedOptions: []\n}" + "defaultValue": "{\n checked: false,\n disabled: false,\n selectedItem: undefined,\n}" }, { - "name": "DefaultMultiSelect", + "name": "DefaultCheckbox", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/multi-select/multi-select.stories.ts", + "file": "src/components/inputs/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { - "name": "PreSelectedOptions", + "name": "DisabledCheckbox", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/multi-select/multi-select.stories.ts", + "file": "src/components/inputs/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", @@ -7906,81 +7922,71 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/multi-select/multi-select.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" - }, - { - "name": "ThumbnailMultiSelect", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "src/components/inputs/multi-select/multi-select.stories.ts", + "file": "src/components/inputs/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "", - "defaultValue": "Template.bind({})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n Checkbox\n \n `\n})" } ], - "src/components/inputs/radio-button/radio-button.stories.ts": [ + "src/components/inputs/combo-box/combo-box.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/radio-button/radio-button.stories.ts", + "file": "src/components/inputs/combo-box/combo-box.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n orientation: OrientationEnum.Y,\n values: [],\n disabled: false,\n selectedValue: undefined\n}" + "defaultValue": "{\n items: [],\n disabled: false,\n selectedItem: undefined\n}" }, { - "name": "DefaultRadioButton", + "name": "DefaultComboBox", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/radio-button/radio-button.stories.ts", + "file": "src/components/inputs/combo-box/combo-box.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { - "name": "HorizontalRadioButton", + "name": "defaultItems", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/radio-button/radio-button.stories.ts", + "file": "src/components/inputs/combo-box/combo-box.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "", - "defaultValue": "Template.bind({})" + "type": "[]", + "defaultValue": "[\n {\n label: 'Value 1',\n value: 1\n },\n {\n label: 'Value 2',\n value: 2\n },\n {\n label: 'Value 3',\n value: 3\n }\n]" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/radio-button/radio-button.stories.ts", + "file": "src/components/inputs/combo-box/combo-box.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], - "src/components/navigation/stepper/stepper.stories.ts": [ + "src/components/inputs/copy-content-input/copy-content-input.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/navigation/stepper/stepper.stories.ts", + "file": "src/components/inputs/copy-content-input/copy-content-input.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{}" + "defaultValue": "{\n disabled: false,\n text: '',\n copyCallback: undefined,\n fillHeight: false,\n btnColor: MainColors.primary,\n borderRadius: Sizes.md\n}" }, { - "name": "DefaultStepper", + "name": "DefaultCopyContentInput", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/navigation/stepper/stepper.stories.ts", + "file": "src/components/inputs/copy-content-input/copy-content-input.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", @@ -7990,39 +7996,29 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/navigation/stepper/stepper.stories.ts", + "file": "src/components/inputs/copy-content-input/copy-content-input.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n

This is any content of \"Step 1\"

\n

This is any content of \"Step 2\"

\n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], - "src/components/inputs/checkbox/checkbox.stories.ts": [ + "src/components/inputs/dropdown-actions/dropdown-actions.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/checkbox/checkbox.stories.ts", + "file": "src/components/inputs/dropdown-actions/dropdown-actions.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n checked: false,\n disabled: false,\n selectedItem: undefined,\n}" - }, - { - "name": "DefaultCheckbox", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "src/components/inputs/checkbox/checkbox.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "", - "defaultValue": "Template.bind({})" + "defaultValue": "{\n actions: []\n}" }, { - "name": "DisabledCheckbox", + "name": "DefaultDropdownActions", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/checkbox/checkbox.stories.ts", + "file": "src/components/inputs/dropdown-actions/dropdown-actions.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", @@ -8032,71 +8028,91 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/checkbox/checkbox.stories.ts", + "file": "src/components/inputs/dropdown-actions/dropdown-actions.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n Checkbox\n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], - "src/components/inputs/combo-box/combo-box.stories.ts": [ + "src/components/inputs/multi-select/multi-select.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/combo-box/combo-box.stories.ts", + "file": "src/components/inputs/multi-select/multi-select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n items: [],\n disabled: false,\n selectedItem: undefined\n}" + "defaultValue": "{\n options: [],\n placeholder: '',\n borderRadius: Sizes.md,\n roundedThumbnail: true,\n limit: 0,\n selectedOptions: []\n}" }, { - "name": "DefaultComboBox", + "name": "DefaultMultiSelect", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/combo-box/combo-box.stories.ts", + "file": "src/components/inputs/multi-select/multi-select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { - "name": "defaultItems", + "name": "PreSelectedOptions", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/combo-box/combo-box.stories.ts", + "file": "src/components/inputs/multi-select/multi-select.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "[]", - "defaultValue": "[\n {\n label: 'Value 1',\n value: 1\n },\n {\n label: 'Value 2',\n value: 2\n },\n {\n label: 'Value 3',\n value: 3\n }\n]" + "type": "", + "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/inputs/combo-box/combo-box.stories.ts", + "file": "src/components/inputs/multi-select/multi-select.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + }, + { + "name": "ThumbnailMultiSelect", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "src/components/inputs/multi-select/multi-select.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "", + "defaultValue": "Template.bind({})" } ], - "src/components/containers/expansion-panel/expansion-panel.stories.ts": [ + "src/components/inputs/radio-button/radio-button.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/containers/expansion-panel/expansion-panel.stories.ts", + "file": "src/components/inputs/radio-button/radio-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n}" + "defaultValue": "{\n orientation: OrientationEnum.Y,\n values: [],\n disabled: false,\n selectedValue: undefined\n}" }, { - "name": "DefaultExpansionPanel", + "name": "DefaultRadioButton", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/containers/expansion-panel/expansion-panel.stories.ts", + "file": "src/components/inputs/radio-button/radio-button.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "", + "defaultValue": "Template.bind({})" + }, + { + "name": "HorizontalRadioButton", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "src/components/inputs/radio-button/radio-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", @@ -8106,61 +8122,49 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/containers/expansion-panel/expansion-panel.stories.ts", + "file": "src/components/inputs/radio-button/radio-button.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n Conteúdo aqui\n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], - "src/components/containers/tabs/tabs.stories.ts": [ + "src/components/lists/draggable-list/draggable-list.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/containers/tabs/tabs.stories.ts", + "file": "src/components/lists/draggable-list/draggable-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "object", - "defaultValue": "{\n}" + "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": "DefaultTabs", + "name": "DefaultDraggableList", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/containers/tabs/tabs.stories.ts", + "file": "src/components/lists/draggable-list/draggable-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { - "name": "Template", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "src/components/containers/tabs/tabs.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" - } - ], - "src/components/cards/basic-card/basic-card.stories.ts": [ - { - "name": "defaultArgs", + "name": "DisabledDragging", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/cards/basic-card/basic-card.stories.ts", + "file": "src/components/lists/draggable-list/draggable-list.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "object", - "defaultValue": "{\n hoverable: false,\n borderRadius: Sizes.md,\n paddingClass: 'p-3'\n}" + "type": "", + "defaultValue": "Template.bind({})" }, { - "name": "DefaultBasicCard", + "name": "NoIndexStringList", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/cards/basic-card/basic-card.stories.ts", + "file": "src/components/lists/draggable-list/draggable-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", @@ -8170,11 +8174,11 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/cards/basic-card/basic-card.stories.ts", + "file": "src/components/lists/draggable-list/draggable-list.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], "src/components/lists/grid-list/grid-list.stories.ts": [ @@ -8219,42 +8223,54 @@ "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" } ], - "src/components/lists/draggable-list/draggable-list.stories.ts": [ + "src/components/navigation/stepper/stepper.stories.ts": [ { "name": "defaultArgs", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/lists/draggable-list/draggable-list.stories.ts", + "file": "src/components/navigation/stepper/stepper.stories.ts", "deprecated": false, "deprecationMessage": "", "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}" + "defaultValue": "{}" }, { - "name": "DefaultDraggableList", + "name": "DefaultStepper", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/lists/draggable-list/draggable-list.stories.ts", + "file": "src/components/navigation/stepper/stepper.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { - "name": "DisabledDragging", + "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/lists/draggable-list/draggable-list.stories.ts", + "file": "src/components/navigation/stepper/stepper.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "", - "defaultValue": "Template.bind({})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n \n

This is any content of \"Step 1\"

\n

This is any content of \"Step 2\"

\n \n `\n})" + } + ], + "src/directives/ng-if-loaded/spinner/spinner.stories.ts": [ + { + "name": "defaultArgs", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "src/directives/ng-if-loaded/spinner/spinner.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "object", + "defaultValue": "{\n flag: true\n}" }, { - "name": "NoIndexStringList", + "name": "DefaultSpinner", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/lists/draggable-list/draggable-list.stories.ts", + "file": "src/directives/ng-if-loaded/spinner/spinner.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", @@ -8264,11 +8280,11 @@ "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "src/components/lists/draggable-list/draggable-list.stories.ts", + "file": "src/directives/ng-if-loaded/spinner/spinner.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "Story", - "defaultValue": "(args) => ({\n props: args,\n template: `\n \n \n `\n})" + "type": "Story", + "defaultValue": "(args) => ({\n props: args,\n template: `\n
\n Conteúdo normal\n
\n `\n})" } ], "src/services/command-palette/command-palette.stories.ts": [ @@ -9184,9 +9200,9 @@ "type": "component", "linktype": "component", "name": "MultiSelectComponent", - "coveragePercent": 25, - "coverageCount": "6/24", - "status": "low" + "coveragePercent": 28, + "coverageCount": "7/25", + "status": "medium" }, { "filePath": "src/components/inputs/multi-select/multi-select.component.ts", diff --git a/package-lock.json b/package-lock.json index d294999..b986813 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@mprisma/components", - "version": "13.0.1", + "version": "13.0.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index aa5eaf7..3594aa8 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mprisma/components", - "version": "13.0.2", + "version": "13.0.3", "repository": { "type": "git", "url": "https://github.com/gabriel-gn/prisma-components.git" @@ -37,11 +37,11 @@ "@storybook/components": "^6.4.19", "@types/lodash": "^4.14.178", "angular2-hotkeys": "^13.1.0", + "autoprefixer": "^10.3.7", "bootstrap": "^5.1.3", "lodash": "^4.17.21", "ngx-cookie-service": "^13.1.2", "popper.js": "^1.16.1", - "autoprefixer": "^10.3.7", "postcss-flexbugs-fixes": "^5.0.2", "react": "^16.14.0", "react-dom": "^16.14.0", diff --git a/src/components/inputs/multi-select/multi-select.component.ts b/src/components/inputs/multi-select/multi-select.component.ts index 67f1ff0..2c86af5 100644 --- a/src/components/inputs/multi-select/multi-select.component.ts +++ b/src/components/inputs/multi-select/multi-select.component.ts @@ -66,13 +66,14 @@ export class MultiSelectComponent implements OnInit, AfterViewInit { */ @Input() selectedOptions: MultiSelectOption[] = []; - public myControl: FormControl = new FormControl(); + public readonly myControl: FormControl; public inputValue: string = ''; public filteredOptions: Observable; constructor( private cdr: ChangeDetectorRef ) { + this.myControl = new FormControl(); } ngOnInit(): void { @@ -87,9 +88,13 @@ export class MultiSelectComponent implements OnInit, AfterViewInit { this.clearInput(); } - displayFn(user: MultiSelectOption): string { + /** + * Função utilizada para colocar texto na caixa de input ao selecionar uma opção + * @param user + */ + displayFn(option: MultiSelectOption): string { return ''; - // return user && user.label ? user.label : ''; + // return option && option.label ? option.label : ''; } private _filter(label: string): MultiSelectOption[] { @@ -124,9 +129,10 @@ export class MultiSelectComponent implements OnInit, AfterViewInit { } public openSelect(): void { - setTimeout(() => { - try { this.inputBoxEl.nativeElement.focus(); } catch (e) {} - }, 0); + // setTimeout(() => { + // try { this.inputBoxEl.nativeElement.focus(); } catch (e) {} + // }, 0); + this.trigger.openPanel(); } public clearSelected(): void { diff --git a/src/components/inputs/multi-select/multi-select.module.ts b/src/components/inputs/multi-select/multi-select.module.ts index 39fba1d..a137d34 100644 --- a/src/components/inputs/multi-select/multi-select.module.ts +++ b/src/components/inputs/multi-select/multi-select.module.ts @@ -5,8 +5,6 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {MatInputModule} from '@angular/material/input'; import {CommonModule} from '@angular/common'; -import {BrowserModule} from "@angular/platform-browser"; - @NgModule({ declarations: [ @@ -17,7 +15,6 @@ import {BrowserModule} from "@angular/platform-browser"; ], imports: [ CommonModule, - BrowserModule, FormsModule, ReactiveFormsModule, MatAutocompleteModule, diff --git a/src/services/command-palette/dialog/dialog.component.html b/src/services/command-palette/dialog/dialog.component.html index ee62f19..b09dfbd 100644 --- a/src/services/command-palette/dialog/dialog.component.html +++ b/src/services/command-palette/dialog/dialog.component.html @@ -43,6 +43,7 @@ (keydown.arrowLeft)="$event.preventDefault(); goBackOneLevel()" (keydown.arrowRight)="$event.preventDefault(); paletteEntryAction(childEntry)" (keydown.enter)="$event.preventDefault(); paletteEntryAction(childEntry)" + (keydown.backspace)="$event.preventDefault(); focusSearchInput()" class="palette-result-entry" >

{{childEntry.label}}{{hasChildEntries(childEntry) ? '...' : ''}}

diff --git a/src/services/command-palette/dialog/dialog.component.ts b/src/services/command-palette/dialog/dialog.component.ts index da21bdc..eea9c74 100644 --- a/src/services/command-palette/dialog/dialog.component.ts +++ b/src/services/command-palette/dialog/dialog.component.ts @@ -71,7 +71,7 @@ export class DialogComponent implements AfterViewInit, OnDestroy { this.componentInjectorService.removeComponentFromBody(this.itself); } - private focusSearchInput(): void { + public focusSearchInput(): void { setTimeout(() => { this.currentFocusedElement = this.rootPanelComponent; this.rootPanelComponent.nativeElement.children[0].children[1].focus(); @@ -89,7 +89,7 @@ export class DialogComponent implements AfterViewInit, OnDestroy { if (focusNextIndex >= arrayResultEntryElements.length) { this.focusSearchInput(); } - else if (isNaN(focusNextIndex)) { + else if (!isNaN(focusNextIndex)) { this.currentFocusedElement = arrayResultEntryElements[focusNextIndex]; this.currentFocusedElement.nativeElement.focus(); } else { @@ -104,7 +104,7 @@ export class DialogComponent implements AfterViewInit, OnDestroy { if (focusPreviousIndex < 0) { this.focusSearchInput(); } - else if (isNaN(focusPreviousIndex)) { + else if (!isNaN(focusPreviousIndex)) { this.currentFocusedElement = arrayResultEntryElements[focusPreviousIndex]; this.currentFocusedElement.nativeElement.focus(); } else {