@ks-digital/designsystem-angular 0.0.1-alpha.47 → 0.0.1-alpha.48
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.
|
@@ -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.48",
|
|
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
|
@@ -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 };
|