@acorex-platform/module-dashboard-management-client 0.0.33 → 0.0.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/{acorex-platform-module-dashboard-management-client-acorex-platform-module-dashboard-management-client-DxkwqZno.mjs → acorex-platform-module-dashboard-management-client-acorex-platform-module-dashboard-management-client-BUmHWNqL.mjs} +904 -69
- package/fesm2022/acorex-platform-module-dashboard-management-client-acorex-platform-module-dashboard-management-client-BUmHWNqL.mjs.map +1 -0
- package/fesm2022/acorex-platform-module-dashboard-management-client-contracts-entities-dashboard.mjs +1 -0
- package/fesm2022/acorex-platform-module-dashboard-management-client-contracts-entities-dashboard.mjs.map +1 -1
- package/fesm2022/{acorex-platform-module-dashboard-management-client-contracts-entity-catalog-acorex-platform-module-dashboard-management-client-contracts-entity-catalog-Dubv7lD6.mjs → acorex-platform-module-dashboard-management-client-contracts-entity-catalog-acorex-platform-module-dashboard-management-client-contracts-entity-catalog-CPDwiLWC.mjs} +3 -2
- package/fesm2022/acorex-platform-module-dashboard-management-client-contracts-entity-catalog-acorex-platform-module-dashboard-management-client-contracts-entity-catalog-CPDwiLWC.mjs.map +1 -0
- package/fesm2022/{acorex-platform-module-dashboard-management-client-contracts-entity-catalog-dashboard.entity-DX6PhoGP.mjs → acorex-platform-module-dashboard-management-client-contracts-entity-catalog-dashboard.entity-C1ju-BQM.mjs} +2 -2
- package/fesm2022/{acorex-platform-module-dashboard-management-client-contracts-entity-catalog-dashboard.entity-DX6PhoGP.mjs.map → acorex-platform-module-dashboard-management-client-contracts-entity-catalog-dashboard.entity-C1ju-BQM.mjs.map} +1 -1
- package/fesm2022/acorex-platform-module-dashboard-management-client-contracts-entity-catalog.mjs +1 -1
- package/fesm2022/acorex-platform-module-dashboard-management-client-contracts.mjs +11 -1
- package/fesm2022/acorex-platform-module-dashboard-management-client-contracts.mjs.map +1 -1
- package/fesm2022/{acorex-platform-module-dashboard-management-client-index-DN7YO4nx.mjs → acorex-platform-module-dashboard-management-client-index-C1Te5cDf.mjs} +2 -2
- package/fesm2022/{acorex-platform-module-dashboard-management-client-index-DN7YO4nx.mjs.map → acorex-platform-module-dashboard-management-client-index-C1Te5cDf.mjs.map} +1 -1
- package/fesm2022/acorex-platform-module-dashboard-management-client-local-entities.mjs.map +1 -1
- package/fesm2022/acorex-platform-module-dashboard-management-client.mjs +1 -1
- package/package.json +1 -1
- package/types/acorex-platform-module-dashboard-management-client-contracts.d.ts +19 -2
- package/types/acorex-platform-module-dashboard-management-client.d.ts +82 -4
- package/fesm2022/acorex-platform-module-dashboard-management-client-acorex-platform-module-dashboard-management-client-DxkwqZno.mjs.map +0 -1
- package/fesm2022/acorex-platform-module-dashboard-management-client-contracts-entity-catalog-acorex-platform-module-dashboard-management-client-contracts-entity-catalog-Dubv7lD6.mjs.map +0 -1
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import { AXPSessionService, AXP_PERMISSION_DEFINITION_PROVIDER } from '@acorex-platform/framework-client/auth';
|
|
2
2
|
import { AXPSettingsService, AXP_PROTECTED_ROUTE_GUARDS, AXP_HOME_PAGES, AXP_HOME_PAGE_DEFAULT_KEY, AXP_MENU_PROVIDER } from '@acorex-platform/framework-client/common';
|
|
3
3
|
import { AXPDataGenerator, AXPDeviceService, AXP_MODULE_MANIFEST_PROVIDER, provideLazyProvider } from '@acorex-platform/framework-client/core';
|
|
4
|
-
import {
|
|
4
|
+
import { AXPStateMessageComponent, AXPItemConfiguratorComponent, AXPWidgetPropertyViewerComponent, AXP_PAGE_COMPONENT_PROVIDER, AXPThemeLayoutBlockComponent } from '@acorex-platform/framework-client/layout/components';
|
|
5
5
|
import { AXPEntityService, cloneLayoutArrays, ensureLayoutSection, ensureLayoutPropertyView, resolveEntityPluginDetailPageOrder, ensureListActions, actionExists, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_STORAGE_MIDDLEWARE } from '@acorex-platform/framework-client/layout/entity';
|
|
6
|
-
import * as i3
|
|
7
|
-
import { AXPBaseWidgetComponent, AXPWidgetCoreModule, AXPValueWidgetComponent, AXP_WIDGET_DEFINITION_PROVIDER } from '@acorex-platform/framework-client/layout/widget-core';
|
|
8
|
-
import { AXP_APPEARANCE_PROPERTY_GROUP, createQueryOptionsProperty, AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_COLOR_PROPERTY, AXP_BG_COLOR_PROPERTY,
|
|
6
|
+
import * as i3 from '@acorex-platform/framework-client/layout/widget-core';
|
|
7
|
+
import { AXPBaseWidgetComponent, AXPWidgetCoreModule, AXP_WIDGETS_EDITOR_CATEGORY, AXPColumnWidgetComponent, AXPWidgetRegistryService, AXPValueWidgetComponent, AXP_WIDGET_DEFINITION_PROVIDER } from '@acorex-platform/framework-client/layout/widget-core';
|
|
8
|
+
import { AXP_APPEARANCE_PROPERTY_GROUP, createQueryOptionsProperty, AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_COLOR_PROPERTY, AXP_BG_COLOR_PROPERTY, AXPWidgetsModule } from '@acorex-platform/framework-client/layout/widgets';
|
|
9
9
|
import * as i0 from '@angular/core';
|
|
10
|
-
import { inject, Injectable, InjectionToken, computed, DestroyRef, afterNextRender, input, output, ChangeDetectionStrategy, Component, signal, effect,
|
|
10
|
+
import { inject, Injectable, InjectionToken, computed, DestroyRef, afterNextRender, input, output, ChangeDetectionStrategy, Component, signal, effect, model, untracked, ChangeDetectorRef, ElementRef, viewChild, HostListener, Directive, Injector, runInInjectionContext, ViewEncapsulation, NgModule } from '@angular/core';
|
|
11
11
|
import { RootConfig, AXPAdministrationPermissionKeys, AXPDashboardManagementMenuKeys, buildEntityScopeRef, readScopeRoleIds, buildTenantScopeRef, buildUserScopeRef, normalizeDashboardScopeRef, readScopeUserId, AXPHomeDashboardSetting, readScopeTenantId } from '@acorex-platform/module-dashboard-management-client/contracts';
|
|
12
12
|
import { AXPCommonMenuKeys, AXPCommonPermissionGroupKeys } from '@acorex-platform/module-common-client/contracts';
|
|
13
13
|
import { firstValueFrom, Subject, interval, map, fromEvent } from 'rxjs';
|
|
14
|
+
import { RootConfig as RootConfig$1, AXP_CHART_QUERY_RESULT_TYPE, AXP_CHART_CONFIGURATOR_WIDGET_NAME } from '@acorex-platform/module-dashboard-management-client/contracts';
|
|
14
15
|
import { AXBarChartComponent } from '@acorex/charts/bar-chart';
|
|
15
16
|
import { AXChartLegendComponent } from '@acorex/charts/chart-legend';
|
|
16
|
-
import * as i3 from '@acorex/core/translation';
|
|
17
|
+
import * as i3$1 from '@acorex/core/translation';
|
|
17
18
|
import { AXTranslationService, AXTranslationModule, resolveMultiLanguageString } from '@acorex/core/translation';
|
|
18
19
|
import { AXPQueryExecutor, AXPCommandService } from '@acorex-platform/framework-client/runtime';
|
|
19
20
|
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
@@ -23,7 +24,9 @@ import { runtimeQueryPayloadData, runtimeQueryCollectionData, AXPWidgetsCatalog,
|
|
|
23
24
|
import * as i1 from '@acorex/components/tabs';
|
|
24
25
|
import { AXTabsModule } from '@acorex/components/tabs';
|
|
25
26
|
import { cloneProperty, AXPWidgetGroupEnum, createStringProperty } from '@acorex-platform/framework-shared/widget-core';
|
|
26
|
-
import {
|
|
27
|
+
import { isEqual } from 'lodash-es';
|
|
28
|
+
import * as i2 from '@angular/common';
|
|
29
|
+
import { AsyncPipe, CommonModule, DOCUMENT } from '@angular/common';
|
|
27
30
|
import { AXDonutChartComponent } from '@acorex/charts/donut-chart';
|
|
28
31
|
import { AXFunnelChartComponent } from '@acorex/charts/funnel-chart';
|
|
29
32
|
import { AXGaugeChartComponent } from '@acorex/charts/gauge-chart';
|
|
@@ -33,8 +36,6 @@ import * as i1$1 from '@acorex/components/loading';
|
|
|
33
36
|
import { AXLoadingModule } from '@acorex/components/loading';
|
|
34
37
|
import * as i2$1 from '@acorex/core/format';
|
|
35
38
|
import { AXFormatService, AXFormatModule } from '@acorex/core/format';
|
|
36
|
-
import * as i2 from '@angular/common';
|
|
37
|
-
import { CommonModule, DOCUMENT } from '@angular/common';
|
|
38
39
|
import { AXPPageLayoutBase, AXPPageLayoutBaseComponent, AXPPageLayoutComponent } from '@acorex-platform/framework-client/layout/views';
|
|
39
40
|
import * as i2$3 from '@acorex/components/decorators';
|
|
40
41
|
import { AXDecoratorModule } from '@acorex/components/decorators';
|
|
@@ -47,7 +48,7 @@ import * as i1$2 from '@angular/forms';
|
|
|
47
48
|
import { FormsModule } from '@angular/forms';
|
|
48
49
|
import { AXPEntityCommandScope } from '@acorex-platform/framework-shared/entity';
|
|
49
50
|
import { AXP_WIDGET_PICKER_TAB_CONTEXT, AXPWidgetPickerService, AXPDesignerService } from '@acorex-platform/framework-client/layout/designer';
|
|
50
|
-
import { RootConfig as RootConfig$
|
|
51
|
+
import { RootConfig as RootConfig$2 } from '@acorex-platform/module-security-management-client/contracts';
|
|
51
52
|
import { AXDialogService } from '@acorex/components/dialog';
|
|
52
53
|
import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
|
|
53
54
|
import { AXPLayoutBuilderService } from '@acorex-platform/framework-client/layout/builder';
|
|
@@ -58,7 +59,7 @@ import * as i2$4 from '@acorex/components/grid-layout-builder';
|
|
|
58
59
|
import { AXGridLayoutContainerComponent, AXGridLayoutBuilderModule } from '@acorex/components/grid-layout-builder';
|
|
59
60
|
import * as i4 from '@acorex/components/menu';
|
|
60
61
|
import { AXMenuModule } from '@acorex/components/menu';
|
|
61
|
-
import * as i3$
|
|
62
|
+
import * as i3$2 from '@acorex/components/dropdown';
|
|
62
63
|
import { AXDropdownModule } from '@acorex/components/dropdown';
|
|
63
64
|
import { ActivatedRoute } from '@angular/router';
|
|
64
65
|
import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
|
|
@@ -73,7 +74,7 @@ import * as i5 from '@acorex/components/switch';
|
|
|
73
74
|
import { AXSwitchModule } from '@acorex/components/switch';
|
|
74
75
|
import * as i3$3 from '@acorex/components/text-box';
|
|
75
76
|
import { AXTextBoxModule } from '@acorex/components/text-box';
|
|
76
|
-
import { RootConfig as RootConfig$
|
|
77
|
+
import { RootConfig as RootConfig$3 } from '@acorex-platform/module-organization-management-client/contracts';
|
|
77
78
|
|
|
78
79
|
//#region ---- Imports ----
|
|
79
80
|
//#endregion
|
|
@@ -763,6 +764,33 @@ function buildDashboardChartWidgetWithQuery(id, title, type, x, y, queryOrTabs,
|
|
|
763
764
|
const options = tabs ? { title, query, queryTabs: tabs } : { title, query };
|
|
764
765
|
return buildDashboardChartWidget(id, title, type, x, y, options, size);
|
|
765
766
|
}
|
|
767
|
+
const CHART_CARD_TAB_COLORS = ['#0ea5e9', '#43b57f', '#f59e0b', '#8b5cf6', '#ef4444'];
|
|
768
|
+
function buildDashboardChartCardWidget(id, title, x, y, tabs, size = [4, 4]) {
|
|
769
|
+
const { config, meta } = layoutFromDimensions(id, AXP_CHART_WIDE_DIMENSIONS, { x, y, lg: size });
|
|
770
|
+
const tabNodes = tabs.map((tab, index) => ({
|
|
771
|
+
type: `DashboardManagement:Widget:Dashboard:${tab.type}`,
|
|
772
|
+
options: {
|
|
773
|
+
title: tab.label,
|
|
774
|
+
query: tab.query,
|
|
775
|
+
color: tab.color ?? CHART_CARD_TAB_COLORS[index % CHART_CARD_TAB_COLORS.length],
|
|
776
|
+
},
|
|
777
|
+
name: `DashboardManagement:Widget:Dashboard:${tab.type}-${id}-${index}`,
|
|
778
|
+
path: `DashboardManagement:Widget:Dashboard:${tab.type}-${id}-${index}`,
|
|
779
|
+
}));
|
|
780
|
+
return {
|
|
781
|
+
config: { ...config, title },
|
|
782
|
+
node: {
|
|
783
|
+
type: 'DashboardManagement:Widget:Dashboard:ChartCard',
|
|
784
|
+
options: {
|
|
785
|
+
title,
|
|
786
|
+
tabs: tabNodes,
|
|
787
|
+
},
|
|
788
|
+
meta,
|
|
789
|
+
name: `DashboardManagement:Widget:Dashboard:ChartCard-${id}`,
|
|
790
|
+
path: `DashboardManagement:Widget:Dashboard:ChartCard-${id}`,
|
|
791
|
+
},
|
|
792
|
+
};
|
|
793
|
+
}
|
|
766
794
|
function buildDashboardShortcut(id, x, y, title, icon, path, color, size = [2, 1]) {
|
|
767
795
|
const { config, meta } = layoutFromDimensions(id, AXP_UTILITY_SHORTCUT_DIMENSIONS, { x, y, lg: size });
|
|
768
796
|
return {
|
|
@@ -835,6 +863,97 @@ function buildDashboardWeatherWidget(id, x, y, options, size = [3, 2]) {
|
|
|
835
863
|
}
|
|
836
864
|
//#endregion
|
|
837
865
|
|
|
866
|
+
//#region ----- Imports -----
|
|
867
|
+
//#endregion
|
|
868
|
+
//#region ----- Constants -----
|
|
869
|
+
/** New Chart Tabs rows default to donut so + Add Item is immediately typed. */
|
|
870
|
+
const AXP_CHART_CONFIGURATOR_DEFAULT_TYPE = RootConfig$1.widgets.donutChart;
|
|
871
|
+
const RESULT_TYPE_BY_WIDGET = {
|
|
872
|
+
[RootConfig$1.widgets.barChart]: AXP_CHART_QUERY_RESULT_TYPE.barSeries,
|
|
873
|
+
[RootConfig$1.widgets.donutChart]: AXP_CHART_QUERY_RESULT_TYPE.donutSeries,
|
|
874
|
+
[RootConfig$1.widgets.lineChart]: AXP_CHART_QUERY_RESULT_TYPE.lineSeries,
|
|
875
|
+
[RootConfig$1.widgets.gaugeChart]: AXP_CHART_QUERY_RESULT_TYPE.gaugeValue,
|
|
876
|
+
[RootConfig$1.widgets.funnelChart]: AXP_CHART_QUERY_RESULT_TYPE.funnelSeries,
|
|
877
|
+
[RootConfig$1.widgets.heatmapChart]: AXP_CHART_QUERY_RESULT_TYPE.heatmapSeries,
|
|
878
|
+
[RootConfig$1.widgets.kpiStatCard]: AXP_CHART_QUERY_RESULT_TYPE.kpiStatCard,
|
|
879
|
+
[RootConfig$1.widgets.kpiProgress]: AXP_CHART_QUERY_RESULT_TYPE.kpiProgress,
|
|
880
|
+
[RootConfig$1.widgets.kpiSegmented]: AXP_CHART_QUERY_RESULT_TYPE.kpiSegmented,
|
|
881
|
+
[RootConfig$1.widgets.kpiDetails]: AXP_CHART_QUERY_RESULT_TYPE.kpiDetails,
|
|
882
|
+
};
|
|
883
|
+
const AXIS_RESULT_TYPES = new Set([
|
|
884
|
+
AXP_CHART_QUERY_RESULT_TYPE.barSeries,
|
|
885
|
+
AXP_CHART_QUERY_RESULT_TYPE.lineSeries,
|
|
886
|
+
AXP_CHART_QUERY_RESULT_TYPE.heatmapSeries,
|
|
887
|
+
]);
|
|
888
|
+
const APPEARANCE_OPTION_KEYS = ['title', 'color'];
|
|
889
|
+
//#endregion
|
|
890
|
+
//#region ----- Helpers -----
|
|
891
|
+
function chartResultTypeForWidget(type) {
|
|
892
|
+
return RESULT_TYPE_BY_WIDGET[type];
|
|
893
|
+
}
|
|
894
|
+
function chartTypeUsesAxisLabels(resultType) {
|
|
895
|
+
return AXIS_RESULT_TYPES.has(resultType);
|
|
896
|
+
}
|
|
897
|
+
function asChartTabWidgetNode(value) {
|
|
898
|
+
if (value == null || typeof value !== 'object' || Array.isArray(value)) {
|
|
899
|
+
return null;
|
|
900
|
+
}
|
|
901
|
+
const node = value;
|
|
902
|
+
const type = typeof node.type === 'string' ? node.type.trim() : '';
|
|
903
|
+
return type ? node : null;
|
|
904
|
+
}
|
|
905
|
+
function readChartTabTitle(node) {
|
|
906
|
+
const opts = node.options;
|
|
907
|
+
return opts?.['title'] ?? opts?.['label'];
|
|
908
|
+
}
|
|
909
|
+
function readChartTabQuery(node) {
|
|
910
|
+
const opts = node.options;
|
|
911
|
+
const query = opts?.['query'];
|
|
912
|
+
return typeof query === 'string' ? query.trim() : '';
|
|
913
|
+
}
|
|
914
|
+
function isChartTabConfigured(node) {
|
|
915
|
+
return readChartTabQuery(node).length > 0;
|
|
916
|
+
}
|
|
917
|
+
/** Widget Configuration Save: empty cards are allowed; every present tab needs a query. */
|
|
918
|
+
function areChartCardTabsConfigured(widget) {
|
|
919
|
+
if (widget == null || widget.type !== RootConfig$1.widgets.chartCard) {
|
|
920
|
+
return true;
|
|
921
|
+
}
|
|
922
|
+
const tabs = widget.options?.['tabs'];
|
|
923
|
+
if (!Array.isArray(tabs) || tabs.length === 0) {
|
|
924
|
+
return true;
|
|
925
|
+
}
|
|
926
|
+
return tabs.every((tab) => {
|
|
927
|
+
const node = asChartTabWidgetNode(tab);
|
|
928
|
+
return node != null && isChartTabConfigured(node);
|
|
929
|
+
});
|
|
930
|
+
}
|
|
931
|
+
function readStashedChartAppearance(options) {
|
|
932
|
+
const stash = {};
|
|
933
|
+
for (const key of APPEARANCE_OPTION_KEYS) {
|
|
934
|
+
const value = options[key];
|
|
935
|
+
if (value != null && String(value).trim() !== '') {
|
|
936
|
+
stash[key] = value;
|
|
937
|
+
}
|
|
938
|
+
}
|
|
939
|
+
return stash;
|
|
940
|
+
}
|
|
941
|
+
function optionsAfterChartTypeSwitch(options, previousType, nextType, stashedAppearance) {
|
|
942
|
+
const next = { ...options };
|
|
943
|
+
for (const key of APPEARANCE_OPTION_KEYS) {
|
|
944
|
+
if (next[key] == null && stashedAppearance[key] != null) {
|
|
945
|
+
next[key] = stashedAppearance[key];
|
|
946
|
+
}
|
|
947
|
+
}
|
|
948
|
+
if (chartResultTypeForWidget(previousType) !== chartResultTypeForWidget(nextType)) {
|
|
949
|
+
delete next['query'];
|
|
950
|
+
delete next['xAxisLabel'];
|
|
951
|
+
delete next['yAxisLabel'];
|
|
952
|
+
}
|
|
953
|
+
return next;
|
|
954
|
+
}
|
|
955
|
+
//#endregion
|
|
956
|
+
|
|
838
957
|
/** Layout grid size token (`2x2`) provided by {@link AxmDashboardWidgetGridSizeDirective}. */
|
|
839
958
|
const AXP_DASHBOARD_WIDGET_GRID_SIZE = new InjectionToken('AXP_DASHBOARD_WIDGET_GRID_SIZE');
|
|
840
959
|
|
|
@@ -1681,7 +1800,7 @@ class AXPChartQueryTabsComponent {
|
|
|
1681
1800
|
}
|
|
1682
1801
|
</ax-tabs>
|
|
1683
1802
|
}
|
|
1684
|
-
`, isInline: true, styles: [":host{display:block;flex:0 0 auto}.axp-chart-query-tabs{margin-bottom:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1803
|
+
`, isInline: true, styles: [":host{display:block;flex:0 0 auto}.axp-chart-query-tabs{margin-bottom:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1685
1804
|
}
|
|
1686
1805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPChartQueryTabsComponent, decorators: [{
|
|
1687
1806
|
type: Component,
|
|
@@ -2226,6 +2345,740 @@ const AXPBarChartWidget = {
|
|
|
2226
2345
|
},
|
|
2227
2346
|
};
|
|
2228
2347
|
|
|
2348
|
+
//#region ----- Imports -----
|
|
2349
|
+
//#endregion
|
|
2350
|
+
//#region ----- Component -----
|
|
2351
|
+
class AXPChartCardWidgetViewComponent extends AXPDashboardWidgetComponent {
|
|
2352
|
+
constructor() {
|
|
2353
|
+
super(...arguments);
|
|
2354
|
+
//#region ----- Services & Dependencies -----
|
|
2355
|
+
this.translationService = inject(AXTranslationService);
|
|
2356
|
+
//#endregion
|
|
2357
|
+
//#region ----- State Signals -----
|
|
2358
|
+
this.tabNodes = computed(() => {
|
|
2359
|
+
const raw = this.options()['tabs'];
|
|
2360
|
+
if (!Array.isArray(raw)) {
|
|
2361
|
+
return [];
|
|
2362
|
+
}
|
|
2363
|
+
return raw.map(asChartTabWidgetNode).filter((node) => node != null);
|
|
2364
|
+
}, /* @ts-ignore */
|
|
2365
|
+
...(ngDevMode ? [{ debugName: "tabNodes" }] : /* istanbul ignore next */ []));
|
|
2366
|
+
this.tabStrip = signal([], /* @ts-ignore */
|
|
2367
|
+
...(ngDevMode ? [{ debugName: "tabStrip" }] : /* istanbul ignore next */ []));
|
|
2368
|
+
this.activeTabIndex = signal(0, /* @ts-ignore */
|
|
2369
|
+
...(ngDevMode ? [{ debugName: "activeTabIndex" }] : /* istanbul ignore next */ []));
|
|
2370
|
+
this.activeTabNode = computed(() => {
|
|
2371
|
+
const tabs = this.tabNodes();
|
|
2372
|
+
if (tabs.length === 0) {
|
|
2373
|
+
return null;
|
|
2374
|
+
}
|
|
2375
|
+
const index = Math.min(Math.max(this.activeTabIndex(), 0), tabs.length - 1);
|
|
2376
|
+
return tabs[index] ?? null;
|
|
2377
|
+
}, /* @ts-ignore */
|
|
2378
|
+
...(ngDevMode ? [{ debugName: "activeTabNode" }] : /* istanbul ignore next */ []));
|
|
2379
|
+
//#endregion
|
|
2380
|
+
//#region ----- Lifecycle -----
|
|
2381
|
+
this.clampTabIndexEffect = effect(() => {
|
|
2382
|
+
const tabs = this.tabNodes();
|
|
2383
|
+
if (this.activeTabIndex() >= tabs.length) {
|
|
2384
|
+
this.activeTabIndex.set(0);
|
|
2385
|
+
}
|
|
2386
|
+
}, /* @ts-ignore */
|
|
2387
|
+
...(ngDevMode ? [{ debugName: "clampTabIndexEffect" }] : /* istanbul ignore next */ []));
|
|
2388
|
+
this.resolveTabLabelsEffect = effect(() => {
|
|
2389
|
+
const nodes = this.tabNodes();
|
|
2390
|
+
void Promise.all(nodes.map((node) => this.resolveTabLabel(node))).then((labels) => {
|
|
2391
|
+
this.tabStrip.set(labels.map((label, index) => ({
|
|
2392
|
+
label,
|
|
2393
|
+
query: nodes[index]?.type ?? `tab-${index}`,
|
|
2394
|
+
queryInput: undefined,
|
|
2395
|
+
})));
|
|
2396
|
+
});
|
|
2397
|
+
}, /* @ts-ignore */
|
|
2398
|
+
...(ngDevMode ? [{ debugName: "resolveTabLabelsEffect" }] : /* istanbul ignore next */ []));
|
|
2399
|
+
}
|
|
2400
|
+
//#endregion
|
|
2401
|
+
//#region ----- Event Handlers -----
|
|
2402
|
+
selectQueryTab(index) {
|
|
2403
|
+
this.activeTabIndex.set(index);
|
|
2404
|
+
}
|
|
2405
|
+
isTabConfigured(node) {
|
|
2406
|
+
return isChartTabConfigured(node);
|
|
2407
|
+
}
|
|
2408
|
+
//#endregion
|
|
2409
|
+
//#region ----- Localization -----
|
|
2410
|
+
async resolveTabLabel(node) {
|
|
2411
|
+
const raw = readChartTabTitle(node);
|
|
2412
|
+
if (raw != null && typeof raw === 'object' && !Array.isArray(raw)) {
|
|
2413
|
+
return this.translationService.resolve(raw);
|
|
2414
|
+
}
|
|
2415
|
+
const text = String(raw ?? '').trim();
|
|
2416
|
+
if (text.startsWith('@')) {
|
|
2417
|
+
return this.translationService.translateAsync(text);
|
|
2418
|
+
}
|
|
2419
|
+
if (text) {
|
|
2420
|
+
return text;
|
|
2421
|
+
}
|
|
2422
|
+
return this.translationService.translateAsync('@dashboard:widgets.chart-card.untitled-tab');
|
|
2423
|
+
}
|
|
2424
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPChartCardWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2425
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPChartCardWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-chart-widget-host\">\n @if (tabNodes().length === 0) {\n <!-- ----- Empty card when no chart tabs are configured ----- -->\n <axp-state-message\n icon=\"fa-light fa-chart-mixed\"\n [title]=\"'@dashboard:widgets.chart-card.empty-title'\"\n [description]=\"'@dashboard:widgets.chart-card.empty-description'\"\n />\n }\n <!-- ----- Tab strip and the active typed chart widget ----- -->\n @else {\n <axp-chart-query-tabs\n [tabs]=\"tabStrip()\"\n [activeIndex]=\"activeTabIndex()\"\n (activeIndexChange)=\"selectQueryTab($event)\"\n />\n <div class=\"axp-chart-widget-host__body\">\n <!--->\n <!-- ----- Active tab chart (typed widget node) ----- -->\n @if (activeTabNode(); as node) {\n <!--->\n <!-- ----- Incomplete tab: type or query is missing ----- -->\n @if (!isTabConfigured(node)) {\n <axp-state-message\n icon=\"fa-light fa-triangle-exclamation\"\n [title]=\"'@dashboard:widgets.chart-card.incomplete-title'\"\n [description]=\"'@dashboard:widgets.chart-card.incomplete-description'\"\n />\n }\n <!-- ----- Render the typed chart when the tab has a query ----- -->\n @else {\n <ng-container axp-widget-renderer [node]=\"node\" [mode]=\"'view'\"></ng-container>\n }\n }\n </div>\n }\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%;height:100%;min-height:0px;overflow:hidden}:host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;overflow:visible;min-block-size:0}.axp-chart-widget-host{display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;gap:var(--spacing, .25rem)}.axp-chart-widget-host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body{display:flex;min-height:0px;flex:1;flex-direction:column;gap:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 2)}.axp-chart-widget-host__body:not(.axp-chart-widget-host__body--with-legend)>.axp-chart-widget-host__chart--radial{flex:1 1 auto}.axp-chart-widget-host__body--with-legend{min-height:0px;flex:1;gap:var(--spacing, .25rem);display:grid;grid-template-rows:minmax(0,1fr) auto}.axp-chart-widget-host__chart{position:relative;min-height:calc(var(--spacing, .25rem) * 64);width:100%;overflow:hidden;grid-row:1}.axp-chart-widget-host__chart--radial{position:relative;margin-inline:auto;align-self:center;justify-self:center;overflow:hidden;grid-row:1;flex:0 0 auto;height:auto;width:min(100%,18rem);max-width:100%;min-height:12rem;min-width:8rem;aspect-ratio:1 / 1}.axp-chart-widget-host__chart--funnel{position:relative;width:100%;overflow:hidden;block-size:20rem;flex:0 0 auto;max-block-size:24rem;min-block-size:16rem}.axp-chart-widget-host__chart--funnel ax-funnel-chart,.axp-chart-widget-host__chart--funnel .ax-funnel-chart-container{display:block;block-size:100%;inline-size:100%;min-block-size:0}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--funnel){flex:none}.axp-chart-widget-host__chart--heatmap{position:relative;width:100%;max-width:100%;inline-size:100%;block-size:auto;flex:0 0 auto;overflow:visible;min-height:0!important;min-block-size:0!important;max-block-size:none}.axp-chart-widget-host__chart--heatmap ax-heatmap-chart,.axp-chart-widget-host__chart--heatmap .ax-heatmap-chart-container{display:block;inline-size:100%;max-inline-size:100%;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--heatmap){flex:none;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__legend{width:100%;flex:none;padding-inline:calc(var(--spacing, .25rem) * .5);grid-row:2;min-height:0;display:flex;justify-content:center;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}:host ::ng-deep ax-chart-legend{display:block!important;height:auto!important;max-height:none;width:100%}:host ::ng-deep .ax-chart-legend{--ax-legend-bg: var(--ax-sys-color-lighter-surface);--ax-legend-text: var(--ax-sys-color-on-lighter-surface);--ax-legend-border: var(--ax-sys-color-border-lighter-surface);--ax-legend-radius: .625rem;--ax-legend-padding: .375rem .5rem;--ax-legend-gap: .375rem;--ax-legend-item-height: auto;height:auto;max-height:none;width:100%;overflow:visible;padding:var(--ax-legend-padding);gap:var(--ax-legend-gap);color:rgb(var(--ax-legend-text))}:host ::ng-deep .ax-chart-legend.ax-legend-horizontal{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;border:none;background:transparent;background-color:transparent;padding:0}:host ::ng-deep .ax-legend-item{align-items:center;gap:.375rem;height:auto;min-height:1.5rem;padding-block:.2rem;padding-inline:.5rem;border-radius:9999px;border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease,transform .15s ease}:host ::ng-deep .ax-legend-item:hover{border-color:rgb(var(--ax-sys-color-primary-500));background-color:rgb(var(--ax-sys-color-primary-500));box-shadow:0 1px 2px #0f172a0f}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{border-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 35%,rgb(var(--ax-sys-color-border-lightest-surface)))}}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 6%,rgb(var(--ax-sys-color-lightest-surface)))}}:host ::ng-deep .ax-legend-item:active{transform:scale(.98)}:host ::ng-deep .ax-legend-item.ax-legend-item-hidden{opacity:.62}:host ::ng-deep .ax-legend-color{width:.625rem;height:.625rem;flex-shrink:0;border-radius:9999px;box-shadow:0 0 0 1px rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-color{box-shadow:0 0 0 1px color-mix(in srgb,rgb(var(--ax-legend-text)) 18%,transparent)}}:host ::ng-deep .ax-legend-name{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);max-width:9rem;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ax-legend-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);margin-inline-start:0;opacity:1;color:rgb(var(--ax-sys-color-on-lightest-surface))}:host ::ng-deep .ax-legend-percentage{margin-inline-start:0;border-radius:9999px;padding-inline:.4rem;padding-block:.125rem;font-size:.6875rem;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;background-color:rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-percentage{background-color:color-mix(in srgb,rgb(var(--ax-legend-text)) 12%,transparent)}}:host ::ng-deep ax-donut-chart,:host ::ng-deep ax-gauge-chart,:host ::ng-deep ax-bar-chart,:host ::ng-deep ax-line-chart,:host ::ng-deep ax-funnel-chart{display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}:host ::ng-deep ax-donut-chart .ax-donut-chart,:host ::ng-deep ax-gauge-chart .ax-gauge-chart,:host ::ng-deep ax-bar-chart .ax-bar-chart,:host ::ng-deep ax-line-chart .ax-line-chart,:host ::ng-deep ax-funnel-chart .ax-funnel-chart-container{min-height:0!important;height:100%!important;width:100%!important;padding:.25rem!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart .ax-heatmap-chart-container,:host ::ng-deep .axp-chart-widget-host__chart--heatmap .ax-heatmap-chart{min-height:0!important;height:auto!important;width:100%!important;max-width:100%!important;padding:.25rem!important;overflow:visible!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap svg{display:block;width:100%!important;max-width:100%!important;height:auto!important;overflow:visible!important}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPChartQueryTabsComponent, selector: "axp-chart-query-tabs", inputs: ["tabs", "activeIndex"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2426
|
+
}
|
|
2427
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPChartCardWidgetViewComponent, decorators: [{
|
|
2428
|
+
type: Component,
|
|
2429
|
+
args: [{ imports: [AXPChartQueryTabsComponent, AXPWidgetCoreModule, AXPStateMessageComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-chart-widget-host\">\n @if (tabNodes().length === 0) {\n <!-- ----- Empty card when no chart tabs are configured ----- -->\n <axp-state-message\n icon=\"fa-light fa-chart-mixed\"\n [title]=\"'@dashboard:widgets.chart-card.empty-title'\"\n [description]=\"'@dashboard:widgets.chart-card.empty-description'\"\n />\n }\n <!-- ----- Tab strip and the active typed chart widget ----- -->\n @else {\n <axp-chart-query-tabs\n [tabs]=\"tabStrip()\"\n [activeIndex]=\"activeTabIndex()\"\n (activeIndexChange)=\"selectQueryTab($event)\"\n />\n <div class=\"axp-chart-widget-host__body\">\n <!--->\n <!-- ----- Active tab chart (typed widget node) ----- -->\n @if (activeTabNode(); as node) {\n <!--->\n <!-- ----- Incomplete tab: type or query is missing ----- -->\n @if (!isTabConfigured(node)) {\n <axp-state-message\n icon=\"fa-light fa-triangle-exclamation\"\n [title]=\"'@dashboard:widgets.chart-card.incomplete-title'\"\n [description]=\"'@dashboard:widgets.chart-card.incomplete-description'\"\n />\n }\n <!-- ----- Render the typed chart when the tab has a query ----- -->\n @else {\n <ng-container axp-widget-renderer [node]=\"node\" [mode]=\"'view'\"></ng-container>\n }\n }\n </div>\n }\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%;height:100%;min-height:0px;overflow:hidden}:host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;overflow:visible;min-block-size:0}.axp-chart-widget-host{display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;gap:var(--spacing, .25rem)}.axp-chart-widget-host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body{display:flex;min-height:0px;flex:1;flex-direction:column;gap:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 2)}.axp-chart-widget-host__body:not(.axp-chart-widget-host__body--with-legend)>.axp-chart-widget-host__chart--radial{flex:1 1 auto}.axp-chart-widget-host__body--with-legend{min-height:0px;flex:1;gap:var(--spacing, .25rem);display:grid;grid-template-rows:minmax(0,1fr) auto}.axp-chart-widget-host__chart{position:relative;min-height:calc(var(--spacing, .25rem) * 64);width:100%;overflow:hidden;grid-row:1}.axp-chart-widget-host__chart--radial{position:relative;margin-inline:auto;align-self:center;justify-self:center;overflow:hidden;grid-row:1;flex:0 0 auto;height:auto;width:min(100%,18rem);max-width:100%;min-height:12rem;min-width:8rem;aspect-ratio:1 / 1}.axp-chart-widget-host__chart--funnel{position:relative;width:100%;overflow:hidden;block-size:20rem;flex:0 0 auto;max-block-size:24rem;min-block-size:16rem}.axp-chart-widget-host__chart--funnel ax-funnel-chart,.axp-chart-widget-host__chart--funnel .ax-funnel-chart-container{display:block;block-size:100%;inline-size:100%;min-block-size:0}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--funnel){flex:none}.axp-chart-widget-host__chart--heatmap{position:relative;width:100%;max-width:100%;inline-size:100%;block-size:auto;flex:0 0 auto;overflow:visible;min-height:0!important;min-block-size:0!important;max-block-size:none}.axp-chart-widget-host__chart--heatmap ax-heatmap-chart,.axp-chart-widget-host__chart--heatmap .ax-heatmap-chart-container{display:block;inline-size:100%;max-inline-size:100%;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--heatmap){flex:none;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__legend{width:100%;flex:none;padding-inline:calc(var(--spacing, .25rem) * .5);grid-row:2;min-height:0;display:flex;justify-content:center;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}:host ::ng-deep ax-chart-legend{display:block!important;height:auto!important;max-height:none;width:100%}:host ::ng-deep .ax-chart-legend{--ax-legend-bg: var(--ax-sys-color-lighter-surface);--ax-legend-text: var(--ax-sys-color-on-lighter-surface);--ax-legend-border: var(--ax-sys-color-border-lighter-surface);--ax-legend-radius: .625rem;--ax-legend-padding: .375rem .5rem;--ax-legend-gap: .375rem;--ax-legend-item-height: auto;height:auto;max-height:none;width:100%;overflow:visible;padding:var(--ax-legend-padding);gap:var(--ax-legend-gap);color:rgb(var(--ax-legend-text))}:host ::ng-deep .ax-chart-legend.ax-legend-horizontal{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;border:none;background:transparent;background-color:transparent;padding:0}:host ::ng-deep .ax-legend-item{align-items:center;gap:.375rem;height:auto;min-height:1.5rem;padding-block:.2rem;padding-inline:.5rem;border-radius:9999px;border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease,transform .15s ease}:host ::ng-deep .ax-legend-item:hover{border-color:rgb(var(--ax-sys-color-primary-500));background-color:rgb(var(--ax-sys-color-primary-500));box-shadow:0 1px 2px #0f172a0f}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{border-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 35%,rgb(var(--ax-sys-color-border-lightest-surface)))}}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 6%,rgb(var(--ax-sys-color-lightest-surface)))}}:host ::ng-deep .ax-legend-item:active{transform:scale(.98)}:host ::ng-deep .ax-legend-item.ax-legend-item-hidden{opacity:.62}:host ::ng-deep .ax-legend-color{width:.625rem;height:.625rem;flex-shrink:0;border-radius:9999px;box-shadow:0 0 0 1px rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-color{box-shadow:0 0 0 1px color-mix(in srgb,rgb(var(--ax-legend-text)) 18%,transparent)}}:host ::ng-deep .ax-legend-name{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);max-width:9rem;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ax-legend-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);margin-inline-start:0;opacity:1;color:rgb(var(--ax-sys-color-on-lightest-surface))}:host ::ng-deep .ax-legend-percentage{margin-inline-start:0;border-radius:9999px;padding-inline:.4rem;padding-block:.125rem;font-size:.6875rem;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;background-color:rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-percentage{background-color:color-mix(in srgb,rgb(var(--ax-legend-text)) 12%,transparent)}}:host ::ng-deep ax-donut-chart,:host ::ng-deep ax-gauge-chart,:host ::ng-deep ax-bar-chart,:host ::ng-deep ax-line-chart,:host ::ng-deep ax-funnel-chart{display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}:host ::ng-deep ax-donut-chart .ax-donut-chart,:host ::ng-deep ax-gauge-chart .ax-gauge-chart,:host ::ng-deep ax-bar-chart .ax-bar-chart,:host ::ng-deep ax-line-chart .ax-line-chart,:host ::ng-deep ax-funnel-chart .ax-funnel-chart-container{min-height:0!important;height:100%!important;width:100%!important;padding:.25rem!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart .ax-heatmap-chart-container,:host ::ng-deep .axp-chart-widget-host__chart--heatmap .ax-heatmap-chart{min-height:0!important;height:auto!important;width:100%!important;max-width:100%!important;padding:.25rem!important;overflow:visible!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap svg{display:block;width:100%!important;max-width:100%!important;height:auto!important;overflow:visible!important}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
2430
|
+
}] });
|
|
2431
|
+
|
|
2432
|
+
var chartCardWidget_component = /*#__PURE__*/Object.freeze({
|
|
2433
|
+
__proto__: null,
|
|
2434
|
+
AXPChartCardWidgetViewComponent: AXPChartCardWidgetViewComponent
|
|
2435
|
+
});
|
|
2436
|
+
|
|
2437
|
+
//#region ----- Imports -----
|
|
2438
|
+
//#endregion
|
|
2439
|
+
//#region ----- Config -----
|
|
2440
|
+
const AXPChartCardWidget = {
|
|
2441
|
+
name: RootConfig$1.widgets.chartCard,
|
|
2442
|
+
title: '@dashboard:widgets.chart-card.widget-title',
|
|
2443
|
+
description: '@dashboard:widgets.chart-card.widget-description',
|
|
2444
|
+
categories: [AXP_WIDGETS_CHART_CATEGORY],
|
|
2445
|
+
subCategory: AXP_DASHBOARD_SHARED_SUB_CHART_SPECIALIZED,
|
|
2446
|
+
groups: [AXPWidgetGroupEnum.DashboardWidget],
|
|
2447
|
+
type: 'dashboard',
|
|
2448
|
+
icon: 'fa-light fa-layer-group',
|
|
2449
|
+
properties: [
|
|
2450
|
+
cloneProperty(AXP_NAME_PROPERTY, { visible: false }),
|
|
2451
|
+
cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
|
|
2452
|
+
{
|
|
2453
|
+
name: 'title',
|
|
2454
|
+
title: '@dashboard:widgets.chart-card.card-title',
|
|
2455
|
+
group: AXP_APPEARANCE_PROPERTY_GROUP,
|
|
2456
|
+
schema: {
|
|
2457
|
+
defaultValue: '',
|
|
2458
|
+
dataType: 'string',
|
|
2459
|
+
interface: {
|
|
2460
|
+
name: 'title',
|
|
2461
|
+
path: 'options.title',
|
|
2462
|
+
type: AXPWidgetsCatalog.text,
|
|
2463
|
+
options: {
|
|
2464
|
+
placeholder: '@dashboard:widgets.chart-card.card-title-placeholder',
|
|
2465
|
+
},
|
|
2466
|
+
},
|
|
2467
|
+
},
|
|
2468
|
+
visible: true,
|
|
2469
|
+
},
|
|
2470
|
+
{
|
|
2471
|
+
name: 'tabs',
|
|
2472
|
+
title: '@dashboard:widgets.chart-card.tabs',
|
|
2473
|
+
group: AXP_DATA_PROPERTY_GROUP,
|
|
2474
|
+
showLabel: true,
|
|
2475
|
+
schema: {
|
|
2476
|
+
dataType: 'array',
|
|
2477
|
+
defaultValue: [],
|
|
2478
|
+
interface: {
|
|
2479
|
+
type: AXPWidgetsCatalog.repeaterLayout,
|
|
2480
|
+
name: 'tabs',
|
|
2481
|
+
path: 'options.tabs',
|
|
2482
|
+
options: {
|
|
2483
|
+
hasControls: true,
|
|
2484
|
+
allowReorder: true,
|
|
2485
|
+
},
|
|
2486
|
+
children: [
|
|
2487
|
+
{
|
|
2488
|
+
// No path/name — value widget binds to options.tabs.[index] (the row itself).
|
|
2489
|
+
type: AXP_CHART_CONFIGURATOR_WIDGET_NAME,
|
|
2490
|
+
},
|
|
2491
|
+
],
|
|
2492
|
+
},
|
|
2493
|
+
},
|
|
2494
|
+
visible: true,
|
|
2495
|
+
},
|
|
2496
|
+
],
|
|
2497
|
+
components: {
|
|
2498
|
+
view: {
|
|
2499
|
+
component: () => Promise.resolve().then(function () { return chartCardWidget_component; }).then((c) => c.AXPChartCardWidgetViewComponent),
|
|
2500
|
+
},
|
|
2501
|
+
},
|
|
2502
|
+
meta: {
|
|
2503
|
+
dimensions: AXP_CHART_WIDE_DIMENSIONS,
|
|
2504
|
+
},
|
|
2505
|
+
};
|
|
2506
|
+
//#endregion
|
|
2507
|
+
|
|
2508
|
+
//#region ----- Imports -----
|
|
2509
|
+
//#endregion
|
|
2510
|
+
//#region ----- Constants -----
|
|
2511
|
+
const QUERY_DEFINITION_ENTITY = 'PlatformManagement.QueryDefinition';
|
|
2512
|
+
const TAB_I18N = {
|
|
2513
|
+
title: '@dashboard:widgets.chart-configurator.tab-label',
|
|
2514
|
+
titlePlaceholder: '@dashboard:widgets.chart-configurator.tab-label-placeholder',
|
|
2515
|
+
query: '@dashboard:widgets.chart-configurator.query',
|
|
2516
|
+
queryPlaceholder: '@general:widgets.query-options.query-placeholder',
|
|
2517
|
+
queryRequired: '@dashboard:widgets.chart-configurator.query-required',
|
|
2518
|
+
color: '@dashboard:widgets.chart-configurator.color',
|
|
2519
|
+
xAxisLabel: '@dashboard:widgets.bar-chart.x-axis-label',
|
|
2520
|
+
yAxisLabel: '@dashboard:widgets.bar-chart.y-axis-label',
|
|
2521
|
+
};
|
|
2522
|
+
//#endregion
|
|
2523
|
+
//#region ----- Property builders -----
|
|
2524
|
+
function buildTabTitleProperty() {
|
|
2525
|
+
return {
|
|
2526
|
+
name: 'title',
|
|
2527
|
+
title: TAB_I18N.title,
|
|
2528
|
+
group: AXP_APPEARANCE_PROPERTY_GROUP,
|
|
2529
|
+
order: 0,
|
|
2530
|
+
schema: {
|
|
2531
|
+
dataType: 'string',
|
|
2532
|
+
interface: {
|
|
2533
|
+
name: 'title',
|
|
2534
|
+
path: 'options.title',
|
|
2535
|
+
type: AXPWidgetsCatalog.text,
|
|
2536
|
+
options: {
|
|
2537
|
+
placeholder: TAB_I18N.titlePlaceholder,
|
|
2538
|
+
hasClearButton: true,
|
|
2539
|
+
},
|
|
2540
|
+
},
|
|
2541
|
+
},
|
|
2542
|
+
visible: true,
|
|
2543
|
+
};
|
|
2544
|
+
}
|
|
2545
|
+
function buildQueryLookupProperty(resultType) {
|
|
2546
|
+
return {
|
|
2547
|
+
name: 'query',
|
|
2548
|
+
title: TAB_I18N.query,
|
|
2549
|
+
group: AXP_DATA_PROPERTY_GROUP,
|
|
2550
|
+
order: 1,
|
|
2551
|
+
schema: {
|
|
2552
|
+
dataType: 'string',
|
|
2553
|
+
interface: {
|
|
2554
|
+
name: 'query',
|
|
2555
|
+
path: 'options.query',
|
|
2556
|
+
type: AXPWidgetsCatalog.lookup,
|
|
2557
|
+
options: {
|
|
2558
|
+
entity: QUERY_DEFINITION_ENTITY,
|
|
2559
|
+
valueField: 'name',
|
|
2560
|
+
textField: 'catalogTitle',
|
|
2561
|
+
look: 'select',
|
|
2562
|
+
allowClear: true,
|
|
2563
|
+
allowSearch: true,
|
|
2564
|
+
placeholder: TAB_I18N.queryPlaceholder,
|
|
2565
|
+
filter: {
|
|
2566
|
+
logic: 'and',
|
|
2567
|
+
filters: [
|
|
2568
|
+
{
|
|
2569
|
+
field: 'resultType',
|
|
2570
|
+
operator: { type: 'equal' },
|
|
2571
|
+
value: resultType,
|
|
2572
|
+
},
|
|
2573
|
+
],
|
|
2574
|
+
},
|
|
2575
|
+
},
|
|
2576
|
+
},
|
|
2577
|
+
},
|
|
2578
|
+
validations: [{ rule: 'required', message: TAB_I18N.queryRequired }],
|
|
2579
|
+
visible: true,
|
|
2580
|
+
};
|
|
2581
|
+
}
|
|
2582
|
+
function buildColorProperty() {
|
|
2583
|
+
return {
|
|
2584
|
+
name: 'color',
|
|
2585
|
+
title: TAB_I18N.color,
|
|
2586
|
+
group: AXP_APPEARANCE_PROPERTY_GROUP,
|
|
2587
|
+
order: 2,
|
|
2588
|
+
schema: {
|
|
2589
|
+
dataType: 'string',
|
|
2590
|
+
interface: {
|
|
2591
|
+
name: 'color',
|
|
2592
|
+
path: 'options.color',
|
|
2593
|
+
type: AXPWidgetsCatalog.color,
|
|
2594
|
+
options: {},
|
|
2595
|
+
},
|
|
2596
|
+
},
|
|
2597
|
+
visible: true,
|
|
2598
|
+
};
|
|
2599
|
+
}
|
|
2600
|
+
function buildAxisLabelProperties() {
|
|
2601
|
+
return [
|
|
2602
|
+
{
|
|
2603
|
+
name: 'xAxisLabel',
|
|
2604
|
+
title: TAB_I18N.xAxisLabel,
|
|
2605
|
+
group: AXP_APPEARANCE_PROPERTY_GROUP,
|
|
2606
|
+
order: 3,
|
|
2607
|
+
schema: {
|
|
2608
|
+
dataType: 'string',
|
|
2609
|
+
interface: {
|
|
2610
|
+
name: 'xAxisLabel',
|
|
2611
|
+
path: 'options.xAxisLabel',
|
|
2612
|
+
type: AXPWidgetsCatalog.text,
|
|
2613
|
+
options: { hasClearButton: true },
|
|
2614
|
+
},
|
|
2615
|
+
},
|
|
2616
|
+
visible: true,
|
|
2617
|
+
},
|
|
2618
|
+
{
|
|
2619
|
+
name: 'yAxisLabel',
|
|
2620
|
+
title: TAB_I18N.yAxisLabel,
|
|
2621
|
+
group: AXP_APPEARANCE_PROPERTY_GROUP,
|
|
2622
|
+
order: 4,
|
|
2623
|
+
schema: {
|
|
2624
|
+
dataType: 'string',
|
|
2625
|
+
interface: {
|
|
2626
|
+
name: 'yAxisLabel',
|
|
2627
|
+
path: 'options.yAxisLabel',
|
|
2628
|
+
type: AXPWidgetsCatalog.text,
|
|
2629
|
+
options: { hasClearButton: true },
|
|
2630
|
+
},
|
|
2631
|
+
},
|
|
2632
|
+
visible: true,
|
|
2633
|
+
},
|
|
2634
|
+
];
|
|
2635
|
+
}
|
|
2636
|
+
/**
|
|
2637
|
+
* Tab-scoped properties for one chart type. Omits `queryTabs` — the chart card owns the tab list.
|
|
2638
|
+
*/
|
|
2639
|
+
function buildChartTabPropertyDefinitions(resultType) {
|
|
2640
|
+
const properties = [
|
|
2641
|
+
buildTabTitleProperty(),
|
|
2642
|
+
buildQueryLookupProperty(resultType),
|
|
2643
|
+
buildColorProperty(),
|
|
2644
|
+
];
|
|
2645
|
+
if (chartTypeUsesAxisLabels(resultType)) {
|
|
2646
|
+
properties.push(...buildAxisLabelProperties());
|
|
2647
|
+
}
|
|
2648
|
+
return properties;
|
|
2649
|
+
}
|
|
2650
|
+
//#endregion
|
|
2651
|
+
|
|
2652
|
+
//#region ----- Imports -----
|
|
2653
|
+
//#endregion
|
|
2654
|
+
//#region ----- Constants -----
|
|
2655
|
+
const CATALOG_ENTRIES = [
|
|
2656
|
+
{
|
|
2657
|
+
id: RootConfig$1.widgets.barChart,
|
|
2658
|
+
title: '@dashboard:widgets.bar-chart.widget-title',
|
|
2659
|
+
icon: 'fa-light fa-chart-bar',
|
|
2660
|
+
description: '@dashboard:widgets.bar-chart.widget-description',
|
|
2661
|
+
resultType: AXP_CHART_QUERY_RESULT_TYPE.barSeries,
|
|
2662
|
+
},
|
|
2663
|
+
{
|
|
2664
|
+
id: RootConfig$1.widgets.donutChart,
|
|
2665
|
+
title: '@dashboard:widgets.donut-chart.widget-title',
|
|
2666
|
+
icon: 'fa-light fa-donut',
|
|
2667
|
+
description: '@dashboard:widgets.donut-chart.widget-description',
|
|
2668
|
+
resultType: AXP_CHART_QUERY_RESULT_TYPE.donutSeries,
|
|
2669
|
+
},
|
|
2670
|
+
{
|
|
2671
|
+
id: RootConfig$1.widgets.lineChart,
|
|
2672
|
+
title: '@dashboard:widgets.line-chart.widget-title',
|
|
2673
|
+
icon: 'fa-light fa-chart-line',
|
|
2674
|
+
description: '@dashboard:widgets.line-chart.widget-description',
|
|
2675
|
+
resultType: AXP_CHART_QUERY_RESULT_TYPE.lineSeries,
|
|
2676
|
+
},
|
|
2677
|
+
{
|
|
2678
|
+
id: RootConfig$1.widgets.gaugeChart,
|
|
2679
|
+
title: '@dashboard:widgets.gauge-chart.widget-title',
|
|
2680
|
+
icon: 'fa-light fa-gauge',
|
|
2681
|
+
description: '@dashboard:widgets.gauge-chart.widget-description',
|
|
2682
|
+
resultType: AXP_CHART_QUERY_RESULT_TYPE.gaugeValue,
|
|
2683
|
+
},
|
|
2684
|
+
{
|
|
2685
|
+
id: RootConfig$1.widgets.funnelChart,
|
|
2686
|
+
title: '@dashboard:widgets.funnel-chart.widget-title',
|
|
2687
|
+
icon: 'fa-light fa-filter',
|
|
2688
|
+
description: '@dashboard:widgets.funnel-chart.widget-description',
|
|
2689
|
+
resultType: AXP_CHART_QUERY_RESULT_TYPE.funnelSeries,
|
|
2690
|
+
},
|
|
2691
|
+
{
|
|
2692
|
+
id: RootConfig$1.widgets.heatmapChart,
|
|
2693
|
+
title: '@dashboard:widgets.heatmap-chart.widget-title',
|
|
2694
|
+
icon: 'fa-light fa-grid-2',
|
|
2695
|
+
description: '@dashboard:widgets.heatmap-chart.widget-description',
|
|
2696
|
+
resultType: AXP_CHART_QUERY_RESULT_TYPE.heatmapSeries,
|
|
2697
|
+
},
|
|
2698
|
+
{
|
|
2699
|
+
id: RootConfig$1.widgets.kpiStatCard,
|
|
2700
|
+
title: '@dashboard:widgets.kpi-stat-card.widget-title',
|
|
2701
|
+
icon: 'fa-light fa-gauge-high',
|
|
2702
|
+
description: '@dashboard:widgets.kpi-stat-card.widget-description',
|
|
2703
|
+
resultType: AXP_CHART_QUERY_RESULT_TYPE.kpiStatCard,
|
|
2704
|
+
},
|
|
2705
|
+
{
|
|
2706
|
+
id: RootConfig$1.widgets.kpiProgress,
|
|
2707
|
+
title: '@dashboard:widgets.kpi-progress.widget-title',
|
|
2708
|
+
icon: 'fa-light fa-chart-bullet',
|
|
2709
|
+
description: '@dashboard:widgets.kpi-progress.widget-description',
|
|
2710
|
+
resultType: AXP_CHART_QUERY_RESULT_TYPE.kpiProgress,
|
|
2711
|
+
},
|
|
2712
|
+
{
|
|
2713
|
+
id: RootConfig$1.widgets.kpiSegmented,
|
|
2714
|
+
title: '@dashboard:widgets.kpi-segmented.widget-title',
|
|
2715
|
+
icon: 'fa-light fa-chart-simple',
|
|
2716
|
+
description: '@dashboard:widgets.kpi-segmented.widget-description',
|
|
2717
|
+
resultType: AXP_CHART_QUERY_RESULT_TYPE.kpiSegmented,
|
|
2718
|
+
},
|
|
2719
|
+
{
|
|
2720
|
+
id: RootConfig$1.widgets.kpiDetails,
|
|
2721
|
+
title: '@dashboard:widgets.kpi-details.widget-title',
|
|
2722
|
+
icon: 'fa-light fa-square-list',
|
|
2723
|
+
description: '@dashboard:widgets.kpi-details.widget-description',
|
|
2724
|
+
resultType: AXP_CHART_QUERY_RESULT_TYPE.kpiDetails,
|
|
2725
|
+
},
|
|
2726
|
+
];
|
|
2727
|
+
//#endregion
|
|
2728
|
+
//#region ----- Catalog -----
|
|
2729
|
+
function readTabLabel(options) {
|
|
2730
|
+
const raw = options['title'] ?? options['label'];
|
|
2731
|
+
return typeof raw === 'string' ? raw.trim() : '';
|
|
2732
|
+
}
|
|
2733
|
+
/**
|
|
2734
|
+
* Chart / KPI types offered in the chart configurator.
|
|
2735
|
+
* When a tab label is set, the selected row shows that label and the type name as the subtitle.
|
|
2736
|
+
*/
|
|
2737
|
+
function buildChartConfiguratorCatalog(options, selectedType) {
|
|
2738
|
+
const tabLabel = options ? readTabLabel(options) : '';
|
|
2739
|
+
const typeId = selectedType?.trim() ?? '';
|
|
2740
|
+
return CATALOG_ENTRIES.map((entry) => {
|
|
2741
|
+
const propertyDefinitions = buildChartTabPropertyDefinitions(entry.resultType);
|
|
2742
|
+
const item = {
|
|
2743
|
+
id: entry.id,
|
|
2744
|
+
title: entry.title,
|
|
2745
|
+
icon: entry.icon,
|
|
2746
|
+
description: entry.description,
|
|
2747
|
+
propertyDefinitions,
|
|
2748
|
+
};
|
|
2749
|
+
if (!tabLabel || entry.id !== typeId) {
|
|
2750
|
+
return item;
|
|
2751
|
+
}
|
|
2752
|
+
return {
|
|
2753
|
+
...item,
|
|
2754
|
+
title: tabLabel,
|
|
2755
|
+
description: entry.title,
|
|
2756
|
+
};
|
|
2757
|
+
});
|
|
2758
|
+
}
|
|
2759
|
+
//#endregion
|
|
2760
|
+
|
|
2761
|
+
//#region ----- Imports -----
|
|
2762
|
+
//#endregion
|
|
2763
|
+
//#region ----- Component -----
|
|
2764
|
+
/**
|
|
2765
|
+
* Pick a chart type and configure tab-scoped options via {@link AXPItemConfiguratorComponent}.
|
|
2766
|
+
* Bound value is an {@link AXPWidgetNode} (`type` + `options`).
|
|
2767
|
+
*/
|
|
2768
|
+
class AXMChartConfiguratorComponent {
|
|
2769
|
+
//#endregion
|
|
2770
|
+
//#region ----- Lifecycle -----
|
|
2771
|
+
constructor() {
|
|
2772
|
+
//#region ----- Inputs -----
|
|
2773
|
+
this.widget = model({ type: '', options: {} }, /* @ts-ignore */
|
|
2774
|
+
...(ngDevMode ? [{ debugName: "widget" }] : /* istanbul ignore next */ []));
|
|
2775
|
+
this.label = input('@dashboard:widgets.chart-configurator.label', /* @ts-ignore */
|
|
2776
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2777
|
+
this.readonly = input(false, /* @ts-ignore */
|
|
2778
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
2779
|
+
//#endregion
|
|
2780
|
+
//#region ----- State -----
|
|
2781
|
+
this.selectedTypeModel = model('', /* @ts-ignore */
|
|
2782
|
+
...(ngDevMode ? [{ debugName: "selectedTypeModel" }] : /* istanbul ignore next */ []));
|
|
2783
|
+
this.optionsModel = model({}, /* @ts-ignore */
|
|
2784
|
+
...(ngDevMode ? [{ debugName: "optionsModel" }] : /* istanbul ignore next */ []));
|
|
2785
|
+
this.catalogItems = computed(() => buildChartConfiguratorCatalog(this.optionsModel(), this.selectedTypeModel()), /* @ts-ignore */
|
|
2786
|
+
...(ngDevMode ? [{ debugName: "catalogItems" }] : /* istanbul ignore next */ []));
|
|
2787
|
+
this.lastSelectedType = '';
|
|
2788
|
+
this.stashedAppearance = {};
|
|
2789
|
+
effect(() => {
|
|
2790
|
+
const opts = this.optionsModel();
|
|
2791
|
+
untracked(() => {
|
|
2792
|
+
this.stashedAppearance = {
|
|
2793
|
+
...this.stashedAppearance,
|
|
2794
|
+
...readStashedChartAppearance(opts),
|
|
2795
|
+
};
|
|
2796
|
+
});
|
|
2797
|
+
});
|
|
2798
|
+
effect(() => {
|
|
2799
|
+
const node = this.widget();
|
|
2800
|
+
const type = node?.type?.trim() ?? '';
|
|
2801
|
+
const opts = (node?.options ?? {});
|
|
2802
|
+
const nextType = type || AXP_CHART_CONFIGURATOR_DEFAULT_TYPE;
|
|
2803
|
+
const curType = untracked(() => this.selectedTypeModel());
|
|
2804
|
+
const curOpts = untracked(() => this.optionsModel());
|
|
2805
|
+
if (nextType !== curType || !isEqual(opts, curOpts)) {
|
|
2806
|
+
untracked(() => {
|
|
2807
|
+
this.selectedTypeModel.set(nextType);
|
|
2808
|
+
this.optionsModel.set({ ...opts });
|
|
2809
|
+
this.lastSelectedType = nextType;
|
|
2810
|
+
});
|
|
2811
|
+
}
|
|
2812
|
+
});
|
|
2813
|
+
effect(() => {
|
|
2814
|
+
const type = this.selectedTypeModel();
|
|
2815
|
+
untracked(() => {
|
|
2816
|
+
const previousType = this.lastSelectedType;
|
|
2817
|
+
if (!type || !previousType || type === previousType) {
|
|
2818
|
+
if (type) {
|
|
2819
|
+
this.lastSelectedType = type;
|
|
2820
|
+
}
|
|
2821
|
+
return;
|
|
2822
|
+
}
|
|
2823
|
+
const next = optionsAfterChartTypeSwitch(this.optionsModel(), previousType, type, this.stashedAppearance);
|
|
2824
|
+
this.lastSelectedType = type;
|
|
2825
|
+
if (!isEqual(next, this.optionsModel())) {
|
|
2826
|
+
this.optionsModel.set(next);
|
|
2827
|
+
}
|
|
2828
|
+
});
|
|
2829
|
+
});
|
|
2830
|
+
effect(() => {
|
|
2831
|
+
const type = this.selectedTypeModel();
|
|
2832
|
+
const opts = this.optionsModel();
|
|
2833
|
+
const current = untracked(() => this.widget());
|
|
2834
|
+
const empty = { type: '', options: {} };
|
|
2835
|
+
const resolvedType = type || AXP_CHART_CONFIGURATOR_DEFAULT_TYPE;
|
|
2836
|
+
if (!resolvedType) {
|
|
2837
|
+
if (!isEqual(current ?? empty, empty)) {
|
|
2838
|
+
untracked(() => this.widget.set(empty));
|
|
2839
|
+
}
|
|
2840
|
+
return;
|
|
2841
|
+
}
|
|
2842
|
+
const next = {
|
|
2843
|
+
...(current && typeof current === 'object' ? current : {}),
|
|
2844
|
+
type: resolvedType,
|
|
2845
|
+
options: { ...opts },
|
|
2846
|
+
};
|
|
2847
|
+
if (!isEqual(next, current)) {
|
|
2848
|
+
untracked(() => this.widget.set(next));
|
|
2849
|
+
}
|
|
2850
|
+
});
|
|
2851
|
+
}
|
|
2852
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChartConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2853
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXMChartConfiguratorComponent, isStandalone: true, selector: "axm-chart-configurator", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectedTypeModel: { classPropertyName: "selectedTypeModel", publicName: "selectedTypeModel", isSignal: true, isRequired: false, transformFunction: null }, optionsModel: { classPropertyName: "optionsModel", publicName: "optionsModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { widget: "widgetChange", selectedTypeModel: "selectedTypeModelChange", optionsModel: "optionsModelChange" }, host: { properties: { "attr.readonly": "readonly() ? \"\" : null" }, classAttribute: "flex flex-col" }, ngImport: i0, template: `
|
|
2854
|
+
<axp-item-configurator
|
|
2855
|
+
[(selectedItemId)]="selectedTypeModel"
|
|
2856
|
+
[(values)]="optionsModel"
|
|
2857
|
+
[label]="label()"
|
|
2858
|
+
[readonly]="readonly()"
|
|
2859
|
+
[items]="catalogItems()"
|
|
2860
|
+
/>
|
|
2861
|
+
`, isInline: true, styles: [":host([readonly]){pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "component", type: AXPItemConfiguratorComponent, selector: "axp-item-configurator", inputs: ["selectedItemId", "values", "label", "readonly", "items", "headerActions"], outputs: ["selectedItemIdChange", "valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2862
|
+
}
|
|
2863
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChartConfiguratorComponent, decorators: [{
|
|
2864
|
+
type: Component,
|
|
2865
|
+
args: [{ selector: 'axm-chart-configurator', template: `
|
|
2866
|
+
<axp-item-configurator
|
|
2867
|
+
[(selectedItemId)]="selectedTypeModel"
|
|
2868
|
+
[(values)]="optionsModel"
|
|
2869
|
+
[label]="label()"
|
|
2870
|
+
[readonly]="readonly()"
|
|
2871
|
+
[items]="catalogItems()"
|
|
2872
|
+
/>
|
|
2873
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2874
|
+
class: 'flex flex-col',
|
|
2875
|
+
'[attr.readonly]': 'readonly() ? "" : null',
|
|
2876
|
+
}, imports: [AXPItemConfiguratorComponent], styles: [":host([readonly]){pointer-events:none;opacity:.7}\n"] }]
|
|
2877
|
+
}], ctorParameters: () => [], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: false }] }, { type: i0.Output, args: ["widgetChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selectedTypeModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTypeModel", required: false }] }, { type: i0.Output, args: ["selectedTypeModelChange"] }], optionsModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsModel", required: false }] }, { type: i0.Output, args: ["optionsModelChange"] }] } });
|
|
2878
|
+
|
|
2879
|
+
//#region ----- Imports -----
|
|
2880
|
+
//#endregion
|
|
2881
|
+
//#region ----- Config -----
|
|
2882
|
+
const AXMChartConfiguratorWidget = {
|
|
2883
|
+
name: AXP_CHART_CONFIGURATOR_WIDGET_NAME,
|
|
2884
|
+
title: '@dashboard:widgets.chart-configurator.widget-title',
|
|
2885
|
+
description: '@dashboard:widgets.chart-configurator.widget-description',
|
|
2886
|
+
icon: 'fa-light fa-chart-mixed',
|
|
2887
|
+
categories: AXP_WIDGETS_EDITOR_CATEGORY,
|
|
2888
|
+
groups: [AXPWidgetGroupEnum.UtilityWidget],
|
|
2889
|
+
type: 'editor',
|
|
2890
|
+
defaultFilterWidgetName: 'string-filter',
|
|
2891
|
+
properties: [
|
|
2892
|
+
AXP_NAME_PROPERTY,
|
|
2893
|
+
AXP_DATA_PATH_PROPERTY,
|
|
2894
|
+
{
|
|
2895
|
+
name: 'label',
|
|
2896
|
+
title: '@dashboard:widgets.chart-configurator.label',
|
|
2897
|
+
visible: true,
|
|
2898
|
+
group: { name: 'general', title: 'General', order: 1 },
|
|
2899
|
+
schema: {
|
|
2900
|
+
dataType: 'string',
|
|
2901
|
+
interface: {
|
|
2902
|
+
path: 'label',
|
|
2903
|
+
type: 'text-box',
|
|
2904
|
+
options: {
|
|
2905
|
+
placeholder: '@dashboard:widgets.chart-configurator.label',
|
|
2906
|
+
},
|
|
2907
|
+
},
|
|
2908
|
+
},
|
|
2909
|
+
},
|
|
2910
|
+
],
|
|
2911
|
+
components: {
|
|
2912
|
+
edit: {
|
|
2913
|
+
component: () => Promise.resolve().then(function () { return chartConfiguratorWidgetEdit_component; }).then((c) => c.AXMChartConfiguratorWidgetEditComponent),
|
|
2914
|
+
},
|
|
2915
|
+
designer: {
|
|
2916
|
+
component: () => Promise.resolve().then(function () { return chartConfiguratorWidgetEdit_component; }).then((c) => c.AXMChartConfiguratorWidgetEditComponent),
|
|
2917
|
+
},
|
|
2918
|
+
column: {
|
|
2919
|
+
component: () => Promise.resolve().then(function () { return chartConfiguratorWidgetColumn_component; }).then((c) => c.AXMChartConfiguratorWidgetColumnComponent),
|
|
2920
|
+
},
|
|
2921
|
+
},
|
|
2922
|
+
};
|
|
2923
|
+
//#endregion
|
|
2924
|
+
|
|
2925
|
+
//#region ----- Imports -----
|
|
2926
|
+
//#endregion
|
|
2927
|
+
//#region ----- Component -----
|
|
2928
|
+
class AXMChartConfiguratorWidgetColumnComponent extends AXPColumnWidgetComponent {
|
|
2929
|
+
constructor() {
|
|
2930
|
+
super(...arguments);
|
|
2931
|
+
//#region ----- Services & Dependencies -----
|
|
2932
|
+
this.widgetRegistry = inject(AXPWidgetRegistryService);
|
|
2933
|
+
//#endregion
|
|
2934
|
+
//#region ----- Computed Properties -----
|
|
2935
|
+
this.widget = computed(() => {
|
|
2936
|
+
const widgetNode = this.rawValue;
|
|
2937
|
+
if (!widgetNode?.type) {
|
|
2938
|
+
return undefined;
|
|
2939
|
+
}
|
|
2940
|
+
try {
|
|
2941
|
+
return this.widgetRegistry.resolve(widgetNode.type);
|
|
2942
|
+
}
|
|
2943
|
+
catch {
|
|
2944
|
+
return undefined;
|
|
2945
|
+
}
|
|
2946
|
+
}, /* @ts-ignore */
|
|
2947
|
+
...(ngDevMode ? [{ debugName: "widget" }] : /* istanbul ignore next */ []));
|
|
2948
|
+
this.displayTitle = computed(() => {
|
|
2949
|
+
const widgetNode = this.rawValue;
|
|
2950
|
+
const opts = widgetNode?.options;
|
|
2951
|
+
const tabLabel = typeof opts?.['title'] === 'string' ? opts['title'].trim() : '';
|
|
2952
|
+
return tabLabel || this.widget()?.title;
|
|
2953
|
+
}, /* @ts-ignore */
|
|
2954
|
+
...(ngDevMode ? [{ debugName: "displayTitle" }] : /* istanbul ignore next */ []));
|
|
2955
|
+
}
|
|
2956
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChartConfiguratorWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2957
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMChartConfiguratorWidgetColumnComponent, isStandalone: true, selector: "axm-chart-configurator-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
|
|
2958
|
+
@if (widget()) {
|
|
2959
|
+
<i [class]="widget()?.icon" class="fa-fw"></i>
|
|
2960
|
+
<span [title]="$safeNavigationMigration(displayTitle())" class="text-xs font-medium">
|
|
2961
|
+
{{ $safeNavigationMigration(displayTitle()) | translate | async }}
|
|
2962
|
+
</span>
|
|
2963
|
+
} @else {
|
|
2964
|
+
<span class="text-muted">---</span>
|
|
2965
|
+
}
|
|
2966
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2967
|
+
}
|
|
2968
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChartConfiguratorWidgetColumnComponent, decorators: [{
|
|
2969
|
+
type: Component,
|
|
2970
|
+
args: [{
|
|
2971
|
+
selector: 'axm-chart-configurator-widget-column',
|
|
2972
|
+
template: `
|
|
2973
|
+
@if (widget()) {
|
|
2974
|
+
<i [class]="widget()?.icon" class="fa-fw"></i>
|
|
2975
|
+
<span [title]="$safeNavigationMigration(displayTitle())" class="text-xs font-medium">
|
|
2976
|
+
{{ $safeNavigationMigration(displayTitle()) | translate | async }}
|
|
2977
|
+
</span>
|
|
2978
|
+
} @else {
|
|
2979
|
+
<span class="text-muted">---</span>
|
|
2980
|
+
}
|
|
2981
|
+
`,
|
|
2982
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2983
|
+
imports: [AXTranslationModule, AsyncPipe],
|
|
2984
|
+
inputs: ['rawValue', 'rowData'],
|
|
2985
|
+
}]
|
|
2986
|
+
}] });
|
|
2987
|
+
|
|
2988
|
+
var chartConfiguratorWidgetColumn_component = /*#__PURE__*/Object.freeze({
|
|
2989
|
+
__proto__: null,
|
|
2990
|
+
AXMChartConfiguratorWidgetColumnComponent: AXMChartConfiguratorWidgetColumnComponent
|
|
2991
|
+
});
|
|
2992
|
+
|
|
2993
|
+
//#region ----- Imports -----
|
|
2994
|
+
//#endregion
|
|
2995
|
+
//#region ----- Component -----
|
|
2996
|
+
class AXMChartConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
|
|
2997
|
+
constructor() {
|
|
2998
|
+
super(...arguments);
|
|
2999
|
+
//#region ----- Computed Properties -----
|
|
3000
|
+
this.readonly = computed(() => this.options()['readonly'] === true, /* @ts-ignore */
|
|
3001
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
3002
|
+
this.label = computed(() => this.options()['label'] || '@dashboard:widgets.chart-configurator.label', /* @ts-ignore */
|
|
3003
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3004
|
+
//#endregion
|
|
3005
|
+
//#region ----- State -----
|
|
3006
|
+
this.isInitialized = signal(false, /* @ts-ignore */
|
|
3007
|
+
...(ngDevMode ? [{ debugName: "isInitialized" }] : /* istanbul ignore next */ []));
|
|
3008
|
+
this.widgetModel = model({ type: '', options: {} }, /* @ts-ignore */
|
|
3009
|
+
...(ngDevMode ? [{ debugName: "widgetModel" }] : /* istanbul ignore next */ []));
|
|
3010
|
+
//#endregion
|
|
3011
|
+
//#region ----- Effects -----
|
|
3012
|
+
this.syncValueToConfigurator = effect(() => {
|
|
3013
|
+
const value = this.getValue();
|
|
3014
|
+
if (value && value.type) {
|
|
3015
|
+
const currentModel = untracked(() => this.widgetModel());
|
|
3016
|
+
if (!isEqual(value, currentModel)) {
|
|
3017
|
+
untracked(() => {
|
|
3018
|
+
this.widgetModel.set(value);
|
|
3019
|
+
this.isInitialized.set(true);
|
|
3020
|
+
});
|
|
3021
|
+
}
|
|
3022
|
+
return;
|
|
3023
|
+
}
|
|
3024
|
+
untracked(() => {
|
|
3025
|
+
if (!this.isInitialized()) {
|
|
3026
|
+
this.isInitialized.set(true);
|
|
3027
|
+
}
|
|
3028
|
+
});
|
|
3029
|
+
}, /* @ts-ignore */
|
|
3030
|
+
...(ngDevMode ? [{ debugName: "syncValueToConfigurator" }] : /* istanbul ignore next */ []));
|
|
3031
|
+
this.syncConfiguratorToValue = effect(() => {
|
|
3032
|
+
const modelValue = this.widgetModel();
|
|
3033
|
+
if (!untracked(() => this.isInitialized())) {
|
|
3034
|
+
return;
|
|
3035
|
+
}
|
|
3036
|
+
if (!modelValue?.type) {
|
|
3037
|
+
return;
|
|
3038
|
+
}
|
|
3039
|
+
const currentValue = untracked(() => this.getValue());
|
|
3040
|
+
if (!isEqual(modelValue, currentValue)) {
|
|
3041
|
+
untracked(() => {
|
|
3042
|
+
this.setValue(modelValue);
|
|
3043
|
+
});
|
|
3044
|
+
}
|
|
3045
|
+
}, /* @ts-ignore */
|
|
3046
|
+
...(ngDevMode ? [{ debugName: "syncConfiguratorToValue" }] : /* istanbul ignore next */ []));
|
|
3047
|
+
}
|
|
3048
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChartConfiguratorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3049
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMChartConfiguratorWidgetEditComponent, isStandalone: true, selector: "axm-chart-configurator-widget-edit", inputs: { widgetModel: { classPropertyName: "widgetModel", publicName: "widgetModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { widgetModel: "widgetModelChange" }, usesInheritance: true, ngImport: i0, template: `
|
|
3050
|
+
@if (isInitialized()) {
|
|
3051
|
+
<axm-chart-configurator
|
|
3052
|
+
[(widget)]="widgetModel"
|
|
3053
|
+
[label]="label()"
|
|
3054
|
+
[readonly]="readonly()"
|
|
3055
|
+
></axm-chart-configurator>
|
|
3056
|
+
}
|
|
3057
|
+
`, isInline: true, dependencies: [{ kind: "component", type: AXMChartConfiguratorComponent, selector: "axm-chart-configurator", inputs: ["widget", "label", "readonly", "selectedTypeModel", "optionsModel"], outputs: ["widgetChange", "selectedTypeModelChange", "optionsModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3058
|
+
}
|
|
3059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChartConfiguratorWidgetEditComponent, decorators: [{
|
|
3060
|
+
type: Component,
|
|
3061
|
+
args: [{
|
|
3062
|
+
selector: 'axm-chart-configurator-widget-edit',
|
|
3063
|
+
template: `
|
|
3064
|
+
@if (isInitialized()) {
|
|
3065
|
+
<axm-chart-configurator
|
|
3066
|
+
[(widget)]="widgetModel"
|
|
3067
|
+
[label]="label()"
|
|
3068
|
+
[readonly]="readonly()"
|
|
3069
|
+
></axm-chart-configurator>
|
|
3070
|
+
}
|
|
3071
|
+
`,
|
|
3072
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3073
|
+
imports: [AXMChartConfiguratorComponent],
|
|
3074
|
+
}]
|
|
3075
|
+
}], propDecorators: { widgetModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetModel", required: false }] }, { type: i0.Output, args: ["widgetModelChange"] }] } });
|
|
3076
|
+
|
|
3077
|
+
var chartConfiguratorWidgetEdit_component = /*#__PURE__*/Object.freeze({
|
|
3078
|
+
__proto__: null,
|
|
3079
|
+
AXMChartConfiguratorWidgetEditComponent: AXMChartConfiguratorWidgetEditComponent
|
|
3080
|
+
});
|
|
3081
|
+
|
|
2229
3082
|
/**
|
|
2230
3083
|
* Donut Chart Widget Component
|
|
2231
3084
|
* Displays data in a circular donut chart with interactive segments
|
|
@@ -4345,7 +5198,7 @@ class AXPKpiProgressWidgetViewComponent extends AXPDashboardWidgetComponent {
|
|
|
4345
5198
|
this.activeTabIndex.set(index);
|
|
4346
5199
|
}
|
|
4347
5200
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPKpiProgressWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4348
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPKpiProgressWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-chart-widget-host flex flex-col h-full min-h-0\">\n <axp-chart-query-tabs\n [tabs]=\"queryTabs()\"\n [activeIndex]=\"activeTabIndex()\"\n (activeIndexChange)=\"selectQueryTab($event)\"\n />\n <div class=\"axp-chart-widget-host__body flex-1 min-h-0\">\n <div\n class=\"axp-kpi-progress axp-kpi-widget-card axp-kpi-widget-card--progress\"\n [attr.data-grid-size]=\"gridSizeToken()\"\n >\n <!-- ----- Loading overlay while query data is fetched ----- -->\n @if (showQueryLoading()) {\n <div class=\"axp-kpi-widget-card__loading\" aria-busy=\"true\">\n <ax-loading></ax-loading>\n </div>\n }\n <div class=\"axp-kpi-widget-card__body\">\n <div class=\"axp-kpi-progress__header\">\n <div class=\"axp-kpi-widget-card__title\">{{ localized().title }}</div>\n <div class=\"axp-kpi-progress__badge\">{{ formattedProgressPercent() }}%</div>\n </div>\n\n <div class=\"axp-kpi-progress__main\">\n <div class=\"axp-kpi-progress__value-block\">\n <div class=\"axp-kpi-progress__value-row\">\n <div class=\"axp-kpi-progress__value\">\n {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n </div>\n @if (localized().targetValue) {\n <div class=\"axp-kpi-progress__target-wrap\">\n <span class=\"axp-kpi-progress__target-label\">\n {{ '@dashboard:widgets.kpi-progress.target-label' | translate | async }}\n </span>\n <span class=\"axp-kpi-progress__target\">{{ localized().targetValue }}</span>\n </div>\n }\n </div>\n @if (localized().subtitle) {\n <div class=\"axp-kpi-progress__subtitle\">{{ localized().subtitle }}</div>\n }\n </div>\n\n <div\n [class]=\"'axp-kpi-progress__ring axp-kpi-progress__ring--' + progressBarTone()\"\n [style.--kpi-ring-progress]=\"progressPercent()\"\n role=\"img\"\n [attr.aria-label]=\"formattedProgressPercent() + '% complete'\"\n >\n <div class=\"axp-kpi-progress__ring-track\" aria-hidden=\"true\"></div>\n <div class=\"axp-kpi-progress__ring-fill\" aria-hidden=\"true\"></div>\n <span class=\"axp-kpi-progress__ring-label\">{{ formattedProgressPercent() }}%</span>\n </div>\n </div>\n\n <div class=\"axp-kpi-progress__bar-wrap\">\n <div\n class=\"axp-kpi-progress__bar-track\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"progressPercent()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <div [class]=\"progressBarFillClasses()\" [style.width.%]=\"progressPercent()\"></div>\n </div>\n </div>\n\n <!-- ----- Query error hint ----- -->\n @if (showQueryError()) {\n <p class=\"axp-kpi-widget-card__error\">\n {{ '@dashboard:widgets.kpi-shared.query-error' | translate | async }}\n </p>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%;height:100%;min-height:0px;overflow:hidden}:host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;overflow:visible;min-block-size:0}.axp-chart-widget-host{display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;gap:var(--spacing, .25rem)}.axp-chart-widget-host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body{display:flex;min-height:0px;flex:1;flex-direction:column;gap:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 2)}.axp-chart-widget-host__body:not(.axp-chart-widget-host__body--with-legend)>.axp-chart-widget-host__chart--radial{flex:1 1 auto}.axp-chart-widget-host__body--with-legend{min-height:0px;flex:1;gap:var(--spacing, .25rem);display:grid;grid-template-rows:minmax(0,1fr) auto}.axp-chart-widget-host__chart{position:relative;min-height:calc(var(--spacing, .25rem) * 64);width:100%;overflow:hidden;grid-row:1}.axp-chart-widget-host__chart--radial{position:relative;margin-inline:auto;align-self:center;justify-self:center;overflow:hidden;grid-row:1;flex:0 0 auto;height:auto;width:min(100%,18rem);max-width:100%;min-height:12rem;min-width:8rem;aspect-ratio:1 / 1}.axp-chart-widget-host__chart--funnel{position:relative;width:100%;overflow:hidden;block-size:20rem;flex:0 0 auto;max-block-size:24rem;min-block-size:16rem}.axp-chart-widget-host__chart--funnel ax-funnel-chart,.axp-chart-widget-host__chart--funnel .ax-funnel-chart-container{display:block;block-size:100%;inline-size:100%;min-block-size:0}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--funnel){flex:none}.axp-chart-widget-host__chart--heatmap{position:relative;width:100%;max-width:100%;inline-size:100%;block-size:auto;flex:0 0 auto;overflow:visible;min-height:0!important;min-block-size:0!important;max-block-size:none}.axp-chart-widget-host__chart--heatmap ax-heatmap-chart,.axp-chart-widget-host__chart--heatmap .ax-heatmap-chart-container{display:block;inline-size:100%;max-inline-size:100%;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--heatmap){flex:none;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__legend{width:100%;flex:none;padding-inline:calc(var(--spacing, .25rem) * .5);grid-row:2;min-height:0;display:flex;justify-content:center;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}:host ::ng-deep ax-chart-legend{display:block!important;height:auto!important;max-height:none;width:100%}:host ::ng-deep .ax-chart-legend{--ax-legend-bg: var(--ax-sys-color-lighter-surface);--ax-legend-text: var(--ax-sys-color-on-lighter-surface);--ax-legend-border: var(--ax-sys-color-border-lighter-surface);--ax-legend-radius: .625rem;--ax-legend-padding: .375rem .5rem;--ax-legend-gap: .375rem;--ax-legend-item-height: auto;height:auto;max-height:none;width:100%;overflow:visible;padding:var(--ax-legend-padding);gap:var(--ax-legend-gap);color:rgb(var(--ax-legend-text))}:host ::ng-deep .ax-chart-legend.ax-legend-horizontal{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;border:none;background:transparent;background-color:transparent;padding:0}:host ::ng-deep .ax-legend-item{align-items:center;gap:.375rem;height:auto;min-height:1.5rem;padding-block:.2rem;padding-inline:.5rem;border-radius:9999px;border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease,transform .15s ease}:host ::ng-deep .ax-legend-item:hover{border-color:rgb(var(--ax-sys-color-primary-500));background-color:rgb(var(--ax-sys-color-primary-500));box-shadow:0 1px 2px #0f172a0f}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{border-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 35%,rgb(var(--ax-sys-color-border-lightest-surface)))}}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 6%,rgb(var(--ax-sys-color-lightest-surface)))}}:host ::ng-deep .ax-legend-item:active{transform:scale(.98)}:host ::ng-deep .ax-legend-item.ax-legend-item-hidden{opacity:.62}:host ::ng-deep .ax-legend-color{width:.625rem;height:.625rem;flex-shrink:0;border-radius:9999px;box-shadow:0 0 0 1px rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-color{box-shadow:0 0 0 1px color-mix(in srgb,rgb(var(--ax-legend-text)) 18%,transparent)}}:host ::ng-deep .ax-legend-name{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);max-width:9rem;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ax-legend-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);margin-inline-start:0;opacity:1;color:rgb(var(--ax-sys-color-on-lightest-surface))}:host ::ng-deep .ax-legend-percentage{margin-inline-start:0;border-radius:9999px;padding-inline:.4rem;padding-block:.125rem;font-size:.6875rem;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;background-color:rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-percentage{background-color:color-mix(in srgb,rgb(var(--ax-legend-text)) 12%,transparent)}}:host ::ng-deep ax-donut-chart,:host ::ng-deep ax-gauge-chart,:host ::ng-deep ax-bar-chart,:host ::ng-deep ax-line-chart,:host ::ng-deep ax-funnel-chart{display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}:host ::ng-deep ax-donut-chart .ax-donut-chart,:host ::ng-deep ax-gauge-chart .ax-gauge-chart,:host ::ng-deep ax-bar-chart .ax-bar-chart,:host ::ng-deep ax-line-chart .ax-line-chart,:host ::ng-deep ax-funnel-chart .ax-funnel-chart-container{min-height:0!important;height:100%!important;width:100%!important;padding:.25rem!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart .ax-heatmap-chart-container,:host ::ng-deep .axp-chart-widget-host__chart--heatmap .ax-heatmap-chart{min-height:0!important;height:auto!important;width:100%!important;max-width:100%!important;padding:.25rem!important;overflow:visible!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap svg{display:block;width:100%!important;max-width:100%!important;height:auto!important;overflow:visible!important}.axp-kpi-widget-card{container-type:size;container-name:kpi-widget;--axp-kpi-card-shadow: 0 4px 24px rgba(15, 23, 42, .06), 0 1px 4px rgba(15, 23, 42, .04);position:relative;box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;overflow:hidden;border-radius:var(--radius-2xl, 1rem);padding:clamp(.625rem,3cqi,.875rem) clamp(.75rem,3.5cqi,1rem);border:1px solid var(--axp-kpi-card-border, rgb(var(--ax-sys-color-border-lightest-surface)));background:var( --axp-kpi-card-bg, linear-gradient(145deg, rgb(var(--ax-sys-color-lightest-surface)) 0%, rgb(var(--ax-sys-color-lighter-surface)) 100%) );box-shadow:var(--axp-kpi-card-shadow);-webkit-font-smoothing:antialiased}.axp-kpi-widget-card:before{content:\"\";position:absolute;inset-inline-end:-18%;top:-28%;width:58%;height:78%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 0%,transparent 72%)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card:before{background:radial-gradient(circle at center,color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 14%,transparent) 0%,transparent 72%)}}.axp-kpi-widget-card:after{content:\"\";position:absolute;inset-inline-start:-12%;bottom:-22%;width:42%;height:55%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 0%,transparent 70%)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card:after{background:radial-gradient(circle at center,color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 8%,transparent) 0%,transparent 70%)}}.axp-kpi-widget-card__body{position:relative;z-index:1;display:flex;min-height:0px;flex:1;flex-direction:column;gap:clamp(.375rem,2.5cqi,.625rem)}.axp-kpi-widget-card__loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background:rgb(var(--ax-sys-color-lightest-surface));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__loading{background:color-mix(in srgb,rgb(var(--ax-sys-color-lightest-surface)) 82%,transparent)}}.axp-kpi-widget-card__loading ax-loading{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.axp-kpi-widget-card__error{margin-top:auto;font-size:.7rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--ax-sys-color-danger-600))}.axp-kpi-widget-card__empty{display:flex;min-height:2.5rem;flex:1;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-on-surface));padding-inline:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:.78rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-kpi-widget-card__title{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);font-size:clamp(.75rem,min(4cqi,4.5cqh),.875rem);color:#334155;letter-spacing:.01em}.axp-kpi-widget-card__chip{display:inline-flex;flex-shrink:0;align-items:center;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.65rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-700)));background:var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500)));border:1px solid var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500)))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__chip{background:color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 12%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__chip{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 18%,white)}}.axp-kpi-widget-card--details{--axp-kpi-accent: #6366f1;--axp-kpi-card-border: #e0e7ff;--axp-kpi-card-bg: linear-gradient(145deg, #fafaff 0%, #f3f4ff 52%, #eef2ff 100%)}.axp-kpi-widget-card--progress{--axp-kpi-accent: #0d9488;--axp-kpi-card-border: #ccfbf1;--axp-kpi-card-bg: linear-gradient(145deg, #f7fffe 0%, #ecfdf9 52%, #e6faf5 100%)}.axp-kpi-widget-card--segmented{--axp-kpi-accent: #d97706;--axp-kpi-card-border: #fde8c8;--axp-kpi-card-bg: linear-gradient(145deg, #fffbf5 0%, #fff7ed 52%, #ffedd5 100%)}.axp-kpi-widget-card[data-grid-size=\"1x1\"]{padding:.5rem .625rem}.axp-kpi-widget-card[data-grid-size=\"1x2\"] .axp-kpi-widget-card__body,.axp-kpi-widget-card[data-grid-size=\"1x3\"] .axp-kpi-widget-card__body,.axp-kpi-widget-card[data-grid-size=\"1x4\"] .axp-kpi-widget-card__body{justify-content:center}.axp-kpi-widget-card[data-grid-size=\"3x2\"] .axp-kpi-segmented__legend,.axp-kpi-widget-card[data-grid-size=\"4x3\"] .axp-kpi-details__items{grid-template-columns:repeat(2,minmax(0,1fr))}.axp-kpi-progress__bar-fill--success{background:linear-gradient(90deg,rgb(var(--ax-sys-color-success-300)),rgb(var(--ax-sys-color-success-500)))}.axp-kpi-progress__bar-fill--primary{background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-300)),rgb(var(--ax-sys-color-primary-500)))}.axp-kpi-progress__bar-fill--warning{background:linear-gradient(90deg,rgb(var(--ax-sys-color-warning-300)),rgb(var(--ax-sys-color-warning-500)))}.axp-kpi-progress__bar-fill--danger{background:linear-gradient(90deg,rgb(var(--ax-sys-color-danger-300)),rgb(var(--ax-sys-color-danger-500)))}:host-context(.dark) .axp-kpi-widget-card{--axp-kpi-card-shadow: 0 4px 20px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .16)}:host-context(.dark) .axp-kpi-widget-card--details{--axp-kpi-card-border: rgba(129, 140, 248, .28);--axp-kpi-card-bg: linear-gradient(145deg, #2a2d3d 0%, #252836 52%, #222530 100%)}:host-context(.dark) .axp-kpi-widget-card--progress{--axp-kpi-card-border: rgba(45, 212, 191, .22);--axp-kpi-card-bg: linear-gradient(145deg, #243330 0%, #1f2e2c 52%, #1c2928 100%)}:host-context(.dark) .axp-kpi-widget-card--segmented{--axp-kpi-card-border: rgba(251, 191, 36, .22);--axp-kpi-card-bg: linear-gradient(145deg, #332c24 0%, #2d2820 52%, #29241e 100%)}:host-context(.dark) .axp-kpi-widget-card__title{color:#e2e8f0}:host{display:block;width:100%;height:100%;min-height:0px}.axp-kpi-progress .axp-kpi-progress__header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-kpi-progress .axp-kpi-progress__badge{border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.7rem;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:var(--axp-kpi-accent, #0d9488);background:var(--axp-kpi-accent, #0d9488);border:1px solid var(--axp-kpi-accent, #0d9488)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__badge{background:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 12%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__badge{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 22%,white)}}.axp-kpi-progress .axp-kpi-progress__main{display:flex;min-height:0px;flex:1;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-block:clamp(.125rem,2cqh,.375rem)}.axp-kpi-progress .axp-kpi-progress__value-block{display:flex;min-width:0px;flex:1;flex-direction:column;gap:clamp(.125rem,1.5cqi,.25rem)}.axp-kpi-progress .axp-kpi-progress__value-row{display:flex;min-width:0px;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 3)}.axp-kpi-progress .axp-kpi-progress__value{margin:0;font-variant-numeric:tabular-nums;line-height:.92;letter-spacing:-.04em;font-weight:300;color:#0f172a;font-size:clamp(1.75rem,min(24cqw,34cqh),3.25rem)}.axp-kpi-progress .axp-kpi-progress__target-wrap{display:flex;min-width:0px;flex-direction:column;align-items:flex-start;padding-bottom:calc(var(--spacing, .25rem) * .5);gap:.1rem}.axp-kpi-progress .axp-kpi-progress__target-label{font-size:.62rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-widest, .1em);letter-spacing:var(--tracking-widest, .1em);text-transform:uppercase;color:#94a3b8}.axp-kpi-progress .axp-kpi-progress__target{font-size:.95rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:#64748b}.axp-kpi-progress .axp-kpi-progress__subtitle{font-size:.78rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:#64748b}.axp-kpi-progress .axp-kpi-progress__ring{--kpi-ring-size: clamp(3.25rem, min(22cqw, 30cqh), 4.5rem);--kpi-ring-thickness: clamp(.28rem, 1.8cqi, .4rem);position:relative;display:grid;flex-shrink:0;place-items:center;width:var(--kpi-ring-size);height:var(--kpi-ring-size)}.axp-kpi-progress .axp-kpi-progress__ring-track,.axp-kpi-progress .axp-kpi-progress__ring-fill{position:absolute;inset:0;border-radius:calc(infinity * 1px)}.axp-kpi-progress .axp-kpi-progress__ring-track{background:var(--axp-kpi-accent, #0d9488);border:1px solid var(--axp-kpi-accent, #0d9488)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__ring-track{background:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 10%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__ring-track{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 14%,white)}}.axp-kpi-progress .axp-kpi-progress__ring-fill{background:conic-gradient(var(--kpi-ring-color, var(--axp-kpi-accent, #0d9488)) calc(var(--kpi-ring-progress, 0) * 1%),transparent 0);mask:radial-gradient(farthest-side,transparent calc(100% - var(--kpi-ring-thickness)),#000 calc(100% - var(--kpi-ring-thickness) + .5px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--kpi-ring-thickness)),#000 calc(100% - var(--kpi-ring-thickness) + .5px));transition:background .5s ease-out}.axp-kpi-progress .axp-kpi-progress__ring--success{--kpi-ring-color: rgb(var(--ax-sys-color-success-500))}.axp-kpi-progress .axp-kpi-progress__ring--primary{--kpi-ring-color: rgb(var(--ax-sys-color-primary-500))}.axp-kpi-progress .axp-kpi-progress__ring--warning{--kpi-ring-color: rgb(var(--ax-sys-color-warning-500))}.axp-kpi-progress .axp-kpi-progress__ring--danger{--kpi-ring-color: rgb(var(--ax-sys-color-danger-500))}.axp-kpi-progress .axp-kpi-progress__ring-label{position:relative;z-index:1;font-size:.68rem;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:#334155}.axp-kpi-progress .axp-kpi-progress__bar-wrap{margin-top:auto}.axp-kpi-progress .axp-kpi-progress__bar-track{width:100%;overflow:hidden;height:clamp(.4rem,2.5cqi,.55rem);border-radius:999px;background:var(--axp-kpi-accent, #0d9488);border:1px solid var(--axp-kpi-accent, #0d9488)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__bar-track{background:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 8%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__bar-track{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 12%,white)}}.axp-kpi-progress .axp-kpi-progress__bar-fill{height:100%;border-radius:calc(infinity * 1px);transition-property:width;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s;--tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1));transition-timing-function:var(--ease-out, cubic-bezier(0, 0, .2, 1));box-shadow:0 0 10px var(--kpi-ring-color, var(--axp-kpi-accent))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__bar-fill{box-shadow:0 0 10px color-mix(in srgb,var(--kpi-ring-color, var(--axp-kpi-accent)) 35%,transparent)}}@container kpi-widget (max-height: 140px){.axp-kpi-progress__ring{display:none}.axp-kpi-progress__value{font-size:clamp(1.35rem,min(20cqw,28cqh),2rem)}}@container kpi-widget (min-height: 200px){.axp-kpi-progress__main{padding-block:clamp(.25rem,3cqh,.5rem)}}:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__value{color:#f1f5f9}:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__subtitle,:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__target{color:#94a3b8}:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__ring-label{color:#e2e8f0}:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__ring-track{background:var(--axp-kpi-accent, #0d9488);border-color:var(--axp-kpi-accent, #0d9488)}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__ring-track{background:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 16%,#1e293b)}}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__ring-track{border-color:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 24%,#1e293b)}}:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__bar-track{background:var(--axp-kpi-accent, #0d9488);border-color:var(--axp-kpi-accent, #0d9488)}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__bar-track{background:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 14%,#1e293b)}}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__bar-track{border-color:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 20%,#1e293b)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-leading: initial;--tw-tracking: initial;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartQueryTabsComponent, selector: "axp-chart-query-tabs", inputs: ["tabs", "activeIndex"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5201
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPKpiProgressWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-chart-widget-host flex flex-col h-full min-h-0\">\n <axp-chart-query-tabs\n [tabs]=\"queryTabs()\"\n [activeIndex]=\"activeTabIndex()\"\n (activeIndexChange)=\"selectQueryTab($event)\"\n />\n <div class=\"axp-chart-widget-host__body flex-1 min-h-0\">\n <div\n class=\"axp-kpi-progress axp-kpi-widget-card axp-kpi-widget-card--progress\"\n [attr.data-grid-size]=\"gridSizeToken()\"\n >\n <!-- ----- Loading overlay while query data is fetched ----- -->\n @if (showQueryLoading()) {\n <div class=\"axp-kpi-widget-card__loading\" aria-busy=\"true\">\n <ax-loading></ax-loading>\n </div>\n }\n <div class=\"axp-kpi-widget-card__body\">\n <div class=\"axp-kpi-progress__header\">\n <div class=\"axp-kpi-widget-card__title\">{{ localized().title }}</div>\n <div class=\"axp-kpi-progress__badge\">{{ formattedProgressPercent() }}%</div>\n </div>\n\n <div class=\"axp-kpi-progress__main\">\n <div class=\"axp-kpi-progress__value-block\">\n <div class=\"axp-kpi-progress__value-row\">\n <div class=\"axp-kpi-progress__value\">\n {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n </div>\n @if (localized().targetValue) {\n <div class=\"axp-kpi-progress__target-wrap\">\n <span class=\"axp-kpi-progress__target-label\">\n {{ '@dashboard:widgets.kpi-progress.target-label' | translate | async }}\n </span>\n <span class=\"axp-kpi-progress__target\">{{ localized().targetValue }}</span>\n </div>\n }\n </div>\n @if (localized().subtitle) {\n <div class=\"axp-kpi-progress__subtitle\">{{ localized().subtitle }}</div>\n }\n </div>\n\n <div\n [class]=\"'axp-kpi-progress__ring axp-kpi-progress__ring--' + progressBarTone()\"\n [style.--kpi-ring-progress]=\"progressPercent()\"\n role=\"img\"\n [attr.aria-label]=\"formattedProgressPercent() + '% complete'\"\n >\n <div class=\"axp-kpi-progress__ring-track\" aria-hidden=\"true\"></div>\n <div class=\"axp-kpi-progress__ring-fill\" aria-hidden=\"true\"></div>\n <span class=\"axp-kpi-progress__ring-label\">{{ formattedProgressPercent() }}%</span>\n </div>\n </div>\n\n <div class=\"axp-kpi-progress__bar-wrap\">\n <div\n class=\"axp-kpi-progress__bar-track\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"progressPercent()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <div [class]=\"progressBarFillClasses()\" [style.width.%]=\"progressPercent()\"></div>\n </div>\n </div>\n\n <!-- ----- Query error hint ----- -->\n @if (showQueryError()) {\n <p class=\"axp-kpi-widget-card__error\">\n {{ '@dashboard:widgets.kpi-shared.query-error' | translate | async }}\n </p>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%;height:100%;min-height:0px;overflow:hidden}:host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;overflow:visible;min-block-size:0}.axp-chart-widget-host{display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;gap:var(--spacing, .25rem)}.axp-chart-widget-host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body{display:flex;min-height:0px;flex:1;flex-direction:column;gap:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 2)}.axp-chart-widget-host__body:not(.axp-chart-widget-host__body--with-legend)>.axp-chart-widget-host__chart--radial{flex:1 1 auto}.axp-chart-widget-host__body--with-legend{min-height:0px;flex:1;gap:var(--spacing, .25rem);display:grid;grid-template-rows:minmax(0,1fr) auto}.axp-chart-widget-host__chart{position:relative;min-height:calc(var(--spacing, .25rem) * 64);width:100%;overflow:hidden;grid-row:1}.axp-chart-widget-host__chart--radial{position:relative;margin-inline:auto;align-self:center;justify-self:center;overflow:hidden;grid-row:1;flex:0 0 auto;height:auto;width:min(100%,18rem);max-width:100%;min-height:12rem;min-width:8rem;aspect-ratio:1 / 1}.axp-chart-widget-host__chart--funnel{position:relative;width:100%;overflow:hidden;block-size:20rem;flex:0 0 auto;max-block-size:24rem;min-block-size:16rem}.axp-chart-widget-host__chart--funnel ax-funnel-chart,.axp-chart-widget-host__chart--funnel .ax-funnel-chart-container{display:block;block-size:100%;inline-size:100%;min-block-size:0}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--funnel){flex:none}.axp-chart-widget-host__chart--heatmap{position:relative;width:100%;max-width:100%;inline-size:100%;block-size:auto;flex:0 0 auto;overflow:visible;min-height:0!important;min-block-size:0!important;max-block-size:none}.axp-chart-widget-host__chart--heatmap ax-heatmap-chart,.axp-chart-widget-host__chart--heatmap .ax-heatmap-chart-container{display:block;inline-size:100%;max-inline-size:100%;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--heatmap){flex:none;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__legend{width:100%;flex:none;padding-inline:calc(var(--spacing, .25rem) * .5);grid-row:2;min-height:0;display:flex;justify-content:center;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}:host ::ng-deep ax-chart-legend{display:block!important;height:auto!important;max-height:none;width:100%}:host ::ng-deep .ax-chart-legend{--ax-legend-bg: var(--ax-sys-color-lighter-surface);--ax-legend-text: var(--ax-sys-color-on-lighter-surface);--ax-legend-border: var(--ax-sys-color-border-lighter-surface);--ax-legend-radius: .625rem;--ax-legend-padding: .375rem .5rem;--ax-legend-gap: .375rem;--ax-legend-item-height: auto;height:auto;max-height:none;width:100%;overflow:visible;padding:var(--ax-legend-padding);gap:var(--ax-legend-gap);color:rgb(var(--ax-legend-text))}:host ::ng-deep .ax-chart-legend.ax-legend-horizontal{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;border:none;background:transparent;background-color:transparent;padding:0}:host ::ng-deep .ax-legend-item{align-items:center;gap:.375rem;height:auto;min-height:1.5rem;padding-block:.2rem;padding-inline:.5rem;border-radius:9999px;border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease,transform .15s ease}:host ::ng-deep .ax-legend-item:hover{border-color:rgb(var(--ax-sys-color-primary-500));background-color:rgb(var(--ax-sys-color-primary-500));box-shadow:0 1px 2px #0f172a0f}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{border-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 35%,rgb(var(--ax-sys-color-border-lightest-surface)))}}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 6%,rgb(var(--ax-sys-color-lightest-surface)))}}:host ::ng-deep .ax-legend-item:active{transform:scale(.98)}:host ::ng-deep .ax-legend-item.ax-legend-item-hidden{opacity:.62}:host ::ng-deep .ax-legend-color{width:.625rem;height:.625rem;flex-shrink:0;border-radius:9999px;box-shadow:0 0 0 1px rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-color{box-shadow:0 0 0 1px color-mix(in srgb,rgb(var(--ax-legend-text)) 18%,transparent)}}:host ::ng-deep .ax-legend-name{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);max-width:9rem;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ax-legend-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);margin-inline-start:0;opacity:1;color:rgb(var(--ax-sys-color-on-lightest-surface))}:host ::ng-deep .ax-legend-percentage{margin-inline-start:0;border-radius:9999px;padding-inline:.4rem;padding-block:.125rem;font-size:.6875rem;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;background-color:rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-percentage{background-color:color-mix(in srgb,rgb(var(--ax-legend-text)) 12%,transparent)}}:host ::ng-deep ax-donut-chart,:host ::ng-deep ax-gauge-chart,:host ::ng-deep ax-bar-chart,:host ::ng-deep ax-line-chart,:host ::ng-deep ax-funnel-chart{display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}:host ::ng-deep ax-donut-chart .ax-donut-chart,:host ::ng-deep ax-gauge-chart .ax-gauge-chart,:host ::ng-deep ax-bar-chart .ax-bar-chart,:host ::ng-deep ax-line-chart .ax-line-chart,:host ::ng-deep ax-funnel-chart .ax-funnel-chart-container{min-height:0!important;height:100%!important;width:100%!important;padding:.25rem!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart .ax-heatmap-chart-container,:host ::ng-deep .axp-chart-widget-host__chart--heatmap .ax-heatmap-chart{min-height:0!important;height:auto!important;width:100%!important;max-width:100%!important;padding:.25rem!important;overflow:visible!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap svg{display:block;width:100%!important;max-width:100%!important;height:auto!important;overflow:visible!important}.axp-kpi-widget-card{container-type:size;container-name:kpi-widget;--axp-kpi-card-shadow: 0 4px 24px rgba(15, 23, 42, .06), 0 1px 4px rgba(15, 23, 42, .04);position:relative;box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;overflow:hidden;border-radius:var(--radius-2xl, 1rem);padding:clamp(.625rem,3cqi,.875rem) clamp(.75rem,3.5cqi,1rem);border:1px solid var(--axp-kpi-card-border, rgb(var(--ax-sys-color-border-lightest-surface)));background:var( --axp-kpi-card-bg, linear-gradient(145deg, rgb(var(--ax-sys-color-lightest-surface)) 0%, rgb(var(--ax-sys-color-lighter-surface)) 100%) );box-shadow:var(--axp-kpi-card-shadow);-webkit-font-smoothing:antialiased}.axp-kpi-widget-card:before{content:\"\";position:absolute;inset-inline-end:-18%;top:-28%;width:58%;height:78%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 0%,transparent 72%)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card:before{background:radial-gradient(circle at center,color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 14%,transparent) 0%,transparent 72%)}}.axp-kpi-widget-card:after{content:\"\";position:absolute;inset-inline-start:-12%;bottom:-22%;width:42%;height:55%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 0%,transparent 70%)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card:after{background:radial-gradient(circle at center,color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 8%,transparent) 0%,transparent 70%)}}.axp-kpi-widget-card__body{position:relative;z-index:1;display:flex;min-height:0px;flex:1;flex-direction:column;gap:clamp(.375rem,2.5cqi,.625rem)}.axp-kpi-widget-card__loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background:rgb(var(--ax-sys-color-lightest-surface));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__loading{background:color-mix(in srgb,rgb(var(--ax-sys-color-lightest-surface)) 82%,transparent)}}.axp-kpi-widget-card__loading ax-loading{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.axp-kpi-widget-card__error{margin-top:auto;font-size:.7rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--ax-sys-color-danger-600))}.axp-kpi-widget-card__empty{display:flex;min-height:2.5rem;flex:1;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-on-surface));padding-inline:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:.78rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-kpi-widget-card__title{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);font-size:clamp(.75rem,min(4cqi,4.5cqh),.875rem);color:#334155;letter-spacing:.01em}.axp-kpi-widget-card__chip{display:inline-flex;flex-shrink:0;align-items:center;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.65rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-700)));background:var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500)));border:1px solid var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500)))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__chip{background:color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 12%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__chip{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 18%,white)}}.axp-kpi-widget-card--details{--axp-kpi-accent: #6366f1;--axp-kpi-card-border: #e0e7ff;--axp-kpi-card-bg: linear-gradient(145deg, #fafaff 0%, #f3f4ff 52%, #eef2ff 100%)}.axp-kpi-widget-card--progress{--axp-kpi-accent: #0d9488;--axp-kpi-card-border: #ccfbf1;--axp-kpi-card-bg: linear-gradient(145deg, #f7fffe 0%, #ecfdf9 52%, #e6faf5 100%)}.axp-kpi-widget-card--segmented{--axp-kpi-accent: #d97706;--axp-kpi-card-border: #fde8c8;--axp-kpi-card-bg: linear-gradient(145deg, #fffbf5 0%, #fff7ed 52%, #ffedd5 100%)}.axp-kpi-widget-card[data-grid-size=\"1x1\"]{padding:.5rem .625rem}.axp-kpi-widget-card[data-grid-size=\"1x2\"] .axp-kpi-widget-card__body,.axp-kpi-widget-card[data-grid-size=\"1x3\"] .axp-kpi-widget-card__body,.axp-kpi-widget-card[data-grid-size=\"1x4\"] .axp-kpi-widget-card__body{justify-content:center}.axp-kpi-widget-card[data-grid-size=\"3x2\"] .axp-kpi-segmented__legend,.axp-kpi-widget-card[data-grid-size=\"4x3\"] .axp-kpi-details__items{grid-template-columns:repeat(2,minmax(0,1fr))}.axp-kpi-progress__bar-fill--success{background:linear-gradient(90deg,rgb(var(--ax-sys-color-success-300)),rgb(var(--ax-sys-color-success-500)))}.axp-kpi-progress__bar-fill--primary{background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-300)),rgb(var(--ax-sys-color-primary-500)))}.axp-kpi-progress__bar-fill--warning{background:linear-gradient(90deg,rgb(var(--ax-sys-color-warning-300)),rgb(var(--ax-sys-color-warning-500)))}.axp-kpi-progress__bar-fill--danger{background:linear-gradient(90deg,rgb(var(--ax-sys-color-danger-300)),rgb(var(--ax-sys-color-danger-500)))}:host-context(.dark) .axp-kpi-widget-card{--axp-kpi-card-shadow: 0 4px 20px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .16)}:host-context(.dark) .axp-kpi-widget-card--details{--axp-kpi-card-border: rgba(129, 140, 248, .28);--axp-kpi-card-bg: linear-gradient(145deg, #2a2d3d 0%, #252836 52%, #222530 100%)}:host-context(.dark) .axp-kpi-widget-card--progress{--axp-kpi-card-border: rgba(45, 212, 191, .22);--axp-kpi-card-bg: linear-gradient(145deg, #243330 0%, #1f2e2c 52%, #1c2928 100%)}:host-context(.dark) .axp-kpi-widget-card--segmented{--axp-kpi-card-border: rgba(251, 191, 36, .22);--axp-kpi-card-bg: linear-gradient(145deg, #332c24 0%, #2d2820 52%, #29241e 100%)}:host-context(.dark) .axp-kpi-widget-card__title{color:#e2e8f0}:host{display:block;width:100%;height:100%;min-height:0px}.axp-kpi-progress .axp-kpi-progress__header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-kpi-progress .axp-kpi-progress__badge{border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.7rem;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:var(--axp-kpi-accent, #0d9488);background:var(--axp-kpi-accent, #0d9488);border:1px solid var(--axp-kpi-accent, #0d9488)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__badge{background:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 12%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__badge{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 22%,white)}}.axp-kpi-progress .axp-kpi-progress__main{display:flex;min-height:0px;flex:1;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-block:clamp(.125rem,2cqh,.375rem)}.axp-kpi-progress .axp-kpi-progress__value-block{display:flex;min-width:0px;flex:1;flex-direction:column;gap:clamp(.125rem,1.5cqi,.25rem)}.axp-kpi-progress .axp-kpi-progress__value-row{display:flex;min-width:0px;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 3)}.axp-kpi-progress .axp-kpi-progress__value{margin:0;font-variant-numeric:tabular-nums;line-height:.92;letter-spacing:-.04em;font-weight:300;color:#0f172a;font-size:clamp(1.75rem,min(24cqw,34cqh),3.25rem)}.axp-kpi-progress .axp-kpi-progress__target-wrap{display:flex;min-width:0px;flex-direction:column;align-items:flex-start;padding-bottom:calc(var(--spacing, .25rem) * .5);gap:.1rem}.axp-kpi-progress .axp-kpi-progress__target-label{font-size:.62rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-widest, .1em);letter-spacing:var(--tracking-widest, .1em);text-transform:uppercase;color:#94a3b8}.axp-kpi-progress .axp-kpi-progress__target{font-size:.95rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:#64748b}.axp-kpi-progress .axp-kpi-progress__subtitle{font-size:.78rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:#64748b}.axp-kpi-progress .axp-kpi-progress__ring{--kpi-ring-size: clamp(3.25rem, min(22cqw, 30cqh), 4.5rem);--kpi-ring-thickness: clamp(.28rem, 1.8cqi, .4rem);position:relative;display:grid;flex-shrink:0;place-items:center;width:var(--kpi-ring-size);height:var(--kpi-ring-size)}.axp-kpi-progress .axp-kpi-progress__ring-track,.axp-kpi-progress .axp-kpi-progress__ring-fill{position:absolute;inset:0;border-radius:calc(infinity * 1px)}.axp-kpi-progress .axp-kpi-progress__ring-track{background:var(--axp-kpi-accent, #0d9488);border:1px solid var(--axp-kpi-accent, #0d9488)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__ring-track{background:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 10%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__ring-track{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 14%,white)}}.axp-kpi-progress .axp-kpi-progress__ring-fill{background:conic-gradient(var(--kpi-ring-color, var(--axp-kpi-accent, #0d9488)) calc(var(--kpi-ring-progress, 0) * 1%),transparent 0);mask:radial-gradient(farthest-side,transparent calc(100% - var(--kpi-ring-thickness)),#000 calc(100% - var(--kpi-ring-thickness) + .5px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--kpi-ring-thickness)),#000 calc(100% - var(--kpi-ring-thickness) + .5px));transition:background .5s ease-out}.axp-kpi-progress .axp-kpi-progress__ring--success{--kpi-ring-color: rgb(var(--ax-sys-color-success-500))}.axp-kpi-progress .axp-kpi-progress__ring--primary{--kpi-ring-color: rgb(var(--ax-sys-color-primary-500))}.axp-kpi-progress .axp-kpi-progress__ring--warning{--kpi-ring-color: rgb(var(--ax-sys-color-warning-500))}.axp-kpi-progress .axp-kpi-progress__ring--danger{--kpi-ring-color: rgb(var(--ax-sys-color-danger-500))}.axp-kpi-progress .axp-kpi-progress__ring-label{position:relative;z-index:1;font-size:.68rem;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:#334155}.axp-kpi-progress .axp-kpi-progress__bar-wrap{margin-top:auto}.axp-kpi-progress .axp-kpi-progress__bar-track{width:100%;overflow:hidden;height:clamp(.4rem,2.5cqi,.55rem);border-radius:999px;background:var(--axp-kpi-accent, #0d9488);border:1px solid var(--axp-kpi-accent, #0d9488)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__bar-track{background:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 8%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__bar-track{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 12%,white)}}.axp-kpi-progress .axp-kpi-progress__bar-fill{height:100%;border-radius:calc(infinity * 1px);transition-property:width;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s;--tw-ease: var(--ease-out, cubic-bezier(0, 0, .2, 1));transition-timing-function:var(--ease-out, cubic-bezier(0, 0, .2, 1));box-shadow:0 0 10px var(--kpi-ring-color, var(--axp-kpi-accent))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-progress .axp-kpi-progress__bar-fill{box-shadow:0 0 10px color-mix(in srgb,var(--kpi-ring-color, var(--axp-kpi-accent)) 35%,transparent)}}@container kpi-widget (max-height: 140px){.axp-kpi-progress__ring{display:none}.axp-kpi-progress__value{font-size:clamp(1.35rem,min(20cqw,28cqh),2rem)}}@container kpi-widget (min-height: 200px){.axp-kpi-progress__main{padding-block:clamp(.25rem,3cqh,.5rem)}}:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__value{color:#f1f5f9}:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__subtitle,:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__target{color:#94a3b8}:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__ring-label{color:#e2e8f0}:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__ring-track{background:var(--axp-kpi-accent, #0d9488);border-color:var(--axp-kpi-accent, #0d9488)}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__ring-track{background:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 16%,#1e293b)}}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__ring-track{border-color:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 24%,#1e293b)}}:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__bar-track{background:var(--axp-kpi-accent, #0d9488);border-color:var(--axp-kpi-accent, #0d9488)}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__bar-track{background:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 14%,#1e293b)}}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-progress .axp-kpi-progress__bar-track{border-color:color-mix(in srgb,var(--axp-kpi-accent, #0d9488) 20%,#1e293b)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-leading: initial;--tw-tracking: initial;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartQueryTabsComponent, selector: "axp-chart-query-tabs", inputs: ["tabs", "activeIndex"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4349
5202
|
}
|
|
4350
5203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPKpiProgressWidgetViewComponent, decorators: [{
|
|
4351
5204
|
type: Component,
|
|
@@ -4569,7 +5422,7 @@ class AXPKpiSegmentedWidgetViewComponent extends AXPDashboardWidgetComponent {
|
|
|
4569
5422
|
return resolved;
|
|
4570
5423
|
}
|
|
4571
5424
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPKpiSegmentedWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4572
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPKpiSegmentedWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-chart-widget-host flex flex-col h-full min-h-0\">\n <axp-chart-query-tabs\n [tabs]=\"queryTabs()\"\n [activeIndex]=\"activeTabIndex()\"\n (activeIndexChange)=\"selectQueryTab($event)\"\n />\n <div class=\"axp-chart-widget-host__body flex-1 min-h-0\">\n <div\n class=\"axp-kpi-segmented axp-kpi-widget-card axp-kpi-widget-card--segmented\"\n [attr.data-grid-size]=\"gridSizeToken()\"\n >\n <!-- ----- Loading overlay while query data is fetched ----- -->\n @if (showQueryLoading()) {\n <div class=\"axp-kpi-widget-card__loading\" aria-busy=\"true\">\n <ax-loading></ax-loading>\n </div>\n }\n <div class=\"axp-kpi-widget-card__body\">\n <div class=\"axp-kpi-segmented__header\">\n <div class=\"axp-kpi-widget-card__title\">{{ title() }}</div>\n @if (hasSegments()) {\n <div class=\"axp-kpi-segmented__total\">{{ segmentTotal() }}</div>\n }\n </div>\n\n @if (hasSegments()) {\n <div class=\"axp-kpi-segmented__bar-track\" role=\"img\" [attr.aria-label]=\"title()\">\n @for (segment of segments(); track trackByLabel($index, segment)) {\n <div\n class=\"axp-kpi-segmented__bar-part\"\n [style.flex-grow]=\"segment.value\"\n [style.background-color]=\"segment.color\"\n [attr.title]=\"segment.label + ': ' + segment.value\"\n ></div>\n }\n </div>\n\n <div class=\"axp-kpi-segmented__legend\">\n @for (segment of segments(); track trackByLabel($index, segment)) {\n <div\n class=\"axp-kpi-segmented__legend-item\"\n [style.--segment-color]=\"segment.color\"\n >\n <div class=\"axp-kpi-segmented__legend-head\">\n <span class=\"axp-kpi-segmented__legend-dot\" [style.background-color]=\"segment.color\"></span>\n <span class=\"axp-kpi-segmented__legend-value\">{{ segment.value }}</span>\n </div>\n <span class=\"axp-kpi-segmented__legend-label\">{{ segment.label }}</span>\n </div>\n }\n </div>\n }\n <!-- ----- Empty state when no segments are configured ----- -->\n @else if (showEmptyState()) {\n <div class=\"axp-kpi-widget-card__empty\">\n {{ '@dashboard:widgets.kpi-segmented.empty-segments' | translate | async }}\n </div>\n }\n\n <!-- ----- Query error hint ----- -->\n @if (showQueryError()) {\n <p class=\"axp-kpi-widget-card__error\">\n {{ '@dashboard:widgets.kpi-shared.query-error' | translate | async }}\n </p>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%;height:100%;min-height:0px;overflow:hidden}:host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;overflow:visible;min-block-size:0}.axp-chart-widget-host{display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;gap:var(--spacing, .25rem)}.axp-chart-widget-host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body{display:flex;min-height:0px;flex:1;flex-direction:column;gap:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 2)}.axp-chart-widget-host__body:not(.axp-chart-widget-host__body--with-legend)>.axp-chart-widget-host__chart--radial{flex:1 1 auto}.axp-chart-widget-host__body--with-legend{min-height:0px;flex:1;gap:var(--spacing, .25rem);display:grid;grid-template-rows:minmax(0,1fr) auto}.axp-chart-widget-host__chart{position:relative;min-height:calc(var(--spacing, .25rem) * 64);width:100%;overflow:hidden;grid-row:1}.axp-chart-widget-host__chart--radial{position:relative;margin-inline:auto;align-self:center;justify-self:center;overflow:hidden;grid-row:1;flex:0 0 auto;height:auto;width:min(100%,18rem);max-width:100%;min-height:12rem;min-width:8rem;aspect-ratio:1 / 1}.axp-chart-widget-host__chart--funnel{position:relative;width:100%;overflow:hidden;block-size:20rem;flex:0 0 auto;max-block-size:24rem;min-block-size:16rem}.axp-chart-widget-host__chart--funnel ax-funnel-chart,.axp-chart-widget-host__chart--funnel .ax-funnel-chart-container{display:block;block-size:100%;inline-size:100%;min-block-size:0}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--funnel){flex:none}.axp-chart-widget-host__chart--heatmap{position:relative;width:100%;max-width:100%;inline-size:100%;block-size:auto;flex:0 0 auto;overflow:visible;min-height:0!important;min-block-size:0!important;max-block-size:none}.axp-chart-widget-host__chart--heatmap ax-heatmap-chart,.axp-chart-widget-host__chart--heatmap .ax-heatmap-chart-container{display:block;inline-size:100%;max-inline-size:100%;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--heatmap){flex:none;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__legend{width:100%;flex:none;padding-inline:calc(var(--spacing, .25rem) * .5);grid-row:2;min-height:0;display:flex;justify-content:center;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}:host ::ng-deep ax-chart-legend{display:block!important;height:auto!important;max-height:none;width:100%}:host ::ng-deep .ax-chart-legend{--ax-legend-bg: var(--ax-sys-color-lighter-surface);--ax-legend-text: var(--ax-sys-color-on-lighter-surface);--ax-legend-border: var(--ax-sys-color-border-lighter-surface);--ax-legend-radius: .625rem;--ax-legend-padding: .375rem .5rem;--ax-legend-gap: .375rem;--ax-legend-item-height: auto;height:auto;max-height:none;width:100%;overflow:visible;padding:var(--ax-legend-padding);gap:var(--ax-legend-gap);color:rgb(var(--ax-legend-text))}:host ::ng-deep .ax-chart-legend.ax-legend-horizontal{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;border:none;background:transparent;background-color:transparent;padding:0}:host ::ng-deep .ax-legend-item{align-items:center;gap:.375rem;height:auto;min-height:1.5rem;padding-block:.2rem;padding-inline:.5rem;border-radius:9999px;border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease,transform .15s ease}:host ::ng-deep .ax-legend-item:hover{border-color:rgb(var(--ax-sys-color-primary-500));background-color:rgb(var(--ax-sys-color-primary-500));box-shadow:0 1px 2px #0f172a0f}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{border-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 35%,rgb(var(--ax-sys-color-border-lightest-surface)))}}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 6%,rgb(var(--ax-sys-color-lightest-surface)))}}:host ::ng-deep .ax-legend-item:active{transform:scale(.98)}:host ::ng-deep .ax-legend-item.ax-legend-item-hidden{opacity:.62}:host ::ng-deep .ax-legend-color{width:.625rem;height:.625rem;flex-shrink:0;border-radius:9999px;box-shadow:0 0 0 1px rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-color{box-shadow:0 0 0 1px color-mix(in srgb,rgb(var(--ax-legend-text)) 18%,transparent)}}:host ::ng-deep .ax-legend-name{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);max-width:9rem;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ax-legend-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);margin-inline-start:0;opacity:1;color:rgb(var(--ax-sys-color-on-lightest-surface))}:host ::ng-deep .ax-legend-percentage{margin-inline-start:0;border-radius:9999px;padding-inline:.4rem;padding-block:.125rem;font-size:.6875rem;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;background-color:rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-percentage{background-color:color-mix(in srgb,rgb(var(--ax-legend-text)) 12%,transparent)}}:host ::ng-deep ax-donut-chart,:host ::ng-deep ax-gauge-chart,:host ::ng-deep ax-bar-chart,:host ::ng-deep ax-line-chart,:host ::ng-deep ax-funnel-chart{display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}:host ::ng-deep ax-donut-chart .ax-donut-chart,:host ::ng-deep ax-gauge-chart .ax-gauge-chart,:host ::ng-deep ax-bar-chart .ax-bar-chart,:host ::ng-deep ax-line-chart .ax-line-chart,:host ::ng-deep ax-funnel-chart .ax-funnel-chart-container{min-height:0!important;height:100%!important;width:100%!important;padding:.25rem!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart .ax-heatmap-chart-container,:host ::ng-deep .axp-chart-widget-host__chart--heatmap .ax-heatmap-chart{min-height:0!important;height:auto!important;width:100%!important;max-width:100%!important;padding:.25rem!important;overflow:visible!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap svg{display:block;width:100%!important;max-width:100%!important;height:auto!important;overflow:visible!important}.axp-kpi-widget-card{container-type:size;container-name:kpi-widget;--axp-kpi-card-shadow: 0 4px 24px rgba(15, 23, 42, .06), 0 1px 4px rgba(15, 23, 42, .04);position:relative;box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;overflow:hidden;border-radius:var(--radius-2xl, 1rem);padding:clamp(.625rem,3cqi,.875rem) clamp(.75rem,3.5cqi,1rem);border:1px solid var(--axp-kpi-card-border, rgb(var(--ax-sys-color-border-lightest-surface)));background:var( --axp-kpi-card-bg, linear-gradient(145deg, rgb(var(--ax-sys-color-lightest-surface)) 0%, rgb(var(--ax-sys-color-lighter-surface)) 100%) );box-shadow:var(--axp-kpi-card-shadow);-webkit-font-smoothing:antialiased}.axp-kpi-widget-card:before{content:\"\";position:absolute;inset-inline-end:-18%;top:-28%;width:58%;height:78%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 0%,transparent 72%)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card:before{background:radial-gradient(circle at center,color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 14%,transparent) 0%,transparent 72%)}}.axp-kpi-widget-card:after{content:\"\";position:absolute;inset-inline-start:-12%;bottom:-22%;width:42%;height:55%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 0%,transparent 70%)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card:after{background:radial-gradient(circle at center,color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 8%,transparent) 0%,transparent 70%)}}.axp-kpi-widget-card__body{position:relative;z-index:1;display:flex;min-height:0px;flex:1;flex-direction:column;gap:clamp(.375rem,2.5cqi,.625rem)}.axp-kpi-widget-card__loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background:rgb(var(--ax-sys-color-lightest-surface));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__loading{background:color-mix(in srgb,rgb(var(--ax-sys-color-lightest-surface)) 82%,transparent)}}.axp-kpi-widget-card__loading ax-loading{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.axp-kpi-widget-card__error{margin-top:auto;font-size:.7rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--ax-sys-color-danger-600))}.axp-kpi-widget-card__empty{display:flex;min-height:2.5rem;flex:1;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-on-surface));padding-inline:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:.78rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-kpi-widget-card__title{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);font-size:clamp(.75rem,min(4cqi,4.5cqh),.875rem);color:#334155;letter-spacing:.01em}.axp-kpi-widget-card__chip{display:inline-flex;flex-shrink:0;align-items:center;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.65rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-700)));background:var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500)));border:1px solid var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500)))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__chip{background:color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 12%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__chip{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 18%,white)}}.axp-kpi-widget-card--details{--axp-kpi-accent: #6366f1;--axp-kpi-card-border: #e0e7ff;--axp-kpi-card-bg: linear-gradient(145deg, #fafaff 0%, #f3f4ff 52%, #eef2ff 100%)}.axp-kpi-widget-card--progress{--axp-kpi-accent: #0d9488;--axp-kpi-card-border: #ccfbf1;--axp-kpi-card-bg: linear-gradient(145deg, #f7fffe 0%, #ecfdf9 52%, #e6faf5 100%)}.axp-kpi-widget-card--segmented{--axp-kpi-accent: #d97706;--axp-kpi-card-border: #fde8c8;--axp-kpi-card-bg: linear-gradient(145deg, #fffbf5 0%, #fff7ed 52%, #ffedd5 100%)}.axp-kpi-widget-card[data-grid-size=\"1x1\"]{padding:.5rem .625rem}.axp-kpi-widget-card[data-grid-size=\"1x2\"] .axp-kpi-widget-card__body,.axp-kpi-widget-card[data-grid-size=\"1x3\"] .axp-kpi-widget-card__body,.axp-kpi-widget-card[data-grid-size=\"1x4\"] .axp-kpi-widget-card__body{justify-content:center}.axp-kpi-widget-card[data-grid-size=\"3x2\"] .axp-kpi-segmented__legend,.axp-kpi-widget-card[data-grid-size=\"4x3\"] .axp-kpi-details__items{grid-template-columns:repeat(2,minmax(0,1fr))}.axp-kpi-progress__bar-fill--success{background:linear-gradient(90deg,rgb(var(--ax-sys-color-success-300)),rgb(var(--ax-sys-color-success-500)))}.axp-kpi-progress__bar-fill--primary{background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-300)),rgb(var(--ax-sys-color-primary-500)))}.axp-kpi-progress__bar-fill--warning{background:linear-gradient(90deg,rgb(var(--ax-sys-color-warning-300)),rgb(var(--ax-sys-color-warning-500)))}.axp-kpi-progress__bar-fill--danger{background:linear-gradient(90deg,rgb(var(--ax-sys-color-danger-300)),rgb(var(--ax-sys-color-danger-500)))}:host-context(.dark) .axp-kpi-widget-card{--axp-kpi-card-shadow: 0 4px 20px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .16)}:host-context(.dark) .axp-kpi-widget-card--details{--axp-kpi-card-border: rgba(129, 140, 248, .28);--axp-kpi-card-bg: linear-gradient(145deg, #2a2d3d 0%, #252836 52%, #222530 100%)}:host-context(.dark) .axp-kpi-widget-card--progress{--axp-kpi-card-border: rgba(45, 212, 191, .22);--axp-kpi-card-bg: linear-gradient(145deg, #243330 0%, #1f2e2c 52%, #1c2928 100%)}:host-context(.dark) .axp-kpi-widget-card--segmented{--axp-kpi-card-border: rgba(251, 191, 36, .22);--axp-kpi-card-bg: linear-gradient(145deg, #332c24 0%, #2d2820 52%, #29241e 100%)}:host-context(.dark) .axp-kpi-widget-card__title{color:#e2e8f0}:host{display:block;width:100%;height:100%;min-height:0px}.axp-kpi-segmented .axp-kpi-segmented__header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-kpi-segmented .axp-kpi-segmented__total{border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.7rem;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:var(--axp-kpi-accent, #d97706);background:var(--axp-kpi-accent, #d97706);border:1px solid var(--axp-kpi-accent, #d97706)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-segmented .axp-kpi-segmented__total{background:color-mix(in srgb,var(--axp-kpi-accent, #d97706) 12%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-segmented .axp-kpi-segmented__total{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, #d97706) 22%,white)}}.axp-kpi-segmented .axp-kpi-segmented__bar-track{display:flex;width:100%;overflow:hidden;gap:clamp(.15rem,1cqi,.25rem);height:clamp(.75rem,4.5cqh,1.125rem);border-radius:999px;padding:2px;background:var(--axp-kpi-accent, #d97706);border:1px solid var(--axp-kpi-accent, #d97706)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-segmented .axp-kpi-segmented__bar-track{background:color-mix(in srgb,var(--axp-kpi-accent, #d97706) 8%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-segmented .axp-kpi-segmented__bar-track{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, #d97706) 14%,white)}}.axp-kpi-segmented .axp-kpi-segmented__bar-part{flex-basis:0;min-width:.35rem;border-radius:999px;transition:flex-grow .45s ease-out;box-shadow:inset 0 1px #ffffff47}.axp-kpi-segmented .axp-kpi-segmented__legend{margin-top:auto;display:grid;min-height:0px;flex:1;gap:clamp(.375rem,2cqi,.625rem);grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));align-content:end}.axp-kpi-segmented .axp-kpi-segmented__legend-item{display:flex;min-width:0px;flex-direction:column;gap:.2rem;padding:clamp(.375rem,2cqi,.5rem) clamp(.5rem,2.5cqi,.625rem);border-radius:.75rem;background:color-mix(in srgb,white 78%,transparent);border:1px solid var(--segment-color, var(--axp-kpi-accent));box-shadow:0 1px 2px #0f172a0a}@supports (color: color-mix(in lab,red,red)){.axp-kpi-segmented .axp-kpi-segmented__legend-item{border:1px solid color-mix(in srgb,var(--segment-color, var(--axp-kpi-accent)) 18%,white)}}.axp-kpi-segmented .axp-kpi-segmented__legend-head{display:flex;min-width:0px;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5)}.axp-kpi-segmented .axp-kpi-segmented__legend-dot{flex-shrink:0;border-radius:calc(infinity * 1px);width:.5rem;height:.5rem;box-shadow:0 0 0 2px var(--segment-color, var(--axp-kpi-accent))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-segmented .axp-kpi-segmented__legend-dot{box-shadow:0 0 0 2px color-mix(in srgb,var(--segment-color, var(--axp-kpi-accent)) 16%,white)}}.axp-kpi-segmented .axp-kpi-segmented__legend-value{font-size:.9rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:#0f172a}.axp-kpi-segmented .axp-kpi-segmented__legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:#64748b}@container kpi-widget (max-height: 150px){.axp-kpi-segmented__legend{grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr));gap:.25rem}.axp-kpi-segmented__legend-item{padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}}@container kpi-widget (min-height: 220px){.axp-kpi-segmented__bar-track{height:clamp(.875rem,5cqh,1.25rem)}.axp-kpi-segmented__legend{gap:.625rem}}:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__bar-track{background:var(--axp-kpi-accent, #d97706);border-color:var(--axp-kpi-accent, #d97706)}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__bar-track{background:color-mix(in srgb,var(--axp-kpi-accent, #d97706) 14%,#1e293b)}}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__bar-track{border-color:color-mix(in srgb,var(--axp-kpi-accent, #d97706) 22%,#1e293b)}}:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__legend-item{background:color-mix(in srgb,#1e293b 82%,transparent);border-color:var(--segment-color, var(--axp-kpi-accent))}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__legend-item{border-color:color-mix(in srgb,var(--segment-color, var(--axp-kpi-accent)) 24%,#1e293b)}}:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__legend-value{color:#f1f5f9}:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__legend-label{color:#94a3b8}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-leading: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartQueryTabsComponent, selector: "axp-chart-query-tabs", inputs: ["tabs", "activeIndex"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5425
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPKpiSegmentedWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-chart-widget-host flex flex-col h-full min-h-0\">\n <axp-chart-query-tabs\n [tabs]=\"queryTabs()\"\n [activeIndex]=\"activeTabIndex()\"\n (activeIndexChange)=\"selectQueryTab($event)\"\n />\n <div class=\"axp-chart-widget-host__body flex-1 min-h-0\">\n <div\n class=\"axp-kpi-segmented axp-kpi-widget-card axp-kpi-widget-card--segmented\"\n [attr.data-grid-size]=\"gridSizeToken()\"\n >\n <!-- ----- Loading overlay while query data is fetched ----- -->\n @if (showQueryLoading()) {\n <div class=\"axp-kpi-widget-card__loading\" aria-busy=\"true\">\n <ax-loading></ax-loading>\n </div>\n }\n <div class=\"axp-kpi-widget-card__body\">\n <div class=\"axp-kpi-segmented__header\">\n <div class=\"axp-kpi-widget-card__title\">{{ title() }}</div>\n @if (hasSegments()) {\n <div class=\"axp-kpi-segmented__total\">{{ segmentTotal() }}</div>\n }\n </div>\n\n @if (hasSegments()) {\n <div class=\"axp-kpi-segmented__bar-track\" role=\"img\" [attr.aria-label]=\"title()\">\n @for (segment of segments(); track trackByLabel($index, segment)) {\n <div\n class=\"axp-kpi-segmented__bar-part\"\n [style.flex-grow]=\"segment.value\"\n [style.background-color]=\"segment.color\"\n [attr.title]=\"segment.label + ': ' + segment.value\"\n ></div>\n }\n </div>\n\n <div class=\"axp-kpi-segmented__legend\">\n @for (segment of segments(); track trackByLabel($index, segment)) {\n <div\n class=\"axp-kpi-segmented__legend-item\"\n [style.--segment-color]=\"segment.color\"\n >\n <div class=\"axp-kpi-segmented__legend-head\">\n <span class=\"axp-kpi-segmented__legend-dot\" [style.background-color]=\"segment.color\"></span>\n <span class=\"axp-kpi-segmented__legend-value\">{{ segment.value }}</span>\n </div>\n <span class=\"axp-kpi-segmented__legend-label\">{{ segment.label }}</span>\n </div>\n }\n </div>\n }\n <!-- ----- Empty state when no segments are configured ----- -->\n @else if (showEmptyState()) {\n <div class=\"axp-kpi-widget-card__empty\">\n {{ '@dashboard:widgets.kpi-segmented.empty-segments' | translate | async }}\n </div>\n }\n\n <!-- ----- Query error hint ----- -->\n @if (showQueryError()) {\n <p class=\"axp-kpi-widget-card__error\">\n {{ '@dashboard:widgets.kpi-shared.query-error' | translate | async }}\n </p>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%;height:100%;min-height:0px;overflow:hidden}:host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;overflow:visible;min-block-size:0}.axp-chart-widget-host{display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;gap:var(--spacing, .25rem)}.axp-chart-widget-host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body{display:flex;min-height:0px;flex:1;flex-direction:column;gap:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 2)}.axp-chart-widget-host__body:not(.axp-chart-widget-host__body--with-legend)>.axp-chart-widget-host__chart--radial{flex:1 1 auto}.axp-chart-widget-host__body--with-legend{min-height:0px;flex:1;gap:var(--spacing, .25rem);display:grid;grid-template-rows:minmax(0,1fr) auto}.axp-chart-widget-host__chart{position:relative;min-height:calc(var(--spacing, .25rem) * 64);width:100%;overflow:hidden;grid-row:1}.axp-chart-widget-host__chart--radial{position:relative;margin-inline:auto;align-self:center;justify-self:center;overflow:hidden;grid-row:1;flex:0 0 auto;height:auto;width:min(100%,18rem);max-width:100%;min-height:12rem;min-width:8rem;aspect-ratio:1 / 1}.axp-chart-widget-host__chart--funnel{position:relative;width:100%;overflow:hidden;block-size:20rem;flex:0 0 auto;max-block-size:24rem;min-block-size:16rem}.axp-chart-widget-host__chart--funnel ax-funnel-chart,.axp-chart-widget-host__chart--funnel .ax-funnel-chart-container{display:block;block-size:100%;inline-size:100%;min-block-size:0}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--funnel){flex:none}.axp-chart-widget-host__chart--heatmap{position:relative;width:100%;max-width:100%;inline-size:100%;block-size:auto;flex:0 0 auto;overflow:visible;min-height:0!important;min-block-size:0!important;max-block-size:none}.axp-chart-widget-host__chart--heatmap ax-heatmap-chart,.axp-chart-widget-host__chart--heatmap .ax-heatmap-chart-container{display:block;inline-size:100%;max-inline-size:100%;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--heatmap){flex:none;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__legend{width:100%;flex:none;padding-inline:calc(var(--spacing, .25rem) * .5);grid-row:2;min-height:0;display:flex;justify-content:center;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}:host ::ng-deep ax-chart-legend{display:block!important;height:auto!important;max-height:none;width:100%}:host ::ng-deep .ax-chart-legend{--ax-legend-bg: var(--ax-sys-color-lighter-surface);--ax-legend-text: var(--ax-sys-color-on-lighter-surface);--ax-legend-border: var(--ax-sys-color-border-lighter-surface);--ax-legend-radius: .625rem;--ax-legend-padding: .375rem .5rem;--ax-legend-gap: .375rem;--ax-legend-item-height: auto;height:auto;max-height:none;width:100%;overflow:visible;padding:var(--ax-legend-padding);gap:var(--ax-legend-gap);color:rgb(var(--ax-legend-text))}:host ::ng-deep .ax-chart-legend.ax-legend-horizontal{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;border:none;background:transparent;background-color:transparent;padding:0}:host ::ng-deep .ax-legend-item{align-items:center;gap:.375rem;height:auto;min-height:1.5rem;padding-block:.2rem;padding-inline:.5rem;border-radius:9999px;border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease,transform .15s ease}:host ::ng-deep .ax-legend-item:hover{border-color:rgb(var(--ax-sys-color-primary-500));background-color:rgb(var(--ax-sys-color-primary-500));box-shadow:0 1px 2px #0f172a0f}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{border-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 35%,rgb(var(--ax-sys-color-border-lightest-surface)))}}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 6%,rgb(var(--ax-sys-color-lightest-surface)))}}:host ::ng-deep .ax-legend-item:active{transform:scale(.98)}:host ::ng-deep .ax-legend-item.ax-legend-item-hidden{opacity:.62}:host ::ng-deep .ax-legend-color{width:.625rem;height:.625rem;flex-shrink:0;border-radius:9999px;box-shadow:0 0 0 1px rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-color{box-shadow:0 0 0 1px color-mix(in srgb,rgb(var(--ax-legend-text)) 18%,transparent)}}:host ::ng-deep .ax-legend-name{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);max-width:9rem;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ax-legend-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);margin-inline-start:0;opacity:1;color:rgb(var(--ax-sys-color-on-lightest-surface))}:host ::ng-deep .ax-legend-percentage{margin-inline-start:0;border-radius:9999px;padding-inline:.4rem;padding-block:.125rem;font-size:.6875rem;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;background-color:rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-percentage{background-color:color-mix(in srgb,rgb(var(--ax-legend-text)) 12%,transparent)}}:host ::ng-deep ax-donut-chart,:host ::ng-deep ax-gauge-chart,:host ::ng-deep ax-bar-chart,:host ::ng-deep ax-line-chart,:host ::ng-deep ax-funnel-chart{display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}:host ::ng-deep ax-donut-chart .ax-donut-chart,:host ::ng-deep ax-gauge-chart .ax-gauge-chart,:host ::ng-deep ax-bar-chart .ax-bar-chart,:host ::ng-deep ax-line-chart .ax-line-chart,:host ::ng-deep ax-funnel-chart .ax-funnel-chart-container{min-height:0!important;height:100%!important;width:100%!important;padding:.25rem!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart .ax-heatmap-chart-container,:host ::ng-deep .axp-chart-widget-host__chart--heatmap .ax-heatmap-chart{min-height:0!important;height:auto!important;width:100%!important;max-width:100%!important;padding:.25rem!important;overflow:visible!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap svg{display:block;width:100%!important;max-width:100%!important;height:auto!important;overflow:visible!important}.axp-kpi-widget-card{container-type:size;container-name:kpi-widget;--axp-kpi-card-shadow: 0 4px 24px rgba(15, 23, 42, .06), 0 1px 4px rgba(15, 23, 42, .04);position:relative;box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;overflow:hidden;border-radius:var(--radius-2xl, 1rem);padding:clamp(.625rem,3cqi,.875rem) clamp(.75rem,3.5cqi,1rem);border:1px solid var(--axp-kpi-card-border, rgb(var(--ax-sys-color-border-lightest-surface)));background:var( --axp-kpi-card-bg, linear-gradient(145deg, rgb(var(--ax-sys-color-lightest-surface)) 0%, rgb(var(--ax-sys-color-lighter-surface)) 100%) );box-shadow:var(--axp-kpi-card-shadow);-webkit-font-smoothing:antialiased}.axp-kpi-widget-card:before{content:\"\";position:absolute;inset-inline-end:-18%;top:-28%;width:58%;height:78%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 0%,transparent 72%)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card:before{background:radial-gradient(circle at center,color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 14%,transparent) 0%,transparent 72%)}}.axp-kpi-widget-card:after{content:\"\";position:absolute;inset-inline-start:-12%;bottom:-22%;width:42%;height:55%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 0%,transparent 70%)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card:after{background:radial-gradient(circle at center,color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 8%,transparent) 0%,transparent 70%)}}.axp-kpi-widget-card__body{position:relative;z-index:1;display:flex;min-height:0px;flex:1;flex-direction:column;gap:clamp(.375rem,2.5cqi,.625rem)}.axp-kpi-widget-card__loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background:rgb(var(--ax-sys-color-lightest-surface));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__loading{background:color-mix(in srgb,rgb(var(--ax-sys-color-lightest-surface)) 82%,transparent)}}.axp-kpi-widget-card__loading ax-loading{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.axp-kpi-widget-card__error{margin-top:auto;font-size:.7rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--ax-sys-color-danger-600))}.axp-kpi-widget-card__empty{display:flex;min-height:2.5rem;flex:1;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-on-surface));padding-inline:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:.78rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-kpi-widget-card__title{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);font-size:clamp(.75rem,min(4cqi,4.5cqh),.875rem);color:#334155;letter-spacing:.01em}.axp-kpi-widget-card__chip{display:inline-flex;flex-shrink:0;align-items:center;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.65rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-700)));background:var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500)));border:1px solid var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500)))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__chip{background:color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 12%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__chip{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 18%,white)}}.axp-kpi-widget-card--details{--axp-kpi-accent: #6366f1;--axp-kpi-card-border: #e0e7ff;--axp-kpi-card-bg: linear-gradient(145deg, #fafaff 0%, #f3f4ff 52%, #eef2ff 100%)}.axp-kpi-widget-card--progress{--axp-kpi-accent: #0d9488;--axp-kpi-card-border: #ccfbf1;--axp-kpi-card-bg: linear-gradient(145deg, #f7fffe 0%, #ecfdf9 52%, #e6faf5 100%)}.axp-kpi-widget-card--segmented{--axp-kpi-accent: #d97706;--axp-kpi-card-border: #fde8c8;--axp-kpi-card-bg: linear-gradient(145deg, #fffbf5 0%, #fff7ed 52%, #ffedd5 100%)}.axp-kpi-widget-card[data-grid-size=\"1x1\"]{padding:.5rem .625rem}.axp-kpi-widget-card[data-grid-size=\"1x2\"] .axp-kpi-widget-card__body,.axp-kpi-widget-card[data-grid-size=\"1x3\"] .axp-kpi-widget-card__body,.axp-kpi-widget-card[data-grid-size=\"1x4\"] .axp-kpi-widget-card__body{justify-content:center}.axp-kpi-widget-card[data-grid-size=\"3x2\"] .axp-kpi-segmented__legend,.axp-kpi-widget-card[data-grid-size=\"4x3\"] .axp-kpi-details__items{grid-template-columns:repeat(2,minmax(0,1fr))}.axp-kpi-progress__bar-fill--success{background:linear-gradient(90deg,rgb(var(--ax-sys-color-success-300)),rgb(var(--ax-sys-color-success-500)))}.axp-kpi-progress__bar-fill--primary{background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-300)),rgb(var(--ax-sys-color-primary-500)))}.axp-kpi-progress__bar-fill--warning{background:linear-gradient(90deg,rgb(var(--ax-sys-color-warning-300)),rgb(var(--ax-sys-color-warning-500)))}.axp-kpi-progress__bar-fill--danger{background:linear-gradient(90deg,rgb(var(--ax-sys-color-danger-300)),rgb(var(--ax-sys-color-danger-500)))}:host-context(.dark) .axp-kpi-widget-card{--axp-kpi-card-shadow: 0 4px 20px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .16)}:host-context(.dark) .axp-kpi-widget-card--details{--axp-kpi-card-border: rgba(129, 140, 248, .28);--axp-kpi-card-bg: linear-gradient(145deg, #2a2d3d 0%, #252836 52%, #222530 100%)}:host-context(.dark) .axp-kpi-widget-card--progress{--axp-kpi-card-border: rgba(45, 212, 191, .22);--axp-kpi-card-bg: linear-gradient(145deg, #243330 0%, #1f2e2c 52%, #1c2928 100%)}:host-context(.dark) .axp-kpi-widget-card--segmented{--axp-kpi-card-border: rgba(251, 191, 36, .22);--axp-kpi-card-bg: linear-gradient(145deg, #332c24 0%, #2d2820 52%, #29241e 100%)}:host-context(.dark) .axp-kpi-widget-card__title{color:#e2e8f0}:host{display:block;width:100%;height:100%;min-height:0px}.axp-kpi-segmented .axp-kpi-segmented__header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-kpi-segmented .axp-kpi-segmented__total{border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.7rem;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:var(--axp-kpi-accent, #d97706);background:var(--axp-kpi-accent, #d97706);border:1px solid var(--axp-kpi-accent, #d97706)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-segmented .axp-kpi-segmented__total{background:color-mix(in srgb,var(--axp-kpi-accent, #d97706) 12%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-segmented .axp-kpi-segmented__total{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, #d97706) 22%,white)}}.axp-kpi-segmented .axp-kpi-segmented__bar-track{display:flex;width:100%;overflow:hidden;gap:clamp(.15rem,1cqi,.25rem);height:clamp(.75rem,4.5cqh,1.125rem);border-radius:999px;padding:2px;background:var(--axp-kpi-accent, #d97706);border:1px solid var(--axp-kpi-accent, #d97706)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-segmented .axp-kpi-segmented__bar-track{background:color-mix(in srgb,var(--axp-kpi-accent, #d97706) 8%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-segmented .axp-kpi-segmented__bar-track{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, #d97706) 14%,white)}}.axp-kpi-segmented .axp-kpi-segmented__bar-part{flex-basis:0;min-width:.35rem;border-radius:999px;transition:flex-grow .45s ease-out;box-shadow:inset 0 1px #ffffff47}.axp-kpi-segmented .axp-kpi-segmented__legend{margin-top:auto;display:grid;min-height:0px;flex:1;gap:clamp(.375rem,2cqi,.625rem);grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));align-content:end}.axp-kpi-segmented .axp-kpi-segmented__legend-item{display:flex;min-width:0px;flex-direction:column;gap:.2rem;padding:clamp(.375rem,2cqi,.5rem) clamp(.5rem,2.5cqi,.625rem);border-radius:.75rem;background:color-mix(in srgb,white 78%,transparent);border:1px solid var(--segment-color, var(--axp-kpi-accent));box-shadow:0 1px 2px #0f172a0a}@supports (color: color-mix(in lab,red,red)){.axp-kpi-segmented .axp-kpi-segmented__legend-item{border:1px solid color-mix(in srgb,var(--segment-color, var(--axp-kpi-accent)) 18%,white)}}.axp-kpi-segmented .axp-kpi-segmented__legend-head{display:flex;min-width:0px;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5)}.axp-kpi-segmented .axp-kpi-segmented__legend-dot{flex-shrink:0;border-radius:calc(infinity * 1px);width:.5rem;height:.5rem;box-shadow:0 0 0 2px var(--segment-color, var(--axp-kpi-accent))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-segmented .axp-kpi-segmented__legend-dot{box-shadow:0 0 0 2px color-mix(in srgb,var(--segment-color, var(--axp-kpi-accent)) 16%,white)}}.axp-kpi-segmented .axp-kpi-segmented__legend-value{font-size:.9rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:#0f172a}.axp-kpi-segmented .axp-kpi-segmented__legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:#64748b}@container kpi-widget (max-height: 150px){.axp-kpi-segmented__legend{grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr));gap:.25rem}.axp-kpi-segmented__legend-item{padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}}@container kpi-widget (min-height: 220px){.axp-kpi-segmented__bar-track{height:clamp(.875rem,5cqh,1.25rem)}.axp-kpi-segmented__legend{gap:.625rem}}:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__bar-track{background:var(--axp-kpi-accent, #d97706);border-color:var(--axp-kpi-accent, #d97706)}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__bar-track{background:color-mix(in srgb,var(--axp-kpi-accent, #d97706) 14%,#1e293b)}}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__bar-track{border-color:color-mix(in srgb,var(--axp-kpi-accent, #d97706) 22%,#1e293b)}}:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__legend-item{background:color-mix(in srgb,#1e293b 82%,transparent);border-color:var(--segment-color, var(--axp-kpi-accent))}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__legend-item{border-color:color-mix(in srgb,var(--segment-color, var(--axp-kpi-accent)) 24%,#1e293b)}}:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__legend-value{color:#f1f5f9}:host-context(.dark) .axp-kpi-segmented .axp-kpi-segmented__legend-label{color:#94a3b8}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-leading: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartQueryTabsComponent, selector: "axp-chart-query-tabs", inputs: ["tabs", "activeIndex"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4573
5426
|
}
|
|
4574
5427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPKpiSegmentedWidgetViewComponent, decorators: [{
|
|
4575
5428
|
type: Component,
|
|
@@ -4744,7 +5597,7 @@ class AXPKpiDetailsWidgetViewComponent extends AXPDashboardWidgetComponent {
|
|
|
4744
5597
|
})));
|
|
4745
5598
|
}
|
|
4746
5599
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPKpiDetailsWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4747
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPKpiDetailsWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-chart-widget-host flex flex-col h-full min-h-0\">\n <axp-chart-query-tabs\n [tabs]=\"queryTabs()\"\n [activeIndex]=\"activeTabIndex()\"\n (activeIndexChange)=\"selectQueryTab($event)\"\n />\n <div class=\"axp-chart-widget-host__body flex-1 min-h-0\">\n <div\n class=\"axp-kpi-details axp-kpi-widget-card axp-kpi-widget-card--details\"\n [attr.data-grid-size]=\"gridSizeToken()\"\n >\n <!-- ----- Loading overlay while query data is fetched ----- -->\n @if (showQueryLoading()) {\n <div class=\"axp-kpi-widget-card__loading\" aria-busy=\"true\">\n <ax-loading></ax-loading>\n </div>\n }\n <div class=\"axp-kpi-widget-card__body\">\n <div class=\"axp-kpi-details__header\">\n <div class=\"axp-kpi-widget-card__title\">{{ localized().title }}</div>\n @if (localized().subtitle) {\n <span class=\"axp-kpi-widget-card__chip\">{{ localized().subtitle }}</span>\n }\n </div>\n\n <div class=\"axp-kpi-details__hero\">\n <div class=\"axp-kpi-details__value\">\n {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n </div>\n </div>\n\n @if (hasDetails()) {\n <div class=\"axp-kpi-details__divider\" aria-hidden=\"true\">\n <span class=\"axp-kpi-details__divider-line\"></span>\n <span class=\"axp-kpi-details__divider-dot\"></span>\n <span class=\"axp-kpi-details__divider-line\"></span>\n </div>\n\n <div class=\"axp-kpi-details__items\">\n @for (item of detailItems(); track trackByLabel($index, item)) {\n <div\n class=\"axp-kpi-details__item\"\n [style.--detail-accent]=\"item.color || null\"\n >\n <span class=\"axp-kpi-details__item-label\">{{ item.label }}</span>\n <span\n class=\"axp-kpi-details__item-value\"\n [style.color]=\"item.color || null\"\n >{{ item.value }}</span>\n </div>\n }\n </div>\n }\n\n <!-- ----- Query error hint ----- -->\n @if (showQueryError()) {\n <p class=\"axp-kpi-widget-card__error\">\n {{ '@dashboard:widgets.kpi-shared.query-error' | translate | async }}\n </p>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%;height:100%;min-height:0px;overflow:hidden}:host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;overflow:visible;min-block-size:0}.axp-chart-widget-host{display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;gap:var(--spacing, .25rem)}.axp-chart-widget-host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body{display:flex;min-height:0px;flex:1;flex-direction:column;gap:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 2)}.axp-chart-widget-host__body:not(.axp-chart-widget-host__body--with-legend)>.axp-chart-widget-host__chart--radial{flex:1 1 auto}.axp-chart-widget-host__body--with-legend{min-height:0px;flex:1;gap:var(--spacing, .25rem);display:grid;grid-template-rows:minmax(0,1fr) auto}.axp-chart-widget-host__chart{position:relative;min-height:calc(var(--spacing, .25rem) * 64);width:100%;overflow:hidden;grid-row:1}.axp-chart-widget-host__chart--radial{position:relative;margin-inline:auto;align-self:center;justify-self:center;overflow:hidden;grid-row:1;flex:0 0 auto;height:auto;width:min(100%,18rem);max-width:100%;min-height:12rem;min-width:8rem;aspect-ratio:1 / 1}.axp-chart-widget-host__chart--funnel{position:relative;width:100%;overflow:hidden;block-size:20rem;flex:0 0 auto;max-block-size:24rem;min-block-size:16rem}.axp-chart-widget-host__chart--funnel ax-funnel-chart,.axp-chart-widget-host__chart--funnel .ax-funnel-chart-container{display:block;block-size:100%;inline-size:100%;min-block-size:0}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--funnel){flex:none}.axp-chart-widget-host__chart--heatmap{position:relative;width:100%;max-width:100%;inline-size:100%;block-size:auto;flex:0 0 auto;overflow:visible;min-height:0!important;min-block-size:0!important;max-block-size:none}.axp-chart-widget-host__chart--heatmap ax-heatmap-chart,.axp-chart-widget-host__chart--heatmap .ax-heatmap-chart-container{display:block;inline-size:100%;max-inline-size:100%;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--heatmap){flex:none;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__legend{width:100%;flex:none;padding-inline:calc(var(--spacing, .25rem) * .5);grid-row:2;min-height:0;display:flex;justify-content:center;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}:host ::ng-deep ax-chart-legend{display:block!important;height:auto!important;max-height:none;width:100%}:host ::ng-deep .ax-chart-legend{--ax-legend-bg: var(--ax-sys-color-lighter-surface);--ax-legend-text: var(--ax-sys-color-on-lighter-surface);--ax-legend-border: var(--ax-sys-color-border-lighter-surface);--ax-legend-radius: .625rem;--ax-legend-padding: .375rem .5rem;--ax-legend-gap: .375rem;--ax-legend-item-height: auto;height:auto;max-height:none;width:100%;overflow:visible;padding:var(--ax-legend-padding);gap:var(--ax-legend-gap);color:rgb(var(--ax-legend-text))}:host ::ng-deep .ax-chart-legend.ax-legend-horizontal{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;border:none;background:transparent;background-color:transparent;padding:0}:host ::ng-deep .ax-legend-item{align-items:center;gap:.375rem;height:auto;min-height:1.5rem;padding-block:.2rem;padding-inline:.5rem;border-radius:9999px;border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease,transform .15s ease}:host ::ng-deep .ax-legend-item:hover{border-color:rgb(var(--ax-sys-color-primary-500));background-color:rgb(var(--ax-sys-color-primary-500));box-shadow:0 1px 2px #0f172a0f}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{border-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 35%,rgb(var(--ax-sys-color-border-lightest-surface)))}}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 6%,rgb(var(--ax-sys-color-lightest-surface)))}}:host ::ng-deep .ax-legend-item:active{transform:scale(.98)}:host ::ng-deep .ax-legend-item.ax-legend-item-hidden{opacity:.62}:host ::ng-deep .ax-legend-color{width:.625rem;height:.625rem;flex-shrink:0;border-radius:9999px;box-shadow:0 0 0 1px rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-color{box-shadow:0 0 0 1px color-mix(in srgb,rgb(var(--ax-legend-text)) 18%,transparent)}}:host ::ng-deep .ax-legend-name{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);max-width:9rem;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ax-legend-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);margin-inline-start:0;opacity:1;color:rgb(var(--ax-sys-color-on-lightest-surface))}:host ::ng-deep .ax-legend-percentage{margin-inline-start:0;border-radius:9999px;padding-inline:.4rem;padding-block:.125rem;font-size:.6875rem;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;background-color:rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-percentage{background-color:color-mix(in srgb,rgb(var(--ax-legend-text)) 12%,transparent)}}:host ::ng-deep ax-donut-chart,:host ::ng-deep ax-gauge-chart,:host ::ng-deep ax-bar-chart,:host ::ng-deep ax-line-chart,:host ::ng-deep ax-funnel-chart{display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}:host ::ng-deep ax-donut-chart .ax-donut-chart,:host ::ng-deep ax-gauge-chart .ax-gauge-chart,:host ::ng-deep ax-bar-chart .ax-bar-chart,:host ::ng-deep ax-line-chart .ax-line-chart,:host ::ng-deep ax-funnel-chart .ax-funnel-chart-container{min-height:0!important;height:100%!important;width:100%!important;padding:.25rem!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart .ax-heatmap-chart-container,:host ::ng-deep .axp-chart-widget-host__chart--heatmap .ax-heatmap-chart{min-height:0!important;height:auto!important;width:100%!important;max-width:100%!important;padding:.25rem!important;overflow:visible!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap svg{display:block;width:100%!important;max-width:100%!important;height:auto!important;overflow:visible!important}.axp-kpi-widget-card{container-type:size;container-name:kpi-widget;--axp-kpi-card-shadow: 0 4px 24px rgba(15, 23, 42, .06), 0 1px 4px rgba(15, 23, 42, .04);position:relative;box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;overflow:hidden;border-radius:var(--radius-2xl, 1rem);padding:clamp(.625rem,3cqi,.875rem) clamp(.75rem,3.5cqi,1rem);border:1px solid var(--axp-kpi-card-border, rgb(var(--ax-sys-color-border-lightest-surface)));background:var( --axp-kpi-card-bg, linear-gradient(145deg, rgb(var(--ax-sys-color-lightest-surface)) 0%, rgb(var(--ax-sys-color-lighter-surface)) 100%) );box-shadow:var(--axp-kpi-card-shadow);-webkit-font-smoothing:antialiased}.axp-kpi-widget-card:before{content:\"\";position:absolute;inset-inline-end:-18%;top:-28%;width:58%;height:78%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 0%,transparent 72%)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card:before{background:radial-gradient(circle at center,color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 14%,transparent) 0%,transparent 72%)}}.axp-kpi-widget-card:after{content:\"\";position:absolute;inset-inline-start:-12%;bottom:-22%;width:42%;height:55%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 0%,transparent 70%)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card:after{background:radial-gradient(circle at center,color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 8%,transparent) 0%,transparent 70%)}}.axp-kpi-widget-card__body{position:relative;z-index:1;display:flex;min-height:0px;flex:1;flex-direction:column;gap:clamp(.375rem,2.5cqi,.625rem)}.axp-kpi-widget-card__loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background:rgb(var(--ax-sys-color-lightest-surface));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__loading{background:color-mix(in srgb,rgb(var(--ax-sys-color-lightest-surface)) 82%,transparent)}}.axp-kpi-widget-card__loading ax-loading{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.axp-kpi-widget-card__error{margin-top:auto;font-size:.7rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--ax-sys-color-danger-600))}.axp-kpi-widget-card__empty{display:flex;min-height:2.5rem;flex:1;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-on-surface));padding-inline:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:.78rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-kpi-widget-card__title{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);font-size:clamp(.75rem,min(4cqi,4.5cqh),.875rem);color:#334155;letter-spacing:.01em}.axp-kpi-widget-card__chip{display:inline-flex;flex-shrink:0;align-items:center;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.65rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-700)));background:var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500)));border:1px solid var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500)))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__chip{background:color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 12%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__chip{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 18%,white)}}.axp-kpi-widget-card--details{--axp-kpi-accent: #6366f1;--axp-kpi-card-border: #e0e7ff;--axp-kpi-card-bg: linear-gradient(145deg, #fafaff 0%, #f3f4ff 52%, #eef2ff 100%)}.axp-kpi-widget-card--progress{--axp-kpi-accent: #0d9488;--axp-kpi-card-border: #ccfbf1;--axp-kpi-card-bg: linear-gradient(145deg, #f7fffe 0%, #ecfdf9 52%, #e6faf5 100%)}.axp-kpi-widget-card--segmented{--axp-kpi-accent: #d97706;--axp-kpi-card-border: #fde8c8;--axp-kpi-card-bg: linear-gradient(145deg, #fffbf5 0%, #fff7ed 52%, #ffedd5 100%)}.axp-kpi-widget-card[data-grid-size=\"1x1\"]{padding:.5rem .625rem}.axp-kpi-widget-card[data-grid-size=\"1x2\"] .axp-kpi-widget-card__body,.axp-kpi-widget-card[data-grid-size=\"1x3\"] .axp-kpi-widget-card__body,.axp-kpi-widget-card[data-grid-size=\"1x4\"] .axp-kpi-widget-card__body{justify-content:center}.axp-kpi-widget-card[data-grid-size=\"3x2\"] .axp-kpi-segmented__legend,.axp-kpi-widget-card[data-grid-size=\"4x3\"] .axp-kpi-details__items{grid-template-columns:repeat(2,minmax(0,1fr))}.axp-kpi-progress__bar-fill--success{background:linear-gradient(90deg,rgb(var(--ax-sys-color-success-300)),rgb(var(--ax-sys-color-success-500)))}.axp-kpi-progress__bar-fill--primary{background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-300)),rgb(var(--ax-sys-color-primary-500)))}.axp-kpi-progress__bar-fill--warning{background:linear-gradient(90deg,rgb(var(--ax-sys-color-warning-300)),rgb(var(--ax-sys-color-warning-500)))}.axp-kpi-progress__bar-fill--danger{background:linear-gradient(90deg,rgb(var(--ax-sys-color-danger-300)),rgb(var(--ax-sys-color-danger-500)))}:host-context(.dark) .axp-kpi-widget-card{--axp-kpi-card-shadow: 0 4px 20px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .16)}:host-context(.dark) .axp-kpi-widget-card--details{--axp-kpi-card-border: rgba(129, 140, 248, .28);--axp-kpi-card-bg: linear-gradient(145deg, #2a2d3d 0%, #252836 52%, #222530 100%)}:host-context(.dark) .axp-kpi-widget-card--progress{--axp-kpi-card-border: rgba(45, 212, 191, .22);--axp-kpi-card-bg: linear-gradient(145deg, #243330 0%, #1f2e2c 52%, #1c2928 100%)}:host-context(.dark) .axp-kpi-widget-card--segmented{--axp-kpi-card-border: rgba(251, 191, 36, .22);--axp-kpi-card-bg: linear-gradient(145deg, #332c24 0%, #2d2820 52%, #29241e 100%)}:host-context(.dark) .axp-kpi-widget-card__title{color:#e2e8f0}:host{display:block;width:100%;height:100%;min-height:0px}.axp-kpi-details .axp-kpi-details__header{display:flex;min-width:0px;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-kpi-details .axp-kpi-details__hero{display:flex;min-height:0px;flex:1;align-items:center;justify-content:center;padding-block:clamp(.125rem,2.5cqh,.625rem)}.axp-kpi-details .axp-kpi-details__value{margin:0;width:100%;text-align:center;font-variant-numeric:tabular-nums;line-height:.92;letter-spacing:-.04em;font-weight:300;color:#0f172a;font-size:clamp(1.75rem,min(28cqw,38cqh),4.5rem)}.axp-kpi-details .axp-kpi-details__divider{display:flex;width:100%;flex-shrink:0;align-items:center;gap:.5rem;margin-block:clamp(.125rem,1.5cqi,.25rem)}.axp-kpi-details .axp-kpi-details__divider-line{height:1px;flex:1;background:var(--axp-kpi-accent, #6366f1)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-details .axp-kpi-details__divider-line{background:color-mix(in srgb,var(--axp-kpi-accent, #6366f1) 16%,white)}}.axp-kpi-details .axp-kpi-details__divider-dot{flex-shrink:0;border-radius:calc(infinity * 1px);width:clamp(4px,1.5cqi,6px);height:clamp(4px,1.5cqi,6px);background:var(--axp-kpi-accent, #6366f1);box-shadow:0 0 0 3px var(--axp-kpi-accent, #6366f1)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-details .axp-kpi-details__divider-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--axp-kpi-accent, #6366f1) 10%,white)}}.axp-kpi-details .axp-kpi-details__items{margin-top:auto;display:grid;gap:calc(var(--spacing, .25rem) * 1.5);grid-template-columns:1fr}.axp-kpi-details .axp-kpi-details__item{position:relative;display:flex;min-width:0px;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden;border-radius:var(--radius-xl, .75rem);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 3);background:color-mix(in srgb,white 76%,transparent);border:1px solid var(--detail-accent, var(--axp-kpi-accent));box-shadow:0 1px 2px #0f172a0a}@supports (color: color-mix(in lab,red,red)){.axp-kpi-details .axp-kpi-details__item{border:1px solid color-mix(in srgb,var(--detail-accent, var(--axp-kpi-accent)) 14%,white)}}.axp-kpi-details .axp-kpi-details__item:before{content:\"\";position:absolute;inset-block:.35rem;inset-inline-start:0;width:3px;border-radius:0 2px 2px 0;background:var(--detail-accent, var(--axp-kpi-accent, #6366f1));opacity:.85}.axp-kpi-details .axp-kpi-details__item-label{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:#64748b}.axp-kpi-details .axp-kpi-details__item-value{flex-shrink:0;font-size:.82rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:#0f172a}@container kpi-widget (max-height: 140px){.axp-kpi-details__hero{flex:none;padding-block:0px}.axp-kpi-details__value{font-size:clamp(1.35rem,min(22cqw,30cqh),2rem);text-align:start}.axp-kpi-details__divider{display:none}.axp-kpi-details__items{gap:var(--spacing, .25rem)}.axp-kpi-details__item{border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);padding-inline-start:calc(var(--spacing, .25rem) * 2.5)}}@container kpi-widget (min-height: 200px){.axp-kpi-details__items{gap:calc(var(--spacing, .25rem) * 2)}.axp-kpi-details__item{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);padding-inline-start:calc(var(--spacing, .25rem) * 3.5)}}:host-context(.dark) .axp-kpi-details .axp-kpi-details__value{color:#f1f5f9}:host-context(.dark) .axp-kpi-details .axp-kpi-details__divider-line{background:var(--axp-kpi-accent, #6366f1)}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-details .axp-kpi-details__divider-line{background:color-mix(in srgb,var(--axp-kpi-accent, #6366f1) 22%,#1e293b)}}:host-context(.dark) .axp-kpi-details .axp-kpi-details__divider-dot{box-shadow:0 0 0 3px var(--axp-kpi-accent, #6366f1)}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-details .axp-kpi-details__divider-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--axp-kpi-accent, #6366f1) 14%,#1e293b)}}:host-context(.dark) .axp-kpi-details .axp-kpi-details__item{background:color-mix(in srgb,#1e293b 82%,transparent);border-color:var(--detail-accent, var(--axp-kpi-accent))}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-details .axp-kpi-details__item{border-color:color-mix(in srgb,var(--detail-accent, var(--axp-kpi-accent)) 22%,#1e293b)}}:host-context(.dark) .axp-kpi-details .axp-kpi-details__item-value{color:#f1f5f9}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-leading: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartQueryTabsComponent, selector: "axp-chart-query-tabs", inputs: ["tabs", "activeIndex"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5600
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPKpiDetailsWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-chart-widget-host flex flex-col h-full min-h-0\">\n <axp-chart-query-tabs\n [tabs]=\"queryTabs()\"\n [activeIndex]=\"activeTabIndex()\"\n (activeIndexChange)=\"selectQueryTab($event)\"\n />\n <div class=\"axp-chart-widget-host__body flex-1 min-h-0\">\n <div\n class=\"axp-kpi-details axp-kpi-widget-card axp-kpi-widget-card--details\"\n [attr.data-grid-size]=\"gridSizeToken()\"\n >\n <!-- ----- Loading overlay while query data is fetched ----- -->\n @if (showQueryLoading()) {\n <div class=\"axp-kpi-widget-card__loading\" aria-busy=\"true\">\n <ax-loading></ax-loading>\n </div>\n }\n <div class=\"axp-kpi-widget-card__body\">\n <div class=\"axp-kpi-details__header\">\n <div class=\"axp-kpi-widget-card__title\">{{ localized().title }}</div>\n @if (localized().subtitle) {\n <span class=\"axp-kpi-widget-card__chip\">{{ localized().subtitle }}</span>\n }\n </div>\n\n <div class=\"axp-kpi-details__hero\">\n <div class=\"axp-kpi-details__value\">\n {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n </div>\n </div>\n\n @if (hasDetails()) {\n <div class=\"axp-kpi-details__divider\" aria-hidden=\"true\">\n <span class=\"axp-kpi-details__divider-line\"></span>\n <span class=\"axp-kpi-details__divider-dot\"></span>\n <span class=\"axp-kpi-details__divider-line\"></span>\n </div>\n\n <div class=\"axp-kpi-details__items\">\n @for (item of detailItems(); track trackByLabel($index, item)) {\n <div\n class=\"axp-kpi-details__item\"\n [style.--detail-accent]=\"item.color || null\"\n >\n <span class=\"axp-kpi-details__item-label\">{{ item.label }}</span>\n <span\n class=\"axp-kpi-details__item-value\"\n [style.color]=\"item.color || null\"\n >{{ item.value }}</span>\n </div>\n }\n </div>\n }\n\n <!-- ----- Query error hint ----- -->\n @if (showQueryError()) {\n <p class=\"axp-kpi-widget-card__error\">\n {{ '@dashboard:widgets.kpi-shared.query-error' | translate | async }}\n </p>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%;height:100%;min-height:0px;overflow:hidden}:host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;overflow:visible;min-block-size:0}.axp-chart-widget-host{display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;gap:var(--spacing, .25rem)}.axp-chart-widget-host:has(.axp-chart-widget-host__chart--heatmap){block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body{display:flex;min-height:0px;flex:1;flex-direction:column;gap:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 2)}.axp-chart-widget-host__body:not(.axp-chart-widget-host__body--with-legend)>.axp-chart-widget-host__chart--radial{flex:1 1 auto}.axp-chart-widget-host__body--with-legend{min-height:0px;flex:1;gap:var(--spacing, .25rem);display:grid;grid-template-rows:minmax(0,1fr) auto}.axp-chart-widget-host__chart{position:relative;min-height:calc(var(--spacing, .25rem) * 64);width:100%;overflow:hidden;grid-row:1}.axp-chart-widget-host__chart--radial{position:relative;margin-inline:auto;align-self:center;justify-self:center;overflow:hidden;grid-row:1;flex:0 0 auto;height:auto;width:min(100%,18rem);max-width:100%;min-height:12rem;min-width:8rem;aspect-ratio:1 / 1}.axp-chart-widget-host__chart--funnel{position:relative;width:100%;overflow:hidden;block-size:20rem;flex:0 0 auto;max-block-size:24rem;min-block-size:16rem}.axp-chart-widget-host__chart--funnel ax-funnel-chart,.axp-chart-widget-host__chart--funnel .ax-funnel-chart-container{display:block;block-size:100%;inline-size:100%;min-block-size:0}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--funnel){flex:none}.axp-chart-widget-host__chart--heatmap{position:relative;width:100%;max-width:100%;inline-size:100%;block-size:auto;flex:0 0 auto;overflow:visible;min-height:0!important;min-block-size:0!important;max-block-size:none}.axp-chart-widget-host__chart--heatmap ax-heatmap-chart,.axp-chart-widget-host__chart--heatmap .ax-heatmap-chart-container{display:block;inline-size:100%;max-inline-size:100%;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__body:has(.axp-chart-widget-host__chart--heatmap){flex:none;block-size:auto;min-block-size:0;overflow:visible}.axp-chart-widget-host__legend{width:100%;flex:none;padding-inline:calc(var(--spacing, .25rem) * .5);grid-row:2;min-height:0;display:flex;justify-content:center;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}:host ::ng-deep ax-chart-legend{display:block!important;height:auto!important;max-height:none;width:100%}:host ::ng-deep .ax-chart-legend{--ax-legend-bg: var(--ax-sys-color-lighter-surface);--ax-legend-text: var(--ax-sys-color-on-lighter-surface);--ax-legend-border: var(--ax-sys-color-border-lighter-surface);--ax-legend-radius: .625rem;--ax-legend-padding: .375rem .5rem;--ax-legend-gap: .375rem;--ax-legend-item-height: auto;height:auto;max-height:none;width:100%;overflow:visible;padding:var(--ax-legend-padding);gap:var(--ax-legend-gap);color:rgb(var(--ax-legend-text))}:host ::ng-deep .ax-chart-legend.ax-legend-horizontal{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;border:none;background:transparent;background-color:transparent;padding:0}:host ::ng-deep .ax-legend-item{align-items:center;gap:.375rem;height:auto;min-height:1.5rem;padding-block:.2rem;padding-inline:.5rem;border-radius:9999px;border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));background-color:rgb(var(--ax-sys-color-lightest-surface));white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease,transform .15s ease}:host ::ng-deep .ax-legend-item:hover{border-color:rgb(var(--ax-sys-color-primary-500));background-color:rgb(var(--ax-sys-color-primary-500));box-shadow:0 1px 2px #0f172a0f}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{border-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 35%,rgb(var(--ax-sys-color-border-lightest-surface)))}}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-item:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 6%,rgb(var(--ax-sys-color-lightest-surface)))}}:host ::ng-deep .ax-legend-item:active{transform:scale(.98)}:host ::ng-deep .ax-legend-item.ax-legend-item-hidden{opacity:.62}:host ::ng-deep .ax-legend-color{width:.625rem;height:.625rem;flex-shrink:0;border-radius:9999px;box-shadow:0 0 0 1px rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-color{box-shadow:0 0 0 1px color-mix(in srgb,rgb(var(--ax-legend-text)) 18%,transparent)}}:host ::ng-deep .ax-legend-name{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);max-width:9rem;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ax-legend-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);margin-inline-start:0;opacity:1;color:rgb(var(--ax-sys-color-on-lightest-surface))}:host ::ng-deep .ax-legend-percentage{margin-inline-start:0;border-radius:9999px;padding-inline:.4rem;padding-block:.125rem;font-size:.6875rem;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;background-color:rgb(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){:host ::ng-deep .ax-legend-percentage{background-color:color-mix(in srgb,rgb(var(--ax-legend-text)) 12%,transparent)}}:host ::ng-deep ax-donut-chart,:host ::ng-deep ax-gauge-chart,:host ::ng-deep ax-bar-chart,:host ::ng-deep ax-line-chart,:host ::ng-deep ax-funnel-chart{display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}:host ::ng-deep ax-donut-chart .ax-donut-chart,:host ::ng-deep ax-gauge-chart .ax-gauge-chart,:host ::ng-deep ax-bar-chart .ax-bar-chart,:host ::ng-deep ax-line-chart .ax-line-chart,:host ::ng-deep ax-funnel-chart .ax-funnel-chart-container{min-height:0!important;height:100%!important;width:100%!important;padding:.25rem!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap ax-heatmap-chart .ax-heatmap-chart-container,:host ::ng-deep .axp-chart-widget-host__chart--heatmap .ax-heatmap-chart{min-height:0!important;height:auto!important;width:100%!important;max-width:100%!important;padding:.25rem!important;overflow:visible!important}:host ::ng-deep .axp-chart-widget-host__chart--heatmap svg{display:block;width:100%!important;max-width:100%!important;height:auto!important;overflow:visible!important}.axp-kpi-widget-card{container-type:size;container-name:kpi-widget;--axp-kpi-card-shadow: 0 4px 24px rgba(15, 23, 42, .06), 0 1px 4px rgba(15, 23, 42, .04);position:relative;box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;overflow:hidden;border-radius:var(--radius-2xl, 1rem);padding:clamp(.625rem,3cqi,.875rem) clamp(.75rem,3.5cqi,1rem);border:1px solid var(--axp-kpi-card-border, rgb(var(--ax-sys-color-border-lightest-surface)));background:var( --axp-kpi-card-bg, linear-gradient(145deg, rgb(var(--ax-sys-color-lightest-surface)) 0%, rgb(var(--ax-sys-color-lighter-surface)) 100%) );box-shadow:var(--axp-kpi-card-shadow);-webkit-font-smoothing:antialiased}.axp-kpi-widget-card:before{content:\"\";position:absolute;inset-inline-end:-18%;top:-28%;width:58%;height:78%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 0%,transparent 72%)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card:before{background:radial-gradient(circle at center,color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 14%,transparent) 0%,transparent 72%)}}.axp-kpi-widget-card:after{content:\"\";position:absolute;inset-inline-start:-12%;bottom:-22%;width:42%;height:55%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 0%,transparent 70%)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card:after{background:radial-gradient(circle at center,color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 8%,transparent) 0%,transparent 70%)}}.axp-kpi-widget-card__body{position:relative;z-index:1;display:flex;min-height:0px;flex:1;flex-direction:column;gap:clamp(.375rem,2.5cqi,.625rem)}.axp-kpi-widget-card__loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background:rgb(var(--ax-sys-color-lightest-surface));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__loading{background:color-mix(in srgb,rgb(var(--ax-sys-color-lightest-surface)) 82%,transparent)}}.axp-kpi-widget-card__loading ax-loading{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.axp-kpi-widget-card__error{margin-top:auto;font-size:.7rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--ax-sys-color-danger-600))}.axp-kpi-widget-card__empty{display:flex;min-height:2.5rem;flex:1;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-on-surface));padding-inline:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:.78rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-kpi-widget-card__title{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);font-size:clamp(.75rem,min(4cqi,4.5cqh),.875rem);color:#334155;letter-spacing:.01em}.axp-kpi-widget-card__chip{display:inline-flex;flex-shrink:0;align-items:center;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.65rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-700)));background:var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500)));border:1px solid var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500)))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__chip{background:color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 12%,white)}}@supports (color: color-mix(in lab,red,red)){.axp-kpi-widget-card__chip{border:1px solid color-mix(in srgb,var(--axp-kpi-accent, rgb(var(--ax-sys-color-primary-500))) 18%,white)}}.axp-kpi-widget-card--details{--axp-kpi-accent: #6366f1;--axp-kpi-card-border: #e0e7ff;--axp-kpi-card-bg: linear-gradient(145deg, #fafaff 0%, #f3f4ff 52%, #eef2ff 100%)}.axp-kpi-widget-card--progress{--axp-kpi-accent: #0d9488;--axp-kpi-card-border: #ccfbf1;--axp-kpi-card-bg: linear-gradient(145deg, #f7fffe 0%, #ecfdf9 52%, #e6faf5 100%)}.axp-kpi-widget-card--segmented{--axp-kpi-accent: #d97706;--axp-kpi-card-border: #fde8c8;--axp-kpi-card-bg: linear-gradient(145deg, #fffbf5 0%, #fff7ed 52%, #ffedd5 100%)}.axp-kpi-widget-card[data-grid-size=\"1x1\"]{padding:.5rem .625rem}.axp-kpi-widget-card[data-grid-size=\"1x2\"] .axp-kpi-widget-card__body,.axp-kpi-widget-card[data-grid-size=\"1x3\"] .axp-kpi-widget-card__body,.axp-kpi-widget-card[data-grid-size=\"1x4\"] .axp-kpi-widget-card__body{justify-content:center}.axp-kpi-widget-card[data-grid-size=\"3x2\"] .axp-kpi-segmented__legend,.axp-kpi-widget-card[data-grid-size=\"4x3\"] .axp-kpi-details__items{grid-template-columns:repeat(2,minmax(0,1fr))}.axp-kpi-progress__bar-fill--success{background:linear-gradient(90deg,rgb(var(--ax-sys-color-success-300)),rgb(var(--ax-sys-color-success-500)))}.axp-kpi-progress__bar-fill--primary{background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-300)),rgb(var(--ax-sys-color-primary-500)))}.axp-kpi-progress__bar-fill--warning{background:linear-gradient(90deg,rgb(var(--ax-sys-color-warning-300)),rgb(var(--ax-sys-color-warning-500)))}.axp-kpi-progress__bar-fill--danger{background:linear-gradient(90deg,rgb(var(--ax-sys-color-danger-300)),rgb(var(--ax-sys-color-danger-500)))}:host-context(.dark) .axp-kpi-widget-card{--axp-kpi-card-shadow: 0 4px 20px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .16)}:host-context(.dark) .axp-kpi-widget-card--details{--axp-kpi-card-border: rgba(129, 140, 248, .28);--axp-kpi-card-bg: linear-gradient(145deg, #2a2d3d 0%, #252836 52%, #222530 100%)}:host-context(.dark) .axp-kpi-widget-card--progress{--axp-kpi-card-border: rgba(45, 212, 191, .22);--axp-kpi-card-bg: linear-gradient(145deg, #243330 0%, #1f2e2c 52%, #1c2928 100%)}:host-context(.dark) .axp-kpi-widget-card--segmented{--axp-kpi-card-border: rgba(251, 191, 36, .22);--axp-kpi-card-bg: linear-gradient(145deg, #332c24 0%, #2d2820 52%, #29241e 100%)}:host-context(.dark) .axp-kpi-widget-card__title{color:#e2e8f0}:host{display:block;width:100%;height:100%;min-height:0px}.axp-kpi-details .axp-kpi-details__header{display:flex;min-width:0px;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-kpi-details .axp-kpi-details__hero{display:flex;min-height:0px;flex:1;align-items:center;justify-content:center;padding-block:clamp(.125rem,2.5cqh,.625rem)}.axp-kpi-details .axp-kpi-details__value{margin:0;width:100%;text-align:center;font-variant-numeric:tabular-nums;line-height:.92;letter-spacing:-.04em;font-weight:300;color:#0f172a;font-size:clamp(1.75rem,min(28cqw,38cqh),4.5rem)}.axp-kpi-details .axp-kpi-details__divider{display:flex;width:100%;flex-shrink:0;align-items:center;gap:.5rem;margin-block:clamp(.125rem,1.5cqi,.25rem)}.axp-kpi-details .axp-kpi-details__divider-line{height:1px;flex:1;background:var(--axp-kpi-accent, #6366f1)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-details .axp-kpi-details__divider-line{background:color-mix(in srgb,var(--axp-kpi-accent, #6366f1) 16%,white)}}.axp-kpi-details .axp-kpi-details__divider-dot{flex-shrink:0;border-radius:calc(infinity * 1px);width:clamp(4px,1.5cqi,6px);height:clamp(4px,1.5cqi,6px);background:var(--axp-kpi-accent, #6366f1);box-shadow:0 0 0 3px var(--axp-kpi-accent, #6366f1)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-details .axp-kpi-details__divider-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--axp-kpi-accent, #6366f1) 10%,white)}}.axp-kpi-details .axp-kpi-details__items{margin-top:auto;display:grid;gap:calc(var(--spacing, .25rem) * 1.5);grid-template-columns:1fr}.axp-kpi-details .axp-kpi-details__item{position:relative;display:flex;min-width:0px;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden;border-radius:var(--radius-xl, .75rem);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 3);background:color-mix(in srgb,white 76%,transparent);border:1px solid var(--detail-accent, var(--axp-kpi-accent));box-shadow:0 1px 2px #0f172a0a}@supports (color: color-mix(in lab,red,red)){.axp-kpi-details .axp-kpi-details__item{border:1px solid color-mix(in srgb,var(--detail-accent, var(--axp-kpi-accent)) 14%,white)}}.axp-kpi-details .axp-kpi-details__item:before{content:\"\";position:absolute;inset-block:.35rem;inset-inline-start:0;width:3px;border-radius:0 2px 2px 0;background:var(--detail-accent, var(--axp-kpi-accent, #6366f1));opacity:.85}.axp-kpi-details .axp-kpi-details__item-label{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:#64748b}.axp-kpi-details .axp-kpi-details__item-value{flex-shrink:0;font-size:.82rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:#0f172a}@container kpi-widget (max-height: 140px){.axp-kpi-details__hero{flex:none;padding-block:0px}.axp-kpi-details__value{font-size:clamp(1.35rem,min(22cqw,30cqh),2rem);text-align:start}.axp-kpi-details__divider{display:none}.axp-kpi-details__items{gap:var(--spacing, .25rem)}.axp-kpi-details__item{border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);padding-inline-start:calc(var(--spacing, .25rem) * 2.5)}}@container kpi-widget (min-height: 200px){.axp-kpi-details__items{gap:calc(var(--spacing, .25rem) * 2)}.axp-kpi-details__item{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);padding-inline-start:calc(var(--spacing, .25rem) * 3.5)}}:host-context(.dark) .axp-kpi-details .axp-kpi-details__value{color:#f1f5f9}:host-context(.dark) .axp-kpi-details .axp-kpi-details__divider-line{background:var(--axp-kpi-accent, #6366f1)}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-details .axp-kpi-details__divider-line{background:color-mix(in srgb,var(--axp-kpi-accent, #6366f1) 22%,#1e293b)}}:host-context(.dark) .axp-kpi-details .axp-kpi-details__divider-dot{box-shadow:0 0 0 3px var(--axp-kpi-accent, #6366f1)}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-details .axp-kpi-details__divider-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--axp-kpi-accent, #6366f1) 14%,#1e293b)}}:host-context(.dark) .axp-kpi-details .axp-kpi-details__item{background:color-mix(in srgb,#1e293b 82%,transparent);border-color:var(--detail-accent, var(--axp-kpi-accent))}@supports (color: color-mix(in lab,red,red)){:host-context(.dark) .axp-kpi-details .axp-kpi-details__item{border-color:color-mix(in srgb,var(--detail-accent, var(--axp-kpi-accent)) 22%,#1e293b)}}:host-context(.dark) .axp-kpi-details .axp-kpi-details__item-value{color:#f1f5f9}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-leading: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartQueryTabsComponent, selector: "axp-chart-query-tabs", inputs: ["tabs", "activeIndex"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4748
5601
|
}
|
|
4749
5602
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPKpiDetailsWidgetViewComponent, decorators: [{
|
|
4750
5603
|
type: Component,
|
|
@@ -5221,7 +6074,7 @@ class AXPKpiStatCardWidgetViewComponent extends AXPDashboardWidgetComponent {
|
|
|
5221
6074
|
return next;
|
|
5222
6075
|
}
|
|
5223
6076
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPKpiStatCardWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPKpiStatCardWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-chart-widget-host flex flex-col h-full min-h-0\">\n <axp-chart-query-tabs\n [tabs]=\"queryTabs()\"\n [activeIndex]=\"activeTabIndex()\"\n (activeIndexChange)=\"selectQueryTab($event)\"\n />\n <div\n class=\"axp-kpi-stat-card flex-1 min-h-0\"\n [attr.data-grid-size]=\"gridSizeToken()\"\n [class.axp-kpi-stat-card--clickable]=\"isClickable()\"\n [class.axp-kpi-stat-card--bg-pattern]=\"cardBackgroundStyle() === 'pattern'\"\n [class.axp-kpi-stat-card--bg-illustrative]=\"cardBackgroundStyle() === 'illustrative'\"\n [style.background]=\"cardBackground()\"\n [style.--kpi-accent]=\"accentColor()\"\n [style.--kpi-value-color]=\"valueColor()\"\n (click)=\"handleClick()\"\n >\n <!-- ----- Loading overlay while query data is fetched ----- -->\n @if (showQueryLoading()) {\n <div class=\"axp-kpi-stat-card__loading\" aria-busy=\"true\">\n <ax-loading></ax-loading>\n </div>\n }\n\n <i\n [class]=\"iconClass() + ' axp-kpi-stat-card__watermark axp-kpi-stat-card__watermark--layer-back'\"\n aria-hidden=\"true\"\n ></i>\n <i\n [class]=\"iconClass() + ' axp-kpi-stat-card__watermark axp-kpi-stat-card__watermark--layer-front'\"\n aria-hidden=\"true\"\n ></i>\n\n <div class=\"axp-kpi-stat-card__content\">\n <div class=\"axp-kpi-stat-card__head\">\n <div\n class=\"axp-kpi-stat-card__icon\"\n [style.background-color]=\"accentColor()\"\n role=\"img\"\n [attr.aria-label]=\"localized().title\"\n >\n <i [class]=\"iconClass()\" aria-hidden=\"true\"></i>\n </div>\n\n <div class=\"axp-kpi-stat-card__title-block\">\n <div class=\"axp-kpi-stat-card__title-row\">\n <span class=\"axp-kpi-stat-card__title\">{{ localized().title }}</span>\n @if (localized().titleBadgeText) {\n <span [class]=\"titleBadgeClasses()\">\n {{ localized().titleBadgeText }}\n </span>\n }\n </div>\n </div>\n </div>\n\n <div class=\"axp-kpi-stat-card__value-row\">\n <div class=\"axp-kpi-stat-card__value\">\n {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n </div>\n\n @if (isClickable()) {\n <div class=\"axp-kpi-stat-card__action\" aria-hidden=\"true\">\n <svg class=\"axp-kpi-stat-card__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5 12H19M14 7L19 12L14 17\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n }\n </div>\n\n @if (localized().trendValue || localized().trendLabel) {\n <div class=\"axp-kpi-stat-card__trend\">\n <p class=\"axp-kpi-stat-card__trend-line\">\n @if (localized().trendValue) {\n <span [class]=\"trendPillClasses()\">\n {{ localized().trendValue }}\n </span>\n }\n @if (localized().trendLabel) {\n <span class=\"axp-kpi-stat-card__trend-label\">{{ localized().trendLabel }}</span>\n }\n </p>\n </div>\n }\n\n <!-- ----- Query error hint ----- -->\n @if (showQueryError()) {\n <p class=\"axp-kpi-stat-card__error\">\n {{ '@dashboard:widgets.kpi-shared.query-error' | translate | async }}\n </p>\n }\n </div>\n </div>\n</div>\n", styles: ["@layer properties;:host{display:block;height:100%;min-height:0px;width:100%;-webkit-font-smoothing:antialiased}.axp-chart-widget-host{display:flex;height:100%;min-height:0px;width:100%;flex-direction:column}.axp-kpi-stat-card{container-type:size;container-name:kpi-stat;position:relative;display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;align-items:stretch;overflow:hidden;box-sizing:border-box;border-radius:var(--radius-2xl, 1rem);padding:.625rem .75rem;border:1px solid var(--kpi-accent, #6366f1);box-shadow:0 1px 3px #0f172a0f}@supports (color: color-mix(in lab,red,red)){.axp-kpi-stat-card{border:1px solid color-mix(in srgb,var(--kpi-accent, #6366f1) 16%,white)}}.axp-kpi-stat-card.axp-kpi-stat-card--clickable{cursor:pointer;flex-direction:column;padding:calc(var(--spacing, .25rem) * 4);min-height:5.5rem;transition:border-color .2s ease}.axp-kpi-stat-card.axp-kpi-stat-card--clickable:hover{border-color:var(--kpi-accent, #6366f1)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-stat-card.axp-kpi-stat-card--clickable:hover{border-color:color-mix(in srgb,var(--kpi-accent, #6366f1) 24%,white)}}.axp-kpi-stat-card.axp-kpi-stat-card--clickable:hover .axp-kpi-stat-card__action{opacity:1;box-shadow:0 4px 14px -3px #0f172a24;transform:translate(3px)}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__content{position:relative;z-index:1;display:flex;min-width:0px;flex:1;flex-direction:column;align-items:stretch;gap:calc(var(--spacing, .25rem) * 2)}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__head{display:flex;min-width:0px;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__title-block{display:flex;min-width:0px;flex:1}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);font-size:clamp(.8125rem,min(4.5cqw,5.5cqh),1rem);color:#1e293b}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__value-row{display:flex;width:100%;min-width:0px;flex:1;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-block:0px}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__value{width:auto;min-width:0;flex:1;text-align:start;font-size:clamp(1.625rem,min(14cqw,36cqh),2.25rem);font-weight:500;line-height:1;letter-spacing:-.03em}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__watermark{inset-inline-end:.75rem;bottom:.5rem;font-size:4.75rem}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__watermark--layer-back{inset-inline-end:2.5rem;bottom:1rem;opacity:.05;transform:rotate(-8deg)}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__watermark--layer-front{opacity:.1}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__action{position:relative;z-index:2;display:inline-flex;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:var(--color-white, #fff);border:1px solid var(--kpi-accent, #6366f1);color:var(--kpi-accent, #6366f1);box-shadow:0 2px 10px -2px #0f172a1a;opacity:.75;transition:box-shadow .2s ease,transform .2s ease,opacity .2s ease}@supports (color: color-mix(in lab,red,red)){.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__action{border:1px solid color-mix(in srgb,var(--kpi-accent, #6366f1) 12%,white)}}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__arrow{width:1.125rem;height:1.125rem}.axp-kpi-stat-card.axp-kpi-stat-card--bg-pattern{background-size:14px 14px,100% 100%!important}.axp-kpi-stat-card.axp-kpi-stat-card--bg-illustrative .axp-kpi-stat-card__watermark--layer-back{opacity:.08}.axp-kpi-stat-card.axp-kpi-stat-card--bg-illustrative .axp-kpi-stat-card__watermark--layer-front{opacity:.13}.axp-kpi-stat-card .axp-kpi-stat-card__loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background:rgb(var(--ax-sys-color-lightest-surface));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-stat-card .axp-kpi-stat-card__loading{background:color-mix(in srgb,rgb(var(--ax-sys-color-lightest-surface)) 86%,transparent)}}.axp-kpi-stat-card .axp-kpi-stat-card__watermark{pointer-events:none;position:absolute;--tw-leading: 1;line-height:1;-webkit-user-select:none;user-select:none;inset-inline-end:clamp(.25rem,2cqw,.75rem);bottom:clamp(.125rem,1.5cqh,.5rem);font-size:clamp(2.75rem,min(32cqw,48cqh),6.5rem);color:var(--kpi-accent, #6366f1)}.axp-kpi-stat-card .axp-kpi-stat-card__watermark--layer-back{inset-inline-end:clamp(1rem,9cqw,2.25rem);bottom:clamp(.375rem,3.5cqh,.875rem);opacity:.05;transform:rotate(-8deg)}.axp-kpi-stat-card .axp-kpi-stat-card__watermark--layer-front{opacity:.1}.axp-kpi-stat-card .axp-kpi-stat-card__content{position:relative;z-index:1;display:flex;min-height:0px;width:100%;min-width:0px;flex:1;flex-direction:column;align-items:stretch;gap:clamp(.125rem,min(1.5cqw,2cqh),.625rem)}.axp-kpi-stat-card .axp-kpi-stat-card__head{display:flex;min-width:0px;flex:none;align-items:center;gap:calc(var(--spacing, .25rem) * 3.5)}.axp-kpi-stat-card .axp-kpi-stat-card__icon{display:inline-flex;width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);flex-shrink:0;align-items:center;justify-content:center;border-radius:.625rem;font-size:1.0625rem;--tw-leading: 1;line-height:1;color:var(--color-white, #fff);box-shadow:0 1px 4px #0f172a1f}.axp-kpi-stat-card .axp-kpi-stat-card__title-block{display:flex;min-width:0px;flex:1;flex-direction:column;justify-content:center}.axp-kpi-stat-card .axp-kpi-stat-card__title-row{display:flex;max-width:100%;min-width:0px;align-items:center;gap:clamp(.25rem,1.25cqw,.5rem)}.axp-kpi-stat-card .axp-kpi-stat-card__title{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);font-size:clamp(.75rem,min(4.5cqw,5.5cqh),1rem);color:#334155}.axp-kpi-stat-card .axp-kpi-stat-card__title-badge{box-sizing:border-box;display:inline-flex;flex-shrink:0;align-items:center;min-height:1.125rem;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.6rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);--tw-tracking: var(--tracking-widest, .1em);letter-spacing:var(--tracking-widest, .1em);text-transform:uppercase;border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid}.axp-kpi-stat-card .axp-kpi-stat-card__title-badge--primary{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);border-color:rgba(var(--ax-sys-color-primary-200));color:rgba(var(--ax-sys-color-primary-800))}.axp-kpi-stat-card .axp-kpi-stat-card__title-badge--secondary{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface))}.axp-kpi-stat-card .axp-kpi-stat-card__title-badge--warning{border-color:rgba(var(--ax-sys-color-warning-200));background-color:rgba(var(--ax-sys-color-warning-50));color:rgba(var(--ax-sys-color-warning-800))}.axp-kpi-stat-card .axp-kpi-stat-card__title-badge--info{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);border-color:rgba(var(--ax-sys-color-primary-200));color:rgba(var(--ax-sys-color-primary-800))}.axp-kpi-stat-card .axp-kpi-stat-card__title-badge--neutral{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-surface));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-kpi-stat-card .axp-kpi-stat-card__value-row{display:flex;min-height:0px;min-width:0px;flex:1;align-items:center;padding-block:clamp(0,1cqh,.375rem)}.axp-kpi-stat-card .axp-kpi-stat-card__value{margin:0;padding:0;min-width:0;width:100%;text-align:start;font-variant-numeric:tabular-nums;line-height:.92;letter-spacing:-.04em;color:var(--kpi-value-color, #0f172a);font-size:clamp(1.25rem,min(32cqw,42cqh),7rem);font-weight:300}.axp-kpi-stat-card .axp-kpi-stat-card__trend{margin:0;width:100%;flex:none;padding:0}.axp-kpi-stat-card .axp-kpi-stat-card__trend-line{margin:0;max-width:100%;padding:0;line-height:1.45}.axp-kpi-stat-card .axp-kpi-stat-card__trend-pill{box-sizing:border-box;display:inline-flex;align-items:center;vertical-align:middle;margin-inline-end:calc(var(--spacing, .25rem) * 1.5);margin-bottom:1px;min-height:1.25rem;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid;font-size:.6875rem;--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.axp-kpi-stat-card .axp-kpi-stat-card__trend-pill--success{border-color:rgba(var(--ax-sys-color-success-200));background-color:rgba(var(--ax-sys-color-success-50));color:rgba(var(--ax-sys-color-success-800))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-stat-card .axp-kpi-stat-card__trend-pill--success{border-color:color-mix(in oklab,rgba(var(--ax-sys-color-success-200)) 90%,transparent)}}.axp-kpi-stat-card .axp-kpi-stat-card__trend-pill--danger{border-color:color-mix(in srgb,oklch(88.5% .062 18.334) 90%,transparent);background-color:var(--color-red-50, oklch(97.1% .013 17.38));color:var(--color-red-800, oklch(44.4% .177 26.899))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-stat-card .axp-kpi-stat-card__trend-pill--danger{border-color:color-mix(in oklab,var(--color-red-200, oklch(88.5% .062 18.334)) 90%,transparent)}}.axp-kpi-stat-card .axp-kpi-stat-card__trend-pill--neutral{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface))}.axp-kpi-stat-card .axp-kpi-stat-card__trend-label{display:inline;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);font-size:clamp(.625rem,min(3.25cqw,4cqh),.8125rem);color:#64748b}.axp-kpi-stat-card .axp-kpi-stat-card__error{margin:0;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);font-size:clamp(.625rem,min(3.25cqw,3.5cqh),.75rem);color:rgb(var(--ax-sys-color-danger-600))}.axp-kpi-stat-card[data-grid-size=\"1x1\"]{padding:.5rem .625rem}.axp-kpi-stat-card[data-grid-size=\"3x2\"] .axp-kpi-stat-card__value{font-size:clamp(2rem,min(36cqw,56cqh),8rem)}@container kpi-stat (min-aspect-ratio: 1.45) and (min-width: 200px) and (min-height: 190px){.axp-kpi-stat-card__content{flex-direction:row;align-items:center;gap:clamp(.5rem,3cqw,1.25rem)}.axp-kpi-stat-card__head{flex:none;max-width:46%}.axp-kpi-stat-card__value-row{flex:1;justify-content:center;padding-block:0px}.axp-kpi-stat-card__value{text-align:center;font-size:clamp(2.25rem,min(40cqw,62cqh),9rem)}}@container kpi-stat (max-aspect-ratio: .78) and (min-height: 110px){.axp-kpi-stat-card__value-row{justify-content:center}.axp-kpi-stat-card__value{text-align:center;font-size:clamp(2rem,min(30cqw,46cqh),8rem)}}@container kpi-stat (max-height: 180px){.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable){padding:.5rem .625rem}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__watermark--layer-back,.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__watermark--layer-front{display:none}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__content{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;column-gap:clamp(.375rem,2.5cqw,.625rem);row-gap:0}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__head{display:contents}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__icon{width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);border-radius:var(--radius-lg, .5rem);font-size:.9375rem;grid-column:1;grid-row:1}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__title-block{grid-column:2;grid-row:1;min-width:0}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(.6875rem,min(3.75cqw,5cqh),.875rem);line-height:1.2}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__value-row{grid-column:3;grid-row:1;min-width:0px;flex:none;padding-block:0px;max-width:46%}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__value{width:auto;max-width:100%;text-align:end;font-size:clamp(1.25rem,min(20cqw,52cqh),2.5rem);line-height:1;letter-spacing:-.03em}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__trend,.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__error{grid-column:1 / -1;grid-row:2}}@container kpi-stat (max-height: 96px){.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable){padding:.375rem .5rem}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__value{font-size:clamp(1.125rem,min(18cqw,48cqh),1.75rem)}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__value-row{max-width:40%}}@container kpi-stat (max-height: 280px){.axp-kpi-stat-card__watermark{inset-inline-end:.75rem;bottom:.5rem;font-size:4.75rem}.axp-kpi-stat-card__watermark--layer-back{inset-inline-end:2.5rem;bottom:1rem;opacity:.05;transform:rotate(-8deg)}.axp-kpi-stat-card__watermark--layer-front{opacity:.1}}@container kpi-stat (max-width: 168px){.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__watermark--layer-back,.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__watermark--layer-front{display:none}}@container kpi-stat (min-width: 280px) and (min-height: 200px){.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable){padding:1rem 1.125rem}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__value{font-size:clamp(2.5rem,min(42cqw,62cqh),9rem)}}@container kpi-stat (min-width: 280px) and (min-height: 280px){.axp-kpi-stat-card__watermark{inset-inline-end:clamp(.25rem,2cqw,.75rem);bottom:clamp(.125rem,1.5cqh,.5rem);font-size:clamp(3.5rem,min(36cqw,54cqh),7rem)}.axp-kpi-stat-card__watermark--layer-back{inset-inline-end:clamp(1rem,9cqw,2.25rem);bottom:clamp(.375rem,3.5cqh,.875rem)}}:host-context([dir=\"rtl\"]) .axp-kpi-stat-card__watermark--layer-back{transform:rotate(8deg)}:host-context([dir=\"rtl\"]) .axp-kpi-stat-card--clickable:hover .axp-kpi-stat-card__action{transform:translate(-3px)}:host-context([dir=\"rtl\"]) .axp-kpi-stat-card--clickable .axp-kpi-stat-card__arrow{transform:scaleX(-1)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartQueryTabsComponent, selector: "axp-chart-query-tabs", inputs: ["tabs", "activeIndex"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6077
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPKpiStatCardWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-chart-widget-host flex flex-col h-full min-h-0\">\n <axp-chart-query-tabs\n [tabs]=\"queryTabs()\"\n [activeIndex]=\"activeTabIndex()\"\n (activeIndexChange)=\"selectQueryTab($event)\"\n />\n <div\n class=\"axp-kpi-stat-card flex-1 min-h-0\"\n [attr.data-grid-size]=\"gridSizeToken()\"\n [class.axp-kpi-stat-card--clickable]=\"isClickable()\"\n [class.axp-kpi-stat-card--bg-pattern]=\"cardBackgroundStyle() === 'pattern'\"\n [class.axp-kpi-stat-card--bg-illustrative]=\"cardBackgroundStyle() === 'illustrative'\"\n [style.background]=\"cardBackground()\"\n [style.--kpi-accent]=\"accentColor()\"\n [style.--kpi-value-color]=\"valueColor()\"\n (click)=\"handleClick()\"\n >\n <!-- ----- Loading overlay while query data is fetched ----- -->\n @if (showQueryLoading()) {\n <div class=\"axp-kpi-stat-card__loading\" aria-busy=\"true\">\n <ax-loading></ax-loading>\n </div>\n }\n\n <i\n [class]=\"iconClass() + ' axp-kpi-stat-card__watermark axp-kpi-stat-card__watermark--layer-back'\"\n aria-hidden=\"true\"\n ></i>\n <i\n [class]=\"iconClass() + ' axp-kpi-stat-card__watermark axp-kpi-stat-card__watermark--layer-front'\"\n aria-hidden=\"true\"\n ></i>\n\n <div class=\"axp-kpi-stat-card__content\">\n <div class=\"axp-kpi-stat-card__head\">\n <div\n class=\"axp-kpi-stat-card__icon\"\n [style.background-color]=\"accentColor()\"\n role=\"img\"\n [attr.aria-label]=\"localized().title\"\n >\n <i [class]=\"iconClass()\" aria-hidden=\"true\"></i>\n </div>\n\n <div class=\"axp-kpi-stat-card__title-block\">\n <div class=\"axp-kpi-stat-card__title-row\">\n <span class=\"axp-kpi-stat-card__title\">{{ localized().title }}</span>\n @if (localized().titleBadgeText) {\n <span [class]=\"titleBadgeClasses()\">\n {{ localized().titleBadgeText }}\n </span>\n }\n </div>\n </div>\n </div>\n\n <div class=\"axp-kpi-stat-card__value-row\">\n <div class=\"axp-kpi-stat-card__value\">\n {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n </div>\n\n @if (isClickable()) {\n <div class=\"axp-kpi-stat-card__action\" aria-hidden=\"true\">\n <svg class=\"axp-kpi-stat-card__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5 12H19M14 7L19 12L14 17\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n }\n </div>\n\n @if (localized().trendValue || localized().trendLabel) {\n <div class=\"axp-kpi-stat-card__trend\">\n <p class=\"axp-kpi-stat-card__trend-line\">\n @if (localized().trendValue) {\n <span [class]=\"trendPillClasses()\">\n {{ localized().trendValue }}\n </span>\n }\n @if (localized().trendLabel) {\n <span class=\"axp-kpi-stat-card__trend-label\">{{ localized().trendLabel }}</span>\n }\n </p>\n </div>\n }\n\n <!-- ----- Query error hint ----- -->\n @if (showQueryError()) {\n <p class=\"axp-kpi-stat-card__error\">\n {{ '@dashboard:widgets.kpi-shared.query-error' | translate | async }}\n </p>\n }\n </div>\n </div>\n</div>\n", styles: ["@layer properties;:host{display:block;height:100%;min-height:0px;width:100%;-webkit-font-smoothing:antialiased}.axp-chart-widget-host{display:flex;height:100%;min-height:0px;width:100%;flex-direction:column}.axp-kpi-stat-card{container-type:size;container-name:kpi-stat;position:relative;display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;align-items:stretch;overflow:hidden;box-sizing:border-box;border-radius:var(--radius-2xl, 1rem);padding:.625rem .75rem;border:1px solid var(--kpi-accent, #6366f1);box-shadow:0 1px 3px #0f172a0f}@supports (color: color-mix(in lab,red,red)){.axp-kpi-stat-card{border:1px solid color-mix(in srgb,var(--kpi-accent, #6366f1) 16%,white)}}.axp-kpi-stat-card.axp-kpi-stat-card--clickable{cursor:pointer;flex-direction:column;padding:calc(var(--spacing, .25rem) * 4);min-height:5.5rem;transition:border-color .2s ease}.axp-kpi-stat-card.axp-kpi-stat-card--clickable:hover{border-color:var(--kpi-accent, #6366f1)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-stat-card.axp-kpi-stat-card--clickable:hover{border-color:color-mix(in srgb,var(--kpi-accent, #6366f1) 24%,white)}}.axp-kpi-stat-card.axp-kpi-stat-card--clickable:hover .axp-kpi-stat-card__action{opacity:1;box-shadow:0 4px 14px -3px #0f172a24;transform:translate(3px)}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__content{position:relative;z-index:1;display:flex;min-width:0px;flex:1;flex-direction:column;align-items:stretch;gap:calc(var(--spacing, .25rem) * 2)}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__head{display:flex;min-width:0px;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__title-block{display:flex;min-width:0px;flex:1}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);font-size:clamp(.8125rem,min(4.5cqw,5.5cqh),1rem);color:#1e293b}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__value-row{display:flex;width:100%;min-width:0px;flex:1;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-block:0px}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__value{width:auto;min-width:0;flex:1;text-align:start;font-size:clamp(1.625rem,min(14cqw,36cqh),2.25rem);font-weight:500;line-height:1;letter-spacing:-.03em}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__watermark{inset-inline-end:.75rem;bottom:.5rem;font-size:4.75rem}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__watermark--layer-back{inset-inline-end:2.5rem;bottom:1rem;opacity:.05;transform:rotate(-8deg)}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__watermark--layer-front{opacity:.1}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__action{position:relative;z-index:2;display:inline-flex;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:var(--color-white, #fff);border:1px solid var(--kpi-accent, #6366f1);color:var(--kpi-accent, #6366f1);box-shadow:0 2px 10px -2px #0f172a1a;opacity:.75;transition:box-shadow .2s ease,transform .2s ease,opacity .2s ease}@supports (color: color-mix(in lab,red,red)){.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__action{border:1px solid color-mix(in srgb,var(--kpi-accent, #6366f1) 12%,white)}}.axp-kpi-stat-card.axp-kpi-stat-card--clickable .axp-kpi-stat-card__arrow{width:1.125rem;height:1.125rem}.axp-kpi-stat-card.axp-kpi-stat-card--bg-pattern{background-size:14px 14px,100% 100%!important}.axp-kpi-stat-card.axp-kpi-stat-card--bg-illustrative .axp-kpi-stat-card__watermark--layer-back{opacity:.08}.axp-kpi-stat-card.axp-kpi-stat-card--bg-illustrative .axp-kpi-stat-card__watermark--layer-front{opacity:.13}.axp-kpi-stat-card .axp-kpi-stat-card__loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background:rgb(var(--ax-sys-color-lightest-surface));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@supports (color: color-mix(in lab,red,red)){.axp-kpi-stat-card .axp-kpi-stat-card__loading{background:color-mix(in srgb,rgb(var(--ax-sys-color-lightest-surface)) 86%,transparent)}}.axp-kpi-stat-card .axp-kpi-stat-card__watermark{pointer-events:none;position:absolute;--tw-leading: 1;line-height:1;-webkit-user-select:none;user-select:none;inset-inline-end:clamp(.25rem,2cqw,.75rem);bottom:clamp(.125rem,1.5cqh,.5rem);font-size:clamp(2.75rem,min(32cqw,48cqh),6.5rem);color:var(--kpi-accent, #6366f1)}.axp-kpi-stat-card .axp-kpi-stat-card__watermark--layer-back{inset-inline-end:clamp(1rem,9cqw,2.25rem);bottom:clamp(.375rem,3.5cqh,.875rem);opacity:.05;transform:rotate(-8deg)}.axp-kpi-stat-card .axp-kpi-stat-card__watermark--layer-front{opacity:.1}.axp-kpi-stat-card .axp-kpi-stat-card__content{position:relative;z-index:1;display:flex;min-height:0px;width:100%;min-width:0px;flex:1;flex-direction:column;align-items:stretch;gap:clamp(.125rem,min(1.5cqw,2cqh),.625rem)}.axp-kpi-stat-card .axp-kpi-stat-card__head{display:flex;min-width:0px;flex:none;align-items:center;gap:calc(var(--spacing, .25rem) * 3.5)}.axp-kpi-stat-card .axp-kpi-stat-card__icon{display:inline-flex;width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);flex-shrink:0;align-items:center;justify-content:center;border-radius:.625rem;font-size:1.0625rem;--tw-leading: 1;line-height:1;color:var(--color-white, #fff);box-shadow:0 1px 4px #0f172a1f}.axp-kpi-stat-card .axp-kpi-stat-card__title-block{display:flex;min-width:0px;flex:1;flex-direction:column;justify-content:center}.axp-kpi-stat-card .axp-kpi-stat-card__title-row{display:flex;max-width:100%;min-width:0px;align-items:center;gap:clamp(.25rem,1.25cqw,.5rem)}.axp-kpi-stat-card .axp-kpi-stat-card__title{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);font-size:clamp(.75rem,min(4.5cqw,5.5cqh),1rem);color:#334155}.axp-kpi-stat-card .axp-kpi-stat-card__title-badge{box-sizing:border-box;display:inline-flex;flex-shrink:0;align-items:center;min-height:1.125rem;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.6rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);--tw-tracking: var(--tracking-widest, .1em);letter-spacing:var(--tracking-widest, .1em);text-transform:uppercase;border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid}.axp-kpi-stat-card .axp-kpi-stat-card__title-badge--primary{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);border-color:rgba(var(--ax-sys-color-primary-200));color:rgba(var(--ax-sys-color-primary-800))}.axp-kpi-stat-card .axp-kpi-stat-card__title-badge--secondary{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface))}.axp-kpi-stat-card .axp-kpi-stat-card__title-badge--warning{border-color:rgba(var(--ax-sys-color-warning-200));background-color:rgba(var(--ax-sys-color-warning-50));color:rgba(var(--ax-sys-color-warning-800))}.axp-kpi-stat-card .axp-kpi-stat-card__title-badge--info{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);border-color:rgba(var(--ax-sys-color-primary-200));color:rgba(var(--ax-sys-color-primary-800))}.axp-kpi-stat-card .axp-kpi-stat-card__title-badge--neutral{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-surface));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-kpi-stat-card .axp-kpi-stat-card__value-row{display:flex;min-height:0px;min-width:0px;flex:1;align-items:center;padding-block:clamp(0,1cqh,.375rem)}.axp-kpi-stat-card .axp-kpi-stat-card__value{margin:0;padding:0;min-width:0;width:100%;text-align:start;font-variant-numeric:tabular-nums;line-height:.92;letter-spacing:-.04em;color:var(--kpi-value-color, #0f172a);font-size:clamp(1.25rem,min(32cqw,42cqh),7rem);font-weight:300}.axp-kpi-stat-card .axp-kpi-stat-card__trend{margin:0;width:100%;flex:none;padding:0}.axp-kpi-stat-card .axp-kpi-stat-card__trend-line{margin:0;max-width:100%;padding:0;line-height:1.45}.axp-kpi-stat-card .axp-kpi-stat-card__trend-pill{box-sizing:border-box;display:inline-flex;align-items:center;vertical-align:middle;margin-inline-end:calc(var(--spacing, .25rem) * 1.5);margin-bottom:1px;min-height:1.25rem;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid;font-size:.6875rem;--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.axp-kpi-stat-card .axp-kpi-stat-card__trend-pill--success{border-color:rgba(var(--ax-sys-color-success-200));background-color:rgba(var(--ax-sys-color-success-50));color:rgba(var(--ax-sys-color-success-800))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-stat-card .axp-kpi-stat-card__trend-pill--success{border-color:color-mix(in oklab,rgba(var(--ax-sys-color-success-200)) 90%,transparent)}}.axp-kpi-stat-card .axp-kpi-stat-card__trend-pill--danger{border-color:color-mix(in srgb,oklch(88.5% .062 18.334) 90%,transparent);background-color:var(--color-red-50, oklch(97.1% .013 17.38));color:var(--color-red-800, oklch(44.4% .177 26.899))}@supports (color: color-mix(in lab,red,red)){.axp-kpi-stat-card .axp-kpi-stat-card__trend-pill--danger{border-color:color-mix(in oklab,var(--color-red-200, oklch(88.5% .062 18.334)) 90%,transparent)}}.axp-kpi-stat-card .axp-kpi-stat-card__trend-pill--neutral{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface))}.axp-kpi-stat-card .axp-kpi-stat-card__trend-label{display:inline;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);font-size:clamp(.625rem,min(3.25cqw,4cqh),.8125rem);color:#64748b}.axp-kpi-stat-card .axp-kpi-stat-card__error{margin:0;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);font-size:clamp(.625rem,min(3.25cqw,3.5cqh),.75rem);color:rgb(var(--ax-sys-color-danger-600))}.axp-kpi-stat-card[data-grid-size=\"1x1\"]{padding:.5rem .625rem}.axp-kpi-stat-card[data-grid-size=\"3x2\"] .axp-kpi-stat-card__value{font-size:clamp(2rem,min(36cqw,56cqh),8rem)}@container kpi-stat (min-aspect-ratio: 1.45) and (min-width: 200px) and (min-height: 190px){.axp-kpi-stat-card__content{flex-direction:row;align-items:center;gap:clamp(.5rem,3cqw,1.25rem)}.axp-kpi-stat-card__head{flex:none;max-width:46%}.axp-kpi-stat-card__value-row{flex:1;justify-content:center;padding-block:0px}.axp-kpi-stat-card__value{text-align:center;font-size:clamp(2.25rem,min(40cqw,62cqh),9rem)}}@container kpi-stat (max-aspect-ratio: .78) and (min-height: 110px){.axp-kpi-stat-card__value-row{justify-content:center}.axp-kpi-stat-card__value{text-align:center;font-size:clamp(2rem,min(30cqw,46cqh),8rem)}}@container kpi-stat (max-height: 180px){.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable){padding:.5rem .625rem}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__watermark--layer-back,.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__watermark--layer-front{display:none}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__content{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;column-gap:clamp(.375rem,2.5cqw,.625rem);row-gap:0}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__head{display:contents}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__icon{width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);border-radius:var(--radius-lg, .5rem);font-size:.9375rem;grid-column:1;grid-row:1}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__title-block{grid-column:2;grid-row:1;min-width:0}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(.6875rem,min(3.75cqw,5cqh),.875rem);line-height:1.2}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__value-row{grid-column:3;grid-row:1;min-width:0px;flex:none;padding-block:0px;max-width:46%}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__value{width:auto;max-width:100%;text-align:end;font-size:clamp(1.25rem,min(20cqw,52cqh),2.5rem);line-height:1;letter-spacing:-.03em}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__trend,.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__error{grid-column:1 / -1;grid-row:2}}@container kpi-stat (max-height: 96px){.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable){padding:.375rem .5rem}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__value{font-size:clamp(1.125rem,min(18cqw,48cqh),1.75rem)}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__value-row{max-width:40%}}@container kpi-stat (max-height: 280px){.axp-kpi-stat-card__watermark{inset-inline-end:.75rem;bottom:.5rem;font-size:4.75rem}.axp-kpi-stat-card__watermark--layer-back{inset-inline-end:2.5rem;bottom:1rem;opacity:.05;transform:rotate(-8deg)}.axp-kpi-stat-card__watermark--layer-front{opacity:.1}}@container kpi-stat (max-width: 168px){.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__watermark--layer-back,.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__watermark--layer-front{display:none}}@container kpi-stat (min-width: 280px) and (min-height: 200px){.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable){padding:1rem 1.125rem}.axp-kpi-stat-card:not(.axp-kpi-stat-card--clickable) .axp-kpi-stat-card__value{font-size:clamp(2.5rem,min(42cqw,62cqh),9rem)}}@container kpi-stat (min-width: 280px) and (min-height: 280px){.axp-kpi-stat-card__watermark{inset-inline-end:clamp(.25rem,2cqw,.75rem);bottom:clamp(.125rem,1.5cqh,.5rem);font-size:clamp(3.5rem,min(36cqw,54cqh),7rem)}.axp-kpi-stat-card__watermark--layer-back{inset-inline-end:clamp(1rem,9cqw,2.25rem);bottom:clamp(.375rem,3.5cqh,.875rem)}}:host-context([dir=\"rtl\"]) .axp-kpi-stat-card__watermark--layer-back{transform:rotate(8deg)}:host-context([dir=\"rtl\"]) .axp-kpi-stat-card--clickable:hover .axp-kpi-stat-card__action{transform:translate(-3px)}:host-context([dir=\"rtl\"]) .axp-kpi-stat-card--clickable .axp-kpi-stat-card__arrow{transform:scaleX(-1)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartQueryTabsComponent, selector: "axp-chart-query-tabs", inputs: ["tabs", "activeIndex"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5225
6078
|
}
|
|
5226
6079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPKpiStatCardWidgetViewComponent, decorators: [{
|
|
5227
6080
|
type: Component,
|
|
@@ -5792,7 +6645,7 @@ class AXPShortcutWidgetViewComponent extends AXPDashboardWidgetComponent {
|
|
|
5792
6645
|
}
|
|
5793
6646
|
}
|
|
5794
6647
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPShortcutWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5795
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPShortcutWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\n class=\"shortcut-container shortcut-container--{{ layoutVariant() }}\"\n [class.shortcut-container--bg-pattern]=\"item() && cardBackgroundStyle() === 'pattern'\"\n [class.shortcut-container--bg-illustrative]=\"item() && cardBackgroundStyle() === 'illustrative'\"\n [class.shortcut-container--empty]=\"!item()\"\n [style.background]=\"item() ? cardBackground() : null\"\n [style.--shortcut-accent]=\"accentColor()\"\n (click)=\"handleClick()\"\n>\n @if (item()) {\n <i\n [class]=\"item()!.icon + ' shortcut-container__watermark shortcut-container__watermark--layer-back'\"\n aria-hidden=\"true\"\n ></i>\n <i\n [class]=\"item()!.icon + ' shortcut-container__watermark shortcut-container__watermark--layer-front'\"\n [class.shortcut-container__watermark--hero]=\"isHero()\"\n aria-hidden=\"true\"\n ></i>\n\n <div class=\"shortcut-container__body\">\n <div class=\"shortcut-container__icon\" [style.background-color]=\"accentColor()\">\n <i [class]=\"item()!.icon\" aria-hidden=\"true\"></i>\n </div>\n\n <div class=\"shortcut-container__content\">\n <h3 class=\"shortcut-container__title\">{{ item()!.title | translate | async }}</h3>\n @if (item()?.description && showDescription()) {\n <p class=\"shortcut-container__description\">{{ item()!.description! | translate | async }}</p>\n }\n @if (isHero()) {\n <button type=\"button\" class=\"shortcut-container__cta\" [style.background-color]=\"accentColor()\">\n <span>{{ '@dashboard:widgets.shortcut.get-started' | translate | async }}</span>\n <i class=\"fa-light fa-arrow-right shortcut-container__cta-icon\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n </div>\n\n @if (!isHero()) {\n <div class=\"shortcut-container__action\" aria-hidden=\"true\">\n @if (isMobile()) {\n <i class=\"fa-light fa-chevron-right\"></i>\n } @else {\n <svg class=\"shortcut-container__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5 12H19M14 7L19 12L14 17\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n }\n } @else {\n <div class=\"shortcut-container__empty\">\n <div class=\"shortcut-container__empty-icon\">\n <i class=\"fa-light fa-plus\"></i>\n </div>\n <h3 class=\"shortcut-container__empty-title\">\n {{ '@dashboard:widgets.shortcut.add-shortcut' | translate | async }}\n </h3>\n @if (!isMobile()) {\n <p class=\"shortcut-container__empty-hint\">\n {{ '@dashboard:widgets.shortcut.click-to-add' | translate | async }}\n </p>\n }\n </div>\n <div class=\"shortcut-container__dot-grid\" aria-hidden=\"true\"></div>\n }\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%;height:100%}.shortcut-container{position:relative;display:flex;width:100%;height:100%;min-height:5.5rem;cursor:pointer;overflow:hidden;border-radius:var(--radius-2xl, 1rem);padding:calc(var(--spacing, .25rem) * 4);border:1px solid var(--shortcut-accent, #6366f1);box-shadow:0 1px 3px #0f172a0f;transition:border-color .2s ease}@supports (color: color-mix(in lab,red,red)){.shortcut-container{border:1px solid color-mix(in srgb,var(--shortcut-accent, #6366f1) 16%,white)}}.shortcut-container:hover{border-color:var(--shortcut-accent, #6366f1)}@supports (color: color-mix(in lab,red,red)){.shortcut-container:hover{border-color:color-mix(in srgb,var(--shortcut-accent, #6366f1) 24%,white)}}.shortcut-container:hover .shortcut-container__action{opacity:1}.shortcut-container.shortcut-container--empty{align-items:center;justify-content:center;background:#fafbfc!important;border:1.5px dashed #d1d5db!important;box-shadow:none}.shortcut-container.shortcut-container--empty:hover{background:#f8fafc!important;border-color:#94a3b8!important}.shortcut-container.shortcut-container--bg-pattern{background-size:14px 14px,100% 100%!important}.shortcut-container.shortcut-container--compact,.shortcut-container.shortcut-container--standard{flex-direction:column}:is(.shortcut-container.shortcut-container--compact,.shortcut-container.shortcut-container--standard) .shortcut-container__body{flex-direction:column;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 3)}:is(.shortcut-container.shortcut-container--compact,.shortcut-container.shortcut-container--standard) .shortcut-container__content{justify-content:flex-start}.shortcut-container.shortcut-container--wide,.shortcut-container.shortcut-container--hero{align-items:center}:is(.shortcut-container.shortcut-container--wide,.shortcut-container.shortcut-container--hero) .shortcut-container__body{align-items:center}.shortcut-container.shortcut-container--hero{padding:calc(var(--spacing, .25rem) * 6)}.shortcut-container.shortcut-container--hero .shortcut-container__body{max-width:58%;align-self:flex-start;margin-inline-end:auto}.shortcut-container.shortcut-container--hero .shortcut-container__title{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}.shortcut-container.shortcut-container--hero .shortcut-container__description{-webkit-line-clamp:3;line-clamp:3;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.shortcut-container.shortcut-container--mobile{min-height:4.5rem;align-items:center;border-radius:.875rem;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3.5)}.shortcut-container.shortcut-container--mobile .shortcut-container__body{align-items:center}.shortcut-container.shortcut-container--mobile .shortcut-container__icon{width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);border-radius:var(--radius-lg, .5rem);font-size:.9375rem}.shortcut-container.shortcut-container--mobile .shortcut-container__title{font-size:.9375rem}.shortcut-container.shortcut-container--mobile .shortcut-container__watermark--layer-back,.shortcut-container.shortcut-container--mobile .shortcut-container__watermark--layer-front{display:none}.shortcut-container.shortcut-container--mobile .shortcut-container__action{position:static;margin-inline-start:auto;height:auto;width:auto;--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);color:#94a3b8}.shortcut-container.shortcut-container--mobile.shortcut-container--empty .shortcut-container__empty{gap:calc(var(--spacing, .25rem) * 2)}.shortcut-container.shortcut-container--mobile.shortcut-container--empty .shortcut-container__empty-icon{width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);font-size:.9375rem}.shortcut-container.shortcut-container--mobile.shortcut-container--empty .shortcut-container__empty-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.shortcut-container.shortcut-container--mobile.shortcut-container--empty .shortcut-container__dot-grid{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);inset-inline-end:.625rem;bottom:.625rem}.shortcut-container.shortcut-container--bg-illustrative .shortcut-container__watermark--layer-back{opacity:.08}.shortcut-container.shortcut-container--bg-illustrative .shortcut-container__watermark--layer-front,.shortcut-container.shortcut-container--bg-illustrative .shortcut-container__watermark--hero{opacity:.13}.shortcut-container:hover:not(.shortcut-container--mobile) .shortcut-container__cta-icon{transform:translate(3px)}.shortcut-container:hover:not(.shortcut-container--mobile) .shortcut-container__action{box-shadow:0 4px 14px -3px #0f172a24;transform:translate(3px)}.shortcut-container .shortcut-container__empty{pointer-events:none;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2.5);padding:calc(var(--spacing, .25rem) * 2);text-align:center}.shortcut-container .shortcut-container__empty-icon{display:inline-flex;width:calc(var(--spacing, .25rem) * 11);height:calc(var(--spacing, .25rem) * 11);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1.5px;border-color:var(--color-slate-200, oklch(92.9% .013 255.508));background-color:var(--color-white, #fff);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));color:#94a3b8}.shortcut-container .shortcut-container__empty-title{margin:0;font-size:.9375rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:#475569}.shortcut-container .shortcut-container__empty-hint{margin:0;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);color:#94a3b8}.shortcut-container .shortcut-container__dot-grid{pointer-events:none;position:absolute;width:calc(var(--spacing, .25rem) * 11);height:calc(var(--spacing, .25rem) * 11);inset-inline-end:.875rem;bottom:.875rem;background-image:radial-gradient(circle,#cbd5e1 1px,transparent 1px);background-size:6px 6px;-webkit-mask-image:linear-gradient(135deg,transparent 35%,black 100%);mask-image:linear-gradient(135deg,transparent 35%,black 100%)}.shortcut-container .shortcut-container__body{position:relative;z-index:1;display:flex;min-width:0px;flex:1;gap:calc(var(--spacing, .25rem) * 3.5)}.shortcut-container .shortcut-container__icon{display:inline-flex;width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);flex-shrink:0;align-items:center;justify-content:center;border-radius:.625rem;font-size:1.0625rem;color:var(--color-white, #fff);box-shadow:0 1px 4px #0f172a1f}.shortcut-container .shortcut-container__content{display:flex;min-width:0px;flex:1;flex-direction:column;justify-content:center}.shortcut-container .shortcut-container__title{margin:0;text-align:start;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:#1e293b}.shortcut-container .shortcut-container__description{margin-top:calc(var(--spacing, .25rem) * 1.5);-webkit-line-clamp:2;overflow:hidden;text-align:start;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);display:-webkit-box;margin-bottom:0;-webkit-box-orient:vertical;color:#64748b}.shortcut-container .shortcut-container__cta{margin-top:calc(var(--spacing, .25rem) * 4);display:inline-flex;width:fit-content;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-white, #fff)}.shortcut-container .shortcut-container__cta-icon{transition:transform .2s ease}.shortcut-container .shortcut-container__watermark{pointer-events:none;position:absolute;--tw-leading: 1;line-height:1;-webkit-user-select:none;user-select:none;inset-inline-end:.75rem;bottom:.5rem;font-size:4.75rem;color:var(--shortcut-accent, #6366f1)}.shortcut-container .shortcut-container__watermark--layer-back{inset-inline-end:2.5rem;bottom:1rem;opacity:.05;transform:rotate(-8deg)}.shortcut-container .shortcut-container__watermark--layer-front{opacity:.1}.shortcut-container .shortcut-container__watermark--hero{opacity:.11}.shortcut-container .shortcut-container__action{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:2;display:inline-flex;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:var(--color-white, #fff);border:1px solid var(--shortcut-accent, #6366f1);color:var(--shortcut-accent, #6366f1);box-shadow:0 2px 10px -2px #0f172a1a;opacity:.75;transition:box-shadow .2s ease,transform .2s ease,opacity .2s ease}@supports (color: color-mix(in lab,red,red)){.shortcut-container .shortcut-container__action{border:1px solid color-mix(in srgb,var(--shortcut-accent, #6366f1) 12%,white)}}.shortcut-container .shortcut-container__arrow{width:1.125rem;height:1.125rem}:host-context([dir=rtl]) .shortcut-container__cta-icon{transform:scaleX(-1)}:host-context([dir=rtl]) .shortcut-container:hover .shortcut-container__cta-icon{transform:scaleX(-1) translate(3px)}:host-context([dir=rtl]) .shortcut-container__watermark--layer-back{transform:rotate(8deg)}:host-context([dir=rtl]) .shortcut-container:hover:not(.shortcut-container--mobile) .shortcut-container__action{transform:translate(-3px)}:host-context([dir=rtl]) .shortcut-container__arrow{transform:scaleX(-1)}:host-context([dir=rtl]) .shortcut-container--mobile .shortcut-container__action i{transform:scaleX(-1)}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6648
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPShortcutWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\n class=\"shortcut-container shortcut-container--{{ layoutVariant() }}\"\n [class.shortcut-container--bg-pattern]=\"item() && cardBackgroundStyle() === 'pattern'\"\n [class.shortcut-container--bg-illustrative]=\"item() && cardBackgroundStyle() === 'illustrative'\"\n [class.shortcut-container--empty]=\"!item()\"\n [style.background]=\"item() ? cardBackground() : null\"\n [style.--shortcut-accent]=\"accentColor()\"\n (click)=\"handleClick()\"\n>\n @if (item()) {\n <i\n [class]=\"item()!.icon + ' shortcut-container__watermark shortcut-container__watermark--layer-back'\"\n aria-hidden=\"true\"\n ></i>\n <i\n [class]=\"item()!.icon + ' shortcut-container__watermark shortcut-container__watermark--layer-front'\"\n [class.shortcut-container__watermark--hero]=\"isHero()\"\n aria-hidden=\"true\"\n ></i>\n\n <div class=\"shortcut-container__body\">\n <div class=\"shortcut-container__icon\" [style.background-color]=\"accentColor()\">\n <i [class]=\"item()!.icon\" aria-hidden=\"true\"></i>\n </div>\n\n <div class=\"shortcut-container__content\">\n <h3 class=\"shortcut-container__title\">{{ item()!.title | translate | async }}</h3>\n @if (item()?.description && showDescription()) {\n <p class=\"shortcut-container__description\">{{ item()!.description! | translate | async }}</p>\n }\n @if (isHero()) {\n <button type=\"button\" class=\"shortcut-container__cta\" [style.background-color]=\"accentColor()\">\n <span>{{ '@dashboard:widgets.shortcut.get-started' | translate | async }}</span>\n <i class=\"fa-light fa-arrow-right shortcut-container__cta-icon\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n </div>\n\n @if (!isHero()) {\n <div class=\"shortcut-container__action\" aria-hidden=\"true\">\n @if (isMobile()) {\n <i class=\"fa-light fa-chevron-right\"></i>\n } @else {\n <svg class=\"shortcut-container__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5 12H19M14 7L19 12L14 17\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n }\n } @else {\n <div class=\"shortcut-container__empty\">\n <div class=\"shortcut-container__empty-icon\">\n <i class=\"fa-light fa-plus\"></i>\n </div>\n <h3 class=\"shortcut-container__empty-title\">\n {{ '@dashboard:widgets.shortcut.add-shortcut' | translate | async }}\n </h3>\n @if (!isMobile()) {\n <p class=\"shortcut-container__empty-hint\">\n {{ '@dashboard:widgets.shortcut.click-to-add' | translate | async }}\n </p>\n }\n </div>\n <div class=\"shortcut-container__dot-grid\" aria-hidden=\"true\"></div>\n }\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%;height:100%}.shortcut-container{position:relative;display:flex;width:100%;height:100%;min-height:5.5rem;cursor:pointer;overflow:hidden;border-radius:var(--radius-2xl, 1rem);padding:calc(var(--spacing, .25rem) * 4);border:1px solid var(--shortcut-accent, #6366f1);box-shadow:0 1px 3px #0f172a0f;transition:border-color .2s ease}@supports (color: color-mix(in lab,red,red)){.shortcut-container{border:1px solid color-mix(in srgb,var(--shortcut-accent, #6366f1) 16%,white)}}.shortcut-container:hover{border-color:var(--shortcut-accent, #6366f1)}@supports (color: color-mix(in lab,red,red)){.shortcut-container:hover{border-color:color-mix(in srgb,var(--shortcut-accent, #6366f1) 24%,white)}}.shortcut-container:hover .shortcut-container__action{opacity:1}.shortcut-container.shortcut-container--empty{align-items:center;justify-content:center;background:#fafbfc!important;border:1.5px dashed #d1d5db!important;box-shadow:none}.shortcut-container.shortcut-container--empty:hover{background:#f8fafc!important;border-color:#94a3b8!important}.shortcut-container.shortcut-container--bg-pattern{background-size:14px 14px,100% 100%!important}.shortcut-container.shortcut-container--compact,.shortcut-container.shortcut-container--standard{flex-direction:column}:is(.shortcut-container.shortcut-container--compact,.shortcut-container.shortcut-container--standard) .shortcut-container__body{flex-direction:column;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 3)}:is(.shortcut-container.shortcut-container--compact,.shortcut-container.shortcut-container--standard) .shortcut-container__content{justify-content:flex-start}.shortcut-container.shortcut-container--wide,.shortcut-container.shortcut-container--hero{align-items:center}:is(.shortcut-container.shortcut-container--wide,.shortcut-container.shortcut-container--hero) .shortcut-container__body{align-items:center}.shortcut-container.shortcut-container--hero{padding:calc(var(--spacing, .25rem) * 6)}.shortcut-container.shortcut-container--hero .shortcut-container__body{max-width:58%;align-self:flex-start;margin-inline-end:auto}.shortcut-container.shortcut-container--hero .shortcut-container__title{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}.shortcut-container.shortcut-container--hero .shortcut-container__description{-webkit-line-clamp:3;line-clamp:3;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.shortcut-container.shortcut-container--mobile{min-height:4.5rem;align-items:center;border-radius:.875rem;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3.5)}.shortcut-container.shortcut-container--mobile .shortcut-container__body{align-items:center}.shortcut-container.shortcut-container--mobile .shortcut-container__icon{width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);border-radius:var(--radius-lg, .5rem);font-size:.9375rem}.shortcut-container.shortcut-container--mobile .shortcut-container__title{font-size:.9375rem}.shortcut-container.shortcut-container--mobile .shortcut-container__watermark--layer-back,.shortcut-container.shortcut-container--mobile .shortcut-container__watermark--layer-front{display:none}.shortcut-container.shortcut-container--mobile .shortcut-container__action{position:static;margin-inline-start:auto;height:auto;width:auto;--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);color:#94a3b8}.shortcut-container.shortcut-container--mobile.shortcut-container--empty .shortcut-container__empty{gap:calc(var(--spacing, .25rem) * 2)}.shortcut-container.shortcut-container--mobile.shortcut-container--empty .shortcut-container__empty-icon{width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);font-size:.9375rem}.shortcut-container.shortcut-container--mobile.shortcut-container--empty .shortcut-container__empty-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.shortcut-container.shortcut-container--mobile.shortcut-container--empty .shortcut-container__dot-grid{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);inset-inline-end:.625rem;bottom:.625rem}.shortcut-container.shortcut-container--bg-illustrative .shortcut-container__watermark--layer-back{opacity:.08}.shortcut-container.shortcut-container--bg-illustrative .shortcut-container__watermark--layer-front,.shortcut-container.shortcut-container--bg-illustrative .shortcut-container__watermark--hero{opacity:.13}.shortcut-container:hover:not(.shortcut-container--mobile) .shortcut-container__cta-icon{transform:translate(3px)}.shortcut-container:hover:not(.shortcut-container--mobile) .shortcut-container__action{box-shadow:0 4px 14px -3px #0f172a24;transform:translate(3px)}.shortcut-container .shortcut-container__empty{pointer-events:none;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2.5);padding:calc(var(--spacing, .25rem) * 2);text-align:center}.shortcut-container .shortcut-container__empty-icon{display:inline-flex;width:calc(var(--spacing, .25rem) * 11);height:calc(var(--spacing, .25rem) * 11);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1.5px;border-color:var(--color-slate-200, oklch(92.9% .013 255.508));background-color:var(--color-white, #fff);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));color:#94a3b8}.shortcut-container .shortcut-container__empty-title{margin:0;font-size:.9375rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:#475569}.shortcut-container .shortcut-container__empty-hint{margin:0;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);color:#94a3b8}.shortcut-container .shortcut-container__dot-grid{pointer-events:none;position:absolute;width:calc(var(--spacing, .25rem) * 11);height:calc(var(--spacing, .25rem) * 11);inset-inline-end:.875rem;bottom:.875rem;background-image:radial-gradient(circle,#cbd5e1 1px,transparent 1px);background-size:6px 6px;-webkit-mask-image:linear-gradient(135deg,transparent 35%,black 100%);mask-image:linear-gradient(135deg,transparent 35%,black 100%)}.shortcut-container .shortcut-container__body{position:relative;z-index:1;display:flex;min-width:0px;flex:1;gap:calc(var(--spacing, .25rem) * 3.5)}.shortcut-container .shortcut-container__icon{display:inline-flex;width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);flex-shrink:0;align-items:center;justify-content:center;border-radius:.625rem;font-size:1.0625rem;color:var(--color-white, #fff);box-shadow:0 1px 4px #0f172a1f}.shortcut-container .shortcut-container__content{display:flex;min-width:0px;flex:1;flex-direction:column;justify-content:center}.shortcut-container .shortcut-container__title{margin:0;text-align:start;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:#1e293b}.shortcut-container .shortcut-container__description{margin-top:calc(var(--spacing, .25rem) * 1.5);-webkit-line-clamp:2;overflow:hidden;text-align:start;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);display:-webkit-box;margin-bottom:0;-webkit-box-orient:vertical;color:#64748b}.shortcut-container .shortcut-container__cta{margin-top:calc(var(--spacing, .25rem) * 4);display:inline-flex;width:fit-content;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-white, #fff)}.shortcut-container .shortcut-container__cta-icon{transition:transform .2s ease}.shortcut-container .shortcut-container__watermark{pointer-events:none;position:absolute;--tw-leading: 1;line-height:1;-webkit-user-select:none;user-select:none;inset-inline-end:.75rem;bottom:.5rem;font-size:4.75rem;color:var(--shortcut-accent, #6366f1)}.shortcut-container .shortcut-container__watermark--layer-back{inset-inline-end:2.5rem;bottom:1rem;opacity:.05;transform:rotate(-8deg)}.shortcut-container .shortcut-container__watermark--layer-front{opacity:.1}.shortcut-container .shortcut-container__watermark--hero{opacity:.11}.shortcut-container .shortcut-container__action{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:2;display:inline-flex;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:var(--color-white, #fff);border:1px solid var(--shortcut-accent, #6366f1);color:var(--shortcut-accent, #6366f1);box-shadow:0 2px 10px -2px #0f172a1a;opacity:.75;transition:box-shadow .2s ease,transform .2s ease,opacity .2s ease}@supports (color: color-mix(in lab,red,red)){.shortcut-container .shortcut-container__action{border:1px solid color-mix(in srgb,var(--shortcut-accent, #6366f1) 12%,white)}}.shortcut-container .shortcut-container__arrow{width:1.125rem;height:1.125rem}:host-context([dir=rtl]) .shortcut-container__cta-icon{transform:scaleX(-1)}:host-context([dir=rtl]) .shortcut-container:hover .shortcut-container__cta-icon{transform:scaleX(-1) translate(3px)}:host-context([dir=rtl]) .shortcut-container__watermark--layer-back{transform:rotate(8deg)}:host-context([dir=rtl]) .shortcut-container:hover:not(.shortcut-container--mobile) .shortcut-container__action{transform:translate(-3px)}:host-context([dir=rtl]) .shortcut-container__arrow{transform:scaleX(-1)}:host-context([dir=rtl]) .shortcut-container--mobile .shortcut-container__action i{transform:scaleX(-1)}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5796
6649
|
}
|
|
5797
6650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPShortcutWidgetViewComponent, decorators: [{
|
|
5798
6651
|
type: Component,
|
|
@@ -6054,7 +6907,7 @@ class AXPStickyNoteWidgetViewComponent extends AXPDashboardWidgetComponent {
|
|
|
6054
6907
|
this.isEditing.set(false);
|
|
6055
6908
|
}
|
|
6056
6909
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPStickyNoteWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6057
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPStickyNoteWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { listeners: { "document:click": "handleClickOutside($event)", "document:keydown": "handleDocumentKeydown($event)" } }, viewQueries: [{ propertyName: "noteEditor", first: true, predicate: ["noteEditor"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"sticky-note sticky-note--{{ layoutVariant() }}\"\n [class.sticky-note--editing]=\"isEditing()\"\n [class.sticky-note--empty]=\"isEmpty() && !isEditing()\"\n [style.--note-bg]=\"backgroundColor()\"\n [style.--note-text]=\"textColor()\"\n [style.--note-muted]=\"mutedTextColor()\"\n (dblclick)=\"activateEdit()\"\n>\n <span class=\"sticky-note__fold\" aria-hidden=\"true\"></span>\n\n <div class=\"sticky-note__content\">\n <!-- ----- Subtle empty hint ----- -->\n @if (!isEditing() && isEmpty() && showEmptyHint()) {\n <p class=\"sticky-note__hint\">{{ '@dashboard:widgets.sticky-note.empty-hint' | translate | async }}</p>\n }\n\n <!-- ----- Read-only note body when not editing ----- -->\n @if (!isEditing() && !isEmpty()) {\n <p class=\"sticky-note__text\">{{ persistedNoteText() }}</p>\n }\n\n <div\n class=\"sticky-note__editor-host\"\n [class.sticky-note__editor-host--hidden]=\"!isEditing()\"\n (click)=\"$event.stopPropagation()\"\n >\n <ax-text-area\n #noteEditor\n class=\"sticky-note__editor\"\n look=\"none\"\n [ngModel]=\"draftText()\"\n (onValueChanged)=\"handleDraftChange($event)\"\n [placeholder]=\"('@dashboard:widgets.sticky-note.placeholder' | translate | async)!\"\n ></ax-text-area>\n </div>\n </div>\n\n @if (isEditing()) {\n <div class=\"sticky-note__palette\" role=\"listbox\" [attr.aria-label]=\"('@dashboard:widgets.sticky-note.color-palette' | translate | async)!\">\n @for (preset of colorPresets; track preset) {\n <button\n type=\"button\"\n class=\"sticky-note__swatch\"\n role=\"option\"\n [attr.aria-selected]=\"backgroundColor() === preset\"\n [class.sticky-note__swatch--selected]=\"backgroundColor() === preset\"\n [style.background-color]=\"preset\"\n (click)=\"setColor(preset, $event)\"\n ></button>\n }\n </div>\n }\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%;height:100%}.sticky-note{position:relative;display:flex;width:100%;height:100%;min-height:0px;flex-direction:column;overflow:hidden;border-radius:var(--radius-xl, .75rem);color:var(--note-text, #3f3f46);background:var(--note-bg, #fff8b8);box-shadow:inset 0 1px #ffffff80,0 1px 2px #18181b0f;transition:box-shadow .18s ease}.sticky-note.sticky-note--editing{box-shadow:inset 0 1px #ffffff8c,0 4px 14px -6px #18181b2e}.sticky-note.sticky-note--editing .sticky-note__content{min-height:0px;flex:1;padding-bottom:var(--spacing, .25rem)}.sticky-note.sticky-note--empty:not(.sticky-note--editing) .sticky-note__content{align-items:center;justify-content:center}.sticky-note.sticky-note--mini{border-radius:.625rem}.sticky-note.sticky-note--mini .sticky-note__content{padding:calc(var(--spacing, .25rem) * 2.5)}.sticky-note.sticky-note--mini .sticky-note__text,.sticky-note.sticky-note--mini .sticky-note__hint,.sticky-note.sticky-note--mini .sticky-note__editor{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1.4;line-height:1.4}.sticky-note.sticky-note--mini .sticky-note__fold{border-width:0 .875rem .875rem 0}.sticky-note.sticky-note--mini .sticky-note__palette{gap:var(--spacing, .25rem);padding:calc(var(--spacing, .25rem) * 1.5);inset-block-end:.375rem;inset-inline-end:.375rem}.sticky-note.sticky-note--mini .sticky-note__swatch{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5)}.sticky-note .sticky-note__fold{pointer-events:none;position:absolute;z-index:1;inset-block-start:0;inset-inline-end:0;width:0;height:0;border-style:solid;border-width:0 1.125rem 1.125rem 0;border-color:transparent rgba(24,24,27,.07) transparent transparent}.sticky-note .sticky-note__content{position:relative;z-index:2;display:flex;min-height:0px;flex:1;flex-direction:column;padding:calc(var(--spacing, .25rem) * 3)}.sticky-note.sticky-note--editing .sticky-note__content{padding-bottom:calc(var(--spacing, .25rem) * 2)}.sticky-note .sticky-note__text{margin:0;min-height:0px;flex:1;overflow:auto;text-align:start;font-size:.8125rem;--tw-leading: 1.45;line-height:1.45;overflow-wrap:break-word;white-space:pre-wrap}.sticky-note .sticky-note__hint{margin:0;text-align:center;font-size:.75rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);font-style:italic;color:var(--note-muted, #71717a)}.sticky-note .sticky-note__editor-host{display:flex;min-height:0px;flex:1;flex-direction:column}.sticky-note .sticky-note__editor-host.sticky-note__editor-host--hidden{pointer-events:none;position:absolute;inset:0;overflow:hidden;opacity:0%;visibility:hidden}.sticky-note .sticky-note__palette{position:absolute;z-index:3;display:flex;gap:var(--spacing, .25rem);border-radius:calc(infinity * 1px);padding:calc(var(--spacing, .25rem) * 1.5);inset-block-end:.5rem;inset-inline-end:.5rem;background:#ffffff6b;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 1px 4px #18181b14}.sticky-note .sticky-note__swatch{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);cursor:pointer;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,#000 8%,transparent);padding:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}@supports (color: color-mix(in lab,red,red)){.sticky-note .sticky-note__swatch{border-color:color-mix(in oklab,var(--color-black, #000) 8%,transparent)}}.sticky-note .sticky-note__swatch:hover{transform:scale(1.1)}.sticky-note .sticky-note__swatch.sticky-note__swatch--selected{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);ring-color:rgba(24,24,27,.35);ring-offset-color:transparent}:host ::ng-deep .sticky-note__editor,:host ::ng-deep .sticky-note__editor-host ax-text-area{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column}:host ::ng-deep .sticky-note__editor>*,:host ::ng-deep .sticky-note__editor textarea{min-height:100%;flex:1;resize:none;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;font-size:.8125rem;--tw-leading: 1.45;line-height:1.45;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style: none;outline-style:none;height:100%!important;color:inherit}:host ::ng-deep .sticky-note__editor textarea::placeholder{color:var(--note-muted, #71717a);opacity:.85}:host-context([dir=\"rtl\"]) .sticky-note__fold{inset-inline-end:auto;inset-inline-start:0;border-width:1.125rem 0 0 1.125rem;border-color:rgba(24,24,27,.07) transparent transparent transparent}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i2$2.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6910
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPStickyNoteWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { listeners: { "document:click": "handleClickOutside($event)", "document:keydown": "handleDocumentKeydown($event)" } }, viewQueries: [{ propertyName: "noteEditor", first: true, predicate: ["noteEditor"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"sticky-note sticky-note--{{ layoutVariant() }}\"\n [class.sticky-note--editing]=\"isEditing()\"\n [class.sticky-note--empty]=\"isEmpty() && !isEditing()\"\n [style.--note-bg]=\"backgroundColor()\"\n [style.--note-text]=\"textColor()\"\n [style.--note-muted]=\"mutedTextColor()\"\n (dblclick)=\"activateEdit()\"\n>\n <span class=\"sticky-note__fold\" aria-hidden=\"true\"></span>\n\n <div class=\"sticky-note__content\">\n <!-- ----- Subtle empty hint ----- -->\n @if (!isEditing() && isEmpty() && showEmptyHint()) {\n <p class=\"sticky-note__hint\">{{ '@dashboard:widgets.sticky-note.empty-hint' | translate | async }}</p>\n }\n\n <!-- ----- Read-only note body when not editing ----- -->\n @if (!isEditing() && !isEmpty()) {\n <p class=\"sticky-note__text\">{{ persistedNoteText() }}</p>\n }\n\n <div\n class=\"sticky-note__editor-host\"\n [class.sticky-note__editor-host--hidden]=\"!isEditing()\"\n (click)=\"$event.stopPropagation()\"\n >\n <ax-text-area\n #noteEditor\n class=\"sticky-note__editor\"\n look=\"none\"\n [ngModel]=\"draftText()\"\n (onValueChanged)=\"handleDraftChange($event)\"\n [placeholder]=\"('@dashboard:widgets.sticky-note.placeholder' | translate | async)!\"\n ></ax-text-area>\n </div>\n </div>\n\n @if (isEditing()) {\n <div class=\"sticky-note__palette\" role=\"listbox\" [attr.aria-label]=\"('@dashboard:widgets.sticky-note.color-palette' | translate | async)!\">\n @for (preset of colorPresets; track preset) {\n <button\n type=\"button\"\n class=\"sticky-note__swatch\"\n role=\"option\"\n [attr.aria-selected]=\"backgroundColor() === preset\"\n [class.sticky-note__swatch--selected]=\"backgroundColor() === preset\"\n [style.background-color]=\"preset\"\n (click)=\"setColor(preset, $event)\"\n ></button>\n }\n </div>\n }\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%;height:100%}.sticky-note{position:relative;display:flex;width:100%;height:100%;min-height:0px;flex-direction:column;overflow:hidden;border-radius:var(--radius-xl, .75rem);color:var(--note-text, #3f3f46);background:var(--note-bg, #fff8b8);box-shadow:inset 0 1px #ffffff80,0 1px 2px #18181b0f;transition:box-shadow .18s ease}.sticky-note.sticky-note--editing{box-shadow:inset 0 1px #ffffff8c,0 4px 14px -6px #18181b2e}.sticky-note.sticky-note--editing .sticky-note__content{min-height:0px;flex:1;padding-bottom:var(--spacing, .25rem)}.sticky-note.sticky-note--empty:not(.sticky-note--editing) .sticky-note__content{align-items:center;justify-content:center}.sticky-note.sticky-note--mini{border-radius:.625rem}.sticky-note.sticky-note--mini .sticky-note__content{padding:calc(var(--spacing, .25rem) * 2.5)}.sticky-note.sticky-note--mini .sticky-note__text,.sticky-note.sticky-note--mini .sticky-note__hint,.sticky-note.sticky-note--mini .sticky-note__editor{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1.4;line-height:1.4}.sticky-note.sticky-note--mini .sticky-note__fold{border-width:0 .875rem .875rem 0}.sticky-note.sticky-note--mini .sticky-note__palette{gap:var(--spacing, .25rem);padding:calc(var(--spacing, .25rem) * 1.5);inset-block-end:.375rem;inset-inline-end:.375rem}.sticky-note.sticky-note--mini .sticky-note__swatch{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5)}.sticky-note .sticky-note__fold{pointer-events:none;position:absolute;z-index:1;inset-block-start:0;inset-inline-end:0;width:0;height:0;border-style:solid;border-width:0 1.125rem 1.125rem 0;border-color:transparent rgba(24,24,27,.07) transparent transparent}.sticky-note .sticky-note__content{position:relative;z-index:2;display:flex;min-height:0px;flex:1;flex-direction:column;padding:calc(var(--spacing, .25rem) * 3)}.sticky-note.sticky-note--editing .sticky-note__content{padding-bottom:calc(var(--spacing, .25rem) * 2)}.sticky-note .sticky-note__text{margin:0;min-height:0px;flex:1;overflow:auto;text-align:start;font-size:.8125rem;--tw-leading: 1.45;line-height:1.45;overflow-wrap:break-word;white-space:pre-wrap}.sticky-note .sticky-note__hint{margin:0;text-align:center;font-size:.75rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);font-style:italic;color:var(--note-muted, #71717a)}.sticky-note .sticky-note__editor-host{display:flex;min-height:0px;flex:1;flex-direction:column}.sticky-note .sticky-note__editor-host.sticky-note__editor-host--hidden{pointer-events:none;position:absolute;inset:0;overflow:hidden;opacity:0%;visibility:hidden}.sticky-note .sticky-note__palette{position:absolute;z-index:3;display:flex;gap:var(--spacing, .25rem);border-radius:calc(infinity * 1px);padding:calc(var(--spacing, .25rem) * 1.5);inset-block-end:.5rem;inset-inline-end:.5rem;background:#ffffff6b;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 1px 4px #18181b14}.sticky-note .sticky-note__swatch{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);cursor:pointer;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,#000 8%,transparent);padding:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}@supports (color: color-mix(in lab,red,red)){.sticky-note .sticky-note__swatch{border-color:color-mix(in oklab,var(--color-black, #000) 8%,transparent)}}.sticky-note .sticky-note__swatch:hover{transform:scale(1.1)}.sticky-note .sticky-note__swatch.sticky-note__swatch--selected{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);ring-color:rgba(24,24,27,.35);ring-offset-color:transparent}:host ::ng-deep .sticky-note__editor,:host ::ng-deep .sticky-note__editor-host ax-text-area{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column}:host ::ng-deep .sticky-note__editor>*,:host ::ng-deep .sticky-note__editor textarea{min-height:100%;flex:1;resize:none;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;font-size:.8125rem;--tw-leading: 1.45;line-height:1.45;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style: none;outline-style:none;height:100%!important;color:inherit}:host ::ng-deep .sticky-note__editor textarea::placeholder{color:var(--note-muted, #71717a);opacity:.85}:host-context([dir=\"rtl\"]) .sticky-note__fold{inset-inline-end:auto;inset-inline-start:0;border-width:1.125rem 0 0 1.125rem;border-color:rgba(24,24,27,.07) transparent transparent transparent}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i2$2.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6058
6911
|
}
|
|
6059
6912
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPStickyNoteWidgetViewComponent, decorators: [{
|
|
6060
6913
|
type: Component,
|
|
@@ -6309,66 +7162,46 @@ const DASHBOARD_LAYOUT_ENTITY_MODE = new InjectionToken('DASHBOARD_LAYOUT_ENTITY
|
|
|
6309
7162
|
/** When true (entity dashboard plugin), layout and widgets are view-only. */
|
|
6310
7163
|
const DASHBOARD_READONLY_MODE = new InjectionToken('DASHBOARD_READONLY_MODE');
|
|
6311
7164
|
|
|
7165
|
+
//#endregion
|
|
7166
|
+
//#region ----- Component -----
|
|
6312
7167
|
class AXMConfigurationPopup extends AXBasePageComponent {
|
|
6313
7168
|
constructor() {
|
|
6314
7169
|
super(...arguments);
|
|
7170
|
+
//#endregion
|
|
7171
|
+
//#region ----- State Signals -----
|
|
6315
7172
|
this.widgetData = signal(null, /* @ts-ignore */
|
|
6316
7173
|
...(ngDevMode ? [{ debugName: "widgetData" }] : /* istanbul ignore next */ []));
|
|
7174
|
+
this.saveError = signal(null, /* @ts-ignore */
|
|
7175
|
+
...(ngDevMode ? [{ debugName: "saveError" }] : /* istanbul ignore next */ []));
|
|
6317
7176
|
}
|
|
7177
|
+
//#endregion
|
|
7178
|
+
//#region ----- Lifecycle -----
|
|
6318
7179
|
ngOnInit() {
|
|
6319
7180
|
this.widgetData.set(this.widget);
|
|
6320
7181
|
}
|
|
7182
|
+
//#endregion
|
|
7183
|
+
//#region ----- Event Handlers -----
|
|
6321
7184
|
async handleClose(isCanceled = false) {
|
|
7185
|
+
if (!isCanceled && !areChartCardTabsConfigured(this.widgetData())) {
|
|
7186
|
+
this.saveError.set('@dashboard:widgets.chart-card.incomplete-tabs');
|
|
7187
|
+
return;
|
|
7188
|
+
}
|
|
7189
|
+
this.saveError.set(null);
|
|
6322
7190
|
this.close({
|
|
6323
7191
|
isCanceled,
|
|
6324
7192
|
widget: this.widgetData(),
|
|
6325
7193
|
});
|
|
6326
7194
|
}
|
|
6327
7195
|
handlePropertyChange(event) {
|
|
7196
|
+
this.saveError.set(null);
|
|
6328
7197
|
this.widgetData.set(event.values);
|
|
6329
7198
|
}
|
|
6330
7199
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMConfigurationPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6331
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMConfigurationPopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template:
|
|
6332
|
-
@if(widget) {
|
|
6333
|
-
<div class="px-1">
|
|
6334
|
-
<axp-widget-property-viewer (onChanged)="handlePropertyChange($event)" [widget]="widget">
|
|
6335
|
-
</axp-widget-property-viewer>
|
|
6336
|
-
</div>
|
|
6337
|
-
}
|
|
6338
|
-
<ax-footer>
|
|
6339
|
-
<ax-prefix></ax-prefix>
|
|
6340
|
-
<ax-suffix>
|
|
6341
|
-
<ax-button text="Cancel" look="solid" (onClick)="handleClose(true)"> </ax-button>
|
|
6342
|
-
<ax-button text="Save" look="solid" color="primary" (onClick)="handleClose()">
|
|
6343
|
-
<ax-icon class="fa-solid fa-save"></ax-icon>
|
|
6344
|
-
</ax-button>
|
|
6345
|
-
</ax-suffix>
|
|
6346
|
-
</ax-footer>
|
|
6347
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
7200
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMConfigurationPopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (widget) {\n <div class=\"px-1\">\n <axp-widget-property-viewer (onChanged)=\"handlePropertyChange($event)\" [widget]=\"widget\">\n </axp-widget-property-viewer>\n </div>\n}\n<!-- ----- Incomplete chart-card tabs block Save ----- -->\n@if (saveError(); as errorKey) {\n <p class=\"px-3 pb-2 text-sm text-red-600\">{{ errorKey | translate | async }}</p>\n}\n<ax-footer>\n <ax-prefix></ax-prefix>\n <ax-suffix>\n <ax-button text=\"Cancel\" look=\"solid\" (onClick)=\"handleClose(true)\"> </ax-button>\n <ax-button text=\"Save\" look=\"solid\" color=\"primary\" (onClick)=\"handleClose()\">\n <ax-icon class=\"fa-solid fa-save\"></ax-icon>\n </ax-button>\n </ax-suffix>\n</ax-footer>\n", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
6348
7201
|
}
|
|
6349
7202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMConfigurationPopup, decorators: [{
|
|
6350
7203
|
type: Component,
|
|
6351
|
-
args: [{
|
|
6352
|
-
template: `
|
|
6353
|
-
@if(widget) {
|
|
6354
|
-
<div class="px-1">
|
|
6355
|
-
<axp-widget-property-viewer (onChanged)="handlePropertyChange($event)" [widget]="widget">
|
|
6356
|
-
</axp-widget-property-viewer>
|
|
6357
|
-
</div>
|
|
6358
|
-
}
|
|
6359
|
-
<ax-footer>
|
|
6360
|
-
<ax-prefix></ax-prefix>
|
|
6361
|
-
<ax-suffix>
|
|
6362
|
-
<ax-button text="Cancel" look="solid" (onClick)="handleClose(true)"> </ax-button>
|
|
6363
|
-
<ax-button text="Save" look="solid" color="primary" (onClick)="handleClose()">
|
|
6364
|
-
<ax-icon class="fa-solid fa-save"></ax-icon>
|
|
6365
|
-
</ax-button>
|
|
6366
|
-
</ax-suffix>
|
|
6367
|
-
</ax-footer>
|
|
6368
|
-
`,
|
|
6369
|
-
changeDetection: ChangeDetectionStrategy.Eager,
|
|
6370
|
-
imports: [AXButtonModule, AXDecoratorModule, AXPWidgetPropertyViewerComponent],
|
|
6371
|
-
}]
|
|
7204
|
+
args: [{ changeDetection: ChangeDetectionStrategy.Eager, imports: [AXButtonModule, AXDecoratorModule, AXPWidgetPropertyViewerComponent, AXTranslationModule, CommonModule], template: "@if (widget) {\n <div class=\"px-1\">\n <axp-widget-property-viewer (onChanged)=\"handlePropertyChange($event)\" [widget]=\"widget\">\n </axp-widget-property-viewer>\n </div>\n}\n<!-- ----- Incomplete chart-card tabs block Save ----- -->\n@if (saveError(); as errorKey) {\n <p class=\"px-3 pb-2 text-sm text-red-600\">{{ errorKey | translate | async }}</p>\n}\n<ax-footer>\n <ax-prefix></ax-prefix>\n <ax-suffix>\n <ax-button text=\"Cancel\" look=\"solid\" (onClick)=\"handleClose(true)\"> </ax-button>\n <ax-button text=\"Save\" look=\"solid\" color=\"primary\" (onClick)=\"handleClose()\">\n <ax-icon class=\"fa-solid fa-save\"></ax-icon>\n </ax-button>\n </ax-suffix>\n</ax-footer>\n" }]
|
|
6372
7205
|
}] });
|
|
6373
7206
|
|
|
6374
7207
|
class AXMDashboardPopupService {
|
|
@@ -6378,7 +7211,7 @@ class AXMDashboardPopupService {
|
|
|
6378
7211
|
this.layoutBuilder = inject(AXPLayoutBuilderService);
|
|
6379
7212
|
this.entityService = inject(AXPEntityService);
|
|
6380
7213
|
this.roleService = this.entityService
|
|
6381
|
-
.withEntity(RootConfig$
|
|
7214
|
+
.withEntity(RootConfig$2.module.name, RootConfig$2.entities.roles.name)
|
|
6382
7215
|
.data();
|
|
6383
7216
|
this.sessionService = inject(AXPSessionService);
|
|
6384
7217
|
}
|
|
@@ -6481,7 +7314,7 @@ class AXMDashboardPopupService {
|
|
|
6481
7314
|
async handlePopupConfiguration(widget) {
|
|
6482
7315
|
const result = await this.popupService.open(AXMConfigurationPopup, {
|
|
6483
7316
|
header: true,
|
|
6484
|
-
size: '
|
|
7317
|
+
size: 'md',
|
|
6485
7318
|
draggable: true,
|
|
6486
7319
|
hasBackdrop: true,
|
|
6487
7320
|
title: await this.translateService.translateAsync('@dashboard:widget-configuration'),
|
|
@@ -6954,7 +7787,7 @@ withComputed((state, deviceService = inject(AXPDeviceService)) => ({
|
|
|
6954
7787
|
//#endregion
|
|
6955
7788
|
//#region ---- Methods ----
|
|
6956
7789
|
withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogService = inject(AXDialogService), translationService = inject(AXTranslationService), widgetPickerService = inject(AXPWidgetPickerService), entityService = inject(AXPEntityService), settingsService = inject(AXPSettingsService), sessionService = inject(AXPSessionService), deviceService = inject(AXPDeviceService)) => {
|
|
6957
|
-
const userRoleService = entityService.withEntity(RootConfig$
|
|
7790
|
+
const userRoleService = entityService.withEntity(RootConfig$2.module.name, RootConfig$2.entities.userRole.name).data();
|
|
6958
7791
|
const dashboardData = entityService.withEntity(RootConfig.module.name, RootConfig.entities.dashboard.name).data();
|
|
6959
7792
|
const sessionReady = toSignal(sessionService.isReadyForAppScopedApi$, {
|
|
6960
7793
|
initialValue: sessionService.isReadyForAppScopedApi,
|
|
@@ -7836,7 +8669,7 @@ class AXMDashboardWidgetWrapperComponent {
|
|
|
7836
8669
|
this.isDropdownOpen.set(false);
|
|
7837
8670
|
}
|
|
7838
8671
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMDashboardWidgetWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7839
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMDashboardWidgetWrapperComponent, isStandalone: true, selector: "axm-dashboard-widget-wrapper", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, hasConfiguration: { classPropertyName: "hasConfiguration", publicName: "hasConfiguration", isSignal: true, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete", onConfiguration: "onConfiguration" }, host: { listeners: { "contextmenu": "stopDashboardCanvasContextMenuBubble($event)" }, classAttribute: "axm-dashboard-widget-wrapper block size-full" }, ngImport: i0, template: "<section class=\"relative size-full flex flex-col group overflow-hidden\">\n <!-- Action button - stays absolute -->\n @if(!isLocked()) {\n <div\n class=\"p-[0.6125rem] absolute top-0 end-0 z-[9] invisible group-hover:visible md:group-hover:visible\"\n [class.!visible]=\"isDropdownOpen()\"\n (touchstart)=\"isDropdownOpen.set(true)\"\n >\n <ax-button class=\"ax-sm main-button\" [look]=\"'blank'\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-ellipsis-vertical\"></ax-icon>\n </ax-prefix>\n <ax-dropdown-panel (onOpened)=\"isDropdownOpen.set(true)\" (onClosed)=\"isDropdownOpen.set(false)\">\n <ng-container *translate=\"let t\">\n <ax-button-item-list (onItemClick)=\"handleOnItemClick($event)\">\n @if(hasConfiguration()){\n <ax-button-item\n [data]=\"'configuration'\"\n [text]=\"('@dashboard:configuration' | translate | async) || 'configuration'\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n </ax-prefix>\n </ax-button-item>\n <ax-divider></ax-divider>\n }\n <ax-button-item\n [data]=\"'delete'\"\n [text]=\"('@general:actions.delete.title' | translate | async)!\"\n color=\"danger\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n </ax-prefix>\n </ax-button-item>\n </ax-button-item-list>\n </ng-container>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n }\n\n <!-- Title section -->\n @if(title()) {\n <div class=\"ps-5 pe-8 py-3 border-b\">\n <h3 class=\"text-start text-lg font-medium truncate\">{{title()}}</h3>\n </div>\n }\n\n <!-- Content section -->\n <div class=\"overflow-hidden flex-1 min-h-0 min-w-0\">\n <ng-content></ng-content>\n </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "
|
|
8672
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMDashboardWidgetWrapperComponent, isStandalone: true, selector: "axm-dashboard-widget-wrapper", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, hasConfiguration: { classPropertyName: "hasConfiguration", publicName: "hasConfiguration", isSignal: true, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete", onConfiguration: "onConfiguration" }, host: { listeners: { "contextmenu": "stopDashboardCanvasContextMenuBubble($event)" }, classAttribute: "axm-dashboard-widget-wrapper block size-full" }, ngImport: i0, template: "<section class=\"relative size-full flex flex-col group overflow-hidden\">\n <!-- Action button - stays absolute -->\n @if(!isLocked()) {\n <div\n class=\"p-[0.6125rem] absolute top-0 end-0 z-[9] invisible group-hover:visible md:group-hover:visible\"\n [class.!visible]=\"isDropdownOpen()\"\n (touchstart)=\"isDropdownOpen.set(true)\"\n >\n <ax-button class=\"ax-sm main-button\" [look]=\"'blank'\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-ellipsis-vertical\"></ax-icon>\n </ax-prefix>\n <ax-dropdown-panel (onOpened)=\"isDropdownOpen.set(true)\" (onClosed)=\"isDropdownOpen.set(false)\">\n <ng-container *translate=\"let t\">\n <ax-button-item-list (onItemClick)=\"handleOnItemClick($event)\">\n @if(hasConfiguration()){\n <ax-button-item\n [data]=\"'configuration'\"\n [text]=\"('@dashboard:configuration' | translate | async) || 'configuration'\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n </ax-prefix>\n </ax-button-item>\n <ax-divider></ax-divider>\n }\n <ax-button-item\n [data]=\"'delete'\"\n [text]=\"('@general:actions.delete.title' | translate | async)!\"\n color=\"danger\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n </ax-prefix>\n </ax-button-item>\n </ax-button-item-list>\n </ng-container>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n }\n\n <!-- Title section -->\n @if(title()) {\n <div class=\"ps-5 pe-8 py-3 border-b\">\n <h3 class=\"text-start text-lg font-medium truncate\">{{title()}}</h3>\n </div>\n }\n\n <!-- Content section -->\n <div class=\"overflow-hidden flex-1 min-h-0 min-w-0\">\n <ng-content></ng-content>\n </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i3$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7840
8673
|
}
|
|
7841
8674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMDashboardWidgetWrapperComponent, decorators: [{
|
|
7842
8675
|
type: Component,
|
|
@@ -8038,7 +8871,7 @@ class AXMDashboardGridLayoutSectionComponent {
|
|
|
8038
8871
|
}
|
|
8039
8872
|
}
|
|
8040
8873
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMDashboardGridLayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8041
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMDashboardGridLayoutSectionComponent, isStandalone: true, selector: "axm-dashboard-grid-layout-section", inputs: { widgetsContext: { classPropertyName: "widgetsContext", publicName: "widgetsContext", isSignal: true, isRequired: false, transformFunction: null }, loadingVariant: { classPropertyName: "loadingVariant", publicName: "loadingVariant", isSignal: true, isRequired: false, transformFunction: null }, enableCanvasContextMenu: { classPropertyName: "enableCanvasContextMenu", publicName: "enableCanvasContextMenu", isSignal: true, isRequired: false, transformFunction: null }, isTenantDashboardReadOnly: { classPropertyName: "isTenantDashboardReadOnly", publicName: "isTenantDashboardReadOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addWidget: "addWidget", canvasContextMenuCommand: "canvasContextMenuCommand" }, viewQueries: [{ propertyName: "canvasContextMenu", first: true, predicate: ["canvasContextMenu"], descendants: true, isSignal: true }, { propertyName: "gridLayoutContainer", first: true, predicate: AXGridLayoutContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"axm-dashboard-grid-layout-section flex flex-col h-full min-h-0 w-full\"\n (contextmenu)=\"rememberContextMenuEvent($event)\"\n>\n @if (store.isLoading()) {\n @if (loadingVariant() === 'overlay') {\n <div\n class=\"flex flex-col items-center justify-center h-full w-full absolute z-10 bg-white/80\"\n >\n <ax-loading></ax-loading>\n <p class=\"mt-3 text-gray-600\">{{ '@dashboard:loading' | translate | async }}</p>\n </div>\n } @else {\n <div class=\"flex flex-col items-center justify-center h-full w-full flex-1\">\n <ax-loading></ax-loading>\n <p class=\"mt-3 text-gray-600\">{{ '@dashboard:loading' | translate | async }}</p>\n </div>\n }\n } @else if (!store.selectedDashboard()?.widgets?.length) {\n <div class=\"axm-dashboard-canvas-surface flex flex-col items-center justify-center h-full w-full flex-1 min-h-0\">\n <axp-state-message\n icon=\"fa-light fa-shapes\"\n [title]=\"'@dashboard:no-widgets.title'\"\n [description]=\"'@dashboard:no-widgets.description'\"\n >\n @if (!store.readonly()) {\n <div slot=\"actions\">\n <button type=\"button\" (click)=\"addWidget.emit()\" class=\"underline\">\n {{ '@dashboard:add-widget' | translate | async }}\n </button>\n </div>\n }\n </axp-state-message>\n </div>\n } @else {\n <axp-widgets-container [context]=\"widgetsContext()\">\n <ax-grid-layout-container\n class=\"axm-dashboard-canvas-surface w-full dark:[--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lighter-surface)] [--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lightest-surface)]\"\n [options]=\"store.currentLayoutOptions()\"\n (onChange)=\"store.onGridChange($event)\"\n (onRender)=\"refreshContextMenuBindings()\"\n >\n @for (widget of store.currentWidgets(); track widget.config.id) {\n <ax-grid-layout-widget [options]=\"widget.resolvedOptions\">\n @let title = (widget.node?.options?.['title'] ?? widget.config.title) | translate | async;\n @let isHeaderTitleVisible = widget.node?.meta?.['title']?.['visible'] ?? true;\n\n <div\n class=\"axm-dashboard-widget-grid-host flex flex-col h-full min-h-0\"\n [axmDashboardWidgetGridSize]=\"widget.resolvedOptions\"\n >\n <axm-dashboard-widget-wrapper\n [title]=\"isHeaderTitleVisible ? title! : null\"\n [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n [isLocked]=\"store.isWidgetLocked()(widget)\"\n (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()!.id, widget.config.id!)\"\n (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n (onValueChanged)=\"store.handleValueChanged($safeNavigationMigration(widget?.node)!, $event)\"\n (onOptionsChanged)=\"store.handleOptionsChanged($safeNavigationMigration(widget?.node)!, $event)\"\n >\n @if (widget.node) {\n <ng-container\n axp-widget-renderer\n [node]=\"widget.node\"\n [mode]=\"'view'\"\n (onOptionsChanged)=\"store.handleOptionsChanged(widget.node, $event.widget.options())\"\n (onValueChanged)=\"store.handleValueChanged(widget.node, $event.widget.getValue())\"\n ></ng-container>\n }\n </axm-dashboard-widget-wrapper>\n </div>\n </ax-grid-layout-widget>\n }\n </ax-grid-layout-container>\n </axp-widgets-container>\n }\n</div>\n\n@if (enableCanvasContextMenu()) {\n <ax-context-menu\n #canvasContextMenu\n [target]=\"'.axm-dashboard-canvas-surface'\"\n [orientation]=\"'vertical'\"\n [closeOn]=\"'leave'\"\n (onOpening)=\"handleCanvasContextMenuOpening($event)\"\n (onItemClick)=\"handleCanvasContextMenuItemClick($event)\"\n ></ax-context-menu>\n}\n", styles: ["@layer properties;axm-dashboard-grid-layout-section .grid-stack-placeholder.ax-grid-layout-resize-invalid>.placeholder-content,axm-dashboard-grid-layout-section .grid-stack-item.ui-resizable-resizing.ax-grid-layout-resize-invalid>.grid-stack-item-content{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-danger-surface));background-color:rgba(var(--ax-sys-color-danger-50))}@supports (color: color-mix(in lab,red,red)){axm-dashboard-grid-layout-section .grid-stack-placeholder.ax-grid-layout-resize-invalid>.placeholder-content,axm-dashboard-grid-layout-section .grid-stack-item.ui-resizable-resizing.ax-grid-layout-resize-invalid>.grid-stack-item-content{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-danger-50)) 40%,transparent)}}axm-dashboard-grid-layout-section ax-grid-layout-widget .grid-stack-item-content{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}axm-dashboard-grid-layout-section ax-grid-layout-widget .grid-stack-item-content:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.shortcut-container),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-kpi-stat-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-kpi-widget-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.sticky-note),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.weather-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-clock-calendar-card){overflow:hidden;border-radius:var(--radius-2xl, 1rem)}:is(axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.shortcut-container),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-kpi-stat-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-kpi-widget-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.sticky-note),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.weather-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-clock-calendar-card))>.grid-stack-item-content{--ax-comp-grid-layout-stack-item-content-bg-color: transparent;display:block!important;align-items:stretch!important;justify-content:stretch!important;border:none!important;box-shadow:none!important;background:transparent!important;background-color:transparent!important;overflow:hidden!important;border-radius:1rem!important}:is(axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.shortcut-container),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-kpi-stat-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-kpi-widget-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.sticky-note),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.weather-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-clock-calendar-card))>.grid-stack-item-content:hover{background:transparent!important;background-color:transparent!important;box-shadow:none!important}axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.sticky-note){border-radius:var(--ax-sys-border-radius, .5rem)}axm-dashboard-grid-layout-section axm-dashboard-widget-wrapper:has(.shortcut-container),axm-dashboard-grid-layout-section axm-dashboard-widget-wrapper:has(.axp-kpi-stat-card),axm-dashboard-grid-layout-section axm-dashboard-widget-wrapper:has(.axp-kpi-widget-card),axm-dashboard-grid-layout-section axm-dashboard-widget-wrapper:has(.sticky-note),axm-dashboard-grid-layout-section axm-dashboard-widget-wrapper:has(.weather-card),axm-dashboard-grid-layout-section axm-dashboard-widget-wrapper:has(.axp-clock-calendar-card){background:transparent!important}axm-dashboard-grid-layout-section .grid-stack-item>.ui-resizable-ne,axm-dashboard-grid-layout-section .grid-stack-item>.ui-resizable-nw,axm-dashboard-grid-layout-section .grid-stack-item>.ui-resizable-se,axm-dashboard-grid-layout-section .grid-stack-item>.ui-resizable-sw{background-color:transparent!important;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' viewBox='0 0 20 20'%3E%3Cpath d='m10 3 2 2H8l2-2v14l-2-2h4l-2 2'/%3E%3C/svg%3E\")!important}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i2$4.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i2$4.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "component", type: AXMDashboardWidgetWrapperComponent, selector: "axm-dashboard-widget-wrapper", inputs: ["title", "hasConfiguration", "isLocked"], outputs: ["onDelete", "onConfiguration"] }, { kind: "directive", type: AxmDashboardWidgetGridSizeDirective, selector: "[axmDashboardWidgetGridSize]", inputs: ["axmDashboardWidgetGridSize"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i4.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8874
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMDashboardGridLayoutSectionComponent, isStandalone: true, selector: "axm-dashboard-grid-layout-section", inputs: { widgetsContext: { classPropertyName: "widgetsContext", publicName: "widgetsContext", isSignal: true, isRequired: false, transformFunction: null }, loadingVariant: { classPropertyName: "loadingVariant", publicName: "loadingVariant", isSignal: true, isRequired: false, transformFunction: null }, enableCanvasContextMenu: { classPropertyName: "enableCanvasContextMenu", publicName: "enableCanvasContextMenu", isSignal: true, isRequired: false, transformFunction: null }, isTenantDashboardReadOnly: { classPropertyName: "isTenantDashboardReadOnly", publicName: "isTenantDashboardReadOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addWidget: "addWidget", canvasContextMenuCommand: "canvasContextMenuCommand" }, viewQueries: [{ propertyName: "canvasContextMenu", first: true, predicate: ["canvasContextMenu"], descendants: true, isSignal: true }, { propertyName: "gridLayoutContainer", first: true, predicate: AXGridLayoutContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"axm-dashboard-grid-layout-section flex flex-col h-full min-h-0 w-full\"\n (contextmenu)=\"rememberContextMenuEvent($event)\"\n>\n @if (store.isLoading()) {\n @if (loadingVariant() === 'overlay') {\n <div\n class=\"flex flex-col items-center justify-center h-full w-full absolute z-10 bg-white/80\"\n >\n <ax-loading></ax-loading>\n <p class=\"mt-3 text-gray-600\">{{ '@dashboard:loading' | translate | async }}</p>\n </div>\n } @else {\n <div class=\"flex flex-col items-center justify-center h-full w-full flex-1\">\n <ax-loading></ax-loading>\n <p class=\"mt-3 text-gray-600\">{{ '@dashboard:loading' | translate | async }}</p>\n </div>\n }\n } @else if (!store.selectedDashboard()?.widgets?.length) {\n <div class=\"axm-dashboard-canvas-surface flex flex-col items-center justify-center h-full w-full flex-1 min-h-0\">\n <axp-state-message\n icon=\"fa-light fa-shapes\"\n [title]=\"'@dashboard:no-widgets.title'\"\n [description]=\"'@dashboard:no-widgets.description'\"\n >\n @if (!store.readonly()) {\n <div slot=\"actions\">\n <button type=\"button\" (click)=\"addWidget.emit()\" class=\"underline\">\n {{ '@dashboard:add-widget' | translate | async }}\n </button>\n </div>\n }\n </axp-state-message>\n </div>\n } @else {\n <axp-widgets-container [context]=\"widgetsContext()\">\n <ax-grid-layout-container\n class=\"axm-dashboard-canvas-surface w-full dark:[--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lighter-surface)] [--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lightest-surface)]\"\n [options]=\"store.currentLayoutOptions()\"\n (onChange)=\"store.onGridChange($event)\"\n (onRender)=\"refreshContextMenuBindings()\"\n >\n @for (widget of store.currentWidgets(); track widget.config.id) {\n <ax-grid-layout-widget [options]=\"widget.resolvedOptions\">\n @let title = (widget.node?.options?.['title'] ?? widget.config.title) | translate | async;\n @let isHeaderTitleVisible = widget.node?.meta?.['title']?.['visible'] ?? true;\n\n <div\n class=\"axm-dashboard-widget-grid-host flex flex-col h-full min-h-0\"\n [axmDashboardWidgetGridSize]=\"widget.resolvedOptions\"\n >\n <axm-dashboard-widget-wrapper\n [title]=\"isHeaderTitleVisible ? title! : null\"\n [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n [isLocked]=\"store.isWidgetLocked()(widget)\"\n (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()!.id, widget.config.id!)\"\n (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n (onValueChanged)=\"store.handleValueChanged($safeNavigationMigration(widget?.node)!, $event)\"\n (onOptionsChanged)=\"store.handleOptionsChanged($safeNavigationMigration(widget?.node)!, $event)\"\n >\n @if (widget.node) {\n <ng-container\n axp-widget-renderer\n [node]=\"widget.node\"\n [mode]=\"'view'\"\n (onOptionsChanged)=\"store.handleOptionsChanged(widget.node, $event.widget.options())\"\n (onValueChanged)=\"store.handleValueChanged(widget.node, $event.widget.getValue())\"\n ></ng-container>\n }\n </axm-dashboard-widget-wrapper>\n </div>\n </ax-grid-layout-widget>\n }\n </ax-grid-layout-container>\n </axp-widgets-container>\n }\n</div>\n\n@if (enableCanvasContextMenu()) {\n <ax-context-menu\n #canvasContextMenu\n [target]=\"'.axm-dashboard-canvas-surface'\"\n [orientation]=\"'vertical'\"\n [closeOn]=\"'leave'\"\n (onOpening)=\"handleCanvasContextMenuOpening($event)\"\n (onItemClick)=\"handleCanvasContextMenuItemClick($event)\"\n ></ax-context-menu>\n}\n", styles: ["@layer properties;axm-dashboard-grid-layout-section .grid-stack-placeholder.ax-grid-layout-resize-invalid>.placeholder-content,axm-dashboard-grid-layout-section .grid-stack-item.ui-resizable-resizing.ax-grid-layout-resize-invalid>.grid-stack-item-content{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-danger-surface));background-color:rgba(var(--ax-sys-color-danger-50))}@supports (color: color-mix(in lab,red,red)){axm-dashboard-grid-layout-section .grid-stack-placeholder.ax-grid-layout-resize-invalid>.placeholder-content,axm-dashboard-grid-layout-section .grid-stack-item.ui-resizable-resizing.ax-grid-layout-resize-invalid>.grid-stack-item-content{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-danger-50)) 40%,transparent)}}axm-dashboard-grid-layout-section ax-grid-layout-widget .grid-stack-item-content{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}axm-dashboard-grid-layout-section ax-grid-layout-widget .grid-stack-item-content:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.shortcut-container),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-kpi-stat-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-kpi-widget-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.sticky-note),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.weather-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-clock-calendar-card){overflow:hidden;border-radius:var(--radius-2xl, 1rem)}:is(axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.shortcut-container),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-kpi-stat-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-kpi-widget-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.sticky-note),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.weather-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-clock-calendar-card))>.grid-stack-item-content{--ax-comp-grid-layout-stack-item-content-bg-color: transparent;display:block!important;align-items:stretch!important;justify-content:stretch!important;border:none!important;box-shadow:none!important;background:transparent!important;background-color:transparent!important;overflow:hidden!important;border-radius:1rem!important}:is(axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.shortcut-container),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-kpi-stat-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-kpi-widget-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.sticky-note),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.weather-card),axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.axp-clock-calendar-card))>.grid-stack-item-content:hover{background:transparent!important;background-color:transparent!important;box-shadow:none!important}axm-dashboard-grid-layout-section ax-grid-layout-widget:has(.sticky-note){border-radius:var(--ax-sys-border-radius, .5rem)}axm-dashboard-grid-layout-section axm-dashboard-widget-wrapper:has(.shortcut-container),axm-dashboard-grid-layout-section axm-dashboard-widget-wrapper:has(.axp-kpi-stat-card),axm-dashboard-grid-layout-section axm-dashboard-widget-wrapper:has(.axp-kpi-widget-card),axm-dashboard-grid-layout-section axm-dashboard-widget-wrapper:has(.sticky-note),axm-dashboard-grid-layout-section axm-dashboard-widget-wrapper:has(.weather-card),axm-dashboard-grid-layout-section axm-dashboard-widget-wrapper:has(.axp-clock-calendar-card){background:transparent!important}axm-dashboard-grid-layout-section .grid-stack-item>.ui-resizable-ne,axm-dashboard-grid-layout-section .grid-stack-item>.ui-resizable-nw,axm-dashboard-grid-layout-section .grid-stack-item>.ui-resizable-se,axm-dashboard-grid-layout-section .grid-stack-item>.ui-resizable-sw{background-color:transparent!important;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' viewBox='0 0 20 20'%3E%3Cpath d='m10 3 2 2H8l2-2v14l-2-2h4l-2 2'/%3E%3C/svg%3E\")!important}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i2$4.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i2$4.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "component", type: AXMDashboardWidgetWrapperComponent, selector: "axm-dashboard-widget-wrapper", inputs: ["title", "hasConfiguration", "isLocked"], outputs: ["onDelete", "onConfiguration"] }, { kind: "directive", type: AxmDashboardWidgetGridSizeDirective, selector: "[axmDashboardWidgetGridSize]", inputs: ["axmDashboardWidgetGridSize"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i4.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8042
8875
|
}
|
|
8043
8876
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMDashboardGridLayoutSectionComponent, decorators: [{
|
|
8044
8877
|
type: Component,
|
|
@@ -8310,6 +9143,8 @@ const DASHBOARD_WIDGETS = [
|
|
|
8310
9143
|
AXPEntityDashboardWidget,
|
|
8311
9144
|
AXPShortcutWidget,
|
|
8312
9145
|
AXPDonutChartWidget,
|
|
9146
|
+
AXPChartCardWidget,
|
|
9147
|
+
AXMChartConfiguratorWidget,
|
|
8313
9148
|
AXPBarChartWidget,
|
|
8314
9149
|
AXPLineChartWidget,
|
|
8315
9150
|
AXPFunnelChartWidget,
|
|
@@ -8454,7 +9289,7 @@ class AXMDashboardManagementModule {
|
|
|
8454
9289
|
useValue: dashboardScopeMiddleware,
|
|
8455
9290
|
multi: true,
|
|
8456
9291
|
},
|
|
8457
|
-
provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-platform-module-dashboard-management-client-index-
|
|
9292
|
+
provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-platform-module-dashboard-management-client-index-C1Te5cDf.mjs').then((m) => m.AXMDashboardLayoutPageComponentProvider)),
|
|
8458
9293
|
provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => Promise.resolve().then(function () { return entityDashboardPageComponent_provider; }).then((m) => m.AXMEntityDashboardPageComponentProvider)),
|
|
8459
9294
|
], imports: [AXPWidgetCoreModule] }); }
|
|
8460
9295
|
}
|
|
@@ -8511,7 +9346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
8511
9346
|
useValue: dashboardScopeMiddleware,
|
|
8512
9347
|
multi: true,
|
|
8513
9348
|
},
|
|
8514
|
-
provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-platform-module-dashboard-management-client-index-
|
|
9349
|
+
provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-platform-module-dashboard-management-client-index-C1Te5cDf.mjs').then((m) => m.AXMDashboardLayoutPageComponentProvider)),
|
|
8515
9350
|
provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => Promise.resolve().then(function () { return entityDashboardPageComponent_provider; }).then((m) => m.AXMEntityDashboardPageComponentProvider)),
|
|
8516
9351
|
],
|
|
8517
9352
|
}]
|
|
@@ -8750,7 +9585,7 @@ class AXMDashboardHomeComponent extends AXPPageLayoutBaseComponent {
|
|
|
8750
9585
|
provide: AXPPageLayoutBase,
|
|
8751
9586
|
useExisting: AXMDashboardHomeComponent,
|
|
8752
9587
|
},
|
|
8753
|
-
], viewQueries: [{ propertyName: "emptyStateCanvasContextMenu", first: true, predicate: ["emptyStateCanvasContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n <axp-page-content class=\"relative axm-dashboard-home-canvas\">\n @if (store.isLoading()) {\n <div class=\"axm-dashboard-home__skeleton w-full min-h-full\" aria-busy=\"true\" aria-live=\"polite\">\n <div class=\"axm-dashboard-home__skeleton-grid\">\n @for (widget of skeletonWidgets; track widget.id) {\n <article\n class=\"axm-dashboard-home__skeleton-widget\"\n [style.grid-area]=\"widget.area\"\n >\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-title\"></ax-skeleton>\n\n <div class=\"axm-dashboard-home__skeleton-body\">\n @switch (widget.variant) {\n @case ('list') {\n @for (row of skeletonListRows; track row) {\n <div class=\"axm-dashboard-home__skeleton-list-row\">\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-avatar\"></ax-skeleton>\n <div class=\"axm-dashboard-home__skeleton-list-text\">\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-line axm-dashboard-home__skeleton-line--wide\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-line axm-dashboard-home__skeleton-line--narrow\"></ax-skeleton>\n </div>\n </div>\n }\n }\n @case ('compact') {\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-circle\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-line axm-dashboard-home__skeleton-line--medium\"></ax-skeleton>\n }\n @case ('action') {\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-action\"></ax-skeleton>\n }\n }\n </div>\n </article>\n }\n </div>\n </div>\n } @else if (!store.dashboards().length) {\n <div class=\"axm-dashboard-canvas-surface flex flex-col items-center justify-center h-full w-full min-h-full\">\n <axp-state-message\n icon=\"fa-light fa-shapes\"\n [title]=\"'@dashboard:empty-state.title'\"\n [description]=\"'@dashboard:empty-state.description'\"\n >\n <div slot=\"actions\">\n <button type=\"button\" (click)=\"execute({ name: 'new-dashboard' })\" class=\"underline\">\n {{ '@dashboard:add-first-dashboard' | translate | async }}\n </button>\n </div>\n </axp-state-message>\n </div>\n } @else {\n <axm-dashboard-grid-layout-section\n [widgetsContext]=\"context()\"\n [loadingVariant]=\"'overlay'\"\n [enableCanvasContextMenu]=\"true\"\n [isTenantDashboardReadOnly]=\"isTenantDashboardReadOnlyForCurrentUser()\"\n (addWidget)=\"execute({ name: 'new-widget' })\"\n (canvasContextMenuCommand)=\"execute({ name: $event.name })\"\n ></axm-dashboard-grid-layout-section>\n }\n </axp-page-content>\n</axp-page-layout>\n\n@if (!store.isLoading() && !store.dashboards().length) {\n <ax-context-menu\n #emptyStateCanvasContextMenu\n [target]=\"'.axm-dashboard-canvas-surface'\"\n [orientation]=\"'vertical'\"\n [closeOn]=\"'leave'\"\n (onOpening)=\"handleDashboardContextMenuOpening($event)\"\n (onItemClick)=\"handleDashboardContextMenuItemClick($event)\"\n ></ax-context-menu>\n}\n", styles: ["@layer properties;axm-dashboard-home{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axm-dashboard-home .placeholder-content{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){axm-dashboard-home .placeholder-content{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 50%,transparent)}}axm-dashboard-home .grid-stack-placeholder.ax-grid-layout-resize-invalid>.placeholder-content,axm-dashboard-home .grid-stack-item.ui-resizable-resizing.ax-grid-layout-resize-invalid>.grid-stack-item-content{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-danger-surface));background-color:rgba(var(--ax-sys-color-danger-50))}@supports (color: color-mix(in lab,red,red)){axm-dashboard-home .grid-stack-placeholder.ax-grid-layout-resize-invalid>.placeholder-content,axm-dashboard-home .grid-stack-item.ui-resizable-resizing.ax-grid-layout-resize-invalid>.grid-stack-item-content{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-danger-50)) 40%,transparent)}}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{display:block;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axm-dashboard-home ax-grid-layout-widget:has(.shortcut-container),axm-dashboard-home ax-grid-layout-widget:has(.axp-kpi-stat-card),axm-dashboard-home ax-grid-layout-widget:has(.axp-kpi-widget-card),axm-dashboard-home ax-grid-layout-widget:has(.sticky-note),axm-dashboard-home ax-grid-layout-widget:has(.weather-card),axm-dashboard-home ax-grid-layout-widget:has(.axp-clock-calendar-card){overflow:hidden;border-radius:var(--radius-2xl, 1rem)}:is(axm-dashboard-home ax-grid-layout-widget:has(.shortcut-container),axm-dashboard-home ax-grid-layout-widget:has(.axp-kpi-stat-card),axm-dashboard-home ax-grid-layout-widget:has(.axp-kpi-widget-card),axm-dashboard-home ax-grid-layout-widget:has(.sticky-note),axm-dashboard-home ax-grid-layout-widget:has(.weather-card),axm-dashboard-home ax-grid-layout-widget:has(.axp-clock-calendar-card))>.grid-stack-item-content{--ax-comp-grid-layout-stack-item-content-bg-color: transparent;display:block!important;align-items:stretch!important;justify-content:stretch!important;border:none!important;box-shadow:none!important;background:transparent!important;background-color:transparent!important;overflow:hidden!important;border-radius:1rem!important}:is(axm-dashboard-home ax-grid-layout-widget:has(.shortcut-container),axm-dashboard-home ax-grid-layout-widget:has(.axp-kpi-stat-card),axm-dashboard-home ax-grid-layout-widget:has(.axp-kpi-widget-card),axm-dashboard-home ax-grid-layout-widget:has(.sticky-note),axm-dashboard-home ax-grid-layout-widget:has(.weather-card),axm-dashboard-home ax-grid-layout-widget:has(.axp-clock-calendar-card))>.grid-stack-item-content:hover{background:transparent!important;background-color:transparent!important;box-shadow:none!important}axm-dashboard-home ax-grid-layout-widget:has(.sticky-note){border-radius:var(--ax-sys-border-radius, .5rem)}axm-dashboard-home axm-dashboard-widget-wrapper:has(.shortcut-container),axm-dashboard-home axm-dashboard-widget-wrapper:has(.axp-kpi-stat-card),axm-dashboard-home axm-dashboard-widget-wrapper:has(.axp-kpi-widget-card),axm-dashboard-home axm-dashboard-widget-wrapper:has(.sticky-note),axm-dashboard-home axm-dashboard-widget-wrapper:has(.weather-card),axm-dashboard-home axm-dashboard-widget-wrapper:has(.axp-clock-calendar-card){background:transparent!important}axm-dashboard-home .grid-stack-item>.ui-resizable-ne,axm-dashboard-home .grid-stack-item>.ui-resizable-nw,axm-dashboard-home .grid-stack-item>.ui-resizable-se,axm-dashboard-home .grid-stack-item>.ui-resizable-sw{background-color:transparent!important;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' viewBox='0 0 20 20'%3E%3Cpath d='m10 3 2 2H8l2-2v14l-2-2h4l-2 2'/%3E%3C/svg%3E\")!important}axm-dashboard-home .dashboard-home__skeleton-grid{display:grid;gap:calc(var(--spacing, .25rem) * 4);padding:calc(var(--spacing, .25rem) * 4);grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(5,minmax(72px,auto));grid-template-areas:\"clock clock clock tasks tasks tasks tasks tasks notifications notifications notifications notifications\" \"clock clock clock tasks tasks tasks tasks tasks notifications notifications notifications notifications\" \"action action action tasks tasks tasks tasks tasks notifications notifications notifications notifications\" \"notes notes notes tasks tasks tasks tasks tasks notifications notifications notifications notifications\" \"notes notes notes tasks tasks tasks tasks tasks notifications notifications notifications notifications\"}axm-dashboard-home .dashboard-home__skeleton-widget{display:flex;min-height:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}axm-dashboard-home .dashboard-home__skeleton-title{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 32);max-width:100%;border-radius:.25rem}axm-dashboard-home .dashboard-home__skeleton-body{display:flex;min-height:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axm-dashboard-home .dashboard-home__skeleton-list-row{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}axm-dashboard-home .dashboard-home__skeleton-avatar{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);flex-shrink:0;border-radius:calc(infinity * 1px)}axm-dashboard-home .dashboard-home__skeleton-list-text{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}axm-dashboard-home .dashboard-home__skeleton-line{height:calc(var(--spacing, .25rem) * 3);border-radius:.25rem}axm-dashboard-home .dashboard-home__skeleton-line--wide{width:100%}axm-dashboard-home .dashboard-home__skeleton-line--medium{width:calc(2 / 3 * 100%)}axm-dashboard-home .dashboard-home__skeleton-line--narrow{width:calc(3 / 5 * 100%)}axm-dashboard-home .dashboard-home__skeleton-circle{width:calc(var(--spacing, .25rem) * 16);height:calc(var(--spacing, .25rem) * 16);border-radius:calc(infinity * 1px)}axm-dashboard-home .dashboard-home__skeleton-action{height:calc(var(--spacing, .25rem) * 10);width:100%;border-radius:var(--radius-lg, .5rem)}@media(max-width:768px){axm-dashboard-home .dashboard-home__skeleton-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto;grid-template-areas:\"clock clock clock notes notes notes\" \"action action action notes notes notes\" \"tasks tasks tasks tasks tasks tasks\" \"notifications notifications notifications notifications notifications notifications\"}}@media(max-width:480px){axm-dashboard-home .dashboard-home__skeleton-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:\"clock\" \"action\" \"tasks\" \"notifications\" \"notes\"}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1$4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: " axp-page-content, axp-page-footer-container, axp-page-footer, axp-page-header, axp-page-header-container, axp-page-toolbar, axp-layout-content, axp-layout-page-content, axp-layout-sections, axp-layout-body, axp-layout-page-body, axp-layout-prefix, axp-layout-suffix, axp-layout-title-bar, axp-layout-title, axp-layout-title-actions, axp-layout-nav-button, axp-layout-description, axp-layout-breadcrumbs, axp-layout-list-action, " }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: AXMDashboardGridLayoutSectionComponent, selector: "axm-dashboard-grid-layout-section", inputs: ["widgetsContext", "loadingVariant", "enableCanvasContextMenu", "isTenantDashboardReadOnly"], outputs: ["addWidget", "canvasContextMenuCommand"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i4.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9588
|
+
], viewQueries: [{ propertyName: "emptyStateCanvasContextMenu", first: true, predicate: ["emptyStateCanvasContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n <axp-page-content class=\"relative axm-dashboard-home-canvas\">\n @if (store.isLoading()) {\n <div class=\"axm-dashboard-home__skeleton w-full min-h-full\" aria-busy=\"true\" aria-live=\"polite\">\n <div class=\"axm-dashboard-home__skeleton-grid\">\n @for (widget of skeletonWidgets; track widget.id) {\n <article\n class=\"axm-dashboard-home__skeleton-widget\"\n [style.grid-area]=\"widget.area\"\n >\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-title\"></ax-skeleton>\n\n <div class=\"axm-dashboard-home__skeleton-body\">\n @switch (widget.variant) {\n @case ('list') {\n @for (row of skeletonListRows; track row) {\n <div class=\"axm-dashboard-home__skeleton-list-row\">\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-avatar\"></ax-skeleton>\n <div class=\"axm-dashboard-home__skeleton-list-text\">\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-line axm-dashboard-home__skeleton-line--wide\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-line axm-dashboard-home__skeleton-line--narrow\"></ax-skeleton>\n </div>\n </div>\n }\n }\n @case ('compact') {\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-circle\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-line axm-dashboard-home__skeleton-line--medium\"></ax-skeleton>\n }\n @case ('action') {\n <ax-skeleton [animated]=\"true\" class=\"axm-dashboard-home__skeleton-action\"></ax-skeleton>\n }\n }\n </div>\n </article>\n }\n </div>\n </div>\n } @else if (!store.dashboards().length) {\n <div class=\"axm-dashboard-canvas-surface flex flex-col items-center justify-center h-full w-full min-h-full\">\n <axp-state-message\n icon=\"fa-light fa-shapes\"\n [title]=\"'@dashboard:empty-state.title'\"\n [description]=\"'@dashboard:empty-state.description'\"\n >\n <div slot=\"actions\">\n <button type=\"button\" (click)=\"execute({ name: 'new-dashboard' })\" class=\"underline\">\n {{ '@dashboard:add-first-dashboard' | translate | async }}\n </button>\n </div>\n </axp-state-message>\n </div>\n } @else {\n <axm-dashboard-grid-layout-section\n [widgetsContext]=\"context()\"\n [loadingVariant]=\"'overlay'\"\n [enableCanvasContextMenu]=\"true\"\n [isTenantDashboardReadOnly]=\"isTenantDashboardReadOnlyForCurrentUser()\"\n (addWidget)=\"execute({ name: 'new-widget' })\"\n (canvasContextMenuCommand)=\"execute({ name: $event.name })\"\n ></axm-dashboard-grid-layout-section>\n }\n </axp-page-content>\n</axp-page-layout>\n\n@if (!store.isLoading() && !store.dashboards().length) {\n <ax-context-menu\n #emptyStateCanvasContextMenu\n [target]=\"'.axm-dashboard-canvas-surface'\"\n [orientation]=\"'vertical'\"\n [closeOn]=\"'leave'\"\n (onOpening)=\"handleDashboardContextMenuOpening($event)\"\n (onItemClick)=\"handleDashboardContextMenuItemClick($event)\"\n ></ax-context-menu>\n}\n", styles: ["@layer properties;axm-dashboard-home{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axm-dashboard-home .placeholder-content{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){axm-dashboard-home .placeholder-content{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 50%,transparent)}}axm-dashboard-home .grid-stack-placeholder.ax-grid-layout-resize-invalid>.placeholder-content,axm-dashboard-home .grid-stack-item.ui-resizable-resizing.ax-grid-layout-resize-invalid>.grid-stack-item-content{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-danger-surface));background-color:rgba(var(--ax-sys-color-danger-50))}@supports (color: color-mix(in lab,red,red)){axm-dashboard-home .grid-stack-placeholder.ax-grid-layout-resize-invalid>.placeholder-content,axm-dashboard-home .grid-stack-item.ui-resizable-resizing.ax-grid-layout-resize-invalid>.grid-stack-item-content{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-danger-50)) 40%,transparent)}}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{display:block;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axm-dashboard-home ax-grid-layout-widget:has(.shortcut-container),axm-dashboard-home ax-grid-layout-widget:has(.axp-kpi-stat-card),axm-dashboard-home ax-grid-layout-widget:has(.axp-kpi-widget-card),axm-dashboard-home ax-grid-layout-widget:has(.sticky-note),axm-dashboard-home ax-grid-layout-widget:has(.weather-card),axm-dashboard-home ax-grid-layout-widget:has(.axp-clock-calendar-card){overflow:hidden;border-radius:var(--radius-2xl, 1rem)}:is(axm-dashboard-home ax-grid-layout-widget:has(.shortcut-container),axm-dashboard-home ax-grid-layout-widget:has(.axp-kpi-stat-card),axm-dashboard-home ax-grid-layout-widget:has(.axp-kpi-widget-card),axm-dashboard-home ax-grid-layout-widget:has(.sticky-note),axm-dashboard-home ax-grid-layout-widget:has(.weather-card),axm-dashboard-home ax-grid-layout-widget:has(.axp-clock-calendar-card))>.grid-stack-item-content{--ax-comp-grid-layout-stack-item-content-bg-color: transparent;display:block!important;align-items:stretch!important;justify-content:stretch!important;border:none!important;box-shadow:none!important;background:transparent!important;background-color:transparent!important;overflow:hidden!important;border-radius:1rem!important}:is(axm-dashboard-home ax-grid-layout-widget:has(.shortcut-container),axm-dashboard-home ax-grid-layout-widget:has(.axp-kpi-stat-card),axm-dashboard-home ax-grid-layout-widget:has(.axp-kpi-widget-card),axm-dashboard-home ax-grid-layout-widget:has(.sticky-note),axm-dashboard-home ax-grid-layout-widget:has(.weather-card),axm-dashboard-home ax-grid-layout-widget:has(.axp-clock-calendar-card))>.grid-stack-item-content:hover{background:transparent!important;background-color:transparent!important;box-shadow:none!important}axm-dashboard-home ax-grid-layout-widget:has(.sticky-note){border-radius:var(--ax-sys-border-radius, .5rem)}axm-dashboard-home axm-dashboard-widget-wrapper:has(.shortcut-container),axm-dashboard-home axm-dashboard-widget-wrapper:has(.axp-kpi-stat-card),axm-dashboard-home axm-dashboard-widget-wrapper:has(.axp-kpi-widget-card),axm-dashboard-home axm-dashboard-widget-wrapper:has(.sticky-note),axm-dashboard-home axm-dashboard-widget-wrapper:has(.weather-card),axm-dashboard-home axm-dashboard-widget-wrapper:has(.axp-clock-calendar-card){background:transparent!important}axm-dashboard-home .grid-stack-item>.ui-resizable-ne,axm-dashboard-home .grid-stack-item>.ui-resizable-nw,axm-dashboard-home .grid-stack-item>.ui-resizable-se,axm-dashboard-home .grid-stack-item>.ui-resizable-sw{background-color:transparent!important;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' viewBox='0 0 20 20'%3E%3Cpath d='m10 3 2 2H8l2-2v14l-2-2h4l-2 2'/%3E%3C/svg%3E\")!important}axm-dashboard-home .dashboard-home__skeleton-grid{display:grid;gap:calc(var(--spacing, .25rem) * 4);padding:calc(var(--spacing, .25rem) * 4);grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(5,minmax(72px,auto));grid-template-areas:\"clock clock clock tasks tasks tasks tasks tasks notifications notifications notifications notifications\" \"clock clock clock tasks tasks tasks tasks tasks notifications notifications notifications notifications\" \"action action action tasks tasks tasks tasks tasks notifications notifications notifications notifications\" \"notes notes notes tasks tasks tasks tasks tasks notifications notifications notifications notifications\" \"notes notes notes tasks tasks tasks tasks tasks notifications notifications notifications notifications\"}axm-dashboard-home .dashboard-home__skeleton-widget{display:flex;min-height:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}axm-dashboard-home .dashboard-home__skeleton-title{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 32);max-width:100%;border-radius:.25rem}axm-dashboard-home .dashboard-home__skeleton-body{display:flex;min-height:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axm-dashboard-home .dashboard-home__skeleton-list-row{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}axm-dashboard-home .dashboard-home__skeleton-avatar{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);flex-shrink:0;border-radius:calc(infinity * 1px)}axm-dashboard-home .dashboard-home__skeleton-list-text{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}axm-dashboard-home .dashboard-home__skeleton-line{height:calc(var(--spacing, .25rem) * 3);border-radius:.25rem}axm-dashboard-home .dashboard-home__skeleton-line--wide{width:100%}axm-dashboard-home .dashboard-home__skeleton-line--medium{width:calc(2 / 3 * 100%)}axm-dashboard-home .dashboard-home__skeleton-line--narrow{width:calc(3 / 5 * 100%)}axm-dashboard-home .dashboard-home__skeleton-circle{width:calc(var(--spacing, .25rem) * 16);height:calc(var(--spacing, .25rem) * 16);border-radius:calc(infinity * 1px)}axm-dashboard-home .dashboard-home__skeleton-action{height:calc(var(--spacing, .25rem) * 10);width:100%;border-radius:var(--radius-lg, .5rem)}@media(max-width:768px){axm-dashboard-home .dashboard-home__skeleton-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto;grid-template-areas:\"clock clock clock notes notes notes\" \"action action action notes notes notes\" \"tasks tasks tasks tasks tasks tasks\" \"notifications notifications notifications notifications notifications notifications\"}}@media(max-width:480px){axm-dashboard-home .dashboard-home__skeleton-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:\"clock\" \"action\" \"tasks\" \"notifications\" \"notes\"}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1$4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: " axp-page-content, axp-page-footer-container, axp-page-footer, axp-page-header, axp-page-header-container, axp-page-toolbar, axp-layout-content, axp-layout-page-content, axp-layout-sections, axp-layout-body, axp-layout-page-body, axp-layout-prefix, axp-layout-suffix, axp-layout-title-bar, axp-layout-title, axp-layout-title-actions, axp-layout-nav-button, axp-layout-description, axp-layout-breadcrumbs, axp-layout-list-action, " }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: AXMDashboardGridLayoutSectionComponent, selector: "axm-dashboard-grid-layout-section", inputs: ["widgetsContext", "loadingVariant", "enableCanvasContextMenu", "isTenantDashboardReadOnly"], outputs: ["addWidget", "canvasContextMenuCommand"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i4.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8754
9589
|
}
|
|
8755
9590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMDashboardHomeComponent, decorators: [{
|
|
8756
9591
|
type: Component,
|
|
@@ -8790,7 +9625,7 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
|
|
|
8790
9625
|
this.scope = RootConfig.config.i18n;
|
|
8791
9626
|
this.entityService = inject(AXPEntityService);
|
|
8792
9627
|
this.jobDefinitionData = this.entityService
|
|
8793
|
-
.withEntity(RootConfig$
|
|
9628
|
+
.withEntity(RootConfig$3.module.name, RootConfig$3.entities.jobDefinition.name)
|
|
8794
9629
|
.data();
|
|
8795
9630
|
this.sessionService = inject(AXPSessionService);
|
|
8796
9631
|
this.multiLanguageResolver = inject(AXTranslationService);
|
|
@@ -8957,7 +9792,7 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
|
|
|
8957
9792
|
</ax-button>
|
|
8958
9793
|
</ax-suffix>
|
|
8959
9794
|
</ax-footer>
|
|
8960
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "
|
|
9795
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3$3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i5.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8961
9796
|
}
|
|
8962
9797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMAddDashboardPopup, decorators: [{
|
|
8963
9798
|
type: Component,
|
|
@@ -9054,5 +9889,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
9054
9889
|
* Generated bundle index. Do not edit.
|
|
9055
9890
|
*/
|
|
9056
9891
|
|
|
9057
|
-
export {
|
|
9058
|
-
//# sourceMappingURL=acorex-platform-module-dashboard-management-client-acorex-platform-module-dashboard-management-client-
|
|
9892
|
+
export { AXP_DASHBOARD_SHARED_SUB_UTILITY_SHORTCUT as $, AXMDashboardStore as A, AXPHeatmapChartWidgetViewComponent as B, AXPKpiDetailsWidget as C, DASHBOARD_LAYOUT_ENTITY_MODE as D, AXPKpiDetailsWidgetViewComponent as E, AXPKpiProgressWidget as F, AXPKpiProgressWidgetViewComponent as G, AXPKpiSegmentedWidget as H, AXPKpiSegmentedWidgetViewComponent as I, AXPKpiStatCardWidget as J, AXPKpiStatCardWidgetViewComponent as K, AXPLineChartWidget as L, AXPLineChartWidgetViewComponent as M, AXPShortcutWidget as N, AXPShortcutWidgetViewComponent as O, AXPStickyNoteWidget as P, AXPStickyNoteWidgetViewComponent as Q, AXP_CHART_CONFIGURATOR_DEFAULT_TYPE as R, AXP_CHART_FUNNEL_DIMENSIONS as S, AXP_CHART_GAUGE_DIMENSIONS as T, AXP_CHART_SQUARE_DIMENSIONS as U, AXP_CHART_WIDE_DIMENSIONS as V, AXP_DASHBOARD_SHARED_SUB_CHART_CARTESIAN as W, AXP_DASHBOARD_SHARED_SUB_CHART_KPI as X, AXP_DASHBOARD_SHARED_SUB_CHART_RADIAL as Y, AXP_DASHBOARD_SHARED_SUB_CHART_SPECIALIZED as Z, AXP_DASHBOARD_SHARED_SUB_UTILITY_NOTES as _, AXMDashboardGridLayoutSectionComponent as a, stripHtmlToPlainText as a$, AXP_DASHBOARD_SHARED_SUB_UTILITY_TIME as a0, AXP_DASHBOARD_SHARED_SUB_UTILITY_WEATHER as a1, AXP_KPI_DETAILS_DIMENSIONS as a2, DASHBOARD_WIDGET_GRID_HEIGHT_OPTION as a3, DASHBOARD_WIDGET_GRID_WIDTH_OPTION as a4, AXP_KPI_PROGRESS_SEGMENTED_DIMENSIONS as a5, AXP_KPI_STANDARD_DIMENSIONS as a6, AXP_KPI_STAT_CARD_DIMENSIONS as a7, AXP_UTILITY_CLOCK_CALENDAR_DIMENSIONS as a8, AXP_UTILITY_COMPACT_SQUARE_DIMENSIONS as a9, hasKpiQueryConfigured as aA, isChartTabConfigured as aB, isStickyNoteEmpty as aC, layoutFromDimensions as aD, loadKpiQueryResult as aE, normalizeKpiPercent as aF, optionsAfterChartTypeSwitch as aG, readChartTabQuery as aH, readChartTabTitle as aI, readDashboardEntityContext as aJ, readDashboardGridSizeToken as aK, readStashedChartAppearance as aL, resolveDashboardLayoutNode as aM, resolveDashboardMetaDimensionsForBreakpoint as aN, resolveDashboardMetaLayoutNode as aO, resolveKpiIconToneTheme as aP, resolveKpiIconToneValueColor as aQ, resolveKpiProgressBarTone as aR, resolveKpiSegmentPaletteColor as aS, resolveKpiText as aT, resolveStickyNoteBackgroundColor as aU, resolveStickyNoteLayoutVariant as aV, resolveStickyNoteMutedTextColor as aW, resolveStickyNoteText as aX, resolveStickyNoteTextColor as aY, resolveTimeZoneCode as aZ, shouldShowStickyNoteEmptyHint as a_, AXP_UTILITY_SHORTCUT_DIMENSIONS as aa, AXP_UTILITY_WEATHER_DIMENSIONS as ab, AXP_WIDGETS_CHART_CATEGORY as ac, AXP_WIDGETS_UTILITY_CATEGORY as ad, STICKY_NOTE_COLOR_PRESETS as ae, STICKY_NOTE_DEFAULT_BACKGROUND as af, areChartCardTabsConfigured as ag, asChartTabWidgetNode as ah, buildDashboardChartCardWidget as ai, buildDashboardChartWidget as aj, buildDashboardChartWidgetWithQuery as ak, buildDashboardClockCalendar as al, buildDashboardKpiStatCard as am, buildDashboardKpiTile as an, buildDashboardShortcut as ao, buildDashboardStickyNote as ap, buildDashboardWeatherWidget as aq, buildDashboardWidgetsContext as ar, chartResultTypeForWidget as as, chartTypeUsesAxisLabels as at, defineDashboardWidgetDimensions as au, enrichDashboardLayoutNode as av, formatDashboardGridSizeToken as aw, formatKpiValue as ax, formatUtcOffsetLabel as ay, getIanaTimeZoneOffsetMinutes as az, AXMAddDashboardPopup as b, withDashboardGridSizeOptions as b0, AXMChartConfiguratorComponent as c, AXMChartConfiguratorWidget as d, AXMChartConfiguratorWidgetColumnComponent as e, AXMChartConfiguratorWidgetEditComponent as f, AXMConfigurationPopup as g, AXMDashboardHomeComponent as h, AXMDashboardManagementModule as i, AXMDashboardPopupService as j, AXMDashboardWidgetWrapperComponent as k, AXPBarChartWidget as l, AXPBarChartWidgetViewComponent as m, AXPChartCardWidget as n, AXPChartCardWidgetViewComponent as o, AXPClockCalendarWidget as p, AXPClockCalendarWidgetViewComponent as q, AXPDASHBOARD_ENTITY_CONTEXT_KEY as r, AXPDashboardWidgetComponent as s, AXPDonutChartWidget as t, AXPDonutChartWidgetViewComponent as u, AXPFunnelChartWidget as v, AXPFunnelChartWidgetViewComponent as w, AXPGaugeChartWidget as x, AXPGaugeChartWidgetViewComponent as y, AXPHeatmapChartWidget as z };
|
|
9893
|
+
//# sourceMappingURL=acorex-platform-module-dashboard-management-client-acorex-platform-module-dashboard-management-client-BUmHWNqL.mjs.map
|