@ng-doc/ui-kit 22.0.0 → 22.1.0
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.
|
@@ -32,6 +32,12 @@ let nextId = 0;
|
|
|
32
32
|
*/
|
|
33
33
|
class NgDocTabGroupComponent {
|
|
34
34
|
constructor() {
|
|
35
|
+
/**
|
|
36
|
+
* `framed` draws the header bar and the panel as one surface; `plain` draws only the tabs over
|
|
37
|
+
* a line, and the panel takes no frame or background of its own, for content that has its own.
|
|
38
|
+
*/
|
|
39
|
+
this.appearance = input('framed', /* @ts-ignore */
|
|
40
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
35
41
|
/** Id of the tab to open; the first tab opens when it is not set or matches no tab. */
|
|
36
42
|
this.openedTab = input(undefined, /* @ts-ignore */
|
|
37
43
|
...(ngDevMode ? [{ debugName: "openedTab" }] : /* istanbul ignore next */ []));
|
|
@@ -92,7 +98,7 @@ class NgDocTabGroupComponent {
|
|
|
92
98
|
}
|
|
93
99
|
}
|
|
94
100
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
95
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocTabGroupComponent, isStandalone: true, selector: "ng-doc-tab-group", inputs: { openedTab: { classPropertyName: "openedTab", publicName: "openedTab", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tabs", predicate: NgDocTabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabElements", predicate: ["headerTab"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ng-doc-tabs-header\">\n <div class=\"ng-doc-tabs-wrapper\" role=\"tablist\" ngDocSelectionHost>\n <ng-doc-selection [align]=\"null\" />\n @for (tab of tabs(); track tab; let i = $index) {\n <button\n type=\"button\"\n class=\"ng-doc-tab\"\n role=\"tab\"\n [id]=\"idPrefix + '-tab-' + i\"\n [attr.aria-selected]=\"tab === selectedTab()\"\n [attr.aria-controls]=\"idPrefix + '-panel'\"\n [attr.tabindex]=\"tab === selectedTab() ? 0 : -1\"\n [class.selected]=\"tab === selectedTab()\"\n [ngDocSelectionOrigin]=\"tab === selectedTab()\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onKeydown($event)\"\n #headerTab>\n <span class=\"ng-doc-tab-text\">\n <ng-container *polymorpheusOutlet=\"tab.label() as text; context: {}\">{{\n text\n }}</ng-container>\n </span>\n </button>\n }\n </div>\n</div>\n\n<div\n class=\"ng-doc-body-wrapper\"\n role=\"tabpanel\"\n [id]=\"idPrefix + '-panel'\"\n [attr.aria-labelledby]=\"selectedIndex() >= 0 ? idPrefix + '-tab-' + selectedIndex() : null\">\n <div *polymorpheusOutlet=\"selectedTab()?.content() ?? '' as text; context: {}\">\n {{ text }}\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background:var(--ng-doc-tab-group-header-background, var(--ng-doc-tab-group-background));border-radius:var(--ng-doc-tab-group-border-radius);border:var(--ng-doc-tab-group-border);overflow:hidden}:host .ng-doc-tabs-header{display:flex;align-items:center;flex-shrink:0;min-height:var(--ng-doc-code-header-height, 40px);padding:var(--ng-doc-space-1) var(--ng-doc-space-2);background:var(--ng-doc-tab-group-tabs-background, transparent);border-bottom:1px solid var(--ng-doc-border-color)}:host .ng-doc-tabs-wrapper{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}:host ng-doc-selection{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}:host .ng-doc-tab{position:relative;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer}:host .ng-doc-tab:hover{color:var(--ng-doc-heading-color)}:host .ng-doc-tab:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:host .ng-doc-tab.selected{color:var(--ng-doc-heading-color)}:host .ng-doc-tab .ng-doc-tab-text{display:inline-flex;align-items:center;gap:6px}:host ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}:host .ng-doc-body-wrapper{position:relative;background-color:var(--ng-doc-tab-group-background);height:100%;overflow:hidden}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }, { kind: "directive", type: NgDocSelectionHostDirective, selector: "[ngDocSelectionHost]" }, { kind: "directive", type: NgDocSelectionOriginDirective, selector: "[ngDocSelectionOrigin]", inputs: ["ngDocSelectionOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocTabGroupComponent, isStandalone: true, selector: "ng-doc-tab-group", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, openedTab: { classPropertyName: "openedTab", publicName: "openedTab", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ng-doc-tab-group-plain": "appearance() === 'plain'" } }, queries: [{ propertyName: "tabs", predicate: NgDocTabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabElements", predicate: ["headerTab"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ng-doc-tabs-header\">\n <div class=\"ng-doc-tabs-wrapper\" role=\"tablist\" ngDocSelectionHost>\n <ng-doc-selection [align]=\"null\" />\n @for (tab of tabs(); track tab; let i = $index) {\n <button\n type=\"button\"\n class=\"ng-doc-tab\"\n role=\"tab\"\n [id]=\"idPrefix + '-tab-' + i\"\n [attr.aria-selected]=\"tab === selectedTab()\"\n [attr.aria-controls]=\"idPrefix + '-panel'\"\n [attr.tabindex]=\"tab === selectedTab() ? 0 : -1\"\n [class.selected]=\"tab === selectedTab()\"\n [ngDocSelectionOrigin]=\"tab === selectedTab()\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onKeydown($event)\"\n #headerTab>\n <span class=\"ng-doc-tab-text\">\n <ng-container *polymorpheusOutlet=\"tab.label() as text; context: {}\">{{\n text\n }}</ng-container>\n </span>\n </button>\n }\n </div>\n</div>\n\n<div\n class=\"ng-doc-body-wrapper\"\n role=\"tabpanel\"\n [id]=\"idPrefix + '-panel'\"\n [attr.aria-labelledby]=\"selectedIndex() >= 0 ? idPrefix + '-tab-' + selectedIndex() : null\">\n <div *polymorpheusOutlet=\"selectedTab()?.content() ?? '' as text; context: {}\">\n {{ text }}\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background:var(--ng-doc-tab-group-header-background, var(--ng-doc-tab-group-background));border-radius:var(--ng-doc-tab-group-border-radius);border:var(--ng-doc-tab-group-border);overflow:hidden}:host .ng-doc-tabs-header{display:flex;align-items:center;flex-shrink:0;min-height:var(--ng-doc-code-header-height, 40px);padding:var(--ng-doc-space-1) var(--ng-doc-space-2);background:var(--ng-doc-tab-group-tabs-background, transparent);border-bottom:1px solid var(--ng-doc-border-color)}:host .ng-doc-tabs-wrapper{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}:host ng-doc-selection{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}:host .ng-doc-tab{position:relative;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer}:host .ng-doc-tab:hover{color:var(--ng-doc-heading-color)}:host .ng-doc-tab:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:host .ng-doc-tab.selected{color:var(--ng-doc-heading-color)}:host .ng-doc-tab .ng-doc-tab-text{display:inline-flex;align-items:center;gap:6px}:host ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}:host .ng-doc-body-wrapper{position:relative;background-color:var(--ng-doc-tab-group-background);height:100%;overflow:hidden}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}:host(.ng-doc-tab-group-plain){border:none;border-radius:0;background:transparent;overflow:visible}:host(.ng-doc-tab-group-plain)>.ng-doc-tabs-header{padding:0 0 var(--ng-doc-space-2);background:transparent}:host(.ng-doc-tab-group-plain)>.ng-doc-body-wrapper{padding-top:var(--ng-doc-space-4);background:transparent;overflow:visible}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }, { kind: "directive", type: NgDocSelectionHostDirective, selector: "[ngDocSelectionHost]" }, { kind: "directive", type: NgDocSelectionOriginDirective, selector: "[ngDocSelectionOrigin]", inputs: ["ngDocSelectionOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
96
102
|
}
|
|
97
103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTabGroupComponent, decorators: [{
|
|
98
104
|
type: Component,
|
|
@@ -101,8 +107,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
|
|
|
101
107
|
NgDocSelectionComponent,
|
|
102
108
|
NgDocSelectionHostDirective,
|
|
103
109
|
NgDocSelectionOriginDirective,
|
|
104
|
-
],
|
|
105
|
-
|
|
110
|
+
], host: {
|
|
111
|
+
'[class.ng-doc-tab-group-plain]': "appearance() === 'plain'",
|
|
112
|
+
}, template: "<div class=\"ng-doc-tabs-header\">\n <div class=\"ng-doc-tabs-wrapper\" role=\"tablist\" ngDocSelectionHost>\n <ng-doc-selection [align]=\"null\" />\n @for (tab of tabs(); track tab; let i = $index) {\n <button\n type=\"button\"\n class=\"ng-doc-tab\"\n role=\"tab\"\n [id]=\"idPrefix + '-tab-' + i\"\n [attr.aria-selected]=\"tab === selectedTab()\"\n [attr.aria-controls]=\"idPrefix + '-panel'\"\n [attr.tabindex]=\"tab === selectedTab() ? 0 : -1\"\n [class.selected]=\"tab === selectedTab()\"\n [ngDocSelectionOrigin]=\"tab === selectedTab()\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onKeydown($event)\"\n #headerTab>\n <span class=\"ng-doc-tab-text\">\n <ng-container *polymorpheusOutlet=\"tab.label() as text; context: {}\">{{\n text\n }}</ng-container>\n </span>\n </button>\n }\n </div>\n</div>\n\n<div\n class=\"ng-doc-body-wrapper\"\n role=\"tabpanel\"\n [id]=\"idPrefix + '-panel'\"\n [attr.aria-labelledby]=\"selectedIndex() >= 0 ? idPrefix + '-tab-' + selectedIndex() : null\">\n <div *polymorpheusOutlet=\"selectedTab()?.content() ?? '' as text; context: {}\">\n {{ text }}\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background:var(--ng-doc-tab-group-header-background, var(--ng-doc-tab-group-background));border-radius:var(--ng-doc-tab-group-border-radius);border:var(--ng-doc-tab-group-border);overflow:hidden}:host .ng-doc-tabs-header{display:flex;align-items:center;flex-shrink:0;min-height:var(--ng-doc-code-header-height, 40px);padding:var(--ng-doc-space-1) var(--ng-doc-space-2);background:var(--ng-doc-tab-group-tabs-background, transparent);border-bottom:1px solid var(--ng-doc-border-color)}:host .ng-doc-tabs-wrapper{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;display:inline-flex;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}:host ng-doc-selection{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}:host .ng-doc-tab{position:relative;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer}:host .ng-doc-tab:hover{color:var(--ng-doc-heading-color)}:host .ng-doc-tab:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:host .ng-doc-tab.selected{color:var(--ng-doc-heading-color)}:host .ng-doc-tab .ng-doc-tab-text{display:inline-flex;align-items:center;gap:6px}:host ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}:host .ng-doc-body-wrapper{position:relative;background-color:var(--ng-doc-tab-group-background);height:100%;overflow:hidden}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}:host(.ng-doc-tab-group-plain){border:none;border-radius:0;background:transparent;overflow:visible}:host(.ng-doc-tab-group-plain)>.ng-doc-tabs-header{padding:0 0 var(--ng-doc-space-2);background:transparent}:host(.ng-doc-tab-group-plain)>.ng-doc-body-wrapper{padding-top:var(--ng-doc-space-4);background:transparent;overflow:visible}\n"] }]
|
|
113
|
+
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], openedTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedTab", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgDocTabComponent), { isSignal: true }] }], tabElements: [{ type: i0.ViewChildren, args: ['headerTab', { isSignal: true }] }] } });
|
|
106
114
|
|
|
107
115
|
/**
|
|
108
116
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-doc-ui-kit-components-tab-group.mjs","sources":["../../../../libs/ui-kit/components/tab-group/tab/tab.component.ts","../../../../libs/ui-kit/components/tab-group/tab-group.component.ts","../../../../libs/ui-kit/components/tab-group/tab-group.component.html","../../../../libs/ui-kit/components/tab-group/ng-doc-ui-kit-components-tab-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgDocContent } from '@ng-doc/ui-kit/types';\n\n/** One tab of an `ng-doc-tab-group`: its label, its id and the content of its panel. */\n@Component({\n selector: 'ng-doc-tab, a[ng-doc-tab]',\n template: '',\n styleUrls: ['./tab.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocTabComponent<T> {\n /** Label of the tab: a string or a template. */\n readonly label = input<NgDocContent>('');\n\n /** Id the group's `openedTab` refers to. */\n readonly id = input<T | number>(0);\n\n /** Content of the tab's panel. */\n readonly content = input<NgDocContent>('');\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n ElementRef,\n input,\n linkedSignal,\n Signal,\n untracked,\n viewChildren,\n} from '@angular/core';\nimport {\n NgDocSelectionComponent,\n NgDocSelectionHostDirective,\n NgDocSelectionOriginDirective,\n} from '@ng-doc/ui-kit/components/selection';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\n\nimport { NgDocTabComponent } from './tab/tab.component';\n\nlet nextId = 0;\n\n/**\n * Tabs as a segmented control over one panel. It follows the WAI-ARIA tabs pattern: the arrow keys,\n * Home and End move between the tabs and select them. The highlight of the open tab slides to\n * the newly opened one.\n */\n@Component({\n selector: 'ng-doc-tab-group',\n templateUrl: './tab-group.component.html',\n styleUrls: ['./tab-group.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n PolymorpheusOutlet,\n NgDocSelectionComponent,\n NgDocSelectionHostDirective,\n NgDocSelectionOriginDirective,\n ],\n})\nexport class NgDocTabGroupComponent<T = number> {\n /** Id of the tab to open; the first tab opens when it is not set or matches no tab. */\n readonly openedTab = input<T | undefined>(undefined);\n\n /** The tabs of the group. */\n readonly tabs: Signal<ReadonlyArray<NgDocTabComponent<T>>> =\n contentChildren<NgDocTabComponent<T>>(NgDocTabComponent);\n\n /** Header buttons of the tabs, in order. */\n readonly tabElements: Signal<ReadonlyArray<ElementRef<HTMLElement>>> =\n viewChildren<ElementRef<HTMLElement>>('headerTab');\n\n /**\n * The open tab. It follows `openedTab` and the tab list; a tab the user selects stays open as\n * long as it is in the group and `openedTab` does not change.\n */\n readonly selectedTab = linkedSignal<\n { tabs: ReadonlyArray<NgDocTabComponent<T>>; opened: T | undefined },\n NgDocTabComponent<T> | undefined\n >({\n source: () => ({ tabs: this.tabs(), opened: this.openedTab() }),\n computation: ({ tabs, opened }, previous) => {\n const kept: NgDocTabComponent<T> | undefined =\n previous?.value && previous.source.opened === opened && tabs.includes(previous.value)\n ? previous.value\n : undefined;\n\n return (\n kept ??\n (opened !== undefined && opened !== null\n ? tabs.find((tab: NgDocTabComponent<T>) => tab.id() === opened)\n : undefined) ??\n tabs[0]\n );\n },\n });\n\n /** Index of the open tab, or -1. */\n readonly selectedIndex: Signal<number> = computed(() => {\n const selected: NgDocTabComponent<T> | undefined = this.selectedTab();\n\n return selected ? this.tabs().indexOf(selected) : -1;\n });\n\n /** Prefix of the ids that tie the tabs to the panel. */\n protected readonly idPrefix: string = `ng-doc-tab-group-${nextId++}`;\n\n /**\n * Opens a tab.\n * @param tab - The tab to open.\n */\n selectTab(tab: NgDocTabComponent<T>): void {\n untracked(() => this.selectedTab.set(tab));\n }\n\n /**\n * Moves the selection with the keyboard and focuses the new tab.\n * @param event - The key press on a tab.\n */\n protected onKeydown(event: KeyboardEvent): void {\n const tabs: ReadonlyArray<NgDocTabComponent<T>> = this.tabs();\n const current: number = Math.max(this.selectedIndex(), 0);\n const next: number | undefined = {\n ArrowRight: (current + 1) % tabs.length,\n ArrowLeft: (current - 1 + tabs.length) % tabs.length,\n Home: 0,\n End: tabs.length - 1,\n }[event.key];\n\n if (next !== undefined && tabs[next]) {\n event.preventDefault();\n this.selectTab(tabs[next]);\n this.tabElements()[next]?.nativeElement.focus();\n }\n }\n}\n","<div class=\"ng-doc-tabs-header\">\n <div class=\"ng-doc-tabs-wrapper\" role=\"tablist\" ngDocSelectionHost>\n <ng-doc-selection [align]=\"null\" />\n @for (tab of tabs(); track tab; let i = $index) {\n <button\n type=\"button\"\n class=\"ng-doc-tab\"\n role=\"tab\"\n [id]=\"idPrefix + '-tab-' + i\"\n [attr.aria-selected]=\"tab === selectedTab()\"\n [attr.aria-controls]=\"idPrefix + '-panel'\"\n [attr.tabindex]=\"tab === selectedTab() ? 0 : -1\"\n [class.selected]=\"tab === selectedTab()\"\n [ngDocSelectionOrigin]=\"tab === selectedTab()\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onKeydown($event)\"\n #headerTab>\n <span class=\"ng-doc-tab-text\">\n <ng-container *polymorpheusOutlet=\"tab.label() as text; context: {}\">{{\n text\n }}</ng-container>\n </span>\n </button>\n }\n </div>\n</div>\n\n<div\n class=\"ng-doc-body-wrapper\"\n role=\"tabpanel\"\n [id]=\"idPrefix + '-panel'\"\n [attr.aria-labelledby]=\"selectedIndex() >= 0 ? idPrefix + '-tab-' + selectedIndex() : null\">\n <div *polymorpheusOutlet=\"selectedTab()?.content() ?? '' as text; context: {}\">\n {{ text }}\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ng-doc-ui-kit-components-tab-group.mjs","sources":["../../../../libs/ui-kit/components/tab-group/tab/tab.component.ts","../../../../libs/ui-kit/components/tab-group/tab-group.component.ts","../../../../libs/ui-kit/components/tab-group/tab-group.component.html","../../../../libs/ui-kit/components/tab-group/ng-doc-ui-kit-components-tab-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgDocContent } from '@ng-doc/ui-kit/types';\n\n/** One tab of an `ng-doc-tab-group`: its label, its id and the content of its panel. */\n@Component({\n selector: 'ng-doc-tab, a[ng-doc-tab]',\n template: '',\n styleUrls: ['./tab.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocTabComponent<T> {\n /** Label of the tab: a string or a template. */\n readonly label = input<NgDocContent>('');\n\n /** Id the group's `openedTab` refers to. */\n readonly id = input<T | number>(0);\n\n /** Content of the tab's panel. */\n readonly content = input<NgDocContent>('');\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n ElementRef,\n input,\n linkedSignal,\n Signal,\n untracked,\n viewChildren,\n} from '@angular/core';\nimport {\n NgDocSelectionComponent,\n NgDocSelectionHostDirective,\n NgDocSelectionOriginDirective,\n} from '@ng-doc/ui-kit/components/selection';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\n\nimport { NgDocTabComponent } from './tab/tab.component';\n\nlet nextId = 0;\n\n/**\n * Tabs as a segmented control over one panel. It follows the WAI-ARIA tabs pattern: the arrow keys,\n * Home and End move between the tabs and select them. The highlight of the open tab slides to\n * the newly opened one.\n */\n@Component({\n selector: 'ng-doc-tab-group',\n templateUrl: './tab-group.component.html',\n styleUrls: ['./tab-group.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n PolymorpheusOutlet,\n NgDocSelectionComponent,\n NgDocSelectionHostDirective,\n NgDocSelectionOriginDirective,\n ],\n host: {\n '[class.ng-doc-tab-group-plain]': \"appearance() === 'plain'\",\n },\n})\nexport class NgDocTabGroupComponent<T = number> {\n /**\n * `framed` draws the header bar and the panel as one surface; `plain` draws only the tabs over\n * a line, and the panel takes no frame or background of its own, for content that has its own.\n */\n readonly appearance = input<'framed' | 'plain'>('framed');\n\n /** Id of the tab to open; the first tab opens when it is not set or matches no tab. */\n readonly openedTab = input<T | undefined>(undefined);\n\n /** The tabs of the group. */\n readonly tabs: Signal<ReadonlyArray<NgDocTabComponent<T>>> =\n contentChildren<NgDocTabComponent<T>>(NgDocTabComponent);\n\n /** Header buttons of the tabs, in order. */\n readonly tabElements: Signal<ReadonlyArray<ElementRef<HTMLElement>>> =\n viewChildren<ElementRef<HTMLElement>>('headerTab');\n\n /**\n * The open tab. It follows `openedTab` and the tab list; a tab the user selects stays open as\n * long as it is in the group and `openedTab` does not change.\n */\n readonly selectedTab = linkedSignal<\n { tabs: ReadonlyArray<NgDocTabComponent<T>>; opened: T | undefined },\n NgDocTabComponent<T> | undefined\n >({\n source: () => ({ tabs: this.tabs(), opened: this.openedTab() }),\n computation: ({ tabs, opened }, previous) => {\n const kept: NgDocTabComponent<T> | undefined =\n previous?.value && previous.source.opened === opened && tabs.includes(previous.value)\n ? previous.value\n : undefined;\n\n return (\n kept ??\n (opened !== undefined && opened !== null\n ? tabs.find((tab: NgDocTabComponent<T>) => tab.id() === opened)\n : undefined) ??\n tabs[0]\n );\n },\n });\n\n /** Index of the open tab, or -1. */\n readonly selectedIndex: Signal<number> = computed(() => {\n const selected: NgDocTabComponent<T> | undefined = this.selectedTab();\n\n return selected ? this.tabs().indexOf(selected) : -1;\n });\n\n /** Prefix of the ids that tie the tabs to the panel. */\n protected readonly idPrefix: string = `ng-doc-tab-group-${nextId++}`;\n\n /**\n * Opens a tab.\n * @param tab - The tab to open.\n */\n selectTab(tab: NgDocTabComponent<T>): void {\n untracked(() => this.selectedTab.set(tab));\n }\n\n /**\n * Moves the selection with the keyboard and focuses the new tab.\n * @param event - The key press on a tab.\n */\n protected onKeydown(event: KeyboardEvent): void {\n const tabs: ReadonlyArray<NgDocTabComponent<T>> = this.tabs();\n const current: number = Math.max(this.selectedIndex(), 0);\n const next: number | undefined = {\n ArrowRight: (current + 1) % tabs.length,\n ArrowLeft: (current - 1 + tabs.length) % tabs.length,\n Home: 0,\n End: tabs.length - 1,\n }[event.key];\n\n if (next !== undefined && tabs[next]) {\n event.preventDefault();\n this.selectTab(tabs[next]);\n this.tabElements()[next]?.nativeElement.focus();\n }\n }\n}\n","<div class=\"ng-doc-tabs-header\">\n <div class=\"ng-doc-tabs-wrapper\" role=\"tablist\" ngDocSelectionHost>\n <ng-doc-selection [align]=\"null\" />\n @for (tab of tabs(); track tab; let i = $index) {\n <button\n type=\"button\"\n class=\"ng-doc-tab\"\n role=\"tab\"\n [id]=\"idPrefix + '-tab-' + i\"\n [attr.aria-selected]=\"tab === selectedTab()\"\n [attr.aria-controls]=\"idPrefix + '-panel'\"\n [attr.tabindex]=\"tab === selectedTab() ? 0 : -1\"\n [class.selected]=\"tab === selectedTab()\"\n [ngDocSelectionOrigin]=\"tab === selectedTab()\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onKeydown($event)\"\n #headerTab>\n <span class=\"ng-doc-tab-text\">\n <ng-container *polymorpheusOutlet=\"tab.label() as text; context: {}\">{{\n text\n }}</ng-container>\n </span>\n </button>\n }\n </div>\n</div>\n\n<div\n class=\"ng-doc-body-wrapper\"\n role=\"tabpanel\"\n [id]=\"idPrefix + '-panel'\"\n [attr.aria-labelledby]=\"selectedIndex() >= 0 ? idPrefix + '-tab-' + selectedIndex() : null\">\n <div *polymorpheusOutlet=\"selectedTab()?.content() ?? '' as text; context: {}\">\n {{ text }}\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ng-doc/ui-kit",
|
|
3
|
-
"version": "22.
|
|
3
|
+
"version": "22.1.0",
|
|
4
4
|
"description": "The UI components NgDoc sites are built from.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"tslib": "^2.6.2",
|
|
34
|
-
"@ng-doc/core": "22.
|
|
34
|
+
"@ng-doc/core": "22.1.0"
|
|
35
35
|
},
|
|
36
36
|
"publishConfig": {
|
|
37
37
|
"access": "public"
|
|
@@ -20,6 +20,11 @@ declare class NgDocTabComponent<T> {
|
|
|
20
20
|
* the newly opened one.
|
|
21
21
|
*/
|
|
22
22
|
declare class NgDocTabGroupComponent<T = number> {
|
|
23
|
+
/**
|
|
24
|
+
* `framed` draws the header bar and the panel as one surface; `plain` draws only the tabs over
|
|
25
|
+
* a line, and the panel takes no frame or background of its own, for content that has its own.
|
|
26
|
+
*/
|
|
27
|
+
readonly appearance: _angular_core.InputSignal<"framed" | "plain">;
|
|
23
28
|
/** Id of the tab to open; the first tab opens when it is not set or matches no tab. */
|
|
24
29
|
readonly openedTab: _angular_core.InputSignal<T | undefined>;
|
|
25
30
|
/** The tabs of the group. */
|
|
@@ -46,7 +51,7 @@ declare class NgDocTabGroupComponent<T = number> {
|
|
|
46
51
|
*/
|
|
47
52
|
protected onKeydown(event: KeyboardEvent): void;
|
|
48
53
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocTabGroupComponent<any>, never>;
|
|
49
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocTabGroupComponent<any>, "ng-doc-tab-group", never, { "openedTab": { "alias": "openedTab"; "required": false; "isSignal": true; }; }, {}, ["tabs"], never, true, never>;
|
|
54
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocTabGroupComponent<any>, "ng-doc-tab-group", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "openedTab": { "alias": "openedTab"; "required": false; "isSignal": true; }; }, {}, ["tabs"], never, true, never>;
|
|
50
55
|
}
|
|
51
56
|
|
|
52
57
|
export { NgDocTabComponent, NgDocTabGroupComponent };
|