@joanroucoux/cairn-ui 0.7.1 → 0.8.0

package/fesm2022/joanroucoux-cairn-ui-delta.mjs

@@ -0,0 +1,103 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component } from '@angular/core';
+
+/** Available delta emphases. `DeltaEmphasis` is derived from this tuple. */
+const DELTA_EMPHASES = ['text', 'pill'];
+/** Type sizes. `DeltaSize` is derived from this tuple. */
+const DELTA_SIZES = ['label', 'inherit'];
+/** Font weights. `DeltaWeight` is derived from this tuple. */
+const DELTA_WEIGHTS = ['medium', 'regular'];
+const BASE_CLASSES = 'inline-flex items-center gap-1 tabular-nums';
+const SIZE_CLASSES = {
+    label: 'text-label',
+    inherit: '',
+};
+const WEIGHT_CLASSES = {
+    medium: 'font-medium',
+    regular: 'font-normal',
+};
+const PILL_CLASSES = 'h-6 rounded-pill px-2';
+const TEXT_CLASSES = {
+    positive: 'text-(--positive)',
+    negative: 'text-(--negative)',
+    neutral: 'text-(--muted-foreground)',
+    unknown: 'text-(--subtle-foreground)',
+};
+const PILL_BACKGROUND_CLASS = 'bg-(--soft)';
+/**
+ * Signed amount whose sign carries meaning: a gain, a loss, or an unknown.
+ *
+ * A null value is not a zero: a holding with no cost basis exists, and showing 0 would falsely
+ * claim a known gain of zero. Color never carries the sign on its own: the projected text must
+ * already contain a + or a minus sign.
+ *
+ * @example
+ * <ui-delta [value]="holding.dayChangeEur" unknownLabel="Not available">
+ *   {{ holding.dayChangeEur | signedMoney }}
+ * </ui-delta>
+ */
+class UiDelta {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    unknownLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unknownLabel" }] : /* istanbul ignore next */ []));
+    emphasis = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []));
+    size = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    weight = input('medium', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
+    sign = computed(() => {
+        const value = this.value();
+        if (value === null || value === undefined) {
+            return 'unknown';
+        }
+        if (value > 0) {
+            return 'positive';
+        }
+        if (value < 0) {
+            return 'negative';
+        }
+        return 'neutral';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sign" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const sign = this.sign();
+        const background = this.emphasis() === 'pill' ? `${PILL_CLASSES} ${PILL_BACKGROUND_CLASS}` : 'bg-transparent';
+        return `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]} ${WEIGHT_CLASSES[this.weight()]} ${TEXT_CLASSES[sign]} ${background}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDelta, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiDelta, isStandalone: true, selector: "ui-delta", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, unknownLabel: { classPropertyName: "unknownLabel", publicName: "unknownLabel", isSignal: true, isRequired: true, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    @if (sign() === 'unknown') {
+      <span aria-hidden="true">&mdash;</span>
+      <span class="sr-only">{{ unknownLabel() }}</span>
+    } @else {
+      <ng-content />
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDelta, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-delta',
+                    template: `
+    @if (sign() === 'unknown') {
+      <span aria-hidden="true">&mdash;</span>
+      <span class="sr-only">{{ unknownLabel() }}</span>
+    } @else {
+      <ng-content />
+    }
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unknownLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unknownLabel", required: true }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DELTA_EMPHASES, DELTA_SIZES, DELTA_WEIGHTS, UiDelta };
+//# sourceMappingURL=joanroucoux-cairn-ui-delta.mjs.map

package/fesm2022/joanroucoux-cairn-ui-delta.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-delta.mjs","sources":["../../../projects/ui/delta/delta.ts","../../../projects/ui/delta/joanroucoux-cairn-ui-delta.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\n/** Available delta emphases. `DeltaEmphasis` is derived from this tuple. */\nexport const DELTA_EMPHASES = ['text', 'pill'] as const;\nexport type DeltaEmphasis = (typeof DELTA_EMPHASES)[number];\n\n/** Type sizes. `DeltaSize` is derived from this tuple. */\nexport const DELTA_SIZES = ['label', 'inherit'] as const;\nexport type DeltaSize = (typeof DELTA_SIZES)[number];\n\n/** Font weights. `DeltaWeight` is derived from this tuple. */\nexport const DELTA_WEIGHTS = ['medium', 'regular'] as const;\nexport type DeltaWeight = (typeof DELTA_WEIGHTS)[number];\n\nconst BASE_CLASSES = 'inline-flex items-center gap-1 tabular-nums';\n\nconst SIZE_CLASSES: Record<DeltaSize, string> = {\n  label: 'text-label',\n  inherit: '',\n};\n\nconst WEIGHT_CLASSES: Record<DeltaWeight, string> = {\n  medium: 'font-medium',\n  regular: 'font-normal',\n};\n\nconst PILL_CLASSES = 'h-6 rounded-pill px-2';\n\ntype Sign = 'positive' | 'negative' | 'neutral' | 'unknown';\n\nconst TEXT_CLASSES: Record<Sign, string> = {\n  positive: 'text-(--positive)',\n  negative: 'text-(--negative)',\n  neutral: 'text-(--muted-foreground)',\n  unknown: 'text-(--subtle-foreground)',\n};\n\nconst PILL_BACKGROUND_CLASS = 'bg-(--soft)';\n\n/**\n * Signed amount whose sign carries meaning: a gain, a loss, or an unknown.\n *\n * A null value is not a zero: a holding with no cost basis exists, and showing 0 would falsely\n * claim a known gain of zero. Color never carries the sign on its own: the projected text must\n * already contain a + or a minus sign.\n *\n * @example\n * <ui-delta [value]=\"holding.dayChangeEur\" unknownLabel=\"Not available\">\n *   {{ holding.dayChangeEur | signedMoney }}\n * </ui-delta>\n */\n@Component({\n  selector: 'ui-delta',\n  template: `\n    @if (sign() === 'unknown') {\n      <span aria-hidden=\"true\">&mdash;</span>\n      <span class=\"sr-only\">{{ unknownLabel() }}</span>\n    } @else {\n      <ng-content />\n    }\n  `,\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class UiDelta {\n  readonly value = input.required<number | null | undefined>();\n  readonly unknownLabel = input.required<string>();\n  readonly emphasis = input<DeltaEmphasis>('text');\n  readonly size = input<DeltaSize>('label');\n  readonly weight = input<DeltaWeight>('medium');\n\n  protected readonly sign = computed<Sign>(() => {\n    const value = this.value();\n\n    if (value === null || value === undefined) {\n      return 'unknown';\n    }\n    if (value > 0) {\n      return 'positive';\n    }\n    if (value < 0) {\n      return 'negative';\n    }\n    return 'neutral';\n  });\n\n  protected readonly classes = computed(() => {\n    const sign = this.sign();\n    const background = this.emphasis() === 'pill' ? `${PILL_CLASSES} ${PILL_BACKGROUND_CLASS}` : 'bg-transparent';\n\n    return `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]} ${WEIGHT_CLASSES[this.weight()]} ${TEXT_CLASSES[sign]} ${background}`;\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}