codexly-ui 0.15.5 → 0.15.7
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/codexly-ui.mjs +94 -76
- package/fesm2022/codexly-ui.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2022/codexly-ui.mjs
CHANGED
|
@@ -15957,8 +15957,14 @@ class ClxStatCardComponent {
|
|
|
15957
15957
|
_hostClass = computed(() => {
|
|
15958
15958
|
const border = resolveColor(this.color()).borderLight;
|
|
15959
15959
|
const radius = resolveContainerRadius(this._themeSvc.config().borderRadius);
|
|
15960
|
-
|
|
15961
|
-
|
|
15960
|
+
// h-full so every layout fills whatever height its parent grid cell actually gives it, instead
|
|
15961
|
+
// of only growing to fit its own content — otherwise two cards of the same grid size look like
|
|
15962
|
+
// different heights depending on which of the 3 layouts got picked for each.
|
|
15963
|
+
const base = `bg-clx-surface ${radius} shadow-md border ${border} p-4 w-full h-full overflow-hidden min-w-[200px]`;
|
|
15964
|
+
// horizontal stacks its title row above its icon/value/sparkline row (flex-col); vertical/bar
|
|
15965
|
+
// keep a single side-by-side row (flex items-center) as before.
|
|
15966
|
+
const layoutCls = this.layout() === 'horizontal' ? 'flex flex-col gap-2' : 'flex items-center gap-3';
|
|
15967
|
+
return `${layoutCls} ${base}`;
|
|
15962
15968
|
}, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
|
|
15963
15969
|
_barHeights = computed(() => {
|
|
15964
15970
|
const data = this.chartData();
|
|
@@ -16048,51 +16054,57 @@ class ClxStatCardComponent {
|
|
|
16048
16054
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxStatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16049
16055
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxStatCardComponent, isStandalone: true, selector: "clx-stat-card", inputs: { metric: { classPropertyName: "metric", publicName: "metric", isSignal: true, isRequired: true, transformFunction: null }, chartData: { classPropertyName: "chartData", publicName: "chartData", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
|
|
16050
16056
|
@if (layout() === 'horizontal') {
|
|
16051
|
-
<!--
|
|
16052
|
-
|
|
16053
|
-
|
|
16057
|
+
<!-- Title: its own full-width row, so a long label never fights the icon/value/sparkline
|
|
16058
|
+
row for space and never truncates. -->
|
|
16059
|
+
<div class="w-full">
|
|
16060
|
+
<span class="text-xs text-clx-text-muted">{{ metric().title }}</span>
|
|
16054
16061
|
</div>
|
|
16055
16062
|
|
|
16056
|
-
<!--
|
|
16057
|
-
<div class="flex
|
|
16058
|
-
<
|
|
16059
|
-
|
|
16060
|
-
|
|
16061
|
-
|
|
16062
|
-
|
|
16063
|
-
<span clx-
|
|
16064
|
-
|
|
16065
|
-
variant="light"
|
|
16066
|
-
shape="pill"
|
|
16067
|
-
class="self-start gap-1 mt-0.5">
|
|
16068
|
-
<span clx-icon [name]="_trendIcon()" size="xxs"></span>
|
|
16069
|
-
{{ metric().trend }}
|
|
16063
|
+
<!-- Icon + value/trend + sparkline, second row -->
|
|
16064
|
+
<div class="w-full flex items-center gap-3">
|
|
16065
|
+
<div class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" [class]="_iconBg()">
|
|
16066
|
+
<span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
|
|
16067
|
+
</div>
|
|
16068
|
+
|
|
16069
|
+
<div class="flex flex-col gap-0.5 min-w-0 flex-1">
|
|
16070
|
+
<span class="text-xl font-semibold text-clx-text leading-tight">
|
|
16071
|
+
{{ _formattedValue() }}
|
|
16070
16072
|
</span>
|
|
16071
|
-
|
|
16072
|
-
|
|
16073
|
+
@if (_hasTrend()) {
|
|
16074
|
+
<span clx-badge
|
|
16075
|
+
[color]="_trendColor()"
|
|
16076
|
+
variant="light"
|
|
16077
|
+
shape="pill"
|
|
16078
|
+
class="self-start gap-1 mt-0.5">
|
|
16079
|
+
<span clx-icon [name]="_trendIcon()" size="xxs"></span>
|
|
16080
|
+
{{ metric().trend }}
|
|
16081
|
+
</span>
|
|
16082
|
+
}
|
|
16083
|
+
</div>
|
|
16073
16084
|
|
|
16074
|
-
|
|
16075
|
-
|
|
16076
|
-
|
|
16077
|
-
|
|
16078
|
-
|
|
16079
|
-
|
|
16080
|
-
|
|
16081
|
-
|
|
16082
|
-
|
|
16083
|
-
|
|
16084
|
-
|
|
16085
|
-
|
|
16086
|
-
|
|
16087
|
-
|
|
16085
|
+
<!-- Sparkline -->
|
|
16086
|
+
<div style="flex: 0 0 64px; height: 48px; position: relative; overflow: hidden;">
|
|
16087
|
+
<svg style="position: absolute; inset: 0; width: 100%; height: 100%;"
|
|
16088
|
+
viewBox="0 0 140 64" preserveAspectRatio="none">
|
|
16089
|
+
<defs>
|
|
16090
|
+
<linearGradient [attr.id]="_gradId()" x1="0" y1="0" x2="0" y2="1">
|
|
16091
|
+
<stop offset="0%" [attr.stop-color]="_lineColor()" stop-opacity="0.22"/>
|
|
16092
|
+
<stop offset="100%" [attr.stop-color]="_lineColor()" stop-opacity="0.02"/>
|
|
16093
|
+
</linearGradient>
|
|
16094
|
+
</defs>
|
|
16095
|
+
<path [attr.d]="_fillPath()" [attr.fill]="'url(#' + _gradId() + ')'" stroke="none"/>
|
|
16096
|
+
<path [attr.d]="_linePath()" [attr.stroke]="_lineColor()" stroke-width="2.5"
|
|
16097
|
+
fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
16098
|
+
</svg>
|
|
16099
|
+
</div>
|
|
16088
16100
|
</div>
|
|
16089
16101
|
}
|
|
16090
16102
|
|
|
16091
16103
|
@if (layout() === 'bar') {
|
|
16092
16104
|
<!-- Col izquierda: ícono circular + título + valor -->
|
|
16093
16105
|
<div class="flex flex-col gap-1 min-w-0 flex-1">
|
|
16094
|
-
<div class="w-
|
|
16095
|
-
<span clx-icon [name]="metric().icon" size="
|
|
16106
|
+
<div class="w-10 h-10 rounded-full flex items-center justify-center mb-2" [class]="_iconBgSubtle()">
|
|
16107
|
+
<span clx-icon [name]="metric().icon" size="sm" [class]="_iconTextBase()"></span>
|
|
16096
16108
|
</div>
|
|
16097
16109
|
<span class="text-sm text-clx-text-muted truncate">{{ metric().title }}</span>
|
|
16098
16110
|
<span class="text-2xl font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
|
|
@@ -16138,8 +16150,8 @@ class ClxStatCardComponent {
|
|
|
16138
16150
|
</div>
|
|
16139
16151
|
|
|
16140
16152
|
<!-- Col derecha: solo icono -->
|
|
16141
|
-
<div class="shrink-0 w-
|
|
16142
|
-
<span clx-icon [name]="metric().icon" size="
|
|
16153
|
+
<div class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center" [class]="_iconBg()">
|
|
16154
|
+
<span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
|
|
16143
16155
|
</div>
|
|
16144
16156
|
}
|
|
16145
16157
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
@@ -16157,51 +16169,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
16157
16169
|
},
|
|
16158
16170
|
template: `
|
|
16159
16171
|
@if (layout() === 'horizontal') {
|
|
16160
|
-
<!--
|
|
16161
|
-
|
|
16162
|
-
|
|
16172
|
+
<!-- Title: its own full-width row, so a long label never fights the icon/value/sparkline
|
|
16173
|
+
row for space and never truncates. -->
|
|
16174
|
+
<div class="w-full">
|
|
16175
|
+
<span class="text-xs text-clx-text-muted">{{ metric().title }}</span>
|
|
16163
16176
|
</div>
|
|
16164
16177
|
|
|
16165
|
-
<!--
|
|
16166
|
-
<div class="flex
|
|
16167
|
-
<
|
|
16168
|
-
|
|
16169
|
-
|
|
16170
|
-
|
|
16171
|
-
|
|
16172
|
-
<span clx-
|
|
16173
|
-
|
|
16174
|
-
variant="light"
|
|
16175
|
-
shape="pill"
|
|
16176
|
-
class="self-start gap-1 mt-0.5">
|
|
16177
|
-
<span clx-icon [name]="_trendIcon()" size="xxs"></span>
|
|
16178
|
-
{{ metric().trend }}
|
|
16178
|
+
<!-- Icon + value/trend + sparkline, second row -->
|
|
16179
|
+
<div class="w-full flex items-center gap-3">
|
|
16180
|
+
<div class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" [class]="_iconBg()">
|
|
16181
|
+
<span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
|
|
16182
|
+
</div>
|
|
16183
|
+
|
|
16184
|
+
<div class="flex flex-col gap-0.5 min-w-0 flex-1">
|
|
16185
|
+
<span class="text-xl font-semibold text-clx-text leading-tight">
|
|
16186
|
+
{{ _formattedValue() }}
|
|
16179
16187
|
</span>
|
|
16180
|
-
|
|
16181
|
-
|
|
16188
|
+
@if (_hasTrend()) {
|
|
16189
|
+
<span clx-badge
|
|
16190
|
+
[color]="_trendColor()"
|
|
16191
|
+
variant="light"
|
|
16192
|
+
shape="pill"
|
|
16193
|
+
class="self-start gap-1 mt-0.5">
|
|
16194
|
+
<span clx-icon [name]="_trendIcon()" size="xxs"></span>
|
|
16195
|
+
{{ metric().trend }}
|
|
16196
|
+
</span>
|
|
16197
|
+
}
|
|
16198
|
+
</div>
|
|
16182
16199
|
|
|
16183
|
-
|
|
16184
|
-
|
|
16185
|
-
|
|
16186
|
-
|
|
16187
|
-
|
|
16188
|
-
|
|
16189
|
-
|
|
16190
|
-
|
|
16191
|
-
|
|
16192
|
-
|
|
16193
|
-
|
|
16194
|
-
|
|
16195
|
-
|
|
16196
|
-
|
|
16200
|
+
<!-- Sparkline -->
|
|
16201
|
+
<div style="flex: 0 0 64px; height: 48px; position: relative; overflow: hidden;">
|
|
16202
|
+
<svg style="position: absolute; inset: 0; width: 100%; height: 100%;"
|
|
16203
|
+
viewBox="0 0 140 64" preserveAspectRatio="none">
|
|
16204
|
+
<defs>
|
|
16205
|
+
<linearGradient [attr.id]="_gradId()" x1="0" y1="0" x2="0" y2="1">
|
|
16206
|
+
<stop offset="0%" [attr.stop-color]="_lineColor()" stop-opacity="0.22"/>
|
|
16207
|
+
<stop offset="100%" [attr.stop-color]="_lineColor()" stop-opacity="0.02"/>
|
|
16208
|
+
</linearGradient>
|
|
16209
|
+
</defs>
|
|
16210
|
+
<path [attr.d]="_fillPath()" [attr.fill]="'url(#' + _gradId() + ')'" stroke="none"/>
|
|
16211
|
+
<path [attr.d]="_linePath()" [attr.stroke]="_lineColor()" stroke-width="2.5"
|
|
16212
|
+
fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
16213
|
+
</svg>
|
|
16214
|
+
</div>
|
|
16197
16215
|
</div>
|
|
16198
16216
|
}
|
|
16199
16217
|
|
|
16200
16218
|
@if (layout() === 'bar') {
|
|
16201
16219
|
<!-- Col izquierda: ícono circular + título + valor -->
|
|
16202
16220
|
<div class="flex flex-col gap-1 min-w-0 flex-1">
|
|
16203
|
-
<div class="w-
|
|
16204
|
-
<span clx-icon [name]="metric().icon" size="
|
|
16221
|
+
<div class="w-10 h-10 rounded-full flex items-center justify-center mb-2" [class]="_iconBgSubtle()">
|
|
16222
|
+
<span clx-icon [name]="metric().icon" size="sm" [class]="_iconTextBase()"></span>
|
|
16205
16223
|
</div>
|
|
16206
16224
|
<span class="text-sm text-clx-text-muted truncate">{{ metric().title }}</span>
|
|
16207
16225
|
<span class="text-2xl font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
|
|
@@ -16247,8 +16265,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
16247
16265
|
</div>
|
|
16248
16266
|
|
|
16249
16267
|
<!-- Col derecha: solo icono -->
|
|
16250
|
-
<div class="shrink-0 w-
|
|
16251
|
-
<span clx-icon [name]="metric().icon" size="
|
|
16268
|
+
<div class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center" [class]="_iconBg()">
|
|
16269
|
+
<span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
|
|
16252
16270
|
</div>
|
|
16253
16271
|
}
|
|
16254
16272
|
`,
|