yukit-web 0.6.2 → 0.6.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yukit-web",
   "description": "Angular UI component library for Yurest web applications.",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "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"
@@ -270,10 +274,20 @@
     "@ng-icons/lucide": "^32.2.0",
     "@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/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

@@ -440,7 +440,11 @@ type YuwComboboxValue = string | string[] | undefined;
  * `<yuw-button>` whose content is that template: clicking it opens the option list straight away,
  * with the search field inside it. `triggerAriaLabel` names that button, so pass one that reads well
  * for an icon-only trigger. See `YuwComboboxTriggerDirective`.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged.
+ * - `helperText`: Hint shown under the control. Replaced by the error while one is displayed.
+ *
+ * Bound with `[formField]` (signal forms), the error state follows the field: shown once it is touched, with the
+ * `message` of its first error under the control.
  *
  * Content marked `yuwComboboxFooter` is projected at the bottom of the option list, for actions
  * that belong with it (a "clear all", say); the consumer renders and styles it.
@@ -465,6 +469,7 @@ declare class YuwComboboxComponent<TData = unknown> extends YuwValueAccessorBase
     protected readonly triggerTemplate: _angular_core.Signal<YuwComboboxTriggerDirective | undefined>;
     readonly clearAriaLabel: _angular_core.InputSignal<string | undefined>;
     readonly emptyText: _angular_core.InputSignal<string | undefined>;
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly keepValueOnEscape: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -519,7 +524,7 @@ declare class YuwComboboxComponent<TData = unknown> extends YuwValueAccessorBase
      */
     private _guardEscape;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwComboboxComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwComboboxComponent<any>, "yuw-combobox", never, { "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "keepValueOnEscape": { "alias": "keepValueOnEscape"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonlyTrigger": { "alias": "readonlyTrigger"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "triggerAriaLabel": { "alias": "triggerAriaLabel"; "required": true; "isSignal": true; }; "triggerClass": { "alias": "triggerClass"; "required": false; "isSignal": true; }; "triggerColor": { "alias": "triggerColor"; "required": false; "isSignal": true; }; "triggerSize": { "alias": "triggerSize"; "required": false; "isSignal": true; }; "triggerVariant": { "alias": "triggerVariant"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "search": "searchChange"; "value": "valueChange"; }, ["itemTemplate", "triggerTemplate"], ["[yuwComboboxFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwComboboxComponent<any>, "yuw-combobox", never, { "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "keepValueOnEscape": { "alias": "keepValueOnEscape"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonlyTrigger": { "alias": "readonlyTrigger"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "triggerAriaLabel": { "alias": "triggerAriaLabel"; "required": true; "isSignal": true; }; "triggerClass": { "alias": "triggerClass"; "required": false; "isSignal": true; }; "triggerColor": { "alias": "triggerColor"; "required": false; "isSignal": true; }; "triggerSize": { "alias": "triggerSize"; "required": false; "isSignal": true; }; "triggerVariant": { "alias": "triggerVariant"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "search": "searchChange"; "value": "valueChange"; }, ["itemTemplate", "triggerTemplate"], ["[yuwComboboxFooter]"], true, never>;
 }
 
 interface YuwPageSort {
@@ -2060,10 +2065,14 @@ type YuwDatepickerModeDto = 'single' | 'range' | 'multiple' | 'monthYear';
  *   association. When omitted, a unique per-instance id is generated.
  * - `size`: Trigger button height (`YuwFieldSizeDto`), matching the `<yuw-button>` size of the same name. Default is `'default'`.
  * - `class`: Extra classes merged onto the trigger button (e.g. a width), consumer classes win.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged.
+ * - `helperText`: Hint shown under the control. Replaced by the error while one is displayed.
  * - `formatDate`: Custom date formatter function `(date: Date) => string` for the trigger label.
  *   In `range`/`multiple` modes it formats each date, joined with `' - '` / `', '`.
  *
+ * Bound with `[formField]` (signal forms), the error state follows the field: shown once it is touched, with the
+ * `message` of its first error under the control.
+ *
  * Usage:
  * ```html
  * <yuw-datepicker [(value)]="selectedDate" placeholder="Select date..." />
@@ -2076,6 +2085,7 @@ declare class YuwDatepickerComponent extends YuwValueAccessorBase<YuwDatepickerV
     readonly buttonId: _angular_core.InputSignal<string | undefined>;
     readonly captionLayout: _angular_core.InputSignal<"label" | "dropdown" | "dropdown-months" | "dropdown-years">;
     readonly formatDate: _angular_core.InputSignal<((date: Date) => string) | undefined>;
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly maxDate: _angular_core.InputSignal<Date | undefined>;
     readonly minDate: _angular_core.InputSignal<Date | undefined>;
@@ -2102,7 +2112,7 @@ declare class YuwDatepickerComponent extends YuwValueAccessorBase<YuwDatepickerV
     protected _emptyValue(): YuwDatepickerValue;
     protected onValueChange(next: YuwDatepickerValue): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwDatepickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwDatepickerComponent, "yuw-datepicker", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; "buttonId": { "alias": "buttonId"; "required": false; "isSignal": true; }; "captionLayout": { "alias": "captionLayout"; "required": false; "isSignal": true; }; "formatDate": { "alias": "formatDate"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwDatepickerComponent, "yuw-datepicker", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; "buttonId": { "alias": "buttonId"; "required": false; "isSignal": true; }; "captionLayout": { "alias": "captionLayout"; "required": false; "isSignal": true; }; "formatDate": { "alias": "formatDate"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /**