codexly-ui 0.15.5 → 0.15.6

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.
Files changed (3) hide show
  1. package/fesm2022/codexly-ui.mjs +82 -67
  2. package/fesm2022/codexly-ui.mjs.map +1 -1
  3. package/package.json +1 -1
package/fesm2022/codexly-ui.mjs CHANGED
@@ -15958,7 +15958,10 @@ class ClxStatCardComponent {
15958
15958
  const border = resolveColor(this.color()).borderLight;
15959
15959
  const radius = resolveContainerRadius(this._themeSvc.config().borderRadius);
15960
15960
  const base = `bg-clx-surface ${radius} shadow-md border ${border} p-4 w-full overflow-hidden min-w-[200px]`;
15961
- return `flex items-center gap-3 ${base}`;
15961
+ // horizontal stacks its title row above its icon/value/sparkline row (flex-col); vertical/bar
15962
+ // keep a single side-by-side row (flex items-center) as before.
15963
+ const layoutCls = this.layout() === 'horizontal' ? 'flex flex-col gap-2' : 'flex items-center gap-3';
15964
+ return `${layoutCls} ${base}`;
15962
15965
  }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
15963
15966
  _barHeights = computed(() => {
15964
15967
  const data = this.chartData();
@@ -16048,43 +16051,49 @@ class ClxStatCardComponent {
16048
16051
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxStatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
16049
16052
  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
16053
  @if (layout() === 'horizontal') {
16051
- <!-- Icon -->
16052
- <div class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" [class]="_iconBg()">
16053
- <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
16054
+ <!-- Title: its own full-width row, so a long label never fights the icon/value/sparkline
16055
+ row for space and never truncates. -->
16056
+ <div class="w-full">
16057
+ <span class="text-xs text-clx-text-muted">{{ metric().title }}</span>
16054
16058
  </div>
16055
16059
 
16056
- <!-- Text block -->
16057
- <div class="flex flex-col gap-0.5 min-w-0 flex-1">
16058
- <span class="text-xs text-clx-text-muted truncate">{{ metric().title }}</span>
16059
- <span class="text-xl font-semibold text-clx-text leading-tight">
16060
- {{ _formattedValue() }}
16061
- </span>
16062
- @if (_hasTrend()) {
16063
- <span clx-badge
16064
- [color]="_trendColor()"
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 }}
16060
+ <!-- Icon + value/trend + sparkline, second row -->
16061
+ <div class="w-full flex items-center gap-3">
16062
+ <div class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" [class]="_iconBg()">
16063
+ <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
16064
+ </div>
16065
+
16066
+ <div class="flex flex-col gap-0.5 min-w-0 flex-1">
16067
+ <span class="text-xl font-semibold text-clx-text leading-tight">
16068
+ {{ _formattedValue() }}
16070
16069
  </span>
16071
- }
16072
- </div>
16070
+ @if (_hasTrend()) {
16071
+ <span clx-badge
16072
+ [color]="_trendColor()"
16073
+ variant="light"
16074
+ shape="pill"
16075
+ class="self-start gap-1 mt-0.5">
16076
+ <span clx-icon [name]="_trendIcon()" size="xxs"></span>
16077
+ {{ metric().trend }}
16078
+ </span>
16079
+ }
16080
+ </div>
16073
16081
 
16074
- <!-- Sparkline -->
16075
- <div style="flex: 0 0 64px; height: 48px; position: relative; overflow: hidden;">
16076
- <svg style="position: absolute; inset: 0; width: 100%; height: 100%;"
16077
- viewBox="0 0 140 64" preserveAspectRatio="none">
16078
- <defs>
16079
- <linearGradient [attr.id]="_gradId()" x1="0" y1="0" x2="0" y2="1">
16080
- <stop offset="0%" [attr.stop-color]="_lineColor()" stop-opacity="0.22"/>
16081
- <stop offset="100%" [attr.stop-color]="_lineColor()" stop-opacity="0.02"/>
16082
- </linearGradient>
16083
- </defs>
16084
- <path [attr.d]="_fillPath()" [attr.fill]="'url(#' + _gradId() + ')'" stroke="none"/>
16085
- <path [attr.d]="_linePath()" [attr.stroke]="_lineColor()" stroke-width="2.5"
16086
- fill="none" stroke-linecap="round" stroke-linejoin="round"/>
16087
- </svg>
16082
+ <!-- Sparkline -->
16083
+ <div style="flex: 0 0 64px; height: 48px; position: relative; overflow: hidden;">
16084
+ <svg style="position: absolute; inset: 0; width: 100%; height: 100%;"
16085
+ viewBox="0 0 140 64" preserveAspectRatio="none">
16086
+ <defs>
16087
+ <linearGradient [attr.id]="_gradId()" x1="0" y1="0" x2="0" y2="1">
16088
+ <stop offset="0%" [attr.stop-color]="_lineColor()" stop-opacity="0.22"/>
16089
+ <stop offset="100%" [attr.stop-color]="_lineColor()" stop-opacity="0.02"/>
16090
+ </linearGradient>
16091
+ </defs>
16092
+ <path [attr.d]="_fillPath()" [attr.fill]="'url(#' + _gradId() + ')'" stroke="none"/>
16093
+ <path [attr.d]="_linePath()" [attr.stroke]="_lineColor()" stroke-width="2.5"
16094
+ fill="none" stroke-linecap="round" stroke-linejoin="round"/>
16095
+ </svg>
16096
+ </div>
16088
16097
  </div>
16089
16098
  }
16090
16099
 
@@ -16157,43 +16166,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
16157
16166
  },
