All files / components/workspace workspace.component.html

1
2
3
4
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
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="workspace-content">
    @for (tab of tabs(); track $index) {
        @if (tab.contentTemplate(); as tmpl) {
            @if (tab.keepAlive()) {
                @if (activatedIndices().has($index)) {
                    <div
                        class="workspace-panel"
                        role="tabpanel"
                        [class.workspace-panel--hidden]="activeIndex() !== $index"
                        [attr.id]="'workspace-panel-' + $index"
                        [attr.aria-labelledby]="'workspace-tab-' + $index"
                    >
                        <ng-container [ngTemplateOutlet]="tmpl" />
                    </div>
                }
            } @else {
                @if (activeIndex() === $index) {
                    <div
                        class="workspace-panel"
                        role="tabpanel"
                        [attr.id]="'workspace-panel-' + $index"
                        [attr.aria-labelledby]="'workspace-tab-' + $index"
                    >
                        <ng-container [ngTemplateOutlet]="tmpl" />
                    </div>
                }
            }
        }
    }
</div>
 
<div class="workspace-tab-bar" role="tablist">
    @for (tab of tabs(); track $index) {
        <button
            class="workspace-tab"
            type="button"
            role="tab"
            [class.workspace-tab--active]="activeIndex() === $index"
            [attr.id]="'workspace-tab-' + $index"
            [attr.data-testid]="'workspace-tab-btn-' + $index"
            [attr.aria-label]="tab.label()"
            [attr.aria-selected]="activeIndex() === $index"
            [attr.aria-controls]="'workspace-panel-' + $index"
            (click)="selectTab($index)"
        >
            <ui-icon [name]="tab.icon()" size="small" />
            <span class="workspace-tab-label" data-testid="workspace-tab-label">{{ tab.label() }}</span>
        </button>
    }
</div>