{"__symbolic":"module","version":4,"metadata":{"SbbTabsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":12},{"__symbolic":"reference","module":"@sbb-esta/angular-business/badge","name":"SbbBadgeModule","line":12,"character":26},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":12,"character":42}],"declarations":[{"__symbolic":"reference","name":"SbbTab"},{"__symbolic":"reference","name":"SbbTabs"},{"__symbolic":"reference","name":"SbbTabContent"}],"exports":[{"__symbolic":"reference","name":"SbbTab"},{"__symbolic":"reference","name":"SbbTabs"},{"__symbolic":"reference","name":"SbbTabContent"}]}]}],"members":{}},"SbbTab":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"sbb-tab","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":24,"character":19},"member":"OnPush"},"host":{"role":"tabpanel","[attr.id]":"id","[attr.attr.aria-labelledby]":"labelId","[attr.aria-hidden]":"active ? 'false' : 'true'","$quoted$":["[attr.id]","[attr.attr.aria-labelledby]","[attr.aria-hidden]"]},"template":"<ng-content *ngIf=\"active && !disabled\"></ng-content>\n<ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n"}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"labelId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"badgePill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"_lazyTabContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":56,"character":3},"arguments":[{"__symbolic":"reference","name":"SbbTabContent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":56,"character":39},"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":69,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":70,"character":31}]}],"ngOnChanges":[{"__symbolic":"method"}],"tabMarkForCheck":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SbbTabContent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"ng-template[sbbTabContent]"}]}],"members":{}},"SbbTabs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"sbb-tabs","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":28,"character":19},"member":"OnPush"},"host":{"class":"sbb-tabs"},"template":"<div class=\"sbb-tabs-scrollbar sbb-scrollbar\">\n  <ul class=\"sbb-tabs-tablist\" role=\"tablist\">\n    <li\n      *ngFor=\"let tab of tabs$ | async\"\n      class=\"sbb-tabs-tablist-item\"\n      [attr.aria-label]=\"nameOfTabList\"\n    >\n      <button\n        #label\n        type=\"button\"\n        (click)=\"selectTab(tab)\"\n        (keyup)=\"onKeyUp($event)\"\n        role=\"tab\"\n        [attr.aria-selected]=\"tab.active\"\n        [attr.aria-controls]=\"tab.id\"\n        [id]=\"tab.labelId\"\n        class=\"sbb-tabs-tablist-item-button\"\n        [class.sbb-active]=\"tab.active\"\n        [attr.tabindex]=\"tab.active ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n      >\n        {{ tab.label }}\n        <sbb-badge\n          i18n-aria-label=\"Aria label for amount of entries displayed in badge pill@@sbbTabsBadgePillAmountOfEntries\"\n          aria-label=\"{{ tab.badgePill }} entries\"\n          *ngIf=\"tab.badgePill\"\n          >{{ tab.badgePill }}</sbb-badge\n        >\n      </button>\n    </li>\n  </ul>\n</div>\n<div class=\"sbb-tabs-content\">\n  <ng-content select=\"sbb-tab\"></ng-content>\n</div>\n","styles":[":host{display:block}.sbb-tabs-scrollbar{overflow:hidden}.sbb-tabs-tablist{list-style-type:none;margin:0;padding:0;display:flex;overflow-x:auto}.sbb-tabs-tablist>.sbb-tabs-tablist-item{display:flex;flex:0 0 auto;align-items:baseline;padding-right:3em;padding-left:0;padding-right:.2666666667em;position:relative}.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-badge{display:inline-block;position:relative;margin-left:-.1818181818em;margin-right:-1.2727272727em;top:-.5454545455em}.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button{background:none;max-width:none;min-width:0;padding:0;margin:0;border:none;display:block;white-space:nowrap;font-family:\"SBBWeb Light\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:1rem;text-decoration:none;padding-bottom:.5333333333rem;position:relative;border:1px solid transparent;padding:.3333333333em 1.0666666667em .4em 1.0666666667em}.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button:hover,.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button:focus{cursor:pointer;outline:none}.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button:not(.sbb-active){color:#686868}.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button.sbb-active{color:#000;background-color:#fff;border:1px solid #b7b7b7;border-radius:.1333333333em .1333333333em 0 0;border-bottom:1px solid transparent}.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button.sbb-active::after,.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button:not(.sbb-active):focus::after,.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button:not(.sbb-active):hover::after{left:0;width:100%}.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button:not(.sbb-active):focus,.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button:not(.sbb-active):hover{color:#c60018}.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button:not(.sbb-active):focus:not(:disabled),.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button:not(.sbb-active):hover:not(:disabled){border-bottom:1px solid #c60018}.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button[disabled]{color:#a8a8a8}.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button[disabled]:hover,.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button[disabled]:focus{color:#a8a8a8;cursor:default}.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button[disabled]:hover::after,.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button[disabled]:focus::after{width:0}.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button.sbb-active:hover,.sbb-tabs-tablist>.sbb-tabs-tablist-item .sbb-tabs-tablist-item-button.sbb-active:focus{color:currentColor;cursor:default}.sbb-tabs-content{background-color:#fff;padding:1.0666666667em;border:1px solid #b7b7b7;margin-top:-.0666666667em}\n"]}]}],"members":{"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":39,"character":3},"arguments":[{"__symbolic":"reference","name":"SbbTab"}]}]}],"labels":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":43,"character":3},"arguments":["label"]}]}],"selectedIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":53,"character":37},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":55,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":56,"character":29}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"initTabs":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"openFirstTab":[{"__symbolic":"method"}],"openTabByIndex":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}],"onKeyUp":[{"__symbolic":"method"}],"_handleKeyUp":[{"__symbolic":"method"}],"_handleKeyCodeReturnHasReachEnd":[{"__symbolic":"method"}]}}},"origins":{"SbbTabsModule":"./tabs.module","SbbTab":"./tab/tab.component","SbbTabContent":"./tab/tab-content","SbbTabs":"./tabs/tabs.component"},"importAs":"@sbb-esta/angular-business/tabs"}