@ks-digital/designsystem-angular 0.0.1-alpha.7 → 0.0.1-alpha.71
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/README.md +28 -11
- package/__internals/README.md +3 -0
- package/alert/README.md +3 -0
- package/breadcrumbs/README.md +3 -0
- package/button/README.md +3 -0
- package/card/README.md +3 -0
- package/details/README.md +3 -0
- package/dialog/README.md +3 -0
- package/dropdown/README.md +3 -0
- package/error-summary/README.md +3 -0
- package/fesm2022/ks-digital-designsystem-angular-__internals.mjs +82 -0
- package/fesm2022/ks-digital-designsystem-angular-__internals.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-alert.mjs +34 -0
- package/fesm2022/ks-digital-designsystem-angular-alert.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-breadcrumbs.mjs +51 -0
- package/fesm2022/ks-digital-designsystem-angular-breadcrumbs.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-button.mjs +74 -0
- package/fesm2022/ks-digital-designsystem-angular-button.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-card.mjs +87 -0
- package/fesm2022/ks-digital-designsystem-angular-card.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-chip.mjs +43 -0
- package/fesm2022/ks-digital-designsystem-angular-chip.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-details.mjs +65 -0
- package/fesm2022/ks-digital-designsystem-angular-details.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-dialog.mjs +49 -0
- package/fesm2022/ks-digital-designsystem-angular-dialog.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-dropdown.mjs +46 -0
- package/fesm2022/ks-digital-designsystem-angular-dropdown.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-error-summary.mjs +49 -0
- package/fesm2022/ks-digital-designsystem-angular-error-summary.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-forms.mjs +229 -0
- package/fesm2022/ks-digital-designsystem-angular-forms.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-heading.mjs +40 -0
- package/fesm2022/ks-digital-designsystem-angular-heading.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-link.mjs +31 -0
- package/fesm2022/ks-digital-designsystem-angular-link.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-pagination.mjs +143 -0
- package/fesm2022/ks-digital-designsystem-angular-pagination.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-paragraph.mjs +25 -0
- package/fesm2022/ks-digital-designsystem-angular-paragraph.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-popover.mjs +46 -0
- package/fesm2022/ks-digital-designsystem-angular-popover.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-search.mjs +159 -0
- package/fesm2022/ks-digital-designsystem-angular-search.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-skeleton.mjs +35 -0
- package/fesm2022/ks-digital-designsystem-angular-skeleton.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-spinner.mjs +104 -0
- package/fesm2022/ks-digital-designsystem-angular-spinner.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-suggestion.mjs +375 -0
- package/fesm2022/ks-digital-designsystem-angular-suggestion.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-table.mjs +105 -0
- package/fesm2022/ks-digital-designsystem-angular-table.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-tabs.mjs +148 -0
- package/fesm2022/ks-digital-designsystem-angular-tabs.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-tag.mjs +38 -0
- package/fesm2022/ks-digital-designsystem-angular-tag.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular-validation-message.mjs +25 -0
- package/fesm2022/ks-digital-designsystem-angular-validation-message.mjs.map +1 -0
- package/fesm2022/ks-digital-designsystem-angular.mjs +7 -0
- package/fesm2022/ks-digital-designsystem-angular.mjs.map +1 -0
- package/forms/README.md +3 -0
- package/heading/README.md +3 -0
- package/link/README.md +3 -0
- package/package.json +113 -28
- package/pagination/README.md +3 -0
- package/paragraph/README.md +3 -0
- package/popover/README.md +3 -0
- package/search/README.md +3 -0
- package/skeleton/README.md +3 -0
- package/spinner/README.md +3 -0
- package/suggestion/README.md +3 -0
- package/table/README.md +3 -0
- package/tabs/README.md +3 -0
- package/tag/README.md +3 -0
- package/types/ks-digital-designsystem-angular-__internals.d.ts +50 -0
- package/types/ks-digital-designsystem-angular-alert.d.ts +12 -0
- package/types/ks-digital-designsystem-angular-breadcrumbs.d.ts +13 -0
- package/types/ks-digital-designsystem-angular-button.d.ts +32 -0
- package/types/ks-digital-designsystem-angular-card.d.ts +24 -0
- package/types/ks-digital-designsystem-angular-chip.d.ts +15 -0
- package/types/ks-digital-designsystem-angular-details.d.ts +20 -0
- package/types/ks-digital-designsystem-angular-dialog.d.ts +18 -0
- package/types/ks-digital-designsystem-angular-dropdown.d.ts +13 -0
- package/types/ks-digital-designsystem-angular-error-summary.d.ts +14 -0
- package/types/ks-digital-designsystem-angular-forms.d.ts +81 -0
- package/types/ks-digital-designsystem-angular-heading.d.ts +19 -0
- package/types/ks-digital-designsystem-angular-link.d.ts +9 -0
- package/types/ks-digital-designsystem-angular-pagination.d.ts +58 -0
- package/types/ks-digital-designsystem-angular-paragraph.d.ts +8 -0
- package/types/ks-digital-designsystem-angular-popover.d.ts +13 -0
- package/types/ks-digital-designsystem-angular-search.d.ts +76 -0
- package/types/ks-digital-designsystem-angular-skeleton.d.ts +18 -0
- package/types/ks-digital-designsystem-angular-spinner.d.ts +23 -0
- package/types/ks-digital-designsystem-angular-suggestion.d.ts +132 -0
- package/types/ks-digital-designsystem-angular-table.d.ts +43 -0
- package/types/ks-digital-designsystem-angular-tabs.d.ts +65 -0
- package/types/ks-digital-designsystem-angular-tag.d.ts +15 -0
- package/types/ks-digital-designsystem-angular-validation-message.d.ts +8 -0
- package/types/ks-digital-designsystem-angular.d.ts +2 -0
- package/validation-message/README.md +3 -0
- package/dist/README.md +0 -43
- package/dist/fesm2022/ks-digital-designsystem-angular.mjs +0 -195
- package/dist/fesm2022/ks-digital-designsystem-angular.mjs.map +0 -1
- package/dist/index.d.ts +0 -75
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, numberAttribute, output, computed, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, inject, ElementRef, DestroyRef, Directive } from '@angular/core';
|
|
3
|
+
import { pagination } from '@digdir/designsystemet-web/ds-pagination';
|
|
4
|
+
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
5
|
+
import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
|
|
6
|
+
|
|
7
|
+
class Pagination {
|
|
8
|
+
/**
|
|
9
|
+
* The current page
|
|
10
|
+
*/
|
|
11
|
+
current = input.required({ ...(ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
12
|
+
/**
|
|
13
|
+
* The total number of pages
|
|
14
|
+
*/
|
|
15
|
+
total = input.required({ ...(ngDevMode ? { debugName: "total" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
16
|
+
/**
|
|
17
|
+
* Sets the screen reader label for the pagination
|
|
18
|
+
*/
|
|
19
|
+
ariaLabel = input('Bla i sider', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
|
|
20
|
+
/**
|
|
21
|
+
* How many pages to show. Default is 7
|
|
22
|
+
*/
|
|
23
|
+
show = input(7, { ...(ngDevMode ? { debugName: "show" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
24
|
+
/**
|
|
25
|
+
* E.g if "?page=%d" all the links will set href to "?page=1", "?page=2".
|
|
26
|
+
*/
|
|
27
|
+
href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
|
|
28
|
+
/**
|
|
29
|
+
* Emits the page number when a page is clicked
|
|
30
|
+
*/
|
|
31
|
+
pageClicked = output();
|
|
32
|
+
/**
|
|
33
|
+
* Exposes pagination data for consumer use
|
|
34
|
+
*/
|
|
35
|
+
pages = computed(() => {
|
|
36
|
+
const result = pagination({
|
|
37
|
+
current: this.current(),
|
|
38
|
+
total: this.total(),
|
|
39
|
+
show: this.show(),
|
|
40
|
+
});
|
|
41
|
+
return {
|
|
42
|
+
pages: result.pages.map((p) => ({
|
|
43
|
+
page: p.page,
|
|
44
|
+
current: p.current === 'page',
|
|
45
|
+
key: p.key,
|
|
46
|
+
})),
|
|
47
|
+
prev: result.prev,
|
|
48
|
+
next: result.next,
|
|
49
|
+
};
|
|
50
|
+
}, ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
|
|
51
|
+
onClick(e) {
|
|
52
|
+
const target = e.target.closest('[aria-label]');
|
|
53
|
+
if (!target)
|
|
54
|
+
return;
|
|
55
|
+
const label = target.getAttribute('aria-label');
|
|
56
|
+
if (!label)
|
|
57
|
+
return;
|
|
58
|
+
const page = Number(label);
|
|
59
|
+
if (!isNaN(page) && page !== this.current()) {
|
|
60
|
+
e.preventDefault();
|
|
61
|
+
this.pageClicked.emit(page);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
65
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: Pagination, isStandalone: true, selector: "ksd-pagination", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageClicked: "pageClicked" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
|
|
66
|
+
<ds-pagination
|
|
67
|
+
class="ds-pagination"
|
|
68
|
+
[attr.data-current]="current()"
|
|
69
|
+
[attr.data-total]="total()"
|
|
70
|
+
[attr.data-href]="href()"
|
|
71
|
+
[attr.aria-label]="ariaLabel()"
|
|
72
|
+
(click)="onClick($event)"
|
|
73
|
+
>
|
|
74
|
+
<ng-content />
|
|
75
|
+
</ds-pagination>
|
|
76
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
77
|
+
}
|
|
78
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Pagination, decorators: [{
|
|
79
|
+
type: Component,
|
|
80
|
+
args: [{
|
|
81
|
+
selector: 'ksd-pagination',
|
|
82
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
83
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
84
|
+
template: `
|
|
85
|
+
<ds-pagination
|
|
86
|
+
class="ds-pagination"
|
|
87
|
+
[attr.data-current]="current()"
|
|
88
|
+
[attr.data-total]="total()"
|
|
89
|
+
[attr.data-href]="href()"
|
|
90
|
+
[attr.aria-label]="ariaLabel()"
|
|
91
|
+
(click)="onClick($event)"
|
|
92
|
+
>
|
|
93
|
+
<ng-content />
|
|
94
|
+
</ds-pagination>
|
|
95
|
+
`,
|
|
96
|
+
hostDirectives: [
|
|
97
|
+
{
|
|
98
|
+
directive: HostSize,
|
|
99
|
+
inputs: ['data-size'],
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
directive: HostColor,
|
|
103
|
+
inputs: ['data-color'],
|
|
104
|
+
},
|
|
105
|
+
],
|
|
106
|
+
}]
|
|
107
|
+
}], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], pageClicked: [{ type: i0.Output, args: ["pageClicked"] }] } });
|
|
108
|
+
|
|
109
|
+
class PaginationButton {
|
|
110
|
+
el = inject(ElementRef);
|
|
111
|
+
destroyRef = inject(DestroyRef);
|
|
112
|
+
constructor() {
|
|
113
|
+
const observer = new MutationObserver(() => this.updateVariant());
|
|
114
|
+
observer.observe(this.el.nativeElement, {
|
|
115
|
+
attributes: true,
|
|
116
|
+
attributeFilter: ['aria-current'],
|
|
117
|
+
});
|
|
118
|
+
this.updateVariant();
|
|
119
|
+
this.destroyRef.onDestroy(() => observer.disconnect());
|
|
120
|
+
}
|
|
121
|
+
updateVariant() {
|
|
122
|
+
const isCurrent = this.el.nativeElement.getAttribute('aria-current') === 'true';
|
|
123
|
+
this.el.nativeElement.setAttribute('data-variant', isCurrent ? 'primary' : 'tertiary');
|
|
124
|
+
}
|
|
125
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PaginationButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
126
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: PaginationButton, isStandalone: true, selector: "[ksdPaginationButton]", host: { classAttribute: "ds-button" }, ngImport: i0 });
|
|
127
|
+
}
|
|
128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PaginationButton, decorators: [{
|
|
129
|
+
type: Directive,
|
|
130
|
+
args: [{
|
|
131
|
+
selector: '[ksdPaginationButton]',
|
|
132
|
+
host: {
|
|
133
|
+
class: 'ds-button',
|
|
134
|
+
},
|
|
135
|
+
}]
|
|
136
|
+
}], ctorParameters: () => [] });
|
|
137
|
+
|
|
138
|
+
/**
|
|
139
|
+
* Generated bundle index. Do not edit.
|
|
140
|
+
*/
|
|
141
|
+
|
|
142
|
+
export { Pagination, PaginationButton };
|
|
143
|
+
//# sourceMappingURL=ks-digital-designsystem-angular-pagination.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-pagination.mjs","sources":["../../../../packages/angular/pagination/src/pagination.ts","../../../../packages/angular/pagination/src/pagination.button.ts","../../../../packages/angular/pagination/src/ks-digital-designsystem-angular-pagination.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n CUSTOM_ELEMENTS_SCHEMA,\n input,\n numberAttribute,\n output,\n} from '@angular/core'\nimport { pagination } from '@digdir/designsystemet-web/ds-pagination'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\nexport interface PaginationPage {\n page: number\n current: boolean\n key: string\n}\n\nexport interface PaginationPages {\n pages: PaginationPage[]\n prev: number\n next: number\n}\n\n@Component({\n selector: 'ksd-pagination',\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <ds-pagination\n class=\"ds-pagination\"\n [attr.data-current]=\"current()\"\n [attr.data-total]=\"total()\"\n [attr.data-href]=\"href()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n >\n <ng-content />\n </ds-pagination>\n `,\n hostDirectives: [\n {\n directive: HostSize,\n inputs: ['data-size'],\n },\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n})\nexport class Pagination {\n /**\n * The current page\n */\n readonly current = input.required<number, string | number>({\n transform: numberAttribute,\n })\n\n /**\n * The total number of pages\n */\n readonly total = input.required<number, string | number>({\n transform: numberAttribute,\n })\n\n /**\n * Sets the screen reader label for the pagination\n */\n readonly ariaLabel = input<string>('Bla i sider', { alias: 'aria-label' })\n\n /**\n * How many pages to show. Default is 7\n */\n readonly show = input(7, { transform: numberAttribute })\n\n /**\n * E.g if \"?page=%d\" all the links will set href to \"?page=1\", \"?page=2\".\n */\n readonly href = input<string>()\n\n /**\n * Emits the page number when a page is clicked\n */\n readonly pageClicked = output<number>()\n\n /**\n * Exposes pagination data for consumer use\n */\n readonly pages = computed<PaginationPages>(() => {\n const result = pagination({\n current: this.current(),\n total: this.total(),\n show: this.show(),\n })\n return {\n pages: result.pages.map((p) => ({\n page: p.page,\n current: p.current === 'page',\n key: p.key,\n })),\n prev: result.prev,\n next: result.next,\n }\n })\n\n protected onClick(e: Event) {\n const target = (e.target as HTMLElement).closest('[aria-label]')\n if (!target) return\n\n const label = target.getAttribute('aria-label')\n if (!label) return\n\n const page = Number(label)\n if (!isNaN(page) && page !== this.current()) {\n e.preventDefault()\n this.pageClicked.emit(page)\n }\n }\n}\n","import { DestroyRef, Directive, ElementRef, inject } from '@angular/core'\n\n@Directive({\n selector: '[ksdPaginationButton]',\n host: {\n class: 'ds-button',\n },\n})\nexport class PaginationButton {\n private el = inject<ElementRef<HTMLElement>>(ElementRef)\n private destroyRef = inject(DestroyRef)\n\n constructor() {\n const observer = new MutationObserver(() => this.updateVariant())\n observer.observe(this.el.nativeElement, {\n attributes: true,\n attributeFilter: ['aria-current'],\n })\n this.updateVariant()\n\n this.destroyRef.onDestroy(() => observer.disconnect())\n }\n\n private updateVariant() {\n const isCurrent =\n this.el.nativeElement.getAttribute('aria-current') === 'true'\n this.el.nativeElement.setAttribute(\n 'data-variant',\n isCurrent ? 'primary' : 'tertiary',\n )\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class Paragraph {
|
|
5
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Paragraph, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: Paragraph, isStandalone: true, selector: "p[ksd-paragraph]", host: { classAttribute: "ds-paragraph" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7
|
+
}
|
|
8
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Paragraph, decorators: [{
|
|
9
|
+
type: Component,
|
|
10
|
+
args: [{
|
|
11
|
+
selector: 'p[ksd-paragraph]',
|
|
12
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
13
|
+
template: `<ng-content />`,
|
|
14
|
+
host: {
|
|
15
|
+
class: 'ds-paragraph',
|
|
16
|
+
},
|
|
17
|
+
}]
|
|
18
|
+
}] });
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Generated bundle index. Do not edit.
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
export { Paragraph };
|
|
25
|
+
//# sourceMappingURL=ks-digital-designsystem-angular-paragraph.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-paragraph.mjs","sources":["../../../../packages/angular/paragraph/src/paragraph.ts","../../../../packages/angular/paragraph/src/ks-digital-designsystem-angular-paragraph.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core'\n\n@Component({\n selector: 'p[ksd-paragraph]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `<ng-content />`,\n host: {\n class: 'ds-paragraph',\n },\n})\nexport class Paragraph {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAUa,SAAS,CAAA;uGAAT,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,sHALV,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKf,SAAS,EAAA,UAAA,EAAA,CAAA;kBARrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;oBAC5B,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC1B,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,cAAc;AACtB,qBAAA;AACF,iBAAA;;;ACTD;;AAEG;;;;"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, Directive } from '@angular/core';
|
|
3
|
+
import '@digdir/designsystemet-web/popover';
|
|
4
|
+
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
5
|
+
import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
|
|
6
|
+
|
|
7
|
+
class Popover {
|
|
8
|
+
autoPlacement = input(true, { ...(ngDevMode ? { debugName: "autoPlacement" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9
|
+
variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), alias: 'data-variant' });
|
|
10
|
+
// Todo: replace with centralized types
|
|
11
|
+
placement = input('top', { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), alias: 'data-placement' });
|
|
12
|
+
popover = input('auto', { ...(ngDevMode ? { debugName: "popover" } : /* istanbul ignore next */ {}), alias: 'popover' });
|
|
13
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Popover, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
14
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: Popover, isStandalone: true, selector: "[ksd-popover]", inputs: { autoPlacement: { classPropertyName: "autoPlacement", publicName: "autoPlacement", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "data-variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "data-placement", isSignal: true, isRequired: false, transformFunction: null }, popover: { classPropertyName: "popover", publicName: "popover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-placement": "placement()", "attr.data-autoplacement": "autoPlacement()", "attr.popover": "popover()" }, classAttribute: "ds-popover" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0 });
|
|
15
|
+
}
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Popover, decorators: [{
|
|
17
|
+
type: Directive,
|
|
18
|
+
args: [{
|
|
19
|
+
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
20
|
+
selector: '[ksd-popover]',
|
|
21
|
+
hostDirectives: [
|
|
22
|
+
{
|
|
23
|
+
directive: HostSize,
|
|
24
|
+
inputs: ['data-size'],
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
directive: HostColor,
|
|
28
|
+
inputs: ['data-color'],
|
|
29
|
+
},
|
|
30
|
+
],
|
|
31
|
+
host: {
|
|
32
|
+
class: 'ds-popover',
|
|
33
|
+
'[attr.data-variant]': 'variant()',
|
|
34
|
+
'[attr.data-placement]': 'placement()',
|
|
35
|
+
'[attr.data-autoplacement]': 'autoPlacement()',
|
|
36
|
+
'[attr.popover]': 'popover()',
|
|
37
|
+
},
|
|
38
|
+
}]
|
|
39
|
+
}], propDecorators: { autoPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlacement", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-placement", required: false }] }], popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }] } });
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Generated bundle index. Do not edit.
|
|
43
|
+
*/
|
|
44
|
+
|
|
45
|
+
export { Popover };
|
|
46
|
+
//# sourceMappingURL=ks-digital-designsystem-angular-popover.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-popover.mjs","sources":["../../../../packages/angular/popover/src/popover.ts","../../../../packages/angular/popover/src/ks-digital-designsystem-angular-popover.ts"],"sourcesContent":["import { booleanAttribute, Directive, input } from '@angular/core'\nimport '@digdir/designsystemet-web/popover'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: '[ksd-popover]',\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-popover',\n '[attr.data-variant]': 'variant()',\n '[attr.data-placement]': 'placement()',\n '[attr.data-autoplacement]': 'autoPlacement()',\n '[attr.popover]': 'popover()',\n },\n})\nexport class Popover {\n readonly autoPlacement = input(true, { transform: booleanAttribute })\n readonly variant = input<'tinted' | 'default'>('default', {\n alias: 'data-variant',\n })\n\n // Todo: replace with centralized types\n readonly placement = input<\n | 'bottom'\n | 'bottom-end'\n | 'bottom-start'\n | 'left'\n | 'left-end'\n | 'left-start'\n | 'right'\n | 'right-end'\n | 'right-start'\n | 'top'\n | 'top-end'\n | 'top-start'\n >('top', { alias: 'data-placement' })\n\n readonly popover = input<'auto' | 'manual'>('auto', { alias: 'popover' })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MA4Ba,OAAO,CAAA;IACT,aAAa,GAAG,KAAK,CAAC,IAAI,qFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAC5D,OAAO,GAAG,KAAK,CAAuB,SAAS,+EACtD,KAAK,EAAE,cAAc,EAAA,CACrB;;IAGO,SAAS,GAAG,KAAK,CAaxB,KAAK,iFAAI,KAAK,EAAE,gBAAgB,EAAA,CAAG;IAE5B,OAAO,GAAG,KAAK,CAAoB,MAAM,+EAAI,KAAK,EAAE,SAAS,EAAA,CAAG;uGAtB9D,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAP,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,aAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,WAAA,EAAA,EAAA,cAAA,EAAA,YAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,SAAA,EAAA,EAAA,CAAA,SAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAP,OAAO,EAAA,UAAA,EAAA,CAAA;kBArBnB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAET,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,cAAc,EAAE;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;AACF,qBAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,YAAY;AACnB,wBAAA,qBAAqB,EAAE,WAAW;AAClC,wBAAA,uBAAuB,EAAE,aAAa;AACtC,wBAAA,2BAA2B,EAAE,iBAAiB;AAC9C,wBAAA,gBAAgB,EAAE,WAAW;AAC9B,qBAAA;AACF,iBAAA;;;AC3BD;;AAEG;;;;"}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Directive, contentChild, afterNextRender, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, input } from '@angular/core';
|
|
3
|
+
import '@digdir/designsystemet-web';
|
|
4
|
+
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
5
|
+
import { logIfDevMode, HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Search input
|
|
9
|
+
*
|
|
10
|
+
* Used within Search to provide a search input.
|
|
11
|
+
*/
|
|
12
|
+
class SearchInput {
|
|
13
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SearchInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
14
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: SearchInput, isStandalone: true, selector: "input[ksd-search-input]", host: { attributes: { "type": "search" }, classAttribute: "ds-input" }, ngImport: i0 });
|
|
15
|
+
}
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SearchInput, decorators: [{
|
|
17
|
+
type: Directive,
|
|
18
|
+
args: [{
|
|
19
|
+
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
20
|
+
selector: 'input[ksd-search-input]',
|
|
21
|
+
host: {
|
|
22
|
+
class: 'ds-input',
|
|
23
|
+
type: 'search',
|
|
24
|
+
},
|
|
25
|
+
}]
|
|
26
|
+
}] });
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Search Component
|
|
30
|
+
*
|
|
31
|
+
* Use to contain the search input and buttons.
|
|
32
|
+
* Only `SearchInput` is required, while `SearchClear` and `SearchButton` are optional.
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* <div ksd-search>
|
|
36
|
+
* <input ksd-search-input />
|
|
37
|
+
* <button ksd-search-clear></button>
|
|
38
|
+
* <button ksd-search-button></button>
|
|
39
|
+
* </div>
|
|
40
|
+
*/
|
|
41
|
+
class Search {
|
|
42
|
+
input = contentChild(SearchInput, ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
|
|
43
|
+
constructor() {
|
|
44
|
+
afterNextRender(() => {
|
|
45
|
+
if (!this.input()) {
|
|
46
|
+
logIfDevMode({
|
|
47
|
+
component: 'Search',
|
|
48
|
+
message: 'Missing required elements: ksd-search-input must be provided as child. Check imports and markup.',
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Search, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
54
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Search, isStandalone: true, selector: "ksd-search", queries: [{ propertyName: "input", first: true, predicate: SearchInput, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
|
|
55
|
+
@if (true) {
|
|
56
|
+
<ds-suggestion class="ds-search">
|
|
57
|
+
<ng-content select="[ksd-search-input]" />
|
|
58
|
+
<ng-content select="[ksd-search-clear]" />
|
|
59
|
+
<ng-content select="[ksd-search-button]" />
|
|
60
|
+
</ds-suggestion>
|
|
61
|
+
}
|
|
62
|
+
`, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
63
|
+
}
|
|
64
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Search, decorators: [{
|
|
65
|
+
type: Component,
|
|
66
|
+
args: [{ selector: 'ksd-search', changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
|
|
67
|
+
@if (true) {
|
|
68
|
+
<ds-suggestion class="ds-search">
|
|
69
|
+
<ng-content select="[ksd-search-input]" />
|
|
70
|
+
<ng-content select="[ksd-search-clear]" />
|
|
71
|
+
<ng-content select="[ksd-search-button]" />
|
|
72
|
+
</ds-suggestion>
|
|
73
|
+
}
|
|
74
|
+
`, hostDirectives: [
|
|
75
|
+
{
|
|
76
|
+
directive: HostSize,
|
|
77
|
+
inputs: ['data-size'],
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
directive: HostColor,
|
|
81
|
+
inputs: ['data-color'],
|
|
82
|
+
},
|
|
83
|
+
], styles: [":host{display:block}\n"] }]
|
|
84
|
+
}], ctorParameters: () => [], propDecorators: { input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SearchInput), { isSignal: true }] }] } });
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* Search button
|
|
88
|
+
*
|
|
89
|
+
* Used within Search to provide a submit button.
|
|
90
|
+
*
|
|
91
|
+
* @param {('primary' | 'secondary')} [variant] - Specify which button variant to use
|
|
92
|
+
* @param {string} [aria-label] - Aria label for the button
|
|
93
|
+
*
|
|
94
|
+
*/
|
|
95
|
+
class SearchButton {
|
|
96
|
+
/**
|
|
97
|
+
* Specify which button variant to use
|
|
98
|
+
*
|
|
99
|
+
* @default 'primary'
|
|
100
|
+
*/
|
|
101
|
+
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
102
|
+
/**
|
|
103
|
+
* Aria label for the button
|
|
104
|
+
*/
|
|
105
|
+
ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
|
|
106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SearchButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
107
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: SearchButton, isStandalone: true, selector: "button[ksd-search-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "submit" }, properties: { "attr.aria-label": "this.ariaLabel() || null", "attr.data-variant": "this.variant()" }, classAttribute: "ds-button" }, ngImport: i0 });
|
|
108
|
+
}
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SearchButton, decorators: [{
|
|
110
|
+
type: Directive,
|
|
111
|
+
args: [{
|
|
112
|
+
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
113
|
+
selector: 'button[ksd-search-button]',
|
|
114
|
+
host: {
|
|
115
|
+
class: 'ds-button',
|
|
116
|
+
type: 'submit',
|
|
117
|
+
'[attr.aria-label]': 'this.ariaLabel() || null',
|
|
118
|
+
'[attr.data-variant]': 'this.variant()',
|
|
119
|
+
},
|
|
120
|
+
}]
|
|
121
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
|
|
122
|
+
|
|
123
|
+
/**
|
|
124
|
+
* Search clear button
|
|
125
|
+
*
|
|
126
|
+
* Used within Search to provide a clear button.
|
|
127
|
+
* ds-suggestion clears and refocuses the input, and fires an `input` event on it.
|
|
128
|
+
*
|
|
129
|
+
* @param {string} [aria-label] - Aria label for the button.
|
|
130
|
+
*/
|
|
131
|
+
class SearchClear {
|
|
132
|
+
/**
|
|
133
|
+
* Aria label for the button
|
|
134
|
+
* @default 'Tøm'
|
|
135
|
+
*/
|
|
136
|
+
ariaLabel = input('Tøm', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
|
|
137
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SearchClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
138
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: SearchClear, isStandalone: true, selector: "button[ksd-search-clear]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "reset" }, properties: { "attr.data-variant": "'tertiary'", "attr.aria-label": "this.ariaLabel()" }, classAttribute: "ds-button" }, ngImport: i0 });
|
|
139
|
+
}
|
|
140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SearchClear, decorators: [{
|
|
141
|
+
type: Directive,
|
|
142
|
+
args: [{
|
|
143
|
+
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
144
|
+
selector: 'button[ksd-search-clear]',
|
|
145
|
+
host: {
|
|
146
|
+
class: 'ds-button',
|
|
147
|
+
type: 'reset',
|
|
148
|
+
'[attr.data-variant]': "'tertiary'",
|
|
149
|
+
'[attr.aria-label]': 'this.ariaLabel()',
|
|
150
|
+
},
|
|
151
|
+
}]
|
|
152
|
+
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* Generated bundle index. Do not edit.
|
|
156
|
+
*/
|
|
157
|
+
|
|
158
|
+
export { Search, SearchButton, SearchClear, SearchInput };
|
|
159
|
+
//# sourceMappingURL=ks-digital-designsystem-angular-search.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-search.mjs","sources":["../../../../packages/angular/search/src/search-input.ts","../../../../packages/angular/search/src/search.ts","../../../../packages/angular/search/src/search-button.ts","../../../../packages/angular/search/src/search-clear.ts","../../../../packages/angular/search/src/ks-digital-designsystem-angular-search.ts"],"sourcesContent":["import { Directive } from '@angular/core'\n\n/**\n * Search input\n *\n * Used within Search to provide a search input.\n */\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'input[ksd-search-input]',\n host: {\n class: 'ds-input',\n type: 'search',\n },\n})\nexport class SearchInput {}\n","import {\n afterNextRender,\n ChangeDetectionStrategy,\n Component,\n contentChild,\n CUSTOM_ELEMENTS_SCHEMA,\n} from '@angular/core'\n// Main entrypoint on purpose: u-datalist, which ds-suggestion filtering needs, has no subpath export\nimport '@digdir/designsystemet-web'\nimport {\n HostColor,\n HostSize,\n logIfDevMode,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { SearchInput } from './search-input'\n\n/**\n * Search Component\n *\n * Use to contain the search input and buttons.\n * Only `SearchInput` is required, while `SearchClear` and `SearchButton` are optional.\n *\n * @example\n * <div ksd-search>\n * <input ksd-search-input />\n * <button ksd-search-clear></button>\n * <button ksd-search-button></button>\n * </div>\n */\n@Component({\n selector: 'ksd-search',\n changeDetection: ChangeDetectionStrategy.OnPush,\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n styles: `\n :host {\n display: block;\n }\n `,\n // ds-suggestion hides the clear button while the input is empty, but only reads its\n // children on connect. The @if builds this as an embedded view, so it is inserted\n // with the projected content already in place - do not inline it.\n template: `\n @if (true) {\n <ds-suggestion class=\"ds-search\">\n <ng-content select=\"[ksd-search-input]\" />\n <ng-content select=\"[ksd-search-clear]\" />\n <ng-content select=\"[ksd-search-button]\" />\n </ds-suggestion>\n }\n `,\n hostDirectives: [\n {\n directive: HostSize,\n inputs: ['data-size'],\n },\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n})\nexport class Search {\n private readonly input = contentChild(SearchInput)\n\n constructor() {\n afterNextRender(() => {\n if (!this.input()) {\n logIfDevMode({\n component: 'Search',\n message:\n 'Missing required elements: ksd-search-input must be provided as child. Check imports and markup.',\n })\n }\n })\n }\n}\n","import { Directive, input } from '@angular/core'\n\n/**\n * Search button\n *\n * Used within Search to provide a submit button.\n *\n * @param {('primary' | 'secondary')} [variant] - Specify which button variant to use\n * @param {string} [aria-label] - Aria label for the button\n *\n */\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'button[ksd-search-button]',\n host: {\n class: 'ds-button',\n type: 'submit',\n '[attr.aria-label]': 'this.ariaLabel() || null',\n '[attr.data-variant]': 'this.variant()',\n },\n})\nexport class SearchButton {\n /**\n * Specify which button variant to use\n *\n * @default 'primary'\n */\n readonly variant = input<'primary' | 'secondary'>('primary')\n\n /**\n * Aria label for the button\n */\n readonly ariaLabel = input('', { alias: 'aria-label' })\n}\n","import { Directive, input } from '@angular/core'\n\n/**\n * Search clear button\n *\n * Used within Search to provide a clear button.\n * ds-suggestion clears and refocuses the input, and fires an `input` event on it.\n *\n * @param {string} [aria-label] - Aria label for the button.\n */\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'button[ksd-search-clear]',\n host: {\n class: 'ds-button',\n type: 'reset',\n '[attr.data-variant]': \"'tertiary'\",\n '[attr.aria-label]': 'this.ariaLabel()',\n },\n})\nexport class SearchClear {\n /**\n * Aria label for the button\n * @default 'Tøm'\n */\n readonly ariaLabel = input('Tøm', { alias: 'aria-label' })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Skeleton is used to represent a draft of a page while the content loads.
|
|
6
|
+
*/
|
|
7
|
+
class Skeleton {
|
|
8
|
+
/**
|
|
9
|
+
* Specify which variant to use
|
|
10
|
+
* @default 'rectangle'
|
|
11
|
+
*/
|
|
12
|
+
variant = input('rectangle', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), alias: 'data-variant' });
|
|
13
|
+
isText = computed(() => this.variant() === 'text', ...(ngDevMode ? [{ debugName: "isText" }] : /* istanbul ignore next */ []));
|
|
14
|
+
dataText = computed(() => {
|
|
15
|
+
return this.isText() ? '-' : null;
|
|
16
|
+
}, ...(ngDevMode ? [{ debugName: "dataText" }] : /* istanbul ignore next */ []));
|
|
17
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Skeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: Skeleton, isStandalone: true, selector: "ksd-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "data-variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-variant": "variant()", "attr.data-text": "dataText()" }, classAttribute: "ds-skeleton" }, ngImport: i0, template: ` <ng-content />`, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19
|
+
}
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Skeleton, decorators: [{
|
|
21
|
+
type: Component,
|
|
22
|
+
args: [{ selector: 'ksd-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: ` <ng-content />`, host: {
|
|
23
|
+
class: 'ds-skeleton',
|
|
24
|
+
'[attr.data-variant]': 'variant()',
|
|
25
|
+
'[attr.data-text]': 'dataText()',
|
|
26
|
+
'aria-hidden': 'true',
|
|
27
|
+
}, styles: [":host{display:block}\n"] }]
|
|
28
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-variant", required: false }] }] } });
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Generated bundle index. Do not edit.
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
export { Skeleton };
|
|
35
|
+
//# sourceMappingURL=ks-digital-designsystem-angular-skeleton.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-skeleton.mjs","sources":["../../../../packages/angular/skeleton/src/skeleton.ts","../../../../packages/angular/skeleton/src/ks-digital-designsystem-angular-skeleton.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n} from '@angular/core'\n\n/**\n * Skeleton is used to represent a draft of a page while the content loads.\n */\n@Component({\n selector: 'ksd-skeleton',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: ` <ng-content />`,\n host: {\n class: 'ds-skeleton',\n '[attr.data-variant]': 'variant()',\n '[attr.data-text]': 'dataText()',\n 'aria-hidden': 'true',\n },\n styles: `\n :host {\n display: block;\n }\n `,\n})\nexport class Skeleton {\n /**\n * Specify which variant to use\n * @default 'rectangle'\n */\n readonly variant = input<'rectangle' | 'circle' | 'text'>('rectangle', {\n alias: 'data-variant',\n })\n\n readonly isText = computed(() => this.variant() === 'text')\n\n readonly dataText = computed(() => {\n return this.isText() ? '-' : null\n })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAOA;;AAEG;MAiBU,QAAQ,CAAA;AACnB;;;AAGG;IACM,OAAO,GAAG,KAAK,CAAkC,WAAW,+EACnE,KAAK,EAAE,cAAc,EAAA,CACrB;AAEO,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,KAAK,MAAM,6EAAC;AAElD,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAChC,QAAA,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,GAAG,IAAI;AACnC,IAAA,CAAC,+EAAC;uGAbS,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,yXAbT,CAAA,eAAA,CAAiB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAahB,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAhBpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,mBACP,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,iBAAiB,EAAA,IAAA,EACrB;AACJ,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,qBAAqB,EAAE,WAAW;AAClC,wBAAA,kBAAkB,EAAE,YAAY;AAChC,wBAAA,aAAa,EAAE,MAAM;AACtB,qBAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;ACnBH;;AAEG;;;;"}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
4
|
+
import { logIfDevMode, HostColor } from '@ks-digital/designsystem-angular/__internals';
|
|
5
|
+
|
|
6
|
+
class Spinner {
|
|
7
|
+
/**
|
|
8
|
+
* Aria-label for the spinner
|
|
9
|
+
*/
|
|
10
|
+
ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
|
|
11
|
+
/**
|
|
12
|
+
* Aria-hidden for the spinner
|
|
13
|
+
*/
|
|
14
|
+
ariaHidden = input(undefined, { ...(ngDevMode ? { debugName: "ariaHidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute,
|
|
15
|
+
alias: 'aria-hidden' });
|
|
16
|
+
constructor() {
|
|
17
|
+
effect(() => {
|
|
18
|
+
if (this.ariaLabel() === undefined && !this.ariaHidden()) {
|
|
19
|
+
logIfDevMode({
|
|
20
|
+
component: 'ksd-spinner',
|
|
21
|
+
message: 'Either `aria-label` or `aria-hidden` must be provided.',
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Changes size for descendant Designsystemet components. Select from predefined sizes.
|
|
28
|
+
* @attribute data-size
|
|
29
|
+
*/
|
|
30
|
+
dataSize = input(undefined, { ...(ngDevMode ? { debugName: "dataSize" } : /* istanbul ignore next */ {}), alias: 'data-size' });
|
|
31
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: Spinner, isStandalone: true, selector: "ksd-spinner", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null }, dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "null", "attr.aria-hidden": "null" } }, hostDirectives: [{ directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
|
|
33
|
+
<svg
|
|
34
|
+
class="ds-spinner"
|
|
35
|
+
role="img"
|
|
36
|
+
viewBox="0 0 50 50"
|
|
37
|
+
[attr.data-size]="dataSize()"
|
|
38
|
+
[attr.aria-label]="ariaLabel()"
|
|
39
|
+
[attr.aria-hidden]="ariaHidden() || undefined"
|
|
40
|
+
>
|
|
41
|
+
<circle
|
|
42
|
+
class="ds-spinner__background"
|
|
43
|
+
cx="25"
|
|
44
|
+
cy="25"
|
|
45
|
+
r="20"
|
|
46
|
+
fill="none"
|
|
47
|
+
stroke-width="5"
|
|
48
|
+
/>
|
|
49
|
+
<circle
|
|
50
|
+
class="ds-spinner__circle"
|
|
51
|
+
cx="25"
|
|
52
|
+
cy="25"
|
|
53
|
+
r="20"
|
|
54
|
+
fill="none"
|
|
55
|
+
stroke-width="5"
|
|
56
|
+
/>
|
|
57
|
+
</svg>
|
|
58
|
+
`, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
59
|
+
}
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Spinner, decorators: [{
|
|
61
|
+
type: Component,
|
|
62
|
+
args: [{ selector: 'ksd-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
63
|
+
<svg
|
|
64
|
+
class="ds-spinner"
|
|
65
|
+
role="img"
|
|
66
|
+
viewBox="0 0 50 50"
|
|
67
|
+
[attr.data-size]="dataSize()"
|
|
68
|
+
[attr.aria-label]="ariaLabel()"
|
|
69
|
+
[attr.aria-hidden]="ariaHidden() || undefined"
|
|
70
|
+
>
|
|
71
|
+
<circle
|
|
72
|
+
class="ds-spinner__background"
|
|
73
|
+
cx="25"
|
|
74
|
+
cy="25"
|
|
75
|
+
r="20"
|
|
76
|
+
fill="none"
|
|
77
|
+
stroke-width="5"
|
|
78
|
+
/>
|
|
79
|
+
<circle
|
|
80
|
+
class="ds-spinner__circle"
|
|
81
|
+
cx="25"
|
|
82
|
+
cy="25"
|
|
83
|
+
r="20"
|
|
84
|
+
fill="none"
|
|
85
|
+
stroke-width="5"
|
|
86
|
+
/>
|
|
87
|
+
</svg>
|
|
88
|
+
`, host: {
|
|
89
|
+
'[attr.aria-label]': 'null',
|
|
90
|
+
'[attr.aria-hidden]': 'null',
|
|
91
|
+
}, hostDirectives: [
|
|
92
|
+
{
|
|
93
|
+
directive: HostColor,
|
|
94
|
+
inputs: ['data-color'],
|
|
95
|
+
},
|
|
96
|
+
], styles: [":host{display:contents}\n"] }]
|
|
97
|
+
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }], dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }] } });
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Generated bundle index. Do not edit.
|
|
101
|
+
*/
|
|
102
|
+
|
|
103
|
+
export { Spinner };
|
|
104
|
+
//# sourceMappingURL=ks-digital-designsystem-angular-spinner.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-spinner.mjs","sources":["../../../../packages/angular/spinner/src/spinner.ts","../../../../packages/angular/spinner/src/ks-digital-designsystem-angular-spinner.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n effect,\n input,\n} from '@angular/core'\nimport {\n HostColor,\n logIfDevMode,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { SpinnerSize } from './spinner-sizes'\n\n@Component({\n selector: 'ksd-spinner',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: `\n :host {\n display: contents;\n }\n `,\n template: `\n <svg\n class=\"ds-spinner\"\n role=\"img\"\n viewBox=\"0 0 50 50\"\n [attr.data-size]=\"dataSize()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-hidden]=\"ariaHidden() || undefined\"\n >\n <circle\n class=\"ds-spinner__background\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n fill=\"none\"\n stroke-width=\"5\"\n />\n <circle\n class=\"ds-spinner__circle\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n fill=\"none\"\n stroke-width=\"5\"\n />\n </svg>\n `,\n host: {\n '[attr.aria-label]': 'null',\n '[attr.aria-hidden]': 'null',\n },\n hostDirectives: [\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n})\nexport class Spinner {\n /**\n * Aria-label for the spinner\n */\n readonly ariaLabel = input<string>(undefined, { alias: 'aria-label' })\n\n /**\n * Aria-hidden for the spinner\n */\n readonly ariaHidden = input(undefined, {\n transform: booleanAttribute,\n alias: 'aria-hidden',\n })\n\n constructor() {\n effect(() => {\n if (this.ariaLabel() === undefined && !this.ariaHidden()) {\n logIfDevMode({\n component: 'ksd-spinner',\n message: 'Either `aria-label` or `aria-hidden` must be provided.',\n })\n }\n })\n }\n\n /**\n * Changes size for descendant Designsystemet components. Select from predefined sizes.\n * @attribute data-size\n */\n readonly dataSize = input<SpinnerSize>(undefined, {\n alias: 'data-size',\n })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MA2Da,OAAO,CAAA;AAClB;;AAEG;IACM,SAAS,GAAG,KAAK,CAAS,SAAS,iFAAI,KAAK,EAAE,YAAY,EAAA,CAAG;AAEtE;;AAEG;AACM,IAAA,UAAU,GAAG,KAAK,CAAC,SAAS,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,YAAA,EAAA,8BAAA,EAAA,CAAA,EACnC,SAAS,EAAE,gBAAgB;QAC3B,KAAK,EAAE,aAAa,EAAA,CACpB;AAEF,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE;AACxD,gBAAA,YAAY,CAAC;AACX,oBAAA,SAAS,EAAE,aAAa;AACxB,oBAAA,OAAO,EAAE,wDAAwD;AAClE,iBAAA,CAAC;YACJ;AACF,QAAA,CAAC,CAAC;IACJ;AAEA;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAAc,SAAS,gFAC9C,KAAK,EAAE,WAAW,EAAA,CAClB;uGA/BS,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,SAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAtCR;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAYU,OAAO,EAAA,UAAA,EAAA,CAAA;kBA9CnB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,eAAA,EACN,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAMrC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BT,EAAA,IAAA,EACK;AACJ,wBAAA,mBAAmB,EAAE,MAAM;AAC3B,wBAAA,oBAAoB,EAAE,MAAM;qBAC7B,EAAA,cAAA,EACe;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,SAAS;4BACpB,MAAM,EAAE,CAAC,YAAY,CAAC;AACvB,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,CAAA,EAAA;;;ACzDH;;AAEG;;;;"}
|