@weeehaoooz/talos-ui 0.1.0

package/fesm2022/weeehaoooz-talos-ui-data-display-trend-indicator.mjs

@@ -0,0 +1,235 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component, NgModule } from '@angular/core';
+
+/**
+ * Types and interfaces for TalosTrendIndicatorComponent
+ */
+
+class TalosTrendIndicatorComponent {
+    /** Explicit value to display (e.g. 14.2, -5.3, "+12%") */
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Current value for automatic delta calculation */
+    current = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** Previous value for automatic delta calculation */
+    previous = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previous" }] : /* istanbul ignore next */ []));
+    /** Explicit direction override or 'auto' */
+    direction = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Explicit status override or 'auto' */
+    status = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Polarity: normal (+ is good), inverse (+ is bad), neutral */
+    polarity = input('normal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "polarity" }] : /* istanbul ignore next */ []));
+    /** Visual variant */
+    variant = input('badge', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Layout orientation: horizontal or vertical */
+    layout = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Icon shape / style */
+    iconType = input('arrow-diagonal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconType" }] : /* istanbul ignore next */ []));
+    /** Size preset */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Value formatting mode */
+    format = input('percentage', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Prefix string before number */
+    prefix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+    /** Suffix string after number (e.g. '%', 'pts') */
+    suffix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+    /** Number of decimal places */
+    decimals = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decimals" }] : /* istanbul ignore next */ []));
+    /** Whether to show '+' / '-' sign */
+    showSign = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSign" }] : /* istanbul ignore next */ []));
+    /** Whether to show arrow icon */
+    showIcon = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    /** Show only the icon without text */
+    iconOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    /** Secondary comparison label (e.g. 'vs last month') */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Currency symbol when format is 'currency' */
+    currencySymbol = input('$', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currencySymbol" }] : /* istanbul ignore next */ []));
+    /** Custom formatter function */
+    valueFormatter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []));
+    /** Accessible label */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Calculation result */
+    calculation = computed(() => {
+        const cur = this.current();
+        const prev = this.previous();
+        const val = this.value();
+        const dec = this.decimals();
+        let delta = 0;
+        let deltaPct = 0;
+        let dir = 'flat';
+        if (cur !== null && prev !== null) {
+            delta = cur - prev;
+            deltaPct = prev !== 0 ? ((cur - prev) / Math.abs(prev)) * 100 : cur > 0 ? 100 : cur < 0 ? -100 : 0;
+            if (delta > 0.0001)
+                dir = 'up';
+            else if (delta < -0.0001)
+                dir = 'down';
+            else
+                dir = 'flat';
+        }
+        else if (typeof val === 'number') {
+            delta = val;
+            deltaPct = val;
+            if (val > 0.0001)
+                dir = 'up';
+            else if (val < -0.0001)
+                dir = 'down';
+            else
+                dir = 'flat';
+        }
+        else if (typeof val === 'string') {
+            const parsed = parseFloat(val.replace(/[^0-9.-]/g, ''));
+            delta = isNaN(parsed) ? 0 : parsed;
+            deltaPct = delta;
+            if (val.includes('+') || delta > 0.0001)
+                dir = 'up';
+            else if (val.includes('-') || delta < -0.0001)
+                dir = 'down';
+            else
+                dir = 'flat';
+        }
+        // Force direction override if specified
+        const explicitDir = this.direction();
+        if (explicitDir !== 'auto') {
+            dir = explicitDir;
+        }
+        // Determine status (positive / negative / neutral) based on polarity or explicit override
+        const explicitStatus = this.status();
+        let calculatedStatus = 'neutral';
+        if (explicitStatus !== 'auto') {
+            calculatedStatus = explicitStatus;
+        }
+        else {
+            const pol = this.polarity();
+            if (pol === 'neutral' || dir === 'flat') {
+                calculatedStatus = 'neutral';
+            }
+            else if (pol === 'normal') {
+                calculatedStatus = dir === 'up' ? 'positive' : 'negative';
+            }
+            else if (pol === 'inverse') {
+                calculatedStatus = dir === 'up' ? 'negative' : 'positive';
+            }
+        }
+        // Format text
+        let formattedText = '';
+        const customFmt = this.valueFormatter();
+        if (customFmt) {
+            formattedText = customFmt({ delta, deltaPercentage: deltaPct, direction: dir, status: calculatedStatus, formattedText: '' });
+        }
+        else if (typeof val === 'string' && cur === null) {
+            formattedText = val;
+        }
+        else {
+            const sign = this.showSign() ? (dir === 'up' ? '+' : dir === 'down' ? '-' : '') : '';
+            const absDelta = Math.abs(delta);
+            const absPct = Math.abs(deltaPct);
+            const pfx = this.prefix();
+            const sfx = this.suffix();
+            switch (this.format()) {
+                case 'percentage':
+                    formattedText = `${sign}${pfx}${absPct.toFixed(dec)}%${sfx}`;
+                    break;
+                case 'currency':
+                    formattedText = `${sign}${this.currencySymbol()}${pfx}${absDelta.toFixed(dec)}${sfx}`;
+                    break;
+                case 'points':
+                    formattedText = `${sign}${pfx}${absDelta.toFixed(dec)} pts${sfx}`;
+                    break;
+                case 'number':
+                default:
+                    formattedText = `${sign}${pfx}${absDelta.toFixed(dec)}${sfx}`;
+                    break;
+            }
+        }
+        return {
+            delta,
+            deltaPercentage: deltaPct,
+            direction: dir,
+            status: calculatedStatus,
+            formattedText
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calculation" }] : /* istanbul ignore next */ []));
+    computedStatus = computed(() => this.calculation().status, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedStatus" }] : /* istanbul ignore next */ []));
+    computedDirection = computed(() => this.calculation().direction, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedDirection" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => this.calculation().formattedText, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    computedAriaLabel = computed(() => {
+        const custom = this.ariaLabel();
+        if (custom)
+            return custom;
+        const calc = this.calculation();
+        const dirWord = calc.direction === 'up' ? 'Increased by' : calc.direction === 'down' ? 'Decreased by' : 'No change';
+        const labelText = this.label() ? ` (${this.label()})` : '';
+        return `Trend: ${dirWord} ${calc.formattedText}${labelText}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTrendIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosTrendIndicatorComponent, isStandalone: true, selector: "talos-trend-indicator", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, previous: { classPropertyName: "previous", publicName: "previous", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, polarity: { classPropertyName: "polarity", publicName: "polarity", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, showSign: { classPropertyName: "showSign", publicName: "showSign", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, currencySymbol: { classPropertyName: "currencySymbol", publicName: "currencySymbol", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.talos-trend-badge": "variant() === \"badge\"", "class.talos-trend-subtle": "variant() === \"subtle\"", "class.talos-trend-text": "variant() === \"text\"", "class.talos-trend-bordered": "variant() === \"bordered\"", "class.talos-trend-solid": "variant() === \"solid\"", "class.talos-trend-horizontal": "layout() === \"horizontal\"", "class.talos-trend-vertical": "layout() === \"vertical\"", "class.talos-trend-positive": "computedStatus() === \"positive\"", "class.talos-trend-negative": "computedStatus() === \"negative\"", "class.talos-trend-neutral": "computedStatus() === \"neutral\"", "class.talos-trend-xs": "size() === \"xs\"", "class.talos-trend-sm": "size() === \"sm\"", "class.talos-trend-md": "size() === \"md\"", "class.talos-trend-lg": "size() === \"lg\"", "attr.role": "\"status\"", "attr.aria-label": "computedAriaLabel()" }, classAttribute: "talos-trend-indicator" }, ngImport: i0, template: "<span class=\"talos-trend-main\">\n  @if (showIcon()) {\n    <span class=\"talos-trend-icon-wrapper\" aria-hidden=\"true\">\n      @switch (iconType()) {\n        @case ('arrow-vertical') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M8 12.5V3.5M8 3.5L4.5 7M8 3.5L11.5 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M8 3.5V12.5M8 12.5L4.5 9M8 12.5L11.5 9\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n        @case ('chevron') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 10L8 5.5L12.5 10\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 6L8 10.5L12.5 6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n        @case ('triangle') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <path d=\"M8 4.5L13 12H3L8 4.5Z\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <path d=\"M8 11.5L3 4H13L8 11.5Z\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <rect x=\"3.5\" y=\"7\" width=\"9\" height=\"2\" rx=\"1\"/>\n            </svg>\n          }\n        }\n        @default {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M4 11.5L11.5 4M11.5 4H6M11.5 4V9.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M4 4.5L11.5 12M11.5 12H6M11.5 12V6.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n      }\n    </span>\n  }\n\n  @if (!iconOnly()) {\n    <span class=\"talos-trend-value\">{{ displayValue() }}</span>\n  }\n</span>\n\n@if (label()) {\n  <span class=\"talos-trend-label\">{{ label() }}</span>\n}\n\n", styles: [":host{display:inline-flex;vertical-align:middle;box-sizing:border-box;font-family:inherit;font-weight:600;line-height:1;transition:background-color .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap;--_trend-color: #64748b;--_trend-bg: #f1f5f9;--_trend-border: #e2e8f0;--_trend-solid-bg: #64748b;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(100, 116, 139, .1)}:host.talos-trend-positive{--_trend-color: #15803d;--_trend-bg: #dcfce7;--_trend-border: #bbf7d0;--_trend-solid-bg: #16a34a;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(22, 163, 74, .12)}:host.talos-trend-negative{--_trend-color: #b91c1c;--_trend-bg: #fee2e2;--_trend-border: #fecaca;--_trend-solid-bg: #dc2626;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(220, 38, 38, .12)}:host.talos-trend-neutral{--_trend-color: #475569;--_trend-bg: #f1f5f9;--_trend-border: #e2e8f0;--_trend-solid-bg: #64748b;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(100, 116, 139, .1)}:host.talos-trend-horizontal{flex-direction:row;align-items:center;gap:.25rem}:host.talos-trend-horizontal .talos-trend-label{font-weight:400;opacity:.8;margin-left:.125rem}:host.talos-trend-vertical{flex-direction:column;align-items:flex-start;gap:.125rem}:host.talos-trend-vertical .talos-trend-label{font-weight:400;opacity:.75;font-size:.85em}:host .talos-trend-main{display:inline-flex;align-items:center;gap:.25rem;line-height:1}:host .talos-trend-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}:host .talos-trend-icon{display:block;width:.875rem;height:.875rem;flex-shrink:0}:host .talos-trend-icon--fill{fill:currentColor}:host .talos-trend-value{letter-spacing:-.01em}:host.talos-trend-xs{font-size:.6875rem}:host.talos-trend-xs .talos-trend-icon{width:.625rem;height:.625rem}:host.talos-trend-xs.talos-trend-badge,:host.talos-trend-xs.talos-trend-subtle,:host.talos-trend-xs.talos-trend-bordered,:host.talos-trend-xs.talos-trend-solid{padding:.125rem .375rem;border-radius:9999px}:host.talos-trend-sm{font-size:.75rem}:host.talos-trend-sm .talos-trend-icon{width:.75rem;height:.75rem}:host.talos-trend-sm.talos-trend-badge,:host.talos-trend-sm.talos-trend-subtle,:host.talos-trend-sm.talos-trend-bordered,:host.talos-trend-sm.talos-trend-solid{padding:.1875rem .5rem;border-radius:9999px}:host.talos-trend-md{font-size:.8125rem}:host.talos-trend-md .talos-trend-icon{width:.875rem;height:.875rem}:host.talos-trend-md.talos-trend-badge,:host.talos-trend-md.talos-trend-subtle,:host.talos-trend-md.talos-trend-bordered,:host.talos-trend-md.talos-trend-solid{padding:.25rem .625rem;border-radius:9999px}:host.talos-trend-lg{font-size:.9375rem}:host.talos-trend-lg .talos-trend-icon{width:1rem;height:1rem}:host.talos-trend-lg.talos-trend-badge,:host.talos-trend-lg.talos-trend-subtle,:host.talos-trend-lg.talos-trend-bordered,:host.talos-trend-lg.talos-trend-solid{padding:.3125rem .75rem;border-radius:9999px}:host.talos-trend-badge{background-color:var(--_trend-bg);color:var(--_trend-color)}:host.talos-trend-subtle{background-color:var(--_trend-subtle-bg);color:var(--_trend-color)}:host.talos-trend-bordered{background-color:var(--_trend-bg);border:1px solid var(--_trend-border);color:var(--_trend-color)}:host.talos-trend-solid{background-color:var(--_trend-solid-bg);color:var(--_trend-solid-text);box-shadow:0 1px 2px #00000014}:host.talos-trend-text{padding:0;background:transparent;color:var(--_trend-color)}:root[data-theme=dark] :host.talos-trend-positive,:root.dark :host.talos-trend-positive,[data-theme=dark] :host.talos-trend-positive,[data-mode=dark] :host.talos-trend-positive,.dark :host.talos-trend-positive,.dark-theme :host.talos-trend-positive{--_trend-color: #4ade80;--_trend-bg: rgba(34, 197, 94, .18);--_trend-border: rgba(74, 222, 128, .3);--_trend-solid-bg: #16a34a;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(34, 197, 94, .12)}:root[data-theme=dark] :host.talos-trend-negative,:root.dark :host.talos-trend-negative,[data-theme=dark] :host.talos-trend-negative,[data-mode=dark] :host.talos-trend-negative,.dark :host.talos-trend-negative,.dark-theme :host.talos-trend-negative{--_trend-color: #f87171;--_trend-bg: rgba(239, 68, 68, .18);--_trend-border: rgba(248, 113, 113, .3);--_trend-solid-bg: #dc2626;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(239, 68, 68, .12)}:root[data-theme=dark] :host.talos-trend-neutral,:root.dark :host.talos-trend-neutral,[data-theme=dark] :host.talos-trend-neutral,[data-mode=dark] :host.talos-trend-neutral,.dark :host.talos-trend-neutral,.dark-theme :host.talos-trend-neutral{--_trend-color: #94a3b8;--_trend-bg: rgba(100, 116, 139, .18);--_trend-border: rgba(148, 163, 184, .25);--_trend-solid-bg: #475569;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(100, 116, 139, .12)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTrendIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-trend-indicator', host: {
+                        'class': 'talos-trend-indicator',
+                        '[class.talos-trend-badge]': 'variant() === "badge"',
+                        '[class.talos-trend-subtle]': 'variant() === "subtle"',
+                        '[class.talos-trend-text]': 'variant() === "text"',
+                        '[class.talos-trend-bordered]': 'variant() === "bordered"',
+                        '[class.talos-trend-solid]': 'variant() === "solid"',
+                        '[class.talos-trend-horizontal]': 'layout() === "horizontal"',
+                        '[class.talos-trend-vertical]': 'layout() === "vertical"',
+                        '[class.talos-trend-positive]': 'computedStatus() === "positive"',
+                        '[class.talos-trend-negative]': 'computedStatus() === "negative"',
+                        '[class.talos-trend-neutral]': 'computedStatus() === "neutral"',
+                        '[class.talos-trend-xs]': 'size() === "xs"',
+                        '[class.talos-trend-sm]': 'size() === "sm"',
+                        '[class.talos-trend-md]': 'size() === "md"',
+                        '[class.talos-trend-lg]': 'size() === "lg"',
+                        '[attr.role]': '"status"',
+                        '[attr.aria-label]': 'computedAriaLabel()'
+                    }, template: "<span class=\"talos-trend-main\">\n  @if (showIcon()) {\n    <span class=\"talos-trend-icon-wrapper\" aria-hidden=\"true\">\n      @switch (iconType()) {\n        @case ('arrow-vertical') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M8 12.5V3.5M8 3.5L4.5 7M8 3.5L11.5 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M8 3.5V12.5M8 12.5L4.5 9M8 12.5L11.5 9\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n        @case ('chevron') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 10L8 5.5L12.5 10\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 6L8 10.5L12.5 6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n        @case ('triangle') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <path d=\"M8 4.5L13 12H3L8 4.5Z\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <path d=\"M8 11.5L3 4H13L8 11.5Z\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <rect x=\"3.5\" y=\"7\" width=\"9\" height=\"2\" rx=\"1\"/>\n            </svg>\n          }\n        }\n        @default {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M4 11.5L11.5 4M11.5 4H6M11.5 4V9.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M4 4.5L11.5 12M11.5 12H6M11.5 12V6.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n      }\n    </span>\n  }\n\n  @if (!iconOnly()) {\n    <span class=\"talos-trend-value\">{{ displayValue() }}</span>\n  }\n</span>\n\n@if (label()) {\n  <span class=\"talos-trend-label\">{{ label() }}</span>\n}\n\n", styles: [":host{display:inline-flex;vertical-align:middle;box-sizing:border-box;font-family:inherit;font-weight:600;line-height:1;transition:background-color .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap;--_trend-color: #64748b;--_trend-bg: #f1f5f9;--_trend-border: #e2e8f0;--_trend-solid-bg: #64748b;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(100, 116, 139, .1)}:host.talos-trend-positive{--_trend-color: #15803d;--_trend-bg: #dcfce7;--_trend-border: #bbf7d0;--_trend-solid-bg: #16a34a;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(22, 163, 74, .12)}:host.talos-trend-negative{--_trend-color: #b91c1c;--_trend-bg: #fee2e2;--_trend-border: #fecaca;--_trend-solid-bg: #dc2626;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(220, 38, 38, .12)}:host.talos-trend-neutral{--_trend-color: #475569;--_trend-bg: #f1f5f9;--_trend-border: #e2e8f0;--_trend-solid-bg: #64748b;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(100, 116, 139, .1)}:host.talos-trend-horizontal{flex-direction:row;align-items:center;gap:.25rem}:host.talos-trend-horizontal .talos-trend-label{font-weight:400;opacity:.8;margin-left:.125rem}:host.talos-trend-vertical{flex-direction:column;align-items:flex-start;gap:.125rem}:host.talos-trend-vertical .talos-trend-label{font-weight:400;opacity:.75;font-size:.85em}:host .talos-trend-main{display:inline-flex;align-items:center;gap:.25rem;line-height:1}:host .talos-trend-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}:host .talos-trend-icon{display:block;width:.875rem;height:.875rem;flex-shrink:0}:host .talos-trend-icon--fill{fill:currentColor}:host .talos-trend-value{letter-spacing:-.01em}:host.talos-trend-xs{font-size:.6875rem}:host.talos-trend-xs .talos-trend-icon{width:.625rem;height:.625rem}:host.talos-trend-xs.talos-trend-badge,:host.talos-trend-xs.talos-trend-subtle,:host.talos-trend-xs.talos-trend-bordered,:host.talos-trend-xs.talos-trend-solid{padding:.125rem .375rem;border-radius:9999px}:host.talos-trend-sm{font-size:.75rem}:host.talos-trend-sm .talos-trend-icon{width:.75rem;height:.75rem}:host.talos-trend-sm.talos-trend-badge,:host.talos-trend-sm.talos-trend-subtle,:host.talos-trend-sm.talos-trend-bordered,:host.talos-trend-sm.talos-trend-solid{padding:.1875rem .5rem;border-radius:9999px}:host.talos-trend-md{font-size:.8125rem}:host.talos-trend-md .talos-trend-icon{width:.875rem;height:.875rem}:host.talos-trend-md.talos-trend-badge,:host.talos-trend-md.talos-trend-subtle,:host.talos-trend-md.talos-trend-bordered,:host.talos-trend-md.talos-trend-solid{padding:.25rem .625rem;border-radius:9999px}:host.talos-trend-lg{font-size:.9375rem}:host.talos-trend-lg .talos-trend-icon{width:1rem;height:1rem}:host.talos-trend-lg.talos-trend-badge,:host.talos-trend-lg.talos-trend-subtle,:host.talos-trend-lg.talos-trend-bordered,:host.talos-trend-lg.talos-trend-solid{padding:.3125rem .75rem;border-radius:9999px}:host.talos-trend-badge{background-color:var(--_trend-bg);color:var(--_trend-color)}:host.talos-trend-subtle{background-color:var(--_trend-subtle-bg);color:var(--_trend-color)}:host.talos-trend-bordered{background-color:var(--_trend-bg);border:1px solid var(--_trend-border);color:var(--_trend-color)}:host.talos-trend-solid{background-color:var(--_trend-solid-bg);color:var(--_trend-solid-text);box-shadow:0 1px 2px #00000014}:host.talos-trend-text{padding:0;background:transparent;color:var(--_trend-color)}:root[data-theme=dark] :host.talos-trend-positive,:root.dark :host.talos-trend-positive,[data-theme=dark] :host.talos-trend-positive,[data-mode=dark] :host.talos-trend-positive,.dark :host.talos-trend-positive,.dark-theme :host.talos-trend-positive{--_trend-color: #4ade80;--_trend-bg: rgba(34, 197, 94, .18);--_trend-border: rgba(74, 222, 128, .3);--_trend-solid-bg: #16a34a;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(34, 197, 94, .12)}:root[data-theme=dark] :host.talos-trend-negative,:root.dark :host.talos-trend-negative,[data-theme=dark] :host.talos-trend-negative,[data-mode=dark] :host.talos-trend-negative,.dark :host.talos-trend-negative,.dark-theme :host.talos-trend-negative{--_trend-color: #f87171;--_trend-bg: rgba(239, 68, 68, .18);--_trend-border: rgba(248, 113, 113, .3);--_trend-solid-bg: #dc2626;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(239, 68, 68, .12)}:root[data-theme=dark] :host.talos-trend-neutral,:root.dark :host.talos-trend-neutral,[data-theme=dark] :host.talos-trend-neutral,[data-mode=dark] :host.talos-trend-neutral,.dark :host.talos-trend-neutral,.dark-theme :host.talos-trend-neutral{--_trend-color: #94a3b8;--_trend-bg: rgba(100, 116, 139, .18);--_trend-border: rgba(148, 163, 184, .25);--_trend-solid-bg: #475569;--_trend-solid-text: #ffffff;--_trend-subtle-bg: rgba(100, 116, 139, .12)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], previous: [{ type: i0.Input, args: [{ isSignal: true, alias: "previous", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], polarity: [{ type: i0.Input, args: [{ isSignal: true, alias: "polarity", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], iconType: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconType", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], showSign: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSign", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class TalosTrendIndicatorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTrendIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosTrendIndicatorModule, imports: [TalosTrendIndicatorComponent], exports: [TalosTrendIndicatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTrendIndicatorModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTrendIndicatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosTrendIndicatorComponent],
+                    exports: [TalosTrendIndicatorComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TalosTrendIndicatorComponent, TalosTrendIndicatorModule };
+//# sourceMappingURL=weeehaoooz-talos-ui-data-display-trend-indicator.mjs.map

package/fesm2022/weeehaoooz-talos-ui-data-display-trend-indicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"weeehaoooz-talos-ui-data-display-trend-indicator.mjs","sources":["../../../projects/talos-ui/data-display/trend-indicator/trend-indicator.types.ts","../../../projects/talos-ui/data-display/trend-indicator/trend-indicator.component.ts","../../../projects/talos-ui/data-display/trend-indicator/trend-indicator.component.html","../../../projects/talos-ui/data-display/trend-indicator/trend-indicator.module.ts","../../../projects/talos-ui/data-display/trend-indicator/weeehaoooz-talos-ui-data-display-trend-indicator.ts"],"sourcesContent":["/**\n * Types and interfaces for TalosTrendIndicatorComponent\n */\n\nexport type TrendDirection = 'up' | 'down' | 'flat' | 'auto';\n\nexport type TrendPolarity = 'normal' | 'inverse' | 'neutral';\n\nexport type TrendVariant = 'badge' | 'subtle' | 'text' | 'bordered' | 'solid';\n\nexport type TrendSize = 'xs' | 'sm' | 'md' | 'lg';\n\nexport type TrendLayout = 'horizontal' | 'vertical';\n\nexport type TrendIconType = 'arrow-diagonal' | 'arrow-vertical' | 'chevron' | 'triangle';\n\nexport type TrendStatus = 'auto' | 'positive' | 'negative' | 'neutral';\n\nexport type TrendFormat = 'percentage' | 'currency' | 'number' | 'points' | 'custom';\n\nexport interface TrendCalculationResult {\n  delta: number;\n  deltaPercentage: number;\n  direction: 'up' | 'down' | 'flat';\n  status: 'positive' | 'negative' | 'neutral';\n  formattedText: string;\n}\n\n","import { Component, computed, input } from '@angular/core';\nimport {\n  TrendCalculationResult,\n  TrendDirection,\n  TrendFormat,\n  TrendIconType,\n  TrendLayout,\n  TrendPolarity,\n  TrendSize,\n  TrendStatus,\n  TrendVariant\n} from './trend-indicator.types';\n\n@Component({\n  selector: 'talos-trend-indicator',\n  templateUrl: './trend-indicator.component.html',\n  styleUrl: './trend-indicator.component.scss',\n  host: {\n    'class': 'talos-trend-indicator',\n    '[class.talos-trend-badge]': 'variant() === \"badge\"',\n    '[class.talos-trend-subtle]': 'variant() === \"subtle\"',\n    '[class.talos-trend-text]': 'variant() === \"text\"',\n    '[class.talos-trend-bordered]': 'variant() === \"bordered\"',\n    '[class.talos-trend-solid]': 'variant() === \"solid\"',\n    '[class.talos-trend-horizontal]': 'layout() === \"horizontal\"',\n    '[class.talos-trend-vertical]': 'layout() === \"vertical\"',\n    '[class.talos-trend-positive]': 'computedStatus() === \"positive\"',\n    '[class.talos-trend-negative]': 'computedStatus() === \"negative\"',\n    '[class.talos-trend-neutral]': 'computedStatus() === \"neutral\"',\n    '[class.talos-trend-xs]': 'size() === \"xs\"',\n    '[class.talos-trend-sm]': 'size() === \"sm\"',\n    '[class.talos-trend-md]': 'size() === \"md\"',\n    '[class.talos-trend-lg]': 'size() === \"lg\"',\n    '[attr.role]': '\"status\"',\n    '[attr.aria-label]': 'computedAriaLabel()'\n  }\n})\nexport class TalosTrendIndicatorComponent {\n  /** Explicit value to display (e.g. 14.2, -5.3, \"+12%\") */\n  readonly value = input<number | string | null>(null);\n\n  /** Current value for automatic delta calculation */\n  readonly current = input<number | null>(null);\n\n  /** Previous value for automatic delta calculation */\n  readonly previous = input<number | null>(null);\n\n  /** Explicit direction override or 'auto' */\n  readonly direction = input<TrendDirection>('auto');\n\n  /** Explicit status override or 'auto' */\n  readonly status = input<TrendStatus>('auto');\n\n  /** Polarity: normal (+ is good), inverse (+ is bad), neutral */\n  readonly polarity = input<TrendPolarity>('normal');\n\n  /** Visual variant */\n  readonly variant = input<TrendVariant>('badge');\n\n  /** Layout orientation: horizontal or vertical */\n  readonly layout = input<TrendLayout>('horizontal');\n\n  /** Icon shape / style */\n  readonly iconType = input<TrendIconType>('arrow-diagonal');\n\n  /** Size preset */\n  readonly size = input<TrendSize>('md');\n\n  /** Value formatting mode */\n  readonly format = input<TrendFormat>('percentage');\n\n  /** Prefix string before number */\n  readonly prefix = input<string>('');\n\n  /** Suffix string after number (e.g. '%', 'pts') */\n  readonly suffix = input<string>('');\n\n  /** Number of decimal places */\n  readonly decimals = input<number>(1);\n\n  /** Whether to show '+' / '-' sign */\n  readonly showSign = input<boolean>(true);\n\n  /** Whether to show arrow icon */\n  readonly showIcon = input<boolean>(true);\n\n  /** Show only the icon without text */\n  readonly iconOnly = input<boolean>(false);\n\n  /** Secondary comparison label (e.g. 'vs last month') */\n  readonly label = input<string>('');\n\n  /** Currency symbol when format is 'currency' */\n  readonly currencySymbol = input<string>('$');\n\n  /** Custom formatter function */\n  readonly valueFormatter = input<((calc: TrendCalculationResult) => string) | null>(null);\n\n  /** Accessible label */\n  readonly ariaLabel = input<string | null>(null);\n\n  /** Calculation result */\n  readonly calculation = computed<TrendCalculationResult>(() => {\n    const cur = this.current();\n    const prev = this.previous();\n    const val = this.value();\n    const dec = this.decimals();\n\n    let delta = 0;\n    let deltaPct = 0;\n    let dir: 'up' | 'down' | 'flat' = 'flat';\n\n    if (cur !== null && prev !== null) {\n      delta = cur - prev;\n      deltaPct = prev !== 0 ? ((cur - prev) / Math.abs(prev)) * 100 : cur > 0 ? 100 : cur < 0 ? -100 : 0;\n      if (delta > 0.0001) dir = 'up';\n      else if (delta < -0.0001) dir = 'down';\n      else dir = 'flat';\n    } else if (typeof val === 'number') {\n      delta = val;\n      deltaPct = val;\n      if (val > 0.0001) dir = 'up';\n      else if (val < -0.0001) dir = 'down';\n      else dir = 'flat';\n    } else if (typeof val === 'string') {\n      const parsed = parseFloat(val.replace(/[^0-9.-]/g, ''));\n      delta = isNaN(parsed) ? 0 : parsed;\n      deltaPct = delta;\n      if (val.includes('+') || delta > 0.0001) dir = 'up';\n      else if (val.includes('-') || delta < -0.0001) dir = 'down';\n      else dir = 'flat';\n    }\n\n    // Force direction override if specified\n    const explicitDir = this.direction();\n    if (explicitDir !== 'auto') {\n      dir = explicitDir;\n    }\n\n    // Determine status (positive / negative / neutral) based on polarity or explicit override\n    const explicitStatus = this.status();\n    let calculatedStatus: 'positive' | 'negative' | 'neutral' = 'neutral';\n\n    if (explicitStatus !== 'auto') {\n      calculatedStatus = explicitStatus;\n    } else {\n      const pol = this.polarity();\n      if (pol === 'neutral' || dir === 'flat') {\n        calculatedStatus = 'neutral';\n      } else if (pol === 'normal') {\n        calculatedStatus = dir === 'up' ? 'positive' : 'negative';\n      } else if (pol === 'inverse') {\n        calculatedStatus = dir === 'up' ? 'negative' : 'positive';\n      }\n    }\n\n    // Format text\n    let formattedText = '';\n    const customFmt = this.valueFormatter();\n    if (customFmt) {\n      formattedText = customFmt({ delta, deltaPercentage: deltaPct, direction: dir, status: calculatedStatus, formattedText: '' });\n    } else if (typeof val === 'string' && cur === null) {\n      formattedText = val;\n    } else {\n      const sign = this.showSign() ? (dir === 'up' ? '+' : dir === 'down' ? '-' : '') : '';\n      const absDelta = Math.abs(delta);\n      const absPct = Math.abs(deltaPct);\n      const pfx = this.prefix();\n      const sfx = this.suffix();\n\n      switch (this.format()) {\n        case 'percentage':\n          formattedText = `${sign}${pfx}${absPct.toFixed(dec)}%${sfx}`;\n          break;\n        case 'currency':\n          formattedText = `${sign}${this.currencySymbol()}${pfx}${absDelta.toFixed(dec)}${sfx}`;\n          break;\n        case 'points':\n          formattedText = `${sign}${pfx}${absDelta.toFixed(dec)} pts${sfx}`;\n          break;\n        case 'number':\n        default:\n          formattedText = `${sign}${pfx}${absDelta.toFixed(dec)}${sfx}`;\n          break;\n      }\n    }\n\n    return {\n      delta,\n      deltaPercentage: deltaPct,\n      direction: dir,\n      status: calculatedStatus,\n      formattedText\n    };\n  });\n\n  readonly computedStatus = computed(() => this.calculation().status);\n  readonly computedDirection = computed(() => this.calculation().direction);\n  readonly displayValue = computed(() => this.calculation().formattedText);\n\n  readonly computedAriaLabel = computed(() => {\n    const custom = this.ariaLabel();\n    if (custom) return custom;\n    const calc = this.calculation();\n    const dirWord = calc.direction === 'up' ? 'Increased by' : calc.direction === 'down' ? 'Decreased by' : 'No change';\n    const labelText = this.label() ? ` (${this.label()})` : '';\n    return `Trend: ${dirWord} ${calc.formattedText}${labelText}`;\n  });\n}\n\n","<span class=\"talos-trend-main\">\n  @if (showIcon()) {\n    <span class=\"talos-trend-icon-wrapper\" aria-hidden=\"true\">\n      @switch (iconType()) {\n        @case ('arrow-vertical') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M8 12.5V3.5M8 3.5L4.5 7M8 3.5L11.5 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M8 3.5V12.5M8 12.5L4.5 9M8 12.5L11.5 9\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n        @case ('chevron') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 10L8 5.5L12.5 10\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 6L8 10.5L12.5 6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n        @case ('triangle') {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <path d=\"M8 4.5L13 12H3L8 4.5Z\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <path d=\"M8 11.5L3 4H13L8 11.5Z\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat talos-trend-icon--fill\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <rect x=\"3.5\" y=\"7\" width=\"9\" height=\"2\" rx=\"1\"/>\n            </svg>\n          }\n        }\n        @default {\n          @if (computedDirection() === 'up') {\n            <svg class=\"talos-trend-icon talos-trend-icon-up\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M4 11.5L11.5 4M11.5 4H6M11.5 4V9.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else if (computedDirection() === 'down') {\n            <svg class=\"talos-trend-icon talos-trend-icon-down\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M4 4.5L11.5 12M11.5 12H6M11.5 12V6.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          } @else {\n            <svg class=\"talos-trend-icon talos-trend-icon-flat\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\">\n              <path d=\"M3.5 8H12.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          }\n        }\n      }\n    </span>\n  }\n\n  @if (!iconOnly()) {\n    <span class=\"talos-trend-value\">{{ displayValue() }}</span>\n  }\n</span>\n\n@if (label()) {\n  <span class=\"talos-trend-label\">{{ label() }}</span>\n}\n\n","import { NgModule } from '@angular/core';\nimport { TalosTrendIndicatorComponent } from './trend-indicator.component';\n\n@NgModule({\n  imports: [TalosTrendIndicatorComponent],\n  exports: [TalosTrendIndicatorComponent]\n})\nexport class TalosTrendIndicatorModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}