@ks-digital/designsystem-angular 0.0.1-alpha.51 → 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,13 +1,21 @@
1
1
  import { NgTemplateOutlet } from '@angular/common';
2
2
  import * as i0 from '@angular/core';
3
- import { output, 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
9
  /**
10
- * Emits the tab index when this tab is clicked.
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.
11
19
  */
12
20
  tabClicked = output();
13
21
  /**
@@ -15,11 +23,12 @@ class TabsTab {
15
23
  * keep the dom structure needed without additional host elements
16
24
  */
17
25
  templateRef = viewChild('tpl', ...(ngDevMode ? [{ debugName: "templateRef" }] : []));
18
- emitTabClicked(index) {
19
- this.tabClicked.emit(index);
26
+ /* Exposed function so Tabs can emit tab click events */
27
+ emitTabClicked(event) {
28
+ this.tabClicked.emit(event);
20
29
  }
21
30
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
22
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: TabsTab, isStandalone: true, selector: "ksd-tabs-tab", 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 });
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 });
23
32
  }
24
33
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsTab, decorators: [{
25
34
  type: Component,
@@ -40,15 +49,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
40
49
  },
41
50
  ],
42
51
  }]
43
- }], propDecorators: { tabClicked: [{ type: i0.Output, args: ["tabClicked"] }], 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 }] }] } });
44
53
 
45
54
  class Tabs {
55
+ /**
56
+ * Emits tab click details when any tab is clicked.
57
+ */
58
+ tabClicked = output();
46
59
  tabs = contentChildren(TabsTab, { ...(ngDevMode ? { debugName: "tabs" } : {}), descendants: true });
47
60
  onTabClick(index, tab) {
48
- tab.emitTabClicked(index);
61
+ const event = {
62
+ index,
63
+ tabId: tab.tabId(),
64
+ };
65
+ this.tabClicked.emit(event);
66
+ tab.emitTabClicked(event);
49
67
  }
50
68
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
51
- 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: `
52
70
  <ds-tabs class="ds-tabs">
53
71
  <ds-tablist>
54
72
  @for (tab of tabs(); track tab; let index = $index) {
@@ -84,7 +102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
84
102
  inputs: ['data-color'],
85
103
  },
86
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"] }]
87
- }], 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 }] }] } });
88
106
 
89
107
  class TabsList {
90
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 output,\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 * Emits the tab index when this tab is clicked.\n */\n readonly tabClicked = output<number>()\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 emitTabClicked(index: number) {\n this.tabClicked.emit(index)\n }\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; 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 readonly tabs = contentChildren(TabsTab, { descendants: true })\n\n protected onTabClick(index: number, tab: TabsTab) {\n tab.emitTabClicked(index)\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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"}
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
@@ -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.51",
8
+ "version": "0.0.1-alpha.52",
9
9
  "license": "MIT",
10
10
  "private": false,
11
11
  "publishConfig": {
@@ -2,26 +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 {
6
21
  /**
7
- * Emits the tab index when this tab is clicked.
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`.
8
27
  */
9
- readonly tabClicked: i0.OutputEmitterRef<number>;
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>;
10
33
  /**
11
34
  * Hack to get the content of the tab from outside so that we can
12
35
  * keep the dom structure needed without additional host elements
13
36
  */
14
37
  templateRef: i0.Signal<TemplateRef<unknown> | undefined>;
15
- emitTabClicked(index: number): void;
38
+ emitTabClicked(event: TabClickEvent): void;
16
39
  static ɵfac: i0.ɵɵFactoryDeclaration<TabsTab, never>;
17
- static ɵcmp: i0.ɵɵComponentDeclaration<TabsTab, "ksd-tabs-tab", never, {}, { "tabClicked": "tabClicked"; }, 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: {}; }]>;
18
41
  }
19
42
 
20
43
  declare class Tabs {
44
+ /**
45
+ * Emits tab click details when any tab is clicked.
46
+ */
47
+ readonly tabClicked: i0.OutputEmitterRef<TabClickEvent>;
21
48
  readonly tabs: i0.Signal<readonly TabsTab[]>;
22
49
  protected onTabClick(index: number, tab: TabsTab): void;
23
50
  static ɵfac: i0.ɵɵFactoryDeclaration<Tabs, never>;
24
- 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: {}; }]>;
25
52
  }
26
53
 
27
54
  declare class TabsList {
@@ -35,3 +62,4 @@ declare class TabsPanel {
35
62
  }
36
63
 
37
64
  export { Tabs, TabsList, TabsPanel, TabsTab };
65
+ export type { TabClickEvent };