yukit-web 0.5.0 → 0.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yukit-web",
   "description": "Angular UI component library for Yurest web applications.",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": {
     "name": "Yurest Solutions",
     "email": "develop@yurest.com"
@@ -15,6 +15,10 @@
       "types": "./types/yukit-web.d.ts",
       "default": "./fesm2022/yukit-web.mjs"
     },
+    "./chart": {
+      "types": "./types/yukit-web-chart.d.ts",
+      "default": "./fesm2022/yukit-web-chart.mjs"
+    },
     "./helm/accordion": {
       "types": "./types/yukit-web-helm-accordion.d.ts",
       "default": "./fesm2022/yukit-web-helm-accordion.mjs"
@@ -268,12 +272,22 @@
     "@angular/router": "^21.0.0",
     "@ng-icons/core": "^32.2.0",
     "@ng-icons/lucide": "^32.2.0",
-    "@spartan-ng/brain": "^1.3.4",
+    "@spartan-ng/brain": "^1.7.0",
     "@tanstack/angular-table": "^9.0.0",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
     "embla-carousel-angular": "^21.0.0",
     "ngx-scrollbar": "^19.1.5",
     "rxjs": "^7.8.0"
   },
+  "peerDependenciesMeta": {
+    "d3-scale": {
+      "optional": true
+    },
+    "d3-shape": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@tanstack/table-core": "^9.0.0",
     "class-variance-authority": "^0.7.1",

package/src/lib/theme/spartan-overwrites/accordion.css

@@ -1,4 +1,5 @@
 [data-slot='accordion-trigger'][aria-expanded='true'] ng-icon.group-aria-expanded\/accordion-trigger\:hidden,
-[data-slot='accordion-trigger'][aria-expanded='false'] ng-icon.group-aria-\[expanded\=false\]\/accordion-trigger\:hidden {
+[data-slot='accordion-trigger'][aria-expanded='false']
+  ng-icon.group-aria-\[expanded\=false\]\/accordion-trigger\:hidden {
   display: none;
 }

package/src/lib/theme/tokens/color.css

@@ -323,6 +323,16 @@
 
   --black: var(--neutrals-dark);
   --black-foreground: var(--neutrals-on-fill);
+
+  /** || Chart series: 3:1 against the page and surface backgrounds || */
+  --chart-1: var(--primary-6);
+  --chart-2: var(--blue-4);
+  --chart-3: var(--teal-4);
+  --chart-4: var(--yellow-5);
+  --chart-5: var(--violet-4);
+  --chart-6: var(--pink-4);
+  --chart-7: var(--secondary-6);
+  --chart-8: var(--green-4);
 }
 
 .dark {
@@ -512,6 +522,16 @@
   --teal-border-light: var(--teal-5);
   --teal-text: var(--teal-2);
   --teal-text-strong: var(--teal-1);
+
+  /** || Chart series || */
+  --chart-1: var(--primary-4);
+  --chart-2: var(--blue-3);
+  --chart-3: var(--teal-3);
+  --chart-4: var(--yellow-3);
+  --chart-5: var(--violet-3);
+  --chart-6: var(--pink-3);
+  --chart-7: var(--secondary-5);
+  --chart-8: var(--green-3);
 }
 
 @theme inline {
@@ -526,4 +546,7 @@
   --color-additional-foreground: var(--additional-foreground);
   --color-ink: var(--black);
   --color-ink-foreground: var(--black-foreground);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
 }

package/types/yukit-web-chart.d.ts

@@ -0,0 +1,219 @@
+import * as yukit_web_chart from 'yukit-web/chart';
+import * as _angular_core from '@angular/core';
+
+/** Theme token a series is painted with; `chart-n` resolves to the `--chart-n` custom property of `yukit-web/theme.css`. */
+type YuwChartColorDto = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | 'chart-6' | 'chart-7' | 'chart-8';
+/** Every chart token, in palette order. */
+declare const YUW_CHART_COLORS: readonly YuwChartColorDto[];
+/**
+ * How one series is shown: its label, already translated by the consumer, and its color token.
+ */
+interface YuwChartSeriesDto {
+    readonly color: YuwChartColorDto;
+    readonly label: string;
+}
+/**
+ * Series of a chart keyed by the data field holding their values. The key order is the drawing, stacking, legend
+ * and tooltip order.
+ */
+type YuwChartConfigDto = Readonly<Record<string, YuwChartSeriesDto>>;
+/** One data row: the category under `categoryKey` and one number per series key. */
+type YuwChartRowDto = Readonly<Record<string, unknown>>;
+/**
+ * Chart kind. Bars group their series side by side unless the kind is `-stacked`; `bar-horizontal` lays the categories
+ * on the vertical axis. `pie` and `donut` draw one slice per series, its value summed across every row.
+ */
+type YuwChartKindDto = 'area' | 'area-stacked' | 'bar' | 'bar-horizontal' | 'bar-horizontal-stacked' | 'bar-stacked' | 'donut' | 'line' | 'pie';
+/** Turns a value into the text shown on axes, tooltips and the accessible table, e.g. a localized currency. */
+type YuwChartValueFormatDto = (value: number) => string;
+/** Turns the value under `categoryKey` into its label, e.g. a localized month name. */
+type YuwChartCategoryFormatDto = (category: unknown) => string;
+/** Color token of the series at `index`, cycling through the palette: builds a config for a dynamic set of series. */
+declare function yuwChartColorAt(index: number): YuwChartColorDto;
+
+/** How a mark is painted: a filled shape, a translucent area or a line. */
+type YuwChartMarkPaintDto = 'area' | 'fill' | 'stroke';
+/** A drawn path. `hit` is the position in `YuwChartScene.hits` it belongs to, or `null` when it spans all of them. */
+interface YuwChartMark {
+    readonly color: string;
+    readonly d: string;
+    readonly hit: number | null;
+    readonly key: string;
+    readonly paint: YuwChartMarkPaintDto;
+}
+/** A dot drawn on a line or area at the active position. */
+interface YuwChartPoint {
+    readonly color: string;
+    readonly cx: number;
+    readonly cy: number;
+    readonly key: string;
+}
+interface YuwChartTooltipItem {
+    readonly color: string;
+    readonly key: string;
+    readonly label: string;
+    readonly value: string;
+}
+interface YuwChartTooltip {
+    readonly items: readonly YuwChartTooltipItem[];
+    readonly title: string | null;
+}
+/**
+ * One position the pointer and the keyboard can activate: a category of a cartesian chart, a slice of a pie. `d` is
+ * the area that reacts to the pointer, `cursor` what highlights it, `anchor` where its tooltip points.
+ */
+interface YuwChartHit {
+    readonly anchor: {
+        readonly x: number;
+        readonly y: number;
+    };
+    readonly cursor: string | null;
+    readonly d: string;
+    readonly points: readonly YuwChartPoint[];
+    readonly tooltip: YuwChartTooltip;
+}
+interface YuwChartTick {
+    readonly anchor: 'end' | 'middle' | 'start';
+    readonly label: string;
+    readonly x: number;
+    readonly y: number;
+}
+interface YuwChartTableRow {
+    readonly cells: readonly string[];
+    readonly header: string | null;
+}
+/** The text alternative: the same numbers as a table, with a corner header only when rows have headers. */
+interface YuwChartTable {
+    readonly corner: string | null;
+    readonly head: readonly string[];
+    readonly rows: readonly YuwChartTableRow[];
+}
+/** Everything a chart kind draws, in pixels of the measured plot. */
+interface YuwChartScene {
+    readonly cursorPaint: 'band' | 'line';
+    readonly empty: boolean;
+    readonly grid: readonly string[];
+    readonly hits: readonly YuwChartHit[];
+    readonly marks: readonly YuwChartMark[];
+    /** Where marks and hit areas are drawn from; anchors, ticks and the grid are absolute. */
+    readonly origin: {
+        readonly x: number;
+        readonly y: number;
+    };
+    readonly table: YuwChartTable;
+    readonly ticks: readonly YuwChartTick[];
+}
+
+interface YuwChartSize {
+    readonly height: number;
+    readonly width: number;
+}
+
+/**
+ * Chart drawn as SVG from a series `config` and `data` rows, with a tooltip and a legend that read the same config.
+ *
+ * Every series is a key of `config` naming the row field that holds its values, plus its label (already translated)
+ * and a `chart-n` color token, so light and dark mode recolor through the theme with no redraw. `kind` picks the
+ * drawing: bars (grouped, stacked, horizontal), lines, areas, or a pie / donut with one slice per series summed across
+ * the rows. The chart fills its root element and redraws when it resizes; size it with `class` (default `h-72`).
+ *
+ * The pointer and the keyboard (focus the plot, then the arrow keys, Home, End and Escape) move a tooltip across the
+ * categories or slices, announced politely to screen readers. The same numbers are always available to assistive
+ * technology as a visually hidden table, which also renders on the server, where the plot is not drawn.
+ *
+ * The library hardcodes no locale: `valueFormat` and `categoryFormat` turn values and categories into text.
+ *
+ * Inputs:
+ * - `ariaLabel`: Required accessible name of the chart, e.g. its title. The app supplies and translates it.
+ * - `categoryFormat`: Turns the value under `categoryKey` into its label. Cartesian kinds only. Default is `String`.
+ * - `categoryKey`: Row field holding each category, e.g. the period. Cartesian kinds only. Default is `undefined`.
+ * - `categoryLabel`: Header of the category column in the accessible table, e.g. "Month". Cartesian kinds only.
+ *   Default is `undefined`.
+ * - `config`: Required series, keyed by the row field holding their values (`YuwChartConfigDto`). Its order is the
+ *   drawing, stacking, legend and tooltip order.
+ * - `data`: Required rows (`YuwChartRowDto[]`). A non-numeric value is a gap, never a zero.
+ * - `description`: Accessible description, e.g. the period the chart covers. Default is `undefined`.
+ * - `emptyText`: Required message shown when there is nothing to draw. The app supplies and translates it.
+ * - `kind`: The drawing (`YuwChartKindDto`). Default is `'bar'`.
+ * - `legend`: Shows the legend under the plot. Default is `true`.
+ * - `loading`: Shows a skeleton instead of the plot and marks the chart busy. Default is `false`.
+ * - `valueFormat`: Turns a value into the text of axes, tooltips and the accessible table, e.g. a localized currency.
+ *   Default is `String`.
+ * - `class`: Extra classes merged last onto the root element; set its height here.
+ *
+ * Usage:
+ * ```html
+ * <yuw-chart
+ *   kind="bar-stacked"
+ *   ariaLabel="Purchases per month"
+ *   emptyText="No purchases in this period"
+ *   categoryKey="month"
+ *   categoryLabel="Month"
+ *   [config]="config"
+ *   [data]="rows"
+ *   [valueFormat]="formatEuros"
+ *   class="h-80"
+ * />
+ * ```
+ */
+declare class YuwChartComponent {
+    private readonly _id;
+    private readonly _plot;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly categoryFormat: _angular_core.InputSignal<YuwChartCategoryFormatDto>;
+    readonly categoryKey: _angular_core.InputSignal<string | undefined>;
+    readonly categoryLabel: _angular_core.InputSignal<string | undefined>;
+    readonly config: _angular_core.InputSignal<Readonly<Record<string, yukit_web_chart.YuwChartSeriesDto>>>;
+    readonly data: _angular_core.InputSignal<readonly Readonly<Record<string, unknown>>[]>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    readonly emptyText: _angular_core.InputSignal<string>;
+    readonly kind: _angular_core.InputSignal<YuwChartKindDto>;
+    readonly legend: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly userClass: _angular_core.InputSignal<string>;
+    readonly valueFormat: _angular_core.InputSignal<YuwChartValueFormatDto>;
+    protected readonly descriptionId: string;
+    protected readonly size: _angular_core.Signal<YuwChartSize>;
+    protected readonly scene: _angular_core.Signal<YuwChartScene>;
+    protected readonly active: _angular_core.WritableSignal<number | null>;
+    protected readonly activeHit: _angular_core.Signal<YuwChartHit | null>;
+    protected readonly activePoints: _angular_core.Signal<readonly YuwChartPoint[]>;
+    protected readonly announcement: _angular_core.Signal<string>;
+    protected readonly cursorClass: _angular_core.Signal<string>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly drawable: _angular_core.Signal<boolean>;
+    protected readonly interactive: _angular_core.Signal<boolean>;
+    protected readonly legendItems: _angular_core.Signal<{
+        key: string;
+        label: string;
+        color: string;
+    }[]>;
+    protected readonly marks: _angular_core.Signal<{
+        d: string;
+        key: string;
+        class: string;
+        style: {
+            [x: string]: string;
+        };
+    }[]>;
+    protected readonly origin: _angular_core.Signal<string>;
+    protected readonly rootClass: _angular_core.Signal<string>;
+    protected readonly showLegend: _angular_core.Signal<boolean>;
+    protected readonly tooltip: _angular_core.Signal<{
+        left: number;
+        top: number;
+        class: string;
+        items: readonly YuwChartTooltipItem[];
+        title: string | null;
+    } | null>;
+    protected readonly viewBox: _angular_core.Signal<string>;
+    protected activate(index: number): void;
+    protected clear(): void;
+    protected onFocus(event: FocusEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwChartComponent, "yuw-chart", never, { "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "categoryFormat": { "alias": "categoryFormat"; "required": false; "isSignal": true; }; "categoryKey": { "alias": "categoryKey"; "required": false; "isSignal": true; }; "categoryLabel": { "alias": "categoryLabel"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": true; "isSignal": true; }; "kind": { "alias": "kind"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { YUW_CHART_COLORS, YuwChartComponent, yuwChartColorAt };
+export type { YuwChartCategoryFormatDto, YuwChartColorDto, YuwChartConfigDto, YuwChartKindDto, YuwChartRowDto, YuwChartSeriesDto, YuwChartValueFormatDto };

package/types/yukit-web.d.ts

@@ -3241,6 +3241,140 @@ declare class YuwTabContentDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwTabContentDirective, "ng-template[yuwTabContent]", never, { "entryId": { "alias": "yuwTabContent"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/** A single step in `<yuw-stepper>`, pairing its header text with the id used to match its panel. */
+interface YuwStepItemDto {
+    id: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    completed?: boolean;
+}
+type YuwStepStateDto = 'completed' | 'active' | 'upcoming';
+/** Context handed to a `yuwStepIndicator` template: `let-state` is implicit, `let-step` and `let-index` are named. */
+interface YuwStepIndicatorContextDto {
+    $implicit: YuwStepStateDto;
+    step: YuwStepItemDto;
+    index: number;
+}
+
+/**
+ * Replaces the content of every step's indicator circle (the number, or the check once completed).
+ * The circle itself keeps its shape and state colors.
+ *
+ * Usage:
+ * ```html
+ * <ng-template yuwStepIndicator let-state let-step="step">
+ *   <ng-icon [name]="icons[step.id]" />
+ * </ng-template>
+ * ```
+ */
+declare class YuwStepIndicatorDirective {
+    readonly templateRef: TemplateRef<YuwStepIndicatorContextDto>;
+    static ngTemplateContextGuard(_dir: YuwStepIndicatorDirective, _ctx: unknown): _ctx is YuwStepIndicatorContextDto;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwStepIndicatorDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwStepIndicatorDirective, "ng-template[yuwStepIndicator]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Declares the content of a single `<yuw-stepper>` step. Apply it to an `<ng-template>` and pass the
+ * id of the step it belongs to, matching an entry in the `steps` input.
+ *
+ * Inputs:
+ * - `yuwStepPanel`: Required string; id of the step this panel renders for.
+ */
+declare class YuwStepPanelDirective {
+    readonly templateRef: TemplateRef<unknown>;
+    readonly stepId: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwStepPanelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwStepPanelDirective, "ng-template[yuwStepPanel]", never, { "stepId": { "alias": "yuwStepPanel"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type YuwStepperOrientationDto = 'horizontal' | 'vertical';
+
+/**
+ * Multi-step flow: a header of numbered steps and the panel of the active one.
+ *
+ * Steps come from the `steps` input; each panel is an `<ng-template yuwStepPanel="<id>">` whose id matches a step.
+ * A horizontal header that does not fit scrolls sideways (touch, trackpad, mouse wheel or drag), its edges fading out.
+ * Only the active panel is rendered, so state that must survive a step change belongs to the parent (a form group).
+ * Navigation buttons are the consumer's: grab the stepper with a template reference and call `next()` / `previous()`,
+ * disabling them with `hasNext()` / `hasPrevious()`.
+ *
+ * Inputs / Models:
+ * - `steps`: The step definitions (`YuwStepItemDto[]`), in order.
+ * - `activeStep`: Two-way id of the current step.
+ * - `linear`: A step ahead can only be reached once every step before it has `completed: true`. Default is `false`.
+ * - `orientation`: `'horizontal'` header above the panel, or `'vertical'` header beside it. Default is `'horizontal'`.
+ * - `iconOnly`: Hides each step's label and description visually; they stay announced to screen readers and the label
+ *   shows as a tooltip. Pair it with a `yuwStepIndicator` template so the circles carry an icon. Default is `false`.
+ * - `color`: Accent of the active and completed steps (any `YuwColorDto`). Default is `'primary'`.
+ * - `class`: Extra classes merged last onto the root element.
+ *
+ * Content:
+ * - `<ng-template yuwStepIndicator let-state let-step="step" let-index="index">` replaces the number/check inside
+ *   every indicator.
+ *
+ * Usage:
+ * ```html
+ * <yuw-stepper #stepper [steps]="steps" [(activeStep)]="current" linear>
+ *   <ng-template yuwStepPanel="account">…</ng-template>
+ *   <ng-template yuwStepPanel="billing">…</ng-template>
+ * </yuw-stepper>
+ * <yuw-button [disabled]="!stepper.hasNext()" (clicked)="stepper.next()">{{ 'next' | translate }}</yuw-button>
+ * ```
+ */
+declare class YuwStepperComponent {
+    private readonly _idPrefix;
+    private readonly _window;
+    private readonly _list;
+    protected readonly indicator: _angular_core.Signal<YuwStepIndicatorDirective | undefined>;
+    protected readonly panels: _angular_core.Signal<readonly YuwStepPanelDirective[]>;
+    readonly activeStep: _angular_core.ModelSignal<string>;
+    readonly color: _angular_core.InputSignal<YuwColorDto>;
+    readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly linear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly orientation: _angular_core.InputSignal<YuwStepperOrientationDto>;
+    readonly steps: _angular_core.InputSignal<YuwStepItemDto[]>;
+    readonly userClass: _angular_core.InputSignal<string>;
+    protected readonly _activePanel: _angular_core.Signal<_angular_core.TemplateRef<unknown> | undefined>;
+    protected readonly _activeTriggerId: _angular_core.Signal<string>;
+    readonly activeIndex: _angular_core.Signal<number>;
+    protected readonly _items: _angular_core.Signal<{
+        triggerId: string;
+        ariaCurrent: string | null;
+        triggerClass: string;
+        indicatorClass: string;
+        separatorClass: string;
+        step: YuwStepItemDto;
+        index: number;
+        state: yukit_web.YuwStepStateDto;
+        reachable: boolean;
+        context: yukit_web.YuwStepIndicatorContextDto;
+    }[]>;
+    protected readonly _labelClass: _angular_core.Signal<"sr-only" | "flex flex-col">;
+    protected readonly _listClass: _angular_core.Signal<string>;
+    protected readonly _rootClass: _angular_core.Signal<string>;
+    protected readonly _stepClass: _angular_core.Signal<string>;
+    protected readonly _tooltipPosition: _angular_core.Signal<YuwTooltipPositionDto>;
+    readonly hasNext: _angular_core.Signal<boolean>;
+    readonly hasPrevious: _angular_core.Signal<boolean>;
+    readonly isLast: _angular_core.Signal<boolean>;
+    constructor();
+    next(): void;
+    previous(): void;
+    protected select(id: string): void;
+    private _goTo;
+    /** Closest reachable step in `direction`, skipping disabled ones. */
+    private _neighbour;
+    /**
+     * Centers the active step inside a horizontally overflowing header by scrolling the list itself, never
+     * `scrollIntoView`, which would also scroll the page to a stepper below the fold on first render.
+     */
+    private _revealActive;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwStepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwStepperComponent, "yuw-stepper", never, { "activeStep": { "alias": "activeStep"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "activeStep": "activeStepChange"; }, ["indicator", "panels"], never, true, never>;
+}
+
 /**
  * Container directive for a single file attachment card.
  *
@@ -4865,9 +4999,10 @@ declare class YuwsFilterContentDirective {
 
 /**
  * Toolbar of a list page: filters on the leading edge, search, export and column visibility on the
- * trailing one, and projected content after them. The trailing actions keep the room they need (the
- * search grows into it when expanded) and the filter row takes the rest, scrolling its active
- * filters horizontally with faded edges when they do not fit. Below `md` the active filters move to a
+ * trailing one, and projected content after them. The filter row never shrinks below its star and
+ * add button; the trailing actions take the room they need above that (the search grows into it when
+ * expanded, and shrinks back to fit when that room runs out) and the filter row takes the rest,
+ * scrolling its active filters horizontally with faded edges when they do not fit. Below `md` the active filters move to a
  * full-width second line, still a single scrolling row, and the trailing actions stay on the first.
  *
  * Each control renders only when its input is set: `filterGroups`, `searchPlaceholder`,
@@ -4959,5 +5094,5 @@ declare class YuwsTitleSkeletonDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YuwsTitleSkeletonDirective, "yuws-page-header[yuwsTitleSkeleton]", never, { "loading": { "alias": "yuwsTitleSkeleton"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUWS_NO_DATA_PLACEHOLDER, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwComboboxTriggerButtonDirective, YuwComboboxTriggerDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwMouseScrollXDirective, YuwMouseScrollYDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetHeaderDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, YuwsActiveStatusCellComponent, YuwsAdvanceOnEnterDirective, YuwsAvatarNameCellComponent, YuwsCardGridComponent, YuwsCardGridItemComponent, YuwsClampedTextCellComponent, YuwsConfirmDialogComponent, YuwsCopyButtonComponent, YuwsFilterComboboxComponent, YuwsFilterContentDirective, YuwsFlagCellComponent, YuwsFormSheetComponent, YuwsIconActionCellComponent, YuwsImageCellComponent, YuwsImageFieldComponent, YuwsImageUploadComponent, YuwsLinkCellComponent, YuwsListPaginationComponent, YuwsListTableComponent, YuwsListToolbarComponent, YuwsPageHeaderComponent, YuwsPageSizeComponent, YuwsStatusToggleCellComponent, YuwsTitleSkeletonDirective, buildInputOtpGroups, buildYuwActionsColumn, buildYuwsActiveStatusColumn, buildYuwsDateTimeColumn, buildYuwsIconActionColumn, buildYuwsOptionalTextColumn, buildYuwsStatusToggleColumn, cn, createPagedList, createYuwsSheetEditor, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter, yuwsInitialsOf, yuwsMediaQuerySignal, yuwsPendingRowClass, yuwsReadFileAsDataUrl };
-export type { YuwAlertDialogSizeDto, YuwAlertVariantDto, YuwAvatarGroupItemDto, YuwAvatarSizeDto, YuwBreadcrumbCrumb, YuwBreadcrumbItemDto, YuwBreadcrumbRouteData, YuwButtonGroupClickDto, YuwButtonGroupItemDto, YuwColorDto, YuwComboboxItemContext, YuwComboboxOptionDto, YuwComboboxTriggerContext, YuwComboboxValue, YuwCommandGroupDto, YuwCommandItemDto, YuwDatatableAlign, YuwDatatableAppearanceDto, YuwDatatableColumnDef, YuwDatatableColumnMeta, YuwDatatableFeatures, YuwDatatableRowClass, YuwDatepickerModeDto, YuwDatepickerValue, YuwFieldSizeDto, YuwInputFileVariantDto, YuwInputModeDto, YuwInputOtpGroupDto, YuwInputOtpModeDto, YuwInputTypeDto, YuwPageQuery, YuwPageRange, YuwPageSort, YuwPagedList, YuwPagedListOptions, YuwPaginationRangeItem, YuwPaginationSizeDto, YuwPasswordRevealStateDto, YuwPopoverAlignDto, YuwRadioOptionDto, YuwSearchInputCollapseFromDto, YuwSheetScrollStrategyDto, YuwSheetSideDto, YuwSidebarAvatarDto, YuwSidebarCollapsibleDto, YuwSidebarContentDto, YuwSidebarGroupDto, YuwSidebarItemClickDto, YuwSidebarItemDto, YuwSidebarSideDto, YuwSidebarSubItemDto, YuwSidebarVariantDto, YuwSwitchSizeDto, YuwTabItemDto, YuwTabsActivationModeDto, YuwTabsOrientationDto, YuwTabsVariantDto, YuwTextFieldContract, YuwToasterPositionDto, YuwToasterThemeDto, YuwTooltipPositionDto, YuwsAvatarNameCellSize, YuwsConfirmationState, YuwsFilterContentContext, YuwsFilterGroupDto, YuwsFilterGroupMode, YuwsFilterOptionDto, YuwsFilterSelection, YuwsFilterSetDto, YuwsFilterSetLabels, YuwsFilterSetRenameDto, YuwsFilterSetSaveDto, YuwsFilterValue, YuwsFormSheetLabels, YuwsIconActionColumn, YuwsImageCellSize, YuwsListPaginationLabels, YuwsListToolbarColumnsLabels, YuwsListToolbarFilterLabels, YuwsListToolbarLabels, YuwsListToolbarSearchLabels, YuwsListToolbarViewModeIcons, YuwsListToolbarViewModeLabels, YuwsPageSizeLabels, YuwsSheetEditor, YuwsStateLabels, YuwsStatusToggleColumn, YuwsTextColumnOptions, YuwsViewMode };
+export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUWS_NO_DATA_PLACEHOLDER, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwComboboxTriggerButtonDirective, YuwComboboxTriggerDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwMouseScrollXDirective, YuwMouseScrollYDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetHeaderDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwStepIndicatorDirective, YuwStepPanelDirective, YuwStepperComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, YuwsActiveStatusCellComponent, YuwsAdvanceOnEnterDirective, YuwsAvatarNameCellComponent, YuwsCardGridComponent, YuwsCardGridItemComponent, YuwsClampedTextCellComponent, YuwsConfirmDialogComponent, YuwsCopyButtonComponent, YuwsFilterComboboxComponent, YuwsFilterContentDirective, YuwsFlagCellComponent, YuwsFormSheetComponent, YuwsIconActionCellComponent, YuwsImageCellComponent, YuwsImageFieldComponent, YuwsImageUploadComponent, YuwsLinkCellComponent, YuwsListPaginationComponent, YuwsListTableComponent, YuwsListToolbarComponent, YuwsPageHeaderComponent, YuwsPageSizeComponent, YuwsStatusToggleCellComponent, YuwsTitleSkeletonDirective, buildInputOtpGroups, buildYuwActionsColumn, buildYuwsActiveStatusColumn, buildYuwsDateTimeColumn, buildYuwsIconActionColumn, buildYuwsOptionalTextColumn, buildYuwsStatusToggleColumn, cn, createPagedList, createYuwsSheetEditor, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter, yuwsInitialsOf, yuwsMediaQuerySignal, yuwsPendingRowClass, yuwsReadFileAsDataUrl };
+export type { YuwAlertDialogSizeDto, YuwAlertVariantDto, YuwAvatarGroupItemDto, YuwAvatarSizeDto, YuwBreadcrumbCrumb, YuwBreadcrumbItemDto, YuwBreadcrumbRouteData, YuwButtonGroupClickDto, YuwButtonGroupItemDto, YuwColorDto, YuwComboboxItemContext, YuwComboboxOptionDto, YuwComboboxTriggerContext, YuwComboboxValue, YuwCommandGroupDto, YuwCommandItemDto, YuwDatatableAlign, YuwDatatableAppearanceDto, YuwDatatableColumnDef, YuwDatatableColumnMeta, YuwDatatableFeatures, YuwDatatableRowClass, YuwDatepickerModeDto, YuwDatepickerValue, YuwFieldSizeDto, YuwInputFileVariantDto, YuwInputModeDto, YuwInputOtpGroupDto, YuwInputOtpModeDto, YuwInputTypeDto, YuwPageQuery, YuwPageRange, YuwPageSort, YuwPagedList, YuwPagedListOptions, YuwPaginationRangeItem, YuwPaginationSizeDto, YuwPasswordRevealStateDto, YuwPopoverAlignDto, YuwRadioOptionDto, YuwSearchInputCollapseFromDto, YuwSheetScrollStrategyDto, YuwSheetSideDto, YuwSidebarAvatarDto, YuwSidebarCollapsibleDto, YuwSidebarContentDto, YuwSidebarGroupDto, YuwSidebarItemClickDto, YuwSidebarItemDto, YuwSidebarSideDto, YuwSidebarSubItemDto, YuwSidebarVariantDto, YuwStepIndicatorContextDto, YuwStepItemDto, YuwStepStateDto, YuwStepperOrientationDto, YuwSwitchSizeDto, YuwTabItemDto, YuwTabsActivationModeDto, YuwTabsOrientationDto, YuwTabsVariantDto, YuwTextFieldContract, YuwToasterPositionDto, YuwToasterThemeDto, YuwTooltipPositionDto, YuwsAvatarNameCellSize, YuwsConfirmationState, YuwsFilterContentContext, YuwsFilterGroupDto, YuwsFilterGroupMode, YuwsFilterOptionDto, YuwsFilterSelection, YuwsFilterSetDto, YuwsFilterSetLabels, YuwsFilterSetRenameDto, YuwsFilterSetSaveDto, YuwsFilterValue, YuwsFormSheetLabels, YuwsIconActionColumn, YuwsImageCellSize, YuwsListPaginationLabels, YuwsListToolbarColumnsLabels, YuwsListToolbarFilterLabels, YuwsListToolbarLabels, YuwsListToolbarSearchLabels, YuwsListToolbarViewModeIcons, YuwsListToolbarViewModeLabels, YuwsPageSizeLabels, YuwsSheetEditor, YuwsStateLabels, YuwsStatusToggleColumn, YuwsTextColumnOptions, YuwsViewMode };