ngx-sp-infra 6.4.2 → 6.4.3
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.
|
@@ -9605,74 +9605,126 @@ 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
|
+
}
|
|
9609
9694
|
// #endregion PUBLIC
|
|
9610
9695
|
// #endregion ==========> PROPERTIES <==========
|
|
9611
|
-
constructor(
|
|
9612
|
-
this._http = _http;
|
|
9696
|
+
constructor(_router) {
|
|
9613
9697
|
this._router = _router;
|
|
9614
|
-
// #
|
|
9615
|
-
// #region
|
|
9616
|
-
this._items = [];
|
|
9698
|
+
// #endregion PRIVATE
|
|
9699
|
+
// #region PUBLIC
|
|
9617
9700
|
this.showIcons = false;
|
|
9618
9701
|
this.onClose = new EventEmitter();
|
|
9619
|
-
this.
|
|
9702
|
+
this.onSearch = new EventEmitter();
|
|
9620
9703
|
this.searchQuery = '';
|
|
9621
|
-
this.filteredItems = [...this._items];
|
|
9622
9704
|
}
|
|
9623
9705
|
ngOnInit() {
|
|
9624
|
-
|
|
9706
|
+
//
|
|
9625
9707
|
}
|
|
9626
9708
|
ngAfterViewInit() {
|
|
9627
|
-
|
|
9628
|
-
this.focusInput();
|
|
9709
|
+
this.focusInput();
|
|
9629
9710
|
}
|
|
9630
9711
|
// #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
9712
|
onKeydown(event) {
|
|
9643
|
-
if (event.ctrlKey && event.key === 'p') {
|
|
9644
|
-
|
|
9645
|
-
|
|
9646
|
-
|
|
9647
|
-
|
|
9648
|
-
|
|
9649
|
-
|
|
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();
|
|
9713
|
+
// if (event.ctrlKey && event.key === 'p') {
|
|
9714
|
+
// event.preventDefault();
|
|
9715
|
+
// this.isVisible = !this.isVisible;
|
|
9716
|
+
// if (this.isVisible) setTimeout(() => this.focusInput(), 0);
|
|
9717
|
+
// else this.resetSearch();
|
|
9718
|
+
// }
|
|
9719
|
+
if (event.key === 'Escape') {
|
|
9720
|
+
this.close();
|
|
9658
9721
|
}
|
|
9659
9722
|
}
|
|
9660
9723
|
navigateTo(route) {
|
|
9661
|
-
this._router.navigate([route]);
|
|
9662
|
-
this.closeSearch();
|
|
9724
|
+
this._router.navigate([route]).then(() => this.close());
|
|
9663
9725
|
}
|
|
9664
9726
|
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
|
-
// }
|
|
9727
|
+
const list = document.querySelector('.options-list')?.querySelectorAll('li');
|
|
9676
9728
|
const regex = new RegExp(escapeRegExp(pesquisa), 'ig');
|
|
9677
9729
|
list?.forEach((li) => {
|
|
9678
9730
|
const span = li.querySelector('span.tela');
|
|
@@ -9684,43 +9736,40 @@ class SearchInputComponent {
|
|
|
9684
9736
|
});
|
|
9685
9737
|
}
|
|
9686
9738
|
// #region PESQUISA
|
|
9687
|
-
|
|
9688
|
-
this.isVisible = false;
|
|
9739
|
+
close() {
|
|
9689
9740
|
this.onClose.emit();
|
|
9690
9741
|
this.resetSearch();
|
|
9691
9742
|
}
|
|
9692
|
-
|
|
9693
|
-
|
|
9694
|
-
|
|
9695
|
-
|
|
9696
|
-
else {
|
|
9697
|
-
this.filteredItems = [...this._items];
|
|
9698
|
-
}
|
|
9743
|
+
search() {
|
|
9744
|
+
// TODO: Implementar o highlight mesmo com o filtro externo
|
|
9745
|
+
// this.highlightList(this.searchQuery.trim());
|
|
9746
|
+
this.onSearch.emit(this.searchQuery.trim());
|
|
9699
9747
|
}
|
|
9700
9748
|
resetSearch() {
|
|
9701
9749
|
this.searchQuery = '';
|
|
9702
|
-
this.
|
|
9750
|
+
this.onSearch.emit('');
|
|
9703
9751
|
}
|
|
9704
9752
|
focusInput() {
|
|
9705
9753
|
if (this.searchInput)
|
|
9706
9754
|
this.searchInput.nativeElement.focus();
|
|
9707
9755
|
}
|
|
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: {
|
|
9756
|
+
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 }); }
|
|
9757
|
+
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-2 rounded mt-3 w-100\" [class]=\"!filteredItems ? 'text-center' : ''\" >\n\n @defer (when filteredItems) {\n <div class=\"scrollable-content overflow-y-auto rounded\" style=\"--max-scrollable-height: 500px\">\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 @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
9758
|
}
|
|
9711
9759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchInputComponent, decorators: [{
|
|
9712
9760
|
type: Component,
|
|
9713
9761
|
args: [{ selector: 'lib-search-input, lib-pesquisa-global', imports: [
|
|
9714
9762
|
FormsModule,
|
|
9715
9763
|
LibIconsComponent,
|
|
9716
|
-
TooltipModule
|
|
9717
|
-
|
|
9718
|
-
|
|
9719
|
-
|
|
9720
|
-
}], showIcons: [{
|
|
9764
|
+
TooltipModule,
|
|
9765
|
+
LibSpinnerComponent
|
|
9766
|
+
], 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-2 rounded mt-3 w-100\" [class]=\"!filteredItems ? 'text-center' : ''\" >\n\n @defer (when filteredItems) {\n <div class=\"scrollable-content overflow-y-auto rounded\" style=\"--max-scrollable-height: 500px\">\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 @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"] }]
|
|
9767
|
+
}], ctorParameters: () => [{ type: i1$3.Router }], propDecorators: { showIcons: [{
|
|
9721
9768
|
type: Input
|
|
9722
9769
|
}], onClose: [{
|
|
9723
9770
|
type: Output
|
|
9771
|
+
}], onSearch: [{
|
|
9772
|
+
type: Output
|
|
9724
9773
|
}], searchInput: [{
|
|
9725
9774
|
type: ViewChild,
|
|
9726
9775
|
args: ['searchInput']
|
|
@@ -9801,86 +9850,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
9801
9850
|
type: Input
|
|
9802
9851
|
}] } });
|
|
9803
9852
|
|
|
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
9853
|
class SearchTreePipe {
|
|
9885
9854
|
transform(items, search) {
|
|
9886
9855
|
return items.filter(node => node.label.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
|