@sentropic/design-system-angular 0.36.54

package/dist/MultiSelect.js

@@ -0,0 +1,359 @@
+import { Component, EventEmitter, Input as NgInput, Output } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+export class MultiSelect {
+    static stComponentName = "MultiSelect";
+    componentName = "MultiSelect";
+    isOpen = false;
+    query = "";
+    label;
+    helperText;
+    errorText;
+    invalid = false;
+    options = [];
+    selected;
+    value;
+    values;
+    size = "md";
+    locale = "fr-FR";
+    placeholder;
+    searchPlaceholder;
+    noResultsLabel;
+    toggleLabel;
+    removeLabel;
+    listLabel;
+    disabled = false;
+    classInput;
+    selectedChange = new EventEmitter();
+    change = new EventEmitter();
+    get isFr() {
+        return this.locale.toLowerCase().startsWith("fr");
+    }
+    get resolvedPlaceholder() {
+        return this.placeholder ?? (this.isFr ? "Sélectionner des éléments" : "Select items");
+    }
+    get resolvedSearchPlaceholder() {
+        return this.searchPlaceholder ?? (this.isFr ? "Filtrer" : "Filter");
+    }
+    get resolvedNoResultsLabel() {
+        return this.noResultsLabel ?? (this.isFr ? "Aucun résultat" : "No results");
+    }
+    get resolvedToggleLabel() {
+        return this.toggleLabel ?? (this.isFr ? "Afficher les options" : "Toggle options");
+    }
+    get resolvedRemoveLabel() {
+        return this.removeLabel ?? (this.isFr ? "Supprimer" : "Remove");
+    }
+    get isInvalid() {
+        return this.invalid || Boolean(this.errorText);
+    }
+    get hostClass() {
+        return classNames("st-field", this.classInput);
+    }
+    get groupClass() {
+        return classNames("st-multiSelect", `st-multiSelect--${this.size}`);
+    }
+    get currentValue() {
+        return this.selected ?? this.value ?? this.values ?? [];
+    }
+    get filtered() {
+        const q = this.query.trim().toLowerCase();
+        if (!q)
+            return this.options ?? [];
+        return (this.options ?? []).filter((opt) => String(opt.label).toLowerCase().includes(q));
+    }
+    get selectedOptions() {
+        return this.currentValue
+            .map((value) => (this.options ?? []).find((opt) => opt.value === value))
+            .filter((opt) => Boolean(opt));
+    }
+    isSelected(v) {
+        return this.currentValue.includes(v);
+    }
+    toggleOpen() {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+    }
+    toggleOption(option) {
+        if (option.disabled)
+            return;
+        const next = this.isSelected(option.value)
+            ? this.currentValue.filter((v) => v !== option.value)
+            : [...this.currentValue, option.value];
+        this.selectedChange.emit(next);
+        this.change.emit(next);
+    }
+    removeOption(value) {
+        const next = this.currentValue.filter((v) => v !== value);
+        this.selectedChange.emit(next);
+        this.change.emit(next);
+    }
+    onContainerKeyDown(event) {
+        if (event.key === "Escape" && this.isOpen) {
+            event.preventDefault();
+            this.isOpen = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiSelect, isStandalone: true, selector: "st-multi-select", inputs: { label: "label", helperText: "helperText", errorText: "errorText", invalid: "invalid", options: "options", selected: "selected", value: "value", values: "values", size: "size", locale: "locale", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", noResultsLabel: "noResultsLabel", toggleLabel: "toggleLabel", removeLabel: "removeLabel", listLabel: "listLabel", disabled: "disabled", classInput: ["class", "classInput"] }, outputs: { selectedChange: "selectedChange", change: "change" }, ngImport: i0, template: `
+    <div
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+      role="group"
+      [attr.aria-label]="label"
+      (keydown)="onContainerKeyDown($event)"
+    >
+      @if (label) {
+        <span class="st-field__label">{{ label }}</span>
+      }
+      @if (selectedOptions.length > 0) {
+        <span class="st-multiSelect__tags">
+          @for (option of selectedOptions; track option.value) {
+            <span class="st-multiSelect__tag">
+              <span class="st-multiSelect__tagLabel">{{ option.label }}</span>
+              <button
+                type="button"
+                class="st-multiSelect__tagRemove"
+                [attr.aria-label]="resolvedRemoveLabel + ' ' + option.label"
+                [disabled]="disabled ?? false"
+                (click)="removeOption(option.value)"
+              ><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button>
+            </span>
+          }
+        </span>
+      }
+      <span class="{{ groupClass }}" [attr.data-invalid]="isInvalid ? 'true' : null">
+        <button
+          type="button"
+          class="st-multiSelect__trigger"
+          aria-haspopup="listbox"
+          [attr.aria-expanded]="isOpen ? 'true' : 'false'"
+          [disabled]="disabled ?? false"
+          (click)="toggleOpen()"
+        >
+          @if (selectedOptions.length === 0) {
+            <span class="st-multiSelect__placeholder">{{ resolvedPlaceholder }}</span>
+          } @else {
+            <span class="st-multiSelect__count">{{ selectedOptions.length }} {{ isFr ? "sélectionné(s)" : "selected" }}</span>
+          }
+          <span class="st-multiSelect__caret" aria-hidden="true">
+            <svg
+              class="st-multiSelect__caretIcon"
+              [class.st-multiSelect__caretIcon--open]="isOpen"
+              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>
+          </span>
+          <span class="st-visually-hidden">{{ resolvedToggleLabel }}</span>
+        </button>
+      </span>
+      @if (isOpen) {
+        <div class="st-multiSelect__panel">
+          <input
+            type="search"
+            class="st-multiSelect__search"
+            [placeholder]="resolvedSearchPlaceholder"
+            [value]="query"
+            [attr.aria-label]="resolvedSearchPlaceholder"
+            (input)="query = $any($event.target).value"
+          />
+          <div
+            class="st-multiSelect__list"
+            role="listbox"
+            [attr.aria-label]="listLabel ?? label ?? 'Options'"
+            aria-multiselectable="true"
+          >
+            @if (filtered.length === 0) {
+              <div class="st-multiSelect__empty">{{ resolvedNoResultsLabel }}</div>
+            } @else {
+              @for (option of filtered; track option.value) {
+                <button
+                  class="st-multiSelect__option"
+                  type="button"
+                  role="option"
+                  [attr.aria-selected]="isSelected(option.value) ? 'true' : 'false'"
+                  [attr.aria-disabled]="option.disabled ? 'true' : null"
+                  [disabled]="option.disabled ?? false"
+                  (click)="toggleOption(option)"
+                >
+                  <span class="st-multiSelect__check" aria-hidden="true">
+                    @if (isSelected(option.value)) { ✓ }
+                  </span>
+                  <span>{{ option.label }}</span>
+                </button>
+              }
+            }
+          </div>
+        </div>
+      }
+      @if (errorText) {
+        <span class="st-field__error">{{ errorText }}</span>
+      } @else if (helperText) {
+        <span class="st-field__help">{{ helperText }}</span>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiSelect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-multi-select",
+                    standalone: true,
+                    template: `
+    <div
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+      role="group"
+      [attr.aria-label]="label"
+      (keydown)="onContainerKeyDown($event)"
+    >
+      @if (label) {
+        <span class="st-field__label">{{ label }}</span>
+      }
+      @if (selectedOptions.length > 0) {
+        <span class="st-multiSelect__tags">
+          @for (option of selectedOptions; track option.value) {
+            <span class="st-multiSelect__tag">
+              <span class="st-multiSelect__tagLabel">{{ option.label }}</span>
+              <button
+                type="button"
+                class="st-multiSelect__tagRemove"
+                [attr.aria-label]="resolvedRemoveLabel + ' ' + option.label"
+                [disabled]="disabled ?? false"
+                (click)="removeOption(option.value)"
+              ><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button>
+            </span>
+          }
+        </span>
+      }
+      <span class="{{ groupClass }}" [attr.data-invalid]="isInvalid ? 'true' : null">
+        <button
+          type="button"
+          class="st-multiSelect__trigger"
+          aria-haspopup="listbox"
+          [attr.aria-expanded]="isOpen ? 'true' : 'false'"
+          [disabled]="disabled ?? false"
+          (click)="toggleOpen()"
+        >
+          @if (selectedOptions.length === 0) {
+            <span class="st-multiSelect__placeholder">{{ resolvedPlaceholder }}</span>
+          } @else {
+            <span class="st-multiSelect__count">{{ selectedOptions.length }} {{ isFr ? "sélectionné(s)" : "selected" }}</span>
+          }
+          <span class="st-multiSelect__caret" aria-hidden="true">
+            <svg
+              class="st-multiSelect__caretIcon"
+              [class.st-multiSelect__caretIcon--open]="isOpen"
+              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>
+          </span>
+          <span class="st-visually-hidden">{{ resolvedToggleLabel }}</span>
+        </button>
+      </span>
+      @if (isOpen) {
+        <div class="st-multiSelect__panel">
+          <input
+            type="search"
+            class="st-multiSelect__search"
+            [placeholder]="resolvedSearchPlaceholder"
+            [value]="query"
+            [attr.aria-label]="resolvedSearchPlaceholder"
+            (input)="query = $any($event.target).value"
+          />
+          <div
+            class="st-multiSelect__list"
+            role="listbox"
+            [attr.aria-label]="listLabel ?? label ?? 'Options'"
+            aria-multiselectable="true"
+          >
+            @if (filtered.length === 0) {
+              <div class="st-multiSelect__empty">{{ resolvedNoResultsLabel }}</div>
+            } @else {
+              @for (option of filtered; track option.value) {
+                <button
+                  class="st-multiSelect__option"
+                  type="button"
+                  role="option"
+                  [attr.aria-selected]="isSelected(option.value) ? 'true' : 'false'"
+                  [attr.aria-disabled]="option.disabled ? 'true' : null"
+                  [disabled]="option.disabled ?? false"
+                  (click)="toggleOption(option)"
+                >
+                  <span class="st-multiSelect__check" aria-hidden="true">
+                    @if (isSelected(option.value)) { ✓ }
+                  </span>
+                  <span>{{ option.label }}</span>
+                </button>
+              }
+            }
+          </div>
+        </div>
+      }
+      @if (errorText) {
+        <span class="st-field__error">{{ errorText }}</span>
+      } @else if (helperText) {
+        <span class="st-field__help">{{ helperText }}</span>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { label: [{
+                type: NgInput
+            }], helperText: [{
+                type: NgInput
+            }], errorText: [{
+                type: NgInput
+            }], invalid: [{
+                type: NgInput
+            }], options: [{
+                type: NgInput
+            }], selected: [{
+                type: NgInput
+            }], value: [{
+                type: NgInput
+            }], values: [{
+                type: NgInput
+            }], size: [{
+                type: NgInput
+            }], locale: [{
+                type: NgInput
+            }], placeholder: [{
+                type: NgInput
+            }], searchPlaceholder: [{
+                type: NgInput
+            }], noResultsLabel: [{
+                type: NgInput
+            }], toggleLabel: [{
+                type: NgInput
+            }], removeLabel: [{
+                type: NgInput
+            }], listLabel: [{
+                type: NgInput
+            }], disabled: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }], selectedChange: [{
+                type: Output
+            }], change: [{
+                type: Output,
+                args: ["change"]
+            }] } });
+//# sourceMappingURL=MultiSelect.js.map

package/dist/MultiSelect.js.map

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

package/dist/NavActionStack.d.ts

@@ -0,0 +1,52 @@
+import * as i0 from "@angular/core";
+/** Hiérarchie ENCODÉE DANS LE TYPE : une seule action `primary` est légitime
+ * dans une pile. `secondary` = action secondaire ; `ghost` = action discrète.
+ * La couleur sémantique (danger) n'est PAS un `kind` — elle vit dans
+ * `dangerZone`, rendue à part. */
+export type NavActionKind = "primary" | "secondary" | "ghost";
+export interface NavAction {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+    kind?: NavActionKind;
+    disabled?: boolean;
+}
+/** Action destructrice, isolée sous un séparateur + un overline « Zone
+ * sensible ». Toujours en ton danger, jamais alignée avec les actions
+ * normales. Pas de `kind` : c'est une zone, pas une catégorie de couleur. */
+export interface NavActionDangerZone {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+}
+export type NavActionStackOrientation = "vertical" | "horizontal";
+export type NavActionStackProps = {
+    actions?: NavAction[];
+    dangerZone?: NavActionDangerZone;
+    /** Libellé de l'overline de la zone sensible. Défaut « Zone sensible ». */
+    dangerLabel?: string;
+    orientation?: NavActionStackOrientation;
+    /** Étiquette a11y du groupe d'actions. */
+    label?: string;
+    class?: string;
+};
+export declare class NavActionStack {
+    static readonly stComponentName = "NavActionStack";
+    readonly componentName = "NavActionStack";
+    actions: NavAction[];
+    dangerZone?: NavActionDangerZone;
+    dangerLabel: string;
+    orientation: NavActionStackOrientation;
+    label: string;
+    classInput?: string;
+    get hostClass(): string;
+    /** Règle « un seul primary » appliquée au runtime, en miroir du type :
+     * on garde le premier `primary`, on dégrade les suivants en `secondary`. */
+    get normalizedActions(): Array<NavAction & {
+        kind: NavActionKind;
+    }>;
+    variantFor(kind: NavActionKind): "primary" | "secondary" | "ghost";
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavActionStack, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavActionStack, "st-nav-action-stack", never, { "actions": { "alias": "actions"; "required": false; }; "dangerZone": { "alias": "dangerZone"; "required": false; }; "dangerLabel": { "alias": "dangerLabel"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "label": { "alias": "label"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=NavActionStack.d.ts.map

package/dist/NavActionStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavActionStack.d.ts","sourceRoot":"","sources":["../src/NavActionStack.ts"],"names":[],"mappings":";AAMA;;;kCAGkC;AAClC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAE9D,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;6EAE6E;AAC7E,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,yBAAyB,GAAG,UAAU,GAAG,YAAY,CAAC;AAElE,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAwCa,cAAc;IACzB,MAAM,CAAC,QAAQ,CAAC,eAAe,oBAAoB;IACnD,QAAQ,CAAC,aAAa,oBAAoB;IAC/B,OAAO,EAAE,SAAS,EAAE,CAAM;IAC1B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,WAAW,SAAmB;IAC9B,WAAW,EAAE,yBAAyB,CAAc;IACpD,KAAK,SAAa;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,SAAS,IAAI,MAAM,CAMtB;IAED;gFAC4E;IAC5E,IAAI,iBAAiB,IAAI,KAAK,CAAC,SAAS,GAAG;QAAE,IAAI,EAAE,aAAa,CAAA;KAAE,CAAC,CAYlE;IAED,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO;yCAlCvD,cAAc;2CAAd,cAAc;CAqC1B"}

package/dist/NavActionStack.js

@@ -0,0 +1,128 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { Divider } from "./Divider.js";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+export class NavActionStack {
+    static stComponentName = "NavActionStack";
+    componentName = "NavActionStack";
+    actions = [];
+    dangerZone;
+    dangerLabel = "Zone sensible";
+    orientation = "vertical";
+    label = "Actions";
+    classInput;
+    get hostClass() {
+        return classNames("st-navActionStack", `st-navActionStack--${this.orientation ?? "vertical"}`, this.classInput);
+    }
+    /** Règle « un seul primary » appliquée au runtime, en miroir du type :
+     * on garde le premier `primary`, on dégrade les suivants en `secondary`. */
+    get normalizedActions() {
+        let primarySeen = false;
+        return (this.actions ?? []).map((action) => {
+            const kind = action.kind ?? "secondary";
+            if (kind === "primary") {
+                if (primarySeen) {
+                    return { ...action, kind: "secondary" };
+                }
+                primarySeen = true;
+            }
+            return { ...action, kind };
+        });
+    }
+    variantFor(kind) {
+        return kind;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NavActionStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NavActionStack, isStandalone: true, selector: "st-nav-action-stack", inputs: { actions: "actions", dangerZone: "dangerZone", dangerLabel: "dangerLabel", orientation: "orientation", label: "label", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass" role="group" [attr.aria-label]="label">
+      <div class="st-navActionStack__actions">
+        @for (action of normalizedActions; track action.label) {
+          @if (action.href && !action.disabled) {
+            <a
+              [class]="'st-button st-button--' + variantFor(action.kind) + ' st-button--md st-navActionStack__item'"
+              [href]="action.href"
+              (click)="action.onClick && action.onClick()">{{ action.label }}</a>
+          } @else {
+            <button type="button"
+              [class]="'st-button st-button--' + variantFor(action.kind) + ' st-button--md st-navActionStack__item'"
+              [disabled]="action.disabled || null"
+              (click)="action.onClick && action.onClick()">{{ action.label }}</button>
+          }
+        }
+      </div>
+      @if (dangerZone) {
+        <div class="st-navActionStack__danger" role="group" [attr.aria-label]="dangerLabel">
+          <st-divider></st-divider>
+          <span class="st-navActionStack__dangerLabel">{{ dangerLabel }}</span>
+          @if (dangerZone.href) {
+            <a
+              class="st-button st-button--danger st-button--md st-navActionStack__item st-navActionStack__dangerAction"
+              [href]="dangerZone.href"
+              (click)="dangerZone.onClick && dangerZone.onClick()">{{ dangerZone.label }}</a>
+          } @else {
+            <button type="button"
+              class="st-button st-button--danger st-button--md st-navActionStack__item st-navActionStack__dangerAction"
+              (click)="dangerZone.onClick && dangerZone.onClick()">{{ dangerZone.label }}</button>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: Divider, selector: "st-divider", inputs: ["orientation", "spacing", "label", "variant", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NavActionStack, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-nav-action-stack",
+                    standalone: true,
+                    imports: [Divider],
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass" role="group" [attr.aria-label]="label">
+      <div class="st-navActionStack__actions">
+        @for (action of normalizedActions; track action.label) {
+          @if (action.href && !action.disabled) {
+            <a
+              [class]="'st-button st-button--' + variantFor(action.kind) + ' st-button--md st-navActionStack__item'"
+              [href]="action.href"
+              (click)="action.onClick && action.onClick()">{{ action.label }}</a>
+          } @else {
+            <button type="button"
+              [class]="'st-button st-button--' + variantFor(action.kind) + ' st-button--md st-navActionStack__item'"
+              [disabled]="action.disabled || null"
+              (click)="action.onClick && action.onClick()">{{ action.label }}</button>
+          }
+        }
+      </div>
+      @if (dangerZone) {
+        <div class="st-navActionStack__danger" role="group" [attr.aria-label]="dangerLabel">
+          <st-divider></st-divider>
+          <span class="st-navActionStack__dangerLabel">{{ dangerLabel }}</span>
+          @if (dangerZone.href) {
+            <a
+              class="st-button st-button--danger st-button--md st-navActionStack__item st-navActionStack__dangerAction"
+              [href]="dangerZone.href"
+              (click)="dangerZone.onClick && dangerZone.onClick()">{{ dangerZone.label }}</a>
+          } @else {
+            <button type="button"
+              class="st-button st-button--danger st-button--md st-navActionStack__item st-navActionStack__dangerAction"
+              (click)="dangerZone.onClick && dangerZone.onClick()">{{ dangerZone.label }}</button>
+          }
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { actions: [{
+                type: NgInput
+            }], dangerZone: [{
+                type: NgInput
+            }], dangerLabel: [{
+                type: NgInput
+            }], orientation: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=NavActionStack.js.map

package/dist/NavActionStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavActionStack.js","sourceRoot":"","sources":["../src/NavActionStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;AA8E7C,MAAM,OAAO,cAAc;IACzB,MAAM,CAAU,eAAe,GAAG,gBAAgB,CAAC;IAC1C,aAAa,GAAG,gBAAgB,CAAC;IAC/B,OAAO,GAAgB,EAAE,CAAC;IAC1B,UAAU,CAAuB;IACjC,WAAW,GAAG,eAAe,CAAC;IAC9B,WAAW,GAA8B,UAAU,CAAC;IACpD,KAAK,GAAG,SAAS,CAAC;IACX,UAAU,CAAU;IAEtC,IAAI,SAAS;QACX,OAAO,UAAU,CACf,mBAAmB,EACnB,sBAAsB,IAAI,CAAC,WAAW,IAAI,UAAU,EAAE,EACtD,IAAI,CAAC,UAAU,CAChB,CAAC;IACJ,CAAC;IAED;gFAC4E;IAC5E,IAAI,iBAAiB;QACnB,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACzC,MAAM,IAAI,GAAkB,MAAM,CAAC,IAAI,IAAI,WAAW,CAAC;YACvD,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBACvB,IAAI,WAAW,EAAE,CAAC;oBAChB,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,WAA4B,EAAE,CAAC;gBAC3D,CAAC;gBACD,WAAW,GAAG,IAAI,CAAC;YACrB,CAAC;YACD,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACL,CAAC;IAED,UAAU,CAAC,IAAmB;QAC5B,OAAO,IAAI,CAAC;IACd,CAAC;wGApCU,cAAc;4FAAd,cAAc,sPApCf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCT,4DAnCS,OAAO;;4FAqCN,cAAc;kBAxC1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,OAAO,CAAC;oBAClB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCT;iBACF;;sBAIE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO"}

package/dist/NavDrawer.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from "@angular/core";
+import type { NavShellSide } from "./NavShell.js";
+import * as i0 from "@angular/core";
+export type NavDrawerProps = {
+    title?: string;
+    label?: string;
+    open?: boolean;
+    side?: NavShellSide;
+    class?: string;
+    navItems?: Array<{
+        label: string;
+        href?: string;
+        active?: boolean;
+    }>;
+};
+export declare class NavDrawer {
+    static readonly stComponentName = "NavDrawer";
+    readonly componentName = "NavDrawer";
+    title?: string;
+    label?: string;
+    open: boolean;
+    side: NavShellSide;
+    navItems?: Array<{
+        label: string;
+        href?: string;
+        active?: boolean;
+    }>;
+    classInput?: string;
+    readonly closeEvent: EventEmitter<void>;
+    get hostClass(): string;
+    onBackdropClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavDrawer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavDrawer, "st-nav-drawer", never, { "title": { "alias": "title"; "required": false; }; "label": { "alias": "label"; "required": false; }; "open": { "alias": "open"; "required": false; }; "side": { "alias": "side"; "required": false; }; "navItems": { "alias": "navItems"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, { "closeEvent": "closeEvent"; }, never, ["*"], true, never>;
+}
+//# sourceMappingURL=NavDrawer.d.ts.map

package/dist/NavDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavDrawer.d.ts","sourceRoot":"","sources":["../src/NavDrawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA4B,MAAM,eAAe,CAAC;AAClF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;;AAIlD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CACtE,CAAC;AAEF,qBAoDa,SAAS;IACpB,MAAM,CAAC,QAAQ,CAAC,eAAe,eAAe;IAC9C,QAAQ,CAAC,aAAa,eAAe;IAE1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,UAAS;IACb,IAAI,EAAE,YAAY,CAAU;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,UAAU,qBAA4B;IAEzD,IAAI,SAAS,IAAI,MAAM,CAatB;IAED,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;yCA5B7B,SAAS;2CAAT,SAAS;CAiCrB"}