@angulartoolsdr/card-widget-percentual 20.2.2 → 20.2.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.
|
@@ -141,11 +141,11 @@ class CardWidgetPercentualComponent {
|
|
|
141
141
|
this.selectedItemChange.emit(item);
|
|
142
142
|
}
|
|
143
143
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CardWidgetPercentualComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
144
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CardWidgetPercentualComponent, isStandalone: true, selector: "lib-card-widget-percentual", inputs: { title: "title", iconClass: "iconClass", _loading: ["loading", "_loading"], listaValores: ["valueData", "listaValores"], _selectedItem: ["selectedItem", "_selectedItem"] }, outputs: { selectedItemChange: "selectedItemChange" }, viewQueries: [{ propertyName: "btnVerMaisRef", first: true, predicate: ["btnVerMais"], descendants: true }, { propertyName: "caixaExpandidaRef", first: true, predicate: ["caixaExpandida"], descendants: true }, { propertyName: "cardContainerRef", first: true, predicate: ["cardContainer"], descendants: true }, { propertyName: "legendContainerRef", first: true, predicate: ["legendContainer"], descendants: true }], ngImport: i0, template: "\n<div #cardContainer>\n <mat-card [class.selected]=\"selectedItem() != null\" [style.paddingBottom]=\"lista.length > 2 ? '8px' : '16px'\">\n @if (!loading) {\n <div class=\"header\">\n <div>{{title}}</div>\n <div class=\"d-inline-flex text-right\" style=\"place-items: end;\">\n <div style=\"font-size: 24px; line-height: 1;\" class=\"total mb-0 pb-0\">\n <strong class=\"mr-1 mb-0\">{{ total() | number: '1.0-0' : translationService.currentLang}}</strong>\n </div>\n <i style=\"font-size: 24px\" [ngClass]=\"iconClass\"></i>\n </div>\n </div>\n }\n @else {\n <div class=\"header\">\n <div>\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '20px' }\"\n ></ngx-skeleton-loader>\n </div>\n </div>\n\n }\n\n @if (!loading) {\n <div class=\"content\">\n <div echarts [options]=\"chartOptions()\" class=\"chart\" [style.z-index]=\"mostrarLegendaExpandida ? 2000 : 2\"></div>\n <div class=\"legend\" #legendContainer>\n @for (item of lista.slice(0, 2); track item) {\n <div class=\"item\" (click)=\"onClickItem(item)\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual ml-1\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n\n <!-- Container flutuante da legenda expandida -->\n @if (mostrarLegendaExpandida) {\n <div [class.selected]=\"selectedItem() != null\" style=\"border-top: none; border-top-left-radius: 0; border-top-right-radius: 0;\" class=\"legenda-expandida\" [style.width.px]=\"larguraCard\" id=\"caixaExpandida\">\n @for (item of lista.slice(2); track item) {\n <div style=\"margin-left: 48px;\" [style.width.px]=\"larguraLegenda\" (click)=\"onClickItem(item)\" class=\"item\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n <div class=\"item d-inline-flex\" style=\"margin-left: 10px; align-items: center; justify-content: right;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MENOS' | translate}}</span>\n <button mat-icon-button id=\"btnVerMenos\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_less</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @else {\n <div>\n @for (i of [1,2]; track i) {\n <div >\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '15px' }\"\n ></ngx-skeleton-loader>\n </div>\n }\n </div>\n}\n<!-- Bot\u00E3o de expandir -->\n@if (lista.length > 2 && !mostrarLegendaExpandida && !loading) {\n <div class=\"item d-inline-flex\" style=\"align-items: center; justify-content: right; margin-top: -15px; margin-right: -15px;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MAIS' | translate}}</span>\n <button mat-icon-button id=\"btnVeMais\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n}\n</mat-card>\n</div>\n", styles: ["mat-card{padding:16px;display:flex;flex-direction:column;border-radius:.75rem}mat-card .header{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px}mat-card .content{display:flex;align-items:center}mat-card .content .chart{width:40px;height:75px;margin-right:16px}mat-card .content .legend{width:100%;display:flex;flex-direction:column}mat-card .content .legend .ver-mais-btn{align-self:flex-end;margin-top:0;margin-right:0!important}mat-card .content .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%;gap:4px;margin-bottom:4px;margin-top:4px;cursor:pointer}mat-card .content .item .dot{width:10px;height:10px;border-radius:50%;display:inline-block}mat-card .content .item .label-nome{overflow:hidden;font-size:12px;white-space:nowrap;text-overflow:ellipsis;min-width:60px;transition:all .2s ease-in-out}mat-card .content .item .label-nome.itemSelected{color:#2f4050!important;font-size:14px!important;font-weight:700!important;transform:scale(1.05)}mat-card .content .item .label-valores{display:inline;flex-direction:column;align-items:flex-end;font-size:13px;min-width:30px}mat-card .content .item .label-valores .quantidade{display:inline-flex;font-weight:700;line-height:1.2}mat-card .content .item .label-valores .percentual{display:inline-flex;font-size:9px;color:#888;min-width:31px;justify-content:end;line-height:1.2}.legenda-expandida{position:absolute;top:81%;right:0;background:#fff;border-radius:.75rem;box-shadow:0 6px 8px -2px #00000026;padding:4px 15px;z-index:1000;min-width:100px;transition:width .2s ease;border-top:none;animation:fadeInDown .2s ease-out}.legenda-expandida .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;padding:4px 0;transition:width .2s ease;margin-bottom:4px;margin-top:4px;cursor:pointer;transition:all .2s ease-in-out}.legenda-expandida .item .dot{width:10px;height:10px;border-radius:50%;display:inline-block}.legenda-expandida .item .label-nome{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .2s ease-in-out}.legenda-expandida .item .label-nome.itemSelected{color:#2f4050!important;font-size:14px!important;font-weight:700!important;transform:scale(1.05)}.legenda-expandida .item .label-valores{display:inline;flex-direction:column;align-items:flex-end}.legenda-expandida .item .label-valores .quantidade{font-weight:700;font-size:12px;display:inline-flex}.legenda-expandida .item .label-valores .percentual{font-size:10px;color:#888;display:inline-flex;min-width:31px;justify-content:end;line-height:1.2}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.selected{border:1px solid var(--theme-primary-300)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme", "size", "measureUnit"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: TranslationPipe, name: "translate" }] }); }
|
|
144
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CardWidgetPercentualComponent, isStandalone: true, selector: "lib-card-widget-percentual", inputs: { title: "title", iconClass: "iconClass", _loading: ["loading", "_loading"], listaValores: ["valueData", "listaValores"], _selectedItem: ["selectedItem", "_selectedItem"] }, outputs: { selectedItemChange: "selectedItemChange" }, viewQueries: [{ propertyName: "btnVerMaisRef", first: true, predicate: ["btnVerMais"], descendants: true }, { propertyName: "caixaExpandidaRef", first: true, predicate: ["caixaExpandida"], descendants: true }, { propertyName: "cardContainerRef", first: true, predicate: ["cardContainer"], descendants: true }, { propertyName: "legendContainerRef", first: true, predicate: ["legendContainer"], descendants: true }], ngImport: i0, template: "\n<div #cardContainer>\n <mat-card [class.selected]=\"selectedItem() != null\" [style.paddingBottom]=\"lista.length > 2 ? '8px' : '16px'\">\n @if (!loading) {\n <div class=\"header\">\n <div>{{title}}</div>\n <div class=\"d-inline-flex text-right\" style=\"place-items: end;\">\n <div style=\"font-size: 24px; line-height: 1;\" class=\"total mb-0 pb-0\">\n <strong class=\"mr-1 mb-0\">{{ total() | number: '1.0-0' : translationService.currentLang}}</strong>\n </div>\n <i style=\"font-size: 24px\" class=\"ml-n1 mr-n1\" [ngClass]=\"iconClass\"></i>\n </div>\n </div>\n }\n @else {\n <div class=\"header\">\n <div>\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '20px' }\"\n ></ngx-skeleton-loader>\n </div>\n </div>\n\n }\n\n @if (!loading) {\n <div class=\"content\">\n <div echarts [options]=\"chartOptions()\" class=\"chart\" [style.z-index]=\"mostrarLegendaExpandida ? 2000 : 2\"></div>\n <div class=\"legend\" #legendContainer>\n @for (item of lista.slice(0, 2); track item) {\n <div class=\"item\" (click)=\"onClickItem(item)\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual ml-1\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n\n <!-- Container flutuante da legenda expandida -->\n @if (mostrarLegendaExpandida) {\n <div [class.selected]=\"selectedItem() != null\" style=\"border-top: none; border-top-left-radius: 0; border-top-right-radius: 0;\" class=\"legenda-expandida\" [style.width.px]=\"larguraCard\" id=\"caixaExpandida\">\n @for (item of lista.slice(2); track item) {\n <div style=\"margin-left: 48px;\" [style.width.px]=\"larguraLegenda\" (click)=\"onClickItem(item)\" class=\"item\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n <div class=\"item d-inline-flex\" style=\"margin-left: 10px; align-items: center; justify-content: right;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MENOS' | translate}}</span>\n <button mat-icon-button id=\"btnVerMenos\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_less</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @else {\n <div>\n @for (i of [1,2]; track i) {\n <div >\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '15px' }\"\n ></ngx-skeleton-loader>\n </div>\n }\n </div>\n}\n<!-- Bot\u00E3o de expandir -->\n@if (lista.length > 2 && !mostrarLegendaExpandida && !loading) {\n <div class=\"item d-inline-flex\" style=\"align-items: center; justify-content: right; margin-top: -15px; margin-right: -15px;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MAIS' | translate}}</span>\n <button mat-icon-button id=\"btnVeMais\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n}\n</mat-card>\n</div>\n", styles: ["mat-card{padding:16px;display:flex;flex-direction:column;border-radius:.75rem}mat-card .header{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px}mat-card .content{display:flex;align-items:center}mat-card .content .chart{width:40px;height:75px;margin-right:16px}mat-card .content .legend{width:100%;display:flex;flex-direction:column}mat-card .content .legend .ver-mais-btn{align-self:flex-end;margin-top:0;margin-right:0!important}mat-card .content .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%;gap:4px;margin-bottom:4px;margin-top:4px;cursor:pointer}mat-card .content .item .dot{width:10px;height:10px;border-radius:50%;display:inline-block}mat-card .content .item .label-nome{overflow:hidden;font-size:12px;white-space:nowrap;text-overflow:ellipsis;min-width:60px;transition:all .2s ease-in-out}mat-card .content .item .label-nome.itemSelected{color:#2f4050!important;font-size:14px!important;font-weight:700!important;transform:scale(1.05)}mat-card .content .item .label-valores{display:inline;flex-direction:column;align-items:flex-end;font-size:13px;min-width:30px}mat-card .content .item .label-valores .quantidade{display:inline-flex;font-weight:700;line-height:1.2}mat-card .content .item .label-valores .percentual{display:inline-flex;font-size:9px;color:#888;min-width:31px;justify-content:end;line-height:1.2}.legenda-expandida{position:absolute;top:81%;right:0;background:#fff;border-radius:.75rem;box-shadow:0 6px 8px -2px #00000026;padding:4px 15px;z-index:1000;min-width:100px;transition:width .2s ease;border-top:none;animation:fadeInDown .2s ease-out}.legenda-expandida .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;padding:4px 0;transition:width .2s ease;margin-bottom:4px;margin-top:4px;cursor:pointer;transition:all .2s ease-in-out}.legenda-expandida .item .dot{width:10px;height:10px;border-radius:50%;display:inline-block}.legenda-expandida .item .label-nome{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .2s ease-in-out}.legenda-expandida .item .label-nome.itemSelected{color:#2f4050!important;font-size:14px!important;font-weight:700!important;transform:scale(1.05)}.legenda-expandida .item .label-valores{display:inline;flex-direction:column;align-items:flex-end}.legenda-expandida .item .label-valores .quantidade{font-weight:700;font-size:12px;display:inline-flex}.legenda-expandida .item .label-valores .percentual{font-size:10px;color:#888;display:inline-flex;min-width:31px;justify-content:end;line-height:1.2}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.selected{border:1px solid var(--theme-primary-300)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme", "size", "measureUnit"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: TranslationPipe, name: "translate" }] }); }
|
|
145
145
|
}
|
|
146
146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CardWidgetPercentualComponent, decorators: [{
|
|
147
147
|
type: Component,
|
|
148
|
-
args: [{ selector: 'lib-card-widget-percentual', imports: [DecimalPipe, NgClass, MatIconButton, MatIcon, MatCard, NgxEchartsDirective, TranslationPipe, NgxSkeletonLoaderModule], template: "\n<div #cardContainer>\n <mat-card [class.selected]=\"selectedItem() != null\" [style.paddingBottom]=\"lista.length > 2 ? '8px' : '16px'\">\n @if (!loading) {\n <div class=\"header\">\n <div>{{title}}</div>\n <div class=\"d-inline-flex text-right\" style=\"place-items: end;\">\n <div style=\"font-size: 24px; line-height: 1;\" class=\"total mb-0 pb-0\">\n <strong class=\"mr-1 mb-0\">{{ total() | number: '1.0-0' : translationService.currentLang}}</strong>\n </div>\n <i style=\"font-size: 24px\" [ngClass]=\"iconClass\"></i>\n </div>\n </div>\n }\n @else {\n <div class=\"header\">\n <div>\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '20px' }\"\n ></ngx-skeleton-loader>\n </div>\n </div>\n\n }\n\n @if (!loading) {\n <div class=\"content\">\n <div echarts [options]=\"chartOptions()\" class=\"chart\" [style.z-index]=\"mostrarLegendaExpandida ? 2000 : 2\"></div>\n <div class=\"legend\" #legendContainer>\n @for (item of lista.slice(0, 2); track item) {\n <div class=\"item\" (click)=\"onClickItem(item)\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual ml-1\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n\n <!-- Container flutuante da legenda expandida -->\n @if (mostrarLegendaExpandida) {\n <div [class.selected]=\"selectedItem() != null\" style=\"border-top: none; border-top-left-radius: 0; border-top-right-radius: 0;\" class=\"legenda-expandida\" [style.width.px]=\"larguraCard\" id=\"caixaExpandida\">\n @for (item of lista.slice(2); track item) {\n <div style=\"margin-left: 48px;\" [style.width.px]=\"larguraLegenda\" (click)=\"onClickItem(item)\" class=\"item\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n <div class=\"item d-inline-flex\" style=\"margin-left: 10px; align-items: center; justify-content: right;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MENOS' | translate}}</span>\n <button mat-icon-button id=\"btnVerMenos\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_less</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @else {\n <div>\n @for (i of [1,2]; track i) {\n <div >\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '15px' }\"\n ></ngx-skeleton-loader>\n </div>\n }\n </div>\n}\n<!-- Bot\u00E3o de expandir -->\n@if (lista.length > 2 && !mostrarLegendaExpandida && !loading) {\n <div class=\"item d-inline-flex\" style=\"align-items: center; justify-content: right; margin-top: -15px; margin-right: -15px;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MAIS' | translate}}</span>\n <button mat-icon-button id=\"btnVeMais\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n}\n</mat-card>\n</div>\n", styles: ["mat-card{padding:16px;display:flex;flex-direction:column;border-radius:.75rem}mat-card .header{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px}mat-card .content{display:flex;align-items:center}mat-card .content .chart{width:40px;height:75px;margin-right:16px}mat-card .content .legend{width:100%;display:flex;flex-direction:column}mat-card .content .legend .ver-mais-btn{align-self:flex-end;margin-top:0;margin-right:0!important}mat-card .content .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%;gap:4px;margin-bottom:4px;margin-top:4px;cursor:pointer}mat-card .content .item .dot{width:10px;height:10px;border-radius:50%;display:inline-block}mat-card .content .item .label-nome{overflow:hidden;font-size:12px;white-space:nowrap;text-overflow:ellipsis;min-width:60px;transition:all .2s ease-in-out}mat-card .content .item .label-nome.itemSelected{color:#2f4050!important;font-size:14px!important;font-weight:700!important;transform:scale(1.05)}mat-card .content .item .label-valores{display:inline;flex-direction:column;align-items:flex-end;font-size:13px;min-width:30px}mat-card .content .item .label-valores .quantidade{display:inline-flex;font-weight:700;line-height:1.2}mat-card .content .item .label-valores .percentual{display:inline-flex;font-size:9px;color:#888;min-width:31px;justify-content:end;line-height:1.2}.legenda-expandida{position:absolute;top:81%;right:0;background:#fff;border-radius:.75rem;box-shadow:0 6px 8px -2px #00000026;padding:4px 15px;z-index:1000;min-width:100px;transition:width .2s ease;border-top:none;animation:fadeInDown .2s ease-out}.legenda-expandida .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;padding:4px 0;transition:width .2s ease;margin-bottom:4px;margin-top:4px;cursor:pointer;transition:all .2s ease-in-out}.legenda-expandida .item .dot{width:10px;height:10px;border-radius:50%;display:inline-block}.legenda-expandida .item .label-nome{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .2s ease-in-out}.legenda-expandida .item .label-nome.itemSelected{color:#2f4050!important;font-size:14px!important;font-weight:700!important;transform:scale(1.05)}.legenda-expandida .item .label-valores{display:inline;flex-direction:column;align-items:flex-end}.legenda-expandida .item .label-valores .quantidade{font-weight:700;font-size:12px;display:inline-flex}.legenda-expandida .item .label-valores .percentual{font-size:10px;color:#888;display:inline-flex;min-width:31px;justify-content:end;line-height:1.2}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.selected{border:1px solid var(--theme-primary-300)}\n"] }]
|
|
148
|
+
args: [{ selector: 'lib-card-widget-percentual', imports: [DecimalPipe, NgClass, MatIconButton, MatIcon, MatCard, NgxEchartsDirective, TranslationPipe, NgxSkeletonLoaderModule], template: "\n<div #cardContainer>\n <mat-card [class.selected]=\"selectedItem() != null\" [style.paddingBottom]=\"lista.length > 2 ? '8px' : '16px'\">\n @if (!loading) {\n <div class=\"header\">\n <div>{{title}}</div>\n <div class=\"d-inline-flex text-right\" style=\"place-items: end;\">\n <div style=\"font-size: 24px; line-height: 1;\" class=\"total mb-0 pb-0\">\n <strong class=\"mr-1 mb-0\">{{ total() | number: '1.0-0' : translationService.currentLang}}</strong>\n </div>\n <i style=\"font-size: 24px\" class=\"ml-n1 mr-n1\" [ngClass]=\"iconClass\"></i>\n </div>\n </div>\n }\n @else {\n <div class=\"header\">\n <div>\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '20px' }\"\n ></ngx-skeleton-loader>\n </div>\n </div>\n\n }\n\n @if (!loading) {\n <div class=\"content\">\n <div echarts [options]=\"chartOptions()\" class=\"chart\" [style.z-index]=\"mostrarLegendaExpandida ? 2000 : 2\"></div>\n <div class=\"legend\" #legendContainer>\n @for (item of lista.slice(0, 2); track item) {\n <div class=\"item\" (click)=\"onClickItem(item)\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual ml-1\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n\n <!-- Container flutuante da legenda expandida -->\n @if (mostrarLegendaExpandida) {\n <div [class.selected]=\"selectedItem() != null\" style=\"border-top: none; border-top-left-radius: 0; border-top-right-radius: 0;\" class=\"legenda-expandida\" [style.width.px]=\"larguraCard\" id=\"caixaExpandida\">\n @for (item of lista.slice(2); track item) {\n <div style=\"margin-left: 48px;\" [style.width.px]=\"larguraLegenda\" (click)=\"onClickItem(item)\" class=\"item\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n <div class=\"item d-inline-flex\" style=\"margin-left: 10px; align-items: center; justify-content: right;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MENOS' | translate}}</span>\n <button mat-icon-button id=\"btnVerMenos\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_less</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @else {\n <div>\n @for (i of [1,2]; track i) {\n <div >\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '15px' }\"\n ></ngx-skeleton-loader>\n </div>\n }\n </div>\n}\n<!-- Bot\u00E3o de expandir -->\n@if (lista.length > 2 && !mostrarLegendaExpandida && !loading) {\n <div class=\"item d-inline-flex\" style=\"align-items: center; justify-content: right; margin-top: -15px; margin-right: -15px;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MAIS' | translate}}</span>\n <button mat-icon-button id=\"btnVeMais\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n}\n</mat-card>\n</div>\n", styles: ["mat-card{padding:16px;display:flex;flex-direction:column;border-radius:.75rem}mat-card .header{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px}mat-card .content{display:flex;align-items:center}mat-card .content .chart{width:40px;height:75px;margin-right:16px}mat-card .content .legend{width:100%;display:flex;flex-direction:column}mat-card .content .legend .ver-mais-btn{align-self:flex-end;margin-top:0;margin-right:0!important}mat-card .content .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%;gap:4px;margin-bottom:4px;margin-top:4px;cursor:pointer}mat-card .content .item .dot{width:10px;height:10px;border-radius:50%;display:inline-block}mat-card .content .item .label-nome{overflow:hidden;font-size:12px;white-space:nowrap;text-overflow:ellipsis;min-width:60px;transition:all .2s ease-in-out}mat-card .content .item .label-nome.itemSelected{color:#2f4050!important;font-size:14px!important;font-weight:700!important;transform:scale(1.05)}mat-card .content .item .label-valores{display:inline;flex-direction:column;align-items:flex-end;font-size:13px;min-width:30px}mat-card .content .item .label-valores .quantidade{display:inline-flex;font-weight:700;line-height:1.2}mat-card .content .item .label-valores .percentual{display:inline-flex;font-size:9px;color:#888;min-width:31px;justify-content:end;line-height:1.2}.legenda-expandida{position:absolute;top:81%;right:0;background:#fff;border-radius:.75rem;box-shadow:0 6px 8px -2px #00000026;padding:4px 15px;z-index:1000;min-width:100px;transition:width .2s ease;border-top:none;animation:fadeInDown .2s ease-out}.legenda-expandida .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;padding:4px 0;transition:width .2s ease;margin-bottom:4px;margin-top:4px;cursor:pointer;transition:all .2s ease-in-out}.legenda-expandida .item .dot{width:10px;height:10px;border-radius:50%;display:inline-block}.legenda-expandida .item .label-nome{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .2s ease-in-out}.legenda-expandida .item .label-nome.itemSelected{color:#2f4050!important;font-size:14px!important;font-weight:700!important;transform:scale(1.05)}.legenda-expandida .item .label-valores{display:inline;flex-direction:column;align-items:flex-end}.legenda-expandida .item .label-valores .quantidade{font-weight:700;font-size:12px;display:inline-flex}.legenda-expandida .item .label-valores .percentual{font-size:10px;color:#888;display:inline-flex;min-width:31px;justify-content:end;line-height:1.2}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.selected{border:1px solid var(--theme-primary-300)}\n"] }]
|
|
149
149
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
150
150
|
type: Input
|
|
151
151
|
}], iconClass: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"angulartoolsdr-card-widget-percentual.mjs","sources":["../../../projects/card-widget-percentual/src/lib/card-widget-percentual.component.ts","../../../projects/card-widget-percentual/src/lib/card-widget-percentual.component.html","../../../projects/card-widget-percentual/src/public-api.ts","../../../projects/card-widget-percentual/src/angulartoolsdr-card-widget-percentual.ts"],"sourcesContent":["import { DecimalPipe, NgClass } from '@angular/common';\nimport { Component, computed, ElementRef, EventEmitter, inject, Input, Output, signal, ViewChild } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatCard } from '@angular/material/card';\nimport { MatIcon } from '@angular/material/icon';\nimport { TranslationPipe, TranslationService } from '@angulartoolsdr/translation';\nimport { NgxEchartsDirective } from 'ngx-echarts';\nimport { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';\n\nexport interface DadoPercentual {\n id?: number,\n nome: string;\n valor: number;\n cor: string;\n}\n\n@Component({\n selector: 'lib-card-widget-percentual',\n templateUrl: './card-widget-percentual.component.html',\n styleUrls: ['./card-widget-percentual.component.scss'],\n imports: [DecimalPipe, NgClass, MatIconButton, MatIcon, MatCard, NgxEchartsDirective, TranslationPipe, NgxSkeletonLoaderModule],\n})\nexport class CardWidgetPercentualComponent {\n\n selectedItem = signal<DadoPercentual | null>(null);\n\n @Input() title: string = '';\n @Input() iconClass: string = '';\n\n @Input('loading') set _loading(value: boolean) {\n this.loading = value;\n }\n\n @Input('valueData') set listaValores(valores: DadoPercentual[]) {\n if (valores === undefined || valores === null || valores.length === 0) return;\n \n this._listaValores.set(valores);\n this.updateChartData();\n }\n\n @Input('selectedItem') set _selectedItem(item: DadoPercentual) {\n this.selectedItem.set(item);\n }\n\n @Output() selectedItemChange = new EventEmitter<DadoPercentual>();\n\n @ViewChild('btnVerMais', { static: false }) btnVerMaisRef!: ElementRef;\n @ViewChild('caixaExpandida', { static: false }) caixaExpandidaRef!: ElementRef;\n @ViewChild('cardContainer', { static: false }) cardContainerRef!: ElementRef;\n @ViewChild('legendContainer', { static: false }) legendContainerRef!: ElementRef;\n\n private _listaValores = signal<DadoPercentual[]>([]);\n\n total = computed(() =>\n this._listaValores().reduce((acc, curr) => acc + curr.valor, 0)\n );\n\n mostrarLegendaExpandida = false;\n larguraLegenda = 150;\n larguraCard = 242;\n\n chartOptions = signal<any>({});\n\n loading = false;\n\n translationService;\n\n toggleLegendaExpandida() {\n this.mostrarLegendaExpandida = !this.mostrarLegendaExpandida;\n \n if (this.mostrarLegendaExpandida && this.cardContainerRef && this.legendContainerRef) {\n // Aguarda renderização\n setTimeout(() => {\n //console.log(this.cardContainerRef?.nativeElement);\n //console.log(this.legendContainerRef?.nativeElement?.offsetWidth);\n if (this.cardContainerRef!.nativeElement?.offsetWidth > 0) {\n const largura = this.cardContainerRef!.nativeElement!.offsetWidth;\n this.larguraCard = (largura);\n }\n if (this.legendContainerRef!.nativeElement?.offsetWidth > 0) {\n const largura = this.legendContainerRef!.nativeElement!.offsetWidth;\n this.larguraLegenda = largura;\n }\n });\n }\n }\n\n constructor() { \n this.updateChartData();\n this.translationService = inject(TranslationService);\n }\n\n updateChartData() {\n\n // Código para o gráfico em stackedbar\n const dados = this._listaValores();\n if (!dados || dados.length === 0) return;\n\n const total = this.total();\n const series = [...dados].reverse().map(item => ({\n name: item.nome,\n type: 'bar',\n stack: 'total',\n itemStyle: { color: item.cor },\n emphasis: { focus: 'series' },\n data: [item.valor]\n }));\n\n this.chartOptions.set({\n tooltip: {\n trigger: 'axis',\n z: 9999, // Garante que fique por cima de tudo\n position: function (point, params, dom, rect, size) {\n const [x] = point;\n const [tooltipWidth] = size.contentSize;\n \n // Se estiver perto da margem esquerda (ex: 100px), joga para a direita\n if (x < tooltipWidth + 100) {\n return ['right', 'center'];\n }\n return ['left', 'center'];\n },\n axisPointer: { type: 'shadow' },\n formatter: (params: any[]) => {\n return params.reverse().map(p =>\n `<div style=\"display: flex; align-items: center; font-size: 11px;\">\n <span style=\"\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: ${p.color};\n margin-right: 6px;\n \"></span>\n ${p.seriesName}: <strong style=\"margin-left: 4px;\">${p.value}</strong>\n <span style=\"margin-left: 4px; color: #888;\">(${((p.value / total) * 100).toFixed(1)}%)</span>\n </div>`\n ).join('');\n }\n },\n grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: false },\n xAxis: { type: 'category', data: ['Total'], axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false } },\n yAxis: { type: 'value', show: false },\n series\n });\n \n\n // Código para o gráfico de rosca\n /*const dados = this._listaValores();\n if (!dados || dados.length === 0) return;\n\n const data = dados.map(item => ({\n value: item.valor,\n name: item.nome,\n itemStyle: { color: item.cor }\n }));\n\n this.chartOptions.set({\n tooltip: {\n trigger: 'item',\n formatter: '{b}: {c} ({d}%)'\n },\n series: [\n {\n type: 'pie',\n radius: ['70%', '90%'],\n avoidLabelOverlap: false,\n label: { show: false },\n labelLine: { show: false },\n data\n }\n ]\n });*/\n }\n\n getPercentualPorValor(valor: number): number {\n return this.total() > 0 ? (valor / this.total()) * 100 : 0;\n }\n\n get lista() {\n return this._listaValores();\n }\n\n onClickItem(item: DadoPercentual) {\n this.selectedItem.set(item);\n this.selectedItemChange.emit(item);\n }\n}\n","\n<div #cardContainer>\n <mat-card [class.selected]=\"selectedItem() != null\" [style.paddingBottom]=\"lista.length > 2 ? '8px' : '16px'\">\n @if (!loading) {\n <div class=\"header\">\n <div>{{title}}</div>\n <div class=\"d-inline-flex text-right\" style=\"place-items: end;\">\n <div style=\"font-size: 24px; line-height: 1;\" class=\"total mb-0 pb-0\">\n <strong class=\"mr-1 mb-0\">{{ total() | number: '1.0-0' : translationService.currentLang}}</strong>\n </div>\n <i style=\"font-size: 24px\" [ngClass]=\"iconClass\"></i>\n </div>\n </div>\n }\n @else {\n <div class=\"header\">\n <div>\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '20px' }\"\n ></ngx-skeleton-loader>\n </div>\n </div>\n\n }\n\n @if (!loading) {\n <div class=\"content\">\n <div echarts [options]=\"chartOptions()\" class=\"chart\" [style.z-index]=\"mostrarLegendaExpandida ? 2000 : 2\"></div>\n <div class=\"legend\" #legendContainer>\n @for (item of lista.slice(0, 2); track item) {\n <div class=\"item\" (click)=\"onClickItem(item)\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual ml-1\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n\n <!-- Container flutuante da legenda expandida -->\n @if (mostrarLegendaExpandida) {\n <div [class.selected]=\"selectedItem() != null\" style=\"border-top: none; border-top-left-radius: 0; border-top-right-radius: 0;\" class=\"legenda-expandida\" [style.width.px]=\"larguraCard\" id=\"caixaExpandida\">\n @for (item of lista.slice(2); track item) {\n <div style=\"margin-left: 48px;\" [style.width.px]=\"larguraLegenda\" (click)=\"onClickItem(item)\" class=\"item\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n <div class=\"item d-inline-flex\" style=\"margin-left: 10px; align-items: center; justify-content: right;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MENOS' | translate}}</span>\n <button mat-icon-button id=\"btnVerMenos\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_less</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @else {\n <div>\n @for (i of [1,2]; track i) {\n <div >\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '15px' }\"\n ></ngx-skeleton-loader>\n </div>\n }\n </div>\n}\n<!-- Botão de expandir -->\n@if (lista.length > 2 && !mostrarLegendaExpandida && !loading) {\n <div class=\"item d-inline-flex\" style=\"align-items: center; justify-content: right; margin-top: -15px; margin-right: -15px;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MAIS' | translate}}</span>\n <button mat-icon-button id=\"btnVeMais\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n}\n</mat-card>\n</div>\n","/*\n * Public API Surface of card-widget-percentual\n */\n\nexport * from './lib/card-widget-percentual.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"angulartoolsdr-card-widget-percentual.mjs","sources":["../../../projects/card-widget-percentual/src/lib/card-widget-percentual.component.ts","../../../projects/card-widget-percentual/src/lib/card-widget-percentual.component.html","../../../projects/card-widget-percentual/src/public-api.ts","../../../projects/card-widget-percentual/src/angulartoolsdr-card-widget-percentual.ts"],"sourcesContent":["import { DecimalPipe, NgClass } from '@angular/common';\nimport { Component, computed, ElementRef, EventEmitter, inject, Input, Output, signal, ViewChild } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatCard } from '@angular/material/card';\nimport { MatIcon } from '@angular/material/icon';\nimport { TranslationPipe, TranslationService } from '@angulartoolsdr/translation';\nimport { NgxEchartsDirective } from 'ngx-echarts';\nimport { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';\n\nexport interface DadoPercentual {\n id?: number,\n nome: string;\n valor: number;\n cor: string;\n}\n\n@Component({\n selector: 'lib-card-widget-percentual',\n templateUrl: './card-widget-percentual.component.html',\n styleUrls: ['./card-widget-percentual.component.scss'],\n imports: [DecimalPipe, NgClass, MatIconButton, MatIcon, MatCard, NgxEchartsDirective, TranslationPipe, NgxSkeletonLoaderModule],\n})\nexport class CardWidgetPercentualComponent {\n\n selectedItem = signal<DadoPercentual | null>(null);\n\n @Input() title: string = '';\n @Input() iconClass: string = '';\n\n @Input('loading') set _loading(value: boolean) {\n this.loading = value;\n }\n\n @Input('valueData') set listaValores(valores: DadoPercentual[]) {\n if (valores === undefined || valores === null || valores.length === 0) return;\n \n this._listaValores.set(valores);\n this.updateChartData();\n }\n\n @Input('selectedItem') set _selectedItem(item: DadoPercentual) {\n this.selectedItem.set(item);\n }\n\n @Output() selectedItemChange = new EventEmitter<DadoPercentual>();\n\n @ViewChild('btnVerMais', { static: false }) btnVerMaisRef!: ElementRef;\n @ViewChild('caixaExpandida', { static: false }) caixaExpandidaRef!: ElementRef;\n @ViewChild('cardContainer', { static: false }) cardContainerRef!: ElementRef;\n @ViewChild('legendContainer', { static: false }) legendContainerRef!: ElementRef;\n\n private _listaValores = signal<DadoPercentual[]>([]);\n\n total = computed(() =>\n this._listaValores().reduce((acc, curr) => acc + curr.valor, 0)\n );\n\n mostrarLegendaExpandida = false;\n larguraLegenda = 150;\n larguraCard = 242;\n\n chartOptions = signal<any>({});\n\n loading = false;\n\n translationService;\n\n toggleLegendaExpandida() {\n this.mostrarLegendaExpandida = !this.mostrarLegendaExpandida;\n \n if (this.mostrarLegendaExpandida && this.cardContainerRef && this.legendContainerRef) {\n // Aguarda renderização\n setTimeout(() => {\n //console.log(this.cardContainerRef?.nativeElement);\n //console.log(this.legendContainerRef?.nativeElement?.offsetWidth);\n if (this.cardContainerRef!.nativeElement?.offsetWidth > 0) {\n const largura = this.cardContainerRef!.nativeElement!.offsetWidth;\n this.larguraCard = (largura);\n }\n if (this.legendContainerRef!.nativeElement?.offsetWidth > 0) {\n const largura = this.legendContainerRef!.nativeElement!.offsetWidth;\n this.larguraLegenda = largura;\n }\n });\n }\n }\n\n constructor() { \n this.updateChartData();\n this.translationService = inject(TranslationService);\n }\n\n updateChartData() {\n\n // Código para o gráfico em stackedbar\n const dados = this._listaValores();\n if (!dados || dados.length === 0) return;\n\n const total = this.total();\n const series = [...dados].reverse().map(item => ({\n name: item.nome,\n type: 'bar',\n stack: 'total',\n itemStyle: { color: item.cor },\n emphasis: { focus: 'series' },\n data: [item.valor]\n }));\n\n this.chartOptions.set({\n tooltip: {\n trigger: 'axis',\n z: 9999, // Garante que fique por cima de tudo\n position: function (point, params, dom, rect, size) {\n const [x] = point;\n const [tooltipWidth] = size.contentSize;\n \n // Se estiver perto da margem esquerda (ex: 100px), joga para a direita\n if (x < tooltipWidth + 100) {\n return ['right', 'center'];\n }\n return ['left', 'center'];\n },\n axisPointer: { type: 'shadow' },\n formatter: (params: any[]) => {\n return params.reverse().map(p =>\n `<div style=\"display: flex; align-items: center; font-size: 11px;\">\n <span style=\"\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: ${p.color};\n margin-right: 6px;\n \"></span>\n ${p.seriesName}: <strong style=\"margin-left: 4px;\">${p.value}</strong>\n <span style=\"margin-left: 4px; color: #888;\">(${((p.value / total) * 100).toFixed(1)}%)</span>\n </div>`\n ).join('');\n }\n },\n grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: false },\n xAxis: { type: 'category', data: ['Total'], axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false } },\n yAxis: { type: 'value', show: false },\n series\n });\n \n\n // Código para o gráfico de rosca\n /*const dados = this._listaValores();\n if (!dados || dados.length === 0) return;\n\n const data = dados.map(item => ({\n value: item.valor,\n name: item.nome,\n itemStyle: { color: item.cor }\n }));\n\n this.chartOptions.set({\n tooltip: {\n trigger: 'item',\n formatter: '{b}: {c} ({d}%)'\n },\n series: [\n {\n type: 'pie',\n radius: ['70%', '90%'],\n avoidLabelOverlap: false,\n label: { show: false },\n labelLine: { show: false },\n data\n }\n ]\n });*/\n }\n\n getPercentualPorValor(valor: number): number {\n return this.total() > 0 ? (valor / this.total()) * 100 : 0;\n }\n\n get lista() {\n return this._listaValores();\n }\n\n onClickItem(item: DadoPercentual) {\n this.selectedItem.set(item);\n this.selectedItemChange.emit(item);\n }\n}\n","\n<div #cardContainer>\n <mat-card [class.selected]=\"selectedItem() != null\" [style.paddingBottom]=\"lista.length > 2 ? '8px' : '16px'\">\n @if (!loading) {\n <div class=\"header\">\n <div>{{title}}</div>\n <div class=\"d-inline-flex text-right\" style=\"place-items: end;\">\n <div style=\"font-size: 24px; line-height: 1;\" class=\"total mb-0 pb-0\">\n <strong class=\"mr-1 mb-0\">{{ total() | number: '1.0-0' : translationService.currentLang}}</strong>\n </div>\n <i style=\"font-size: 24px\" class=\"ml-n1 mr-n1\" [ngClass]=\"iconClass\"></i>\n </div>\n </div>\n }\n @else {\n <div class=\"header\">\n <div>\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '20px' }\"\n ></ngx-skeleton-loader>\n </div>\n </div>\n\n }\n\n @if (!loading) {\n <div class=\"content\">\n <div echarts [options]=\"chartOptions()\" class=\"chart\" [style.z-index]=\"mostrarLegendaExpandida ? 2000 : 2\"></div>\n <div class=\"legend\" #legendContainer>\n @for (item of lista.slice(0, 2); track item) {\n <div class=\"item\" (click)=\"onClickItem(item)\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual ml-1\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n\n <!-- Container flutuante da legenda expandida -->\n @if (mostrarLegendaExpandida) {\n <div [class.selected]=\"selectedItem() != null\" style=\"border-top: none; border-top-left-radius: 0; border-top-right-radius: 0;\" class=\"legenda-expandida\" [style.width.px]=\"larguraCard\" id=\"caixaExpandida\">\n @for (item of lista.slice(2); track item) {\n <div style=\"margin-left: 48px;\" [style.width.px]=\"larguraLegenda\" (click)=\"onClickItem(item)\" class=\"item\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n <div class=\"item d-inline-flex\" style=\"margin-left: 10px; align-items: center; justify-content: right;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MENOS' | translate}}</span>\n <button mat-icon-button id=\"btnVerMenos\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_less</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @else {\n <div>\n @for (i of [1,2]; track i) {\n <div >\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '15px' }\"\n ></ngx-skeleton-loader>\n </div>\n }\n </div>\n}\n<!-- Botão de expandir -->\n@if (lista.length > 2 && !mostrarLegendaExpandida && !loading) {\n <div class=\"item d-inline-flex\" style=\"align-items: center; justify-content: right; margin-top: -15px; margin-right: -15px;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MAIS' | translate}}</span>\n <button mat-icon-button id=\"btnVeMais\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n}\n</mat-card>\n</div>\n","/*\n * Public API Surface of card-widget-percentual\n */\n\nexport * from './lib/card-widget-percentual.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAsBa,6BAA6B,CAAA;IAOxC,IAAsB,QAAQ,CAAC,KAAc,EAAA;AAC3C,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;IAGtB,IAAwB,YAAY,CAAC,OAAyB,EAAA;AAC5D,QAAA,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;YAAE;AAEvE,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,eAAe,EAAE;;IAGxB,IAA2B,aAAa,CAAC,IAAoB,EAAA;AAC3D,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;;IA0B7B,sBAAsB,GAAA;AACpB,QAAA,IAAI,CAAC,uBAAuB,GAAG,CAAC,IAAI,CAAC,uBAAuB;AAE5D,QAAA,IAAI,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,kBAAkB,EAAE;;YAEpF,UAAU,CAAC,MAAK;;;gBAGd,IAAI,IAAI,CAAC,gBAAiB,CAAC,aAAa,EAAE,WAAW,GAAG,CAAC,EAAE;oBACzD,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAiB,CAAC,aAAc,CAAC,WAAW;AACjE,oBAAA,IAAI,CAAC,WAAW,IAAI,OAAO,CAAC;;gBAE9B,IAAI,IAAI,CAAC,kBAAmB,CAAC,aAAa,EAAE,WAAW,GAAG,CAAC,EAAE;oBAC3D,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAmB,CAAC,aAAc,CAAC,WAAW;AACnE,oBAAA,IAAI,CAAC,cAAc,GAAG,OAAO;;AAEjC,aAAC,CAAC;;;AAIN,IAAA,WAAA,GAAA;AA/DA,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAwB,IAAI,wDAAC;QAEzC,IAAA,CAAA,KAAK,GAAW,EAAE;QAClB,IAAA,CAAA,SAAS,GAAW,EAAE;AAiBrB,QAAA,IAAA,CAAA,kBAAkB,GAAG,IAAI,YAAY,EAAkB;AAOzD,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAmB,EAAE,yDAAC;AAEpD,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MACf,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,iDAChE;QAED,IAAA,CAAA,uBAAuB,GAAG,KAAK;QAC/B,IAAA,CAAA,cAAc,GAAG,GAAG;QACpB,IAAA,CAAA,WAAW,GAAG,GAAG;AAEjB,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAM,EAAE,wDAAC;QAE9B,IAAA,CAAA,OAAO,GAAG,KAAK;QAyBb,IAAI,CAAC,eAAe,EAAE;AACtB,QAAA,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,CAAC;;IAGtD,eAAe,GAAA;;AAGb,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE;AAClC,QAAA,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE;AAElC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,MAAM,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK;YAC/C,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE;AAC9B,YAAA,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AAC7B,YAAA,IAAI,EAAE,CAAC,IAAI,CAAC,KAAK;AAClB,SAAA,CAAC,CAAC;AAEH,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC;AACpB,YAAA,OAAO,EAAE;AACP,gBAAA,OAAO,EAAE,MAAM;gBACf,CAAC,EAAE,IAAI;gBACP,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAA;AAChD,oBAAA,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK;AACjB,oBAAA,MAAM,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,WAAW;;AAGvC,oBAAA,IAAI,CAAC,GAAG,YAAY,GAAG,GAAG,EAAE;AAC1B,wBAAA,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC;;AAE5B,oBAAA,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC;iBAC1B;AACD,gBAAA,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;AAC/B,gBAAA,SAAS,EAAE,CAAC,MAAa,KAAI;oBAC3B,OAAO,MAAM,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,IAC3B,CAAA;;;;;;AAMwB,kCAAA,EAAA,CAAC,CAAC,KAAK,CAAA;;;AAG3B,cAAA,EAAA,CAAC,CAAC,UAAU,CAAA,oCAAA,EAAuC,CAAC,CAAC,KAAK,CAAA;AACZ,4DAAA,EAAA,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,IAAI,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;AAC/E,kBAAA,CAAA,CACR,CAAC,IAAI,CAAC,EAAE,CAAC;;AAEb,aAAA;YACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE;AACnE,YAAA,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9H,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE;YACrC;AACD,SAAA,CAAC;;AAIF;;;;;;;;;;;;;;;;;;;;;;;;AAwBK;;AAGP,IAAA,qBAAqB,CAAC,KAAa,EAAA;QACjC,OAAO,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,GAAG,CAAC;;AAG5D,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE;;AAG7B,IAAA,WAAW,CAAC,IAAoB,EAAA;AAC9B,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;AAC3B,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;;8GAnKzB,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA7B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,6BAA6B,kuBCtB1C,yhIAsFA,EAAA,MAAA,EAAA,CAAA,qqFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDlE2B,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,EAAA,QAAA,EAAA,sFAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,oGAAE,mBAAmB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,YAAA,EAAA,SAAA,EAAA,aAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,EAAA,cAAA,EAAA,YAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,0BAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,4BAAA,EAAA,gCAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,wBAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,eAAA,EAAA,sBAAA,EAAA,0BAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,uBAAA,EAAA,YAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,wBAAA,EAAA,eAAA,EAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAmB,uBAAuB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,aAAA,EAAA,YAAA,EAAA,WAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAApH,WAAW,0CAAiE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAE5F,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBANzC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,4BAA4B,WAG7B,CAAC,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,uBAAuB,CAAC,EAAA,QAAA,EAAA,yhIAAA,EAAA,MAAA,EAAA,CAAA,qqFAAA,CAAA,EAAA;wDAMxH,KAAK,EAAA,CAAA;sBAAb;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBAEqB,QAAQ,EAAA,CAAA;sBAA7B,KAAK;uBAAC,SAAS;gBAIQ,YAAY,EAAA,CAAA;sBAAnC,KAAK;uBAAC,WAAW;gBAOS,aAAa,EAAA,CAAA;sBAAvC,KAAK;uBAAC,cAAc;gBAIX,kBAAkB,EAAA,CAAA;sBAA3B;gBAE2C,aAAa,EAAA,CAAA;sBAAxD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,YAAY,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;gBACM,iBAAiB,EAAA,CAAA;sBAAhE,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,gBAAgB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;gBACC,gBAAgB,EAAA,CAAA;sBAA9D,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,eAAe,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;gBACI,kBAAkB,EAAA,CAAA;sBAAlE,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,iBAAiB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;;AEjDjD;;AAEG;;ACFH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@angulartoolsdr/card-widget-percentual",
|
|
3
|
-
"version": "20.2.
|
|
3
|
+
"version": "20.2.4",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@angular/common": "20.2.
|
|
6
|
-
"@angular/core": "20.2.
|
|
5
|
+
"@angular/common": "20.2.4",
|
|
6
|
+
"@angular/core": "20.2.4",
|
|
7
7
|
"ngx-skeleton-loader": "11.3.0",
|
|
8
|
-
"@angulartoolsdr/translation": "20.2.
|
|
8
|
+
"@angulartoolsdr/translation": "20.2.4",
|
|
9
9
|
"ngx-echarts": "^20.0.2",
|
|
10
|
-
"@angular/material": "20.2.
|
|
10
|
+
"@angular/material": "20.2.2"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"tslib": "^2.8.1"
|