16158
16167
  template: `
16159
16168
  @if (layout() === 'horizontal') {
16160
- <!-- Icon -->
16161
- <div class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" [class]="_iconBg()">
16162
- <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
16169
+ <!-- Title: its own full-width row, so a long label never fights the icon/value/sparkline
16170
+ row for space and never truncates. -->
16171
+ <div class="w-full">
16172
+ <span class="text-xs text-clx-text-muted">{{ metric().title }}</span>
16163
16173
  </div>
16164
16174
 
16165
- <!-- Text block -->
16166
- <div class="flex flex-col gap-0.5 min-w-0 flex-1">
16167
- <span class="text-xs text-clx-text-muted truncate">{{ metric().title }}</span>
16168
- <span class="text-xl font-semibold text-clx-text leading-tight">
16169
- {{ _formattedValue() }}
16170
- </span>
16171
- @if (_hasTrend()) {
16172
- <span clx-badge
16173
- [color]="_trendColor()"
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 }}
16175
+ <!-- Icon + value/trend + sparkline, second row -->
16176
+ <div class="w-full flex items-center gap-3">
16177
+ <div class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" [class]="_iconBg()">
16178
+ <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
16179
+ </div>
16180
+
16181
+ <div class="flex flex-col gap-0.5 min-w-0 flex-1">
16182
+ <span class="text-xl font-semibold text-clx-text leading-tight">
16183
+ {{ _formattedValue() }}
16179
16184
  </span>
16180
- }
16181
- </div>
16185
+ @if (_hasTrend()) {
16186
+ <span clx-badge
16187
+ [color]="_trendColor()"
16188
+ variant="light"
16189
+ shape="pill"
16190
+ class="self-start gap-1 mt-0.5">
16191
+ <span clx-icon [name]="_trendIcon()" size="xxs"></span>
16192
+ {{ metric().trend }}
16193
+ </span>
16194
+ }
16195
+ </div>
16182
16196
 
16183
- <!-- Sparkline -->
16184
- <div style="flex: 0 0 64px; height: 48px; position: relative; overflow: hidden;">
16185
- <svg style="position: absolute; inset: 0; width: 100%; height: 100%;"
16186
- viewBox="0 0 140 64" preserveAspectRatio="none">
16187
- <defs>
16188
- <linearGradient [attr.id]="_gradId()" x1="0" y1="0" x2="0" y2="1">
16189
- <stop offset="0%" [attr.stop-color]="_lineColor()" stop-opacity="0.22"/>
16190
- <stop offset="100%" [attr.stop-color]="_lineColor()" stop-opacity="0.02"/>
16191
- </linearGradient>
16192
- </defs>
16193
- <path [attr.d]="_fillPath()" [attr.fill]="'url(#' + _gradId() + ')'" stroke="none"/>
16194
- <path [attr.d]="_linePath()" [attr.stroke]="_lineColor()" stroke-width="2.5"
16195
- fill="none" stroke-linecap="round" stroke-linejoin="round"/>
16196
- </svg>
16197
+ <!-- Sparkline -->
16198
+ <div style="flex: 0 0 64px; height: 48px; position: relative; overflow: hidden;">
16199
+ <svg style="position: absolute; inset: 0; width: 100%; height: 100%;"
16200
+ viewBox="0 0 140 64" preserveAspectRatio="none">
16201
+ <defs>
16202
+ <linearGradient [attr.id]="_gradId()" x1="0" y1="0" x2="0" y2="1">
16203
+ <stop offset="0%" [attr.stop-color]="_lineColor()" stop-opacity="0.22"/>
16204
+ <stop offset="100%" [attr.stop-color]="_lineColor()" stop-opacity="0.02"/>
16205
+ </linearGradient>
16206
+ </defs>
16207
+ <path [attr.d]="_fillPath()" [attr.fill]="'url(#' + _gradId() + ')'" stroke="none"/>
16208
+ <path [attr.d]="_linePath()" [attr.stroke]="_lineColor()" stroke-width="2.5"
16209
+ fill="none" stroke-linecap="round" stroke-linejoin="round"/>
16210
+ </svg>
16211
+ </div>
16197
16212
  </div>
16198
16213
  }
16199
16214