@ks-digital/designsystem-angular 0.0.1-alpha.42 → 0.0.1-alpha.43
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-__internals.mjs +0 -1
- package/fesm2022/ks-digital-designsystem-angular-__internals.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-breadcrumbs.mjs +30 -8
- package/fesm2022/ks-digital-designsystem-angular-breadcrumbs.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-button.mjs +0 -1
- package/fesm2022/ks-digital-designsystem-angular-button.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-card.mjs +34 -23
- package/fesm2022/ks-digital-designsystem-angular-card.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-chip.mjs +0 -1
- package/fesm2022/ks-digital-designsystem-angular-chip.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-details.mjs +16 -49
- package/fesm2022/ks-digital-designsystem-angular-details.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-forms.mjs +75 -291
- package/fesm2022/ks-digital-designsystem-angular-forms.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-heading.mjs +0 -1
- package/fesm2022/ks-digital-designsystem-angular-heading.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-pagination.mjs +114 -7
- package/fesm2022/ks-digital-designsystem-angular-pagination.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-popover.mjs +13 -117
- package/fesm2022/ks-digital-designsystem-angular-popover.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-search.mjs +0 -3
- package/fesm2022/ks-digital-designsystem-angular-search.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-spinner.mjs +0 -1
- package/fesm2022/ks-digital-designsystem-angular-spinner.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-tag.mjs +0 -1
- package/fesm2022/ks-digital-designsystem-angular-tag.mjs.map +1 -1
- package/package.json +2 -3
- package/types/ks-digital-designsystem-angular-breadcrumbs.d.ts +5 -1
- package/types/ks-digital-designsystem-angular-card.d.ts +6 -4
- package/types/ks-digital-designsystem-angular-details.d.ts +2 -7
- package/types/ks-digital-designsystem-angular-forms.d.ts +3 -33
- package/types/ks-digital-designsystem-angular-pagination.d.ts +53 -4
- package/types/ks-digital-designsystem-angular-popover.d.ts +2 -12
|
@@ -1,17 +1,98 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component } 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';
|
|
3
4
|
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
4
5
|
import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
|
|
5
6
|
|
|
6
7
|
class Pagination {
|
|
8
|
+
/**
|
|
9
|
+
* The current page
|
|
10
|
+
*/
|
|
11
|
+
current = input.required({ ...(ngDevMode ? { debugName: "current" } : {}), transform: numberAttribute });
|
|
12
|
+
/**
|
|
13
|
+
* The total number of pages
|
|
14
|
+
*/
|
|
15
|
+
total = input.required({ ...(ngDevMode ? { debugName: "total" } : {}), transform: numberAttribute });
|
|
16
|
+
/**
|
|
17
|
+
* Sets the screen reader label for the pagination
|
|
18
|
+
*/
|
|
19
|
+
ariaLabel = input('Bla i sider', { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
|
|
20
|
+
/**
|
|
21
|
+
* How many pages to show. Default is 7
|
|
22
|
+
*/
|
|
23
|
+
show = input(7, { ...(ngDevMode ? { debugName: "show" } : {}), 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" }] : []));
|
|
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" }] : []));
|
|
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
|
+
}
|
|
7
64
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
65
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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 });
|
|
9
77
|
}
|
|
10
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Pagination, decorators: [{
|
|
11
79
|
type: Component,
|
|
12
80
|
args: [{
|
|
13
|
-
selector: '
|
|
14
|
-
|
|
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
|
+
`,
|
|
15
96
|
hostDirectives: [
|
|
16
97
|
{
|
|
17
98
|
directive: HostSize,
|
|
@@ -22,15 +103,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
22
103
|
inputs: ['data-color'],
|
|
23
104
|
},
|
|
24
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.0.6", ngImport: i0, type: PaginationButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
126
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: PaginationButton, isStandalone: true, selector: "[ksdPaginationButton]", host: { classAttribute: "ds-button" }, ngImport: i0 });
|
|
127
|
+
}
|
|
128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationButton, decorators: [{
|
|
129
|
+
type: Directive,
|
|
130
|
+
args: [{
|
|
131
|
+
selector: '[ksdPaginationButton]',
|
|
25
132
|
host: {
|
|
26
|
-
class: 'ds-
|
|
133
|
+
class: 'ds-button',
|
|
27
134
|
},
|
|
28
135
|
}]
|
|
29
|
-
}] });
|
|
136
|
+
}], ctorParameters: () => [] });
|
|
30
137
|
|
|
31
138
|
/**
|
|
32
139
|
* Generated bundle index. Do not edit.
|
|
33
140
|
*/
|
|
34
141
|
|
|
35
|
-
export { Pagination };
|
|
142
|
+
export { Pagination, PaginationButton };
|
|
36
143
|
//# sourceMappingURL=ks-digital-designsystem-angular-pagination.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ks-digital-designsystem-angular-pagination.mjs","sources":["../../../../packages/angular/pagination/src/pagination.ts","../../../../packages/angular/pagination/src/ks-digital-designsystem-angular-pagination.ts"],"sourcesContent":["import {
|
|
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'\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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"}
|
|
@@ -1,130 +1,27 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute,
|
|
3
|
-
import
|
|
2
|
+
import { input, booleanAttribute, Component } from '@angular/core';
|
|
3
|
+
import '@digdir/designsystemet-web';
|
|
4
4
|
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
5
5
|
import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
|
|
6
6
|
|
|
7
7
|
class Popover {
|
|
8
|
-
// use popoverId instead of id since id will be put on the angular element and not the popover-div
|
|
9
8
|
popoverId = input.required(...(ngDevMode ? [{ debugName: "popoverId" }] : []));
|
|
10
|
-
placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : []));
|
|
11
9
|
autoPlacement = input(true, { ...(ngDevMode ? { debugName: "autoPlacement" } : {}), transform: booleanAttribute });
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
the naming here is different from Designsystemet
|
|
16
|
-
since we need to use outputs for onOpen and onClose
|
|
17
|
-
*/
|
|
18
|
-
triggeredClose = output();
|
|
19
|
-
triggeredOpen = output();
|
|
20
|
-
internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "internalOpen" }] : []));
|
|
21
|
-
controlledOpen = computed(() => this.open() ?? this.internalOpen(), ...(ngDevMode ? [{ debugName: "controlledOpen" }] : []));
|
|
22
|
-
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
23
|
-
popoverRef = viewChild('myPopover', ...(ngDevMode ? [{ debugName: "popoverRef" }] : []));
|
|
24
|
-
// enable controlled component
|
|
25
|
-
controlledComponent = effect((onCleanup) => {
|
|
26
|
-
const popover = this.popoverRef()?.nativeElement;
|
|
27
|
-
const handleClick = (event) => {
|
|
28
|
-
const el = event.target;
|
|
29
|
-
const isTrigger = el?.closest?.(`[popovertarget="${this.popoverId()}"]`);
|
|
30
|
-
const isOutside = !isTrigger && !popover?.contains(el);
|
|
31
|
-
if (isTrigger) {
|
|
32
|
-
event.preventDefault(); // Prevent native Popover API
|
|
33
|
-
this.internalOpen.update((open) => !open);
|
|
34
|
-
this.triggeredOpen.emit();
|
|
35
|
-
}
|
|
36
|
-
if (isOutside) {
|
|
37
|
-
this.internalOpen.set(false);
|
|
38
|
-
this.triggeredClose.emit();
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
const handleKeydown = (event) => {
|
|
42
|
-
if (event.key !== 'Escape' || !this.controlledOpen())
|
|
43
|
-
return;
|
|
44
|
-
event.preventDefault(); // Prevent closing fullscreen in Safari
|
|
45
|
-
this.internalOpen.set(false);
|
|
46
|
-
this.triggeredClose.emit();
|
|
47
|
-
};
|
|
48
|
-
popover?.togglePopover?.(this.controlledOpen());
|
|
49
|
-
document.addEventListener('click', handleClick, true); // Use capture to execute before React event API
|
|
50
|
-
document.addEventListener('keydown', handleKeydown);
|
|
51
|
-
onCleanup(() => {
|
|
52
|
-
document.removeEventListener('click', handleClick, true);
|
|
53
|
-
document.removeEventListener('keydown', handleKeydown);
|
|
54
|
-
});
|
|
55
|
-
}, { ...(ngDevMode ? { debugName: "controlledComponent" } : {}) });
|
|
56
|
-
positionPopover = effect(() => {
|
|
57
|
-
const popover = this.popoverRef()?.nativeElement;
|
|
58
|
-
const trigger = document.querySelector(`[popovertarget="${this.popoverId()}"]`);
|
|
59
|
-
const placement = this.placement();
|
|
60
|
-
if (popover && trigger && this.controlledOpen()) {
|
|
61
|
-
autoUpdate(trigger, popover, () => {
|
|
62
|
-
computePosition(trigger, popover, {
|
|
63
|
-
placement,
|
|
64
|
-
strategy: 'fixed',
|
|
65
|
-
middleware: [
|
|
66
|
-
offset((data) => {
|
|
67
|
-
// get pseudo element arrow size
|
|
68
|
-
const styles = getComputedStyle(data.elements.floating, '::before');
|
|
69
|
-
return parseFloat(styles.height);
|
|
70
|
-
}),
|
|
71
|
-
...(this.autoPlacement()
|
|
72
|
-
? [flip({ fallbackAxisSideDirection: 'start' }), shift()]
|
|
73
|
-
: []),
|
|
74
|
-
this.arrowPseudoElement,
|
|
75
|
-
],
|
|
76
|
-
}).then(({ x, y }) => {
|
|
77
|
-
popover.style.translate = `${x}px ${y}px`;
|
|
78
|
-
});
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
}, { ...(ngDevMode ? { debugName: "positionPopover" } : {}) });
|
|
82
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
83
|
-
arrowPseudoElement = {
|
|
84
|
-
name: 'ArrowPseudoElement',
|
|
85
|
-
fn(data) {
|
|
86
|
-
const { elements, rects, placement } = data;
|
|
87
|
-
let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
|
|
88
|
-
let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
|
|
89
|
-
if (rects.reference.width > rects.floating.width) {
|
|
90
|
-
arrowX = `${Math.round(rects.floating.width / 2)}px`;
|
|
91
|
-
}
|
|
92
|
-
if (rects.reference.height > rects.floating.height) {
|
|
93
|
-
arrowY = `${Math.round(rects.floating.height / 2)}px`;
|
|
94
|
-
}
|
|
95
|
-
switch (placement.split('-')[0]) {
|
|
96
|
-
case 'top':
|
|
97
|
-
arrowY = '100%';
|
|
98
|
-
break;
|
|
99
|
-
case 'right':
|
|
100
|
-
arrowX = '0';
|
|
101
|
-
break;
|
|
102
|
-
case 'bottom':
|
|
103
|
-
arrowY = '0';
|
|
104
|
-
break;
|
|
105
|
-
case 'left':
|
|
106
|
-
arrowX = '100%';
|
|
107
|
-
break;
|
|
108
|
-
}
|
|
109
|
-
elements.floating.setAttribute('data-placement', placement.split('-')[0]); // We only need top/left/right/bottom
|
|
110
|
-
elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX);
|
|
111
|
-
elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY);
|
|
112
|
-
return data;
|
|
113
|
-
},
|
|
114
|
-
};
|
|
10
|
+
variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : {}), alias: 'data-variant' });
|
|
11
|
+
// Todo: replace with centralized types
|
|
12
|
+
placement = input('top', { ...(ngDevMode ? { debugName: "placement" } : {}), alias: 'data-placement' });
|
|
115
13
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Popover, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
14
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: Popover, isStandalone: true, selector: "ksd-popover", inputs: { popoverId: { classPropertyName: "popoverId", publicName: "popoverId", isSignal: true, isRequired: true, transformFunction: null }, 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 } }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
|
|
117
15
|
<div
|
|
118
|
-
#myPopover
|
|
119
16
|
popover="manual"
|
|
120
17
|
class="ds-popover"
|
|
121
18
|
data-testid="popover"
|
|
122
19
|
[id]="popoverId()"
|
|
123
20
|
[attr.data-variant]="variant()"
|
|
21
|
+
[attr.data-placement]="placement()"
|
|
22
|
+
[attr.data-autoplacement]="autoPlacement()"
|
|
124
23
|
>
|
|
125
|
-
|
|
126
|
-
<ng-content />
|
|
127
|
-
}
|
|
24
|
+
<ng-content />
|
|
128
25
|
</div>
|
|
129
26
|
`, isInline: true });
|
|
130
27
|
}
|
|
@@ -144,20 +41,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
144
41
|
],
|
|
145
42
|
template: `
|
|
146
43
|
<div
|
|
147
|
-
#myPopover
|
|
148
44
|
popover="manual"
|
|
149
45
|
class="ds-popover"
|
|
150
46
|
data-testid="popover"
|
|
151
47
|
[id]="popoverId()"
|
|
152
48
|
[attr.data-variant]="variant()"
|
|
49
|
+
[attr.data-placement]="placement()"
|
|
50
|
+
[attr.data-autoplacement]="autoPlacement()"
|
|
153
51
|
>
|
|
154
|
-
|
|
155
|
-
<ng-content />
|
|
156
|
-
}
|
|
52
|
+
<ng-content />
|
|
157
53
|
</div>
|
|
158
54
|
`,
|
|
159
55
|
}]
|
|
160
|
-
}], propDecorators: { popoverId: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverId", required: true }] }],
|
|
56
|
+
}], propDecorators: { popoverId: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverId", required: true }] }], 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 }] }] } });
|
|
161
57
|
|
|
162
58
|
/**
|
|
163
59
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +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 {\n booleanAttribute,\n Component,\n computed,\n effect,\n ElementRef,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core'\nimport {\n autoUpdate,\n computePosition,\n flip,\n MiddlewareState,\n offset,\n Placement,\n shift,\n} from '@floating-ui/dom'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\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 template: `\n <div\n #myPopover\n popover=\"manual\"\n class=\"ds-popover\"\n data-testid=\"popover\"\n [id]=\"popoverId()\"\n [attr.data-variant]=\"variant()\"\n >\n @if (controlledOpen()) {\n <ng-content />\n }\n </div>\n `,\n})\nexport class Popover {\n // use popoverId instead of id since id will be put on the angular element and not the popover-div\n readonly popoverId = input.required<string>()\n readonly placement = input<Placement>('top')\n readonly autoPlacement = input(true, { transform: booleanAttribute })\n\n // for controlled component\n readonly open = input(undefined, { transform: booleanAttribute })\n /*\n the naming here is different from Designsystemet\n since we need to use outputs for onOpen and onClose\n */\n readonly triggeredClose = output()\n readonly triggeredOpen = output()\n\n protected readonly internalOpen = signal(false)\n protected readonly controlledOpen = computed(\n () => this.open() ?? this.internalOpen(),\n )\n\n readonly variant = input<'tinted' | 'default'>('default')\n\n private popoverRef = viewChild<ElementRef>('myPopover')\n\n // enable controlled component\n controlledComponent = effect((onCleanup) => {\n const popover = this.popoverRef()?.nativeElement\n const handleClick = (event: MouseEvent) => {\n const el = event.target as Element | null\n const isTrigger = el?.closest?.(`[popovertarget=\"${this.popoverId()}\"]`)\n const isOutside = !isTrigger && !popover?.contains(el as Node)\n\n if (isTrigger) {\n event.preventDefault() // Prevent native Popover API\n this.internalOpen.update((open) => !open)\n this.triggeredOpen.emit()\n }\n if (isOutside) {\n this.internalOpen.set(false)\n this.triggeredClose.emit()\n }\n }\n\n const handleKeydown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || !this.controlledOpen()) return\n event.preventDefault() // Prevent closing fullscreen in Safari\n this.internalOpen.set(false)\n this.triggeredClose.emit()\n }\n\n popover?.togglePopover?.(this.controlledOpen())\n document.addEventListener('click', handleClick, true) // Use capture to execute before React event API\n document.addEventListener('keydown', handleKeydown)\n\n onCleanup(() => {\n document.removeEventListener('click', handleClick, true)\n document.removeEventListener('keydown', handleKeydown)\n })\n }, {})\n\n positionPopover = effect(() => {\n const popover = this.popoverRef()?.nativeElement\n\n const trigger = document.querySelector(\n `[popovertarget=\"${this.popoverId()}\"]`,\n )\n const placement = this.placement()\n\n if (popover && trigger && this.controlledOpen()) {\n autoUpdate(trigger, popover, () => {\n computePosition(trigger, popover, {\n placement,\n strategy: 'fixed',\n middleware: [\n offset((data) => {\n // get pseudo element arrow size\n const styles = getComputedStyle(\n data.elements.floating,\n '::before',\n )\n return parseFloat(styles.height)\n }),\n ...(this.autoPlacement()\n ? [flip({ fallbackAxisSideDirection: 'start' }), shift()]\n : []),\n this.arrowPseudoElement,\n ],\n }).then(({ x, y }) => {\n popover.style.translate = `${x}px ${y}px`\n })\n })\n }\n }, {})\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n arrowPseudoElement: any = {\n name: 'ArrowPseudoElement',\n fn(data: MiddlewareState) {\n const { elements, rects, placement } = data\n\n let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`\n let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`\n\n if (rects.reference.width > rects.floating.width) {\n arrowX = `${Math.round(rects.floating.width / 2)}px`\n }\n\n if (rects.reference.height > rects.floating.height) {\n arrowY = `${Math.round(rects.floating.height / 2)}px`\n }\n\n switch (placement.split('-')[0]) {\n case 'top':\n arrowY = '100%'\n break\n case 'right':\n arrowX = '0'\n break\n case 'bottom':\n arrowY = '0'\n break\n case 'left':\n arrowX = '100%'\n break\n }\n\n elements.floating.setAttribute(\n 'data-placement',\n placement.split('-')[0] as string,\n ) // We only need top/left/right/bottom\n elements.floating.style.setProperty('--ds-popover-arrow-x', arrowX)\n elements.floating.style.setProperty('--ds-popover-arrow-y', arrowY)\n return data\n },\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
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, Component, input } from '@angular/core'\nimport '@digdir/designsystemet-web'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\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 template: `\n <div\n popover=\"manual\"\n class=\"ds-popover\"\n data-testid=\"popover\"\n [id]=\"popoverId()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-placement]=\"placement()\"\n [attr.data-autoplacement]=\"autoPlacement()\"\n >\n <ng-content />\n </div>\n `,\n})\nexport class Popover {\n readonly popoverId = input.required<string>()\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAiCa,OAAO,CAAA;AACT,IAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,oDAAU;IACpC,aAAa,GAAG,KAAK,CAAC,IAAI,0DAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAC5D,OAAO,GAAG,KAAK,CAAuB,SAAS,oDACtD,KAAK,EAAE,cAAc,EAAA,CACrB;;IAGO,SAAS,GAAG,KAAK,CAaxB,KAAK,sDAAI,KAAK,EAAE,gBAAgB,EAAA,CAAG;uGArB1B,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,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,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,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,QAAA,EAdR;;;;;;;;;;;;AAYT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEU,OAAO,EAAA,UAAA,EAAA,CAAA;kBA1BnB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,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,QAAQ,EAAE;;;;;;;;;;;;AAYT,EAAA,CAAA;AACF,iBAAA;;;AChCD;;AAEG;;;;"}
|
|
@@ -17,7 +17,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
17
17
|
args: [{
|
|
18
18
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
19
19
|
selector: 'input[ksd-search-input]',
|
|
20
|
-
standalone: true,
|
|
21
20
|
host: {
|
|
22
21
|
class: 'ds-input',
|
|
23
22
|
type: 'search',
|
|
@@ -111,7 +110,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
111
110
|
args: [{
|
|
112
111
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
113
112
|
selector: 'button[ksd-search-button]',
|
|
114
|
-
standalone: true,
|
|
115
113
|
host: {
|
|
116
114
|
class: 'ds-button',
|
|
117
115
|
type: 'submit',
|
|
@@ -166,7 +164,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
166
164
|
args: [{
|
|
167
165
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
168
166
|
selector: 'button[ksd-search-clear]',
|
|
169
|
-
standalone: true,
|
|
170
167
|
host: {
|
|
171
168
|
class: 'ds-button',
|
|
172
169
|
type: 'reset',
|
|
@@ -1 +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
|
|
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 placeholder: '', // Need empty placeholder to enable show/hide for clear button\n },\n})\nexport class SearchInput {}\n","import { afterNextRender, Component, contentChild } from '@angular/core'\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 template: `\n <ng-content select=\"[ksd-search-input]\" />\n <ng-content select=\"[ksd-search-clear]\" />\n <ng-content select=\"[ksd-search-button]\" />\n `,\n host: {\n class: 'ds-search',\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()',\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, output } from '@angular/core'\n\n/**\n * Search clear button\n *\n * Used within Search to provide a clear button.\n *\n * @param {string} [aria-label] - Aria label for the button.\n *\n * @event clearInput - Emitted when the clear button is clicked.\n * Use this to notify controlled forms that the input should be cleared.\n *\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 '(click)': 'handleClear($event)',\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 * Output to notify controlled forms that input should be cleared\n */\n clearInput = output<void>()\n\n handleClear(e: Event): void {\n const target = e.target as HTMLButtonElement\n let inputElement: HTMLElement | null | undefined = null\n\n if (target instanceof HTMLElement) {\n inputElement = target.closest('.ds-search')?.querySelector('input')\n }\n\n if (!inputElement) throw new Error('Input is missing')\n\n if (!(inputElement instanceof HTMLInputElement)) {\n throw new Error('Input is not an input element')\n }\n\n e.preventDefault()\n inputElement.value = ''\n this.clearInput.emit()\n inputElement.focus()\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,6 @@ import { input, booleanAttribute, Component } from '@angular/core';
|
|
|
3
3
|
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
4
4
|
import { HostColor } from '@ks-digital/designsystem-angular/__internals';
|
|
5
5
|
|
|
6
|
-
/* eslint-disable @angular-eslint/no-input-rename */
|
|
7
6
|
class Spinner {
|
|
8
7
|
/**
|
|
9
8
|
* Aria-label for the spinner
|
|
@@ -1 +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":["
|
|
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 { booleanAttribute, Component, input } from '@angular/core'\nimport { HostColor } from '@ks-digital/designsystem-angular/__internals'\nimport { SpinnerSize } from './spinner-sizes'\n\n@Component({\n selector: 'ksd-spinner',\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 >\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 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 /**\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":";;;;;MA2Ca,OAAO,CAAA;AAClB;;AAEG;IACM,SAAS,GAAG,KAAK,CAAS,SAAS,sDAAI,KAAK,EAAE,YAAY,EAAA,CAAG;AAEtE;;AAEG;AACM,IAAA,UAAU,GAAG,KAAK,CAAC,SAAS,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,YAAA,EAAA,GAAA,EAAA,CAAA,EACnC,SAAS,EAAE,gBAAgB;QAC3B,KAAK,EAAE,aAAa,EAAA,CACpB;AAEF;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAAc,SAAS,qDAC9C,KAAK,EAAE,WAAW,EAAA,CAClB;uGApBS,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,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,EAhCR;;;;;;;;;;;;;;;;;;;;;;;;AAwBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,CAAA,EAAA,CAAA;;2FAQU,OAAO,EAAA,UAAA,EAAA,CAAA;kBAvCnB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,QAAA,EAMb;;;;;;;;;;;;;;;;;;;;;;;;GAwBT,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;;;ACzCH;;AAEG;;;;"}
|
|
@@ -3,7 +3,6 @@ import { input, Component } from '@angular/core';
|
|
|
3
3
|
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
4
4
|
import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
|
|
5
5
|
|
|
6
|
-
/* eslint-disable @angular-eslint/no-input-rename */
|
|
7
6
|
class Tag {
|
|
8
7
|
/**
|
|
9
8
|
* The visual variant of the tag
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ks-digital-designsystem-angular-tag.mjs","sources":["../../../../packages/angular/tag/src/tag.ts","../../../../packages/angular/tag/src/ks-digital-designsystem-angular-tag.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-tag.mjs","sources":["../../../../packages/angular/tag/src/tag.ts","../../../../packages/angular/tag/src/ks-digital-designsystem-angular-tag.ts"],"sourcesContent":["import { Component, input } from '@angular/core'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n selector: 'ksd-tag',\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-tag',\n '[attr.data-variant]': 'variant()',\n },\n styles: `\n :host ::ng-deep > * {\n margin-inline-end: var(--ds-size-1);\n }\n `,\n template: ` <ng-content /> `,\n})\nexport class Tag {\n /**\n * The visual variant of the tag\n *\n * @default 'default'\n */\n readonly variant = input<'default' | 'outline'>('default', {\n alias: 'data-variant',\n })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MA6Ba,GAAG,CAAA;AACd;;;;AAIG;IACM,OAAO,GAAG,KAAK,CAAwB,SAAS,oDACvD,KAAK,EAAE,cAAc,EAAA,CACrB;uGARS,GAAG,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAH,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,GAAG,6bAFJ,CAAA,gBAAA,CAAkB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,yDAAA,CAAA,EAAA,CAAA;;2FAEjB,GAAG,EAAA,UAAA,EAAA,CAAA;kBAvBf,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,EAAA,cAAA,EACH;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,QAAQ;AACf,wBAAA,qBAAqB,EAAE,WAAW;AACnC,qBAAA,EAAA,QAAA,EAMS,CAAA,gBAAA,CAAkB,EAAA,MAAA,EAAA,CAAA,yDAAA,CAAA,EAAA;;;AC3B9B;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -5,15 +5,14 @@
|
|
|
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.43",
|
|
9
9
|
"license": "MIT",
|
|
10
10
|
"private": false,
|
|
11
11
|
"publishConfig": {
|
|
12
12
|
"access": "public"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@
|
|
16
|
-
"@u-elements/u-details": "^0.1.5",
|
|
15
|
+
"@digdir/designsystemet-web": "0.0.0-fix-designsystemet-web-20260213102609",
|
|
17
16
|
"tslib": "^2.3.0"
|
|
18
17
|
},
|
|
19
18
|
"peerDependencies": {
|
|
@@ -2,8 +2,12 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
3
3
|
|
|
4
4
|
declare class Breadcrumbs {
|
|
5
|
+
/**
|
|
6
|
+
* Sets the screen reader label for the pagination
|
|
7
|
+
*/
|
|
8
|
+
readonly ariaLabel: i0.InputSignal<string>;
|
|
5
9
|
static ɵfac: i0.ɵɵFactoryDeclaration<Breadcrumbs, never>;
|
|
6
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<Breadcrumbs, "
|
|
10
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<Breadcrumbs, "ksd-breadcrumbs", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
|
|
7
11
|
}
|
|
8
12
|
|
|
9
13
|
export { Breadcrumbs };
|
|
@@ -7,11 +7,13 @@ declare class Card {
|
|
|
7
7
|
* @default 'default'
|
|
8
8
|
*/
|
|
9
9
|
variant: i0.InputSignal<"tinted" | "default">;
|
|
10
|
-
private
|
|
11
|
-
private
|
|
12
|
-
|
|
10
|
+
private el;
|
|
11
|
+
private destroyRef;
|
|
12
|
+
private generatedId;
|
|
13
|
+
private originalId;
|
|
14
|
+
constructor();
|
|
13
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<Card, never>;
|
|
14
|
-
static
|
|
16
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<Card, "[ksd-card]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
declare class CardBlock {
|
|
@@ -2,14 +2,9 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
3
3
|
|
|
4
4
|
declare class Details {
|
|
5
|
-
readonly
|
|
6
|
-
readonly defaultOpen: i0.InputSignal<boolean>;
|
|
7
|
-
readonly open: i0.InputSignal<boolean | undefined>;
|
|
8
|
-
readonly toggled: i0.OutputEmitterRef<Event>;
|
|
9
|
-
private detailsRef;
|
|
10
|
-
onToggle(event: Event): void;
|
|
5
|
+
readonly dataVariant: i0.InputSignal<"default" | "tinted">;
|
|
11
6
|
static ɵfac: i0.ɵɵFactoryDeclaration<Details, never>;
|
|
12
|
-
static
|
|
7
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<Details, "details[ksd-details]", never, { "dataVariant": { "alias": "data-variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
|
|
13
8
|
}
|
|
14
9
|
|
|
15
10
|
declare class DetailsContent {
|