@sentropic/design-system-angular 0.36.54

package/dist/ChordDiagram.js

@@ -0,0 +1,370 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import { chartDataList } from "./chartScale.js";
+import { contrastTextForTone } from "./chartContrast.js";
+import * as i0_1 from "@angular/core";
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
+];
+const GAP = 0.04;
+const ARC_WIDTH = 14;
+function magnitude(value) {
+    return Number.isFinite(value) && value > 0 ? value : 0;
+}
+function polar(cx, cy, radius, angle) {
+    return { x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) };
+}
+function arcPath(cx, cy, inner, outer, start, end) {
+    const large = end - start > Math.PI ? 1 : 0;
+    const o0 = polar(cx, cy, outer, start);
+    const o1 = polar(cx, cy, outer, end);
+    const i1 = polar(cx, cy, inner, end);
+    const i0 = polar(cx, cy, inner, start);
+    return `M ${o0.x} ${o0.y} A ${outer} ${outer} 0 ${large} 1 ${o1.x} ${o1.y} L ${i1.x} ${i1.y} A ${inner} ${inner} 0 ${large} 0 ${i0.x} ${i0.y} Z`;
+}
+export class ChordDiagram {
+    static stComponentName = "ChordDiagram";
+    componentName = "ChordDiagram";
+    data;
+    labels;
+    width;
+    height;
+    label;
+    classInput;
+    hoveredFlowIndex = null;
+    get widthValue() {
+        return this.width ?? 360;
+    }
+    get heightValue() {
+        return this.height ?? 360;
+    }
+    get hostClass() {
+        return ["st-chordDiagram", this.classInput].filter(Boolean).join(" ");
+    }
+    get viewBox() {
+        return `0 0 ${this.widthValue} ${this.heightValue}`;
+    }
+    displayLabel(id) {
+        return this.labels?.[id] ?? id;
+    }
+    get layout() {
+        const data = this.data ?? [];
+        const w = this.widthValue;
+        const h = this.heightValue;
+        const cx = w / 2;
+        const cy = h / 2;
+        const outer = Math.max(Math.min(w, h) / 2 - 6, 1);
+        const inner = Math.max(outer - ARC_WIDTH, 1);
+        const ribbonRadius = Math.max(inner - 2, 0);
+        const flows = data
+            .map((flow, index) => ({ flow, index, value: magnitude(flow.value) }))
+            .filter((entry) => entry.value > 0);
+        const order = [];
+        const total = new Map();
+        for (const { flow, value } of flows) {
+            for (const id of [flow.from, flow.to]) {
+                if (!total.has(id)) {
+                    total.set(id, 0);
+                    order.push(id);
+                }
+            }
+            total.set(flow.from, (total.get(flow.from) ?? 0) + value);
+            total.set(flow.to, (total.get(flow.to) ?? 0) + value);
+        }
+        const grandTotal = order.reduce((sum, id) => sum + (total.get(id) ?? 0), 0);
+        if (order.length === 0 || grandTotal <= 0) {
+            return { cx, cy, inner, outer, arcs: [], ribbons: [] };
+        }
+        const totalGap = GAP * order.length;
+        const usable = Math.max(Math.PI * 2 - totalGap, 0.0001);
+        const arcMap = new Map();
+        const arcs = [];
+        let angle = -Math.PI / 2;
+        order.forEach((id, index) => {
+            const span = (usable * (total.get(id) ?? 0)) / grandTotal;
+            const start = angle + GAP / 2;
+            const end = start + span;
+            angle = end + GAP / 2;
+            const tone = TONES[index % TONES.length];
+            const mid = (start + end) / 2;
+            arcMap.set(id, { id, tone, start, end, mid, cursor: start });
+            const labelRadius = (inner + outer) / 2;
+            const labelPoint = polar(cx, cy, labelRadius, mid);
+            arcs.push({
+                id,
+                tone,
+                value: total.get(id) ?? 0,
+                span,
+                path: arcPath(cx, cy, inner, outer, start, end),
+                labelX: labelPoint.x,
+                labelY: labelPoint.y,
+                labelAngle: mid,
+                textColor: contrastTextForTone(tone),
+            });
+        });
+        const maxValue = Math.max(1, ...flows.map((entry) => entry.value));
+        const ribbons = flows.map(({ flow, value, index }) => {
+            const source = arcMap.get(flow.from);
+            const target = arcMap.get(flow.to);
+            const sourceSpan = (usable * value) / grandTotal;
+            const targetSpan = (usable * value) / grandTotal;
+            const s0 = source.cursor;
+            const s1 = source.cursor + sourceSpan;
+            source.cursor = s1;
+            const t0 = target.cursor;
+            const t1 = target.cursor + targetSpan;
+            target.cursor = t1;
+            const ps0 = polar(cx, cy, ribbonRadius, s0);
+            const ps1 = polar(cx, cy, ribbonRadius, s1);
+            const pt0 = polar(cx, cy, ribbonRadius, t0);
+            const pt1 = polar(cx, cy, ribbonRadius, t1);
+            const path = `M ${ps0.x} ${ps0.y} ` +
+                `Q ${cx} ${cy} ${pt1.x} ${pt1.y} ` +
+                `A ${ribbonRadius} ${ribbonRadius} 0 0 1 ${pt0.x} ${pt0.y} ` +
+                `Q ${cx} ${cy} ${ps1.x} ${ps1.y} ` +
+                `A ${ribbonRadius} ${ribbonRadius} 0 0 0 ${ps0.x} ${ps0.y} Z`;
+            return {
+                index,
+                from: flow.from,
+                to: flow.to,
+                value,
+                tone: source.tone,
+                strokeWidth: Math.max(1, (value / maxValue) * 4),
+                path,
+                midX: cx,
+                midY: cy,
+            };
+        });
+        return { cx, cy, inner, outer, arcs, ribbons };
+    }
+    get hoveredRibbon() {
+        if (this.hoveredFlowIndex === null)
+            return undefined;
+        return this.layout.ribbons.find((r) => r.index === this.hoveredFlowIndex);
+    }
+    get dataValueItems() {
+        const data = this.data ?? [];
+        return data
+            .filter((flow) => magnitude(flow.value) > 0)
+            .map((flow) => `${this.displayLabel(flow.from)} -> ${this.displayLabel(flow.to)}: ${flow.value}`);
+    }
+    ribbonClass(ribbon) {
+        const dim = this.hoveredFlowIndex !== null && this.hoveredFlowIndex !== ribbon.index;
+        return [
+            "st-chordDiagram__ribbon",
+            `st-chordDiagram__ribbon--${ribbon.tone}`,
+            dim ? "st-chordDiagram__ribbon--dim" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    arcClass(arc) {
+        return `st-chordDiagram__arc st-chordDiagram__arc--${arc.tone}`;
+    }
+    handleVisualPointerMove(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            this.hoveredFlowIndex = null;
+            return;
+        }
+        const raw = target.getAttribute("data-flow-index");
+        if (raw === null) {
+            this.hoveredFlowIndex = null;
+            return;
+        }
+        const index = Number(raw);
+        this.hoveredFlowIndex = Number.isInteger(index) ? index : null;
+    }
+    handleLeave() {
+        this.hoveredFlowIndex = null;
+    }
+    tooltipLeft() {
+        const ribbon = this.hoveredRibbon;
+        if (!ribbon)
+            return "0%";
+        return `${(ribbon.midX / this.widthValue) * 100}%`;
+    }
+    tooltipTop() {
+        const ribbon = this.hoveredRibbon;
+        if (!ribbon)
+            return "0%";
+        return `${(ribbon.midY / this.heightValue) * 100}%`;
+    }
+    tooltipLabel() {
+        const ribbon = this.hoveredRibbon;
+        if (!ribbon)
+            return "";
+        return `${this.displayLabel(ribbon.from)} -> ${this.displayLabel(ribbon.to)}`;
+    }
+    tooltipValue() {
+        const ribbon = this.hoveredRibbon;
+        if (!ribbon)
+            return "";
+        return ribbon.value;
+    }
+    static ɵfac = i0_1.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0_1, type: ChordDiagram, deps: [], target: i0_1.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0_1.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChordDiagram, isStandalone: true, selector: "st-chord-diagram", inputs: { data: "data", labels: "labels", width: "width", height: "height", label: "label", classInput: ["class", "classInput"] }, ngImport: i0_1, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-chordDiagram__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"
+        >
+          <g class="st-chordDiagram__ribbons">
+            @for (ribbon of layout.ribbons; track ribbon.index) {
+              <path
+                [class]="ribbonClass(ribbon)"
+                [attr.d]="ribbon.path"
+                [attr.stroke-width]="ribbon.strokeWidth"
+                [attr.data-flow-index]="ribbon.index"
+              ></path>
+            }
+          </g>
+
+          <g class="st-chordDiagram__arcs">
+            @for (arc of layout.arcs; track arc.id) {
+              <path
+                [class]="arcClass(arc)"
+                [attr.d]="arc.path"
+              ></path>
+              @if (arc.span > 0.34) {
+                <text
+                  class="st-chordDiagram__arcLabel"
+                  [attr.x]="arc.labelX"
+                  [attr.y]="arc.labelY"
+                  text-anchor="middle"
+                  dominant-baseline="middle"
+                  [attr.fill]="arc.textColor"
+                >{{ displayLabel(arc.id) }}</text>
+              }
+            }
+          </g>
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + label">
+        @for (item of dataValueItems; track item) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredFlowIndex !== null && hoveredRibbon) {
+        <div
+          class="st-chordDiagram__tooltip"
+          role="presentation"
+          [style.left]="tooltipLeft()"
+          [style.top]="tooltipTop()"
+        >
+          <span class="st-chordDiagram__tooltipLabel">{{ tooltipLabel() }}</span>
+          <span class="st-chordDiagram__tooltipValue">{{ tooltipValue() }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true });
+}
+i0_1.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0_1, type: ChordDiagram, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-chord-diagram",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-chordDiagram__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"
+        >
+          <g class="st-chordDiagram__ribbons">
+            @for (ribbon of layout.ribbons; track ribbon.index) {
+              <path
+                [class]="ribbonClass(ribbon)"
+                [attr.d]="ribbon.path"
+                [attr.stroke-width]="ribbon.strokeWidth"
+                [attr.data-flow-index]="ribbon.index"
+              ></path>
+            }
+          </g>
+
+          <g class="st-chordDiagram__arcs">
+            @for (arc of layout.arcs; track arc.id) {
+              <path
+                [class]="arcClass(arc)"
+                [attr.d]="arc.path"
+              ></path>
+              @if (arc.span > 0.34) {
+                <text
+                  class="st-chordDiagram__arcLabel"
+                  [attr.x]="arc.labelX"
+                  [attr.y]="arc.labelY"
+                  text-anchor="middle"
+                  dominant-baseline="middle"
+                  [attr.fill]="arc.textColor"
+                >{{ displayLabel(arc.id) }}</text>
+              }
+            }
+          </g>
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + label">
+        @for (item of dataValueItems; track item) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredFlowIndex !== null && hoveredRibbon) {
+        <div
+          class="st-chordDiagram__tooltip"
+          role="presentation"
+          [style.left]="tooltipLeft()"
+          [style.top]="tooltipTop()"
+        >
+          <span class="st-chordDiagram__tooltipLabel">{{ tooltipLabel() }}</span>
+          <span class="st-chordDiagram__tooltipValue">{{ tooltipValue() }}</span>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], labels: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=ChordDiagram.js.map

