ngx-sp-infra 6.4.1 → 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,70 +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
|
-
this.
|
|
9701
|
+
this.onClose = new EventEmitter();
|
|
9702
|
+
this.onSearch = new EventEmitter();
|
|
9619
9703
|
this.searchQuery = '';
|
|
9620
|
-
this.filteredItems = [...this._items];
|
|
9621
9704
|
}
|
|
9622
9705
|
ngOnInit() {
|
|
9623
|
-
|
|
9706
|
+
//
|
|
9624
9707
|
}
|
|
9625
9708
|
ngAfterViewInit() {
|
|
9626
|
-
|
|
9627
|
-
this.focusInput();
|
|
9709
|
+
this.focusInput();
|
|
9628
9710
|
}
|
|
9629
9711
|
// #region ==========> UTILS <==========
|
|
9630
|
-
loadRoutes() {
|
|
9631
|
-
if (!this.customItems) {
|
|
9632
|
-
this._http.get('assets\/jsons\/routes.json').subscribe(data => this._items = data, error => console.error('Erro ao buscar as rotas.:', error));
|
|
9633
|
-
}
|
|
9634
|
-
else {
|
|
9635
|
-
this._items = this.customItems;
|
|
9636
|
-
}
|
|
9637
|
-
}
|
|
9638
9712
|
onKeydown(event) {
|
|
9639
|
-
if (event.ctrlKey && event.key === 'p') {
|
|
9640
|
-
|
|
9641
|
-
|
|
9642
|
-
|
|
9643
|
-
|
|
9644
|
-
|
|
9645
|
-
|
|
9646
|
-
|
|
9647
|
-
else if (this.isVisible && event.key === 'Enter') {
|
|
9648
|
-
event.preventDefault();
|
|
9649
|
-
if (this.filteredItems.length > 0)
|
|
9650
|
-
this.navigateTo(this.filteredItems[0].route);
|
|
9651
|
-
}
|
|
9652
|
-
else if (event.key === 'Escape') {
|
|
9653
|
-
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();
|
|
9654
9721
|
}
|
|
9655
9722
|
}
|
|
9656
9723
|
navigateTo(route) {
|
|
9657
|
-
this._router.navigate([route]);
|
|
9658
|
-
this.closeSearch();
|
|
9724
|
+
this._router.navigate([route]).then(() => this.close());
|
|
9659
9725
|
}
|
|
9660
9726
|
highlightList(pesquisa) {
|
|
9661
|
-
|
|
9662
|
-
// se pesquisa for vazia, remove highlights
|
|
9663
|
-
// if (!pesquisa.trim()) {
|
|
9664
|
-
// list?.forEach(li => {
|
|
9665
|
-
// const span = li.querySelector('span.tela') as HTMLElement | null;
|
|
9666
|
-
// const target = span ?? (li as HTMLElement);
|
|
9667
|
-
// // restaura apenas o texto bruto (remove marcações de highlight)
|
|
9668
|
-
// target.innerHTML = target.textContent ?? '';
|
|
9669
|
-
// });
|
|
9670
|
-
// return;
|
|
9671
|
-
// }
|
|
9727
|
+
const list = document.querySelector('.options-list')?.querySelectorAll('li');
|
|
9672
9728
|
const regex = new RegExp(escapeRegExp(pesquisa), 'ig');
|
|
9673
9729
|
list?.forEach((li) => {
|
|
9674
9730
|
const span = li.querySelector('span.tela');
|
|
@@ -9680,43 +9736,40 @@ class SearchInputComponent {
|
|
|
9680
9736
|
});
|
|
9681
9737
|
}
|
|
9682
9738
|
// #region PESQUISA
|
|
9683
|
-
|
|
9684
|
-
this.
|
|
9739
|
+
close() {
|
|
9740
|
+
this.onClose.emit();
|
|
9685
9741
|
this.resetSearch();
|
|
9686
9742
|
}
|
|
9687
|
-
|
|
9688
|
-
|
|
9689
|
-
|
|
9690
|
-
|
|
9691
|
-
console.log(this._items);
|
|
9692
|
-
console.log(this.filteredItems);
|
|
9693
|
-
}
|
|
9694
|
-
else {
|
|
9695
|
-
this.filteredItems = [...this._items];
|
|
9696
|
-
}
|
|
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());
|
|
9697
9747
|
}
|
|
9698
9748
|
resetSearch() {
|
|
9699
9749
|
this.searchQuery = '';
|
|
9700
|
-
this.
|
|
9750
|
+
this.onSearch.emit('');
|
|
9701
9751
|
}
|
|
9702
9752
|
focusInput() {
|
|
9703
9753
|
if (this.searchInput)
|
|
9704
9754
|
this.searchInput.nativeElement.focus();
|
|
9705
9755
|
}
|
|
9706
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchInputComponent, deps: [{ token: i1$
|
|
9707
|
-
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]] }); }
|
|
9708
9758
|
}
|
|
9709
9759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchInputComponent, decorators: [{
|
|
9710
9760
|
type: Component,
|
|
9711
9761
|
args: [{ selector: 'lib-search-input, lib-pesquisa-global', imports: [
|
|
9712
9762
|
FormsModule,
|
|
9713
9763
|
LibIconsComponent,
|
|
9714
|
-
TooltipModule
|
|
9715
|
-
|
|
9716
|
-
|
|
9717
|
-
|
|
9718
|
-
}], 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: [{
|
|
9719
9768
|
type: Input
|
|
9769
|
+
}], onClose: [{
|
|
9770
|
+
type: Output
|
|
9771
|
+
}], onSearch: [{
|
|
9772
|
+
type: Output
|
|
9720
9773
|
}], searchInput: [{
|
|
9721
9774
|
type: ViewChild,
|
|
9722
9775
|
args: ['searchInput']
|
|
@@ -9797,86 +9850,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
9797
9850
|
type: Input
|
|
9798
9851
|
}] } });
|
|
9799
9852
|
|
|
9800
|
-
class LibSpinnerComponent {
|
|
9801
|
-
// #endregion PUBLIC
|
|
9802
|
-
// #endregion ==========> PROPERTIES <==========
|
|
9803
|
-
// #region ==========> INITIALIZATION <==========
|
|
9804
|
-
constructor() {
|
|
9805
|
-
this.sizeType = "class";
|
|
9806
|
-
// #endregion PROTECTED
|
|
9807
|
-
// #region PUBLIC
|
|
9808
|
-
/** Tipo do spinner
|
|
9809
|
-
* @default "border" */
|
|
9810
|
-
this.type = "border";
|
|
9811
|
-
/** Tamanho do spinner (Padrão ou pequeno)
|
|
9812
|
-
* @default "default" */
|
|
9813
|
-
this.size = "default";
|
|
9814
|
-
/** Texto de ajuda, será exibido no hover em cima do spinner
|
|
9815
|
-
* @default "Carregando informações..." */
|
|
9816
|
-
this.helperText = "Carregando informações...";
|
|
9817
|
-
}
|
|
9818
|
-
ngOnChanges(changes) {
|
|
9819
|
-
if (changes["size"]) {
|
|
9820
|
-
this.getSize();
|
|
9821
|
-
}
|
|
9822
|
-
}
|
|
9823
|
-
// #endregion ==========> INITIALIZATION <==========
|
|
9824
|
-
getSize() {
|
|
9825
|
-
if (this.size === "small") {
|
|
9826
|
-
this.sizeType = "class";
|
|
9827
|
-
this._size = `spinner-${this.type}-sm`;
|
|
9828
|
-
}
|
|
9829
|
-
else if (this.size === "default") {
|
|
9830
|
-
this.sizeType = "class";
|
|
9831
|
-
delete this._size;
|
|
9832
|
-
}
|
|
9833
|
-
else {
|
|
9834
|
-
this.sizeType = "custom";
|
|
9835
|
-
this._size = this.size;
|
|
9836
|
-
}
|
|
9837
|
-
}
|
|
9838
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9839
|
-
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: `
|
|
9840
|
-
@switch (sizeType) {
|
|
9841
|
-
@case ("class") {
|
|
9842
|
-
<div class="spinner-{{type}} {{theme ? 'text-'+theme : ''}} {{_size}}" role="status">
|
|
9843
|
-
<span class="visually-hidden">{{ helperText }}</span>
|
|
9844
|
-
</div>
|
|
9845
|
-
}
|
|
9846
|
-
@case ("custom") {
|
|
9847
|
-
<div class="spinner-{{type}} {{theme ? 'text-'+theme : ''}}" [style.height.px]="_size" [style.width.px]="_size" role="status">
|
|
9848
|
-
<span class="visually-hidden">{{ helperText }}</span>
|
|
9849
|
-
</div>
|
|
9850
|
-
}
|
|
9851
|
-
}
|
|
9852
|
-
`, isInline: true, styles: [""] }); }
|
|
9853
|
-
}
|
|
9854
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibSpinnerComponent, decorators: [{
|
|
9855
|
-
type: Component,
|
|
9856
|
-
args: [{ selector: 'lib-spinner', template: `
|
|
9857
|
-
@switch (sizeType) {
|
|
9858
|
-
@case ("class") {
|
|
9859
|
-
<div class="spinner-{{type}} {{theme ? 'text-'+theme : ''}} {{_size}}" role="status">
|
|
9860
|
-
<span class="visually-hidden">{{ helperText }}</span>
|
|
9861
|
-
</div>
|
|
9862
|
-
}
|
|
9863
|
-
@case ("custom") {
|
|
9864
|
-
<div class="spinner-{{type}} {{theme ? 'text-'+theme : ''}}" [style.height.px]="_size" [style.width.px]="_size" role="status">
|
|
9865
|
-
<span class="visually-hidden">{{ helperText }}</span>
|
|
9866
|
-
</div>
|
|
9867
|
-
}
|
|
9868
|
-
}
|
|
9869
|
-
`, standalone: true }]
|
|
9870
|
-
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
9871
|
-
type: Input
|
|
9872
|
-
}], theme: [{
|
|
9873
|
-
type: Input
|
|
9874
|
-
}], size: [{
|
|
9875
|
-
type: Input
|
|
9876
|
-
}], helperText: [{
|
|
9877
|
-
type: Input
|
|
9878
|
-
}] } });
|
|
9879
|
-
|
|
9880
9853
|
class SearchTreePipe {
|
|
9881
9854
|
transform(items, search) {
|
|
9882
9855
|
return items.filter(node => node.label.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
|