@tetacom/ng-components 1.2.6 → 1.2.7
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/component/tabs/tabs/tabs.component.d.ts +10 -1
- package/docs/badgeDocs.mdx +17 -22
- package/docs/chipDocs.mdx +13 -15
- package/docs/tabsDocs.mdx +107 -89
- package/esm2022/component/table/head-cell-dropdown/head-cell-dropdown.component.mjs +2 -2
- package/esm2022/component/tabs/tab/tab.component.mjs +2 -2
- package/esm2022/component/tabs/tabs/tabs.component.mjs +23 -11
- package/fesm2022/tetacom-ng-components.mjs +23 -11
- package/fesm2022/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
- package/style/badge.scss +11 -12
- package/style/chips.scss +102 -14
- package/style/presets/font-presets.scss +8 -0
- package/style/tabs.scss +42 -18
|
@@ -8,10 +8,19 @@ export interface ITabChangeEvent {
|
|
|
8
8
|
}
|
|
9
9
|
export declare class TabsComponent implements AfterContentChecked {
|
|
10
10
|
classTabs: boolean;
|
|
11
|
+
get verticalClassTabs(): boolean;
|
|
11
12
|
/**
|
|
12
13
|
* An identifier of an initially selected (active) tab. Use the "select" method to switch a tab programmatically.
|
|
13
14
|
*/
|
|
14
15
|
activeId: string | null;
|
|
16
|
+
/**
|
|
17
|
+
* Tabs direction
|
|
18
|
+
*/
|
|
19
|
+
direction: 'horizontal' | 'vertical';
|
|
20
|
+
/**
|
|
21
|
+
* Tabs size
|
|
22
|
+
*/
|
|
23
|
+
size: 's' | 'm';
|
|
15
24
|
/**
|
|
16
25
|
* Whether the closed tabs should be hidden without destroying them
|
|
17
26
|
*/
|
|
@@ -30,5 +39,5 @@ export declare class TabsComponent implements AfterContentChecked {
|
|
|
30
39
|
ngAfterContentChecked(): void;
|
|
31
40
|
private _getTabById;
|
|
32
41
|
static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, never>;
|
|
33
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "teta-tabs", never, { "activeId": { "alias": "activeId"; "required": false; }; "destroyOnHide": { "alias": "destroyOnHide"; "required": false; }; }, { "tabChange": "tabChange"; }, ["tabs"],
|
|
42
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "teta-tabs", never, { "activeId": { "alias": "activeId"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "size": { "alias": "size"; "required": false; }; "destroyOnHide": { "alias": "destroyOnHide"; "required": false; }; }, { "tabChange": "tabChange"; }, ["tabs"], never, true, never>;
|
|
34
43
|
}
|
package/docs/badgeDocs.mdx
CHANGED
|
@@ -1,24 +1,19 @@
|
|
|
1
|
-
import {Meta} from
|
|
2
|
-
import BadgeStories from
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import BadgeStories from '../src/component/badge/Badge.stories';
|
|
3
3
|
|
|
4
|
-
<Meta of={BadgeStories}/>
|
|
4
|
+
<Meta of={BadgeStories} />
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<li>Обводка- реализуется добавлением класса <code>badge</code></li>
|
|
21
|
-
<li>Заливка - необходимо добавить класс <code>badge</code> и <code>badge-"палитра"_filled</code> (Пример: badge-green_filled)</li>
|
|
22
|
-
</ul>
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
6
|
+
# Badge
|
|
7
|
+
|
|
8
|
+
Badge — показывает статус объекта, например, им можно показать разные этапы какого-то процесса:
|
|
9
|
+
|
|
10
|
+
- Запланированно
|
|
11
|
+
- В работе
|
|
12
|
+
- Завершено
|
|
13
|
+
|
|
14
|
+
### Как использовать
|
|
15
|
+
|
|
16
|
+
У Badge есть 2 варианта отображения:
|
|
17
|
+
|
|
18
|
+
- Обводка- реализуется добавлением класса `badge`
|
|
19
|
+
- Заливка - необходимо добавить класс `badge` и `badge-"палитра"_filled` ( Пример: `badge-green_filled` )
|
package/docs/chipDocs.mdx
CHANGED
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
import {Meta} from
|
|
2
|
-
import ChipStories from
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import ChipStories from '../src/component/chip/Chip.stories';
|
|
3
3
|
|
|
4
|
-
<Meta of={ChipStories}/>
|
|
4
|
+
<Meta of={ChipStories} />
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
</div>
|
|
17
|
-
</div>
|
|
6
|
+
# Чипы
|
|
7
|
+
|
|
8
|
+
- Чипы — это компактные элементы, которые представляют атрибут или действие.
|
|
9
|
+
- Чипы позволяют пользователям получать информацию, делать выбор, фильтровать контент или запускать действия.
|
|
10
|
+
|
|
11
|
+
### Как использовать
|
|
12
|
+
|
|
13
|
+
Для того чтобы сделать чип, нужно к блоку добавить CSS класс `chip`
|
|
14
|
+
|
|
15
|
+
Если помимо текста в чипе нужна кнопка (допустим кнопка с иконкой closeBig), то она должна идти после текста
|
package/docs/tabsDocs.mdx
CHANGED
|
@@ -1,145 +1,163 @@
|
|
|
1
|
-
import {Meta} from
|
|
2
|
-
import TabsStories from
|
|
3
|
-
|
|
4
|
-
<Meta of={TabsStories}/>
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import TabsStories from '../src/component/tabs/Tabs.stories';
|
|
3
|
+
|
|
4
|
+
<Meta of={TabsStories} />
|
|
5
|
+
|
|
6
|
+
# Таб
|
|
7
|
+
|
|
8
|
+
Tab (таб) — компонент, который переключают вкладки на странице. Активный таб выделен цветом и помечен специальным
|
|
9
|
+
маркером — горизонтальной или вертикальной линией
|
|
10
|
+
|
|
11
|
+
Табы группируют контент и помогают в навигации
|
|
12
|
+
|
|
13
|
+
Основные правила применения табов:
|
|
14
|
+
|
|
15
|
+
### Правила применения
|
|
16
|
+
|
|
17
|
+
- Не использовать табы для переключения состояний. Для таких моментов лучше использовать радиокнопки
|
|
18
|
+
- Лучше всего подойдет для второстепенной навигации
|
|
19
|
+
- Разделяйте табы и контент, чтобы информация лучше читалась
|
|
20
|
+
|
|
21
|
+
### Виды табов
|
|
22
|
+
|
|
23
|
+
Существует 2 вида табов:
|
|
24
|
+
|
|
25
|
+
- Вертикальный(vertical)
|
|
26
|
+
- Горизонтальный(horizontal)
|
|
27
|
+
|
|
28
|
+
Для изменения вида таба, нужно передать свойство `direction`
|
|
29
|
+
|
|
30
|
+
### Как использовать
|
|
31
|
+
|
|
32
|
+
Для начала нужно создать `<teta-tabs>` - обертку для табов и служит для их объединения, т.е.
|
|
33
|
+
среди них может быть выбран только один
|
|
34
|
+
|
|
35
|
+
Таб создается при помощи тега `<teta-tab>`
|
|
36
|
+
|
|
37
|
+
Внутрь необходимо передать контент для шапки и наполнение таба. Это делается при помощи `ng-template` с
|
|
38
|
+
директивами `<tetaTabTitle>` и `tetaTabContent`
|
|
39
|
+
|
|
40
|
+
### Пример кода
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
<teta-tabs>
|
|
44
|
+
<teta-tab>
|
|
45
|
+
<ng-template tetaTabTitle>
|
|
46
|
+
<p>1</p>
|
|
47
|
+
</ng-template>
|
|
48
|
+
<ng-template tetaTabContent>
|
|
49
|
+
<div class="padding-v-3 padding-h-2">conteeeeeeeeeeeent 1</div>
|
|
50
|
+
</ng-template>
|
|
51
|
+
</teta-tab>
|
|
52
|
+
<teta-tab>
|
|
53
|
+
<ng-template tetaTabTitle>
|
|
54
|
+
<p>2</p>
|
|
55
|
+
</ng-template>
|
|
56
|
+
<ng-template tetaTabContent>
|
|
57
|
+
<div class="padding-v-3 padding-h-2">conteeeeeent 2</div>
|
|
58
|
+
</ng-template>
|
|
59
|
+
</teta-tab>
|
|
60
|
+
</teta-tabs>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Свойства
|
|
64
|
+
|
|
65
|
+
#### teta-tabs
|
|
66
|
+
|
|
67
|
+
<table>
|
|
68
|
+
<thead>
|
|
58
69
|
<tr>
|
|
59
70
|
<th>Свойство</th>
|
|
60
71
|
<th>Tип</th>
|
|
61
72
|
<th>Описание</th>
|
|
62
73
|
</tr>
|
|
63
|
-
|
|
64
|
-
|
|
74
|
+
</thead>
|
|
75
|
+
<tbody>
|
|
65
76
|
<tr>
|
|
66
|
-
<td class=
|
|
77
|
+
<td class="text-align-center">
|
|
67
78
|
<p>activeId</p>
|
|
68
79
|
</td>
|
|
69
|
-
<td class=
|
|
80
|
+
<td class="text-align-center">
|
|
70
81
|
<code>string</code>
|
|
71
82
|
</td>
|
|
72
|
-
<td class=
|
|
73
|
-
<p
|
|
83
|
+
<td class="text-align-center">
|
|
84
|
+
<p>
|
|
85
|
+
Используется для указания выбранного таба (аттрибут не обязателен, т.к. компонент сам умеет управлять своим
|
|
86
|
+
состоянием)
|
|
87
|
+
</p>
|
|
74
88
|
</td>
|
|
75
89
|
</tr>
|
|
76
90
|
<tr>
|
|
77
|
-
<td class=
|
|
91
|
+
<td class="text-align-center">
|
|
78
92
|
<p>tabChange</p>
|
|
79
93
|
</td>
|
|
80
|
-
<td class=
|
|
94
|
+
<td class="text-align-center">
|
|
81
95
|
<code>function</code>
|
|
82
96
|
</td>
|
|
83
|
-
<td class=
|
|
97
|
+
<td class="text-align-center">
|
|
84
98
|
<p>Принимает функцию, которая применяется при изменении активного таба.Отдает текущее состояния.</p>
|
|
85
99
|
</td>
|
|
86
100
|
</tr>
|
|
87
101
|
<tr>
|
|
88
|
-
<td class=
|
|
102
|
+
<td class="text-align-center">
|
|
89
103
|
<p>destroyOnHide</p>
|
|
90
104
|
</td>
|
|
91
|
-
<td class=
|
|
105
|
+
<td class="text-align-center">
|
|
92
106
|
<code>boolean</code>
|
|
93
107
|
</td>
|
|
94
|
-
<td class=
|
|
108
|
+
<td class="text-align-center">
|
|
95
109
|
<p>Свойство, отвечающее за уничтожение и пересоздание содержимого таба.</p>
|
|
96
110
|
</td>
|
|
97
111
|
</tr>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
112
|
+
</tbody>
|
|
113
|
+
</table>
|
|
114
|
+
|
|
115
|
+
#### teta-tab
|
|
116
|
+
|
|
117
|
+
<table>
|
|
118
|
+
<thead>
|
|
103
119
|
<tr>
|
|
104
120
|
<th>Свойство</th>
|
|
105
121
|
<th>Tип</th>
|
|
106
122
|
<th>Описание</th>
|
|
107
123
|
</tr>
|
|
108
|
-
|
|
109
|
-
|
|
124
|
+
</thead>
|
|
125
|
+
<tbody>
|
|
110
126
|
<tr>
|
|
111
|
-
<td class=
|
|
127
|
+
<td class="text-align-center">
|
|
112
128
|
<p>id</p>
|
|
113
129
|
</td>
|
|
114
|
-
<td class=
|
|
130
|
+
<td class="text-align-center">
|
|
115
131
|
<code>string</code>
|
|
116
132
|
</td>
|
|
117
|
-
<td class=
|
|
133
|
+
<td class="text-align-center">
|
|
118
134
|
<p>Идентификатор,который используется при выборе активного таба</p>
|
|
119
135
|
</td>
|
|
120
136
|
</tr>
|
|
121
137
|
<tr>
|
|
122
|
-
<td class=
|
|
138
|
+
<td class="text-align-center">
|
|
123
139
|
<p>disabled</p>
|
|
124
140
|
</td>
|
|
125
|
-
<td class=
|
|
141
|
+
<td class="text-align-center">
|
|
126
142
|
<code>boolean</code>
|
|
127
143
|
</td>
|
|
128
|
-
<td class=
|
|
144
|
+
<td class="text-align-center">
|
|
129
145
|
<p>Отключает взаимодействие с табом</p>
|
|
130
146
|
</td>
|
|
131
147
|
</tr>
|
|
132
148
|
<tr>
|
|
133
|
-
<td class=
|
|
149
|
+
<td class="text-align-center">
|
|
134
150
|
<p>title</p>
|
|
135
151
|
</td>
|
|
136
|
-
<td class=
|
|
152
|
+
<td class="text-align-center">
|
|
137
153
|
<code>string</code>
|
|
138
154
|
</td>
|
|
139
|
-
<td class=
|
|
140
|
-
<p
|
|
155
|
+
<td class="text-align-center">
|
|
156
|
+
<p>
|
|
157
|
+
Замента директиве <code>tetaTabTitle</code>. Это свойство нужно использовать, если требуется вывести просто
|
|
158
|
+
текст без дополнительных модификаций.
|
|
159
|
+
</p>
|
|
141
160
|
</td>
|
|
142
161
|
</tr>
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
</div>
|
|
162
|
+
</tbody>
|
|
163
|
+
</table>
|
|
@@ -27,7 +27,7 @@ export class HeadCellDropdownComponent {
|
|
|
27
27
|
return index;
|
|
28
28
|
}
|
|
29
29
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: HeadCellDropdownComponent, deps: [{ token: i1.TableService }, { token: i2.TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: HeadCellDropdownComponent, isStandalone: true, selector: "teta-head-cell-dropdown", inputs: { columns: "columns", column: "column", state: "state", data: "data", tabTemplates: "tabTemplates", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange" }, ngImport: i0, template: "@if (dropDownOpen) {\n <teta-tabs class=\"column_auto\">\n @for (tab of tabTemplates; track trackIndex($index)) {\n @if (tab.showTab(column)) {\n <teta-tab>\n <ng-template tetaTabTitle>\n @if (tab.icon) {\n <teta-icon [name]=\"tab.icon\" [palette]=\"'text'\"></teta-icon>\n }\n </ng-template>\n <ng-template tetaTabContent>\n <ng-container\n *ngTemplateOutlet=\"tab.template; context: {\n column: column,\n columns: columns,\n data: data,\n state: state,\n close: closeDropdown\n }\"></ng-container>\n </ng-template>\n </teta-tab>\n }\n }\n </teta-tabs>\n}\n", styles: [":host{display:flex;flex-grow:1;min-height:0;min-width:250px}\n"], dependencies: [{ kind: "component", type: TabsComponent, selector: "teta-tabs", inputs: ["activeId", "destroyOnHide"], outputs: ["tabChange"] }, { kind: "component", type: TabComponent, selector: "teta-tab", inputs: ["id", "title", "disabled"] }, { kind: "directive", type: TabTitleDirective, selector: "[tetaTabTitle]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: TabContentDirective, selector: "[tetaTabContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
30
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: HeadCellDropdownComponent, isStandalone: true, selector: "teta-head-cell-dropdown", inputs: { columns: "columns", column: "column", state: "state", data: "data", tabTemplates: "tabTemplates", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange" }, ngImport: i0, template: "@if (dropDownOpen) {\n <teta-tabs class=\"column_auto\">\n @for (tab of tabTemplates; track trackIndex($index)) {\n @if (tab.showTab(column)) {\n <teta-tab>\n <ng-template tetaTabTitle>\n @if (tab.icon) {\n <teta-icon [name]=\"tab.icon\" [palette]=\"'text'\"></teta-icon>\n }\n </ng-template>\n <ng-template tetaTabContent>\n <ng-container\n *ngTemplateOutlet=\"tab.template; context: {\n column: column,\n columns: columns,\n data: data,\n state: state,\n close: closeDropdown\n }\"></ng-container>\n </ng-template>\n </teta-tab>\n }\n }\n </teta-tabs>\n}\n", styles: [":host{display:flex;flex-grow:1;min-height:0;min-width:250px}\n"], dependencies: [{ kind: "component", type: TabsComponent, selector: "teta-tabs", inputs: ["activeId", "direction", "size", "destroyOnHide"], outputs: ["tabChange"] }, { kind: "component", type: TabComponent, selector: "teta-tab", inputs: ["id", "title", "disabled"] }, { kind: "directive", type: TabTitleDirective, selector: "[tetaTabTitle]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: TabContentDirective, selector: "[tetaTabContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
31
31
|
}
|
|
32
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: HeadCellDropdownComponent, decorators: [{
|
|
33
33
|
type: Component,
|
|
@@ -54,4 +54,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
54
54
|
}], dropDownOpenChange: [{
|
|
55
55
|
type: Output
|
|
56
56
|
}] } });
|
|
57
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
57
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZC1jZWxsLWRyb3Bkb3duLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnQvdGFibGUvaGVhZC1jZWxsLWRyb3Bkb3duL2hlYWQtY2VsbC1kcm9wZG93bi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50L3RhYmxlL2hlYWQtY2VsbC1kcm9wZG93bi9oZWFkLWNlbGwtZHJvcGRvd24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBR3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3hFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUVqRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDdkQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUMvRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNuRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDNUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGdDQUFnQyxDQUFDOzs7O0FBaUIvRCxNQUFNLE9BQU8seUJBQXlCO0lBVXBDLFlBQ1UsSUFBcUIsRUFDckIsT0FBMEIsRUFDMUIsSUFBdUI7UUFGdkIsU0FBSSxHQUFKLElBQUksQ0FBaUI7UUFDckIsWUFBTyxHQUFQLE9BQU8sQ0FBbUI7UUFDMUIsU0FBSSxHQUFKLElBQUksQ0FBbUI7UUFOdkIsdUJBQWtCLEdBQzFCLElBQUksWUFBWSxFQUFXLENBQUM7UUFROUIsa0JBQWEsR0FBRyxHQUFHLEVBQUU7WUFDbkIsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7WUFDMUIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN0QyxDQUFDLENBQUM7SUFMQyxDQUFDO0lBT0osVUFBVSxDQUFDLEtBQUs7UUFDZCxPQUFPLEtBQUssQ0FBQztJQUNmLENBQUM7OEdBdkJVLHlCQUF5QjtrR0FBekIseUJBQXlCLHNSQ3JDdEMsMnVCQXlCQSx3SERJUSxhQUFhLDBJQUNiLFlBQVksMEZBQ1osaUJBQWlCLDJEQUNqQixhQUFhLG9HQUNiLG1CQUFtQiw2REFDbkIsZ0JBQWdCOzsyRkFHWCx5QkFBeUI7a0JBZnJDLFNBQVM7K0JBQ0kseUJBQXlCLG1CQUdsQix1QkFBdUIsQ0FBQyxNQUFNLGNBQ25DLElBQUksV0FDUDt3QkFDTCxhQUFhO3dCQUNiLFlBQVk7d0JBQ1osaUJBQWlCO3dCQUNqQixhQUFhO3dCQUNiLG1CQUFtQjt3QkFDbkIsZ0JBQWdCO3FCQUNuQjtpSkFHTSxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNJLGtCQUFrQjtzQkFBM0IsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBJVHJlZURhdGEgfSBmcm9tICcuLi8uLi8uLi9jb21tb24vY29udHJhY3QvaS10cmVlLWRhdGEnO1xuaW1wb3J0IHsgVGV0YUNvbmZpZ1NlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9sb2NhbGUvdGV0YS1jb25maWcuc2VydmljZSc7XG5pbXBvcnQgeyBGaWx0ZXJTdGF0ZSB9IGZyb20gJy4uLy4uL2ZpbHRlci9jb250YXJjdC9maWx0ZXItc3RhdGUnO1xuaW1wb3J0IHsgSGVhZERyb3Bkb3duVGFiIH0gZnJvbSAnLi4vY29udHJhY3QvaGVhZC1kcm9wZG93bi10YWInO1xuaW1wb3J0IHsgVGFibGVDb2x1bW4gfSBmcm9tICcuLi9jb250cmFjdC90YWJsZS1jb2x1bW4nO1xuaW1wb3J0IHsgVGFibGVTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZS90YWJsZS5zZXJ2aWNlJztcbmltcG9ydCB7IE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgVGFiQ29udGVudERpcmVjdGl2ZSB9IGZyb20gJy4uLy4uL3RhYnMvdGFiLWNvbnRlbnQuZGlyZWN0aXZlJztcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICcuLi8uLi9pY29uL2ljb24vaWNvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgVGFiVGl0bGVEaXJlY3RpdmUgfSBmcm9tICcuLi8uLi90YWJzL3RhYi10aXRsZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgVGFiQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vdGFicy90YWIvdGFiLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBUYWJzQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vdGFicy90YWJzL3RhYnMuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd0ZXRhLWhlYWQtY2VsbC1kcm9wZG93bicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2hlYWQtY2VsbC1kcm9wZG93bi5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vaGVhZC1jZWxsLWRyb3Bkb3duLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBpbXBvcnRzOiBbXG4gICAgICAgIFRhYnNDb21wb25lbnQsXG4gICAgICAgIFRhYkNvbXBvbmVudCxcbiAgICAgICAgVGFiVGl0bGVEaXJlY3RpdmUsXG4gICAgICAgIEljb25Db21wb25lbnQsXG4gICAgICAgIFRhYkNvbnRlbnREaXJlY3RpdmUsXG4gICAgICAgIE5nVGVtcGxhdGVPdXRsZXQsXG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgSGVhZENlbGxEcm9wZG93bkNvbXBvbmVudDxUPiB7XG4gIEBJbnB1dCgpIGNvbHVtbnM6IElUcmVlRGF0YVtdO1xuICBASW5wdXQoKSBjb2x1bW46IFRhYmxlQ29sdW1uO1xuICBASW5wdXQoKSBzdGF0ZTogRmlsdGVyU3RhdGU7XG4gIEBJbnB1dCgpIGRhdGE6IFRbXTtcbiAgQElucHV0KCkgdGFiVGVtcGxhdGVzOiBIZWFkRHJvcGRvd25UYWJbXTtcbiAgQElucHV0KCkgZHJvcERvd25PcGVuOiBib29sZWFuO1xuICBAT3V0cHV0KCkgZHJvcERvd25PcGVuQ2hhbmdlOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPVxuICAgIG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIF9zdmM6IFRhYmxlU2VydmljZTxUPixcbiAgICBwcml2YXRlIF9jb25maWc6IFRldGFDb25maWdTZXJ2aWNlLFxuICAgIHByaXZhdGUgX2NkcjogQ2hhbmdlRGV0ZWN0b3JSZWZcbiAgKSB7fVxuXG4gIGNsb3NlRHJvcGRvd24gPSAoKSA9PiB7XG4gICAgdGhpcy5kcm9wRG93bk9wZW4gPSBmYWxzZTtcbiAgICB0aGlzLmRyb3BEb3duT3BlbkNoYW5nZS5lbWl0KGZhbHNlKTtcbiAgfTtcblxuICB0cmFja0luZGV4KGluZGV4KSB7XG4gICAgcmV0dXJuIGluZGV4O1xuICB9XG59XG4iLCJAaWYgKGRyb3BEb3duT3Blbikge1xuICA8dGV0YS10YWJzIGNsYXNzPVwiY29sdW1uX2F1dG9cIj5cbiAgICBAZm9yICh0YWIgb2YgdGFiVGVtcGxhdGVzOyB0cmFjayB0cmFja0luZGV4KCRpbmRleCkpIHtcbiAgICAgIEBpZiAodGFiLnNob3dUYWIoY29sdW1uKSkge1xuICAgICAgICA8dGV0YS10YWI+XG4gICAgICAgICAgPG5nLXRlbXBsYXRlIHRldGFUYWJUaXRsZT5cbiAgICAgICAgICAgIEBpZiAodGFiLmljb24pIHtcbiAgICAgICAgICAgICAgPHRldGEtaWNvbiBbbmFtZV09XCJ0YWIuaWNvblwiIFtwYWxldHRlXT1cIid0ZXh0J1wiPjwvdGV0YS1pY29uPlxuICAgICAgICAgICAgfVxuICAgICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICAgICAgPG5nLXRlbXBsYXRlIHRldGFUYWJDb250ZW50PlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwidGFiLnRlbXBsYXRlOyBjb250ZXh0OiB7XG4gICAgICAgICAgICBjb2x1bW46IGNvbHVtbixcbiAgICAgICAgICAgIGNvbHVtbnM6IGNvbHVtbnMsXG4gICAgICAgICAgICBkYXRhOiBkYXRhLFxuICAgICAgICAgICAgc3RhdGU6IHN0YXRlLFxuICAgICAgICAgICAgY2xvc2U6IGNsb3NlRHJvcGRvd25cbiAgICAgICAgICB9XCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgPC90ZXRhLXRhYj5cbiAgICAgIH1cbiAgICB9XG4gIDwvdGV0YS10YWJzPlxufVxuIl19
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, ContentChild, Input
|
|
1
|
+
import { ChangeDetectionStrategy, Component, ContentChild, Input } from '@angular/core';
|
|
2
2
|
import { TabContentDirective } from '../tab-content.directive';
|
|
3
3
|
import { TabTitleDirective } from '../tab-title.directive';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
@@ -39,4 +39,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
39
39
|
type: ContentChild,
|
|
40
40
|
args: [TabContentDirective, { static: false }]
|
|
41
41
|
}] } });
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnQvdGFicy90YWIvdGFiLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQXVCLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdHLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQy9ELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHdCQUF3QixDQUFDOztBQUUzRCxJQUFJLE1BQU0sR0FBRyxDQUFDLENBQUM7QUFTZixNQUFNLE9BQU8sWUFBWTtJQVB6QjtRQVFFOztXQUVHO1FBQ00sT0FBRSxHQUFHLFlBQVksTUFBTSxFQUFFLEVBQUUsQ0FBQztRQUtyQzs7V0FFRztRQUNNLGFBQVEsR0FBRyxLQUFLLENBQUM7S0FhM0I7SUFQQyxzQ0FBc0M7SUFDdEMsMENBQTBDO0lBRTFDLHFCQUFxQjtRQUNuQiw2Q0FBNkM7UUFDN0MsaURBQWlEO0lBQ25ELENBQUM7OEdBeEJVLFlBQVk7a0dBQVosWUFBWSxzS0FjVCxpQkFBaUIsNkVBRWpCLG1CQUFtQixnREFyQnZCLEVBQUU7OzJGQUtELFlBQVk7a0JBUHhCLFNBQVM7K0JBQ0UsVUFBVSxZQUNWLEVBQUUsbUJBRUssdUJBQXVCLENBQUMsTUFBTSxjQUNuQyxJQUFJOzhCQU1QLEVBQUU7c0JBQVYsS0FBSztnQkFJRyxLQUFLO3NCQUFiLEtBQUs7Z0JBSUcsUUFBUTtzQkFBaEIsS0FBSztnQkFHTixRQUFRO3NCQURQLFlBQVk7dUJBQUMsaUJBQWlCLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFO2dCQUdsRCxVQUFVO3NCQURULFlBQVk7dUJBQUMsbUJBQW1CLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJDb250ZW50Q2hlY2tlZCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgQ29udGVudENoaWxkLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGFiQ29udGVudERpcmVjdGl2ZSB9IGZyb20gJy4uL3RhYi1jb250ZW50LmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBUYWJUaXRsZURpcmVjdGl2ZSB9IGZyb20gJy4uL3RhYi10aXRsZS5kaXJlY3RpdmUnO1xuXG5sZXQgbmV4dElkID0gMDtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGV0YS10YWInLFxuICB0ZW1wbGF0ZTogJycsXG4gIHN0eWxlVXJsczogWycuL3RhYi5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgVGFiQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50Q2hlY2tlZCB7XG4gIC8qKlxuICAgKiBVbmlxdWUgdGFiIGlkZW50aWZpZXIuIE11c3QgYmUgdW5pcXVlIGZvciB0aGUgZW50aXJlIGRvY3VtZW50IGZvciBwcm9wZXIgYWNjZXNzaWJpbGl0eSBzdXBwb3J0LlxuICAgKi9cbiAgQElucHV0KCkgaWQgPSBgdGV0YS10YWItJHtuZXh0SWQrK31gO1xuICAvKipcbiAgICogU2ltcGxlIChzdHJpbmcgb25seSkgdGl0bGUuIFVzZSB0aGUgXCJJdHNrVGFiVGl0bGVEaXJlY3RpdmVcIiBkaXJlY3RpdmUgZm9yIG1vcmUgY29tcGxleCB1c2UtY2FzZXMuXG4gICAqL1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuICAvKipcbiAgICogQWxsb3dzIHRvZ2dsaW5nIGRpc2FibGVkIHN0YXRlIG9mIGEgZ2l2ZW4gc3RhdGUuIERpc2FibGVkIHRhYnMgY2FuJ3QgYmUgc2VsZWN0ZWQuXG4gICAqL1xuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIEBDb250ZW50Q2hpbGQoVGFiVGl0bGVEaXJlY3RpdmUsIHsgc3RhdGljOiBmYWxzZSB9KVxuICB0aXRsZVRwbDogVGFiVGl0bGVEaXJlY3RpdmU7XG4gIEBDb250ZW50Q2hpbGQoVGFiQ29udGVudERpcmVjdGl2ZSwgeyBzdGF0aWM6IGZhbHNlIH0pXG4gIGNvbnRlbnRUcGw6IFRhYkNvbnRlbnREaXJlY3RpdmU7XG4gIC8vIHRpdGxlVHBsOiBUYWJUaXRsZURpcmVjdGl2ZSB8IG51bGw7XG4gIC8vIGNvbnRlbnRUcGw6IFRhYkNvbnRlbnREaXJlY3RpdmUgfCBudWxsO1xuXG4gIG5nQWZ0ZXJDb250ZW50Q2hlY2tlZCgpOiB2b2lkIHtcbiAgICAvLyB0aGlzLnRpdGxlVHBsID0gdGhpcy50aXRsZVRlbXBsYXRlcy5maXJzdDtcbiAgICAvLyB0aGlzLmNvbnRlbnRUcGwgPSB0aGlzLmNvbnRlbnRUZW1wbGF0ZXMuZmlyc3Q7XG4gIH1cbn1cbiJdfQ==
|
|
@@ -3,8 +3,19 @@ import { TabComponent } from '../tab/tab.component';
|
|
|
3
3
|
import { NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export class TabsComponent {
|
|
6
|
+
get verticalClassTabs() {
|
|
7
|
+
return this.direction === 'vertical';
|
|
8
|
+
}
|
|
6
9
|
constructor() {
|
|
7
10
|
this.classTabs = true;
|
|
11
|
+
/**
|
|
12
|
+
* Tabs direction
|
|
13
|
+
*/
|
|
14
|
+
this.direction = 'horizontal';
|
|
15
|
+
/**
|
|
16
|
+
* Tabs size
|
|
17
|
+
*/
|
|
18
|
+
this.size = 'm';
|
|
8
19
|
/**
|
|
9
20
|
* Whether the closed tabs should be hidden without destroying them
|
|
10
21
|
*/
|
|
@@ -20,9 +31,7 @@ export class TabsComponent {
|
|
|
20
31
|
*/
|
|
21
32
|
select(tabId) {
|
|
22
33
|
const selectedTab = this._getTabById(tabId);
|
|
23
|
-
if (selectedTab &&
|
|
24
|
-
!selectedTab.disabled &&
|
|
25
|
-
this.activeId !== selectedTab.id) {
|
|
34
|
+
if (selectedTab && !selectedTab.disabled && this.activeId !== selectedTab.id) {
|
|
26
35
|
let defaultPrevented = false;
|
|
27
36
|
this.tabChange.emit({
|
|
28
37
|
activeId: this.activeId,
|
|
@@ -38,27 +47,30 @@ export class TabsComponent {
|
|
|
38
47
|
}
|
|
39
48
|
ngAfterContentChecked() {
|
|
40
49
|
const activeTab = this._getTabById(this.activeId);
|
|
41
|
-
this.activeId = activeTab
|
|
42
|
-
? activeTab.id
|
|
43
|
-
: this.tabs.length
|
|
44
|
-
? this.tabs.first.id
|
|
45
|
-
: null;
|
|
50
|
+
this.activeId = activeTab ? activeTab.id : this.tabs.length ? this.tabs.first.id : null;
|
|
46
51
|
}
|
|
47
52
|
_getTabById(id) {
|
|
48
53
|
const tabsWithId = this.tabs.filter((tab) => tab.id === id);
|
|
49
54
|
return tabsWithId.length ? tabsWithId[0] : null;
|
|
50
55
|
}
|
|
51
56
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
52
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: TabsComponent, isStandalone: true, selector: "teta-tabs", inputs: { activeId: "activeId", destroyOnHide: "destroyOnHide" }, outputs: { tabChange: "tabChange" }, host: { properties: { "class.tabs": "this.classTabs" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div class=\"tabs-head\"
|
|
57
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: TabsComponent, isStandalone: true, selector: "teta-tabs", inputs: { activeId: "activeId", direction: "direction", size: "size", destroyOnHide: "destroyOnHide" }, outputs: { tabChange: "tabChange" }, host: { properties: { "class.tabs": "this.classTabs", "class.tabs_vertical": "this.verticalClassTabs" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div role=\"tablist\" class=\"tabs-head\" [class.tabs-head_small]=\"size === 's'\">\n @for (tab of tabs; track tab) {\n <button\n type=\"button\"\n class=\"tabs-head-item\"\n (click)=\"select(tab.id)\"\n [class.tabs-head-item_active]=\"tab.id === activeId\"\n [disabled]=\"tab.disabled\"\n >\n <span\n [id]=\"tab.id\"\n class=\"tabs-title\"\n role=\"tab\"\n [attr.tabindex]=\"tab.disabled ? '-1' : undefined\"\n [attr.aria-controls]=\"!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null\"\n [attr.aria-expanded]=\"tab.id === activeId\"\n [attr.aria-disabled]=\"tab.disabled\"\n >\n {{ tab.title }}\n <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n </span>\n </button>\n }\n</div>\n<div class=\"tabs-content\">\n @for (tab of tabs; track tab) { @if (!destroyOnHide || tab.id === activeId) {\n <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n } }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
53
58
|
}
|
|
54
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TabsComponent, decorators: [{
|
|
55
60
|
type: Component,
|
|
56
|
-
args: [{ selector: 'teta-tabs', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"tabs-head\"
|
|
61
|
+
args: [{ selector: 'teta-tabs', standalone: true, imports: [NgTemplateOutlet], template: "<div role=\"tablist\" class=\"tabs-head\" [class.tabs-head_small]=\"size === 's'\">\n @for (tab of tabs; track tab) {\n <button\n type=\"button\"\n class=\"tabs-head-item\"\n (click)=\"select(tab.id)\"\n [class.tabs-head-item_active]=\"tab.id === activeId\"\n [disabled]=\"tab.disabled\"\n >\n <span\n [id]=\"tab.id\"\n class=\"tabs-title\"\n role=\"tab\"\n [attr.tabindex]=\"tab.disabled ? '-1' : undefined\"\n [attr.aria-controls]=\"!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null\"\n [attr.aria-expanded]=\"tab.id === activeId\"\n [attr.aria-disabled]=\"tab.disabled\"\n >\n {{ tab.title }}\n <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n </span>\n </button>\n }\n</div>\n<div class=\"tabs-content\">\n @for (tab of tabs; track tab) { @if (!destroyOnHide || tab.id === activeId) {\n <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n } }\n</div>\n" }]
|
|
57
62
|
}], ctorParameters: () => [], propDecorators: { classTabs: [{
|
|
58
63
|
type: HostBinding,
|
|
59
64
|
args: ['class.tabs']
|
|
65
|
+
}], verticalClassTabs: [{
|
|
66
|
+
type: HostBinding,
|
|
67
|
+
args: ['class.tabs_vertical']
|
|
60
68
|
}], activeId: [{
|
|
61
69
|
type: Input
|
|
70
|
+
}], direction: [{
|
|
71
|
+
type: Input
|
|
72
|
+
}], size: [{
|
|
73
|
+
type: Input
|
|
62
74
|
}], destroyOnHide: [{
|
|
63
75
|
type: Input
|
|
64
76
|
}], tabChange: [{
|
|
@@ -67,4 +79,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
67
79
|
type: ContentChildren,
|
|
68
80
|
args: [TabComponent]
|
|
69
81
|
}] } });
|
|
70
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
82
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50L3RhYnMvdGFicy90YWJzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnQvdGFicy90YWJzL3RhYnMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFDVCxlQUFlLEVBQ2YsWUFBWSxFQUNaLFdBQVcsRUFDWCxLQUFLLEVBQ0wsTUFBTSxFQUNOLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDcEQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBZW5ELE1BQU0sT0FBTyxhQUFhO0lBRXhCLElBQXdDLGlCQUFpQjtRQUN2RCxPQUFPLElBQUksQ0FBQyxTQUFTLEtBQUssVUFBVSxDQUFDO0lBQ3ZDLENBQUM7SUE0QkQ7UUEvQjJCLGNBQVMsR0FBRyxJQUFJLENBQUM7UUFTNUM7O1dBRUc7UUFDTSxjQUFTLEdBQThCLFlBQVksQ0FBQztRQUU3RDs7V0FFRztRQUNNLFNBQUksR0FBYyxHQUFHLENBQUM7UUFFL0I7O1dBRUc7UUFDTSxrQkFBYSxHQUFHLElBQUksQ0FBQztRQUU5Qjs7V0FFRztRQUNPLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBbUIsQ0FBQztJQUkzQyxDQUFDO0lBRWhCOzs7T0FHRztJQUNILE1BQU0sQ0FBQyxLQUFhO1FBQ2xCLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDNUMsSUFBSSxXQUFXLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUssV0FBVyxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQzdFLElBQUksZ0JBQWdCLEdBQUcsS0FBSyxDQUFDO1lBRTdCLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDO2dCQUNsQixRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVE7Z0JBQ3ZCLE1BQU0sRUFBRSxXQUFXLENBQUMsRUFBRTtnQkFDdEIsY0FBYyxFQUFFLEdBQUcsRUFBRTtvQkFDbkIsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDO2dCQUMxQixDQUFDO2FBQ0YsQ0FBQyxDQUFDO1lBRUgsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7Z0JBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsV0FBVyxDQUFDLEVBQUUsQ0FBQztZQUNqQyxDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7SUFFRCxxQkFBcUI7UUFDbkIsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDbEQsSUFBSSxDQUFDLFFBQVEsR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUMxRixDQUFDO0lBRU8sV0FBVyxDQUFDLEVBQWlCO1FBQ25DLE1BQU0sVUFBVSxHQUFtQixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUMsR0FBRyxDQUFDLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUM1RSxPQUFPLFVBQVUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO0lBQ2xELENBQUM7OEdBakVVLGFBQWE7a0dBQWIsYUFBYSxrVkE4QlAsWUFBWSw2QkN4RC9CLDIrQkE2QkEsMERETFksZ0JBQWdCOzsyRkFFZixhQUFhO2tCQVB6QixTQUFTOytCQUNFLFdBQVcsY0FHVCxJQUFJLFdBQ1AsQ0FBQyxnQkFBZ0IsQ0FBQzt3REFHQSxTQUFTO3NCQUFuQyxXQUFXO3VCQUFDLFlBQVk7Z0JBQ2UsaUJBQWlCO3NCQUF4RCxXQUFXO3VCQUFDLHFCQUFxQjtnQkFNekIsUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxTQUFTO3NCQUFqQixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFLRyxhQUFhO3NCQUFyQixLQUFLO2dCQUtJLFNBQVM7c0JBQWxCLE1BQU07Z0JBRXdCLElBQUk7c0JBQWxDLGVBQWU7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyQ29udGVudENoZWNrZWQsXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBRdWVyeUxpc3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGFiQ29tcG9uZW50IH0gZnJvbSAnLi4vdGFiL3RhYi5jb21wb25lbnQnO1xuaW1wb3J0IHsgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVRhYkNoYW5nZUV2ZW50IHtcbiAgYWN0aXZlSWQ6IHN0cmluZyB8IG51bGw7XG4gIG5leHRJZDogc3RyaW5nO1xuICBwcmV2ZW50RGVmYXVsdDogKCkgPT4gdm9pZDtcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGV0YS10YWJzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RhYnMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90YWJzLmNvbXBvbmVudC5zY3NzJ10sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ1RlbXBsYXRlT3V0bGV0XSxcbn0pXG5leHBvcnQgY2xhc3MgVGFic0NvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudENoZWNrZWQge1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnRhYnMnKSBjbGFzc1RhYnMgPSB0cnVlO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnRhYnNfdmVydGljYWwnKSBnZXQgdmVydGljYWxDbGFzc1RhYnMoKSB7XG4gICAgcmV0dXJuIHRoaXMuZGlyZWN0aW9uID09PSAndmVydGljYWwnO1xuICB9XG4gIC8qKlxuICAgKiBBbiBpZGVudGlmaWVyIG9mIGFuIGluaXRpYWxseSBzZWxlY3RlZCAoYWN0aXZlKSB0YWIuIFVzZSB0aGUgXCJzZWxlY3RcIiBtZXRob2QgdG8gc3dpdGNoIGEgdGFiIHByb2dyYW1tYXRpY2FsbHkuXG4gICAqL1xuICBASW5wdXQoKSBhY3RpdmVJZDogc3RyaW5nIHwgbnVsbDtcblxuICAvKipcbiAgICogVGFicyBkaXJlY3Rpb25cbiAgICovXG4gIEBJbnB1dCgpIGRpcmVjdGlvbjogJ2hvcml6b250YWwnIHwgJ3ZlcnRpY2FsJyA9ICdob3Jpem9udGFsJztcblxuICAvKipcbiAgICogVGFicyBzaXplXG4gICAqL1xuICBASW5wdXQoKSBzaXplOiAncycgfCAnbScgPSAnbSc7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgdGhlIGNsb3NlZCB0YWJzIHNob3VsZCBiZSBoaWRkZW4gd2l0aG91dCBkZXN0cm95aW5nIHRoZW1cbiAgICovXG4gIEBJbnB1dCgpIGRlc3Ryb3lPbkhpZGUgPSB0cnVlO1xuXG4gIC8qKlxuICAgKiBBIHRhYiBjaGFuZ2UgZXZlbnQgZmlyZWQgcmlnaHQgYmVmb3JlIHRoZSB0YWIgc2VsZWN0aW9uIGhhcHBlbnMuIFNlZSBOZ2JUYWJDaGFuZ2VFdmVudCBmb3IgcGF5bG9hZCBkZXRhaWxzXG4gICAqL1xuICBAT3V0cHV0KCkgdGFiQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxJVGFiQ2hhbmdlRXZlbnQ+KCk7XG5cbiAgQENvbnRlbnRDaGlsZHJlbihUYWJDb21wb25lbnQpIHRhYnM6IFF1ZXJ5TGlzdDxUYWJDb21wb25lbnQ+O1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICAvKipcbiAgICogU2VsZWN0cyB0aGUgdGFiIHdpdGggdGhlIGdpdmVuIGlkIGFuZCBzaG93cyBpdHMgYXNzb2NpYXRlZCBwYW5lLlxuICAgKiBBbnkgb3RoZXIgdGFiIHRoYXQgd2FzIHByZXZpb3VzbHkgc2VsZWN0ZWQgYmVjb21lcyB1bnNlbGVjdGVkIGFuZCBpdHMgYXNzb2NpYXRlZCBwYW5lIGlzIGhpZGRlbi5cbiAgICovXG4gIHNlbGVjdCh0YWJJZDogc3RyaW5nKTogdm9pZCB7XG4gICAgY29uc3Qgc2VsZWN0ZWRUYWIgPSB0aGlzLl9nZXRUYWJCeUlkKHRhYklkKTtcbiAgICBpZiAoc2VsZWN0ZWRUYWIgJiYgIXNlbGVjdGVkVGFiLmRpc2FibGVkICYmIHRoaXMuYWN0aXZlSWQgIT09IHNlbGVjdGVkVGFiLmlkKSB7XG4gICAgICBsZXQgZGVmYXVsdFByZXZlbnRlZCA9IGZhbHNlO1xuXG4gICAgICB0aGlzLnRhYkNoYW5nZS5lbWl0KHtcbiAgICAgICAgYWN0aXZlSWQ6IHRoaXMuYWN0aXZlSWQsXG4gICAgICAgIG5leHRJZDogc2VsZWN0ZWRUYWIuaWQsXG4gICAgICAgIHByZXZlbnREZWZhdWx0OiAoKSA9PiB7XG4gICAgICAgICAgZGVmYXVsdFByZXZlbnRlZCA9IHRydWU7XG4gICAgICAgIH0sXG4gICAgICB9KTtcblxuICAgICAgaWYgKCFkZWZhdWx0UHJldmVudGVkKSB7XG4gICAgICAgIHRoaXMuYWN0aXZlSWQgPSBzZWxlY3RlZFRhYi5pZDtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBuZ0FmdGVyQ29udGVudENoZWNrZWQoKTogdm9pZCB7XG4gICAgY29uc3QgYWN0aXZlVGFiID0gdGhpcy5fZ2V0VGFiQnlJZCh0aGlzLmFjdGl2ZUlkKTtcbiAgICB0aGlzLmFjdGl2ZUlkID0gYWN0aXZlVGFiID8gYWN0aXZlVGFiLmlkIDogdGhpcy50YWJzLmxlbmd0aCA/IHRoaXMudGFicy5maXJzdC5pZCA6IG51bGw7XG4gIH1cblxuICBwcml2YXRlIF9nZXRUYWJCeUlkKGlkOiBzdHJpbmcgfCBudWxsKTogVGFiQ29tcG9uZW50IHwgbnVsbCB7XG4gICAgY29uc3QgdGFic1dpdGhJZDogVGFiQ29tcG9uZW50W10gPSB0aGlzLnRhYnMuZmlsdGVyKCh0YWIpID0+IHRhYi5pZCA9PT0gaWQpO1xuICAgIHJldHVybiB0YWJzV2l0aElkLmxlbmd0aCA/IHRhYnNXaXRoSWRbMF0gOiBudWxsO1xuICB9XG59XG4iLCI8ZGl2IHJvbGU9XCJ0YWJsaXN0XCIgY2xhc3M9XCJ0YWJzLWhlYWRcIiBbY2xhc3MudGFicy1oZWFkX3NtYWxsXT1cInNpemUgPT09ICdzJ1wiPlxuICBAZm9yICh0YWIgb2YgdGFiczsgdHJhY2sgdGFiKSB7XG4gIDxidXR0b25cbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICBjbGFzcz1cInRhYnMtaGVhZC1pdGVtXCJcbiAgICAoY2xpY2spPVwic2VsZWN0KHRhYi5pZClcIlxuICAgIFtjbGFzcy50YWJzLWhlYWQtaXRlbV9hY3RpdmVdPVwidGFiLmlkID09PSBhY3RpdmVJZFwiXG4gICAgW2Rpc2FibGVkXT1cInRhYi5kaXNhYmxlZFwiXG4gID5cbiAgICA8c3BhblxuICAgICAgW2lkXT1cInRhYi5pZFwiXG4gICAgICBjbGFzcz1cInRhYnMtdGl0bGVcIlxuICAgICAgcm9sZT1cInRhYlwiXG4gICAgICBbYXR0ci50YWJpbmRleF09XCJ0YWIuZGlzYWJsZWQgPyAnLTEnIDogdW5kZWZpbmVkXCJcbiAgICAgIFthdHRyLmFyaWEtY29udHJvbHNdPVwiIWRlc3Ryb3lPbkhpZGUgfHwgdGFiLmlkID09PSBhY3RpdmVJZCA/IHRhYi5pZCArICctcGFuZWwnIDogbnVsbFwiXG4gICAgICBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cInRhYi5pZCA9PT0gYWN0aXZlSWRcIlxuICAgICAgW2F0dHIuYXJpYS1kaXNhYmxlZF09XCJ0YWIuZGlzYWJsZWRcIlxuICAgID5cbiAgICAgIHt7IHRhYi50aXRsZSB9fVxuICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInRhYi50aXRsZVRwbD8udGVtcGxhdGVcIj48L25nLXRlbXBsYXRlPlxuICAgIDwvc3Bhbj5cbiAgPC9idXR0b24+XG4gIH1cbjwvZGl2PlxuPGRpdiBjbGFzcz1cInRhYnMtY29udGVudFwiPlxuICBAZm9yICh0YWIgb2YgdGFiczsgdHJhY2sgdGFiKSB7IEBpZiAoIWRlc3Ryb3lPbkhpZGUgfHwgdGFiLmlkID09PSBhY3RpdmVJZCkge1xuICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwidGFiLmNvbnRlbnRUcGw/LnRlbXBsYXRlXCI+PC9uZy10ZW1wbGF0ZT5cbiAgfSB9XG48L2Rpdj5cbiJdfQ==
|