ngx-sp-infra 6.4.2 → 6.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngx-sp-infra.mjs +141 -146
- package/fesm2022/ngx-sp-infra.mjs.map +1 -1
- package/lib/widgets/search-input/models/IV6Menu.model.d.ts +7 -0
- package/lib/widgets/search-input/models/IV6Submenu.model.d.ts +7 -0
- package/lib/widgets/search-input/models/IV6Tela.model.d.ts +7 -0
- package/lib/widgets/search-input/search-input.component.d.ts +26 -11
- package/package.json +1 -1
- package/public-api.d.ts +3 -0
|
@@ -9605,74 +9605,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
9605
9605
|
type: Input
|
|
9606
9606
|
}] } });
|
|
9607
9607
|
|
|
9608
|
+
class LibSpinnerComponent {
|
|
9609
|
+
// #endregion PUBLIC
|
|
9610
|
+
// #endregion ==========> PROPERTIES <==========
|
|
9611
|
+
// #region ==========> INITIALIZATION <==========
|
|
9612
|
+
constructor() {
|
|
9613
|
+
this.sizeType = "class";
|
|
9614
|
+
// #endregion PROTECTED
|
|
9615
|
+
// #region PUBLIC
|
|
9616
|
+
/** Tipo do spinner
|
|
9617
|
+
* @default "border" */
|
|
9618
|
+
this.type = "border";
|
|
9619
|
+
/** Tamanho do spinner (Padrão ou pequeno)
|
|
9620
|
+
* @default "default" */
|
|
9621
|
+
this.size = "default";
|
|
9622
|
+
/** Texto de ajuda, será exibido no hover em cima do spinner
|
|
9623
|
+
* @default "Carregando informações..." */
|
|
9624
|
+
this.helperText = "Carregando informações...";
|
|
9625
|
+
}
|
|
9626
|
+
ngOnChanges(changes) {
|
|
9627
|
+
if (changes["size"]) {
|
|
9628
|
+
this.getSize();
|
|
9629
|
+
}
|
|
9630
|
+
}
|
|
9631
|
+
// #endregion ==========> INITIALIZATION <==========
|
|
9632
|
+
getSize() {
|
|
9633
|
+
if (this.size === "small") {
|
|
9634
|
+
this.sizeType = "class";
|
|
9635
|
+
this._size = `spinner-${this.type}-sm`;
|
|
9636
|
+
}
|
|
9637
|
+
else if (this.size === "default") {
|
|
9638
|
+
this.sizeType = "class";
|
|
9639
|
+
delete this._size;
|
|
9640
|
+
}
|
|
9641
|
+
else {
|
|
9642
|
+
this.sizeType = "custom";
|
|
9643
|
+
this._size = this.size;
|
|
9644
|
+
}
|
|
9645
|
+
}
|
|
9646
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9647
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LibSpinnerComponent, isStandalone: true, selector: "lib-spinner", inputs: { type: "type", theme: "theme", size: "size", helperText: "helperText" }, usesOnChanges: true, ngImport: i0, template: `
|
|
9648
|
+
@switch (sizeType) {
|
|
9649
|
+
@case ("class") {
|
|
9650
|
+
<div class="spinner-{{type}} {{theme ? 'text-'+theme : ''}} {{_size}}" role="status">
|
|
9651
|
+
<span class="visually-hidden">{{ helperText }}</span>
|
|
9652
|
+
</div>
|
|
9653
|
+
}
|
|
9654
|
+
@case ("custom") {
|
|
9655
|
+
<div class="spinner-{{type}} {{theme ? 'text-'+theme : ''}}" [style.height.px]="_size" [style.width.px]="_size" role="status">
|
|
9656
|
+
<span class="visually-hidden">{{ helperText }}</span>
|
|
9657
|
+
</div>
|
|
9658
|
+
}
|
|
9659
|
+
}
|
|
9660
|
+
`, isInline: true, styles: [""] }); }
|
|
9661
|
+
}
|
|
9662
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibSpinnerComponent, decorators: [{
|
|
9663
|
+
type: Component,
|
|
9664
|
+
args: [{ selector: 'lib-spinner', template: `
|
|
9665
|
+
@switch (sizeType) {
|
|
9666
|
+
@case ("class") {
|
|
9667
|
+
<div class="spinner-{{type}} {{theme ? 'text-'+theme : ''}} {{_size}}" role="status">
|
|
9668
|
+
<span class="visually-hidden">{{ helperText }}</span>
|
|
9669
|
+
</div>
|
|
9670
|
+
}
|
|
9671
|
+
@case ("custom") {
|
|
9672
|
+
<div class="spinner-{{type}} {{theme ? 'text-'+theme : ''}}" [style.height.px]="_size" [style.width.px]="_size" role="status">
|
|
9673
|
+
<span class="visually-hidden">{{ helperText }}</span>
|
|
9674
|
+
</div>
|
|
9675
|
+
}
|
|
9676
|
+
}
|
|
9677
|
+
`, standalone: true }]
|
|
9678
|
+
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
9679
|
+
type: Input
|
|
9680
|
+
}], theme: [{
|
|
9681
|
+
type: Input
|
|
9682
|
+
}], size: [{
|
|
9683
|
+
type: Input
|
|
9684
|
+
}], helperText: [{
|
|
9685
|
+
type: Input
|
|
9686
|
+
}] } });
|
|
9687
|
+
|
|
9608
9688
|
class SearchInputComponent {
|
|
9689
|
+
get items() { return this._items; }
|
|
9690
|
+
set items(value) {
|
|
9691
|
+
this._items = value;
|
|
9692
|
+
this.filteredItems = [...this._items ?? []];
|
|
9693
|
+
}
|
|
9694
|
+
get menus() { return this._menus; }
|
|
9695
|
+
set menus(value) {
|
|
9696
|
+
this._menus = value;
|
|
9697
|
+
this.filteredMenus = [...this._menus ?? []];
|
|
9698
|
+
}
|
|
9699
|
+
get submenus() { return this._submenus; }
|
|
9700
|
+
set submenus(value) {
|
|
9701
|
+
this._submenus = value;
|
|
9702
|
+
this.filteredSubmenus = [...this._submenus ?? []];
|
|
9703
|
+
}
|
|
9704
|
+
get telas() { return this._telas; }
|
|
9705
|
+
set telas(value) {
|
|
9706
|
+
this._telas = value;
|
|
9707
|
+
this.filteredTelas = [...this._telas ?? []];
|
|
9708
|
+
}
|
|
9709
|
+
// #endregion GETTERS & SETTERS
|
|
9609
9710
|
// #endregion PUBLIC
|
|
9610
9711
|
// #endregion ==========> PROPERTIES <==========
|
|
9611
|
-
constructor(
|
|
9612
|
-
this._http = _http;
|
|
9712
|
+
constructor(_router) {
|
|
9613
9713
|
this._router = _router;
|
|
9614
|
-
|
|
9615
|
-
|
|
9616
|
-
this.
|
|
9714
|
+
this._menus = [];
|
|
9715
|
+
this._submenus = [];
|
|
9716
|
+
this._telas = [];
|
|
9717
|
+
// #endregion PRIVATE
|
|
9718
|
+
// #region PUBLIC
|
|
9617
9719
|
this.showIcons = false;
|
|
9618
9720
|
this.onClose = new EventEmitter();
|
|
9619
|
-
this.
|
|
9721
|
+
this.onSearch = new EventEmitter();
|
|
9620
9722
|
this.searchQuery = '';
|
|
9621
|
-
this.
|
|
9723
|
+
this.loading = false;
|
|
9622
9724
|
}
|
|
9623
9725
|
ngOnInit() {
|
|
9624
|
-
|
|
9726
|
+
//
|
|
9625
9727
|
}
|
|
9626
9728
|
ngAfterViewInit() {
|
|
9627
|
-
|
|
9628
|
-
this.focusInput();
|
|
9729
|
+
this.focusInput();
|
|
9629
9730
|
}
|
|
9630
9731
|
// #region ==========> UTILS <==========
|
|
9631
|
-
loadRoutes() {
|
|
9632
|
-
if (!this.customItems) {
|
|
9633
|
-
this._http.get('assets\/jsons\/routes.json').subscribe(data => {
|
|
9634
|
-
this._items = data;
|
|
9635
|
-
this.filteredItems = [...this._items];
|
|
9636
|
-
}, error => console.error('Erro ao buscar as rotas.:', error));
|
|
9637
|
-
}
|
|
9638
|
-
else {
|
|
9639
|
-
this._items = this.customItems;
|
|
9640
|
-
}
|
|
9641
|
-
}
|
|
9642
9732
|
onKeydown(event) {
|
|
9643
|
-
if (event.
|
|
9644
|
-
|
|
9645
|
-
this.isVisible = !this.isVisible;
|
|
9646
|
-
if (this.isVisible)
|
|
9647
|
-
setTimeout(() => this.focusInput(), 0);
|
|
9648
|
-
else
|
|
9649
|
-
this.resetSearch();
|
|
9650
|
-
}
|
|
9651
|
-
else if (this.isVisible && event.key === 'Enter') {
|
|
9652
|
-
event.preventDefault();
|
|
9653
|
-
if (this.filteredItems.length > 0)
|
|
9654
|
-
this.navigateTo(this.filteredItems[0].route);
|
|
9655
|
-
}
|
|
9656
|
-
else if (event.key === 'Escape') {
|
|
9657
|
-
this.closeSearch();
|
|
9733
|
+
if (event.key === 'Escape') {
|
|
9734
|
+
this.close();
|
|
9658
9735
|
}
|
|
9659
9736
|
}
|
|
9660
9737
|
navigateTo(route) {
|
|
9661
|
-
this._router.navigate([route]);
|
|
9662
|
-
|
|
9738
|
+
this._router.navigate([route]).then(() => this.close());
|
|
9739
|
+
}
|
|
9740
|
+
redirect(item) {
|
|
9741
|
+
if (item.RotaV6 && item.RotaV6 !== '') {
|
|
9742
|
+
this._router.navigate([item.RotaV6]).then(() => this.close());
|
|
9743
|
+
}
|
|
9744
|
+
else {
|
|
9745
|
+
const hostname = window.location.host.includes("localhost") ? "siscandesv6.sispro.com.br" : window.location.host;
|
|
9746
|
+
const baseURL = `https://${hostname}/SisproErpCloud`;
|
|
9747
|
+
// Se a RotaOS começar com '/', não adiciona outra '/'
|
|
9748
|
+
const targetRoute = `${baseURL}${item.RotaOS[0] === '/' ? '' : '/'}${item.RotaOS}`;
|
|
9749
|
+
window.location.replace(targetRoute);
|
|
9750
|
+
}
|
|
9663
9751
|
}
|
|
9664
9752
|
highlightList(pesquisa) {
|
|
9665
|
-
|
|
9666
|
-
// se pesquisa for vazia, remove highlights
|
|
9667
|
-
// if (!pesquisa.trim()) {
|
|
9668
|
-
// list?.forEach(li => {
|
|
9669
|
-
// const span = li.querySelector('span.tela') as HTMLElement | null;
|
|
9670
|
-
// const target = span ?? (li as HTMLElement);
|
|
9671
|
-
// // restaura apenas o texto bruto (remove marcações de highlight)
|
|
9672
|
-
// target.innerHTML = target.textContent ?? '';
|
|
9673
|
-
// });
|
|
9674
|
-
// return;
|
|
9675
|
-
// }
|
|
9753
|
+
const list = document.querySelector('.options-list')?.querySelectorAll('li');
|
|
9676
9754
|
const regex = new RegExp(escapeRegExp(pesquisa), 'ig');
|
|
9677
9755
|
list?.forEach((li) => {
|
|
9678
9756
|
const span = li.querySelector('span.tela');
|
|
@@ -9684,43 +9762,40 @@ class SearchInputComponent {
|
|
|
9684
9762
|
});
|
|
9685
9763
|
}
|
|
9686
9764
|
// #region PESQUISA
|
|
9687
|
-
|
|
9688
|
-
this.isVisible = false;
|
|
9765
|
+
close() {
|
|
9689
9766
|
this.onClose.emit();
|
|
9690
9767
|
this.resetSearch();
|
|
9691
9768
|
}
|
|
9692
|
-
|
|
9693
|
-
|
|
9694
|
-
|
|
9695
|
-
|
|
9696
|
-
else {
|
|
9697
|
-
this.filteredItems = [...this._items];
|
|
9698
|
-
}
|
|
9769
|
+
search() {
|
|
9770
|
+
// TODO: Implementar o highlight mesmo com o filtro externo
|
|
9771
|
+
// this.highlightList(this.searchQuery.trim());
|
|
9772
|
+
this.onSearch.emit(this.searchQuery.trim());
|
|
9699
9773
|
}
|
|
9700
9774
|
resetSearch() {
|
|
9701
9775
|
this.searchQuery = '';
|
|
9702
|
-
this.
|
|
9776
|
+
this.onSearch.emit('');
|
|
9703
9777
|
}
|
|
9704
9778
|
focusInput() {
|
|
9705
9779
|
if (this.searchInput)
|
|
9706
9780
|
this.searchInput.nativeElement.focus();
|
|
9707
9781
|
}
|
|
9708
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchInputComponent, deps: [{ token: i1$
|
|
9709
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SearchInputComponent, isStandalone: true, selector: "lib-search-input, lib-pesquisa-global", inputs: {
|
|
9782
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchInputComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9783
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SearchInputComponent, isStandalone: true, selector: "lib-search-input, lib-pesquisa-global", inputs: { showIcons: "showIcons" }, outputs: { onClose: "onClose", onSearch: "onSearch" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"search-overlay position-fixed w-100 h-100 d-flex flex-column align-items-center pt-3\">\n <div class=\"search-wrapper d-flex flex-column align-items-center w-100\" style=\"--max-width: 800px\">\n <div class=\"search-container w-100 bg-light d-flex flex-column align-items-start p-3 rounded\">\n <h6>\n <p class=\"fw-bold mb-0\"> Pesquisa global de telas entre os produtos adquiridos </p>\n <span class=\"text-muted fw-bold fst-italic\" style=\"font-size: 12px;\">(para fechar clique no bot\u00E3o ao lado ou aperte ESC)</span>\n </h6>\n\n <div class=\"input-group\">\n <span class=\"input-group-text\" id=\"addon-wrapping\"> <lib-icon iconName=\"p-lupa\" iconSize=\"medium-small\" /> </span>\n <input #searchInput type=\"text\" class=\"form-control\" [(ngModel)]=\"searchQuery\" placeholder=\"Pesquise pelo nome da tela\"\n (input)=\"search()\" />\n <button (click)=\"resetSearch()\" class=\"btn btn-outline-primary\" tooltip=\"Limpar\" > <lib-icon iconName=\"p-lixeira\" iconSize=\"medium-small\" /> </button>\n <button (click)=\"close()\" class=\"btn btn-outline-primary\" tooltip=\"Fechar\" > <lib-icon iconName=\"p-fechar\" iconSize=\"medium-small\" /> </button>\n </div>\n </div>\n\n <div class=\"search-results bg-light p-3 rounded mt-3 w-100\"\n [class]=\"(!filteredMenus || !filteredSubmenus || !filteredTelas) ? 'text-center' : ''\" >\n\n @defer (when filteredMenus || filteredSubmenus || filteredTelas) {\n <div class=\"scrollable-content d-flex flex-column gap-4 overflow-y-auto rounded\" style=\"--max-scrollable-height: 650px\">\n\n <div id=\"menus\">\n <h6 class=\"fw-bold\">Menus</h6>\n <ul class=\"options-list d-flex flex-column gap-2 p-0 m-0\">\n @for (menu of filteredMenus; track menu.Projeto+menu.Titulo) {\n <li (click)=\"redirect(menu)\" class=\"glb-cursor-pointer option py-1 px-2 rounded border d-flex align-items-center gap-2\">\n @if (menu.ProjetoIcone) { <lib-icon class=\"text-primary\" [iconName]=\"menu.ProjetoIcone\" iconSize=\"medium-small\" /> }\n <span class=\"fw-bold text-primary\"> {{ menu.Projeto }} </span>\n\n <span class=\"fw-bold\">\n / {{ menu.Titulo }}\n </span>\n </li>\n }\n @empty {\n <li class=\"list-group-item\"> Nenhum menu encontrado com este nome </li>\n }\n </ul>\n </div>\n\n <div id=\"submenus\">\n <h6 class=\"fw-bold\">Submenus</h6>\n <ul class=\"options-list d-flex flex-column gap-2 p-0 m-0\">\n @for (submenu of filteredSubmenus; track submenu.Projeto+submenu.Titulo) {\n <li (click)=\"redirect(submenu)\" class=\"glb-cursor-pointer option py-1 px-2 rounded border d-flex align-items-center gap-2\">\n @if (submenu.ProjetoIcone) { <lib-icon class=\"text-primary\" [iconName]=\"submenu.ProjetoIcone\" iconSize=\"medium-small\" /> }\n <span class=\"fw-bold text-primary\"> {{ submenu.Projeto }} </span>\n\n <span class=\"fw-bold\">\n / {{ submenu.Titulo }}\n </span>\n </li>\n }\n @empty {\n <li class=\"list-group-item\"> Nenhum submenu encontrado com este nome </li>\n }\n </ul>\n </div>\n\n <div id=\"telas\">\n <h6 class=\"fw-bold\">Telas</h6>\n <ul class=\"options-list d-flex flex-column gap-2 p-0 m-0\">\n @for (tela of filteredTelas; track tela.Projeto+tela.Titulo) {\n <li (click)=\"redirect(tela)\" class=\"glb-cursor-pointer option py-1 px-2 rounded border d-flex align-items-center gap-2\">\n @if (tela.ProjetoIcone) { <lib-icon class=\"text-primary\" [iconName]=\"tela.ProjetoIcone\" iconSize=\"medium-small\" /> }\n <span class=\"fw-bold text-primary\"> {{ tela.Projeto }} </span>\n\n <span class=\"fw-bold\">\n / {{ tela.Titulo }}\n </span>\n </li>\n }\n @empty {\n <li class=\"list-group-item\"> Nenhuma tela encontrada com este nome </li>\n }\n </ul>\n </div>\n\n\n <!-- TELAS DEPRECIADA -->\n <!-- <div id=\"telas\">\n <h6 class=\"fw-bold\">Telas</h6>\n <ul class=\"options-list d-flex flex-column gap-2 p-0 m-0\">\n @for (item of filteredItems; track item.modulo+item.label) {\n <li (click)=\"navigateTo(item.route)\" class=\"glb-cursor-pointer option py-1 px-2 rounded border d-flex align-items-center gap-2\">\n @if (item.icon) { <lib-icon class=\"text-primary\" [iconName]=\"item.icon\" iconSize=\"medium-small\" /> }\n <span class=\"fw-bold text-primary\"> {{ item.modulo ? item.modulo : '' }} </span>\n\n @if (item.menu) {\n <span class=\"fw-bold text-primary menu\">\n / @if (showIcons) { <lib-icon iconName=\"p-menu-hamburguer\" iconSize=\"small\" /> } {{ item.menu }}\n </span>\n }\n\n @if (item.submenu) {\n <span class=\"fw-bold text-primary submenu\">\n / @if (showIcons) { <lib-icon iconName=\"p-link\" iconSize=\"small\" /> } {{ item.submenu }}\n </span>\n }\n\n <span class=\"tela\"> {{ item.label }} </span>\n </li>\n }\n @empty {\n <li class=\"list-group-item\"> Nenhuma tela encontrada com este nome </li>\n }\n </ul>\n </div> -->\n\n </div>\n }\n @placeholder {\n <lib-spinner />\n }\n\n </div>\n </div>\n</div>\n", styles: [".search-overlay{top:0;left:0;background-color:#00000080;z-index:9999}.search-overlay .search-wrapper{max-width:var(--max-width)}.search-overlay .search-wrapper .search-container{box-shadow:0 4px 8px #0003}.search-overlay .search-wrapper .search-results{box-shadow:0 4px 8px #0003;max-width:var(--max-width)}.search-overlay .search-wrapper .search-results .scrollable-content{max-height:var(--max-scrollable-height)}.search-overlay .search-wrapper .search-results .scrollable-content::-webkit-scrollbar{width:4px;background:transparent}.search-overlay .search-wrapper .search-results .scrollable-content::-webkit-scrollbar-thumb{background-color:#636363;border-radius:16px}.search-overlay .search-wrapper .search-results .scrollable-content .options-list{list-style-type:none}.search-overlay .search-wrapper .search-results .scrollable-content .options-list .option{transition:all .2s ease}.search-overlay .search-wrapper .search-results .scrollable-content .options-list .option:hover{background-color:#e5e5e5}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibIconsComponent, selector: "lib-icon", inputs: ["iconName", "iconColor", "iconSize", "iconFill"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$4.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: LibSpinnerComponent, selector: "lib-spinner", inputs: ["type", "theme", "size", "helperText"] }], deferBlockDependencies: [() => [LibIconsComponent]] }); }
|
|
9710
9784
|
}
|
|
9711
9785
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchInputComponent, decorators: [{
|
|
9712
9786
|
type: Component,
|
|
9713
9787
|
args: [{ selector: 'lib-search-input, lib-pesquisa-global', imports: [
|
|
9714
9788
|
FormsModule,
|
|
9715
9789
|
LibIconsComponent,
|
|
9716
|
-
TooltipModule
|
|
9717
|
-
|
|
9718
|
-
|
|
9719
|
-
|
|
9720
|
-
}], showIcons: [{
|
|
9790
|
+
TooltipModule,
|
|
9791
|
+
LibSpinnerComponent
|
|
9792
|
+
], template: "<div class=\"search-overlay position-fixed w-100 h-100 d-flex flex-column align-items-center pt-3\">\n <div class=\"search-wrapper d-flex flex-column align-items-center w-100\" style=\"--max-width: 800px\">\n <div class=\"search-container w-100 bg-light d-flex flex-column align-items-start p-3 rounded\">\n <h6>\n <p class=\"fw-bold mb-0\"> Pesquisa global de telas entre os produtos adquiridos </p>\n <span class=\"text-muted fw-bold fst-italic\" style=\"font-size: 12px;\">(para fechar clique no bot\u00E3o ao lado ou aperte ESC)</span>\n </h6>\n\n <div class=\"input-group\">\n <span class=\"input-group-text\" id=\"addon-wrapping\"> <lib-icon iconName=\"p-lupa\" iconSize=\"medium-small\" /> </span>\n <input #searchInput type=\"text\" class=\"form-control\" [(ngModel)]=\"searchQuery\" placeholder=\"Pesquise pelo nome da tela\"\n (input)=\"search()\" />\n <button (click)=\"resetSearch()\" class=\"btn btn-outline-primary\" tooltip=\"Limpar\" > <lib-icon iconName=\"p-lixeira\" iconSize=\"medium-small\" /> </button>\n <button (click)=\"close()\" class=\"btn btn-outline-primary\" tooltip=\"Fechar\" > <lib-icon iconName=\"p-fechar\" iconSize=\"medium-small\" /> </button>\n </div>\n </div>\n\n <div class=\"search-results bg-light p-3 rounded mt-3 w-100\"\n [class]=\"(!filteredMenus || !filteredSubmenus || !filteredTelas) ? 'text-center' : ''\" >\n\n @defer (when filteredMenus || filteredSubmenus || filteredTelas) {\n <div class=\"scrollable-content d-flex flex-column gap-4 overflow-y-auto rounded\" style=\"--max-scrollable-height: 650px\">\n\n <div id=\"menus\">\n <h6 class=\"fw-bold\">Menus</h6>\n <ul class=\"options-list d-flex flex-column gap-2 p-0 m-0\">\n @for (menu of filteredMenus; track menu.Projeto+menu.Titulo) {\n <li (click)=\"redirect(menu)\" class=\"glb-cursor-pointer option py-1 px-2 rounded border d-flex align-items-center gap-2\">\n @if (menu.ProjetoIcone) { <lib-icon class=\"text-primary\" [iconName]=\"menu.ProjetoIcone\" iconSize=\"medium-small\" /> }\n <span class=\"fw-bold text-primary\"> {{ menu.Projeto }} </span>\n\n <span class=\"fw-bold\">\n / {{ menu.Titulo }}\n </span>\n </li>\n }\n @empty {\n <li class=\"list-group-item\"> Nenhum menu encontrado com este nome </li>\n }\n </ul>\n </div>\n\n <div id=\"submenus\">\n <h6 class=\"fw-bold\">Submenus</h6>\n <ul class=\"options-list d-flex flex-column gap-2 p-0 m-0\">\n @for (submenu of filteredSubmenus; track submenu.Projeto+submenu.Titulo) {\n <li (click)=\"redirect(submenu)\" class=\"glb-cursor-pointer option py-1 px-2 rounded border d-flex align-items-center gap-2\">\n @if (submenu.ProjetoIcone) { <lib-icon class=\"text-primary\" [iconName]=\"submenu.ProjetoIcone\" iconSize=\"medium-small\" /> }\n <span class=\"fw-bold text-primary\"> {{ submenu.Projeto }} </span>\n\n <span class=\"fw-bold\">\n / {{ submenu.Titulo }}\n </span>\n </li>\n }\n @empty {\n <li class=\"list-group-item\"> Nenhum submenu encontrado com este nome </li>\n }\n </ul>\n </div>\n\n <div id=\"telas\">\n <h6 class=\"fw-bold\">Telas</h6>\n <ul class=\"options-list d-flex flex-column gap-2 p-0 m-0\">\n @for (tela of filteredTelas; track tela.Projeto+tela.Titulo) {\n <li (click)=\"redirect(tela)\" class=\"glb-cursor-pointer option py-1 px-2 rounded border d-flex align-items-center gap-2\">\n @if (tela.ProjetoIcone) { <lib-icon class=\"text-primary\" [iconName]=\"tela.ProjetoIcone\" iconSize=\"medium-small\" /> }\n <span class=\"fw-bold text-primary\"> {{ tela.Projeto }} </span>\n\n <span class=\"fw-bold\">\n / {{ tela.Titulo }}\n </span>\n </li>\n }\n @empty {\n <li class=\"list-group-item\"> Nenhuma tela encontrada com este nome </li>\n }\n </ul>\n </div>\n\n\n <!-- TELAS DEPRECIADA -->\n <!-- <div id=\"telas\">\n <h6 class=\"fw-bold\">Telas</h6>\n <ul class=\"options-list d-flex flex-column gap-2 p-0 m-0\">\n @for (item of filteredItems; track item.modulo+item.label) {\n <li (click)=\"navigateTo(item.route)\" class=\"glb-cursor-pointer option py-1 px-2 rounded border d-flex align-items-center gap-2\">\n @if (item.icon) { <lib-icon class=\"text-primary\" [iconName]=\"item.icon\" iconSize=\"medium-small\" /> }\n <span class=\"fw-bold text-primary\"> {{ item.modulo ? item.modulo : '' }} </span>\n\n @if (item.menu) {\n <span class=\"fw-bold text-primary menu\">\n / @if (showIcons) { <lib-icon iconName=\"p-menu-hamburguer\" iconSize=\"small\" /> } {{ item.menu }}\n </span>\n }\n\n @if (item.submenu) {\n <span class=\"fw-bold text-primary submenu\">\n / @if (showIcons) { <lib-icon iconName=\"p-link\" iconSize=\"small\" /> } {{ item.submenu }}\n </span>\n }\n\n <span class=\"tela\"> {{ item.label }} </span>\n </li>\n }\n @empty {\n <li class=\"list-group-item\"> Nenhuma tela encontrada com este nome </li>\n }\n </ul>\n </div> -->\n\n </div>\n }\n @placeholder {\n <lib-spinner />\n }\n\n </div>\n </div>\n</div>\n", styles: [".search-overlay{top:0;left:0;background-color:#00000080;z-index:9999}.search-overlay .search-wrapper{max-width:var(--max-width)}.search-overlay .search-wrapper .search-container{box-shadow:0 4px 8px #0003}.search-overlay .search-wrapper .search-results{box-shadow:0 4px 8px #0003;max-width:var(--max-width)}.search-overlay .search-wrapper .search-results .scrollable-content{max-height:var(--max-scrollable-height)}.search-overlay .search-wrapper .search-results .scrollable-content::-webkit-scrollbar{width:4px;background:transparent}.search-overlay .search-wrapper .search-results .scrollable-content::-webkit-scrollbar-thumb{background-color:#636363;border-radius:16px}.search-overlay .search-wrapper .search-results .scrollable-content .options-list{list-style-type:none}.search-overlay .search-wrapper .search-results .scrollable-content .options-list .option{transition:all .2s ease}.search-overlay .search-wrapper .search-results .scrollable-content .options-list .option:hover{background-color:#e5e5e5}\n"] }]
|
|
9793
|
+
}], ctorParameters: () => [{ type: i1$3.Router }], propDecorators: { showIcons: [{
|
|
9721
9794
|
type: Input
|
|
9722
9795
|
}], onClose: [{
|
|
9723
9796
|
type: Output
|
|
9797
|
+
}], onSearch: [{
|
|
9798
|
+
type: Output
|
|
9724
9799
|
}], searchInput: [{
|
|
9725
9800
|
type: ViewChild,
|
|
9726
9801
|
args: ['searchInput']
|
|
@@ -9801,86 +9876,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
9801
9876
|
type: Input
|
|
9802
9877
|
}] } });
|
|
9803
9878
|
|
|
9804
|
-
class LibSpinnerComponent {
|
|
9805
|
-
// #endregion PUBLIC
|
|
9806
|
-
// #endregion ==========> PROPERTIES <==========
|
|
9807
|
-
// #region ==========> INITIALIZATION <==========
|
|
9808
|
-
constructor() {
|
|
9809
|
-
this.sizeType = "class";
|
|
9810
|
-
// #endregion PROTECTED
|
|
9811
|
-
// #region PUBLIC
|
|
9812
|
-
/** Tipo do spinner
|
|
9813
|
-
* @default "border" */
|
|
9814
|
-
this.type = "border";
|
|
9815
|
-
/** Tamanho do spinner (Padrão ou pequeno)
|
|
9816
|
-
* @default "default" */
|
|
9817
|
-
this.size = "default";
|
|
9818
|
-
/** Texto de ajuda, será exibido no hover em cima do spinner
|
|
9819
|
-
* @default "Carregando informações..." */
|
|
9820
|
-
this.helperText = "Carregando informações...";
|
|
9821
|
-
}
|
|
9822
|
-
ngOnChanges(changes) {
|
|
9823
|
-
if (changes["size"]) {
|
|
9824
|
-
this.getSize();
|
|
9825
|
-
}
|
|
9826
|
-
}
|
|
9827
|
-
// #endregion ==========> INITIALIZATION <==========
|
|
9828
|
-
getSize() {
|
|
9829
|
-
if (this.size === "small") {
|
|
9830
|
-
this.sizeType = "class";
|
|
9831
|
-
this._size = `spinner-${this.type}-sm`;
|
|
9832
|
-
}
|
|
9833
|
-
else if (this.size === "default") {
|
|
9834
|
-
this.sizeType = "class";
|
|
9835
|
-
delete this._size;
|
|
9836
|
-
}
|
|
9837
|
-
else {
|
|
9838
|
-
this.sizeType = "custom";
|
|
9839
|
-
this._size = this.size;
|
|
9840
|
-
}
|
|
9841
|
-
}
|
|
9842
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9843
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LibSpinnerComponent, isStandalone: true, selector: "lib-spinner", inputs: { type: "type", theme: "theme", size: "size", helperText: "helperText" }, usesOnChanges: true, ngImport: i0, template: `
|
|
9844
|
-
@switch (sizeType) {
|
|
9845
|
-
@case ("class") {
|
|
9846
|
-
<div class="spinner-{{type}} {{theme ? 'text-'+theme : ''}} {{_size}}" role="status">
|
|
9847
|
-
<span class="visually-hidden">{{ helperText }}</span>
|
|
9848
|
-
</div>
|
|
9849
|
-
}
|
|
9850
|
-
@case ("custom") {
|
|
9851
|
-
<div class="spinner-{{type}} {{theme ? 'text-'+theme : ''}}" [style.height.px]="_size" [style.width.px]="_size" role="status">
|
|
9852
|
-
<span class="visually-hidden">{{ helperText }}</span>
|
|
9853
|
-
</div>
|
|
9854
|
-
}
|
|
9855
|
-
}
|
|
9856
|
-
`, isInline: true, styles: [""] }); }
|
|
9857
|
-
}
|
|
9858
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibSpinnerComponent, decorators: [{
|
|
9859
|
-
type: Component,
|
|
9860
|
-
args: [{ selector: 'lib-spinner', template: `
|
|
9861
|
-
@switch (sizeType) {
|
|
9862
|
-
@case ("class") {
|
|
9863
|
-
<div class="spinner-{{type}} {{theme ? 'text-'+theme : ''}} {{_size}}" role="status">
|
|
9864
|
-
<span class="visually-hidden">{{ helperText }}</span>
|
|
9865
|
-
</div>
|
|
9866
|
-
}
|
|
9867
|
-
@case ("custom") {
|
|
9868
|
-
<div class="spinner-{{type}} {{theme ? 'text-'+theme : ''}}" [style.height.px]="_size" [style.width.px]="_size" role="status">
|
|
9869
|
-
<span class="visually-hidden">{{ helperText }}</span>
|
|
9870
|
-
</div>
|
|
9871
|
-
}
|
|
9872
|
-
}
|
|
9873
|
-
`, standalone: true }]
|
|
9874
|
-
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
9875
|
-
type: Input
|
|
9876
|
-
}], theme: [{
|
|
9877
|
-
type: Input
|
|
9878
|
-
}], size: [{
|
|
9879
|
-
type: Input
|
|
9880
|
-
}], helperText: [{
|
|
9881
|
-
type: Input
|
|
9882
|
-
}] } });
|
|
9883
|
-
|
|
9884
9879
|
class SearchTreePipe {
|
|
9885
9880
|
transform(items, search) {
|
|
9886
9881
|
return items.filter(node => node.label.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
|