@ks-digital/designsystem-angular 0.0.1-alpha.50 → 0.0.1-alpha.52
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.
|
@@ -1,18 +1,34 @@
|
|
|
1
1
|
import { NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { viewChild, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, contentChildren } from '@angular/core';
|
|
3
|
+
import { input, output, viewChild, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, contentChildren } from '@angular/core';
|
|
4
4
|
import '@digdir/designsystemet-web';
|
|
5
5
|
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
6
6
|
import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
|
|
7
7
|
|
|
8
8
|
class TabsTab {
|
|
9
|
+
/**
|
|
10
|
+
* Stable identifier for this tab.
|
|
11
|
+
*
|
|
12
|
+
* Recommended for logic such as analytics, routing and persisted state.
|
|
13
|
+
*
|
|
14
|
+
* If omitted, `tabClicked` emits `tabId: undefined`.
|
|
15
|
+
*/
|
|
16
|
+
tabId = input(...(ngDevMode ? [undefined, { debugName: "tabId" }] : []));
|
|
17
|
+
/**
|
|
18
|
+
* Emits tab click details when this tab is clicked.
|
|
19
|
+
*/
|
|
20
|
+
tabClicked = output();
|
|
9
21
|
/**
|
|
10
22
|
* Hack to get the content of the tab from outside so that we can
|
|
11
23
|
* keep the dom structure needed without additional host elements
|
|
12
24
|
*/
|
|
13
25
|
templateRef = viewChild('tpl', ...(ngDevMode ? [{ debugName: "templateRef" }] : []));
|
|
26
|
+
/* Exposed function so Tabs can emit tab click events */
|
|
27
|
+
emitTabClicked(event) {
|
|
28
|
+
this.tabClicked.emit(event);
|
|
29
|
+
}
|
|
14
30
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: TabsTab, isStandalone: true, selector: "ksd-tabs-tab", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: ` <ng-template #tpl><ng-content /></ng-template> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
31
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: TabsTab, isStandalone: true, selector: "ksd-tabs-tab", inputs: { tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClicked: "tabClicked" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: ` <ng-template #tpl><ng-content /></ng-template> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16
32
|
}
|
|
17
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsTab, decorators: [{
|
|
18
34
|
type: Component,
|
|
@@ -33,16 +49,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
33
49
|
},
|
|
34
50
|
],
|
|
35
51
|
}]
|
|
36
|
-
}], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
|
|
52
|
+
}], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabId", required: false }] }], tabClicked: [{ type: i0.Output, args: ["tabClicked"] }], templateRef: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
|
|
37
53
|
|
|
38
54
|
class Tabs {
|
|
55
|
+
/**
|
|
56
|
+
* Emits tab click details when any tab is clicked.
|
|
57
|
+
*/
|
|
58
|
+
tabClicked = output();
|
|
39
59
|
tabs = contentChildren(TabsTab, { ...(ngDevMode ? { debugName: "tabs" } : {}), descendants: true });
|
|
60
|
+
onTabClick(index, tab) {
|
|
61
|
+
const event = {
|
|
62
|
+
index,
|
|
63
|
+
tabId: tab.tabId(),
|
|
64
|
+
};
|
|
65
|
+
this.tabClicked.emit(event);
|
|
66
|
+
tab.emitTabClicked(event);
|
|
67
|
+
}
|
|
40
68
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
41
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Tabs, isStandalone: true, selector: "ksd-tabs", queries: [{ propertyName: "tabs", predicate: TabsTab, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
|
|
69
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Tabs, isStandalone: true, selector: "ksd-tabs", outputs: { tabClicked: "tabClicked" }, queries: [{ propertyName: "tabs", predicate: TabsTab, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
|
|
42
70
|
<ds-tabs class="ds-tabs">
|
|
43
71
|
<ds-tablist>
|
|
44
|
-
@for (tab of tabs(); track tab) {
|
|
45
|
-
<ds-tab>
|
|
72
|
+
@for (tab of tabs(); track tab; let index = $index) {
|
|
73
|
+
<ds-tab (click)="onTabClick(index, tab)">
|
|
46
74
|
<ng-container *ngTemplateOutlet="tab.templateRef()" />
|
|
47
75
|
</ds-tab>
|
|
48
76
|
}
|
|
@@ -56,8 +84,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
56
84
|
args: [{ selector: `ksd-tabs`, imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
|
|
57
85
|
<ds-tabs class="ds-tabs">
|
|
58
86
|
<ds-tablist>
|
|
59
|
-
@for (tab of tabs(); track tab) {
|
|
60
|
-
<ds-tab>
|
|
87
|
+
@for (tab of tabs(); track tab; let index = $index) {
|
|
88
|
+
<ds-tab (click)="onTabClick(index, tab)">
|
|
61
89
|
<ng-container *ngTemplateOutlet="tab.templateRef()" />
|
|
62
90
|
</ds-tab>
|
|
63
91
|
}
|
|
@@ -74,7 +102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
74
102
|
inputs: ['data-color'],
|
|
75
103
|
},
|
|
76
104
|
], styles: [":host ::ng-deep :is(.ds-tabs [role=tab],.ds-tabs ds-tab,.ds-tabs u-tab)>:where(ng-icon,svg,img){font-size:1.25em;width:1em;height:1em}\n"] }]
|
|
77
|
-
}], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabsTab), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
105
|
+
}], propDecorators: { tabClicked: [{ type: i0.Output, args: ["tabClicked"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabsTab), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
78
106
|
|
|
79
107
|
class TabsList {
|
|
80
108
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ks-digital-designsystem-angular-tabs.mjs","sources":["../../../../packages/angular/tabs/src/tabs-tab.ts","../../../../packages/angular/tabs/src/tabs.ts","../../../../packages/angular/tabs/src/tabs-list.ts","../../../../packages/angular/tabs/src/tabs-panel.ts","../../../../packages/angular/tabs/src/ks-digital-designsystem-angular-tabs.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n CUSTOM_ELEMENTS_SCHEMA,\n TemplateRef,\n viewChild,\n} from '@angular/core'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n@Component({\n selector: `ksd-tabs-tab`,\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n template: ` <ng-template #tpl><ng-content /></ng-template> `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [],\n hostDirectives: [\n {\n directive: HostSize,\n inputs: ['data-size'],\n },\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n})\nexport class TabsTab {\n /**\n * Hack to get the content of the tab from outside so that we can\n * keep the dom structure needed without additional host elements\n */\n templateRef = viewChild<TemplateRef<unknown>>('tpl')\n}\n","import { NgTemplateOutlet } from '@angular/common'\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChildren,\n CUSTOM_ELEMENTS_SCHEMA,\n} from '@angular/core'\nimport '@digdir/designsystemet-web'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { TabsTab } from './tabs-tab'\n\n@Component({\n selector: `ksd-tabs`,\n imports: [NgTemplateOutlet],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n template: `\n <ds-tabs class=\"ds-tabs\">\n <ds-tablist>\n @for (tab of tabs(); track tab) {\n <ds-tab>\n <ng-container *ngTemplateOutlet=\"tab.templateRef()\" />\n </ds-tab>\n }\n </ds-tablist>\n <ng-content select=\"ksd-tabs-panel\" />\n </ds-tabs>\n `,\n styles: `\n :host\n ::ng-deep\n :is(.ds-tabs [role='tab'], .ds-tabs ds-tab, .ds-tabs u-tab)\n > :where(ng-icon, svg, img) {\n font-size: calc(1em * 1.25);\n width: 1em;\n height: 1em;\n }\n `,\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})\nexport class Tabs {\n readonly tabs = contentChildren(TabsTab, { descendants: true })\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core'\n\n@Component({\n selector: `ksd-tabs-list`,\n template: `<ng-content /> `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabsList {}\n","import {\n ChangeDetectionStrategy,\n Component,\n CUSTOM_ELEMENTS_SCHEMA,\n} from '@angular/core'\n\n@Component({\n selector: `ksd-tabs-panel`,\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n template: `\n <ds-tabpanel>\n <ng-content />\n </ds-tabpanel>\n `,\n host: {},\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabsPanel {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"ks-digital-designsystem-angular-tabs.mjs","sources":["../../../../packages/angular/tabs/src/tabs-tab.ts","../../../../packages/angular/tabs/src/tabs.ts","../../../../packages/angular/tabs/src/tabs-list.ts","../../../../packages/angular/tabs/src/tabs-panel.ts","../../../../packages/angular/tabs/src/ks-digital-designsystem-angular-tabs.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n CUSTOM_ELEMENTS_SCHEMA,\n input,\n output,\n TemplateRef,\n viewChild,\n} from '@angular/core'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\n\n/**\n * Payload emitted from `tabClicked` on both `ksd-tabs` and `ksd-tabs-tab`.\n */\nexport interface TabClickEvent {\n /**\n * Zero-based index of the clicked tab in its current render order.\n */\n index: number\n\n /**\n * Consumer-provided stable tab identifier from `tabId`.\n *\n * `undefined` when `tabId` is not provided.\n */\n tabId: string | undefined\n}\n\n@Component({\n selector: `ksd-tabs-tab`,\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n template: ` <ng-template #tpl><ng-content /></ng-template> `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [],\n hostDirectives: [\n {\n directive: HostSize,\n inputs: ['data-size'],\n },\n {\n directive: HostColor,\n inputs: ['data-color'],\n },\n ],\n})\nexport class TabsTab {\n /**\n * Stable identifier for this tab.\n *\n * Recommended for logic such as analytics, routing and persisted state.\n *\n * If omitted, `tabClicked` emits `tabId: undefined`.\n */\n readonly tabId = input<string>()\n\n /**\n * Emits tab click details when this tab is clicked.\n */\n readonly tabClicked = output<TabClickEvent>()\n\n /**\n * Hack to get the content of the tab from outside so that we can\n * keep the dom structure needed without additional host elements\n */\n templateRef = viewChild<TemplateRef<unknown>>('tpl')\n\n /* Exposed function so Tabs can emit tab click events */\n emitTabClicked(event: TabClickEvent) {\n this.tabClicked.emit(event)\n }\n}\n","import { NgTemplateOutlet } from '@angular/common'\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChildren,\n CUSTOM_ELEMENTS_SCHEMA,\n output,\n} from '@angular/core'\nimport '@digdir/designsystemet-web'\nimport {\n HostColor,\n HostSize,\n} from '@ks-digital/designsystem-angular/__internals'\nimport { TabClickEvent, TabsTab } from './tabs-tab'\n\n@Component({\n selector: `ksd-tabs`,\n imports: [NgTemplateOutlet],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n template: `\n <ds-tabs class=\"ds-tabs\">\n <ds-tablist>\n @for (tab of tabs(); track tab; let index = $index) {\n <ds-tab (click)=\"onTabClick(index, tab)\">\n <ng-container *ngTemplateOutlet=\"tab.templateRef()\" />\n </ds-tab>\n }\n </ds-tablist>\n <ng-content select=\"ksd-tabs-panel\" />\n </ds-tabs>\n `,\n styles: `\n :host\n ::ng-deep\n :is(.ds-tabs [role='tab'], .ds-tabs ds-tab, .ds-tabs u-tab)\n > :where(ng-icon, svg, img) {\n font-size: calc(1em * 1.25);\n width: 1em;\n height: 1em;\n }\n `,\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})\nexport class Tabs {\n /**\n * Emits tab click details when any tab is clicked.\n */\n readonly tabClicked = output<TabClickEvent>()\n\n readonly tabs = contentChildren(TabsTab, { descendants: true })\n\n protected onTabClick(index: number, tab: TabsTab) {\n const event: TabClickEvent = {\n index,\n tabId: tab.tabId(),\n }\n\n this.tabClicked.emit(event)\n tab.emitTabClicked(event)\n }\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core'\n\n@Component({\n selector: `ksd-tabs-list`,\n template: `<ng-content /> `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabsList {}\n","import {\n ChangeDetectionStrategy,\n Component,\n CUSTOM_ELEMENTS_SCHEMA,\n} from '@angular/core'\n\n@Component({\n selector: `ksd-tabs-panel`,\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n template: `\n <ds-tabpanel>\n <ng-content />\n </ds-tabpanel>\n `,\n host: {},\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabsPanel {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -2,20 +2,53 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { TemplateRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@ks-digital/designsystem-angular/__internals';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* Payload emitted from `tabClicked` on both `ksd-tabs` and `ksd-tabs-tab`.
|
|
7
|
+
*/
|
|
8
|
+
interface TabClickEvent {
|
|
9
|
+
/**
|
|
10
|
+
* Zero-based index of the clicked tab in its current render order.
|
|
11
|
+
*/
|
|
12
|
+
index: number;
|
|
13
|
+
/**
|
|
14
|
+
* Consumer-provided stable tab identifier from `tabId`.
|
|
15
|
+
*
|
|
16
|
+
* `undefined` when `tabId` is not provided.
|
|
17
|
+
*/
|
|
18
|
+
tabId: string | undefined;
|
|
19
|
+
}
|
|
5
20
|
declare class TabsTab {
|
|
21
|
+
/**
|
|
22
|
+
* Stable identifier for this tab.
|
|
23
|
+
*
|
|
24
|
+
* Recommended for logic such as analytics, routing and persisted state.
|
|
25
|
+
*
|
|
26
|
+
* If omitted, `tabClicked` emits `tabId: undefined`.
|
|
27
|
+
*/
|
|
28
|
+
readonly tabId: i0.InputSignal<string | undefined>;
|
|
29
|
+
/**
|
|
30
|
+
* Emits tab click details when this tab is clicked.
|
|
31
|
+
*/
|
|
32
|
+
readonly tabClicked: i0.OutputEmitterRef<TabClickEvent>;
|
|
6
33
|
/**
|
|
7
34
|
* Hack to get the content of the tab from outside so that we can
|
|
8
35
|
* keep the dom structure needed without additional host elements
|
|
9
36
|
*/
|
|
10
37
|
templateRef: i0.Signal<TemplateRef<unknown> | undefined>;
|
|
38
|
+
emitTabClicked(event: TabClickEvent): void;
|
|
11
39
|
static ɵfac: i0.ɵɵFactoryDeclaration<TabsTab, never>;
|
|
12
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<TabsTab, "ksd-tabs-tab", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
|
|
40
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TabsTab, "ksd-tabs-tab", never, { "tabId": { "alias": "tabId"; "required": false; "isSignal": true; }; }, { "tabClicked": "tabClicked"; }, never, ["*"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
|
|
13
41
|
}
|
|
14
42
|
|
|
15
43
|
declare class Tabs {
|
|
44
|
+
/**
|
|
45
|
+
* Emits tab click details when any tab is clicked.
|
|
46
|
+
*/
|
|
47
|
+
readonly tabClicked: i0.OutputEmitterRef<TabClickEvent>;
|
|
16
48
|
readonly tabs: i0.Signal<readonly TabsTab[]>;
|
|
49
|
+
protected onTabClick(index: number, tab: TabsTab): void;
|
|
17
50
|
static ɵfac: i0.ɵɵFactoryDeclaration<Tabs, never>;
|
|
18
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<Tabs, "ksd-tabs", never, {}, {}, ["tabs"], ["ksd-tabs-panel"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
|
|
51
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<Tabs, "ksd-tabs", never, {}, { "tabClicked": "tabClicked"; }, ["tabs"], ["ksd-tabs-panel"], true, [{ directive: typeof i1.HostSize; inputs: { "data-size": "data-size"; }; outputs: {}; }, { directive: typeof i1.HostColor; inputs: { "data-color": "data-color"; }; outputs: {}; }]>;
|
|
19
52
|
}
|
|
20
53
|
|
|
21
54
|
declare class TabsList {
|
|
@@ -29,3 +62,4 @@ declare class TabsPanel {
|
|
|
29
62
|
}
|
|
30
63
|
|
|
31
64
|
export { Tabs, TabsList, TabsPanel, TabsTab };
|
|
65
|
+
export type { TabClickEvent };
|