@sentropic/design-system-angular 0.36.54

package/dist/DonutChart.js

@@ -0,0 +1,261 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import { formatDataLabel, normalizeDataLabels } from "./chartDataLabels.js";
+import * as i0 from "@angular/core";
+const DONUT_TONES = [
+    "category1", "category2", "category3", "category4",
+    "category5", "category6", "category7", "category8",
+];
+const DATA_LABEL_MIN_DEG = 18;
+export class DonutChart {
+    static stComponentName = "DonutChart";
+    componentName = "DonutChart";
+    data = [];
+    size;
+    thickness;
+    centerLabel;
+    dataLabels;
+    label = "";
+    classInput;
+    hoveredIndex = null;
+    get hostClass() {
+        return classNames("st-donutChart", this.classInput);
+    }
+    get sizeValue() {
+        return this.size ?? 220;
+    }
+    get thicknessValue() {
+        return this.thickness ?? 34;
+    }
+    get viewBox() {
+        return `0 0 ${this.sizeValue} ${this.sizeValue}`;
+    }
+    get slices() {
+        const data = this.data;
+        const size = this.sizeValue;
+        const thickness = this.thicknessValue;
+        const total = data.reduce((sum, d) => sum + Math.max(d.value, 0), 0);
+        if (total <= 0)
+            return { total: 0, items: [] };
+        const cx = size / 2;
+        const cy = size / 2;
+        const rOuter = size / 2 - 2;
+        const rInner = Math.max(rOuter - thickness, 1);
+        const TWO_PI = Math.PI * 2;
+        let angle = -Math.PI / 2;
+        const polar = (r, a) => [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+        const items = data.map((d, i) => {
+            const frac = Math.max(d.value, 0) / total;
+            const span = Math.min(frac * TWO_PI, TWO_PI - 0.0001);
+            const a0 = angle;
+            const a1 = angle + span;
+            angle = a1;
+            const large = span > Math.PI ? 1 : 0;
+            const [x0o, y0o] = polar(rOuter, a0);
+            const [x1o, y1o] = polar(rOuter, a1);
+            const [x1i, y1i] = polar(rInner, a1);
+            const [x0i, y0i] = polar(rInner, a0);
+            const path = `M ${x0o} ${y0o} A ${rOuter} ${rOuter} 0 ${large} 1 ${x1o} ${y1o} L ${x1i} ${y1i} A ${rInner} ${rInner} 0 ${large} 0 ${x0i} ${y0i} Z`;
+            const aMid = (a0 + a1) / 2;
+            const rMid = (rOuter + rInner) / 2;
+            const [labelX, labelY] = polar(rMid, aMid);
+            return {
+                datum: d,
+                path,
+                tone: d.tone ?? DONUT_TONES[i % DONUT_TONES.length],
+                pct: frac * 100,
+                spanDeg: (span * 180) / Math.PI,
+                labelX,
+                labelY,
+            };
+        });
+        return { total, items };
+    }
+    sliceClass(slice, i) {
+        const isDim = this.hoveredIndex !== null && this.hoveredIndex !== i;
+        return classNames("st-donutChart__slice", `st-donutChart__slice--${slice.tone}`, isDim ? "st-donutChart__slice--dim" : undefined);
+    }
+    fmtPct(p) {
+        return `${p.toFixed(p < 10 ? 1 : 0)}%`;
+    }
+    get dataValueItems() {
+        return this.slices.items.map((slice) => `${slice.datum.label}: ${slice.datum.value} (${this.fmtPct(slice.pct)})`);
+    }
+    get dataLabelItems() {
+        const opts = normalizeDataLabels(this.dataLabels);
+        if (!opts.enabled)
+            return [];
+        return this.slices.items
+            .filter((slice) => slice.spanDeg >= DATA_LABEL_MIN_DEG)
+            .map((slice) => ({
+            key: slice.datum.label,
+            x: slice.labelX,
+            y: slice.labelY,
+            text: formatDataLabel(slice.datum.value, opts, (v) => String(v)),
+        }));
+    }
+    handleVisualPointerMove(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            this.hoveredIndex = null;
+            return;
+        }
+        const raw = Number(target.getAttribute("data-chart-index"));
+        this.hoveredIndex = Number.isInteger(raw) ? raw : null;
+    }
+    handleLeave() {
+        this.hoveredIndex = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DonutChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DonutChart, isStandalone: true, selector: "st-donut-chart", inputs: { data: "data", size: "size", thickness: "thickness", centerLabel: "centerLabel", dataLabels: "dataLabels", label: "label", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-donutChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handleVisualPointerMove($event)"
+        (pointerleave)="handleLeave()"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          @if (slices.total > 0) {
+            @for (slice of slices.items; track slice.datum.label; let i = $index) {
+              <path
+                [class]="sliceClass(slice, i)"
+                [attr.d]="slice.path"
+                [attr.data-chart-index]="i"
+              ></path>
+            }
+            @if (centerLabel !== null) {
+              <text
+                class="st-donutChart__center"
+                [attr.x]="sizeValue / 2"
+                [attr.y]="sizeValue / 2"
+                text-anchor="middle"
+                dominant-baseline="central"
+              >{{ centerLabel !== undefined ? centerLabel : slices.total }}</text>
+            }
+            @if (dataLabelItems.length > 0) {
+              <g class="st-donutChart__dataLabels" aria-hidden="true">
+                @for (d of dataLabelItems; track d.key) {
+                  <text
+                    class="st-donutChart__dataLabel"
+                    [attr.x]="d.x"
+                    [attr.y]="d.y"
+                    text-anchor="middle"
+                    dominant-baseline="central"
+                  >{{ d.text }}</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 (hoveredIndex !== null && slices.items[hoveredIndex!]) {
+        <div class="st-donutChart__tooltip" role="presentation">
+          <span class="st-donutChart__tooltipLabel">{{ slices.items[hoveredIndex!]!.datum.label }}</span>
+          <span class="st-donutChart__tooltipValue">{{ slices.items[hoveredIndex!]!.datum.value }} · {{ fmtPct(slices.items[hoveredIndex!]!.pct) }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DonutChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-donut-chart",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-donutChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handleVisualPointerMove($event)"
+        (pointerleave)="handleLeave()"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          @if (slices.total > 0) {
+            @for (slice of slices.items; track slice.datum.label; let i = $index) {
+              <path
+                [class]="sliceClass(slice, i)"
+                [attr.d]="slice.path"
+                [attr.data-chart-index]="i"
+              ></path>
+            }
+            @if (centerLabel !== null) {
+              <text
+                class="st-donutChart__center"
+                [attr.x]="sizeValue / 2"
+                [attr.y]="sizeValue / 2"
+                text-anchor="middle"
+                dominant-baseline="central"
+              >{{ centerLabel !== undefined ? centerLabel : slices.total }}</text>
+            }
+            @if (dataLabelItems.length > 0) {
+              <g class="st-donutChart__dataLabels" aria-hidden="true">
+                @for (d of dataLabelItems; track d.key) {
+                  <text
+                    class="st-donutChart__dataLabel"
+                    [attr.x]="d.x"
+                    [attr.y]="d.y"
+                    text-anchor="middle"
+                    dominant-baseline="central"
+                  >{{ d.text }}</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 (hoveredIndex !== null && slices.items[hoveredIndex!]) {
+        <div class="st-donutChart__tooltip" role="presentation">
+          <span class="st-donutChart__tooltipLabel">{{ slices.items[hoveredIndex!]!.datum.label }}</span>
+          <span class="st-donutChart__tooltipValue">{{ slices.items[hoveredIndex!]!.datum.value }} · {{ fmtPct(slices.items[hoveredIndex!]!.pct) }}</span>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], size: [{
+                type: NgInput
+            }], thickness: [{
+                type: NgInput
+            }], centerLabel: [{
+                type: NgInput
+            }], dataLabels: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=DonutChart.js.map

package/dist/DonutChart.js.map

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

package/dist/Drawer.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export type DrawerSide = "left" | "right" | "bottom";
+/** @deprecated Use {@link DrawerSide}. Kept for backward compatibility. */
+export type DrawerPlacement = DrawerSide;
+export type DrawerProps = {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    side?: DrawerSide;
+    closeLabel?: string;
+    class?: string;
+};
+export declare class Drawer {
+    static readonly stComponentName = "Drawer";
+    readonly componentName = "Drawer";
+    open?: boolean;
+    title?: string;
+    description?: string;
+    side?: DrawerSide;
+    closeLabel?: string;
+    footer?: unknown;
+    classInput?: string;
+    readonly close: EventEmitter<void>;
+    get hostClass(): string;
+    onBackdropClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Drawer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Drawer, "st-drawer", never, { "open": { "alias": "open"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "side": { "alias": "side"; "required": false; }; "closeLabel": { "alias": "closeLabel"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, { "close": "close"; }, never, ["*", "[slot='footer']"], true, never>;
+}
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA4B,MAAM,eAAe,CAAC;;AAIlF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErD,2EAA2E;AAC3E,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC;AAEzC,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBA+Ca,MAAM;IACjB,MAAM,CAAC,QAAQ,CAAC,eAAe,YAAY;IAC3C,QAAQ,CAAC,aAAa,YAAY;IAEvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACV,UAAU,CAAC,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,KAAK,qBAA4B;IAEpD,IAAI,SAAS,IAAI,MAAM,CAMtB;IAED,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;yCAtB7B,MAAM;2CAAN,MAAM;CA2BlB"}

package/dist/Drawer.js

@@ -0,0 +1,135 @@
+import { Component, EventEmitter, Input as NgInput, Output } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+export class Drawer {
+    static stComponentName = "Drawer";
+    componentName = "Drawer";
+    open;
+    title;
+    description;
+    side;
+    closeLabel;
+    footer;
+    classInput;
+    close = new EventEmitter();
+    get hostClass() {
+        return classNames("st-drawer", `st-drawer--${this.side ?? "right"}`, this.classInput);
+    }
+    onBackdropClick(event) {
+        if (event.target === event.currentTarget) {
+            this.close.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Drawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: Drawer, isStandalone: true, selector: "st-drawer", inputs: { open: "open", title: "title", description: "description", side: "side", closeLabel: "closeLabel", footer: "footer", classInput: ["class", "classInput"] }, outputs: { close: "close" }, ngImport: i0, template: `
+    @if (open) {
+      <div
+        class="st-drawer__backdrop"
+        data-testid="st-drawer-backdrop"
+        role="presentation"
+        (click)="onBackdropClick($event)"
+      >
+        <aside
+          [attr.data-st-component]="componentName"
+          [class]="hostClass"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="title || 'Drawer'"
+        >
+          <header class="st-drawer__header">
+            <div>
+              @if (title) {
+                <h2 class="st-drawer__title">{{ title }}</h2>
+              }
+              @if (description) {
+                <p class="st-drawer__description">{{ description }}</p>
+              }
+            </div>
+            <button
+              type="button"
+              class="st-drawer__close"
+              [attr.aria-label]="closeLabel || 'Close'"
+              (click)="close.emit()"
+            ><span aria-hidden="true">&#x2715;</span></button>
+          </header>
+          <div class="st-drawer__body">
+            <ng-content></ng-content>
+          </div>
+          @if (footer != null) {
+            <footer class="st-drawer__footer">
+              <ng-content select="[slot='footer']"></ng-content>
+            </footer>
+          }
+        </aside>
+      </div>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Drawer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-drawer",
+                    standalone: true,
+                    template: `
+    @if (open) {
+      <div
+        class="st-drawer__backdrop"
+        data-testid="st-drawer-backdrop"
+        role="presentation"
+        (click)="onBackdropClick($event)"
+      >
+        <aside
+          [attr.data-st-component]="componentName"
+          [class]="hostClass"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="title || 'Drawer'"
+        >
+          <header class="st-drawer__header">
+            <div>
+              @if (title) {
+                <h2 class="st-drawer__title">{{ title }}</h2>
+              }
+              @if (description) {
+                <p class="st-drawer__description">{{ description }}</p>
+              }
+            </div>
+            <button
+              type="button"
+              class="st-drawer__close"
+              [attr.aria-label]="closeLabel || 'Close'"
+              (click)="close.emit()"
+            ><span aria-hidden="true">&#x2715;</span></button>
+          </header>
+          <div class="st-drawer__body">
+            <ng-content></ng-content>
+          </div>
+          @if (footer != null) {
+            <footer class="st-drawer__footer">
+              <ng-content select="[slot='footer']"></ng-content>
+            </footer>
+          }
+        </aside>
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { open: [{
+                type: NgInput
+            }], title: [{
+                type: NgInput
+            }], description: [{
+                type: NgInput
+            }], side: [{
+                type: NgInput
+            }], closeLabel: [{
+                type: NgInput
+            }], footer: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }], close: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=Drawer.js.map

package/dist/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../src/Drawer.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;;AA+D7C,MAAM,OAAO,MAAM;IACjB,MAAM,CAAU,eAAe,GAAG,QAAQ,CAAC;IAClC,aAAa,GAAG,QAAQ,CAAC;IAEvB,IAAI,CAAW;IACf,KAAK,CAAU;IACf,WAAW,CAAU;IACrB,IAAI,CAAc;IAClB,UAAU,CAAU;IACpB,MAAM,CAAW;IACV,UAAU,CAAU;IAEnB,KAAK,GAAG,IAAI,YAAY,EAAQ,CAAC;IAEpD,IAAI,SAAS;QACX,OAAO,UAAU,CACf,WAAW,EACX,cAAc,IAAI,CAAC,IAAI,IAAI,OAAO,EAAE,EACpC,IAAI,CAAC,UAAU,CAChB,CAAC;IACJ,CAAC;IAED,eAAe,CAAC,KAAiB;QAC/B,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EAAE,CAAC;YACzC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;wGA1BU,MAAM;4FAAN,MAAM,uQA5CP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CT;;4FAEU,MAAM;kBA/ClB,SAAS;mBAAC;oBACT,QAAQ,EAAE,WAAW;oBACrB,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CT;iBACF;;sBAKE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO;;sBAEf,MAAM"}

package/dist/Dropdown.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export type DropdownOption = {
+    value: string;
+    label: unknown;
+    disabled?: boolean;
+};
+export type DropdownProps = {
+    label?: string;
+    options: DropdownOption[];
+    value?: string;
+    open?: boolean;
+    placeholder?: string;
+    locale?: string;
+    onSelect?: (value: string) => void;
+    class?: string;
+};
+export declare class Dropdown {
+    static readonly stComponentName = "Dropdown";
+    readonly componentName = "Dropdown";
+    label?: string;
+    options: DropdownOption[];
+    value?: string;
+    open?: boolean;
+    placeholder?: string;
+    locale?: string;
+    onSelect?: (value: string) => void;
+    classInput?: string;
+    readonly select: EventEmitter<string>;
+    localOpen: boolean;
+    localValue: string;
+    get resolvedPlaceholder(): string;
+    get selectedLabel(): string;
+    get iconClass(): string;
+    get hostClass(): string;
+    selectOption(option: DropdownOption): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Dropdown, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Dropdown, "st-dropdown", never, { "label": { "alias": "label"; "required": false; }; "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "open": { "alias": "open"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "onSelect": { "alias": "onSelect"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, { "select": "select"; }, never, never, true, never>;
+}
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../src/Dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA4B,MAAM,eAAe,CAAC;;AAIlF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAmDa,QAAQ;IACnB,MAAM,CAAC,QAAQ,CAAC,eAAe,cAAc;IAC7C,QAAQ,CAAC,aAAa,cAAc;IAEzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAM;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,MAAM,uBAA8B;IAEvD,SAAS,UAAS;IAClB,UAAU,SAAM;IAEhB,IAAI,mBAAmB,IAAI,MAAM,CAGhC;IAED,IAAI,aAAa,IAAI,MAAM,CAI1B;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,YAAY,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;yCArC/B,QAAQ;2CAAR,QAAQ;CA4CpB"}

package/dist/Dropdown.js

@@ -0,0 +1,163 @@
+import { Component, EventEmitter, Input as NgInput, Output } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+export class Dropdown {
+    static stComponentName = "Dropdown";
+    componentName = "Dropdown";
+    label;
+    options = [];
+    value;
+    open;
+    placeholder;
+    locale;
+    onSelect;
+    classInput;
+    select = new EventEmitter();
+    localOpen = false;
+    localValue = "";
+    get resolvedPlaceholder() {
+        const isFr = (this.locale ?? "fr-FR").toLowerCase().startsWith("fr");
+        return this.placeholder ?? (isFr ? "Sélectionner" : "Select");
+    }
+    get selectedLabel() {
+        const val = this.value ?? this.localValue;
+        const opt = this.options.find((o) => o.value === val);
+        return opt ? String(opt.label) : this.resolvedPlaceholder;
+    }
+    get iconClass() {
+        return classNames("st-dropdown__icon", this.localOpen ? "st-dropdown__icon--open" : undefined);
+    }
+    get hostClass() {
+        return classNames("st-dropdown", this.classInput);
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        this.localValue = option.value;
+        this.localOpen = false;
+        this.select.emit(option.value);
+        this.onSelect?.(option.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Dropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: Dropdown, isStandalone: true, selector: "st-dropdown", inputs: { label: "label", options: "options", value: "value", open: "open", placeholder: "placeholder", locale: "locale", onSelect: "onSelect", classInput: ["class", "classInput"] }, outputs: { select: "select" }, ngImport: i0, template: `
+    <div
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+    >
+      <button
+        type="button"
+        class="st-dropdown__button"
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="localOpen"
+        (click)="localOpen = !localOpen"
+      >
+        <span class="st-dropdown__label">{{ label }}</span>: <span class="st-dropdown__value">{{ selectedLabel }}</span>
+        <svg
+          [class]="iconClass"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.25"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        ><path d="m6 9 6 6 6-6"></path></svg>
+      </button>
+      @if (localOpen) {
+        <div
+          class="st-dropdown__list"
+          role="listbox"
+          [attr.aria-label]="label"
+        >
+          @for (option of options; track option.value) {
+            <button
+              type="button"
+              role="option"
+              class="st-dropdown__option"
+              [disabled]="option.disabled"
+              [attr.aria-disabled]="option.disabled ? 'true' : null"
+              [attr.aria-selected]="option.value === (value ?? localValue)"
+              (click)="selectOption(option)"
+            >{{ option.label }}</button>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Dropdown, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-dropdown",
+                    standalone: true,
+                    template: `
+    <div
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+    >
+      <button
+        type="button"
+        class="st-dropdown__button"
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="localOpen"
+        (click)="localOpen = !localOpen"
+      >
+        <span class="st-dropdown__label">{{ label }}</span>: <span class="st-dropdown__value">{{ selectedLabel }}</span>
+        <svg
+          [class]="iconClass"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.25"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        ><path d="m6 9 6 6 6-6"></path></svg>
+      </button>
+      @if (localOpen) {
+        <div
+          class="st-dropdown__list"
+          role="listbox"
+          [attr.aria-label]="label"
+        >
+          @for (option of options; track option.value) {
+            <button
+              type="button"
+              role="option"
+              class="st-dropdown__option"
+              [disabled]="option.disabled"
+              [attr.aria-disabled]="option.disabled ? 'true' : null"
+              [attr.aria-selected]="option.value === (value ?? localValue)"
+              (click)="selectOption(option)"
+            >{{ option.label }}</button>
+          }
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { label: [{
+                type: NgInput
+            }], options: [{
+                type: NgInput
+            }], value: [{
+                type: NgInput
+            }], open: [{
+                type: NgInput
+            }], placeholder: [{
+                type: NgInput
+            }], locale: [{
+                type: NgInput
+            }], onSelect: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }], select: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=Dropdown.js.map

package/dist/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../src/Dropdown.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;;AAsE7C,MAAM,OAAO,QAAQ;IACnB,MAAM,CAAU,eAAe,GAAG,UAAU,CAAC;IACpC,aAAa,GAAG,UAAU,CAAC;IAEzB,KAAK,CAAU;IACf,OAAO,GAAqB,EAAE,CAAC;IAC/B,KAAK,CAAU;IACf,IAAI,CAAW;IACf,WAAW,CAAU;IACrB,MAAM,CAAU;IAChB,QAAQ,CAA2B;IAC5B,UAAU,CAAU;IAEnB,MAAM,GAAG,IAAI,YAAY,EAAU,CAAC;IAEvD,SAAS,GAAG,KAAK,CAAC;IAClB,UAAU,GAAG,EAAE,CAAC;IAEhB,IAAI,mBAAmB;QACrB,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACrE,OAAO,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAChE,CAAC;IAED,IAAI,aAAa;QACf,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC;QAC1C,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC;QACtD,OAAO,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC;IAC5D,CAAC;IAED,IAAI,SAAS;QACX,OAAO,UAAU,CAAC,mBAAmB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACjG,CAAC;IAED,IAAI,SAAS;QACX,OAAO,UAAU,CAAC,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACpD,CAAC;IAED,YAAY,CAAC,MAAsB;QACjC,IAAI,MAAM,CAAC,QAAQ;YAAE,OAAO;QAC5B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;wGA3CU,QAAQ;4FAAR,QAAQ,6RAhDT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CT;;4FAEU,QAAQ;kBAnDpB,SAAS;mBAAC;oBACT,QAAQ,EAAE,aAAa;oBACvB,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CT;iBACF;;sBAKE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO;;sBAEf,MAAM"}