@memberjunction/ng-tabstrip 3.4.0 → 4.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.
- package/README.md +92 -354
- package/dist/lib/tab/tab.component.d.ts.map +1 -1
- package/dist/lib/tab/tab.component.js +8 -8
- package/dist/lib/tab/tab.component.js.map +1 -1
- package/dist/lib/tab-body/tab-body.component.d.ts.map +1 -1
- package/dist/lib/tab-body/tab-body.component.js +3 -3
- package/dist/lib/tab-body/tab-body.component.js.map +1 -1
- package/dist/lib/tab-strip/tab-strip.component.d.ts.map +1 -1
- package/dist/lib/tab-strip/tab-strip.component.js +14 -16
- package/dist/lib/tab-strip/tab-strip.component.js.map +1 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1,21 +1,6 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @memberjunction/ng-tabstrip
|
|
2
2
|
|
|
3
|
-
A lightweight
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- **Simple API**: Easy to use and customize
|
|
8
|
-
- **Closeable Tabs**: Option to enable tab closing
|
|
9
|
-
- **Scrollable Tabs**: Automatically handles overflow with scrolling buttons
|
|
10
|
-
- **Event-driven**: Rich event system for tab selection and management
|
|
11
|
-
- **Context Menu Support**: Handle right-click events on tabs
|
|
12
|
-
- **Responsive Design**: Adapts to different screen sizes
|
|
13
|
-
- **Tab Navigation**: Methods for tab selection, scrolling, and visibility
|
|
14
|
-
- **Dynamic Content**: Support for dynamically changing tab content
|
|
15
|
-
- **Customizable**: Configure tab appearance and behavior
|
|
16
|
-
- **Lightweight**: Minimal dependencies and overhead
|
|
17
|
-
- **Tab Visibility**: Hide/show tabs dynamically
|
|
18
|
-
- **Fill Container**: Optional width/height fill of parent container
|
|
3
|
+
A lightweight, zero-dependency Angular tab strip component for MemberJunction applications. Provides dynamic tab management with closeable tabs, scroll overflow handling, context menus, and programmatic tab control.
|
|
19
4
|
|
|
20
5
|
## Installation
|
|
21
6
|
|
|
@@ -23,384 +8,137 @@ A lightweight and flexible Angular tab strip component for MemberJunction applic
|
|
|
23
8
|
npm install @memberjunction/ng-tabstrip
|
|
24
9
|
```
|
|
25
10
|
|
|
11
|
+
## Overview
|
|
12
|
+
|
|
13
|
+
The tab strip renders a row of tab headers with corresponding body panels. It handles overflow with horizontal scroll buttons, supports closeable tabs with cancelable close events, and provides a rich event system for tab lifecycle management. Unlike Kendo UI tabs, this component has no external dependencies beyond Angular.
|
|
14
|
+
|
|
15
|
+
```mermaid
|
|
16
|
+
flowchart TD
|
|
17
|
+
subgraph TabStrip["MJTabStripComponent"]
|
|
18
|
+
A["Tab Headers (scrollable)"]
|
|
19
|
+
A --> B["MJTabComponent 1"]
|
|
20
|
+
A --> C["MJTabComponent 2"]
|
|
21
|
+
A --> D["MJTabComponent N"]
|
|
22
|
+
end
|
|
23
|
+
subgraph Bodies["Tab Bodies"]
|
|
24
|
+
E["MJTabBodyComponent 1"]
|
|
25
|
+
F["MJTabBodyComponent 2"]
|
|
26
|
+
G["MJTabBodyComponent N"]
|
|
27
|
+
end
|
|
28
|
+
subgraph Events["Event System"]
|
|
29
|
+
H["BeforeTabSelected (cancelable)"]
|
|
30
|
+
I["TabSelected"]
|
|
31
|
+
J["BeforeTabClosed (cancelable)"]
|
|
32
|
+
K["TabClosed (with done callback)"]
|
|
33
|
+
L["TabContextMenu"]
|
|
34
|
+
end
|
|
35
|
+
|
|
36
|
+
B --> E
|
|
37
|
+
C --> F
|
|
38
|
+
D --> G
|
|
39
|
+
TabStrip --> Events
|
|
40
|
+
|
|
41
|
+
style TabStrip fill:#2d6a9f,stroke:#1a4971,color:#fff
|
|
42
|
+
style Bodies fill:#2d8659,stroke:#1a5c3a,color:#fff
|
|
43
|
+
style Events fill:#7c5295,stroke:#563a6b,color:#fff
|
|
44
|
+
```
|
|
45
|
+
|
|
26
46
|
## Usage
|
|
27
47
|
|
|
28
|
-
### Import
|
|
48
|
+
### Module Import
|
|
29
49
|
|
|
30
50
|
```typescript
|
|
31
51
|
import { MJTabStripModule } from '@memberjunction/ng-tabstrip';
|
|
32
52
|
|
|
33
53
|
@NgModule({
|
|
34
|
-
imports: [
|
|
35
|
-
MJTabStripModule,
|
|
36
|
-
// other imports
|
|
37
|
-
],
|
|
38
|
-
// ...
|
|
54
|
+
imports: [MJTabStripModule]
|
|
39
55
|
})
|
|
40
|
-
export class YourModule {
|
|
56
|
+
export class YourModule {}
|
|
41
57
|
```
|
|
42
58
|
|
|
43
|
-
### Basic
|
|
59
|
+
### Basic Usage
|
|
44
60
|
|
|
45
61
|
```html
|
|
46
62
|
<mj-tabstrip
|
|
47
63
|
[SelectedTabIndex]="selectedTab"
|
|
48
64
|
(TabSelected)="onTabSelected($event)"
|
|
49
65
|
(BeforeTabClosed)="onBeforeTabClosed($event)">
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
<mj-tab [Name]="'
|
|
53
|
-
<mj-tab [Name]="'
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<!-- Tab bodies -->
|
|
66
|
+
|
|
67
|
+
<mj-tab [Name]="'overview'" [TabCloseable]="false">Overview</mj-tab>
|
|
68
|
+
<mj-tab [Name]="'details'" [TabCloseable]="true">Details</mj-tab>
|
|
69
|
+
<mj-tab [Name]="'settings'" [TabCloseable]="true">Settings</mj-tab>
|
|
70
|
+
|
|
57
71
|
<mj-tab-body>
|
|
58
72
|
<h2>Overview Content</h2>
|
|
59
|
-
<p>This is the overview tab content...</p>
|
|
60
73
|
</mj-tab-body>
|
|
61
|
-
|
|
62
74
|
<mj-tab-body>
|
|
63
75
|
<h2>Details Content</h2>
|
|
64
|
-
<p>This is the details tab content...</p>
|
|
65
76
|
</mj-tab-body>
|
|
66
|
-
|
|
67
77
|
<mj-tab-body>
|
|
68
78
|
<h2>Settings Content</h2>
|
|
69
|
-
<p>This is the settings tab content...</p>
|
|
70
79
|
</mj-tab-body>
|
|
71
80
|
</mj-tabstrip>
|
|
72
81
|
```
|
|
73
82
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
```typescript
|
|
77
|
-
import { Component } from '@angular/core';
|
|
78
|
-
import { TabEvent, TabCancelableEvent, TabClosedEvent } from '@memberjunction/ng-tabstrip';
|
|
79
|
-
|
|
80
|
-
@Component({
|
|
81
|
-
selector: 'app-dynamic-tabs',
|
|
82
|
-
template: `
|
|
83
|
-
<div class="tab-container">
|
|
84
|
-
<button (click)="addNewTab()">Add Tab</button>
|
|
85
|
-
|
|
86
|
-
<mj-tabstrip
|
|
87
|
-
[SelectedTabIndex]="selectedTabIndex"
|
|
88
|
-
(TabSelected)="onTabSelected($event)"
|
|
89
|
-
(BeforeTabClosed)="onBeforeTabClosed($event)"
|
|
90
|
-
(TabClosed)="onTabClosed($event)"
|
|
91
|
-
#tabStrip>
|
|
92
|
-
|
|
93
|
-
<mj-tab
|
|
94
|
-
*ngFor="let tab of tabs"
|
|
95
|
-
[Name]="tab.name"
|
|
96
|
-
[TabCloseable]="tab.closeable"
|
|
97
|
-
[Visible]="tab.visible"
|
|
98
|
-
[ID]="tab.id">
|
|
99
|
-
{{tab.title}}
|
|
100
|
-
</mj-tab>
|
|
101
|
-
|
|
102
|
-
<mj-tab-body *ngFor="let tab of tabs">
|
|
103
|
-
<div class="tab-content">
|
|
104
|
-
<h3>{{tab.title}} Content</h3>
|
|
105
|
-
<p>{{tab.content}}</p>
|
|
106
|
-
<button (click)="updateTabContent(tab.id)">Update Content</button>
|
|
107
|
-
</div>
|
|
108
|
-
</mj-tab-body>
|
|
109
|
-
</mj-tabstrip>
|
|
110
|
-
</div>
|
|
111
|
-
`,
|
|
112
|
-
styles: [`
|
|
113
|
-
.tab-container {
|
|
114
|
-
height: 500px;
|
|
115
|
-
border: 1px solid #ccc;
|
|
116
|
-
padding: 10px;
|
|
117
|
-
}
|
|
118
|
-
.tab-content {
|
|
119
|
-
padding: 20px;
|
|
120
|
-
}
|
|
121
|
-
`]
|
|
122
|
-
})
|
|
123
|
-
export class DynamicTabsComponent {
|
|
124
|
-
selectedTabIndex = 0;
|
|
125
|
-
|
|
126
|
-
tabs = [
|
|
127
|
-
{
|
|
128
|
-
id: 1,
|
|
129
|
-
name: 'home',
|
|
130
|
-
title: 'Home',
|
|
131
|
-
content: 'Welcome to the home tab',
|
|
132
|
-
closeable: false,
|
|
133
|
-
visible: true
|
|
134
|
-
},
|
|
135
|
-
{
|
|
136
|
-
id: 2,
|
|
137
|
-
name: 'reports',
|
|
138
|
-
title: 'Reports',
|
|
139
|
-
content: 'View your reports here',
|
|
140
|
-
closeable: true,
|
|
141
|
-
visible: true
|
|
142
|
-
},
|
|
143
|
-
{
|
|
144
|
-
id: 3,
|
|
145
|
-
name: 'settings',
|
|
146
|
-
title: 'Settings',
|
|
147
|
-
content: 'Configure your settings',
|
|
148
|
-
closeable: true,
|
|
149
|
-
visible: true
|
|
150
|
-
}
|
|
151
|
-
];
|
|
152
|
-
|
|
153
|
-
nextTabId = 4;
|
|
154
|
-
|
|
155
|
-
addNewTab() {
|
|
156
|
-
const newTab = {
|
|
157
|
-
id: this.nextTabId++,
|
|
158
|
-
name: `tab-${Date.now()}`,
|
|
159
|
-
title: `New Tab ${this.nextTabId-1}`,
|
|
160
|
-
content: `This is the content for new tab ${this.nextTabId-1}`,
|
|
161
|
-
closeable: true,
|
|
162
|
-
visible: true
|
|
163
|
-
};
|
|
164
|
-
|
|
165
|
-
this.tabs.push(newTab);
|
|
166
|
-
// Need to wait for next tick to select the new tab
|
|
167
|
-
setTimeout(() => {
|
|
168
|
-
this.selectedTabIndex = this.tabs.length - 1;
|
|
169
|
-
});
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
updateTabContent(tabId: number) {
|
|
173
|
-
const tab = this.tabs.find(t => t.id === tabId);
|
|
174
|
-
if (tab) {
|
|
175
|
-
tab.content = `Updated content at ${new Date().toLocaleTimeString()}`;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
onTabSelected(event: TabEvent) {
|
|
180
|
-
console.log('Tab selected:', event.index, event.tab?.Name);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
onBeforeTabClosed(event: TabCancelableEvent) {
|
|
184
|
-
// Optionally prevent closing specific tabs
|
|
185
|
-
if (event.tab?.Name === 'important-tab') {
|
|
186
|
-
event.cancel = true;
|
|
187
|
-
alert('This tab cannot be closed!');
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
onTabClosed(event: TabClosedEvent) {
|
|
192
|
-
// Remove the tab from our array
|
|
193
|
-
const index = this.tabs.findIndex(t => t.id === event.tab?.ID);
|
|
194
|
-
if (index >= 0) {
|
|
195
|
-
this.tabs.splice(index, 1);
|
|
196
|
-
// Signal that we're done processing
|
|
197
|
-
event.done();
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
## API Reference
|
|
204
|
-
|
|
205
|
-
### MJTabStripComponent
|
|
206
|
-
|
|
207
|
-
The main component that contains and manages the tabs.
|
|
208
|
-
|
|
209
|
-
#### Inputs
|
|
210
|
-
|
|
211
|
-
- `SelectedTabIndex`: number - The index of the selected tab
|
|
212
|
-
- `FillWidth`: boolean - Whether the tab strip should fill its container width (default: true)
|
|
213
|
-
- `FillHeight`: boolean - Whether the tab strip should fill its container height (default: true)
|
|
214
|
-
- `ScrollAmount`: number - Pixels to scroll when using scroll buttons (default: 150)
|
|
215
|
-
|
|
216
|
-
#### Outputs
|
|
217
|
-
|
|
218
|
-
- `BeforeTabSelected`: EventEmitter<TabCancelableEvent> - Fires before a tab is selected
|
|
219
|
-
- `TabSelected`: EventEmitter<TabEvent> - Fires when a tab is selected
|
|
220
|
-
- `BeforeTabClosed`: EventEmitter<TabCancelableEvent> - Fires before a tab is closed
|
|
221
|
-
- `TabClosed`: EventEmitter<TabClosedEvent> - Fires when a tab is closed
|
|
222
|
-
- `TabContextMenu`: EventEmitter<TabContextMenuEvent> - Fires when a tab is right-clicked
|
|
223
|
-
- `TabScrolled`: EventEmitter<void> - Fires when the tab strip is scrolled
|
|
224
|
-
- `ResizeContainer`: EventEmitter<void> - Fires when the tab strip suggests a container resize
|
|
225
|
-
|
|
226
|
-
#### Methods
|
|
227
|
-
|
|
228
|
-
- `SelectTabByName(tabName: string): MJTabComponent | undefined` - Selects a tab by its name and returns the tab if found
|
|
229
|
-
- `GetTabByName(tabName: string): MJTabComponent | undefined` - Gets a tab component by its name
|
|
230
|
-
- `CloseTab(tabIndex: number): Promise<void>` - Closes a tab by its index (async)
|
|
231
|
-
- `scrollLeft(): void` - Scrolls the tab strip to the left by 150 pixels (note: currently ignores ScrollAmount input)
|
|
232
|
-
- `scrollRight(): void` - Scrolls the tab strip to the right by 150 pixels (note: currently ignores ScrollAmount input)
|
|
233
|
-
- `scrollIntoView(tabIndex: number): void` - Scrolls to make a specific tab visible
|
|
234
|
-
- `RefreshTabs(): void` - Refreshes the tab strip after dynamic changes
|
|
235
|
-
|
|
236
|
-
#### Properties
|
|
237
|
-
|
|
238
|
-
- `Tabs`: MJTabComponent[] - Array of tab components
|
|
239
|
-
- `TabBodies`: MJTabBodyComponent[] - Array of tab body components
|
|
240
|
-
|
|
241
|
-
### MJTabComponent
|
|
242
|
-
|
|
243
|
-
Represents a tab header in the tab strip.
|
|
244
|
-
|
|
245
|
-
#### Inputs
|
|
246
|
-
|
|
247
|
-
- `Name`: string - The name of the tab (used for finding tabs by name)
|
|
248
|
-
- `ID`: any - Custom identifier for the tab
|
|
249
|
-
- `Props`: any - Additional properties to associate with the tab
|
|
250
|
-
- `TabCloseable`: boolean - Whether the tab can be closed (default: false)
|
|
251
|
-
- `Visible`: boolean - Whether the tab is visible (default: true)
|
|
252
|
-
- `TabSelected`: boolean - Whether the tab is selected (managed by the tab strip)
|
|
253
|
-
|
|
254
|
-
#### Methods
|
|
255
|
-
|
|
256
|
-
- `selectTab(): void` - Selects this tab
|
|
257
|
-
- `closeTab(event: MouseEvent): void` - Closes this tab
|
|
258
|
-
- `handleContextMenu(event: MouseEvent): void` - Handles context menu events
|
|
259
|
-
|
|
260
|
-
#### Properties
|
|
261
|
-
|
|
262
|
-
- `TabStrip`: MJTabStripComponent - Reference to the parent tab strip component
|
|
263
|
-
|
|
264
|
-
### MJTabBodyComponent
|
|
265
|
-
|
|
266
|
-
Represents the content area for a tab.
|
|
267
|
-
|
|
268
|
-
#### Inputs
|
|
269
|
-
|
|
270
|
-
- `TabVisible`: boolean - Whether the tab body is visible (managed by the tab strip)
|
|
271
|
-
- `FillWidth`: boolean - Whether the tab body should fill its container width (default: true)
|
|
272
|
-
- `FillHeight`: boolean - Whether the tab body should fill its container height (default: true)
|
|
273
|
-
|
|
274
|
-
### Event Types
|
|
275
|
-
|
|
276
|
-
#### TabEvent
|
|
277
|
-
|
|
278
|
-
Base event type for tab operations.
|
|
279
|
-
|
|
280
|
-
- `index`: number - The index of the tab
|
|
281
|
-
- `tab`: MJTabComponent - Reference to the tab component
|
|
282
|
-
- `body`: MJTabBodyComponent - Reference to the tab body component
|
|
283
|
-
|
|
284
|
-
#### TabCancelableEvent
|
|
285
|
-
|
|
286
|
-
Event type that allows cancellation of an operation.
|
|
287
|
-
|
|
288
|
-
- All properties from TabEvent
|
|
289
|
-
- `cancel`: boolean - Set to true to cancel the operation
|
|
290
|
-
|
|
291
|
-
#### TabClosedEvent
|
|
292
|
-
|
|
293
|
-
Event type for tab closure.
|
|
294
|
-
|
|
295
|
-
- All properties from TabEvent
|
|
296
|
-
- `newTabIndex`: number - The suggested new tab index after closing
|
|
297
|
-
- `done`: (error?: any) => {} - Callback that must be called when processing is complete
|
|
298
|
-
|
|
299
|
-
#### TabContextMenuEvent
|
|
300
|
-
|
|
301
|
-
Event type for context menu events.
|
|
302
|
-
|
|
303
|
-
- All properties from TabEvent
|
|
304
|
-
- `mouseEvent`: MouseEvent - The original mouse event
|
|
305
|
-
|
|
306
|
-
## Advanced Usage
|
|
307
|
-
|
|
308
|
-
### Tab Visibility Management
|
|
309
|
-
|
|
310
|
-
You can dynamically hide/show tabs while maintaining their state:
|
|
311
|
-
|
|
312
|
-
```typescript
|
|
313
|
-
// Hide a tab
|
|
314
|
-
const tab = this.tabStrip.GetTabByName('settings');
|
|
315
|
-
if (tab) {
|
|
316
|
-
tab.Visible = false; // Tab will be hidden but not removed
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
// Show it again
|
|
320
|
-
tab.Visible = true;
|
|
321
|
-
```
|
|
322
|
-
|
|
323
|
-
Note: Hidden tabs cannot be selected. If a selected tab is hidden, the tab strip will automatically select the first visible tab.
|
|
83
|
+
## Components
|
|
324
84
|
|
|
325
|
-
|
|
85
|
+
| Component | Selector | Purpose |
|
|
86
|
+
|-----------|----------|---------|
|
|
87
|
+
| `MJTabStripComponent` | `mj-tabstrip` | Container managing tab selection and scroll |
|
|
88
|
+
| `MJTabComponent` | `mj-tab` | Individual tab header |
|
|
89
|
+
| `MJTabBodyComponent` | `mj-tab-body` | Content panel for a tab |
|
|
326
90
|
|
|
327
|
-
|
|
328
|
-
@ViewChild('tabStrip') tabStrip!: MJTabStripComponent;
|
|
329
|
-
|
|
330
|
-
// Select a specific tab
|
|
331
|
-
this.tabStrip.SelectedTabIndex = 2;
|
|
91
|
+
## MJTabStripComponent
|
|
332
92
|
|
|
333
|
-
|
|
334
|
-
this.tabStrip.SelectTabByName('reports');
|
|
93
|
+
### Inputs
|
|
335
94
|
|
|
336
|
-
|
|
337
|
-
|
|
95
|
+
| Property | Type | Default | Description |
|
|
96
|
+
|----------|------|---------|-------------|
|
|
97
|
+
| `SelectedTabIndex` | `number` | `0` | Index of the selected tab |
|
|
98
|
+
| `FillWidth` | `boolean` | `true` | Fill container width |
|
|
99
|
+
| `FillHeight` | `boolean` | `true` | Fill container height |
|
|
100
|
+
| `ScrollAmount` | `number` | `150` | Pixels to scroll per click |
|
|
338
101
|
|
|
339
|
-
|
|
340
|
-
this.tabStrip.scrollIntoView(5);
|
|
341
|
-
```
|
|
102
|
+
### Outputs
|
|
342
103
|
|
|
343
|
-
|
|
104
|
+
| Event | Type | Description |
|
|
105
|
+
|-------|------|-------------|
|
|
106
|
+
| `BeforeTabSelected` | `EventEmitter<TabCancelableEvent>` | Before tab selection (cancelable) |
|
|
107
|
+
| `TabSelected` | `EventEmitter<TabEvent>` | After tab selection |
|
|
108
|
+
| `BeforeTabClosed` | `EventEmitter<TabCancelableEvent>` | Before tab close (cancelable) |
|
|
109
|
+
| `TabClosed` | `EventEmitter<TabClosedEvent>` | After tab close (call `done()` when finished) |
|
|
110
|
+
| `TabContextMenu` | `EventEmitter<TabContextMenuEvent>` | Tab right-click |
|
|
111
|
+
| `TabScrolled` | `EventEmitter<void>` | Tab strip scrolled |
|
|
344
112
|
|
|
345
|
-
|
|
113
|
+
### Methods
|
|
346
114
|
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
115
|
+
| Method | Returns | Description |
|
|
116
|
+
|--------|---------|-------------|
|
|
117
|
+
| `SelectTabByName(name)` | `MJTabComponent \| undefined` | Select a tab by name |
|
|
118
|
+
| `GetTabByName(name)` | `MJTabComponent \| undefined` | Find a tab by name |
|
|
119
|
+
| `CloseTab(index)` | `Promise<void>` | Close a tab programmatically |
|
|
120
|
+
| `scrollIntoView(index)` | `void` | Scroll to make a tab visible |
|
|
121
|
+
| `RefreshTabs()` | `void` | Refresh after dynamic changes |
|
|
350
122
|
|
|
351
|
-
|
|
123
|
+
## MJTabComponent
|
|
352
124
|
|
|
353
|
-
|
|
354
|
-
const tab = this.tabStrip.SelectTabByName('dynamicTab');
|
|
355
|
-
if (!tab) {
|
|
356
|
-
console.error('Tab not found');
|
|
357
|
-
}
|
|
358
|
-
```
|
|
125
|
+
### Inputs
|
|
359
126
|
|
|
360
|
-
|
|
127
|
+
| Property | Type | Default | Description |
|
|
128
|
+
|----------|------|---------|-------------|
|
|
129
|
+
| `Name` | `string` | `''` | Tab identifier |
|
|
130
|
+
| `ID` | `string \| number` | -- | Custom identifier |
|
|
131
|
+
| `TabCloseable` | `boolean` | `false` | Show close button |
|
|
132
|
+
| `Visible` | `boolean` | `true` | Tab visibility |
|
|
361
133
|
|
|
362
|
-
|
|
134
|
+
## Event Types
|
|
363
135
|
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
-
|
|
367
|
-
-
|
|
368
|
-
- `.tab-header-inner` - Inner scrollable container for tabs
|
|
369
|
-
- `.tab-scroll-button` - Base class for scroll buttons
|
|
370
|
-
- `.tab-scroll-button-left` - Left scroll button
|
|
371
|
-
- `.tab-scroll-button-right` - Right scroll button
|
|
372
|
-
- `.tab-bodies` - Container for tab content
|
|
136
|
+
- **`TabEvent`** -- `{ index, tab, body }`
|
|
137
|
+
- **`TabCancelableEvent`** -- Extends TabEvent with `cancel: boolean`
|
|
138
|
+
- **`TabClosedEvent`** -- Extends TabEvent with `newTabIndex` and `done()` callback
|
|
139
|
+
- **`TabContextMenuEvent`** -- Extends TabEvent with `mouseEvent`
|
|
373
140
|
|
|
374
141
|
## Dependencies
|
|
375
142
|
|
|
376
|
-
- `@angular/common
|
|
377
|
-
-
|
|
378
|
-
- `@memberjunction/ng-container-directives`: For container directives
|
|
379
|
-
- `tslib`: ^2.3.0
|
|
380
|
-
|
|
381
|
-
## Build and Development
|
|
382
|
-
|
|
383
|
-
This package uses Angular CLI for building:
|
|
384
|
-
|
|
385
|
-
```bash
|
|
386
|
-
npm run build
|
|
387
|
-
```
|
|
388
|
-
|
|
389
|
-
The package is configured with:
|
|
390
|
-
- TypeScript compilation via `ngc`
|
|
391
|
-
- No side effects for better tree-shaking
|
|
392
|
-
- Proper peer dependencies for Angular 18.x
|
|
393
|
-
|
|
394
|
-
## Integration with MemberJunction
|
|
395
|
-
|
|
396
|
-
This tab strip component is designed to work seamlessly with other MemberJunction packages and follows the same patterns and conventions used throughout the MJ ecosystem. It's particularly useful in:
|
|
397
|
-
|
|
398
|
-
- MJ Explorer application
|
|
399
|
-
- Dashboard interfaces
|
|
400
|
-
- Multi-view forms
|
|
401
|
-
- Configuration screens
|
|
402
|
-
- Any interface requiring tabbed navigation
|
|
403
|
-
|
|
404
|
-
## License
|
|
405
|
-
|
|
406
|
-
ISC
|
|
143
|
+
- `@angular/common` / `@angular/core`
|
|
144
|
+
- [@memberjunction/ng-container-directives](../container-directives/README.md) -- Container directives
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.component.d.ts","sourceRoot":"","sources":["../../../src/lib/tab/tab.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgD,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;;AAEvE;;GAEG;AACH,
|
|
1
|
+
{"version":3,"file":"tab.component.d.ts","sourceRoot":"","sources":["../../../src/lib/tab/tab.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgD,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;;AAEvE;;GAEG;AACH,qBAMa,cAAe,SAAQ,SAAS;IAuEvB,OAAO,CAAC,QAAQ;IACxB,OAAO,CAAC,GAAG;IACJ,UAAU,EAAE,UAAU;IAxEzC,OAAO,CAAC,YAAY,CAAkB;IACtC;;OAEG;IACH,IAAa,WAAW,IAGD,OAAO,CAD7B;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,OAAO,EAG7B;IAED,OAAO,CAAC,QAAQ,CAAiB;IACjC,IAAa,OAAO,IAAI,OAAO,CAE9B;IACD,IAAW,OAAO,CAAC,KAAK,EAAE,OAAO,EAchC;IAED,OAAO,CAAC,KAAK,CAAa;IAC1B,IAAa,IAAI,IAAI,MAAM,CAE1B;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAE5B;IAED,OAAO,CAAC,GAAG,CAAa;IACxB,IAAa,EAAE,IAAI,GAAG,CAErB;IACD,IAAW,EAAE,CAAC,KAAK,EAAE,GAAG,EAEvB;IAED,OAAO,CAAC,MAAM,CAAa;IAC3B;;OAEG;IACH,IAAa,KAAK,IAAI,GAAG,CAExB;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,GAAG,EAE1B;IAED;;OAEG;IACM,YAAY,EAAE,OAAO,CAAS;IAEvC;;OAEG;IACH,IAAW,QAAQ,IAAI,mBAAmB,CAEzC;gBAC2B,QAAQ,EAAE,mBAAmB,EACrC,GAAG,EAAE,iBAAiB,EACvB,UAAU,EAAE,UAAU;IAIzC;;;OAGG;IACI,SAAS;IAIhB;;OAEG;IACI,QAAQ,CAAC,MAAM,EAAE,UAAU;IAK3B,iBAAiB,CAAC,MAAM,EAAE,UAAU;yCA7FhC,cAAc;2CAAd,cAAc;CAiG1B"}
|
|
@@ -5,10 +5,10 @@ import * as i1 from "../tab-strip/tab-strip.component";
|
|
|
5
5
|
import * as i2 from "@angular/common";
|
|
6
6
|
const _c0 = ["*"];
|
|
7
7
|
const _c1 = a0 => ({ "single-tab-selected": a0 });
|
|
8
|
-
function
|
|
8
|
+
function MJTabComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
9
9
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
10
10
|
i0.ɵɵelementStart(0, "span", 2);
|
|
11
|
-
i0.ɵɵlistener("click", function
|
|
11
|
+
i0.ɵɵlistener("click", function MJTabComponent_Conditional_2_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeTab($event)); });
|
|
12
12
|
i0.ɵɵtext(1, "\u2716");
|
|
13
13
|
i0.ɵɵelementEnd();
|
|
14
14
|
} }
|
|
@@ -106,22 +106,22 @@ export class MJTabComponent extends MJTabBase {
|
|
|
106
106
|
this.tabstrip.handleTabContextMenu($event, this);
|
|
107
107
|
}
|
|
108
108
|
static ɵfac = function MJTabComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJTabComponent)(i0.ɵɵdirectiveInject(i1.MJTabStripComponent, 1), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
|
|
109
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabComponent, selectors: [["mj-tab"]], inputs: { TabSelected: "TabSelected", Visible: "Visible", Name: "Name", ID: "ID", Props: "Props", TabCloseable: "TabCloseable" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 3, vars: 4, consts: [[1, "single-tab", 3, "click", "contextmenu", "ngClass"], [
|
|
109
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabComponent, selectors: [["mj-tab"]], inputs: { TabSelected: "TabSelected", Visible: "Visible", Name: "Name", ID: "ID", Props: "Props", TabCloseable: "TabCloseable" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 3, vars: 4, consts: [[1, "single-tab", 3, "click", "contextmenu", "ngClass"], [1, "tab-close-button"], [1, "tab-close-button", 3, "click"]], template: function MJTabComponent_Template(rf, ctx) { if (rf & 1) {
|
|
110
110
|
i0.ɵɵprojectionDef();
|
|
111
111
|
i0.ɵɵelementStart(0, "div", 0);
|
|
112
112
|
i0.ɵɵlistener("click", function MJTabComponent_Template_div_click_0_listener() { return ctx.selectTab(); })("contextmenu", function MJTabComponent_Template_div_contextmenu_0_listener($event) { return ctx.handleContextMenu($event); });
|
|
113
113
|
i0.ɵɵprojection(1);
|
|
114
|
-
i0.ɵɵ
|
|
114
|
+
i0.ɵɵconditionalCreate(2, MJTabComponent_Conditional_2_Template, 2, 0, "span", 1);
|
|
115
115
|
i0.ɵɵelementEnd();
|
|
116
116
|
} if (rf & 2) {
|
|
117
117
|
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c1, ctx.TabSelected));
|
|
118
118
|
i0.ɵɵadvance(2);
|
|
119
|
-
i0.ɵɵ
|
|
120
|
-
} }, dependencies: [i2.NgClass
|
|
119
|
+
i0.ɵɵconditional(ctx.TabCloseable ? 2 : -1);
|
|
120
|
+
} }, dependencies: [i2.NgClass], styles: [".single-tab[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-right: 2px;\n padding: .5rem;\n border-radius: 8px 8px 0 0;\n border-top: solid 1px var(--gray-600);\n border-left: solid 1px var(--gray-600);\n border-right: solid 1px var(--gray-600);\n border-bottom: 0;\n background-color: #FFF;\n}\n\n.single-tab-selected[_ngcontent-%COMP%] {\n color: var(--mj-blue);\n}\n\n.tab-close-button[_ngcontent-%COMP%] {\n cursor: pointer;\n margin-left: 10px;\n padding: 2px;\n font-size: 12px;\n border-radius: 10px;\n color: var(--gray-800);\n}\n\n.tab-close-button[_ngcontent-%COMP%]:hover {\n color: var(--gray-900);\n}"] });
|
|
121
121
|
}
|
|
122
122
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabComponent, [{
|
|
123
123
|
type: Component,
|
|
124
|
-
args: [{ selector: 'mj-tab', template: "<div class=\"single-tab\" [ngClass]=\"{'single-tab-selected': TabSelected}\" (click)=\"selectTab()\" (contextmenu)=\"handleContextMenu($event)\">\n
|
|
124
|
+
args: [{ standalone: false, selector: 'mj-tab', template: "<div class=\"single-tab\" [ngClass]=\"{'single-tab-selected': TabSelected}\" (click)=\"selectTab()\" (contextmenu)=\"handleContextMenu($event)\">\n <ng-content><!--CONTENT PROJECTION GOES HERE--></ng-content>\n @if (TabCloseable) {\n <span class=\"tab-close-button\" (click)=\"closeTab($event)\" >\u2716</span>\n }\n</div>", styles: [".single-tab {\n flex: 0 0 auto;\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-right: 2px;\n padding: .5rem;\n border-radius: 8px 8px 0 0;\n border-top: solid 1px var(--gray-600);\n border-left: solid 1px var(--gray-600);\n border-right: solid 1px var(--gray-600);\n border-bottom: 0;\n background-color: #FFF;\n}\n\n.single-tab-selected {\n color: var(--mj-blue);\n}\n\n.tab-close-button {\n cursor: pointer;\n margin-left: 10px;\n padding: 2px;\n font-size: 12px;\n border-radius: 10px;\n color: var(--gray-800);\n}\n\n.tab-close-button:hover {\n color: var(--gray-900);\n}"] }]
|
|
125
125
|
}], () => [{ type: i1.MJTabStripComponent, decorators: [{
|
|
126
126
|
type: Host
|
|
127
127
|
}] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { TabSelected: [{
|
|
@@ -137,5 +137,5 @@ export class MJTabComponent extends MJTabBase {
|
|
|
137
137
|
}], TabCloseable: [{
|
|
138
138
|
type: Input
|
|
139
139
|
}] }); })();
|
|
140
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabComponent, { className: "MJTabComponent", filePath: "src/lib/tab/tab.component.ts", lineNumber:
|
|
140
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabComponent, { className: "MJTabComponent", filePath: "src/lib/tab/tab.component.ts", lineNumber: 14 }); })();
|
|
141
141
|
//# sourceMappingURL=tab.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.component.js","sourceRoot":"","sources":["../../../src/lib/tab/tab.component.ts","../../../src/lib/tab/tab.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAwB,IAAI,EAAiC,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;;;;;;;;
|
|
1
|
+
{"version":3,"file":"tab.component.js","sourceRoot":"","sources":["../../../src/lib/tab/tab.component.ts","../../../src/lib/tab/tab.component.html"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-body.component.d.ts","sourceRoot":"","sources":["../../../src/lib/tab-body/tab-body.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;;AAEvE,
|
|
1
|
+
{"version":3,"file":"tab-body.component.d.ts","sourceRoot":"","sources":["../../../src/lib/tab-body/tab-body.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;;AAEvE,qBAMa,kBAAmB,SAAQ,SAAS;IAM3B,OAAO,CAAC,QAAQ;IAL3B,UAAU,UAAS;IAEnB,SAAS,EAAE,OAAO,CAAQ;IAC1B,UAAU,EAAE,OAAO,CAAQ;gBAER,QAAQ,EAAE,mBAAmB;yCAN9C,kBAAkB;2CAAlB,kBAAkB;CAS9B"}
|
|
@@ -13,7 +13,7 @@ export class MJTabBodyComponent extends MJTabBase {
|
|
|
13
13
|
this.tabStrip = tabStrip;
|
|
14
14
|
}
|
|
15
15
|
static ɵfac = function MJTabBodyComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJTabBodyComponent)(i0.ɵɵdirectiveInject(i1.MJTabStripComponent, 1)); };
|
|
16
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabBodyComponent, selectors: [["mj-tab-body"]], inputs: { TabVisible: "TabVisible", FillWidth: "FillWidth", FillHeight: "FillHeight" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 2, vars: 1, consts: [[1, "tab-body", 3, "hidden"]], template: function MJTabBodyComponent_Template(rf, ctx) { if (rf & 1) {
|
|
16
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabBodyComponent, selectors: [["mj-tab-body"]], inputs: { TabVisible: "TabVisible", FillWidth: "FillWidth", FillHeight: "FillHeight" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 2, vars: 1, consts: [[1, "tab-body", 3, "hidden"]], template: function MJTabBodyComponent_Template(rf, ctx) { if (rf & 1) {
|
|
17
17
|
i0.ɵɵprojectionDef();
|
|
18
18
|
i0.ɵɵelementStart(0, "div", 0);
|
|
19
19
|
i0.ɵɵprojection(1);
|
|
@@ -24,7 +24,7 @@ export class MJTabBodyComponent extends MJTabBase {
|
|
|
24
24
|
}
|
|
25
25
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabBodyComponent, [{
|
|
26
26
|
type: Component,
|
|
27
|
-
args: [{ selector: 'mj-tab-body', template: "<div class=\"tab-body\" [hidden]=\"!TabVisible\">\n <ng-content><!--CONTENT PROJECTION GOES HERE--></ng-content>\n</div> ", styles: [" .tab-body {\n border-top: 0;\n width: 100%;\n display: block;\n overflow-y: auto;\n overflow-x: hidden;\n height: calc(100vh - 123px);\n }\n\n .tab-body .tab-body {\n height: auto;\n }"] }]
|
|
27
|
+
args: [{ standalone: false, selector: 'mj-tab-body', template: "<div class=\"tab-body\" [hidden]=\"!TabVisible\">\n <ng-content><!--CONTENT PROJECTION GOES HERE--></ng-content>\n</div> ", styles: [" .tab-body {\n border-top: 0;\n width: 100%;\n display: block;\n overflow-y: auto;\n overflow-x: hidden;\n height: calc(100vh - 123px);\n }\n\n .tab-body .tab-body {\n height: auto;\n }"] }]
|
|
28
28
|
}], () => [{ type: i1.MJTabStripComponent, decorators: [{
|
|
29
29
|
type: Host
|
|
30
30
|
}] }], { TabVisible: [{
|
|
@@ -34,5 +34,5 @@ export class MJTabBodyComponent extends MJTabBase {
|
|
|
34
34
|
}], FillHeight: [{
|
|
35
35
|
type: Input
|
|
36
36
|
}] }); })();
|
|
37
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabBodyComponent, { className: "MJTabBodyComponent", filePath: "src/lib/tab-body/tab-body.component.ts", lineNumber:
|
|
37
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabBodyComponent, { className: "MJTabBodyComponent", filePath: "src/lib/tab-body/tab-body.component.ts", lineNumber: 12 }); })();
|
|
38
38
|
//# sourceMappingURL=tab-body.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-body.component.js","sourceRoot":"","sources":["../../../src/lib/tab-body/tab-body.component.ts","../../../src/lib/tab-body/tab-body.component.html"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;;;;
|
|
1
|
+
{"version":3,"file":"tab-body.component.js","sourceRoot":"","sources":["../../../src/lib/tab-body/tab-body.component.ts","../../../src/lib/tab-body/tab-body.component.html"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;;;;AASxC,MAAM,OAAO,kBAAmB,SAAQ,SAAS;IAMnB;IALnB,UAAU,GAAG,KAAK,CAAC;IAEnB,SAAS,GAAY,IAAI,CAAC;IAC1B,UAAU,GAAY,IAAI,CAAC;IAEpC,YAA4B,QAA6B;QACvD,KAAK,EAAE,CAAC;QADkB,aAAQ,GAAR,QAAQ,CAAqB;IAEzD,CAAC;4GARU,kBAAkB;6DAAlB,kBAAkB;;YCX/B,8BAA6C;YACzC,kBAA4D;YAChE,iBAAM;;YAFgB,wCAAsB;;;iFDW/B,kBAAkB;cAN9B,SAAS;6BACI,KAAK,YACP,aAAa;;sBAUV,IAAI;;kBALhB,KAAK;;kBAEL,KAAK;;kBACL,KAAK;;kFAJK,kBAAkB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-strip.component.d.ts","sourceRoot":"","sources":["../../../src/lib/tab-strip/tab-strip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,YAAY,EAA2B,SAAS,EAA2B,UAAU,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACjN,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;;AAGpE,qBAAa,QAAQ;IACZ,KAAK,EAAG,MAAM,CAAC;IACf,GAAG,EAAE,cAAc,GAAG,IAAI,CAAQ;IAClC,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAQ;CAC/C;AACD,qBAAa,kBAAmB,SAAQ,QAAQ;IACvC,MAAM,EAAE,OAAO,CAAS;CAChC;AACD,qBAAa,cAAe,SAAQ,QAAQ;IAC1C;;OAEG;IACI,WAAW,EAAG,MAAM,CAAA;IAC3B;;OAEG;IACI,IAAI,EAAG,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;CACnC;AACD,qBAAa,mBAAoB,SAAQ,QAAQ;IACxC,UAAU,EAAG,UAAU,CAAC;CAChC;AAED,
|
|
1
|
+
{"version":3,"file":"tab-strip.component.d.ts","sourceRoot":"","sources":["../../../src/lib/tab-strip/tab-strip.component.ts"],"names":[],"mappings":"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"}
|
|
@@ -2,21 +2,20 @@ import { Component, Input, EventEmitter, Output, ContentChildren, ViewChild, Hos
|
|
|
2
2
|
import { MJTabComponent } from '../tab/tab.component';
|
|
3
3
|
import { MJTabBodyComponent } from '../tab-body/tab-body.component';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
-
import * as i1 from "@angular/common";
|
|
6
5
|
const _c0 = ["tabInnerContainer"];
|
|
7
6
|
const _c1 = [[["mj-tab"]], [["mj-tab-body"]]];
|
|
8
7
|
const _c2 = ["mj-tab", "mj-tab-body"];
|
|
9
|
-
function
|
|
8
|
+
function MJTabStripComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
10
9
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
11
10
|
i0.ɵɵelementStart(0, "div", 7);
|
|
12
|
-
i0.ɵɵlistener("click", function
|
|
11
|
+
i0.ɵɵlistener("click", function MJTabStripComponent_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.scrollLeft()); });
|
|
13
12
|
i0.ɵɵelement(1, "span", 8);
|
|
14
13
|
i0.ɵɵelementEnd();
|
|
15
14
|
} }
|
|
16
|
-
function
|
|
15
|
+
function MJTabStripComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
17
16
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
18
17
|
i0.ɵɵelementStart(0, "div", 9);
|
|
19
|
-
i0.ɵɵlistener("click", function
|
|
18
|
+
i0.ɵɵlistener("click", function MJTabStripComponent_Conditional_6_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.scrollRight()); });
|
|
20
19
|
i0.ɵɵelement(1, "span", 10);
|
|
21
20
|
i0.ɵɵelementEnd();
|
|
22
21
|
} }
|
|
@@ -329,8 +328,7 @@ export class MJTabStripComponent {
|
|
|
329
328
|
}
|
|
330
329
|
static ɵfac = function MJTabStripComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJTabStripComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
|
|
331
330
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTabStripComponent, selectors: [["mj-tabstrip"]], contentQueries: function MJTabStripComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
|
|
332
|
-
i0.ɵɵcontentQuery(dirIndex, MJTabComponent, 4);
|
|
333
|
-
i0.ɵɵcontentQuery(dirIndex, MJTabBodyComponent, 4);
|
|
331
|
+
i0.ɵɵcontentQuery(dirIndex, MJTabComponent, 4)(dirIndex, MJTabBodyComponent, 4);
|
|
334
332
|
} if (rf & 2) {
|
|
335
333
|
let _t;
|
|
336
334
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabs = _t);
|
|
@@ -341,29 +339,29 @@ export class MJTabStripComponent {
|
|
|
341
339
|
let _t;
|
|
342
340
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabInnerContainer = _t.first);
|
|
343
341
|
} }, hostBindings: function MJTabStripComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
344
|
-
i0.ɵɵlistener("resize", function MJTabStripComponent_resize_HostBindingHandler($event) { return ctx.onResize($event); },
|
|
345
|
-
} }, inputs: { FillWidth: "FillWidth", FillHeight: "FillHeight", SelectedTabIndex: "SelectedTabIndex", ScrollAmount: "ScrollAmount" }, outputs: { ResizeContainer: "ResizeContainer", BeforeTabSelected: "BeforeTabSelected", TabSelected: "TabSelected", BeforeTabClosed: "BeforeTabClosed", TabClosed: "TabClosed", TabContextMenu: "TabContextMenu", TabScrolled: "TabScrolled" }, ngContentSelectors: _c2, decls: 9, vars: 2, consts: [["tabInnerContainer", ""], [1, "tabstrip-container"], [1, "tab-header-outer"], [
|
|
342
|
+
i0.ɵɵlistener("resize", function MJTabStripComponent_resize_HostBindingHandler($event) { return ctx.onResize($event); }, i0.ɵɵresolveWindow);
|
|
343
|
+
} }, inputs: { FillWidth: "FillWidth", FillHeight: "FillHeight", SelectedTabIndex: "SelectedTabIndex", ScrollAmount: "ScrollAmount" }, outputs: { ResizeContainer: "ResizeContainer", BeforeTabSelected: "BeforeTabSelected", TabSelected: "TabSelected", BeforeTabClosed: "BeforeTabClosed", TabClosed: "TabClosed", TabContextMenu: "TabContextMenu", TabScrolled: "TabScrolled" }, standalone: false, ngContentSelectors: _c2, decls: 9, vars: 2, consts: [["tabInnerContainer", ""], [1, "tabstrip-container"], [1, "tab-header-outer"], [1, "tab-scroll-button", "tab-scroll-button-left"], [1, "tab-header-inner"], [1, "tab-scroll-button", "tab-scroll-button-right"], [1, "tab-bodies"], [1, "tab-scroll-button", "tab-scroll-button-left", 3, "click"], [1, "fa-solid", "fa-caret-left"], [1, "tab-scroll-button", "tab-scroll-button-right", 3, "click"], [1, "fa-solid", "fa-caret-right"]], template: function MJTabStripComponent_Template(rf, ctx) { if (rf & 1) {
|
|
346
344
|
i0.ɵɵprojectionDef(_c1);
|
|
347
345
|
i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
|
|
348
|
-
i0.ɵɵ
|
|
346
|
+
i0.ɵɵconditionalCreate(2, MJTabStripComponent_Conditional_2_Template, 2, 0, "div", 3);
|
|
349
347
|
i0.ɵɵelementStart(3, "div", 4, 0);
|
|
350
348
|
i0.ɵɵprojection(5);
|
|
351
349
|
i0.ɵɵelementEnd();
|
|
352
|
-
i0.ɵɵ
|
|
350
|
+
i0.ɵɵconditionalCreate(6, MJTabStripComponent_Conditional_6_Template, 2, 0, "div", 5);
|
|
353
351
|
i0.ɵɵelementEnd();
|
|
354
352
|
i0.ɵɵelementStart(7, "div", 6);
|
|
355
353
|
i0.ɵɵprojection(8, 1);
|
|
356
354
|
i0.ɵɵelementEnd()();
|
|
357
355
|
} if (rf & 2) {
|
|
358
356
|
i0.ɵɵadvance(2);
|
|
359
|
-
i0.ɵɵ
|
|
357
|
+
i0.ɵɵconditional(ctx.showLeftButton ? 2 : -1);
|
|
360
358
|
i0.ɵɵadvance(4);
|
|
361
|
-
i0.ɵɵ
|
|
362
|
-
} },
|
|
359
|
+
i0.ɵɵconditional(ctx.showRightButton ? 6 : -1);
|
|
360
|
+
} }, styles: [".tabstrip-container[_ngcontent-%COMP%] {\n display: block;\n height: calc(100vh - 80px);\n overflow-y: auto;\n}\n\n.tabstrip-container[_ngcontent-%COMP%] .tabstrip-container[_ngcontent-%COMP%] {\n display: block;\n height: auto;\n}\n\n.tab-header-outer[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden;\n \n\n background-color: var(--gray-600);\n}\n\n.tab-header-inner[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: row;\n white-space: nowrap;\n \n\n position: relative;\n \n\n z-index: 1;\n \n\n padding-left: 5px;\n padding-top: 5px;\n}\n\n.tab-scroll-button-left[_ngcontent-%COMP%], \n.tab-scroll-button-right[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n \n\n}\n\n.tab-scroll-button-left[_ngcontent-%COMP%] {\n left: 0;\n}\n\n.tab-scroll-button-right[_ngcontent-%COMP%] {\n right: 0;\n}\n\n.tab-scroll-button[_ngcontent-%COMP%] {\n padding: 8px 10px 10px 8px;\n cursor: pointer;\n border-radius: 6px;\n background-color: var(--gray-700);\n}\n\n.tab-scroll-button[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-blue);\n}"] });
|
|
363
361
|
}
|
|
364
362
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTabStripComponent, [{
|
|
365
363
|
type: Component,
|
|
366
|
-
args: [{ selector: 'mj-tabstrip', template: "<div class=\"tabstrip-container\">\n
|
|
364
|
+
args: [{ standalone: false, selector: 'mj-tabstrip', template: "<div class=\"tabstrip-container\">\n <!-- Tab Headers -->\n <div class=\"tab-header-outer\">\n @if (showLeftButton) {\n <div class=\"tab-scroll-button tab-scroll-button-left\" (click)=\"scrollLeft()\">\n <span class=\"fa-solid fa-caret-left\"></span>\n </div>\n }\n <div class=\"tab-header-inner\" #tabInnerContainer>\n <ng-content select=\"mj-tab\"></ng-content> <!-- Where <mj-tab> components are projected -->\n </div>\n @if (showRightButton) {\n <div class=\"tab-scroll-button tab-scroll-button-right\" (click)=\"scrollRight()\">\n <span class=\"fa-solid fa-caret-right\"></span>\n </div>\n }\n </div>\n <!-- Tab Content -->\n <div class=\"tab-bodies\">\n <ng-content select=\"mj-tab-body\"></ng-content> <!-- Where <mj-tab-body> components are projected -->\n </div>\n</div>", styles: [".tabstrip-container {\n display: block;\n height: calc(100vh - 80px);\n overflow-y: auto;\n}\n\n.tabstrip-container .tabstrip-container {\n display: block;\n height: auto;\n}\n\n.tab-header-outer {\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden;\n /* Hide the overflow */\n background-color: var(--gray-600);\n}\n\n.tab-header-inner {\n display: flex;\n flex-direction: row;\n white-space: nowrap;\n /* Prevent wrapping of tabs */\n position: relative;\n /* Needed for z-index to work */\n z-index: 1;\n /* Place tabs above the content */\n padding-left: 5px;\n padding-top: 5px;\n}\n\n.tab-scroll-button-left,\n.tab-scroll-button-right {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n /* Ensure buttons are above the content */\n}\n\n.tab-scroll-button-left {\n left: 0;\n}\n\n.tab-scroll-button-right {\n right: 0;\n}\n\n.tab-scroll-button {\n padding: 8px 10px 10px 8px;\n cursor: pointer;\n border-radius: 6px;\n background-color: var(--gray-700);\n}\n\n.tab-scroll-button:hover {\n background-color: var(--mj-blue);\n}"] }]
|
|
367
365
|
}], () => [{ type: i0.ChangeDetectorRef }], { FillWidth: [{
|
|
368
366
|
type: Input
|
|
369
367
|
}], FillHeight: [{
|
|
@@ -399,5 +397,5 @@ export class MJTabStripComponent {
|
|
|
399
397
|
}], ScrollAmount: [{
|
|
400
398
|
type: Input
|
|
401
399
|
}] }); })();
|
|
402
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabStripComponent, { className: "MJTabStripComponent", filePath: "src/lib/tab-strip/tab-strip.component.ts", lineNumber:
|
|
400
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTabStripComponent, { className: "MJTabStripComponent", filePath: "src/lib/tab-strip/tab-strip.component.ts", lineNumber: 34 }); })();
|
|
403
401
|
//# sourceMappingURL=tab-strip.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-strip.component.js","sourceRoot":"","sources":["../../../src/lib/tab-strip/tab-strip.component.ts","../../../src/lib/tab-strip/tab-strip.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,eAAe,EAAa,SAAS,EAAE,YAAY,EAAuF,MAAM,eAAe,CAAC;AACjN,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC
|
|
1
|
+
{"version":3,"file":"tab-strip.component.js","sourceRoot":"","sources":["../../../src/lib/tab-strip/tab-strip.component.ts","../../../src/lib/tab-strip/tab-strip.component.html"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-tabstrip",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "MemberJunction: Very simple tab strip component used in the MJ Explorer app and reusable anywhere else in an Angular project.",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
"author": "",
|
|
16
16
|
"license": "ISC",
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@angular/compiler": "
|
|
19
|
-
"@angular/compiler-cli": "
|
|
18
|
+
"@angular/compiler": "21.1.3",
|
|
19
|
+
"@angular/compiler-cli": "21.1.3"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@angular/common": "
|
|
23
|
-
"@angular/core": "
|
|
22
|
+
"@angular/common": "21.1.3",
|
|
23
|
+
"@angular/core": "21.1.3"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@memberjunction/ng-container-directives": "
|
|
27
|
-
"tslib": "^2.
|
|
26
|
+
"@memberjunction/ng-container-directives": "4.1.0",
|
|
27
|
+
"tslib": "^2.8.1"
|
|
28
28
|
},
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"repository": {
|