@ks-digital/designsystem-angular 0.0.1-alpha.44 → 0.0.1-alpha.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ks-digital-designsystem-angular-button.mjs +2 -2
- package/fesm2022/ks-digital-designsystem-angular-button.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-link.mjs +2 -2
- package/fesm2022/ks-digital-designsystem-angular-link.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-suggestion.mjs +163 -0
- package/fesm2022/ks-digital-designsystem-angular-suggestion.mjs.map +1 -0
- package/package.json +5 -1
- package/suggestion/README.md +3 -0
- package/types/ks-digital-designsystem-angular-suggestion.d.ts +53 -0
|
@@ -31,7 +31,7 @@ class Button {
|
|
|
31
31
|
<ksd-spinner aria-hidden="true" />
|
|
32
32
|
}
|
|
33
33
|
<ng-content />
|
|
34
|
-
`, isInline: true, styles: [":host ::ng-deep>*{display:inline-flex}\n"], dependencies: [{ kind: "component", type: Spinner, selector: "ksd-spinner", inputs: ["aria-label", "aria-hidden", "data-size"] }] });
|
|
34
|
+
`, isInline: true, styles: [":host ::ng-deep>*{display:inline-flex}:host ::ng-deep ng-icon{font-size:var(--ng-icon-size, 1.3em)}\n"], dependencies: [{ kind: "component", type: Spinner, selector: "ksd-spinner", inputs: ["aria-label", "aria-hidden", "data-size"] }] });
|
|
35
35
|
}
|
|
36
36
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Button, decorators: [{
|
|
37
37
|
type: Component,
|
|
@@ -56,7 +56,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
56
56
|
<ksd-spinner aria-hidden="true" />
|
|
57
57
|
}
|
|
58
58
|
<ng-content />
|
|
59
|
-
`, styles: [":host ::ng-deep>*{display:inline-flex}\n"] }]
|
|
59
|
+
`, styles: [":host ::ng-deep>*{display:inline-flex}:host ::ng-deep ng-icon{font-size:var(--ng-icon-size, 1.3em)}\n"] }]
|
|
60
60
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-variant", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
61
61
|
|
|
62
62
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ks-digital-designsystem-angular-button.mjs","sources":["../../../../packages/angular/button/src/button.ts","../../../../packages/angular/button/src/ks-digital-designsystem-angular-button.ts"],"sourcesContent":["import { booleanAttribute, Component, input } from '@angular/core'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { Spinner } from '@ks-digital/designsystem-angular/spinner'\n\n@Component({\n selector: 'button[ksd-button], a[ksd-button]',\n hostDirectives: [\n {\n directive: HostSize,\n inputs: ['data-size'],\n },\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n imports: [Spinner],\n host: {\n class: 'ds-button',\n type: 'button',\n '[attr.data-variant]': 'variant()',\n '[attr.data-icon]': 'icon() || null',\n '[attr.disabled]': 'disabled() ? true : null',\n '[attr.aria-busy]': 'loading() ? true : null',\n },\n styles: `\n /* Ensure transcluded icons are aligned properly */\n :host ::ng-deep > * {\n display: inline-flex;\n }\n `,\n\n template: `\n @if (loading()) {\n <ksd-spinner aria-hidden=\"true\" />\n }\n <ng-content />\n `,\n})\nexport class Button {\n /**\n * Specify which variant to use\n * @default 'primary'\n */\n readonly variant = input<'primary' | 'secondary' | 'tertiary'>('primary', {\n alias: 'data-variant',\n })\n\n /**\n * Toggle loading state.\n * Pass an element if you want to display a custom loader.\n *\n * @default false\n */\n readonly loading = input(false, { transform: booleanAttribute })\n\n /**\n * Disables element\n */\n readonly disabled = input(false, { transform: booleanAttribute })\n\n /**\n * If this is a button with only an icon\n */\n readonly icon = input(false, { transform: booleanAttribute })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-button.mjs","sources":["../../../../packages/angular/button/src/button.ts","../../../../packages/angular/button/src/ks-digital-designsystem-angular-button.ts"],"sourcesContent":["import { booleanAttribute, Component, input } from '@angular/core'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { Spinner } from '@ks-digital/designsystem-angular/spinner'\n\n@Component({\n selector: 'button[ksd-button], a[ksd-button]',\n hostDirectives: [\n {\n directive: HostSize,\n inputs: ['data-size'],\n },\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n imports: [Spinner],\n host: {\n class: 'ds-button',\n type: 'button',\n '[attr.data-variant]': 'variant()',\n '[attr.data-icon]': 'icon() || null',\n '[attr.disabled]': 'disabled() ? true : null',\n '[attr.aria-busy]': 'loading() ? true : null',\n },\n styles: `\n /* Ensure transcluded icons are aligned properly */\n :host ::ng-deep > * {\n display: inline-flex;\n }\n\n :host ::ng-deep ng-icon {\n font-size: var(--ng-icon-size, 1.3em);\n }\n `,\n\n template: `\n @if (loading()) {\n <ksd-spinner aria-hidden=\"true\" />\n }\n <ng-content />\n `,\n})\nexport class Button {\n /**\n * Specify which variant to use\n * @default 'primary'\n */\n readonly variant = input<'primary' | 'secondary' | 'tertiary'>('primary', {\n alias: 'data-variant',\n })\n\n /**\n * Toggle loading state.\n * Pass an element if you want to display a custom loader.\n *\n * @default false\n */\n readonly loading = input(false, { transform: booleanAttribute })\n\n /**\n * Disables element\n */\n readonly disabled = input(false, { transform: booleanAttribute })\n\n /**\n * If this is a button with only an icon\n */\n readonly icon = input(false, { transform: booleanAttribute })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internal
|
|
|
5
5
|
|
|
6
6
|
class Link {
|
|
7
7
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Link, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: Link, isStandalone: true, selector: "a[ksd-link]", host: { classAttribute: "ds-link" }, 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:has(>span)>:is(ng-icon){margin-inline:var(--ds-size-1);margin-inline-start:0}:host ng-icon{display:inline-flex;vertical-align:middle}:host svg{width:1em;height:1em}\n"] });
|
|
8
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: Link, isStandalone: true, selector: "a[ksd-link]", host: { classAttribute: "ds-link" }, 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:has(>span)>:is(ng-icon){margin-inline:var(--ds-size-1);margin-inline-start:0}:host ng-icon{display:inline-flex;vertical-align:middle;font-size:var(--ng-icon-size, 1.3em)}:host svg{width:1em;height:1em}\n"] });
|
|
9
9
|
}
|
|
10
10
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Link, decorators: [{
|
|
11
11
|
type: Component,
|
|
@@ -20,7 +20,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
20
20
|
},
|
|
21
21
|
], host: {
|
|
22
22
|
class: 'ds-link',
|
|
23
|
-
}, styles: [":host:has(>span)>:is(ng-icon){margin-inline:var(--ds-size-1);margin-inline-start:0}:host ng-icon{display:inline-flex;vertical-align:middle}:host svg{width:1em;height:1em}\n"] }]
|
|
23
|
+
}, styles: [":host:has(>span)>:is(ng-icon){margin-inline:var(--ds-size-1);margin-inline-start:0}:host ng-icon{display:inline-flex;vertical-align:middle;font-size:var(--ng-icon-size, 1.3em)}:host svg{width:1em;height:1em}\n"] }]
|
|
24
24
|
}] });
|
|
25
25
|
|
|
26
26
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ks-digital-designsystem-angular-link.mjs","sources":["../../../../packages/angular/link/src/link.ts","../../../../packages/angular/link/src/ks-digital-designsystem-angular-link.ts"],"sourcesContent":["import { Component } from '@angular/core'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n selector: 'a[ksd-link]',\n template: ` <ng-content /> `,\n hostDirectives: [\n {\n directive: HostSize,\n inputs: ['data-size'],\n },\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n host: {\n class: 'ds-link',\n },\n styles: `\n :host {\n &:has(> span) > :is(ng-icon) {\n margin-inline: var(--ds-size-1);\n margin-inline-start: 0;\n }\n ng-icon {\n display: inline-flex;\n vertical-align: middle;\n }\n svg {\n width: 1em;\n height: 1em;\n }\n }\n `,\n})\nexport class Link {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-link.mjs","sources":["../../../../packages/angular/link/src/link.ts","../../../../packages/angular/link/src/ks-digital-designsystem-angular-link.ts"],"sourcesContent":["import { Component } from '@angular/core'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n selector: 'a[ksd-link]',\n template: ` <ng-content /> `,\n hostDirectives: [\n {\n directive: HostSize,\n inputs: ['data-size'],\n },\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n host: {\n class: 'ds-link',\n },\n styles: `\n :host {\n &:has(> span) > :is(ng-icon) {\n margin-inline: var(--ds-size-1);\n margin-inline-start: 0;\n }\n ng-icon {\n display: inline-flex;\n vertical-align: middle;\n font-size: var(--ng-icon-size, 1.3em);\n }\n svg {\n width: 1em;\n height: 1em;\n }\n }\n `,\n})\nexport class Link {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAwCa,IAAI,CAAA;uGAAJ,IAAI,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAJ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAI,iQAhCL,CAAA,gBAAA,CAAkB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,mNAAA,CAAA,EAAA,CAAA;;2FAgCjB,IAAI,EAAA,UAAA,EAAA,CAAA;kBAlChB,SAAS;+BACE,aAAa,EAAA,QAAA,EACb,kBAAkB,EAAA,cAAA,EACZ;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,QAAQ;4BACnB,MAAM,EAAE,CAAC,WAAW,CAAC;AACtB,yBAAA;AACD,wBAAA;AACE,4BAAA,SAAS,EAAE,SAAS;4BACpB,MAAM,EAAE,CAAC,YAAY,CAAC;AACvB,yBAAA;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,KAAK,EAAE,SAAS;AACjB,qBAAA,EAAA,MAAA,EAAA,CAAA,mNAAA,CAAA,EAAA;;;ACrBH;;AAEG;;;;"}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, model, computed, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, viewChild, contentChildren } from '@angular/core';
|
|
3
|
+
import '@digdir/designsystemet-web';
|
|
4
|
+
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
5
|
+
import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
|
|
6
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
7
|
+
|
|
8
|
+
const sanitizeItems = (values) => !values ? [] : Array.isArray(values) ? values : [values];
|
|
9
|
+
const toItem = (data) => ({
|
|
10
|
+
label: data.textContent?.trim() || data.value,
|
|
11
|
+
value: data.value,
|
|
12
|
+
});
|
|
13
|
+
const nextSelected = (data, previous, multiple) => {
|
|
14
|
+
const item = toItem(data);
|
|
15
|
+
if (!multiple) {
|
|
16
|
+
return data.isConnected ? undefined : item;
|
|
17
|
+
}
|
|
18
|
+
const prevItems = sanitizeItems(previous);
|
|
19
|
+
return data.isConnected
|
|
20
|
+
? prevItems.filter(({ value }) => value !== item.value)
|
|
21
|
+
: [...prevItems, item];
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
class Suggestion {
|
|
25
|
+
/**
|
|
26
|
+
* Allows the user to select multiple items
|
|
27
|
+
*
|
|
28
|
+
* @default false
|
|
29
|
+
*/
|
|
30
|
+
multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: booleanAttribute });
|
|
31
|
+
/**
|
|
32
|
+
* Allows the user to create new items
|
|
33
|
+
*
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
creatable = input(false, { ...(ngDevMode ? { debugName: "creatable" } : {}), transform: booleanAttribute });
|
|
37
|
+
/**
|
|
38
|
+
* Model for the selected item(s).
|
|
39
|
+
*
|
|
40
|
+
* @default undefined
|
|
41
|
+
*/
|
|
42
|
+
selected = model(undefined, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
43
|
+
selectedArray = computed(() => sanitizeItems(this.selected()), ...(ngDevMode ? [{ debugName: "selectedArray" }] : []));
|
|
44
|
+
onSelect(event) {
|
|
45
|
+
const customEvent = event;
|
|
46
|
+
customEvent.preventDefault();
|
|
47
|
+
const data = customEvent.detail;
|
|
48
|
+
if (!data)
|
|
49
|
+
return;
|
|
50
|
+
this.selected.set(nextSelected(data, this.selected(), this.multiple()));
|
|
51
|
+
}
|
|
52
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Suggestion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Suggestion, isStandalone: true, selector: "ksd-suggestion", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, creatable: { classPropertyName: "creatable", publicName: "creatable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
|
|
54
|
+
<ds-suggestion
|
|
55
|
+
class="ds-suggestion"
|
|
56
|
+
[attr.data-multiple]="multiple() || undefined"
|
|
57
|
+
[attr.data-creatable]="creatable() || undefined"
|
|
58
|
+
(comboboxbeforeselect)="onSelect($event)"
|
|
59
|
+
>
|
|
60
|
+
@for (option of selectedArray(); track option.value) {
|
|
61
|
+
<data [attr.value]="option.value">{{ option.label }}</data>
|
|
62
|
+
}
|
|
63
|
+
<ng-content />
|
|
64
|
+
</ds-suggestion>
|
|
65
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
66
|
+
}
|
|
67
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Suggestion, decorators: [{
|
|
68
|
+
type: Component,
|
|
69
|
+
args: [{
|
|
70
|
+
selector: 'ksd-suggestion',
|
|
71
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
72
|
+
hostDirectives: [
|
|
73
|
+
{
|
|
74
|
+
directive: HostSize,
|
|
75
|
+
inputs: ['data-size'],
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
directive: HostColor,
|
|
79
|
+
inputs: ['data-color'],
|
|
80
|
+
},
|
|
81
|
+
],
|
|
82
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
83
|
+
host: {},
|
|
84
|
+
template: `
|
|
85
|
+
<ds-suggestion
|
|
86
|
+
class="ds-suggestion"
|
|
87
|
+
[attr.data-multiple]="multiple() || undefined"
|
|
88
|
+
[attr.data-creatable]="creatable() || undefined"
|
|
89
|
+
(comboboxbeforeselect)="onSelect($event)"
|
|
90
|
+
>
|
|
91
|
+
@for (option of selectedArray(); track option.value) {
|
|
92
|
+
<data [attr.value]="option.value">{{ option.label }}</data>
|
|
93
|
+
}
|
|
94
|
+
<ng-content />
|
|
95
|
+
</ds-suggestion>
|
|
96
|
+
`,
|
|
97
|
+
}]
|
|
98
|
+
}], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], creatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "creatable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }] } });
|
|
99
|
+
|
|
100
|
+
class SuggestionListOption {
|
|
101
|
+
/**
|
|
102
|
+
* Hack to get the content from parent component so that we can
|
|
103
|
+
* keep the dom structure needed without additional host elements
|
|
104
|
+
*/
|
|
105
|
+
templateRef = viewChild('tpl', ...(ngDevMode ? [{ debugName: "templateRef" }] : []));
|
|
106
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
107
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SuggestionListOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
108
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: SuggestionListOption, isStandalone: true, selector: "ksd-suggestion-list-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-template #tpl><ng-content /></ng-template> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
109
|
+
}
|
|
110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SuggestionListOption, decorators: [{
|
|
111
|
+
type: Component,
|
|
112
|
+
args: [{
|
|
113
|
+
selector: 'ksd-suggestion-list-option',
|
|
114
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
115
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
116
|
+
imports: [],
|
|
117
|
+
template: ` <ng-template #tpl><ng-content /></ng-template> `,
|
|
118
|
+
}]
|
|
119
|
+
}], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
|
|
120
|
+
|
|
121
|
+
class SuggestionList {
|
|
122
|
+
options = contentChildren(SuggestionListOption, { ...(ngDevMode ? { debugName: "options" } : {}), descendants: true });
|
|
123
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SuggestionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
124
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SuggestionList, isStandalone: true, selector: "ksd-suggestion-list", host: { styleAttribute: "display: contents;" }, queries: [{ propertyName: "options", predicate: SuggestionListOption, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
125
|
+
<u-datalist>
|
|
126
|
+
@for (option of options(); track option) {
|
|
127
|
+
<u-option [value]="option.value()">
|
|
128
|
+
<ng-container *ngTemplateOutlet="option.templateRef()" />
|
|
129
|
+
</u-option>
|
|
130
|
+
}
|
|
131
|
+
</u-datalist>
|
|
132
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
133
|
+
}
|
|
134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SuggestionList, decorators: [{
|
|
135
|
+
type: Component,
|
|
136
|
+
args: [{
|
|
137
|
+
selector: 'ksd-suggestion-list',
|
|
138
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
139
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
140
|
+
imports: [NgTemplateOutlet],
|
|
141
|
+
host: {
|
|
142
|
+
style: 'display: contents;',
|
|
143
|
+
},
|
|
144
|
+
template: `
|
|
145
|
+
<u-datalist>
|
|
146
|
+
@for (option of options(); track option) {
|
|
147
|
+
<u-option [value]="option.value()">
|
|
148
|
+
<ng-container *ngTemplateOutlet="option.templateRef()" />
|
|
149
|
+
</u-option>
|
|
150
|
+
}
|
|
151
|
+
</u-datalist>
|
|
152
|
+
`,
|
|
153
|
+
}]
|
|
154
|
+
}], propDecorators: { options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SuggestionListOption), { ...{
|
|
155
|
+
descendants: true,
|
|
156
|
+
}, isSignal: true }] }] } });
|
|
157
|
+
|
|
158
|
+
/**
|
|
159
|
+
* Generated bundle index. Do not edit.
|
|
160
|
+
*/
|
|
161
|
+
|
|
162
|
+
export { Suggestion, SuggestionList, SuggestionListOption };
|
|
163
|
+
//# sourceMappingURL=ks-digital-designsystem-angular-suggestion.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-suggestion.mjs","sources":["../../../../packages/angular/suggestion/src/suggestion.utils.ts","../../../../packages/angular/suggestion/src/suggestion.ts","../../../../packages/angular/suggestion/src/suggestion-list-option.ts","../../../../packages/angular/suggestion/src/suggestion-list.ts","../../../../packages/angular/suggestion/src/ks-digital-designsystem-angular-suggestion.ts"],"sourcesContent":["import type { SuggestionItem, SuggestionModelValue } from './suggestion.types'\n\nexport const sanitizeItems = (\n values: SuggestionModelValue,\n): SuggestionItem[] =>\n !values ? [] : Array.isArray(values) ? values : [values]\n\nconst toItem = (data: HTMLDataElement): SuggestionItem => ({\n label: data.textContent?.trim() || data.value,\n value: data.value,\n})\n\nexport const nextSelected = (\n data: HTMLDataElement,\n previous: SuggestionModelValue,\n multiple: boolean,\n): SuggestionItem | SuggestionItem[] | undefined => {\n const item = toItem(data)\n\n if (!multiple) {\n return data.isConnected ? undefined : item\n }\n\n const prevItems = sanitizeItems(previous)\n return data.isConnected\n ? prevItems.filter(({ value }) => value !== item.value)\n : [...prevItems, item]\n}\n","import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n CUSTOM_ELEMENTS_SCHEMA,\n input,\n model,\n} from '@angular/core'\nimport '@digdir/designsystemet-web'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport type { SuggestionItem } from './suggestion.types'\nimport { nextSelected, sanitizeItems } from './suggestion.utils'\n\n@Component({\n selector: 'ksd-suggestion',\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: HostSize,\n inputs: ['data-size'],\n },\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n host: {},\n template: `\n <ds-suggestion\n class=\"ds-suggestion\"\n [attr.data-multiple]=\"multiple() || undefined\"\n [attr.data-creatable]=\"creatable() || undefined\"\n (comboboxbeforeselect)=\"onSelect($event)\"\n >\n @for (option of selectedArray(); track option.value) {\n <data [attr.value]=\"option.value\">{{ option.label }}</data>\n }\n <ng-content />\n </ds-suggestion>\n `,\n})\nexport class Suggestion {\n /**\n * Allows the user to select multiple items\n *\n * @default false\n */\n multiple = input(false, { transform: booleanAttribute })\n\n /**\n * Allows the user to create new items\n *\n * @default false\n */\n creatable = input(false, { transform: booleanAttribute })\n\n /**\n * Model for the selected item(s).\n *\n * @default undefined\n */\n selected = model<SuggestionItem | SuggestionItem[] | undefined>(undefined)\n\n protected selectedArray = computed(() => sanitizeItems(this.selected()))\n\n protected onSelect(event: Event) {\n const customEvent = event as CustomEvent<HTMLDataElement | undefined>\n customEvent.preventDefault()\n\n const data = customEvent.detail\n if (!data) return\n\n this.selected.set(nextSelected(data, this.selected(), this.multiple()))\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n CUSTOM_ELEMENTS_SCHEMA,\n input,\n TemplateRef,\n viewChild,\n} from '@angular/core'\n\n@Component({\n selector: 'ksd-suggestion-list-option',\n changeDetection: ChangeDetectionStrategy.OnPush,\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n imports: [],\n template: ` <ng-template #tpl><ng-content /></ng-template> `,\n})\nexport class SuggestionListOption {\n /**\n * Hack to get the content from parent component so that we can\n * keep the dom structure needed without additional host elements\n */\n templateRef = viewChild<TemplateRef<unknown>>('tpl')\n\n value = input.required<string>()\n}\n","import { NgTemplateOutlet } from '@angular/common'\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChildren,\n CUSTOM_ELEMENTS_SCHEMA,\n} from '@angular/core'\nimport { SuggestionListOption } from './suggestion-list-option'\n\n@Component({\n selector: 'ksd-suggestion-list',\n changeDetection: ChangeDetectionStrategy.OnPush,\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n imports: [NgTemplateOutlet],\n host: {\n style: 'display: contents;',\n },\n template: `\n <u-datalist>\n @for (option of options(); track option) {\n <u-option [value]=\"option.value()\">\n <ng-container *ngTemplateOutlet=\"option.templateRef()\" />\n </u-option>\n }\n </u-datalist>\n `,\n})\nexport class SuggestionList {\n readonly options = contentChildren(SuggestionListOption, {\n descendants: true,\n })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"url": "https://github.com/ks-no/designsystem.git",
|
|
6
6
|
"directory": "packages/angular"
|
|
7
7
|
},
|
|
8
|
-
"version": "0.0.1-alpha.
|
|
8
|
+
"version": "0.0.1-alpha.45",
|
|
9
9
|
"license": "MIT",
|
|
10
10
|
"private": false,
|
|
11
11
|
"publishConfig": {
|
|
@@ -93,6 +93,10 @@
|
|
|
93
93
|
"types": "./types/ks-digital-designsystem-angular-spinner.d.ts",
|
|
94
94
|
"default": "./fesm2022/ks-digital-designsystem-angular-spinner.mjs"
|
|
95
95
|
},
|
|
96
|
+
"./suggestion": {
|
|
97
|
+
"types": "./types/ks-digital-designsystem-angular-suggestion.d.ts",
|
|
98
|
+
"default": "./fesm2022/ks-digital-designsystem-angular-suggestion.mjs"
|
|
99
|
+
},
|
|
96
100
|
"./tabs": {
|
|
97
101
|
"types": "./types/ks-digital-designsystem-angular-tabs.d.ts",
|
|
98
102
|
"default": "./fesm2022/ks-digital-designsystem-angular-tabs.mjs"
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { TemplateRef } from '@angular/core';
|
|
3
|
+
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
4
|
+
|
|
5
|
+
type SuggestionItem = {
|
|
6
|
+
label: string;
|
|
7
|
+
value: string;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
declare class Suggestion {
|
|
11
|
+
/**
|
|
12
|
+
* Allows the user to select multiple items
|
|
13
|
+
*
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
17
|
+
/**
|
|
18
|
+
* Allows the user to create new items
|
|
19
|
+
*
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
creatable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
23
|
+
/**
|
|
24
|
+
* Model for the selected item(s).
|
|
25
|
+
*
|
|
26
|
+
* @default undefined
|
|
27
|
+
*/
|
|
28
|
+
selected: _angular_core.ModelSignal<SuggestionItem | SuggestionItem[] | undefined>;
|
|
29
|
+
protected selectedArray: _angular_core.Signal<SuggestionItem[]>;
|
|
30
|
+
protected onSelect(event: Event): void;
|
|
31
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Suggestion, never>;
|
|
32
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Suggestion, "ksd-suggestion", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "creatable": { "alias": "creatable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
declare class SuggestionListOption {
|
|
36
|
+
/**
|
|
37
|
+
* Hack to get the content from parent component so that we can
|
|
38
|
+
* keep the dom structure needed without additional host elements
|
|
39
|
+
*/
|
|
40
|
+
templateRef: _angular_core.Signal<TemplateRef<unknown> | undefined>;
|
|
41
|
+
value: _angular_core.InputSignal<string>;
|
|
42
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuggestionListOption, never>;
|
|
43
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuggestionListOption, "ksd-suggestion-list-option", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
declare class SuggestionList {
|
|
47
|
+
readonly options: _angular_core.Signal<readonly SuggestionListOption[]>;
|
|
48
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuggestionList, never>;
|
|
49
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuggestionList, "ksd-suggestion-list", never, {}, {}, ["options"], never, true, never>;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export { Suggestion, SuggestionList, SuggestionListOption };
|
|
53
|
+
export type { SuggestionItem };
|