@vespera-ui/angular 0.4.0 → 0.7.0

package/dist/fesm2022/vespera-ui-angular.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output } from '@angular/core';
+import { Input, Component, EventEmitter, Output, ViewChildren } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 
 class VspButton {
     variant = 'ghost';
@@ -1817,7 +1818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }] } });
 
-function smoothPath(pts) {
+function smoothPath$1(pts) {
     if (pts.length < 2)
         return '';
     let d = `M ${pts[0][0]} ${pts[0][1]}`;
@@ -1847,7 +1848,7 @@ class VspSparkline {
         ]);
     }
     get d() {
-        return smoothPath(this.pts);
+        return smoothPath$1(this.pts);
     }
     get areaD() {
         return `${this.d} L ${this.w} ${this.h} L 0 ${this.h} Z`;
@@ -2438,9 +2439,616 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Output
             }] } });
 
+class VspTree {
+    data = [];
+    defaultExpanded = [];
+    expanded = new Set();
+    selected = null;
+    ngOnInit() {
+        this.expanded = new Set(this.defaultExpanded);
+    }
+    id(n) {
+        return n.id ?? n.label;
+    }
+    hasKids(n) {
+        return (n.children ?? []).length > 0;
+    }
+    rowCls(n) {
+        const i = this.id(n);
+        return ('ui-tree-row' + (this.expanded.has(i) ? ' open' : '') + (this.selected === i ? ' sel' : ''));
+    }
+    activate(n) {
+        const i = this.id(n);
+        if (this.hasKids(n)) {
+            const next = new Set(this.expanded);
+            if (next.has(i))
+                next.delete(i);
+            else
+                next.add(i);
+            this.expanded = next;
+        }
+        this.selected = i;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspTree, isStandalone: true, selector: "vsp-tree", inputs: { data: "data", defaultExpanded: "defaultExpanded" }, ngImport: i0, template: `<div class="ui-tree">
+      @for (n of data; track $index) {
+        <ng-container *ngTemplateOutlet="nodeTpl; context: { $implicit: n }" />
+      }
+    </div>
+
+    <ng-template #nodeTpl let-n>
+      <div>
+        <div
+          [class]="rowCls(n)"
+          role="button"
+          tabindex="0"
+          (click)="activate(n)"
+          (keydown.enter)="activate(n)"
+        >
+          @if (hasKids(n)) {
+            <svg
+              class="tw-chev"
+              viewBox="0 0 24 24"
+              width="16"
+              height="16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M9 18l6-6-6-6" />
+            </svg>
+          } @else {
+            <span style="width: 16px; flex-shrink: 0"></span>
+          }
+          <svg
+            class="tw-icon"
+            viewBox="0 0 24 24"
+            width="16"
+            height="16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            @if (hasKids(n)) {
+              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+            } @else {
+              <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6" />
+            }
+          </svg>
+          <span
+            style="flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+            >{{ n.label }}</span
+          >
+          @if (n.badge != null) {
+            <span class="mono" style="font-size: 11px; color: var(--text-faint)">{{
+              n.badge
+            }}</span>
+          }
+        </div>
+        @if (hasKids(n) && expanded.has(id(n))) {
+          <div class="ui-tree-children">
+            @for (c of n.children; track $index) {
+              <ng-container *ngTemplateOutlet="nodeTpl; context: { $implicit: c }" />
+            }
+          </div>
+        }
+      </div>
+    </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspTree, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-tree',
+                    imports: [NgTemplateOutlet],
+                    template: `<div class="ui-tree">
+      @for (n of data; track $index) {
+        <ng-container *ngTemplateOutlet="nodeTpl; context: { $implicit: n }" />
+      }
+    </div>
+
+    <ng-template #nodeTpl let-n>
+      <div>
+        <div
+          [class]="rowCls(n)"
+          role="button"
+          tabindex="0"
+          (click)="activate(n)"
+          (keydown.enter)="activate(n)"
+        >
+          @if (hasKids(n)) {
+            <svg
+              class="tw-chev"
+              viewBox="0 0 24 24"
+              width="16"
+              height="16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M9 18l6-6-6-6" />
+            </svg>
+          } @else {
+            <span style="width: 16px; flex-shrink: 0"></span>
+          }
+          <svg
+            class="tw-icon"
+            viewBox="0 0 24 24"
+            width="16"
+            height="16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            @if (hasKids(n)) {
+              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+            } @else {
+              <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6" />
+            }
+          </svg>
+          <span
+            style="flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+            >{{ n.label }}</span
+          >
+          @if (n.badge != null) {
+            <span class="mono" style="font-size: 11px; color: var(--text-faint)">{{
+              n.badge
+            }}</span>
+          }
+        </div>
+        @if (hasKids(n) && expanded.has(id(n))) {
+          <div class="ui-tree-children">
+            @for (c of n.children; track $index) {
+              <ng-container *ngTemplateOutlet="nodeTpl; context: { $implicit: c }" />
+            }
+          </div>
+        }
+      </div>
+    </ng-template>`,
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], defaultExpanded: [{
+                type: Input
+            }] } });
+
+class VspOTPInput {
+    length = 6;
+    value = '';
+    valueChange = new EventEmitter();
+    inputs;
+    get indices() {
+        return Array.from({ length: this.length }, (_, i) => i);
+    }
+    set(i, raw) {
+        const clean = raw.replace(/\D/g, '');
+        const chars = Array.from({ length: this.length }, (_, k) => this.value[k] ?? '');
+        chars[i] = clean.slice(-1);
+        this.value = chars.join('');
+        this.valueChange.emit(this.value);
+        if (clean && i < this.length - 1)
+            this.inputs.get(i + 1)?.nativeElement.focus();
+    }
+    onKey(i, e) {
+        if (e.key === 'Backspace' && !this.value[i] && i > 0)
+            this.inputs.get(i - 1)?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspOTPInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspOTPInput, isStandalone: true, selector: "vsp-otp-input", inputs: { length: "length", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputs", predicate: ["otp"], descendants: true }], ngImport: i0, template: `<div class="ui-otp">
+    @for (i of indices; track i) {
+      <input
+        #otp
+        inputmode="numeric"
+        maxlength="1"
+        [value]="value[i] ?? ''"
+        (input)="set(i, otp.value)"
+        (keydown)="onKey(i, $event)"
+      />
+    }
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspOTPInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-otp-input',
+                    template: `<div class="ui-otp">
+    @for (i of indices; track i) {
+      <input
+        #otp
+        inputmode="numeric"
+        maxlength="1"
+        [value]="value[i] ?? ''"
+        (input)="set(i, otp.value)"
+        (keydown)="onKey(i, $event)"
+      />
+    }
+  </div>`,
+                }]
+        }], propDecorators: { length: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], inputs: [{
+                type: ViewChildren,
+                args: ['otp']
+            }] } });
+
+function smoothPath(pts) {
+    if (pts.length < 2)
+        return '';
+    let d = `M ${pts[0][0]} ${pts[0][1]}`;
+    for (let i = 0; i < pts.length - 1; i++) {
+        const [x0, y0] = pts[i];
+        const [x1, y1] = pts[i + 1];
+        const cx = (x0 + x1) / 2;
+        d += ` C ${cx} ${y0} ${cx} ${y1} ${x1} ${y1}`;
+    }
+    return d;
+}
+function niceNum(n) {
+    if (Math.abs(n) >= 1e6)
+        return (n / 1e6).toFixed(n % 1e6 === 0 ? 0 : 1) + 'M';
+    if (Math.abs(n) >= 1e3)
+        return (n / 1e3).toFixed(n % 1e3 === 0 ? 0 : 1) + 'k';
+    return String(n);
+}
+let acUid = 0;
+class VspAreaChart {
+    series = [];
+    labels;
+    width = 760;
+    height = 260;
+    color = 'var(--accent)';
+    color2 = 'var(--accent-2)';
+    dual = false;
+    gid = 'ac' + ++acUid;
+    padL = 38;
+    padB = 26;
+    padT = 12;
+    padR = 8;
+    get innerW() {
+        return Math.max(10, this.width - this.padL - this.padR);
+    }
+    get innerH() {
+        return this.height - this.padB - this.padT;
+    }
+    get s0() {
+        return this.series[0] ?? [];
+    }
+    get s1() {
+        return this.series[1];
+    }
+    get max() {
+        return Math.max(...(this.dual && this.s1 ? [...this.s0, ...this.s1] : this.s0), 0) * 1.12;
+    }
+    get rng() {
+        return this.max || 1;
+    }
+    sx(i, len) {
+        return this.padL + (i / Math.max(1, len - 1)) * this.innerW;
+    }
+    sy(v) {
+        return this.padT + this.innerH - (v / this.rng) * this.innerH;
+    }
+    showLabel(i) {
+        return !!this.labels && i % Math.ceil(this.labels.length / 7) === 0;
+    }
+    get ticks() {
+        return Array.from({ length: 5 }, (_, i) => ({
+            y: this.sy((this.max / 4) * i),
+            label: niceNum(Math.round((this.max / 4) * i)),
+        }));
+    }
+    get lineEls() {
+        const sets = this.dual && this.s1 ? [this.s0, this.s1] : [this.s0];
+        return sets.map((arr, li) => {
+            const pts = arr.map((v, i) => [this.sx(i, arr.length), this.sy(v)]);
+            const last = pts[pts.length - 1];
+            const first = pts[0];
+            return {
+                d: smoothPath(pts),
+                area: li === 0 && first && last
+                    ? `${smoothPath(pts)} L ${last[0]} ${this.padT + this.innerH} L ${first[0]} ${this.padT + this.innerH} Z`
+                    : null,
+                stroke: li === 0 ? this.color : this.color2,
+                dash: li === 1 ? '5 5' : null,
+                opacity: li === 1 ? 0.7 : 1,
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspAreaChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspAreaChart, isStandalone: true, selector: "vsp-area-chart", inputs: { series: "series", labels: "labels", width: "width", height: "height", color: "color", color2: "color2", dual: "dual" }, ngImport: i0, template: `<svg [attr.width]="width" [attr.height]="height" style="display: block">
+    <defs>
+      <linearGradient [id]="gid" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0" [attr.stop-color]="color" stop-opacity="0.22" />
+        <stop offset="1" [attr.stop-color]="color" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+    @for (t of ticks; track $index) {
+      <line
+        [attr.x1]="padL"
+        [attr.x2]="width - padR"
+        [attr.y1]="t.y"
+        [attr.y2]="t.y"
+        stroke="var(--grid-line)"
+        stroke-width="1"
+      />
+      <text
+        [attr.x]="padL - 8"
+        [attr.y]="t.y + 3.5"
+        text-anchor="end"
+        font-size="10"
+        fill="var(--text-faint)"
+        font-family="var(--font-mono)"
+      >
+        {{ t.label }}
+      </text>
+    }
+    @if (labels) {
+      @for (lb of labels; track $index; let i = $index) {
+        @if (showLabel(i)) {
+          <text
+            [attr.x]="sx(i, labels.length)"
+            [attr.y]="height - 8"
+            text-anchor="middle"
+            font-size="10"
+            fill="var(--text-faint)"
+            font-family="var(--font-mono)"
+          >
+            {{ lb }}
+          </text>
+        }
+      }
+    }
+    @for (ln of lineEls; track $index) {
+      @if (ln.area) {
+        <path [attr.d]="ln.area" [attr.fill]="'url(#' + gid + ')'" />
+      }
+      <path
+        [attr.d]="ln.d"
+        fill="none"
+        [attr.stroke]="ln.stroke"
+        stroke-width="2.4"
+        stroke-linecap="round"
+        [attr.stroke-dasharray]="ln.dash"
+        [style.opacity]="ln.opacity"
+      />
+    }
+  </svg>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspAreaChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-area-chart',
+                    template: `<svg [attr.width]="width" [attr.height]="height" style="display: block">
+    <defs>
+      <linearGradient [id]="gid" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0" [attr.stop-color]="color" stop-opacity="0.22" />
+        <stop offset="1" [attr.stop-color]="color" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+    @for (t of ticks; track $index) {
+      <line
+        [attr.x1]="padL"
+        [attr.x2]="width - padR"
+        [attr.y1]="t.y"
+        [attr.y2]="t.y"
+        stroke="var(--grid-line)"
+        stroke-width="1"
+      />
+      <text
+        [attr.x]="padL - 8"
+        [attr.y]="t.y + 3.5"
+        text-anchor="end"
+        font-size="10"
+        fill="var(--text-faint)"
+        font-family="var(--font-mono)"
+      >
+        {{ t.label }}
+      </text>
+    }
+    @if (labels) {
+      @for (lb of labels; track $index; let i = $index) {
+        @if (showLabel(i)) {
+          <text
+            [attr.x]="sx(i, labels.length)"
+            [attr.y]="height - 8"
+            text-anchor="middle"
+            font-size="10"
+            fill="var(--text-faint)"
+            font-family="var(--font-mono)"
+          >
+            {{ lb }}
+          </text>
+        }
+      }
+    }
+    @for (ln of lineEls; track $index) {
+      @if (ln.area) {
+        <path [attr.d]="ln.area" [attr.fill]="'url(#' + gid + ')'" />
+      }
+      <path
+        [attr.d]="ln.d"
+        fill="none"
+        [attr.stroke]="ln.stroke"
+        stroke-width="2.4"
+        stroke-linecap="round"
+        [attr.stroke-dasharray]="ln.dash"
+        [style.opacity]="ln.opacity"
+      />
+    }
+  </svg>`,
+                }]
+        }], propDecorators: { series: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], color2: [{
+                type: Input
+            }], dual: [{
+                type: Input
+            }] } });
+class VspBarChart {
+    data = [];
+    labels;
+    width = 620;
+    height = 240;
+    color = 'var(--accent)';
+    padL = 34;
+    padB = 26;
+    padT = 10;
+    get innerW() {
+        return Math.max(10, this.width - this.padL - 8);
+    }
+    get innerH() {
+        return this.height - this.padB - this.padT;
+    }
+    get max() {
+        return Math.max(...this.data, 0) * 1.15 || 1;
+    }
+    get bw() {
+        return this.innerW / (this.data.length || 1);
+    }
+    get barFill() {
+        return `color-mix(in oklab, ${this.color} 78%, transparent)`;
+    }
+    get grid() {
+        return [0, 0.5, 1].map((f) => ({
+            y: this.padT + this.innerH - f * this.innerH,
+            label: niceNum(Math.round(this.max * f)),
+        }));
+    }
+    get bars() {
+        return this.data.map((v, i) => {
+            const bh = (v / this.max) * this.innerH;
+            const x = this.padL + i * this.bw + this.bw * 0.18;
+            const bwi = this.bw * 0.64;
+            return { x, y: this.padT + this.innerH - bh, w: bwi, h: bh, label: this.labels?.[i] };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspBarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspBarChart, isStandalone: true, selector: "vsp-bar-chart", inputs: { data: "data", labels: "labels", width: "width", height: "height", color: "color" }, ngImport: i0, template: `<svg [attr.width]="width" [attr.height]="height" style="display: block">
+    @for (g of grid; track $index) {
+      <line
+        [attr.x1]="padL"
+        [attr.x2]="width - 8"
+        [attr.y1]="g.y"
+        [attr.y2]="g.y"
+        stroke="var(--grid-line)"
+      />
+      <text
+        [attr.x]="padL - 8"
+        [attr.y]="g.y + 3.5"
+        text-anchor="end"
+        font-size="10"
+        fill="var(--text-faint)"
+        font-family="var(--font-mono)"
+      >
+        {{ g.label }}
+      </text>
+    }
+    @for (b of bars; track $index) {
+      <rect
+        [attr.x]="b.x"
+        [attr.y]="b.y"
+        [attr.width]="b.w"
+        [attr.height]="b.h"
+        rx="4"
+        [attr.fill]="barFill"
+      />
+      @if (b.label != null) {
+        <text
+          [attr.x]="b.x + b.w / 2"
+          [attr.y]="height - 8"
+          text-anchor="middle"
+          font-size="10"
+          fill="var(--text-faint)"
+          font-family="var(--font-mono)"
+        >
+          {{ b.label }}
+        </text>
+      }
+    }
+  </svg>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspBarChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-bar-chart',
+                    template: `<svg [attr.width]="width" [attr.height]="height" style="display: block">
+    @for (g of grid; track $index) {
+      <line
+        [attr.x1]="padL"
+        [attr.x2]="width - 8"
+        [attr.y1]="g.y"
+        [attr.y2]="g.y"
+        stroke="var(--grid-line)"
+      />
+      <text
+        [attr.x]="padL - 8"
+        [attr.y]="g.y + 3.5"
+        text-anchor="end"
+        font-size="10"
+        fill="var(--text-faint)"
+        font-family="var(--font-mono)"
+      >
+        {{ g.label }}
+      </text>
+    }
+    @for (b of bars; track $index) {
+      <rect
+        [attr.x]="b.x"
+        [attr.y]="b.y"
+        [attr.width]="b.w"
+        [attr.height]="b.h"
+        rx="4"
+        [attr.fill]="barFill"
+      />
+      @if (b.label != null) {
+        <text
+          [attr.x]="b.x + b.w / 2"
+          [attr.y]="height - 8"
+          text-anchor="middle"
+          font-size="10"
+          fill="var(--text-faint)"
+          font-family="var(--font-mono)"
+        >
+          {{ b.label }}
+        </text>
+      }
+    }
+  </svg>`,
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { VspAccordion, VspAlert, VspAvatar, VspAvatarGroup, VspBadge, VspBanner, VspBreadcrumb, VspButton, VspCard, VspCardHead, VspCheckbox, VspCircularProgress, VspCopyButton, VspDescriptionList, VspDivider, VspDonut, VspEmptyState, VspField, VspIconButton, VspInlineEdit, VspInput, VspKbd, VspNativeSelect, VspNumberStepper, VspPagination, VspProgress, VspRadio, VspRadioGroup, VspSegmented, VspSkeleton, VspSlider, VspSparkline, VspSpinner, VspStat, VspStatCard, VspStepper, VspSwitch, VspTabs, VspTag, VspTextarea, VspTimeline };
+export { VspAccordion, VspAlert, VspAreaChart, VspAvatar, VspAvatarGroup, VspBadge, VspBanner, VspBarChart, VspBreadcrumb, VspButton, VspCard, VspCardHead, VspCheckbox, VspCircularProgress, VspCopyButton, VspDescriptionList, VspDivider, VspDonut, VspEmptyState, VspField, VspIconButton, VspInlineEdit, VspInput, VspKbd, VspNativeSelect, VspNumberStepper, VspOTPInput, VspPagination, VspProgress, VspRadio, VspRadioGroup, VspSegmented, VspSkeleton, VspSlider, VspSparkline, VspSpinner, VspStat, VspStatCard, VspStepper, VspSwitch, VspTabs, VspTag, VspTextarea, VspTimeline, VspTree };
 //# sourceMappingURL=vespera-ui-angular.mjs.map