@ks-digital/designsystem-angular 0.0.1-alpha.47 → 0.0.1-alpha.49
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 +1 -28
- package/fesm2022/ks-digital-designsystem-angular-__internals.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-button.mjs +8 -3
- package/fesm2022/ks-digital-designsystem-angular-button.mjs.map +1 -1
- package/fesm2022/ks-digital-designsystem-angular-table.mjs +105 -0
- package/fesm2022/ks-digital-designsystem-angular-table.mjs.map +1 -0
- package/package.json +5 -1
- package/table/README.md +3 -0
- package/types/ks-digital-designsystem-angular-__internals.d.ts +1 -19
- package/types/ks-digital-designsystem-angular-button.d.ts +2 -1
- package/types/ks-digital-designsystem-angular-table.d.ts +43 -0
|
@@ -1,33 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, Directive, isDevMode } from '@angular/core';
|
|
3
3
|
|
|
4
|
-
/**
|
|
5
|
-
* @deprecated Use individual directives instead
|
|
6
|
-
*/
|
|
7
|
-
class CommonInputs {
|
|
8
|
-
/**
|
|
9
|
-
* Changes size for descendant Designsystemet components. Select from predefined sizes.
|
|
10
|
-
* @attribute data-size
|
|
11
|
-
*/
|
|
12
|
-
dataSize = input(undefined, { ...(ngDevMode ? { debugName: "dataSize" } : {}), alias: 'data-size' });
|
|
13
|
-
/**
|
|
14
|
-
* Changes color for descendant Designsystemet components.
|
|
15
|
-
* Select from predefined colors and colors defined in theme.
|
|
16
|
-
* @attribute data-color
|
|
17
|
-
*/
|
|
18
|
-
dataColor = input(undefined, { ...(ngDevMode ? { debugName: "dataColor" } : {}), alias: 'data-color' });
|
|
19
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CommonInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
20
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: CommonInputs, isStandalone: true, inputs: { dataSize: { classPropertyName: "dataSize", publicName: "data-size", isSignal: true, isRequired: false, transformFunction: null }, dataColor: { classPropertyName: "dataColor", publicName: "data-color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "dataSize() || null", "attr.data-color": "dataColor() || null" } }, ngImport: i0 });
|
|
21
|
-
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CommonInputs, decorators: [{
|
|
23
|
-
type: Directive,
|
|
24
|
-
args: [{
|
|
25
|
-
host: {
|
|
26
|
-
'[attr.data-size]': 'dataSize() || null',
|
|
27
|
-
'[attr.data-color]': 'dataColor() || null',
|
|
28
|
-
},
|
|
29
|
-
}]
|
|
30
|
-
}], propDecorators: { dataSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-size", required: false }] }], dataColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-color", required: false }] }] } });
|
|
31
4
|
/**
|
|
32
5
|
* Applies data-size attribute to host-element.
|
|
33
6
|
*/
|
|
@@ -105,5 +78,5 @@ const randomId = () => {
|
|
|
105
78
|
* Generated bundle index. Do not edit.
|
|
106
79
|
*/
|
|
107
80
|
|
|
108
|
-
export {
|
|
81
|
+
export { HostColor, HostSeverityColors, HostSize, logIfDevMode, randomId };
|
|
109
82
|
//# sourceMappingURL=ks-digital-designsystem-angular-__internals.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ks-digital-designsystem-angular-__internals.mjs","sources":["../../../../packages/angular/__internals/src/host-directives.ts","../../../../packages/angular/__internals/src/log-if-devmode.ts","../../../../packages/angular/__internals/src/random-id.ts","../../../../packages/angular/__internals/src/ks-digital-designsystem-angular-__internals.ts"],"sourcesContent":["import { Directive, input } from '@angular/core'\nimport {\n ColorDefinitions,\n SeverityColorDefinitions,\n Size,\n} from '@ks-digital/designsystem-themes/types'\n\n/**\n *
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-__internals.mjs","sources":["../../../../packages/angular/__internals/src/host-directives.ts","../../../../packages/angular/__internals/src/log-if-devmode.ts","../../../../packages/angular/__internals/src/random-id.ts","../../../../packages/angular/__internals/src/ks-digital-designsystem-angular-__internals.ts"],"sourcesContent":["import { Directive, input } from '@angular/core'\nimport {\n ColorDefinitions,\n SeverityColorDefinitions,\n Size,\n} from '@ks-digital/designsystem-themes/types'\n\n/**\n * Applies data-size attribute to host-element.\n */\n@Directive({\n host: {\n '[attr.data-size]': 'dataSize() || null',\n },\n})\nexport class HostSize {\n /**\n * Changes size for descendant Designsystemet components. Select from predefined sizes.\n * @attribute data-size\n */\n readonly dataSize = input<Size>(undefined, {\n alias: 'data-size',\n })\n}\n\n/**\n * Applies data-color attribute to host-element for all colors, including severity colors.\n */\n@Directive({\n host: {\n '[attr.data-color]': 'dataColor() || null',\n },\n})\nexport class HostColor {\n /**\n * Changes color for descendant Designsystemet components.\n * Select from predefined colors and colors defined in theme.\n * @attribute data-color\n */\n readonly dataColor = input<\n keyof ColorDefinitions | keyof SeverityColorDefinitions\n >(undefined, { alias: 'data-color' })\n}\n\n/**\n * Applies data-color attribute to host-element for severity colors.\n */\n@Directive({\n host: {\n '[attr.data-color]': 'dataColor() || null',\n },\n})\nexport class HostSeverityColors {\n /**\n * Changes color for descendant Designsystemet components.\n * Select from predefined colors and colors defined in theme.\n * @attribute data-color\n */\n readonly dataColor = input<keyof SeverityColorDefinitions>(undefined, {\n alias: 'data-color',\n })\n}\n","import { isDevMode } from '@angular/core'\n\nexport const logIfDevMode = ({\n component,\n message,\n}: {\n component: string\n message: string\n}) => {\n if (isDevMode()) {\n console.log(`[${component}] ${message}`)\n }\n}\n","export const randomId = () => {\n return `${Math.random().toString(36).slice(2, 7)}`\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -22,7 +22,8 @@ class Button {
|
|
|
22
22
|
*/
|
|
23
23
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
24
24
|
/**
|
|
25
|
-
* If this is a button with only an icon
|
|
25
|
+
* If this is a button with only an icon. When combined with loading, a spinner will be shown instead of the icon.
|
|
26
|
+
|
|
26
27
|
*/
|
|
27
28
|
icon = input(false, { ...(ngDevMode ? { debugName: "icon" } : {}), transform: booleanAttribute });
|
|
28
29
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -30,7 +31,9 @@ class Button {
|
|
|
30
31
|
@if (loading()) {
|
|
31
32
|
<ksd-spinner aria-hidden="true" />
|
|
32
33
|
}
|
|
33
|
-
|
|
34
|
+
@if (!(loading() && icon())) {
|
|
35
|
+
<ng-content />
|
|
36
|
+
}
|
|
34
37
|
`, isInline: true, styles: [":host ::ng-deep>*{display:inline-flex}:host ::ng-deep ng-icon{font-size:var(--ng-icon-size, 1.3em)}\n"], dependencies: [{ kind: "component", type: Spinner, selector: "ksd-spinner", inputs: ["aria-label", "aria-hidden", "data-size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35
38
|
}
|
|
36
39
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Button, decorators: [{
|
|
@@ -55,7 +58,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
55
58
|
@if (loading()) {
|
|
56
59
|
<ksd-spinner aria-hidden="true" />
|
|
57
60
|
}
|
|
58
|
-
|
|
61
|
+
@if (!(loading() && icon())) {
|
|
62
|
+
<ng-content />
|
|
63
|
+
}
|
|
59
64
|
`, styles: [":host ::ng-deep>*{display:inline-flex}:host ::ng-deep ng-icon{font-size:var(--ng-icon-size, 1.3em)}\n"] }]
|
|
60
65
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-variant", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
61
66
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ks-digital-designsystem-angular-button.mjs","sources":["../../../../packages/angular/button/src/button.ts","../../../../packages/angular/button/src/ks-digital-designsystem-angular-button.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n input,\n} from '@angular/core'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { Spinner } from '@ks-digital/designsystem-angular/spinner'\n\n@Component({\n selector: 'button[ksd-button], a[ksd-button]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: HostSize,\n inputs: ['data-size'],\n },\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n imports: [Spinner],\n host: {\n class: 'ds-button',\n type: 'button',\n '[attr.data-variant]': 'variant()',\n '[attr.data-icon]': 'icon() || null',\n '[attr.disabled]': 'disabled() ? true : null',\n '[attr.aria-busy]': 'loading() ? true : null',\n },\n styles: `\n /* Ensure transcluded icons are aligned properly */\n :host ::ng-deep > * {\n display: inline-flex;\n }\n\n :host ::ng-deep ng-icon {\n font-size: var(--ng-icon-size, 1.3em);\n }\n `,\n\n template: `\n @if (loading()) {\n <ksd-spinner aria-hidden=\"true\" />\n }\n <ng-content />\n `,\n})\nexport class Button {\n /**\n * Specify which variant to use\n * @default 'primary'\n */\n readonly variant = input<'primary' | 'secondary' | 'tertiary'>('primary', {\n alias: 'data-variant',\n })\n\n /**\n * Toggle loading state.\n * Pass an element if you want to display a custom loader.\n *\n * @default false\n */\n readonly loading = input(false, { transform: booleanAttribute })\n\n /**\n * Disables element\n */\n readonly disabled = input(false, { transform: booleanAttribute })\n\n /**\n * If this is a button with only an icon\n */\n readonly icon = input(false, { transform: booleanAttribute })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-button.mjs","sources":["../../../../packages/angular/button/src/button.ts","../../../../packages/angular/button/src/ks-digital-designsystem-angular-button.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n input,\n} from '@angular/core'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { Spinner } from '@ks-digital/designsystem-angular/spinner'\n\n@Component({\n selector: 'button[ksd-button], a[ksd-button]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: HostSize,\n inputs: ['data-size'],\n },\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n imports: [Spinner],\n host: {\n class: 'ds-button',\n type: 'button',\n '[attr.data-variant]': 'variant()',\n '[attr.data-icon]': 'icon() || null',\n '[attr.disabled]': 'disabled() ? true : null',\n '[attr.aria-busy]': 'loading() ? true : null',\n },\n styles: `\n /* Ensure transcluded icons are aligned properly */\n :host ::ng-deep > * {\n display: inline-flex;\n }\n\n :host ::ng-deep ng-icon {\n font-size: var(--ng-icon-size, 1.3em);\n }\n `,\n\n template: `\n @if (loading()) {\n <ksd-spinner aria-hidden=\"true\" />\n }\n @if (!(loading() && icon())) {\n <ng-content />\n }\n `,\n})\nexport class Button {\n /**\n * Specify which variant to use\n * @default 'primary'\n */\n readonly variant = input<'primary' | 'secondary' | 'tertiary'>('primary', {\n alias: 'data-variant',\n })\n\n /**\n * Toggle loading state.\n * Pass an element if you want to display a custom loader.\n *\n * @default false\n */\n readonly loading = input(false, { transform: booleanAttribute })\n\n /**\n * Disables element\n */\n readonly disabled = input(false, { transform: booleanAttribute })\n\n /**\n * If this is a button with only an icon. When combined with loading, a spinner will be shown instead of the icon.\n\n */\n readonly icon = input(false, { transform: booleanAttribute })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, ChangeDetectionStrategy, Component, output } from '@angular/core';
|
|
3
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
4
|
+
|
|
5
|
+
class Table {
|
|
6
|
+
/**
|
|
7
|
+
* Will give the table a hover effect on rows
|
|
8
|
+
* @default false
|
|
9
|
+
*/
|
|
10
|
+
hover = input(false, { ...(ngDevMode ? { debugName: "hover" } : {}), alias: 'data-hover',
|
|
11
|
+
transform: booleanAttribute });
|
|
12
|
+
/**
|
|
13
|
+
* Will give the table a rounded border
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
border = input(false, { ...(ngDevMode ? { debugName: "border" } : {}), alias: 'data-border',
|
|
17
|
+
transform: booleanAttribute });
|
|
18
|
+
/**
|
|
19
|
+
* Will make the table header sticky
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
stickyHeader = input(false, { ...(ngDevMode ? { debugName: "stickyHeader" } : {}), alias: 'data-sticky-header',
|
|
23
|
+
transform: booleanAttribute });
|
|
24
|
+
/**
|
|
25
|
+
* Will give the table zebra striping
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
zebra = input(false, { ...(ngDevMode ? { debugName: "zebra" } : {}), alias: 'data-zebra',
|
|
29
|
+
transform: booleanAttribute });
|
|
30
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
31
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: Table, isStandalone: true, selector: "table[ksd-table]", inputs: { hover: { classPropertyName: "hover", publicName: "data-hover", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "data-border", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "data-sticky-header", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "data-zebra", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-hover": "hover() || undefined", "attr.data-border": "border() || undefined", "attr.data-sticky-header": "stickyHeader() || undefined", "attr.data-zebra": "zebra() || undefined" }, classAttribute: "ds-table" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32
|
+
}
|
|
33
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Table, decorators: [{
|
|
34
|
+
type: Component,
|
|
35
|
+
args: [{
|
|
36
|
+
selector: 'table[ksd-table]',
|
|
37
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
38
|
+
template: `<ng-content />`,
|
|
39
|
+
host: {
|
|
40
|
+
class: 'ds-table',
|
|
41
|
+
'[attr.data-hover]': 'hover() || undefined',
|
|
42
|
+
'[attr.data-border]': 'border() || undefined',
|
|
43
|
+
'[attr.data-sticky-header]': 'stickyHeader() || undefined',
|
|
44
|
+
'[attr.data-zebra]': 'zebra() || undefined',
|
|
45
|
+
},
|
|
46
|
+
}]
|
|
47
|
+
}], propDecorators: { hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-hover", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-border", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-sticky-header", required: false }] }], zebra: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-zebra", required: false }] }] } });
|
|
48
|
+
|
|
49
|
+
class TableHeaderCell {
|
|
50
|
+
/**
|
|
51
|
+
* If 'none' | 'ascending' | 'descending' will add a button to the header cell and change aria-sort and icon
|
|
52
|
+
* @default undefined
|
|
53
|
+
*/
|
|
54
|
+
sort = input(undefined, { ...(ngDevMode ? { debugName: "sort" } : {}), alias: 'aria-sort' });
|
|
55
|
+
/**
|
|
56
|
+
* Emitted when the sort button is clicked
|
|
57
|
+
* @emits void
|
|
58
|
+
*/
|
|
59
|
+
sortChange = output();
|
|
60
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableHeaderCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
61
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TableHeaderCell, isStandalone: true, selector: "th[ksd-header-cell]", inputs: { sort: { classPropertyName: "sort", publicName: "aria-sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange" }, host: { properties: { "attr.aria-sort": "sort()" } }, ngImport: i0, template: `
|
|
62
|
+
@if (sort()) {
|
|
63
|
+
<button
|
|
64
|
+
type="button"
|
|
65
|
+
(click)="sortChange.emit(); $event.stopPropagation()"
|
|
66
|
+
>
|
|
67
|
+
<ng-container *ngTemplateOutlet="headerTitle"></ng-container>
|
|
68
|
+
</button>
|
|
69
|
+
} @else {
|
|
70
|
+
<ng-container *ngTemplateOutlet="headerTitle"></ng-container>
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
<ng-template #headerTitle>
|
|
74
|
+
<ng-content />
|
|
75
|
+
</ng-template>
|
|
76
|
+
`, isInline: true, styles: ["button{padding:var(--dsc-table-padding)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
77
|
+
}
|
|
78
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableHeaderCell, decorators: [{
|
|
79
|
+
type: Component,
|
|
80
|
+
args: [{ selector: 'th[ksd-header-cell]', changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
81
|
+
@if (sort()) {
|
|
82
|
+
<button
|
|
83
|
+
type="button"
|
|
84
|
+
(click)="sortChange.emit(); $event.stopPropagation()"
|
|
85
|
+
>
|
|
86
|
+
<ng-container *ngTemplateOutlet="headerTitle"></ng-container>
|
|
87
|
+
</button>
|
|
88
|
+
} @else {
|
|
89
|
+
<ng-container *ngTemplateOutlet="headerTitle"></ng-container>
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
<ng-template #headerTitle>
|
|
93
|
+
<ng-content />
|
|
94
|
+
</ng-template>
|
|
95
|
+
`, imports: [NgTemplateOutlet], host: {
|
|
96
|
+
'[attr.aria-sort]': 'sort()',
|
|
97
|
+
}, styles: ["button{padding:var(--dsc-table-padding)}\n"] }]
|
|
98
|
+
}], propDecorators: { sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-sort", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }] } });
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Generated bundle index. Do not edit.
|
|
102
|
+
*/
|
|
103
|
+
|
|
104
|
+
export { Table, TableHeaderCell };
|
|
105
|
+
//# sourceMappingURL=ks-digital-designsystem-angular-table.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-table.mjs","sources":["../../../../packages/angular/table/src/table.ts","../../../../packages/angular/table/src/table-header-cell.ts","../../../../packages/angular/table/src/ks-digital-designsystem-angular-table.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n input,\n} from '@angular/core'\n\n@Component({\n selector: 'table[ksd-table]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `<ng-content />`,\n host: {\n class: 'ds-table',\n '[attr.data-hover]': 'hover() || undefined',\n '[attr.data-border]': 'border() || undefined',\n '[attr.data-sticky-header]': 'stickyHeader() || undefined',\n '[attr.data-zebra]': 'zebra() || undefined',\n },\n})\nexport class Table {\n /**\n * Will give the table a hover effect on rows\n * @default false\n */\n readonly hover = input(false, {\n alias: 'data-hover',\n transform: booleanAttribute,\n })\n /**\n * Will give the table a rounded border\n * @default false\n */\n readonly border = input(false, {\n alias: 'data-border',\n transform: booleanAttribute,\n })\n /**\n * Will make the table header sticky\n * @default false\n */\n readonly stickyHeader = input(false, {\n alias: 'data-sticky-header',\n transform: booleanAttribute,\n })\n /**\n * Will give the table zebra striping\n * @default false\n */\n readonly zebra = input(false, {\n alias: 'data-zebra',\n transform: booleanAttribute,\n })\n}\n","import { NgTemplateOutlet } from '@angular/common'\nimport {\n ChangeDetectionStrategy,\n Component,\n input,\n output,\n} from '@angular/core'\n@Component({\n selector: 'th[ksd-header-cell]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n @if (sort()) {\n <button\n type=\"button\"\n (click)=\"sortChange.emit(); $event.stopPropagation()\"\n >\n <ng-container *ngTemplateOutlet=\"headerTitle\"></ng-container>\n </button>\n } @else {\n <ng-container *ngTemplateOutlet=\"headerTitle\"></ng-container>\n }\n\n <ng-template #headerTitle>\n <ng-content />\n </ng-template>\n `,\n imports: [NgTemplateOutlet],\n host: {\n '[attr.aria-sort]': 'sort()',\n },\n styles: `\n button {\n padding: var(--dsc-table-padding);\n }\n `,\n})\nexport class TableHeaderCell {\n /**\n * If 'none' | 'ascending' | 'descending' will add a button to the header cell and change aria-sort and icon\n * @default undefined\n */\n readonly sort = input<'none' | 'ascending' | 'descending'>(undefined, {\n alias: 'aria-sort',\n })\n /**\n * Emitted when the sort button is clicked\n * @emits void\n */\n readonly sortChange = output()\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"url": "https://github.com/ks-no/designsystem.git",
|
|
6
6
|
"directory": "packages/angular"
|
|
7
7
|
},
|
|
8
|
-
"version": "0.0.1-alpha.
|
|
8
|
+
"version": "0.0.1-alpha.49",
|
|
9
9
|
"license": "MIT",
|
|
10
10
|
"private": false,
|
|
11
11
|
"publishConfig": {
|
|
@@ -97,6 +97,10 @@
|
|
|
97
97
|
"types": "./types/ks-digital-designsystem-angular-suggestion.d.ts",
|
|
98
98
|
"default": "./fesm2022/ks-digital-designsystem-angular-suggestion.mjs"
|
|
99
99
|
},
|
|
100
|
+
"./table": {
|
|
101
|
+
"types": "./types/ks-digital-designsystem-angular-table.d.ts",
|
|
102
|
+
"default": "./fesm2022/ks-digital-designsystem-angular-table.mjs"
|
|
103
|
+
},
|
|
100
104
|
"./tabs": {
|
|
101
105
|
"types": "./types/ks-digital-designsystem-angular-tabs.d.ts",
|
|
102
106
|
"default": "./fesm2022/ks-digital-designsystem-angular-tabs.mjs"
|
package/table/README.md
ADDED
|
@@ -2,24 +2,6 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { ColorDefinitions, SeverityColorDefinitions } from '@ks-digital/designsystem-themes/types';
|
|
3
3
|
export { ColorDefinitions as Color, SeverityColorDefinitions as SeverityColors, Size } from '@ks-digital/designsystem-themes/types';
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* @deprecated Use individual directives instead
|
|
7
|
-
*/
|
|
8
|
-
declare class CommonInputs {
|
|
9
|
-
/**
|
|
10
|
-
* Changes size for descendant Designsystemet components. Select from predefined sizes.
|
|
11
|
-
* @attribute data-size
|
|
12
|
-
*/
|
|
13
|
-
readonly dataSize: i0.InputSignal<Size>;
|
|
14
|
-
/**
|
|
15
|
-
* Changes color for descendant Designsystemet components.
|
|
16
|
-
* Select from predefined colors and colors defined in theme.
|
|
17
|
-
* @attribute data-color
|
|
18
|
-
*/
|
|
19
|
-
readonly dataColor: i0.InputSignal<keyof ColorDefinitions | undefined>;
|
|
20
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<CommonInputs, never>;
|
|
21
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<CommonInputs, never, never, { "dataSize": { "alias": "data-size"; "required": false; "isSignal": true; }; "dataColor": { "alias": "data-color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
22
|
-
}
|
|
23
5
|
/**
|
|
24
6
|
* Applies data-size attribute to host-element.
|
|
25
7
|
*/
|
|
@@ -66,4 +48,4 @@ declare const logIfDevMode: ({ component, message, }: {
|
|
|
66
48
|
|
|
67
49
|
declare const randomId: () => string;
|
|
68
50
|
|
|
69
|
-
export {
|
|
51
|
+
export { HostColor, HostSeverityColors, HostSize, logIfDevMode, randomId };
|
|
@@ -19,7 +19,8 @@ declare class Button {
|
|
|
19
19
|
*/
|
|
20
20
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
21
21
|
/**
|
|
22
|
-
* If this is a button with only an icon
|
|
22
|
+
* If this is a button with only an icon. When combined with loading, a spinner will be shown instead of the icon.
|
|
23
|
+
|
|
23
24
|
*/
|
|
24
25
|
readonly icon: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
25
26
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Button, never>;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
|
|
3
|
+
declare class Table {
|
|
4
|
+
/**
|
|
5
|
+
* Will give the table a hover effect on rows
|
|
6
|
+
* @default false
|
|
7
|
+
*/
|
|
8
|
+
readonly hover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
9
|
+
/**
|
|
10
|
+
* Will give the table a rounded border
|
|
11
|
+
* @default false
|
|
12
|
+
*/
|
|
13
|
+
readonly border: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
14
|
+
/**
|
|
15
|
+
* Will make the table header sticky
|
|
16
|
+
* @default false
|
|
17
|
+
*/
|
|
18
|
+
readonly stickyHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
19
|
+
/**
|
|
20
|
+
* Will give the table zebra striping
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
23
|
+
readonly zebra: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
24
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Table, never>;
|
|
25
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Table, "table[ksd-table]", never, { "hover": { "alias": "data-hover"; "required": false; "isSignal": true; }; "border": { "alias": "data-border"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "data-sticky-header"; "required": false; "isSignal": true; }; "zebra": { "alias": "data-zebra"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
declare class TableHeaderCell {
|
|
29
|
+
/**
|
|
30
|
+
* If 'none' | 'ascending' | 'descending' will add a button to the header cell and change aria-sort and icon
|
|
31
|
+
* @default undefined
|
|
32
|
+
*/
|
|
33
|
+
readonly sort: _angular_core.InputSignal<"none" | "ascending" | "descending" | undefined>;
|
|
34
|
+
/**
|
|
35
|
+
* Emitted when the sort button is clicked
|
|
36
|
+
* @emits void
|
|
37
|
+
*/
|
|
38
|
+
readonly sortChange: _angular_core.OutputEmitterRef<void>;
|
|
39
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableHeaderCell, never>;
|
|
40
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableHeaderCell, "th[ksd-header-cell]", never, { "sort": { "alias": "aria-sort"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; }, never, ["*"], true, never>;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export { Table, TableHeaderCell };
|