@sentropic/design-system-angular 0.36.54

package/dist/BoxPlotChart.js

@@ -0,0 +1,246 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+const BOX_TONES = [
+    "category1", "category2", "category3", "category4",
+    "category5", "category6", "category7", "category8",
+];
+const BOX_MARGIN = { top: 16, right: 20, bottom: 38, left: 48 };
+export class BoxPlotChart {
+    static stComponentName = "BoxPlotChart";
+    componentName = "BoxPlotChart";
+    MARGIN_LEFT = BOX_MARGIN.left;
+    MARGIN_RIGHT = BOX_MARGIN.right;
+    MARGIN_TOP = BOX_MARGIN.top;
+    MARGIN_BOTTOM = BOX_MARGIN.bottom;
+    hoveredIndex = null;
+    data = [];
+    width;
+    height;
+    label = "";
+    classInput;
+    get hostClass() {
+        return classNames("st-boxPlotChart", this.classInput);
+    }
+    get widthValue() {
+        return this.width ?? 480;
+    }
+    get heightValue() {
+        return this.height ?? 260;
+    }
+    get viewBox() {
+        return `0 0 ${this.widthValue} ${this.heightValue}`;
+    }
+    get plotWidth() {
+        return Math.max(this.widthValue - BOX_MARGIN.left - BOX_MARGIN.right, 1);
+    }
+    get plotHeight() {
+        return Math.max(this.heightValue - BOX_MARGIN.top - BOX_MARGIN.bottom, 1);
+    }
+    formatNumber(value) {
+        if (!Number.isFinite(value))
+            return "0";
+        if (Number.isInteger(value))
+            return String(value);
+        return value.toFixed(2).replace(/\.?0+$/, "");
+    }
+    scaleLinear(v, d0, d1, r0, r1) {
+        if (d1 === d0)
+            return r0;
+        return r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
+    }
+    get domain() {
+        const values = this.data
+            .flatMap((d) => [d.min, d.q1, d.median, d.q3, d.max, ...(d.outliers ?? [])])
+            .filter(Number.isFinite);
+        if (values.length === 0)
+            return { min: 0, max: 1 };
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        const pad = (max - min) * 0.08 || Math.max(Math.abs(max), 1) * 0.1;
+        return { min: min - pad, max: max + pad };
+    }
+    get plots() {
+        const band = this.data.length > 0 ? this.plotWidth / this.data.length : this.plotWidth;
+        const boxWidth = Math.min(54, Math.max(18, band * 0.44));
+        const { min: dMin, max: dMax } = this.domain;
+        return this.data.map((datum, index) => {
+            const cx = BOX_MARGIN.left + band * (index + 0.5);
+            const y = (value) => BOX_MARGIN.top + this.scaleLinear(value, dMin, dMax, this.plotHeight, 0);
+            const q1Y = y(datum.q1);
+            const q3Y = y(datum.q3);
+            return {
+                datum,
+                tone: datum.tone ?? BOX_TONES[index % BOX_TONES.length],
+                cx,
+                boxX: cx - boxWidth / 2,
+                boxY: Math.min(q1Y, q3Y),
+                boxWidth,
+                boxHeight: Math.max(Math.abs(q1Y - q3Y), 1),
+                medianY: y(datum.median),
+                minY: y(datum.min),
+                maxY: y(datum.max),
+                capWidth: boxWidth * 0.72,
+                outliers: (datum.outliers ?? []).filter(Number.isFinite).map((v) => ({ value: v, y: y(v) })),
+            };
+        });
+    }
+    get dataValueItems() {
+        return this.data.map((d) => {
+            const summary = `${d.label}: min ${this.formatNumber(d.min)}, q1 ${this.formatNumber(d.q1)}, median ${this.formatNumber(d.median)}, q3 ${this.formatNumber(d.q3)}, max ${this.formatNumber(d.max)}`;
+            const outliers = d.outliers?.length ? `, outliers ${d.outliers.map((v) => this.formatNumber(v)).join(", ")}` : "";
+            return `${summary}${outliers}`;
+        });
+    }
+    boxClass(plot, i) {
+        return classNames("st-boxPlotChart__box", `st-boxPlotChart__box--${plot.tone}`, this.hoveredIndex !== null && this.hoveredIndex !== i && "st-boxPlotChart__box--dim");
+    }
+    handleVisualPointerMove(event) {
+        const target = event.target;
+        const raw = Number(target?.getAttribute?.("data-chart-index"));
+        this.hoveredIndex = Number.isInteger(raw) && !isNaN(raw) ? raw : null;
+    }
+    handleLeave() {
+        this.hoveredIndex = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BoxPlotChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BoxPlotChart, isStandalone: true, selector: "st-box-plot-chart", inputs: { data: "data", width: "width", height: "height", label: "label", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-boxPlotChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handleVisualPointerMove($event)"
+        (pointerleave)="handleLeave()"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          preserveAspectRatio="xMidYMid meet"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          <line class="st-boxPlotChart__axis" [attr.x1]="MARGIN_LEFT" [attr.x2]="MARGIN_LEFT" [attr.y1]="MARGIN_TOP" [attr.y2]="heightValue - MARGIN_BOTTOM"></line>
+          <line class="st-boxPlotChart__axis" [attr.x1]="MARGIN_LEFT" [attr.x2]="widthValue - MARGIN_RIGHT" [attr.y1]="heightValue - MARGIN_BOTTOM" [attr.y2]="heightValue - MARGIN_BOTTOM"></line>
+
+          @for (plot of plots; track plot.datum.label; let i = $index) {
+            <line class="st-boxPlotChart__whisker" [attr.x1]="plot.cx" [attr.x2]="plot.cx" [attr.y1]="plot.minY" [attr.y2]="plot.maxY" [attr.data-chart-index]="i"></line>
+            <line class="st-boxPlotChart__whiskerCap" [attr.x1]="plot.cx - plot.capWidth / 2" [attr.x2]="plot.cx + plot.capWidth / 2" [attr.y1]="plot.minY" [attr.y2]="plot.minY" [attr.data-chart-index]="i"></line>
+            <line class="st-boxPlotChart__whiskerCap" [attr.x1]="plot.cx - plot.capWidth / 2" [attr.x2]="plot.cx + plot.capWidth / 2" [attr.y1]="plot.maxY" [attr.y2]="plot.maxY" [attr.data-chart-index]="i"></line>
+            <rect
+              [class]="boxClass(plot, i)"
+              [attr.x]="plot.boxX"
+              [attr.y]="plot.boxY"
+              [attr.width]="plot.boxWidth"
+              [attr.height]="plot.boxHeight"
+              [attr.data-chart-index]="i"
+            ></rect>
+            <line class="st-boxPlotChart__median" [attr.x1]="plot.boxX" [attr.x2]="plot.boxX + plot.boxWidth" [attr.y1]="plot.medianY" [attr.y2]="plot.medianY" [attr.data-chart-index]="i"></line>
+            @for (outlier of plot.outliers; track outlier.value) {
+              <circle class="st-boxPlotChart__outlier" [attr.cx]="plot.cx" [attr.cy]="outlier.y" r="3" [attr.data-chart-index]="i"></circle>
+            }
+            <text class="st-boxPlotChart__label" [attr.x]="plot.cx" [attr.y]="heightValue - MARGIN_BOTTOM + 16" text-anchor="middle">{{ plot.datum.label }}</text>
+          }
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + label">
+        @for (item of dataValueItems; track $index) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredIndex !== null && plots[hoveredIndex]) {
+        <div
+          class="st-boxPlotChart__tooltip"
+          role="presentation"
+          [style.left]="(plots[hoveredIndex].cx / widthValue * 100) + '%'"
+          [style.top]="(plots[hoveredIndex].medianY / heightValue * 100) + '%'"
+        >
+          <span class="st-boxPlotChart__tooltipLabel">{{ plots[hoveredIndex].datum.label }}</span>
+          <span class="st-boxPlotChart__tooltipValue">Median {{ formatNumber(plots[hoveredIndex].datum.median) }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BoxPlotChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-box-plot-chart",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-boxPlotChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handleVisualPointerMove($event)"
+        (pointerleave)="handleLeave()"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          preserveAspectRatio="xMidYMid meet"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          <line class="st-boxPlotChart__axis" [attr.x1]="MARGIN_LEFT" [attr.x2]="MARGIN_LEFT" [attr.y1]="MARGIN_TOP" [attr.y2]="heightValue - MARGIN_BOTTOM"></line>
+          <line class="st-boxPlotChart__axis" [attr.x1]="MARGIN_LEFT" [attr.x2]="widthValue - MARGIN_RIGHT" [attr.y1]="heightValue - MARGIN_BOTTOM" [attr.y2]="heightValue - MARGIN_BOTTOM"></line>
+
+          @for (plot of plots; track plot.datum.label; let i = $index) {
+            <line class="st-boxPlotChart__whisker" [attr.x1]="plot.cx" [attr.x2]="plot.cx" [attr.y1]="plot.minY" [attr.y2]="plot.maxY" [attr.data-chart-index]="i"></line>
+            <line class="st-boxPlotChart__whiskerCap" [attr.x1]="plot.cx - plot.capWidth / 2" [attr.x2]="plot.cx + plot.capWidth / 2" [attr.y1]="plot.minY" [attr.y2]="plot.minY" [attr.data-chart-index]="i"></line>
+            <line class="st-boxPlotChart__whiskerCap" [attr.x1]="plot.cx - plot.capWidth / 2" [attr.x2]="plot.cx + plot.capWidth / 2" [attr.y1]="plot.maxY" [attr.y2]="plot.maxY" [attr.data-chart-index]="i"></line>
+            <rect
+              [class]="boxClass(plot, i)"
+              [attr.x]="plot.boxX"
+              [attr.y]="plot.boxY"
+              [attr.width]="plot.boxWidth"
+              [attr.height]="plot.boxHeight"
+              [attr.data-chart-index]="i"
+            ></rect>
+            <line class="st-boxPlotChart__median" [attr.x1]="plot.boxX" [attr.x2]="plot.boxX + plot.boxWidth" [attr.y1]="plot.medianY" [attr.y2]="plot.medianY" [attr.data-chart-index]="i"></line>
+            @for (outlier of plot.outliers; track outlier.value) {
+              <circle class="st-boxPlotChart__outlier" [attr.cx]="plot.cx" [attr.cy]="outlier.y" r="3" [attr.data-chart-index]="i"></circle>
+            }
+            <text class="st-boxPlotChart__label" [attr.x]="plot.cx" [attr.y]="heightValue - MARGIN_BOTTOM + 16" text-anchor="middle">{{ plot.datum.label }}</text>
+          }
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + label">
+        @for (item of dataValueItems; track $index) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredIndex !== null && plots[hoveredIndex]) {
+        <div
+          class="st-boxPlotChart__tooltip"
+          role="presentation"
+          [style.left]="(plots[hoveredIndex].cx / widthValue * 100) + '%'"
+          [style.top]="(plots[hoveredIndex].medianY / heightValue * 100) + '%'"
+        >
+          <span class="st-boxPlotChart__tooltipLabel">{{ plots[hoveredIndex].datum.label }}</span>
+          <span class="st-boxPlotChart__tooltipValue">Median {{ formatNumber(plots[hoveredIndex].datum.median) }}</span>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=BoxPlotChart.js.map

package/dist/BoxPlotChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxPlotChart.js","sourceRoot":"","sources":["../src/BoxPlotChart.ts"],"names":[],"mappings":"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"}

package/dist/Breadcrumb.d.ts

@@ -0,0 +1,22 @@
+import * as i0 from "@angular/core";
+export interface BreadcrumbItem {
+    label: unknown;
+    href?: string;
+    current?: boolean;
+}
+export type BreadcrumbProps = {
+    items: BreadcrumbItem[];
+    label?: string;
+    class?: string;
+};
+export declare class Breadcrumb {
+    static readonly stComponentName = "Breadcrumb";
+    readonly componentName = "Breadcrumb";
+    items: BreadcrumbItem[];
+    label?: string;
+    classInput?: string;
+    get hostClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Breadcrumb, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Breadcrumb, "st-breadcrumb", never, { "items": { "alias": "items"; "required": false; }; "label": { "alias": "label"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../src/Breadcrumb.ts"],"names":[],"mappings":";AAIA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBA2Ba,UAAU;IACrB,MAAM,CAAC,QAAQ,CAAC,eAAe,gBAAgB;IAC/C,QAAQ,CAAC,aAAa,gBAAgB;IAE3B,KAAK,EAAG,cAAc,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACR,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,SAAS,IAAI,MAAM,CAEtB;yCAVU,UAAU;2CAAV,UAAU;CAWtB"}

package/dist/Breadcrumb.js

@@ -0,0 +1,75 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+export class Breadcrumb {
+    static stComponentName = "Breadcrumb";
+    componentName = "Breadcrumb";
+    items;
+    label;
+    classInput;
+    get hostClass() {
+        return classNames("st-breadcrumb", this.classInput);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Breadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: Breadcrumb, isStandalone: true, selector: "st-breadcrumb", inputs: { items: "items", label: "label", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <nav
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+      [attr.aria-label]="label ?? 'Breadcrumb'"
+    >
+      <ol>
+        @for (item of items; track $index) {
+          <li>
+            @if (item.href && !item.current) {
+              <a [href]="item.href">{{ item.label }}</a>
+            } @else {
+              <span [attr.aria-current]="item.current ? 'page' : null">{{ item.label }}</span>
+            }
+            @if ($index < items.length - 1) {
+              <span class="st-breadcrumb__separator" aria-hidden="true">/</span>
+            }
+          </li>
+        }
+      </ol>
+      <ng-content></ng-content>
+    </nav>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Breadcrumb, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-breadcrumb",
+                    standalone: true,
+                    template: `
+    <nav
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+      [attr.aria-label]="label ?? 'Breadcrumb'"
+    >
+      <ol>
+        @for (item of items; track $index) {
+          <li>
+            @if (item.href && !item.current) {
+              <a [href]="item.href">{{ item.label }}</a>
+            } @else {
+              <span [attr.aria-current]="item.current ? 'page' : null">{{ item.label }}</span>
+            }
+            @if ($index < items.length - 1) {
+              <span class="st-breadcrumb__separator" aria-hidden="true">/</span>
+            }
+          </li>
+        }
+      </ol>
+      <ng-content></ng-content>
+    </nav>
+  `,
+                }]
+        }], propDecorators: { items: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../src/Breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;AAyC7C,MAAM,OAAO,UAAU;IACrB,MAAM,CAAU,eAAe,GAAG,YAAY,CAAC;IACtC,aAAa,GAAG,YAAY,CAAC;IAE3B,KAAK,CAAoB;IACzB,KAAK,CAAU;IACR,UAAU,CAAU;IAEtC,IAAI,SAAS;QACX,OAAO,UAAU,CAAC,eAAe,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACtD,CAAC;wGAVU,UAAU;4FAAV,UAAU,0JAxBX;;;;;;;;;;;;;;;;;;;;;;GAsBT;;4FAEU,UAAU;kBA3BtB,SAAS;mBAAC;oBACT,QAAQ,EAAE,eAAe;oBACzB,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;GAsBT;iBACF;;sBAKE,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO"}

package/dist/BulletChart.d.ts

@@ -0,0 +1,83 @@
+import * as i0 from "@angular/core";
+export type BulletChartDatum = {
+    label: string;
+    value: number;
+    target: number;
+    ranges?: number[];
+};
+export type BulletChartProps = {
+    data: BulletChartDatum[];
+    label: string;
+    orientation?: "horizontal" | "vertical";
+    width?: number;
+    height?: number;
+    class?: string;
+};
+type RangeBand = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    opacity: number;
+};
+type Bullet = {
+    datum: BulletChartDatum;
+    index: number;
+    barX: number;
+    barY: number;
+    barW: number;
+    barH: number;
+    targetX: number;
+    targetY: number;
+    targetH: number;
+    labelX: number;
+    labelY: number;
+    rangeBands: RangeBand[];
+    tooltipX: number;
+    tooltipY: number;
+};
+export declare class BulletChart {
+    static readonly stComponentName = "BulletChart";
+    readonly componentName = "BulletChart";
+    readonly MARGIN_LEFT: 80;
+    readonly MARGIN_RIGHT: 24;
+    readonly MARGIN_TOP: 12;
+    readonly MARGIN_BOTTOM: 36;
+    hoveredIndex: number | null;
+    data: BulletChartDatum[];
+    label: string;
+    orientation?: "horizontal" | "vertical";
+    width?: number;
+    height?: number;
+    classInput?: string;
+    get hostClass(): string;
+    get orientationValue(): "horizontal" | "vertical";
+    get isHorizontal(): boolean;
+    get widthValue(): number;
+    get heightValue(): number;
+    get viewBox(): string;
+    get plotWidth(): number;
+    get plotHeight(): number;
+    get validData(): BulletChartDatum[];
+    get domainBounds(): {
+        rawMin: number;
+        rawMax: number;
+    };
+    get ticks(): number[];
+    get tickDomainMin(): number;
+    get tickDomainMax(): number;
+    get baselineX(): number;
+    get baselineY(): number;
+    tickX(tick: number): number;
+    tickY(tick: number): number;
+    formatTickLabel(v: number): string;
+    get bullets(): Bullet[];
+    get dataValueItems(): string[];
+    get hoveredBullet(): Bullet | null;
+    handleLeave(): void;
+    handlePointerMove(event: PointerEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BulletChart, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BulletChart, "st-bullet-chart", never, { "data": { "alias": "data"; "required": false; }; "label": { "alias": "label"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=BulletChart.d.ts.map

package/dist/BulletChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletChart.d.ts","sourceRoot":"","sources":["../src/BulletChart.ts"],"names":[],"mappings":"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"}