Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 49005x 49005x 1x 1x 1x 9801x 9801x 9801x 1x 1x 1x 1x 1x 9801x 9801x 9801x 1x 1x 1x 1x 327x 327x 327x 1x | /*******************************************************************************
* Copyright bei
* Entwicklungs- und Pflegeverbund für das gemeinsame Fachverfahren gefa
*
*******************************************************************************/
import { Component, HostBinding, Input } from '@angular/core';
import { WidgetKeySet } from '../utils/util.types';
import { createWidgetKeySet } from '../utils/utilities';
import type { SurfaceColors } from '../internal/surface.directive';
import { TabFolderComponent } from './tab-folder.component';
/**
* Tab component that represents a single tab in the 'gc-tab-folder' component.
*/
@Component({
selector: 'gc-tab',
templateUrl: './tab.component.html',
styleUrls: ['./tab.component.css'],
host: {
role: 'tabpanel',
},
standalone: false,
})
export class TabComponent {
/**
* Label of the tab component.
*/
@Input()
public label = '';
/**
* Key of the tab. Used for selecting the tab.
*/
@Input({ required: true })
public key!: string;
/**
* Surface to use for this tab.
*/
@Input(
// name has to match (and be compatible with) selector of `SurfaceDirective`
// to ensure it's applied to the content automatically, value "captured" here again
// to allow using it in the tab-folder component and react on its appearance
'data-gc-surface',
)
public surface?: SurfaceColors;
/** @ignore */
@HostBinding('attr.id')
public readonly _id: string;
/** @ignore */
@HostBinding('attr.aria-labelledby')
public readonly _ariaLabelledby: string;
/**
* Indicates if the tab is active/visible.
*/
public get active(): boolean {
return this.tabFolder.activeTabKey === this.key;
}
/** @ignore */
@HostBinding('hidden')
protected get attrHidden(): boolean {
return !this.active;
}
/** @ignore */
// to ensure it remains hidden even when the user decides to override the
// host element's display property via CSS (style has precedence)
@HostBinding('style.display')
protected get styleDisplay(): string | undefined {
return !this.active ? 'none' : undefined;
}
private readonly widgetKeys: WidgetKeySet = createWidgetKeySet('gc-tab');
constructor(private readonly tabFolder: TabFolderComponent) {
this._id = this.widgetKeys.baseKey;
this._ariaLabelledby = this.widgetKeys.labelKey;
}
}
|