codexly-ui 0.15.0 → 0.15.1

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 (4) hide show
  1. package/fesm2022/codexly-ui.mjs +61 -42
  2. package/fesm2022/codexly-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/codexly-ui.d.ts +4 -0
package/fesm2022/codexly-ui.mjs CHANGED
@@ -15975,6 +15975,13 @@ class ClxStatCardComponent {
15975
15975
  return CLX_COLOR_HEX[color] ?? CLX_COLOR_HEX.indigo;
15976
15976
  }, ...(ngDevMode ? [{ debugName: "_lineColor" }] : /* istanbul ignore next */ []));
15977
15977
  _gradId = computed(() => `spark-grad-${this.color()}`, ...(ngDevMode ? [{ debugName: "_gradId" }] : /* istanbul ignore next */ []));
15978
+ /** A widget with no meaningful period-over-period comparison (e.g. a plain point-in-time count
15979
+ * like "pending commissions") passes trend: '' — hides the trend badge/row entirely instead of
15980
+ * rendering an empty pill with just an arrow icon and no text. */
15981
+ _hasTrend = computed(() => {
15982
+ const t = this.metric().trend;
15983
+ return t !== '' && t !== null && t !== undefined;
15984
+ }, ...(ngDevMode ? [{ debugName: "_hasTrend" }] : /* istanbul ignore next */ []));
15978
15985
  _trendColor = computed(() => {
15979
15986
  const d = this.metric().trendDirection;
15980
15987
  return d === 'up' ? 'green' : d === 'down' ? 'red' : 'slate';
@@ -16052,14 +16059,16 @@ class ClxStatCardComponent {
16052
16059
  <span class="text-2xl font-semibold text-clx-text leading-tight">
16053
16060
  {{ _formattedValue() }}
16054
16061
  </span>
16055
- <span clx-badge
16056
- [color]="_trendColor()"
16057
- variant="light"
16058
- shape="pill"
16059
- class="self-start gap-1 mt-0.5">
16060
- <span clx-icon [name]="_trendIcon()" size="xxs"></span>
16061
- {{ metric().trend }}
16062
- </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 }}
16070
+ </span>
16071
+ }
16063
16072
  </div>
16064
16073
 
16065
16074
  <!-- Sparkline -->
@@ -16101,25 +16110,29 @@ class ClxStatCardComponent {
16101
16110
  }
16102
16111
  </div>
16103
16112
  <!-- Tendencia -->
16104
- <div class="flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
16105
- {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
16106
- <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
16107
- <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
16108
- </div>
16113
+ @if (_hasTrend()) {
16114
+ <div class="flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
16115
+ {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
16116
+ <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
16117
+ <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
16118
+ </div>
16119
+ }
16109
16120
  </div>
16110
16121
  }
16111
16122
 
16112
16123
  @if (layout() === 'vertical') {
16113
16124
  <!-- Col izquierda: badge + valor + título -->
16114
16125
  <div class="flex flex-col justify-between flex-1 min-w-0 gap-1">
16115
- <span clx-badge
16116
- [color]="_trendColor()"
16117
- variant="light"
16118
- shape="pill"
16119
- class="self-start gap-1">
16120
- <span clx-icon [name]="_trendIcon()" size="xxs"></span>
16121
- {{ metric().trend }}
16122
- </span>
16126
+ @if (_hasTrend()) {
16127
+ <span clx-badge
16128
+ [color]="_trendColor()"
16129
+ variant="light"
16130
+ shape="pill"
16131
+ class="self-start gap-1">
16132
+ <span clx-icon [name]="_trendIcon()" size="xxs"></span>
16133
+ {{ metric().trend }}
16134
+ </span>
16135
+ }
16123
16136
  <span class="text-2xl font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
16124
16137
  <span class="text-xs font-semibold tracking-widest text-clx-text-subtle uppercase">{{ metric().title }}</span>
16125
16138
  </div>
@@ -16155,14 +16168,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
16155
16168
  <span class="text-2xl font-semibold text-clx-text leading-tight">
16156
16169
  {{ _formattedValue() }}
16157
16170
  </span>
16158
- <span clx-badge
16159
- [color]="_trendColor()"
16160
- variant="light"
16161
- shape="pill"
16162
- class="self-start gap-1 mt-0.5">
16163
- <span clx-icon [name]="_trendIcon()" size="xxs"></span>
16164
- {{ metric().trend }}
16165
- </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 }}
16179
+ </span>
16180
+ }
16166
16181
  </div>
16167
16182
 
16168
16183
  <!-- Sparkline -->
@@ -16204,25 +16219,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
16204
16219
  }
16205
16220
  </div>
16206
16221
  <!-- Tendencia -->
16207
- <div class="flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
16208
- {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
16209
- <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
16210
- <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
16211
- </div>
16222
+ @if (_hasTrend()) {
16223
+ <div class="flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
16224
+ {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
16225
+ <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
16226
+ <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
16227
+ </div>
16228
+ }
16212
16229
  </div>
16213
16230
  }
16214
16231
 
16215
16232
  @if (layout() === 'vertical') {
16216
16233
  <!-- Col izquierda: badge + valor + título -->
16217
16234
  <div class="flex flex-col justify-between flex-1 min-w-0 gap-1">
16218
- <span clx-badge
16219
- [color]="_trendColor()"
16220
- variant="light"
16221
- shape="pill"
16222
- class="self-start gap-1">
16223
- <span clx-icon [name]="_trendIcon()" size="xxs"></span>
16224
- {{ metric().trend }}
16225
- </span>
16235
+ @if (_hasTrend()) {
16236
+ <span clx-badge
16237
+ [color]="_trendColor()"
16238
+ variant="light"
16239
+ shape="pill"
16240
+ class="self-start gap-1">
16241
+ <span clx-icon [name]="_trendIcon()" size="xxs"></span>
16242
+ {{ metric().trend }}
16243
+ </span>
16244
+ }
16226
16245
  <span class="text-2xl font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
16227
16246
  <span class="text-xs font-semibold tracking-widest text-clx-text-subtle uppercase">{{ metric().title }}</span>
16228
16247
  </div>