@ks-digital/designsystem-angular 0.0.1-alpha.68 → 0.0.1-alpha.69

package/package.json

@@ -5,7 +5,7 @@
     "url": "https://github.com/ks-no/designsystem.git",
     "directory": "packages/angular"
   },
-  "version": "0.0.1-alpha.68",
+  "version": "0.0.1-alpha.69",
   "license": "MIT",
   "private": false,
   "publishConfig": {
@@ -17,7 +17,8 @@
   },
   "peerDependencies": {
     "@angular/common": ">= 21.0.0 < 22.0.0",
-    "@angular/core": ">= 21.0.0 < 22.0.0"
+    "@angular/core": ">= 21.0.0 < 22.0.0",
+    "@angular/forms": ">= 21.0.0 < 22.0.0"
   },
   "module": "fesm2022/ks-digital-designsystem-angular.mjs",
   "typings": "types/ks-digital-designsystem-angular.d.ts",

package/types/ks-digital-designsystem-angular-suggestion.d.ts

@@ -1,5 +1,7 @@
+import * as _ks_digital_designsystem_angular_suggestion from '@ks-digital/designsystem-angular/suggestion';
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
 import * as i1 from '@ks-digital/designsystem-angular/__internals';
 
 declare class SuggestionListEmpty {
@@ -46,6 +48,12 @@ type SuggestionItem = {
     label: string;
     value: string;
 };
+/** Value of the `value` model and Angular signal forms. Always primitive. */
+type SuggestionValue = string | string[] | undefined;
+/** Accepted by `[selected]`; items and raw option values are both allowed. */
+type SuggestionSelectedInput = SuggestionItem | SuggestionItem[] | string | string[] | null | undefined;
+/** Emitted by `(selectedChange)`. Always resolved items. */
+type SuggestionSelected = SuggestionItem | SuggestionItem[] | undefined;
 type SuggestionFilterArgs = {
     index: number;
     label: string;
@@ -56,7 +64,8 @@ type SuggestionFilterArgs = {
 };
 type SuggestionFilter = (args: SuggestionFilterArgs) => boolean;
 
-declare class Suggestion {
+declare const UNSET: unique symbol;
+declare class Suggestion implements FormValueControl<SuggestionValue> {
     /**
      * Allows the user to select multiple items
      *
@@ -76,22 +85,48 @@ declare class Suggestion {
      */
     filter: _angular_core.InputSignal<boolean | SuggestionFilter>;
     /**
-     * Model for the selected item(s).
+     * Current value, as primitive option values. Bound by Angular signal forms.
      *
      * @default undefined
      */
-    selected: _angular_core.ModelSignal<SuggestionItem | SuggestionItem[] | undefined>;
-    protected selectedArray: _angular_core.Signal<SuggestionItem[]>;
+    readonly value: _angular_core.ModelSignal<SuggestionValue>;
+    /**
+     * Controlled selection. Accepts items or raw option values.
+     *
+     * @default undefined
+     */
+    readonly selected: _angular_core.InputSignal<SuggestionSelectedInput | typeof UNSET>;
+    /**
+     * Emits the resolved selection whenever the user changes it.
+     */
+    readonly selectedChange: _angular_core.OutputEmitterRef<SuggestionSelected>;
+    /**
+     * Form-control dirty state.
+     *
+     * @default false
+     */
+    readonly dirty: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the control has been touched. Synced with Angular signal forms.
+     *
+     * @default false
+     */
+    readonly touched: _angular_core.ModelSignal<boolean>;
+    protected selectedArray: _angular_core.Signal<_ks_digital_designsystem_angular_suggestion.SuggestionItem[]>;
     private readonly suggestionElement;
+    private readonly labels;
+    private readonly query;
     protected readonly suggestionList: _angular_core.Signal<SuggestionList | undefined>;
     constructor();
     protected onSelect(event: Event): void;
-    protected onKeyDown(event: Event): void;
+    protected onFocusOut(event: FocusEvent): void;
     protected onInput(event: Event): void;
+    private setValue;
+    private learnLabels;
     private syncOptions;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Suggestion, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Suggestion, "ksd-suggestion", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "creatable": { "alias": "creatable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["suggestionList"], ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Suggestion, "ksd-suggestion", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "creatable": { "alias": "creatable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectedChange": "selectedChange"; "touched": "touchedChange"; }, ["suggestionList"], ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
 }
 
 export { Suggestion, SuggestionList, SuggestionListEmpty, SuggestionListOption };
-export type { SuggestionFilter, SuggestionFilterArgs, SuggestionItem };
+export type { SuggestionFilter, SuggestionFilterArgs, SuggestionItem, SuggestionSelected, SuggestionSelectedInput, SuggestionValue };