package/dist/ChordDiagram.js.map

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

package/dist/CodeSnippet.d.ts

@@ -0,0 +1,27 @@
+import * as i0 from "@angular/core";
+export type CodeSnippetProps = {
+    code: string;
+    language?: string;
+    inline?: boolean;
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    class?: string;
+};
+export declare class CodeSnippet {
+    static readonly stComponentName = "CodeSnippet";
+    readonly componentName = "CodeSnippet";
+    code: string;
+    language?: string;
+    inline?: boolean;
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    classInput?: string;
+    get resolvedCopyable(): boolean;
+    get inlineClass(): string;
+    get blockClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CodeSnippet, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CodeSnippet, "st-code-snippet", never, { "code": { "alias": "code"; "required": false; }; "language": { "alias": "language"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "copyable": { "alias": "copyable"; "required": false; }; "copyLabel": { "alias": "copyLabel"; "required": false; }; "copiedLabel": { "alias": "copiedLabel"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=CodeSnippet.d.ts.map

package/dist/CodeSnippet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeSnippet.d.ts","sourceRoot":"","sources":["../src/CodeSnippet.ts"],"names":[],"mappings":";AAKA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAwBa,WAAW;IACtB,MAAM,CAAC,QAAQ,CAAC,eAAe,iBAAiB;IAChD,QAAQ,CAAC,aAAa,iBAAiB;IAC5B,IAAI,EAAG,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,gBAAgB,IAAI,OAAO,CAE9B;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;yCArBU,WAAW;2CAAX,WAAW;CAsBvB"}

package/dist/CodeSnippet.js

@@ -0,0 +1,87 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import { CopyButton } from "./CopyButton.js";
+import * as i0 from "@angular/core";
+export class CodeSnippet {
+    static stComponentName = "CodeSnippet";
+    componentName = "CodeSnippet";
+    code;
+    language;
+    inline;
+    copyable;
+    copyLabel;
+    copiedLabel;
+    classInput;
+    get resolvedCopyable() {
+        return this.copyable !== false;
+    }
+    get inlineClass() {
+        return classNames("st-codeSnippet--inline", this.classInput);
+    }
+    get blockClass() {
+        return classNames("st-codeSnippet", this.classInput);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CodeSnippet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CodeSnippet, isStandalone: true, selector: "st-code-snippet", inputs: { code: "code", language: "language", inline: "inline", copyable: "copyable", copyLabel: "copyLabel", copiedLabel: "copiedLabel", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    @if (inline) {
+      <code
+        [attr.data-st-component]="componentName"
+        [class]="inlineClass"
+        [attr.data-language]="language ?? null"
+      >{{ code }}</code>
+    } @else {
+      <div [attr.data-st-component]="componentName" class="st-codeSnippet__wrapper">
+        <pre [class]="blockClass" [attr.data-language]="language ?? null"><code class="st-codeSnippet__code">{{ code }}</code></pre>
+        @if (resolvedCopyable) {
+          <span class="st-codeSnippet__copy">
+            <st-copy-button [value]="code" size="sm" [label]="copyLabel ?? 'Copy'" [copiedLabel]="copiedLabel ?? 'Copied'"></st-copy-button>
+          </span>
+        }
+        <ng-content></ng-content>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: CopyButton, selector: "st-copy-button", inputs: ["text", "value", "label", "copiedLabel", "size", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CodeSnippet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-code-snippet",
+                    standalone: true,
+                    imports: [CopyButton],
+                    template: `
+    @if (inline) {
+      <code
+        [attr.data-st-component]="componentName"
+        [class]="inlineClass"
+        [attr.data-language]="language ?? null"
+      >{{ code }}</code>
+    } @else {
+      <div [attr.data-st-component]="componentName" class="st-codeSnippet__wrapper">
+        <pre [class]="blockClass" [attr.data-language]="language ?? null"><code class="st-codeSnippet__code">{{ code }}</code></pre>
+        @if (resolvedCopyable) {
+          <span class="st-codeSnippet__copy">
+            <st-copy-button [value]="code" size="sm" [label]="copyLabel ?? 'Copy'" [copiedLabel]="copiedLabel ?? 'Copied'"></st-copy-button>
+          </span>
+        }
+        <ng-content></ng-content>
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { code: [{
+                type: NgInput
+            }], language: [{
+                type: NgInput
+            }], inline: [{
+                type: NgInput
+            }], copyable: [{
+                type: NgInput
+            }], copyLabel: [{
+                type: NgInput
+            }], copiedLabel: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=CodeSnippet.js.map

package/dist/CodeSnippet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeSnippet.js","sourceRoot":"","sources":["../src/CodeSnippet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;AAoC7C,MAAM,OAAO,WAAW;IACtB,MAAM,CAAU,eAAe,GAAG,aAAa,CAAC;IACvC,aAAa,GAAG,aAAa,CAAC;IAC5B,IAAI,CAAU;IACd,QAAQ,CAAU;IAClB,MAAM,CAAW;IACjB,QAAQ,CAAW;IACnB,SAAS,CAAU;IACnB,WAAW,CAAU;IACd,UAAU,CAAU;IAEtC,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC;IACjC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,UAAU,CAAC,wBAAwB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC/D,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,UAAU,CAAC,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACvD,CAAC;wGArBU,WAAW;4FAAX,WAAW,4PApBZ;;;;;;;;;;;;;;;;;;GAkBT,4DAnBS,UAAU;;4FAqBT,WAAW;kBAxBvB,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,UAAU,CAAC;oBACrB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;GAkBT;iBACF;;sBAIE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO"}

package/dist/Col.d.ts

@@ -0,0 +1,34 @@
+import * as i0 from "@angular/core";
+export type ColSpan = number | "auto";
+export type ColProps = {
+    /** Number of 12-grid columns to span, or "auto" to size to content. */
+    span?: ColSpan;
+    /** Columns to offset (0..11) via margin-inline-start. */
+    offset?: number;
+    /** Responsive overrides applied at and above the breakpoint. */
+    sm?: ColSpan;
+    md?: ColSpan;
+    lg?: ColSpan;
+    as?: string;
+    class?: string;
+};
+export declare function spanBasis(span: ColSpan | undefined): string | undefined;
+export declare function offsetMargin(offset: number | undefined): string | undefined;
+export declare class Col {
+    static readonly stComponentName = "Col";
+    readonly componentName = "Col";
+    span?: ColSpan;
+    offset?: number;
+    sm?: ColSpan;
+    md?: ColSpan;
+    lg?: ColSpan;
+    as?: string;
+    classInput?: string;
+    get isAuto(): boolean;
+    get hostClass(): string;
+    spanBasisFor(span: ColSpan | undefined): string | null;
+    get inlineStyles(): Record<string, string | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Col, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Col, "st-col", never, { "span": { "alias": "span"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "sm": { "alias": "sm"; "required": false; }; "md": { "alias": "md"; "required": false; }; "lg": { "alias": "lg"; "required": false; }; "as": { "alias": "as"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=Col.d.ts.map

package/dist/Col.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Col.d.ts","sourceRoot":"","sources":["../src/Col.ts"],"names":[],"mappings":";AAKA,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtC,MAAM,MAAM,QAAQ,GAAG;IACrB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,SAAS,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAMvE;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAM3E;AAED,qBAqBa,GAAG;IACd,MAAM,CAAC,QAAQ,CAAC,eAAe,SAAS;IACxC,QAAQ,CAAC,aAAa,SAAS;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACL,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,SAAS,IAAI,MAAM,CAStB;IAKD,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI;IAItD,IAAI,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAQrD;yCAzCU,GAAG;2CAAH,GAAG;CA0Cf"}

package/dist/Col.js

@@ -0,0 +1,98 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { NgStyle } from "@angular/common";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+export function spanBasis(span) {
+    if (span == null)
+        return undefined;
+    if (span === "auto")
+        return "auto";
+    const clamped = Math.max(1, Math.min(12, Math.round(span)));
+    const ratio = clamped / 12;
+    return `calc(${ratio * 100}% - var(--st-row-gutter, 0px) * ${(12 - clamped) / 12})`;
+}
+export function offsetMargin(offset) {
+    if (!offset)
+        return undefined;
+    const clamped = Math.max(0, Math.min(11, Math.round(offset)));
+    if (clamped === 0)
+        return undefined;
+    const ratio = clamped / 12;
+    return `calc(${ratio * 100}% + var(--st-row-gutter, 0px) * ${ratio})`;
+}
+export class Col {
+    static stComponentName = "Col";
+    componentName = "Col";
+    span;
+    offset;
+    sm;
+    md;
+    lg;
+    as;
+    classInput;
+    get isAuto() {
+        return this.span === "auto";
+    }
+    get hostClass() {
+        return classNames("st-col", this.isAuto && "st-col--auto", this.sm != null && "st-col--has-sm", this.md != null && "st-col--has-md", this.lg != null && "st-col--has-lg", this.classInput);
+    }
+    // Parité stricte React/Vue : la colonne `auto` grandit (flex-grow:1) au lieu de
+    // se figer à la largeur du contenu ; les autres colonnes sont plafonnées à leur
+    // basis et les surcharges responsives passent par les variables `--st-col-*`.
+    spanBasisFor(span) {
+        return spanBasis(span) ?? null;
+    }
+    get inlineStyles() {
+        const basis = spanBasis(this.span);
+        return {
+            flexBasis: basis,
+            maxInlineSize: this.isAuto ? undefined : basis,
+            flexGrow: this.isAuto ? '1' : '0',
+            marginInlineStart: offsetMargin(this.offset),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Col, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: Col, isStandalone: true, selector: "st-col", inputs: { span: "span", offset: "offset", sm: "sm", md: "md", lg: "lg", as: "as", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+      [style.--st-col-sm]="spanBasisFor(sm)"
+      [style.--st-col-md]="spanBasisFor(md)"
+      [style.--st-col-lg]="spanBasisFor(lg)"
+      [ngStyle]="inlineStyles"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host { display: contents; }"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Col, decorators: [{
+            type: Component,
+            args: [{ selector: "st-col", standalone: true, imports: [NgStyle], template: `
+    <div
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+      [style.--st-col-sm]="spanBasisFor(sm)"
+      [style.--st-col-md]="spanBasisFor(md)"
+      [style.--st-col-lg]="spanBasisFor(lg)"
+      [ngStyle]="inlineStyles"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, styles: [":host { display: contents; }"] }]
+        }], propDecorators: { span: [{
+                type: NgInput
+            }], offset: [{
+                type: NgInput
+            }], sm: [{
+                type: NgInput
+            }], md: [{
+                type: NgInput
+            }], lg: [{
+                type: NgInput
+            }], as: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=Col.js.map

package/dist/Col.js.map

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