@sentropic/design-system-angular 0.36.54

package/dist/DependencyWheelChart.js

@@ -0,0 +1,358 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.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 = 12;
+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 DependencyWheelChart {
+    static stComponentName = "DependencyWheelChart";
+    componentName = "DependencyWheelChart";
+    hoveredLinkIndex = null;
+    data = [];
+    labels;
+    width;
+    height;
+    label = "";
+    classInput;
+    get hostClass() {
+        return classNames("st-dependencyWheelChart", this.classInput);
+    }
+    get widthValue() {
+        return this.width ?? 480;
+    }
+    get heightValue() {
+        return this.height ?? 240;
+    }
+    get viewBox() {
+        return `0 0 ${this.widthValue} ${this.heightValue}`;
+    }
+    displayLabel(id) {
+        return this.labels?.[id] ?? id;
+    }
+    get layout() {
+        const cx = this.widthValue / 2;
+        const cy = this.heightValue / 2;
+        const outer = Math.max(Math.min(this.widthValue, this.heightValue) / 2 - 6, 1);
+        const inner = Math.max(outer - ARC_WIDTH, 1);
+        const ribbonRadius = Math.max(inner - 2, 0);
+        const links = this.data
+            .map((link, index) => ({ link, index, weight: magnitude(link.weight) }))
+            .filter((entry) => entry.weight > 0);
+        const order = [];
+        const total = new Map();
+        for (const { link, weight } of links) {
+            for (const id of [link.from, link.to]) {
+                if (!total.has(id)) {
+                    total.set(id, 0);
+                    order.push(id);
+                }
+            }
+            total.set(link.from, (total.get(link.from) ?? 0) + weight);
+            total.set(link.to, (total.get(link.to) ?? 0) + weight);
+        }
+        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: [], legend: [] };
+        }
+        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, 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,
+                textColor: contrastTextForTone(tone),
+            });
+        });
+        const maxWeight = Math.max(1, ...links.map((entry) => entry.weight));
+        const ribbons = links.map(({ link, weight, index }) => {
+            const source = arcMap.get(link.from);
+            const target = arcMap.get(link.to);
+            const sourceSpan = (usable * weight) / grandTotal;
+            const targetSpan = (usable * weight) / 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: link.from,
+                to: link.to,
+                weight,
+                tone: source.tone,
+                strokeWidth: Math.max(1, (weight / maxWeight) * 4),
+                path,
+                midX: cx,
+                midY: cy,
+            };
+        });
+        const legend = arcs.map((arc) => ({
+            label: this.displayLabel(arc.id),
+            tone: arc.tone,
+        }));
+        return { cx, cy, inner, outer, arcs, ribbons, legend };
+    }
+    get dataValueItems() {
+        return this.data
+            .filter((link) => magnitude(link.weight) > 0)
+            .map((link) => `${this.displayLabel(link.from)} -> ${this.displayLabel(link.to)}: ${link.weight}`);
+    }
+    get hoveredRibbon() {
+        if (this.hoveredLinkIndex === null)
+            return null;
+        return this.layout.ribbons.find((r) => r.index === this.hoveredLinkIndex) ?? null;
+    }
+    ribbonClass(ribbon) {
+        const dim = this.hoveredLinkIndex !== null && this.hoveredLinkIndex !== ribbon.index;
+        return classNames("st-dependencyWheelChart__ribbon", `st-dependencyWheelChart__ribbon--${ribbon.tone}`, dim && "st-dependencyWheelChart__ribbon--dim");
+    }
+    arcSegmentClass(arc) {
+        return classNames("st-dependencyWheelChart__arc", `st-dependencyWheelChart__arc--${arc.tone}`);
+    }
+    legendSwatchClass(entry) {
+        return classNames("st-graphLegend__swatch", `st-graphLegend__swatch--${entry.tone}`);
+    }
+    handleLeave() {
+        this.hoveredLinkIndex = null;
+    }
+    handleVisualPointerMove(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            this.hoveredLinkIndex = null;
+            return;
+        }
+        const raw = Number(target.getAttribute("data-link-index"));
+        this.hoveredLinkIndex = Number.isInteger(raw) && !Number.isNaN(raw) ? raw : null;
+    }
+    static ɵfac = i0_1.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0_1, type: DependencyWheelChart, deps: [], target: i0_1.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0_1.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DependencyWheelChart, isStandalone: true, selector: "st-dependency-wheel-chart", 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-dependencyWheelChart__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-dependencyWheelChart__ribbons">
+            @for (ribbon of layout.ribbons; track ribbon.index) {
+              <path
+                [class]="ribbonClass(ribbon)"
+                [attr.d]="ribbon.path"
+                [attr.stroke-width]="ribbon.strokeWidth"
+                [attr.data-link-index]="ribbon.index"
+              ></path>
+            }
+          </g>
+
+          <g class="st-dependencyWheelChart__arcs">
+            @for (arc of layout.arcs; track arc.id) {
+              <path
+                [class]="arcSegmentClass(arc)"
+                [attr.d]="arc.path"
+              ></path>
+              @if (arc.span > 0.34) {
+                <text
+                  class="st-dependencyWheelChart__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>
+
+        @if (layout.legend.length > 0) {
+          <ul class="st-graphLegend st-dependencyWheelChart__legend" aria-hidden="true">
+            @for (entry of layout.legend; track entry.label) {
+              <li class="st-graphLegend__item">
+                <span [class]="legendSwatchClass(entry)"></span>
+                <span class="st-graphLegend__label">{{ entry.label }}</span>
+              </li>
+            }
+          </ul>
+        }
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + label">
+        @for (item of dataValueItems; track item) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredRibbon; as ribbon) {
+        <div
+          class="st-dependencyWheelChart__tooltip"
+          role="presentation"
+          [style.left]="(ribbon.midX / widthValue * 100) + '%'"
+          [style.top]="(ribbon.midY / heightValue * 100) + '%'"
+        >
+          <span class="st-dependencyWheelChart__tooltipLabel">{{ displayLabel(ribbon.from) }} -> {{ displayLabel(ribbon.to) }}</span>
+          <span class="st-dependencyWheelChart__tooltipValue">{{ ribbon.weight }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true });
+}
+i0_1.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0_1, type: DependencyWheelChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-dependency-wheel-chart",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-dependencyWheelChart__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-dependencyWheelChart__ribbons">
+            @for (ribbon of layout.ribbons; track ribbon.index) {
+              <path
+                [class]="ribbonClass(ribbon)"
+                [attr.d]="ribbon.path"
+                [attr.stroke-width]="ribbon.strokeWidth"
+                [attr.data-link-index]="ribbon.index"
+              ></path>
+            }
+          </g>
+
+          <g class="st-dependencyWheelChart__arcs">
+            @for (arc of layout.arcs; track arc.id) {
+              <path
+                [class]="arcSegmentClass(arc)"
+                [attr.d]="arc.path"
+              ></path>
+              @if (arc.span > 0.34) {
+                <text
+                  class="st-dependencyWheelChart__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>
+
+        @if (layout.legend.length > 0) {
+          <ul class="st-graphLegend st-dependencyWheelChart__legend" aria-hidden="true">
+            @for (entry of layout.legend; track entry.label) {
+              <li class="st-graphLegend__item">
+                <span [class]="legendSwatchClass(entry)"></span>
+                <span class="st-graphLegend__label">{{ entry.label }}</span>
+              </li>
+            }
+          </ul>
+        }
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + label">
+        @for (item of dataValueItems; track item) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredRibbon; as ribbon) {
+        <div
+          class="st-dependencyWheelChart__tooltip"
+          role="presentation"
+          [style.left]="(ribbon.midX / widthValue * 100) + '%'"
+          [style.top]="(ribbon.midY / heightValue * 100) + '%'"
+        >
+          <span class="st-dependencyWheelChart__tooltipLabel">{{ displayLabel(ribbon.from) }} -> {{ displayLabel(ribbon.to) }}</span>
+          <span class="st-dependencyWheelChart__tooltipValue">{{ ribbon.weight }}</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=DependencyWheelChart.js.map

package/dist/DependencyWheelChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DependencyWheelChart.js","sourceRoot":"","sources":["../src/DependencyWheelChart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;;AA2BzD,MAAM,KAAK,GAA+B;IACxC,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;CACZ,CAAC;AAEF,MAAM,GAAG,GAAG,IAAI,CAAC;AACjB,MAAM,SAAS,GAAG,EAAE,CAAC;AAwCrB,SAAS,SAAS,CAAC,KAAa;IAC9B,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AACzD,CAAC;AAED,SAAS,KAAK,CAAC,EAAU,EAAE,EAAU,EAAE,MAAc,EAAE,KAAa;IAClE,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;AAChF,CAAC;AAED,SAAS,OAAO,CAAC,EAAU,EAAE,EAAU,EAAE,KAAa,EAAE,KAAa,EAAE,KAAa,EAAE,GAAW;IAC/F,MAAM,KAAK,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IACvC,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IACrC,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IACrC,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IACvC,OAAO,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,IAAI,KAAK,MAAM,KAAK,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,IAAI,KAAK,MAAM,KAAK,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC;AACnJ,CAAC;AAqFD,MAAM,OAAO,oBAAoB;IAC/B,MAAM,CAAU,eAAe,GAAG,sBAAsB,CAAC;IAChD,aAAa,GAAG,sBAAsB,CAAC;IAExC,gBAAgB,GAAkB,IAAI,CAAC;IAEpC,IAAI,GAA+B,EAAE,CAAC;IACtC,MAAM,CAA0B;IAChC,KAAK,CAAU;IACf,MAAM,CAAU;IAChB,KAAK,GAAG,EAAE,CAAC;IACJ,UAAU,CAAU;IAEtC,IAAI,SAAS;QACX,OAAO,UAAU,CAAC,yBAAyB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAChE,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC;IAC3B,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC;IAC5B,CAAC;IAED,IAAI,OAAO;QACT,OAAO,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;IACtD,CAAC;IAED,YAAY,CAAC,EAAU;QACrB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;IACjC,CAAC;IAED,IAAI,MAAM;QACR,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QAC/B,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAC/E,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;QAC7C,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAE5C,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI;aACpB,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;aACvE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAEvC,MAAM,KAAK,GAAa,EAAE,CAAC;QAC3B,MAAM,KAAK,GAAG,IAAI,GAAG,EAAkB,CAAC;QACxC,KAAK,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,KAAK,EAAE,CAAC;YACrC,KAAK,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;gBACtC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;oBACnB,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;oBACjB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACjB,CAAC;YACH,CAAC;YACD,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;YAC3D,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;QACzD,CAAC;QAED,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC5E,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,UAAU,IAAI,CAAC,EAAE,CAAC;YAC1C,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;QACrE,CAAC;QAED,MAAM,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,QAAQ,EAAE,MAAM,CAAC,CAAC;QAOxD,MAAM,MAAM,GAAG,IAAI,GAAG,EAAmB,CAAC;QAC1C,MAAM,IAAI,GAAc,EAAE,CAAC;QAE3B,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;QACzB,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YAC1B,MAAM,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC;YAC1D,MAAM,KAAK,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC;YAC9B,MAAM,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC;YACzB,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;YACtB,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;YACzC,MAAM,GAAG,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;YAC9B,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;YAC5C,MAAM,WAAW,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;YACxC,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,GAAG,CAAC,CAAC;YACnD,IAAI,CAAC,IAAI,CAAC;gBACR,EAAE;gBACF,IAAI;gBACJ,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;gBACzB,IAAI;gBACJ,IAAI,EAAE,OAAO,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC;gBAC/C,MAAM,EAAE,UAAU,CAAC,CAAC;gBACpB,MAAM,EAAE,UAAU,CAAC,CAAC;gBACpB,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC;aACrC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;QACrE,MAAM,OAAO,GAAiB,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;YAClE,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAE,CAAC;YACtC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAE,CAAC;YACpC,MAAM,UAAU,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,UAAU,CAAC;YAClD,MAAM,UAAU,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,UAAU,CAAC;YAClD,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC;YACzB,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,GAAG,UAAU,CAAC;YACtC,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC;YACnB,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC;YACzB,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,GAAG,UAAU,CAAC;YACtC,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC;YAEnB,MAAM,GAAG,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,CAAC,CAAC;YAC5C,MAAM,GAAG,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,CAAC,CAAC;YAC5C,MAAM,GAAG,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,CAAC,CAAC;YAC5C,MAAM,GAAG,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,CAAC,CAAC;YAE5C,MAAM,IAAI,GACR,KAAK,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG;gBACtB,KAAK,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG;gBAClC,KAAK,YAAY,IAAI,YAAY,UAAU,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG;gBAC5D,KAAK,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG;gBAClC,KAAK,YAAY,IAAI,YAAY,UAAU,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC;YAEhE,OAAO;gBACL,KAAK;gBACL,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,MAAM;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;gBAClD,IAAI;gBACJ,IAAI,EAAE,EAAE;gBACR,IAAI,EAAE,EAAE;aACT,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,MAAM,GAAkB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YAC/C,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;YAChC,IAAI,EAAE,GAAG,CAAC,IAAI;SACf,CAAC,CAAC,CAAC;QAEJ,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;IACzD,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,IAAI;aACb,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;aAC5C,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IACvG,CAAC;IAED,IAAI,aAAa;QACf,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QAChD,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC;IACpF,CAAC;IAED,WAAW,CAAC,MAAkB;QAC5B,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,KAAK,IAAI,IAAI,IAAI,CAAC,gBAAgB,KAAK,MAAM,CAAC,KAAK,CAAC;QACrF,OAAO,UAAU,CACf,iCAAiC,EACjC,oCAAoC,MAAM,CAAC,IAAI,EAAE,EACjD,GAAG,IAAI,sCAAsC,CAC9C,CAAC;IACJ,CAAC;IAED,eAAe,CAAC,GAAY;QAC1B,OAAO,UAAU,CAAC,8BAA8B,EAAE,iCAAiC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;IACjG,CAAC;IAED,iBAAiB,CAAC,KAAkB;QAClC,OAAO,UAAU,CAAC,wBAAwB,EAAE,2BAA2B,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;IACvF,CAAC;IAED,WAAW;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,uBAAuB,CAAC,KAAmB;QACzC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC7B,OAAO;QACT,CAAC;QACD,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAC3D,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IACnF,CAAC;4GAtLU,oBAAoB;8FAApB,oBAAoB,0NAhFrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8ET;;gGAEU,oBAAoB;kBAnFhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,2BAA2B;oBACrC,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8ET;iBACF;;sBAOE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO"}

package/dist/DisplaySettings.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export type DisplayFontScale = "normal" | "large" | "extra-large";
+export type DisplayContrast = "default" | "high";
+export type DisplayLineSpacing = "normal" | "comfortable";
+export interface DisplaySettingsState {
+    fontScale: DisplayFontScale;
+    contrast: DisplayContrast;
+    lineSpacing: DisplayLineSpacing;
+    reducedMotion: boolean;
+}
+export type DisplaySettingsProps = {
+    title?: string;
+    values?: Partial<DisplaySettingsState>;
+    showFontScale?: boolean;
+    showContrast?: boolean;
+    showLineSpacing?: boolean;
+    showReducedMotion?: boolean;
+    class?: string;
+};
+export declare class DisplaySettings {
+    static readonly stComponentName = "DisplaySettings";
+    readonly componentName = "DisplaySettings";
+    title?: string;
+    values?: Partial<DisplaySettingsState>;
+    showFontScale: boolean;
+    showContrast: boolean;
+    showLineSpacing: boolean;
+    showReducedMotion: boolean;
+    classInput?: string;
+    readonly change: EventEmitter<DisplaySettingsState>;
+    private overrides;
+    get resolvedTitle(): string;
+    get state(): DisplaySettingsState;
+    update(next: Partial<DisplaySettingsState>): void;
+    get hostClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisplaySettings, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisplaySettings, "st-display-settings", never, { "title": { "alias": "title"; "required": false; }; "values": { "alias": "values"; "required": false; }; "showFontScale": { "alias": "showFontScale"; "required": false; }; "showContrast": { "alias": "showContrast"; "required": false; }; "showLineSpacing": { "alias": "showLineSpacing"; "required": false; }; "showReducedMotion": { "alias": "showReducedMotion"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+}
+//# sourceMappingURL=DisplaySettings.d.ts.map

package/dist/DisplaySettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisplaySettings.d.ts","sourceRoot":"","sources":["../src/DisplaySettings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA4B,MAAM,eAAe,CAAC;;AAIlF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;AAElE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBA+Da,eAAe;IAC1B,MAAM,CAAC,QAAQ,CAAC,eAAe,qBAAqB;IACpD,QAAQ,CAAC,aAAa,qBAAqB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACvC,aAAa,UAAQ;IACrB,YAAY,UAAQ;IACpB,eAAe,UAAQ;IACvB,iBAAiB,UAAQ;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,MAAM,qCAA4C;IAErE,OAAO,CAAC,SAAS,CAAqC;IAEtD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,KAAK,IAAI,oBAAoB,CAOhC;IAED,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG,IAAI;IAKjD,IAAI,SAAS,IAAI,MAAM,CAEtB;yCAnCU,eAAe;2CAAf,eAAe;CAoC3B"}

package/dist/DisplaySettings.js

@@ -0,0 +1,178 @@
+import { Component, EventEmitter, Input as NgInput, Output } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+export class DisplaySettings {
+    static stComponentName = "DisplaySettings";
+    componentName = "DisplaySettings";
+    title;
+    values;
+    showFontScale = true;
+    showContrast = true;
+    showLineSpacing = true;
+    showReducedMotion = true;
+    classInput;
+    change = new EventEmitter();
+    overrides = {};
+    get resolvedTitle() {
+        return this.title ?? "Paramètres d’affichage";
+    }
+    get state() {
+        return {
+            fontScale: this.overrides.fontScale ?? this.values?.fontScale ?? "normal",
+            contrast: this.overrides.contrast ?? this.values?.contrast ?? "default",
+            lineSpacing: this.overrides.lineSpacing ?? this.values?.lineSpacing ?? "normal",
+            reducedMotion: this.overrides.reducedMotion ?? this.values?.reducedMotion ?? false,
+        };
+    }
+    update(next) {
+        this.overrides = { ...this.overrides, ...next };
+        this.change.emit(this.state);
+    }
+    get hostClass() {
+        return classNames("st-displaySettings", this.classInput);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DisplaySettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DisplaySettings, isStandalone: true, selector: "st-display-settings", inputs: { title: "title", values: "values", showFontScale: "showFontScale", showContrast: "showContrast", showLineSpacing: "showLineSpacing", showReducedMotion: "showReducedMotion", classInput: ["class", "classInput"] }, outputs: { change: "change" }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <p class="st-displaySettings__title">{{ resolvedTitle }}</p>
+
+      <div class="st-displaySettings__grid">
+        @if (showFontScale) {
+          <label class="st-displaySettings__field">
+            <span class="st-displaySettings__label">Taille de texte</span>
+            <select
+              [value]="state.fontScale"
+              (change)="update({ fontScale: $any($event.target).value })"
+            >
+              <option value="normal">Normale</option>
+              <option value="large">Grande</option>
+              <option value="extra-large">Très grande</option>
+            </select>
+          </label>
+        }
+
+        @if (showContrast) {
+          <label class="st-displaySettings__field">
+            <span class="st-displaySettings__label">Contraste</span>
+            <select
+              [value]="state.contrast"
+              (change)="update({ contrast: $any($event.target).value })"
+            >
+              <option value="default">Standard</option>
+              <option value="high">Élevé</option>
+            </select>
+          </label>
+        }
+
+        @if (showLineSpacing) {
+          <label class="st-displaySettings__field">
+            <span class="st-displaySettings__label">Interligne</span>
+            <select
+              [value]="state.lineSpacing"
+              (change)="update({ lineSpacing: $any($event.target).value })"
+            >
+              <option value="normal">Normal</option>
+              <option value="comfortable">Confortable</option>
+            </select>
+          </label>
+        }
+
+        @if (showReducedMotion) {
+          <label class="st-displaySettings__field st-displaySettings__field--switch">
+            <span class="st-displaySettings__label">Animations (réduction)</span>
+            <input
+              type="checkbox"
+              role="switch"
+              [checked]="state.reducedMotion"
+              (change)="update({ reducedMotion: $any($event.target).checked })"
+            />
+          </label>
+        }
+      </div>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DisplaySettings, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-display-settings",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <p class="st-displaySettings__title">{{ resolvedTitle }}</p>
+
+      <div class="st-displaySettings__grid">
+        @if (showFontScale) {
+          <label class="st-displaySettings__field">
+            <span class="st-displaySettings__label">Taille de texte</span>
+            <select
+              [value]="state.fontScale"
+              (change)="update({ fontScale: $any($event.target).value })"
+            >
+              <option value="normal">Normale</option>
+              <option value="large">Grande</option>
+              <option value="extra-large">Très grande</option>
+            </select>
+          </label>
+        }
+
+        @if (showContrast) {
+          <label class="st-displaySettings__field">
+            <span class="st-displaySettings__label">Contraste</span>
+            <select
+              [value]="state.contrast"
+              (change)="update({ contrast: $any($event.target).value })"
+            >
+              <option value="default">Standard</option>
+              <option value="high">Élevé</option>
+            </select>
+          </label>
+        }
+
+        @if (showLineSpacing) {
+          <label class="st-displaySettings__field">
+            <span class="st-displaySettings__label">Interligne</span>
+            <select
+              [value]="state.lineSpacing"
+              (change)="update({ lineSpacing: $any($event.target).value })"
+            >
+              <option value="normal">Normal</option>
+              <option value="comfortable">Confortable</option>
+            </select>
+          </label>
+        }
+
+        @if (showReducedMotion) {
+          <label class="st-displaySettings__field st-displaySettings__field--switch">
+            <span class="st-displaySettings__label">Animations (réduction)</span>
+            <input
+              type="checkbox"
+              role="switch"
+              [checked]="state.reducedMotion"
+              (change)="update({ reducedMotion: $any($event.target).checked })"
+            />
+          </label>
+        }
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { title: [{
+                type: NgInput
+            }], values: [{
+                type: NgInput
+            }], showFontScale: [{
+                type: NgInput
+            }], showContrast: [{
+                type: NgInput
+            }], showLineSpacing: [{
+                type: NgInput
+            }], showReducedMotion: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }], change: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=DisplaySettings.js.map

package/dist/DisplaySettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisplaySettings.js","sourceRoot":"","sources":["../src/DisplaySettings.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;;AAwF7C,MAAM,OAAO,eAAe;IAC1B,MAAM,CAAU,eAAe,GAAG,iBAAiB,CAAC;IAC3C,aAAa,GAAG,iBAAiB,CAAC;IAChC,KAAK,CAAU;IACf,MAAM,CAAiC;IACvC,aAAa,GAAG,IAAI,CAAC;IACrB,YAAY,GAAG,IAAI,CAAC;IACpB,eAAe,GAAG,IAAI,CAAC;IACvB,iBAAiB,GAAG,IAAI,CAAC;IAClB,UAAU,CAAU;IAEnB,MAAM,GAAG,IAAI,YAAY,EAAwB,CAAC;IAE7D,SAAS,GAAkC,EAAE,CAAC;IAEtD,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,KAAK,IAAI,wBAAwB,CAAC;IAChD,CAAC;IAED,IAAI,KAAK;QACP,OAAO;YACL,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE,SAAS,IAAI,QAAQ;YACzE,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,QAAQ,IAAI,SAAS;YACvE,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM,EAAE,WAAW,IAAI,QAAQ;YAC/E,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,aAAa,IAAI,KAAK;SACnF,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,IAAmC;QACxC,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,EAAE,CAAC;QAChD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,IAAI,SAAS;QACX,OAAO,UAAU,CAAC,oBAAoB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC3D,CAAC;wGAnCU,eAAe;4FAAf,eAAe,2UA5DhB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DT;;4FAEU,eAAe;kBA/D3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DT;iBACF;;sBAIE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO;;sBAEf,MAAM"}