@vespera-ui/angular 0.2.0 → 0.4.0

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

@@ -1817,9 +1817,630 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }] } });
 
+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;
+}
+let sparkUid = 0;
+class VspSparkline {
+    data = [];
+    color = 'var(--accent)';
+    w = 110;
+    h = 34;
+    fill = true;
+    gid = 'spk' + ++sparkUid;
+    get pts() {
+        const min = Math.min(...this.data);
+        const max = Math.max(...this.data);
+        const rng = max - min || 1;
+        return this.data.map((v, i) => [
+            (i / (this.data.length - 1)) * this.w,
+            this.h - 3 - ((v - min) / rng) * (this.h - 6),
+        ]);
+    }
+    get d() {
+        return smoothPath(this.pts);
+    }
+    get areaD() {
+        return `${this.d} L ${this.w} ${this.h} L 0 ${this.h} Z`;
+    }
+    get last() {
+        return this.pts[this.pts.length - 1] ?? [0, 0];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSparkline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspSparkline, isStandalone: true, selector: "vsp-sparkline", inputs: { data: "data", color: "color", w: "w", h: "h", fill: "fill" }, ngImport: i0, template: `<svg
+    [attr.width]="w"
+    [attr.height]="h"
+    [attr.viewBox]="'0 0 ' + w + ' ' + h"
+    style="display: block; overflow: visible"
+  >
+    @if (fill) {
+      <defs>
+        <linearGradient [id]="gid" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0" [attr.stop-color]="color" stop-opacity="0.28" />
+          <stop offset="1" [attr.stop-color]="color" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <path [attr.d]="areaD" [attr.fill]="'url(#' + gid + ')'" />
+    }
+    <path [attr.d]="d" fill="none" [attr.stroke]="color" stroke-width="2" stroke-linecap="round" />
+    <circle [attr.cx]="last[0]" [attr.cy]="last[1]" r="2.6" [attr.fill]="color" />
+  </svg>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSparkline, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-sparkline',
+                    template: `<svg
+    [attr.width]="w"
+    [attr.height]="h"
+    [attr.viewBox]="'0 0 ' + w + ' ' + h"
+    style="display: block; overflow: visible"
+  >
+    @if (fill) {
+      <defs>
+        <linearGradient [id]="gid" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0" [attr.stop-color]="color" stop-opacity="0.28" />
+          <stop offset="1" [attr.stop-color]="color" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <path [attr.d]="areaD" [attr.fill]="'url(#' + gid + ')'" />
+    }
+    <path [attr.d]="d" fill="none" [attr.stroke]="color" stroke-width="2" stroke-linecap="round" />
+    <circle [attr.cx]="last[0]" [attr.cy]="last[1]" r="2.6" [attr.fill]="color" />
+  </svg>`,
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], w: [{
+                type: Input
+            }], h: [{
+                type: Input
+            }], fill: [{
+                type: Input
+            }] } });
+class VspDonut {
+    data = [];
+    size = 168;
+    thickness = 22;
+    get total() {
+        return this.data.reduce((s, d) => s + d.value, 0) || 1;
+    }
+    get r() {
+        return (this.size - this.thickness) / 2;
+    }
+    get c() {
+        return this.size / 2;
+    }
+    get circ() {
+        return 2 * Math.PI * this.r;
+    }
+    get segs() {
+        let acc = 0;
+        return this.data.map((d) => {
+            const len = (d.value / this.total) * this.circ;
+            const seg = { color: d.color, dash: `${len - 2.5} ${this.circ - len + 2.5}`, offset: -acc };
+            acc += len;
+            return seg;
+        });
+    }
+    pct(v) {
+        return Math.round((v / this.total) * 100);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspDonut, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspDonut, isStandalone: true, selector: "vsp-donut", inputs: { data: "data", size: "size", thickness: "thickness" }, ngImport: i0, template: `<div style="display: flex; align-items: center; gap: 22px">
+    <svg [attr.width]="size" [attr.height]="size" style="transform: rotate(-90deg); flex-shrink: 0">
+      <circle
+        [attr.cx]="c"
+        [attr.cy]="c"
+        [attr.r]="r"
+        fill="none"
+        stroke="var(--surface-3)"
+        [attr.stroke-width]="thickness"
+      />
+      @for (s of segs; track $index) {
+        <circle
+          [attr.cx]="c"
+          [attr.cy]="c"
+          [attr.r]="r"
+          fill="none"
+          [attr.stroke]="s.color"
+          [attr.stroke-width]="thickness"
+          [attr.stroke-dasharray]="s.dash"
+          [attr.stroke-dashoffset]="s.offset"
+          stroke-linecap="round"
+        />
+      }
+    </svg>
+    <div style="display: flex; flex-direction: column; gap: 9px; flex: 1">
+      @for (d of data; track $index) {
+        <div style="display: flex; align-items: center; gap: 9px; font-size: 12.5px">
+          <i
+            [style.background]="d.color"
+            style="width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0"
+          ></i>
+          <span style="color: var(--text-dim); flex: 1">{{ d.label }}</span>
+          <span class="mono tnum" style="font-weight: 600">{{ pct(d.value) }}%</span>
+        </div>
+      }
+    </div>
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspDonut, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-donut',
+                    template: `<div style="display: flex; align-items: center; gap: 22px">
+    <svg [attr.width]="size" [attr.height]="size" style="transform: rotate(-90deg); flex-shrink: 0">
+      <circle
+        [attr.cx]="c"
+        [attr.cy]="c"
+        [attr.r]="r"
+        fill="none"
+        stroke="var(--surface-3)"
+        [attr.stroke-width]="thickness"
+      />
+      @for (s of segs; track $index) {
+        <circle
+          [attr.cx]="c"
+          [attr.cy]="c"
+          [attr.r]="r"
+          fill="none"
+          [attr.stroke]="s.color"
+          [attr.stroke-width]="thickness"
+          [attr.stroke-dasharray]="s.dash"
+          [attr.stroke-dashoffset]="s.offset"
+          stroke-linecap="round"
+        />
+      }
+    </svg>
+    <div style="display: flex; flex-direction: column; gap: 9px; flex: 1">
+      @for (d of data; track $index) {
+        <div style="display: flex; align-items: center; gap: 9px; font-size: 12.5px">
+          <i
+            [style.background]="d.color"
+            style="width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0"
+          ></i>
+          <span style="color: var(--text-dim); flex: 1">{{ d.label }}</span>
+          <span class="mono tnum" style="font-weight: 600">{{ pct(d.value) }}%</span>
+        </div>
+      }
+    </div>
+  </div>`,
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], thickness: [{
+                type: Input
+            }] } });
+class VspStatCard {
+    label;
+    value;
+    delta;
+    deltaDir = 'up';
+    spark;
+    sparkColor = 'var(--accent)';
+    get deltaCls() {
+        return 'badge ' + (this.deltaDir === 'up' ? 'badge-pos' : 'badge-neg');
+    }
+    get arrow() {
+        return this.deltaDir === 'up' ? 'M12 19V5M5 12l7-7 7 7' : 'M12 5v14M5 12l7 7 7-7';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspStatCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspStatCard, isStandalone: true, selector: "vsp-stat-card", inputs: { label: "label", value: "value", delta: "delta", deltaDir: "deltaDir", spark: "spark", sparkColor: "sparkColor" }, ngImport: i0, template: `<div
+    class="card card-pad vsp-rise"
+    style="display: flex; flex-direction: column; gap: 14px"
+  >
+    <div style="display: flex; align-items: center; justify-content: space-between">
+      <div style="display: flex; align-items: center; gap: 10px">
+        <span
+          style="width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 13%, transparent); color: var(--accent)"
+        >
+          <ng-content select="[slot=icon]" />
+        </span>
+        <span class="eyebrow">{{ label }}</span>
+      </div>
+      @if (delta != null) {
+        <span [class]="deltaCls">
+          <svg
+            viewBox="0 0 24 24"
+            width="11"
+            height="11"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path [attr.d]="arrow" />
+          </svg>
+          {{ delta }}
+        </span>
+      }
+    </div>
+    <div style="display: flex; align-items: flex-end; justify-content: space-between; gap: 12px">
+      <div
+        class="tnum"
+        style="font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1"
+      >
+        {{ value }}
+      </div>
+      @if (spark) {
+        <vsp-sparkline [data]="spark" [color]="sparkColor" />
+      }
+    </div>
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: VspSparkline, selector: "vsp-sparkline", inputs: ["data", "color", "w", "h", "fill"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspStatCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-stat-card',
+                    imports: [VspSparkline],
+                    template: `<div
+    class="card card-pad vsp-rise"
+    style="display: flex; flex-direction: column; gap: 14px"
+  >
+    <div style="display: flex; align-items: center; justify-content: space-between">
+      <div style="display: flex; align-items: center; gap: 10px">
+        <span
+          style="width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 13%, transparent); color: var(--accent)"
+        >
+          <ng-content select="[slot=icon]" />
+        </span>
+        <span class="eyebrow">{{ label }}</span>
+      </div>
+      @if (delta != null) {
+        <span [class]="deltaCls">
+          <svg
+            viewBox="0 0 24 24"
+            width="11"
+            height="11"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path [attr.d]="arrow" />
+          </svg>
+          {{ delta }}
+        </span>
+      }
+    </div>
+    <div style="display: flex; align-items: flex-end; justify-content: space-between; gap: 12px">
+      <div
+        class="tnum"
+        style="font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1"
+      >
+        {{ value }}
+      </div>
+      @if (spark) {
+        <vsp-sparkline [data]="spark" [color]="sparkColor" />
+      }
+    </div>
+  </div>`,
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], delta: [{
+                type: Input
+            }], deltaDir: [{
+                type: Input
+            }], spark: [{
+                type: Input
+            }], sparkColor: [{
+                type: Input
+            }] } });
+
+class VspNumberStepper {
+    value = 0;
+    valueChange = new EventEmitter();
+    min;
+    max;
+    step = 1;
+    unit;
+    set(v) {
+        let n = v;
+        if (this.min != null && n < this.min)
+            n = this.min;
+        if (this.max != null && n > this.max)
+            n = this.max;
+        this.value = n;
+        this.valueChange.emit(n);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspNumberStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspNumberStepper, isStandalone: true, selector: "vsp-number-stepper", inputs: { value: "value", min: "min", max: "max", step: "step", unit: "unit" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `<div class="ui-stepper">
+    <button
+      type="button"
+      aria-label="Decrease"
+      [disabled]="min != null && value <= min"
+      (click)="set(value - step)"
+    >
+      −
+    </button>
+    <span class="val"
+      >{{ value }}
+      @if (unit) {
+        <i>{{ unit }}</i>
+      }
+    </span>
+    <button
+      type="button"
+      aria-label="Increase"
+      [disabled]="max != null && value >= max"
+      (click)="set(value + step)"
+    >
+      +
+    </button>
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspNumberStepper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-number-stepper',
+                    template: `<div class="ui-stepper">
+    <button
+      type="button"
+      aria-label="Decrease"
+      [disabled]="min != null && value <= min"
+      (click)="set(value - step)"
+    >
+      −
+    </button>
+    <span class="val"
+      >{{ value }}
+      @if (unit) {
+        <i>{{ unit }}</i>
+      }
+    </span>
+    <button
+      type="button"
+      aria-label="Increase"
+      [disabled]="max != null && value >= max"
+      (click)="set(value + step)"
+    >
+      +
+    </button>
+  </div>`,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], unit: [{
+                type: Input
+            }] } });
+class VspCopyButton {
+    text = '';
+    label = 'Copy';
+    size = 'sm';
+    done = false;
+    get cls() {
+        return 'btn btn-ghost' + (this.size === 'sm' ? ' btn-sm' : '');
+    }
+    async copy() {
+        try {
+            await navigator.clipboard?.writeText(this.text);
+        }
+        catch {
+            /* clipboard unavailable */
+        }
+        this.done = true;
+        setTimeout(() => (this.done = false), 1400);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspCopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspCopyButton, isStandalone: true, selector: "vsp-copy-button", inputs: { text: "text", label: "label", size: "size" }, ngImport: i0, template: `<button type="button" [class]="cls" (click)="copy()">
+    @if (done) {
+      <span style="color: var(--success); display: inline-flex">
+        <svg
+          viewBox="0 0 24 24"
+          width="15"
+          height="15"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M20 6L9 17l-5-5" />
+        </svg> </span
+      >Copied
+    } @else {
+      <svg
+        viewBox="0 0 24 24"
+        width="15"
+        height="15"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6" />
+      </svg>
+      {{ label }}
+    }
+  </button>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspCopyButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-copy-button',
+                    template: `<button type="button" [class]="cls" (click)="copy()">
+    @if (done) {
+      <span style="color: var(--success); display: inline-flex">
+        <svg
+          viewBox="0 0 24 24"
+          width="15"
+          height="15"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M20 6L9 17l-5-5" />
+        </svg> </span
+      >Copied
+    } @else {
+      <svg
+        viewBox="0 0 24 24"
+        width="15"
+        height="15"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6" />
+      </svg>
+      {{ label }}
+    }
+  </button>`,
+                }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+class VspInlineEdit {
+    value = '';
+    placeholder = 'Empty';
+    save = new EventEmitter();
+    editing = false;
+    draft = '';
+    start() {
+        this.draft = this.value;
+        this.editing = true;
+    }
+    commit() {
+        this.editing = false;
+        if (this.draft !== this.value)
+            this.save.emit(this.draft);
+    }
+    cancel() {
+        this.draft = this.value;
+        this.editing = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspInlineEdit, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspInlineEdit, isStandalone: true, selector: "vsp-inline-edit", inputs: { value: "value", placeholder: "placeholder" }, outputs: { save: "save" }, ngImport: i0, template: `@if (editing) {
+      <input
+        #inp
+        autofocus
+        class="ui-input"
+        [value]="draft"
+        style="height: 32px; max-width: 240px"
+        (input)="draft = inp.value"
+        (blur)="commit()"
+        (keydown.enter)="commit()"
+        (keydown.escape)="cancel()"
+      />
+    } @else {
+      <span
+        class="ui-inline"
+        role="button"
+        tabindex="0"
+        (click)="start()"
+        (keydown.enter)="start()"
+      >
+        <span [style.color]="value ? 'var(--text)' : 'var(--text-faint)'">{{
+          value || placeholder
+        }}</span>
+        <span class="pen" style="display: inline-flex">
+          <svg
+            viewBox="0 0 24 24"
+            width="14"
+            height="14"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4z" />
+          </svg>
+        </span>
+      </span>
+    }`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspInlineEdit, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-inline-edit',
+                    template: `@if (editing) {
+      <input
+        #inp
+        autofocus
+        class="ui-input"
+        [value]="draft"
+        style="height: 32px; max-width: 240px"
+        (input)="draft = inp.value"
+        (blur)="commit()"
+        (keydown.enter)="commit()"
+        (keydown.escape)="cancel()"
+      />
+    } @else {
+      <span
+        class="ui-inline"
+        role="button"
+        tabindex="0"
+        (click)="start()"
+        (keydown.enter)="start()"
+      >
+        <span [style.color]="value ? 'var(--text)' : 'var(--text-faint)'">{{
+          value || placeholder
+        }}</span>
+        <span class="pen" style="display: inline-flex">
+          <svg
+            viewBox="0 0 24 24"
+            width="14"
+            height="14"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4z" />
+          </svg>
+        </span>
+      </span>
+    }`,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], save: [{
+                type: Output
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { VspAccordion, VspAlert, VspAvatar, VspAvatarGroup, VspBadge, VspBanner, VspBreadcrumb, VspButton, VspCard, VspCardHead, VspCheckbox, VspCircularProgress, VspDescriptionList, VspDivider, VspEmptyState, VspField, VspIconButton, VspInput, VspKbd, VspNativeSelect, VspPagination, VspProgress, VspRadio, VspRadioGroup, VspSegmented, VspSkeleton, VspSlider, VspSpinner, VspStat, VspStepper, VspSwitch, VspTabs, VspTag, VspTextarea, VspTimeline };
+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 };
 //# sourceMappingURL=vespera-ui-angular.mjs.map