@sentropic/design-system-angular 0.36.54

package/dist/KpiCard.js

@@ -0,0 +1,389 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import {} from "./Sparkline.js";
+import { cellDecorationClass, cellDecorationLabel, cellDecorationIconNodes, } from "./cellDecoration.js";
+import * as i0 from "@angular/core";
+export class KpiCard {
+    static stComponentName = "KpiCard";
+    componentName = "KpiCard";
+    value;
+    label;
+    delta;
+    deltaFormat = "percent";
+    trend;
+    format = "number";
+    unit;
+    currency = "EUR";
+    locale;
+    sparkline;
+    size = "md";
+    tone;
+    decoration;
+    classInput;
+    get hostClass() {
+        return classNames("st-kpiCard", `st-kpiCard--${this.size}`, this.tone && `st-kpiCard--${this.tone}`, this.tone && "st-kpiCard--toned", this.decoration && "st-cell", this.decoration && cellDecorationClass(this.decoration.intent), this.classInput);
+    }
+    get formattedValue() {
+        if (typeof this.value === "string")
+            return this.value;
+        if (this.format === "currency") {
+            return new Intl.NumberFormat(this.locale, {
+                style: "currency",
+                currency: this.currency,
+            }).format(this.value);
+        }
+        if (this.format === "percent") {
+            return new Intl.NumberFormat(this.locale, {
+                style: "percent",
+                maximumFractionDigits: 2,
+            }).format(this.value);
+        }
+        return new Intl.NumberFormat(this.locale).format(this.value);
+    }
+    get formattedDelta() {
+        if (this.delta == null)
+            return undefined;
+        const sign = this.delta > 0 ? "+" : "";
+        if (this.deltaFormat === "percent") {
+            const pct = new Intl.NumberFormat(this.locale, {
+                style: "percent",
+                maximumFractionDigits: 1,
+            }).format(this.delta);
+            return `${sign}${pct}`;
+        }
+        return `${sign}${new Intl.NumberFormat(this.locale).format(this.delta)}`;
+    }
+    get resolvedTrend() {
+        if (this.trend)
+            return this.trend;
+        if (this.delta == null)
+            return "flat";
+        if (this.delta > 0)
+            return "up";
+        if (this.delta < 0)
+            return "down";
+        return "flat";
+    }
+    get sparklineTone() {
+        return this.resolvedTrend === "up"
+            ? "success"
+            : this.resolvedTrend === "down"
+                ? "error"
+                : "neutral";
+    }
+    sparklineWidth = 120;
+    sparklineHeight = 28;
+    sparklineStrokeWidth = 1.5;
+    get sparklineViewBox() {
+        return `0 0 ${this.sparklineWidth} ${this.sparklineHeight}`;
+    }
+    get sparklineSpanClass() {
+        return classNames("st-kpiCard__sparkline", "st-sparkline", `st-sparkline--${this.sparklineTone}`);
+    }
+    get sparklineGeometry() {
+        const data = this.sparkline;
+        if (!data || data.length === 0)
+            return { line: "", area: "" };
+        const PADDING = 2;
+        const width = this.sparklineWidth;
+        const height = this.sparklineHeight;
+        const min = Math.min(...data);
+        const max = Math.max(...data);
+        const span = max - min || 1;
+        const innerWidth = Math.max(width - PADDING * 2, 1);
+        const innerHeight = Math.max(height - PADDING * 2, 1);
+        const step = data.length > 1 ? innerWidth / (data.length - 1) : 0;
+        const points = data.map((value, index) => {
+            const x = PADDING + step * index;
+            const normalised = (value - min) / span;
+            const y = PADDING + (1 - normalised) * innerHeight;
+            return { x, y };
+        });
+        const line = points
+            .map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`)
+            .join(" ");
+        const baseline = height - PADDING;
+        const first = points[0];
+        const last = points[points.length - 1];
+        const area = `${line} L${last.x.toFixed(2)},${baseline.toFixed(2)} L${first.x.toFixed(2)},${baseline.toFixed(2)} Z`;
+        return { line, area };
+    }
+    get sparklineLine() {
+        return this.sparklineGeometry.line;
+    }
+    get sparklineArea() {
+        return this.sparklineGeometry.area;
+    }
+    get arrow() {
+        return this.resolvedTrend === "up"
+            ? "M3 8.5 7 4l4 4.5"
+            : this.resolvedTrend === "down"
+                ? "M3 5.5 7 10l4-4.5"
+                : "M3 7h8";
+    }
+    get trendLabel() {
+        return this.resolvedTrend === "up"
+            ? "en hausse"
+            : this.resolvedTrend === "down"
+                ? "en baisse"
+                : "stable";
+    }
+    get ariaLabel() {
+        return [
+            this.label,
+            this.formattedValue,
+            this.unit,
+            this.formattedDelta && `${this.formattedDelta} ${this.trendLabel ?? ""}`.trim(),
+            this.decoration && cellDecorationLabel[this.decoration.intent],
+        ]
+            .filter(Boolean)
+            .join(", ");
+    }
+    get deltaClass() {
+        return classNames("st-kpiCard__delta", `st-kpiCard__delta--${this.resolvedTrend}`);
+    }
+    get decorationIconNodes() {
+        const icon = this.decoration?.icon;
+        if (icon == null)
+            return null;
+        return cellDecorationIconNodes[icon] ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: KpiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: KpiCard, isStandalone: true, selector: "st-kpi-card", inputs: { value: "value", label: "label", delta: "delta", deltaFormat: "deltaFormat", trend: "trend", format: "format", unit: "unit", currency: "currency", locale: "locale", sparkline: "sparkline", size: "size", tone: "tone", decoration: "decoration", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <article
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+      role="group"
+      [attr.aria-label]="ariaLabel"
+    >
+      <p class="st-kpiCard__label">
+        @if (tone) { <span class="st-kpiCard__swatch" aria-hidden="true"></span> }
+        <span class="st-kpiCard__labelText">{{ label }}</span>
+      </p>
+
+      <p class="st-kpiCard__value">
+        @if (decoration && decorationIconNodes) {
+          <svg
+            class="st-cell__icon"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            focusable="false"
+          >
+            @for (node of decorationIconNodes; track $index) {
+              @switch (node[0]) {
+                @case ('path') { <path [attr.d]="$any(node[1]).d" /> }
+                @case ('circle') {
+                  <circle [attr.cx]="$any(node[1]).cx" [attr.cy]="$any(node[1]).cy" [attr.r]="$any(node[1]).r" />
+                }
+                @case ('line') {
+                  <line [attr.x1]="$any(node[1]).x1" [attr.y1]="$any(node[1]).y1" [attr.x2]="$any(node[1]).x2" [attr.y2]="$any(node[1]).y2" />
+                }
+              }
+            }
+          </svg>
+        }
+        <span class="st-kpiCard__number">{{ formattedValue }}</span>
+        @if (unit) {
+          <span class="st-kpiCard__unit">{{ unit }}</span>
+        }
+      </p>
+
+      @if (formattedDelta || sparkline) {
+        <div class="st-kpiCard__footer">
+          @if (formattedDelta) {
+            <span [class]="deltaClass" aria-hidden="true">
+              <svg
+                class="st-kpiCard__arrow"
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path
+                  [attr.d]="arrow"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.75"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <span class="st-kpiCard__deltaValue">{{ formattedDelta }}</span>
+            </span>
+          }
+
+          @if (sparkline && sparkline.length > 0) {
+            <span [class]="sparklineSpanClass" role="img">
+              <svg
+                [attr.width]="sparklineWidth"
+                [attr.height]="sparklineHeight"
+                [attr.viewBox]="sparklineViewBox"
+                preserveAspectRatio="none"
+                focusable="false"
+              >
+                @if (sparklineArea) {
+                  <path [attr.d]="sparklineArea" class="st-sparkline__area" />
+                }
+                @if (sparklineLine) {
+                  <path
+                    [attr.d]="sparklineLine"
+                    class="st-sparkline__line"
+                    fill="none"
+                    [attr.stroke-width]="sparklineStrokeWidth"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                }
+              </svg>
+            </span>
+          }
+        </div>
+      }
+    </article>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: KpiCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-kpi-card",
+                    standalone: true,
+                    template: `
+    <article
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+      role="group"
+      [attr.aria-label]="ariaLabel"
+    >
+      <p class="st-kpiCard__label">
+        @if (tone) { <span class="st-kpiCard__swatch" aria-hidden="true"></span> }
+        <span class="st-kpiCard__labelText">{{ label }}</span>
+      </p>
+
+      <p class="st-kpiCard__value">
+        @if (decoration && decorationIconNodes) {
+          <svg
+            class="st-cell__icon"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            focusable="false"
+          >
+            @for (node of decorationIconNodes; track $index) {
+              @switch (node[0]) {
+                @case ('path') { <path [attr.d]="$any(node[1]).d" /> }
+                @case ('circle') {
+                  <circle [attr.cx]="$any(node[1]).cx" [attr.cy]="$any(node[1]).cy" [attr.r]="$any(node[1]).r" />
+                }
+                @case ('line') {
+                  <line [attr.x1]="$any(node[1]).x1" [attr.y1]="$any(node[1]).y1" [attr.x2]="$any(node[1]).x2" [attr.y2]="$any(node[1]).y2" />
+                }
+              }
+            }
+          </svg>
+        }
+        <span class="st-kpiCard__number">{{ formattedValue }}</span>
+        @if (unit) {
+          <span class="st-kpiCard__unit">{{ unit }}</span>
+        }
+      </p>
+
+      @if (formattedDelta || sparkline) {
+        <div class="st-kpiCard__footer">
+          @if (formattedDelta) {
+            <span [class]="deltaClass" aria-hidden="true">
+              <svg
+                class="st-kpiCard__arrow"
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path
+                  [attr.d]="arrow"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.75"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <span class="st-kpiCard__deltaValue">{{ formattedDelta }}</span>
+            </span>
+          }
+
+          @if (sparkline && sparkline.length > 0) {
+            <span [class]="sparklineSpanClass" role="img">
+              <svg
+                [attr.width]="sparklineWidth"
+                [attr.height]="sparklineHeight"
+                [attr.viewBox]="sparklineViewBox"
+                preserveAspectRatio="none"
+                focusable="false"
+              >
+                @if (sparklineArea) {
+                  <path [attr.d]="sparklineArea" class="st-sparkline__area" />
+                }
+                @if (sparklineLine) {
+                  <path
+                    [attr.d]="sparklineLine"
+                    class="st-sparkline__line"
+                    fill="none"
+                    [attr.stroke-width]="sparklineStrokeWidth"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                }
+              </svg>
+            </span>
+          }
+        </div>
+      }
+    </article>
+  `,
+                }]
+        }], propDecorators: { value: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], delta: [{
+                type: NgInput
+            }], deltaFormat: [{
+                type: NgInput
+            }], trend: [{
+                type: NgInput
+            }], format: [{
+                type: NgInput
+            }], unit: [{
+                type: NgInput
+            }], currency: [{
+                type: NgInput
+            }], locale: [{
+                type: NgInput
+            }], sparkline: [{
+                type: NgInput
+            }], size: [{
+                type: NgInput
+            }], tone: [{
+                type: NgInput
+            }], decoration: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=KpiCard.js.map

package/dist/KpiCard.js.map

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

package/dist/LanguageSelector.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export type LanguageOption = {
+    value: string;
+    label: unknown;
+};
+export type LanguageSelectorProps = {
+    options: LanguageOption[];
+    value?: string;
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+};
+export declare class LanguageSelector {
+    static readonly stComponentName = "LanguageSelector";
+    readonly componentName = "LanguageSelector";
+    open: boolean;
+    options: LanguageOption[];
+    value: string;
+    label: string;
+    disabled: boolean;
+    classInput?: string;
+    readonly valueChange: EventEmitter<string>;
+    readonly change: EventEmitter<string>;
+    get current(): LanguageOption | undefined;
+    get hostClass(): string;
+    choose(next: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LanguageSelector, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LanguageSelector, "st-language-selector", never, { "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, never, never, true, never>;
+}
+//# sourceMappingURL=LanguageSelector.d.ts.map

package/dist/LanguageSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSelector.d.ts","sourceRoot":"","sources":["../src/LanguageSelector.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;CAChB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBA4Ca,gBAAgB;IAC3B,MAAM,CAAC,QAAQ,CAAC,eAAe,sBAAsB;IACrD,QAAQ,CAAC,aAAa,sBAAsB;IAE5C,IAAI,UAAS;IAEF,OAAO,EAAG,cAAc,EAAE,CAAC;IAC3B,KAAK,SAAM;IACX,KAAK,SAAuB;IAC5B,QAAQ,UAAS;IACV,UAAU,CAAC,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,WAAW,uBAA8B;IAC1C,QAAQ,CAAC,MAAM,uBAA8B;IAE/D,IAAI,OAAO,IAAI,cAAc,GAAG,SAAS,CAExC;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;yCAvBf,gBAAgB;2CAAhB,gBAAgB;CA6B5B"}

package/dist/LanguageSelector.js

@@ -0,0 +1,132 @@
+import { Component, EventEmitter, Input as NgInput, Output } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+export class LanguageSelector {
+    static stComponentName = "LanguageSelector";
+    componentName = "LanguageSelector";
+    open = false;
+    options;
+    value = "";
+    label = "Choisir la langue";
+    disabled = false;
+    classInput;
+    valueChange = new EventEmitter();
+    change = new EventEmitter();
+    get current() {
+        return (this.options ?? []).find((o) => o.value === this.value) ?? (this.options ?? [])[0];
+    }
+    get hostClass() {
+        return classNames("st-languageSelector", this.classInput);
+    }
+    choose(next) {
+        this.value = next;
+        this.open = false;
+        this.valueChange.emit(next);
+        this.change.emit(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LanguageSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LanguageSelector, isStandalone: true, selector: "st-language-selector", inputs: { options: "options", value: "value", label: "label", disabled: "disabled", classInput: ["class", "classInput"] }, outputs: { valueChange: "valueChange", change: "change" }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <button
+        type="button"
+        class="st-languageSelector__trigger"
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="open"
+        [attr.aria-label]="label"
+        [disabled]="disabled ?? false"
+        (click)="open = !open"
+      >
+        <span class="st-languageSelector__current">{{ current?.label ?? value }}</span>
+        <span
+          class="st-languageSelector__caret"
+          [class.st-languageSelector__caret--open]="open"
+          aria-hidden="true"
+        ></span>
+      </button>
+
+      @if (open) {
+        <ul class="st-languageSelector__menu" role="listbox" [attr.aria-label]="label">
+          @for (option of options; track option.value) {
+            <li>
+              <button
+                type="button"
+                class="st-languageSelector__option"
+                [class.st-languageSelector__option--active]="option.value === value"
+                role="option"
+                [attr.aria-selected]="option.value === value"
+                (click)="choose(option.value)"
+              >
+                <span class="st-languageSelector__check" aria-hidden="true">{{ option.value === value ? "✓" : "" }}</span>
+                {{ option.label }}
+              </button>
+            </li>
+          }
+        </ul>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LanguageSelector, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-language-selector",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <button
+        type="button"
+        class="st-languageSelector__trigger"
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="open"
+        [attr.aria-label]="label"
+        [disabled]="disabled ?? false"
+        (click)="open = !open"
+      >
+        <span class="st-languageSelector__current">{{ current?.label ?? value }}</span>
+        <span
+          class="st-languageSelector__caret"
+          [class.st-languageSelector__caret--open]="open"
+          aria-hidden="true"
+        ></span>
+      </button>
+
+      @if (open) {
+        <ul class="st-languageSelector__menu" role="listbox" [attr.aria-label]="label">
+          @for (option of options; track option.value) {
+            <li>
+              <button
+                type="button"
+                class="st-languageSelector__option"
+                [class.st-languageSelector__option--active]="option.value === value"
+                role="option"
+                [attr.aria-selected]="option.value === value"
+                (click)="choose(option.value)"
+              >
+                <span class="st-languageSelector__check" aria-hidden="true">{{ option.value === value ? "✓" : "" }}</span>
+                {{ option.label }}
+              </button>
+            </li>
+          }
+        </ul>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { options: [{
+                type: NgInput
+            }], value: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], disabled: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }], valueChange: [{
+                type: Output
+            }], change: [{
+                type: Output,
+                args: ["change"]
+            }] } });
+//# sourceMappingURL=LanguageSelector.js.map

package/dist/LanguageSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSelector.js","sourceRoot":"","sources":["../src/LanguageSelector.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;;AA2D7C,MAAM,OAAO,gBAAgB;IAC3B,MAAM,CAAU,eAAe,GAAG,kBAAkB,CAAC;IAC5C,aAAa,GAAG,kBAAkB,CAAC;IAE5C,IAAI,GAAG,KAAK,CAAC;IAEF,OAAO,CAAoB;IAC3B,KAAK,GAAG,EAAE,CAAC;IACX,KAAK,GAAG,mBAAmB,CAAC;IAC5B,QAAQ,GAAG,KAAK,CAAC;IACV,UAAU,CAAU;IAEnB,WAAW,GAAG,IAAI,YAAY,EAAU,CAAC;IACjC,MAAM,GAAG,IAAI,YAAY,EAAU,CAAC;IAE/D,IAAI,OAAO;QACT,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7F,CAAC;IAED,IAAI,SAAS;QACX,OAAO,UAAU,CAAC,qBAAqB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM,CAAC,IAAY;QACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC;wGA5BU,gBAAgB;4FAAhB,gBAAgB,sQAzCjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCT;;4FAEU,gBAAgB;kBA5C5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;oBAChC,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCT;iBACF;;sBAOE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO;;sBAEf,MAAM;;sBACN,MAAM;uBAAC,QAAQ"}

package/dist/LanguageToggle.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export type LanguageToggleLocale = "fr" | "en";
+export type LanguageToggleProps = {
+    locale?: LanguageToggleLocale;
+    frLabel?: string;
+    enLabel?: string;
+    /** Libellé du sélecteur (associé via <label for> + aria-label). */
+    label?: string;
+    /** Id du <select> ; auto-généré et stable si non fourni. */
+    selectId?: string;
+    variant?: "select" | "accordion";
+    accordionLabel?: string;
+    class?: string;
+};
+export declare class LanguageToggle {
+    static readonly stComponentName = "LanguageToggle";
+    readonly componentName = "LanguageToggle";
+    open: boolean;
+    readonly autoSelectId: string;
+    locale: LanguageToggleLocale;
+    frLabel: string;
+    enLabel: string;
+    label: string;
+    selectId?: string;
+    variant: "select" | "accordion";
+    accordionLabel: string;
+    classInput?: string;
+    readonly localeChange: EventEmitter<LanguageToggleLocale>;
+    get resolvedSelectId(): string;
+    get hostClass(): string;
+    get selectClass(): string;
+    emit(next: LanguageToggleLocale): void;
+    onSelectChange(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LanguageToggle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LanguageToggle, "st-language-toggle", never, { "locale": { "alias": "locale"; "required": false; }; "frLabel": { "alias": "frLabel"; "required": false; }; "enLabel": { "alias": "enLabel"; "required": false; }; "label": { "alias": "label"; "required": false; }; "selectId": { "alias": "selectId"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "accordionLabel": { "alias": "accordionLabel"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, { "localeChange": "localeChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=LanguageToggle.d.ts.map

package/dist/LanguageToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageToggle.d.ts","sourceRoot":"","sources":["../src/LanguageToggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA4B,MAAM,eAAe,CAAC;;AAIlF,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAI/C,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBA0Da,cAAc;IACzB,MAAM,CAAC,QAAQ,CAAC,eAAe,oBAAoB;IACnD,QAAQ,CAAC,aAAa,oBAAoB;IAE1C,IAAI,UAAS;IACb,QAAQ,CAAC,YAAY,SAAqC;IAE/C,MAAM,EAAE,oBAAoB,CAAQ;IACpC,OAAO,SAAQ;IACf,OAAO,SAAQ;IACf,KAAK,SAAY;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,QAAQ,GAAG,WAAW,CAAY;IAC3C,cAAc,SAAY;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,YAAY,qCAA4C;IAE3E,IAAI,gBAAgB,IAAI,MAAM,CAE7B;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,CAAC,IAAI,EAAE,oBAAoB,GAAG,IAAI;IAItC,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;yCAlCvB,cAAc;2CAAd,cAAc;CAsC1B"}