@sentropic/design-system-angular 0.36.54

package/dist/FilterPill.d.ts

@@ -0,0 +1,43 @@
+import { EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export type FilterPillTone = "neutral" | "success" | "warning" | "error" | "info";
+export type FilterPillProps = {
+    /** Nom du champ/dimension affiché à gauche. */
+    field: string;
+    /** Résumé de la valeur sélectionnée, ex "France, Italie" ou "> 100". */
+    value: string;
+    /** Opérateur optionnel affiché entre field et value, ex "=", "in", "entre". */
+    operator?: string;
+    /** Pilule active (aria-pressed). Défaut true. */
+    active?: boolean;
+    /** Affiche le bouton ✕. Défaut true. */
+    removable?: boolean;
+    disabled?: boolean;
+    tone?: FilterPillTone;
+    onClick?: () => void;
+    onRemove?: () => void;
+    class?: string;
+};
+export declare class FilterPill {
+    static readonly stComponentName = "FilterPill";
+    readonly componentName = "FilterPill";
+    field: string;
+    value: string;
+    operator?: string;
+    active: boolean;
+    removable: boolean;
+    disabled: boolean;
+    tone: FilterPillTone;
+    onClick?: () => void;
+    onRemove?: () => void;
+    classInput?: string;
+    readonly remove: EventEmitter<void>;
+    get hasClick(): boolean;
+    get hostClass(): string;
+    handleClick(): void;
+    handleRemove(): void;
+    handleBodyKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilterPill, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterPill, "st-filter-pill", never, { "field": { "alias": "field"; "required": false; }; "value": { "alias": "value"; "required": false; }; "operator": { "alias": "operator"; "required": false; }; "active": { "alias": "active"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tone": { "alias": "tone"; "required": false; }; "onClick": { "alias": "onClick"; "required": false; }; "onRemove": { "alias": "onRemove"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, { "remove": "remove"; }, never, never, true, never>;
+}
+//# sourceMappingURL=FilterPill.d.ts.map

package/dist/FilterPill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPill.d.ts","sourceRoot":"","sources":["../src/FilterPill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA4B,MAAM,eAAe,CAAC;;AAIlF,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAElF,MAAM,MAAM,eAAe,GAAG;IAC5B,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAmDa,UAAU;IACrB,MAAM,CAAC,QAAQ,CAAC,eAAe,gBAAgB;IAC/C,QAAQ,CAAC,aAAa,gBAAgB;IAE3B,KAAK,EAAG,MAAM,CAAC;IACf,KAAK,EAAG,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,UAAQ;IACd,SAAS,UAAQ;IACjB,QAAQ,UAAS;IACjB,IAAI,EAAE,cAAc,CAAa;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,MAAM,qBAA4B;IAErD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,SAAS,IAAI,MAAM,CAQtB;IAED,WAAW,IAAI,IAAI;IAKnB,YAAY,IAAI,IAAI;IAMpB,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCA1ClC,UAAU;2CAAV,UAAU;CAkDtB"}

package/dist/FilterPill.js

@@ -0,0 +1,170 @@
+import { Component, EventEmitter, Input as NgInput, Output } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+export class FilterPill {
+    static stComponentName = "FilterPill";
+    componentName = "FilterPill";
+    field;
+    value;
+    operator;
+    active = true;
+    removable = true;
+    disabled = false;
+    tone = "neutral";
+    onClick;
+    onRemove;
+    classInput;
+    remove = new EventEmitter();
+    get hasClick() {
+        return typeof this.onClick === "function";
+    }
+    get hostClass() {
+        return classNames("st-filterPill", `st-filterPill--${this.tone}`, this.active !== false ? "st-filterPill--active" : undefined, this.disabled ? "st-filterPill--disabled" : undefined, this.classInput);
+    }
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.onClick?.();
+    }
+    handleRemove() {
+        if (this.disabled)
+            return;
+        this.onRemove?.();
+        this.remove.emit();
+    }
+    handleBodyKeydown(event) {
+        if (this.disabled)
+            return;
+        if ((event.key === "Delete" || event.key === "Backspace") && this.removable !== false) {
+            event.preventDefault();
+            this.onRemove?.();
+            this.remove.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FilterPill, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FilterPill, isStandalone: true, selector: "st-filter-pill", inputs: { field: "field", value: "value", operator: "operator", active: "active", removable: "removable", disabled: "disabled", tone: "tone", onClick: "onClick", onRemove: "onRemove", classInput: ["class", "classInput"] }, outputs: { remove: "remove" }, ngImport: i0, template: `
+    <span
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+      role="group"
+      [attr.aria-label]="'Filtre ' + field"
+    >
+      @if (hasClick) {
+        <button
+          type="button"
+          class="st-filterPill__body"
+          [attr.aria-pressed]="active !== false ? 'true' : 'false'"
+          [disabled]="disabled || null"
+          (click)="handleClick()"
+          (keydown)="handleBodyKeydown($event)"
+        >
+          <span class="st-filterPill__field">{{ field }}</span>
+          @if (operator) {
+            <span class="st-filterPill__operator" aria-hidden="true">{{ operator }}</span>
+          }
+          <span class="st-filterPill__value">{{ value }}</span>
+        </button>
+      } @else {
+        <span class="st-filterPill__body st-filterPill__body--static">
+          <span class="st-filterPill__field">{{ field }}</span>
+          @if (operator) {
+            <span class="st-filterPill__operator" aria-hidden="true">{{ operator }}</span>
+          }
+          <span class="st-filterPill__value">{{ value }}</span>
+        </span>
+      }
+      @if (removable !== false) {
+        <button
+          type="button"
+          class="st-filterPill__remove"
+          [attr.aria-label]="'Retirer le filtre ' + field"
+          [disabled]="disabled || null"
+          (click)="handleRemove()"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M18 6 6 18"/>
+            <path d="m6 6 12 12"/>
+          </svg>
+        </button>
+      }
+    </span>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FilterPill, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-filter-pill",
+                    standalone: true,
+                    template: `
+    <span
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+      role="group"
+      [attr.aria-label]="'Filtre ' + field"
+    >
+      @if (hasClick) {
+        <button
+          type="button"
+          class="st-filterPill__body"
+          [attr.aria-pressed]="active !== false ? 'true' : 'false'"
+          [disabled]="disabled || null"
+          (click)="handleClick()"
+          (keydown)="handleBodyKeydown($event)"
+        >
+          <span class="st-filterPill__field">{{ field }}</span>
+          @if (operator) {
+            <span class="st-filterPill__operator" aria-hidden="true">{{ operator }}</span>
+          }
+          <span class="st-filterPill__value">{{ value }}</span>
+        </button>
+      } @else {
+        <span class="st-filterPill__body st-filterPill__body--static">
+          <span class="st-filterPill__field">{{ field }}</span>
+          @if (operator) {
+            <span class="st-filterPill__operator" aria-hidden="true">{{ operator }}</span>
+          }
+          <span class="st-filterPill__value">{{ value }}</span>
+        </span>
+      }
+      @if (removable !== false) {
+        <button
+          type="button"
+          class="st-filterPill__remove"
+          [attr.aria-label]="'Retirer le filtre ' + field"
+          [disabled]="disabled || null"
+          (click)="handleRemove()"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M18 6 6 18"/>
+            <path d="m6 6 12 12"/>
+          </svg>
+        </button>
+      }
+    </span>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: NgInput
+            }], value: [{
+                type: NgInput
+            }], operator: [{
+                type: NgInput
+            }], active: [{
+                type: NgInput
+            }], removable: [{
+                type: NgInput
+            }], disabled: [{
+                type: NgInput
+            }], tone: [{
+                type: NgInput
+            }], onClick: [{
+                type: NgInput
+            }], onRemove: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }], remove: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=FilterPill.js.map

package/dist/FilterPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPill.js","sourceRoot":"","sources":["../src/FilterPill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;AAyE7C,MAAM,OAAO,UAAU;IACrB,MAAM,CAAU,eAAe,GAAG,YAAY,CAAC;IACtC,aAAa,GAAG,YAAY,CAAC;IAE3B,KAAK,CAAU;IACf,KAAK,CAAU;IACf,QAAQ,CAAU;IAClB,MAAM,GAAG,IAAI,CAAC;IACd,SAAS,GAAG,IAAI,CAAC;IACjB,QAAQ,GAAG,KAAK,CAAC;IACjB,IAAI,GAAmB,SAAS,CAAC;IACjC,OAAO,CAAc;IACrB,QAAQ,CAAc;IACf,UAAU,CAAU;IAEnB,MAAM,GAAG,IAAI,YAAY,EAAQ,CAAC;IAErD,IAAI,QAAQ;QACV,OAAO,OAAO,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;IAC5C,CAAC;IAED,IAAI,SAAS;QACX,OAAO,UAAU,CACf,eAAe,EACf,kBAAkB,IAAI,CAAC,IAAI,EAAE,EAC7B,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,SAAS,EAC3D,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS,EACrD,IAAI,CAAC,UAAU,CAChB,CAAC;IACJ,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;IACnB,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED,iBAAiB,CAAC,KAAoB;QACpC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;YACtF,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;wGAjDU,UAAU;4FAAV,UAAU,wUAhDX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CT;;4FAEU,UAAU;kBAnDtB,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CT;iBACF;;sBAKE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO;;sBAEf,MAAM"}

package/dist/FlamegraphChart.d.ts

@@ -0,0 +1,55 @@
+import * as i0 from "@angular/core";
+export type FlamegraphNode = {
+    name: string;
+    value: number;
+    children?: FlamegraphNode[];
+};
+export type FlamegraphChartProps = {
+    data: FlamegraphNode;
+    label?: string;
+    width?: number;
+    height?: number;
+    size?: number;
+    class?: string;
+};
+type Cell = {
+    key: string;
+    name: string;
+    value: number;
+    depth: number;
+    x: number;
+    y: number;
+    width: number;
+    tone: string;
+    cx: number;
+    cy: number;
+};
+export declare class FlamegraphChart {
+    static readonly stComponentName = "FlamegraphChart";
+    readonly componentName = "FlamegraphChart";
+    readonly ROW_H = 26;
+    hoveredKey: string | null;
+    data: FlamegraphNode;
+    label?: string;
+    width?: number;
+    height?: number;
+    size?: number;
+    classInput?: string;
+    get hostClass(): string;
+    get resolvedWidth(): number;
+    get heightDefault(): number;
+    get plotWidth(): number;
+    get cells(): Cell[];
+    get computedHeight(): number;
+    get viewBox(): string;
+    get hoveredCell(): Cell | null;
+    get dataValueItems(): string[];
+    frameClass(cell: Cell): string;
+    charsFor(w: number): number;
+    ellipsize(text: string, maxChars: number): string;
+    handlePointerMove(event: PointerEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlamegraphChart, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlamegraphChart, "st-flamegraph-chart", never, { "data": { "alias": "data"; "required": false; }; "label": { "alias": "label"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "size": { "alias": "size"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=FlamegraphChart.d.ts.map

package/dist/FlamegraphChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlamegraphChart.d.ts","sourceRoot":"","sources":["../src/FlamegraphChart.ts"],"names":[],"mappings":";AAIA,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAMF,KAAK,IAAI,GAAG;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAqDF,qBAiEa,eAAe;IAC1B,MAAM,CAAC,QAAQ,CAAC,eAAe,qBAAqB;IACpD,QAAQ,CAAC,aAAa,qBAAqB;IAC3C,QAAQ,CAAC,KAAK,MAAS;IAEvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEtB,IAAI,EAAG,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACP,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,KAAK,IAAI,IAAI,EAAE,CAGlB;IAED,IAAI,cAAc,IAAI,MAAM,CAK3B;IAED,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,WAAW,IAAI,IAAI,GAAG,IAAI,CAG7B;IAED,IAAI,cAAc,IAAI,MAAM,EAAE,CAE7B;IAED,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IAS9B,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAI3B,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM;IAIjD,iBAAiB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI;yCAxEjC,eAAe;2CAAf,eAAe;CA6E3B"}

package/dist/FlamegraphChart.js

@@ -0,0 +1,255 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+const MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };
+const ROW_H = 26;
+const ROW_GAP = 2;
+function toneForDepth(depth) {
+    return `category${(depth % 8) + 1}`;
+}
+function ellipsize(text, maxChars) {
+    if (text.length <= maxChars)
+        return text;
+    if (maxChars <= 1)
+        return "…";
+    return `${text.slice(0, maxChars - 1)}…`;
+}
+function charsFor(w) {
+    return Math.max(0, Math.floor((w - 8) / 6.6));
+}
+function buildCells(data, plotWidth) {
+    const out = [];
+    if (!data || typeof data.name !== "string" || !Number.isFinite(data.value))
+        return out;
+    const walk = (node, depth, x0, w, path) => {
+        if (w <= 0)
+            return;
+        const y = MARGIN.top + depth * (ROW_H + ROW_GAP);
+        out.push({
+            key: path,
+            name: node.name,
+            value: node.value,
+            depth,
+            x: x0,
+            y,
+            width: w,
+            tone: toneForDepth(depth),
+            cx: x0 + w / 2,
+            cy: y + ROW_H / 2,
+        });
+        const kids = (node.children ?? []).filter((c) => c && typeof c.name === "string" && Number.isFinite(c.value) && c.value > 0);
+        if (kids.length === 0)
+            return;
+        const total = kids.reduce((s, c) => s + Math.max(c.value, 0), 0);
+        if (total <= 0)
+            return;
+        let cursor = x0;
+        kids.forEach((child, ci) => {
+            const cw = (Math.max(child.value, 0) / total) * w;
+            walk(child, depth + 1, cursor, cw, `${path}.${ci}`);
+            cursor += cw;
+        });
+    };
+    walk(data, 0, MARGIN.left, plotWidth, "0");
+    return out;
+}
+export class FlamegraphChart {
+    static stComponentName = "FlamegraphChart";
+    componentName = "FlamegraphChart";
+    ROW_H = ROW_H;
+    hoveredKey = null;
+    data;
+    label;
+    width;
+    height;
+    size;
+    classInput;
+    get hostClass() {
+        return classNames("st-flamegraphChart", this.classInput);
+    }
+    get resolvedWidth() {
+        return this.width ?? this.size ?? 640;
+    }
+    get heightDefault() {
+        return this.height ?? 320;
+    }
+    get plotWidth() {
+        return Math.max(this.resolvedWidth - MARGIN.left - MARGIN.right, 1);
+    }
+    get cells() {
+        if (!this.data)
+            return [];
+        return buildCells(this.data, this.plotWidth);
+    }
+    get computedHeight() {
+        if (this.cells.length === 0)
+            return this.heightDefault;
+        const maxDepth = this.cells.reduce((m, c) => Math.max(m, c.depth), 0);
+        const needed = MARGIN.top + (maxDepth + 1) * (ROW_H + ROW_GAP) - ROW_GAP + MARGIN.bottom;
+        return Math.max(this.heightDefault, needed);
+    }
+    get viewBox() {
+        return `0 0 ${this.resolvedWidth} ${this.computedHeight}`;
+    }
+    get hoveredCell() {
+        if (this.hoveredKey === null)
+            return null;
+        return this.cells.find((c) => c.key === this.hoveredKey) ?? null;
+    }
+    get dataValueItems() {
+        return this.cells.map((c) => `${"·".repeat(c.depth)}${c.name}: ${c.value}`);
+    }
+    frameClass(cell) {
+        const dim = this.hoveredKey !== null && this.hoveredKey !== cell.key;
+        return classNames("st-flamegraphChart__frame", `st-flamegraphChart__frame--${cell.tone}`, dim && "st-flamegraphChart__frame--dim");
+    }
+    charsFor(w) {
+        return charsFor(w);
+    }
+    ellipsize(text, maxChars) {
+        return ellipsize(text, maxChars);
+    }
+    handlePointerMove(event) {
+        const target = event.target;
+        const key = target?.getAttribute("data-chart-key");
+        this.hoveredKey = key ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FlamegraphChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FlamegraphChart, isStandalone: true, selector: "st-flamegraph-chart", inputs: { data: "data", label: "label", width: "width", height: "height", size: "size", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-flamegraphChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handlePointerMove($event)"
+        (pointerleave)="hoveredKey = null"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          preserveAspectRatio="xMidYMid meet"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          @for (cell of cells; track cell.key) {
+            <g class="st-flamegraphChart__node">
+              <rect
+                [class]="frameClass(cell)"
+                [attr.x]="cell.x"
+                [attr.y]="cell.y"
+                [attr.width]="cell.width < 1 ? 1 : cell.width"
+                [attr.height]="ROW_H"
+                rx="2"
+                [attr.data-chart-key]="cell.key"
+              ></rect>
+              @if (charsFor(cell.width) >= 2) {
+                <text
+                  class="st-flamegraphChart__label"
+                  [attr.x]="cell.x + 4"
+                  [attr.y]="cell.y + ROW_H / 2"
+                  dominant-baseline="central"
+                >{{ ellipsize(cell.name, charsFor(cell.width)) }}</text>
+              }
+            </g>
+          }
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + (label ?? 'flamegraph')">
+        @for (item of dataValueItems; track item) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredCell; as cell) {
+        <div
+          class="st-flamegraphChart__tooltip"
+          role="presentation"
+          [style.left.%]="(cell.cx / resolvedWidth) * 100"
+          [style.top.%]="(cell.cy / computedHeight) * 100"
+        >
+          <span class="st-flamegraphChart__tooltipLabel">{{ cell.name }}</span>
+          <span class="st-flamegraphChart__tooltipValue">{{ cell.value }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host { display: contents; }"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FlamegraphChart, decorators: [{
+            type: Component,
+            args: [{ selector: "st-flamegraph-chart", standalone: true, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-flamegraphChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handlePointerMove($event)"
+        (pointerleave)="hoveredKey = null"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          preserveAspectRatio="xMidYMid meet"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          @for (cell of cells; track cell.key) {
+            <g class="st-flamegraphChart__node">
+              <rect
+                [class]="frameClass(cell)"
+                [attr.x]="cell.x"
+                [attr.y]="cell.y"
+                [attr.width]="cell.width < 1 ? 1 : cell.width"
+                [attr.height]="ROW_H"
+                rx="2"
+                [attr.data-chart-key]="cell.key"
+              ></rect>
+              @if (charsFor(cell.width) >= 2) {
+                <text
+                  class="st-flamegraphChart__label"
+                  [attr.x]="cell.x + 4"
+                  [attr.y]="cell.y + ROW_H / 2"
+                  dominant-baseline="central"
+                >{{ ellipsize(cell.name, charsFor(cell.width)) }}</text>
+              }
+            </g>
+          }
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + (label ?? 'flamegraph')">
+        @for (item of dataValueItems; track item) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredCell; as cell) {
+        <div
+          class="st-flamegraphChart__tooltip"
+          role="presentation"
+          [style.left.%]="(cell.cx / resolvedWidth) * 100"
+          [style.top.%]="(cell.cy / computedHeight) * 100"
+        >
+          <span class="st-flamegraphChart__tooltipLabel">{{ cell.name }}</span>
+          <span class="st-flamegraphChart__tooltipValue">{{ cell.value }}</span>
+        </div>
+      }
+    </div>
+  `, styles: [":host { display: contents; }"] }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], size: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=FlamegraphChart.js.map

package/dist/FlamegraphChart.js.map

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

package/dist/Flex.d.ts

@@ -0,0 +1,35 @@
+import * as i0 from "@angular/core";
+export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
+export type FlexAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type FlexJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+export type FlexProps = {
+    direction?: FlexDirection;
+    /** Spacing scale step (0..12) mapped to `--st-spacing-*`. */
+    gap?: number;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: boolean;
+    inline?: boolean;
+    as?: string;
+    class?: string;
+};
+export declare function spacingToken(step: number | undefined): string | undefined;
+export declare function alignValue(align: FlexAlign | undefined): string | undefined;
+export declare function justifyValue(justify: FlexJustify | undefined): string | undefined;
+export declare class Flex {
+    static readonly stComponentName = "Flex";
+    readonly componentName = "Flex";
+    direction?: FlexDirection;
+    gap?: number;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: boolean;
+    inline?: boolean;
+    as?: string;
+    classInput?: string;
+    get hostClass(): string;
+    get inlineStyles(): Record<string, string | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Flex, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Flex, "st-flex", never, { "direction": { "alias": "direction"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "align": { "alias": "align"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "as": { "alias": "as"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=Flex.d.ts.map

package/dist/Flex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../src/Flex.ts"],"names":[],"mappings":";AAKA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAEhF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEvF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkBF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKzE;AAmBD,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAE3E;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAEjF;AAED,qBAUa,IAAI;IACf,MAAM,CAAC,QAAQ,CAAC,eAAe,UAAU;IACzC,QAAQ,CAAC,aAAa,UAAU;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACL,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CASrD;yCAzBU,IAAI;2CAAJ,IAAI;CA0BhB"}