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

package/fesm2022/ks-digital-designsystem-angular-tabs.mjs

@@ -27,10 +27,10 @@ class TabsTab {
     emitTabClicked(event) {
         this.tabClicked.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: TabsTab, isStandalone: true, selector: "ksd-tabs-tab", inputs: { tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClicked: "tabClicked" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: ` <ng-template #tpl><ng-content /></ng-template> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabsTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: TabsTab, isStandalone: true, selector: "ksd-tabs-tab", inputs: { tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClicked: "tabClicked" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: ` <ng-template #tpl><ng-content /></ng-template> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabsTab, decorators: [{
             type: Component,
             args: [{
                     selector: `ksd-tabs-tab`,
@@ -65,8 +65,8 @@ class Tabs {
         this.tabClicked.emit(event);
         tab.emitTabClicked(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Tabs, isStandalone: true, selector: "ksd-tabs", outputs: { tabClicked: "tabClicked" }, queries: [{ propertyName: "tabs", predicate: TabsTab, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: Tabs, isStandalone: true, selector: "ksd-tabs", outputs: { tabClicked: "tabClicked" }, queries: [{ propertyName: "tabs", predicate: TabsTab, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
     <ds-tabs class="ds-tabs">
       <ds-tablist>
         @for (tab of tabs(); track tab; let index = $index) {
@@ -79,7 +79,7 @@ class Tabs {
     </ds-tabs>
   `, isInline: true, styles: [":host ::ng-deep :is(.ds-tabs [role=tab],.ds-tabs ds-tab,.ds-tabs u-tab)>:where(ng-icon,svg,img){font-size:1.25em;width:1em;height:1em}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Tabs, decorators: [{
             type: Component,
             args: [{ selector: `ksd-tabs`, imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
     <ds-tabs class="ds-tabs">
@@ -105,10 +105,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
         }], propDecorators: { tabClicked: [{ type: i0.Output, args: ["tabClicked"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabsTab), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class TabsList {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: TabsList, isStandalone: true, selector: "ksd-tabs-list", ngImport: i0, template: `<ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: TabsList, isStandalone: true, selector: "ksd-tabs-list", ngImport: i0, template: `<ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabsList, decorators: [{
             type: Component,
             args: [{
                     selector: `ksd-tabs-list`,
@@ -118,14 +118,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
         }] });
 
 class TabsPanel {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: TabsPanel, isStandalone: true, selector: "ksd-tabs-panel", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabsPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: TabsPanel, isStandalone: true, selector: "ksd-tabs-panel", ngImport: i0, template: `
     <ds-tabpanel>
       <ng-content />
     </ds-tabpanel>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabsPanel, decorators: [{
             type: Component,
             args: [{
                     selector: `ksd-tabs-panel`,

package/fesm2022/ks-digital-designsystem-angular-tag.mjs

@@ -10,10 +10,10 @@ class Tag {
      * @default 'default'
      */
     variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), alias: 'data-variant' });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: Tag, isStandalone: true, selector: "ksd-tag", inputs: { variant: { classPropertyName: "variant", publicName: "data-variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "ds-tag" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true, styles: [":host ::ng-deep>*{margin-inline-end:var(--ds-size-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Tag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: Tag, isStandalone: true, selector: "ksd-tag", inputs: { variant: { classPropertyName: "variant", publicName: "data-variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "ds-tag" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true, styles: [":host ::ng-deep>*{margin-inline-end:var(--ds-size-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Tag, decorators: [{
             type: Component,
             args: [{ selector: 'ksd-tag', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {

package/fesm2022/ks-digital-designsystem-angular-validation-message.mjs

@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
 import { Directive } from '@angular/core';
 
 class ValidationMessage {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ValidationMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: ValidationMessage, isStandalone: true, selector: "[ksd-validation-message]", host: { attributes: { "data-field": "validation" }, classAttribute: "ds-validation-message" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ValidationMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: ValidationMessage, isStandalone: true, selector: "[ksd-validation-message]", host: { attributes: { "data-field": "validation" }, classAttribute: "ds-validation-message" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ValidationMessage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ValidationMessage, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

package/package.json

@@ -5,7 +5,7 @@
     "url": "https://github.com/ks-no/designsystem.git",
     "directory": "packages/angular"
   },
-  "version": "0.0.1-alpha.67",
+  "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",
@@ -97,6 +98,10 @@
       "types": "./types/ks-digital-designsystem-angular-search.d.ts",
       "default": "./fesm2022/ks-digital-designsystem-angular-search.mjs"
     },
+    "./skeleton": {
+      "types": "./types/ks-digital-designsystem-angular-skeleton.d.ts",
+      "default": "./fesm2022/ks-digital-designsystem-angular-skeleton.mjs"
+    },
     "./spinner": {
       "types": "./types/ks-digital-designsystem-angular-spinner.d.ts",
       "default": "./fesm2022/ks-digital-designsystem-angular-spinner.mjs"

package/skeleton/README.md

@@ -0,0 +1,3 @@
+# @ks-digital/designsystem-angular/skeleton
+
+Secondary entry point of `@ks-digital/designsystem-angular`. It can be used by importing from `@ks-digital/designsystem-angular/skeleton`.

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

@@ -0,0 +1,18 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Skeleton is used to represent a draft of a page while the content loads.
+ */
+declare class Skeleton {
+    /**
+     * Specify which variant to use
+     * @default 'rectangle'
+     */
+    readonly variant: _angular_core.InputSignal<"rectangle" | "circle" | "text">;
+    readonly isText: _angular_core.Signal<boolean>;
+    readonly dataText: _angular_core.Signal<"-" | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Skeleton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Skeleton, "ksd-skeleton", never, { "variant": { "alias": "data-variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { Skeleton };

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 };