@clr/angular
Version:
Angular components for Clarity
106 lines • 12.3 kB
JavaScript
/*
* Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import { Directive, HostBinding, HostListener, Inject, Input, } from '@angular/core';
import { IF_ACTIVE_ID } from '../../utils/conditional/if-active.service';
import { TemplateRefContainer } from '../../utils/template-ref/template-ref-container';
import { TabsLayout } from './enums/tabs-layout.enum';
import { TABS_ID } from './tabs-id.provider';
import * as i0 from "@angular/core";
import * as i1 from "../../utils/conditional/if-active.service";
import * as i2 from "./providers/tabs.service";
let nbTabLinkComponents = 0;
export class ClrTabLink {
constructor(ifActiveService, id, el, cfr, viewContainerRef, tabsService, tabsId) {
this.ifActiveService = ifActiveService;
this.id = id;
this.el = el;
this.cfr = cfr;
this.viewContainerRef = viewContainerRef;
this.tabsService = tabsService;
this.tabsId = tabsId;
if (!this.tabLinkId) {
this.tabLinkId = 'clr-tab-link-' + nbTabLinkComponents++;
}
// Tab links can be rendered in one of two places: in the main area or inside the overflow dropdown menu.
// Here, we create a container so that its template can be used to create embeddedView on the fly.
// See TabsService's renderView() method and how it's used in Tabs class for an example.
const factory = this.cfr.resolveComponentFactory(TemplateRefContainer);
this.templateRefContainer = this.viewContainerRef.createComponent(factory, undefined, undefined, [
[this.el.nativeElement],
]).instance;
}
get inOverflow() {
return this._inOverflow && this.tabsService.layout !== TabsLayout.VERTICAL;
}
set inOverflow(inOverflow) {
this._inOverflow = inOverflow;
}
get addLinkClasses() {
return !this.inOverflow;
}
get ariaControls() {
return this.tabsService.children.find(tab => tab.tabLink === this)?.tabContent?.tabContentId;
}
get active() {
return this.ifActiveService.current === this.id;
}
get tabindex() {
return this.active ? 0 : -1;
}
activate() {
this.ifActiveService.current = this.id;
}
}
ClrTabLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrTabLink, deps: [{ token: i1.IfActiveService }, { token: IF_ACTIVE_ID }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i2.TabsService }, { token: TABS_ID }], target: i0.ɵɵFactoryTarget.Directive });
ClrTabLink.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrTabLink, selector: "[clrTabLink]", inputs: { tabLinkId: ["id", "tabLinkId"], inOverflow: ["clrTabLinkInOverflow", "inOverflow"] }, host: { attributes: { "role": "tab", "type": "button" }, listeners: { "click": "activate()" }, properties: { "class.btn": "true", "id": "this.tabLinkId", "class.btn-link": "this.addLinkClasses", "class.nav-link": "this.addLinkClasses", "attr.aria-controls": "this.ariaControls", "class.active": "this.active", "attr.aria-selected": "this.active", "attr.tabindex": "this.tabindex" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrTabLink, decorators: [{
type: Directive,
args: [{
selector: '[clrTabLink]',
host: {
'[class.btn]': 'true',
role: 'tab',
type: 'button',
},
}]
}], ctorParameters: function () { return [{ type: i1.IfActiveService }, { type: undefined, decorators: [{
type: Inject,
args: [IF_ACTIVE_ID]
}] }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i2.TabsService }, { type: undefined, decorators: [{
type: Inject,
args: [TABS_ID]
}] }]; }, propDecorators: { tabLinkId: [{
type: Input,
args: ['id']
}, {
type: HostBinding,
args: ['id']
}], inOverflow: [{
type: Input,
args: ['clrTabLinkInOverflow']
}], addLinkClasses: [{
type: HostBinding,
args: ['class.btn-link']
}, {
type: HostBinding,
args: ['class.nav-link']
}], ariaControls: [{
type: HostBinding,
args: ['attr.aria-controls']
}], active: [{
type: HostBinding,
args: ['class.active']
}, {
type: HostBinding,
args: ['attr.aria-selected']
}], tabindex: [{
type: HostBinding,
args: ['attr.tabindex']
}], activate: [{
type: HostListener,
args: ['click']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWxpbmsuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci9zcmMvbGF5b3V0L3RhYnMvdGFiLWxpbmsuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7O0dBSUc7QUFFSCxPQUFPLEVBRUwsU0FBUyxFQUVULFdBQVcsRUFDWCxZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssR0FFTixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsWUFBWSxFQUFtQixNQUFNLDJDQUEyQyxDQUFDO0FBQzFGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGlEQUFpRCxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUV0RCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7Ozs7QUFFN0MsSUFBSSxtQkFBbUIsR0FBRyxDQUFDLENBQUM7QUFVNUIsTUFBTSxPQUFPLFVBQVU7SUFPckIsWUFDUyxlQUFnQyxFQUNULEVBQVUsRUFDakMsRUFBYyxFQUNiLEdBQTZCLEVBQzdCLGdCQUFrQyxFQUNsQyxXQUF3QixFQUNSLE1BQWM7UUFOL0Isb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBQ1QsT0FBRSxHQUFGLEVBQUUsQ0FBUTtRQUNqQyxPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQ2IsUUFBRyxHQUFILEdBQUcsQ0FBMEI7UUFDN0IscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFrQjtRQUNsQyxnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUNSLFdBQU0sR0FBTixNQUFNLENBQVE7UUFFdEMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDbkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxlQUFlLEdBQUcsbUJBQW1CLEVBQUUsQ0FBQztTQUMxRDtRQUVELHlHQUF5RztRQUN6RyxrR0FBa0c7UUFDbEcsd0ZBQXdGO1FBQ3hGLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsdUJBQXVCLENBQUMsb0JBQW9CLENBQUMsQ0FBQztRQUN2RSxJQUFJLENBQUMsb0JBQW9CLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRTtZQUMvRixDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDO1NBQ3hCLENBQUMsQ0FBQyxRQUFRLENBQUM7SUFDZCxDQUFDO0lBRUQsSUFDSSxVQUFVO1FBQ1osT0FBTyxJQUFJLENBQUMsV0FBVyxJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxLQUFLLFVBQVUsQ0FBQyxRQUFRLENBQUM7SUFDN0UsQ0FBQztJQUNELElBQUksVUFBVSxDQUFDLFVBQVU7UUFDdkIsSUFBSSxDQUFDLFdBQVcsR0FBRyxVQUFVLENBQUM7SUFDaEMsQ0FBQztJQUVELElBRUksY0FBYztRQUNoQixPQUFPLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUMxQixDQUFDO0lBRUQsSUFDSSxZQUFZO1FBQ2QsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxFQUFFLFVBQVUsRUFBRSxZQUFZLENBQUM7SUFDL0YsQ0FBQztJQUVELElBRUksTUFBTTtRQUNSLE9BQU8sSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLEtBQUssSUFBSSxDQUFDLEVBQUUsQ0FBQztJQUNsRCxDQUFDO0lBRUQsSUFDSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQzlCLENBQUM7SUFHRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQztJQUN6QyxDQUFDOzt1R0E5RFUsVUFBVSxpREFTWCxZQUFZLDBJQUtaLE9BQU87MkZBZE4sVUFBVTsyRkFBVixVQUFVO2tCQVJ0QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxjQUFjO29CQUN4QixJQUFJLEVBQUU7d0JBQ0osYUFBYSxFQUFFLE1BQU07d0JBQ3JCLElBQUksRUFBRSxLQUFLO3dCQUNYLElBQUksRUFBRSxRQUFRO3FCQUNmO2lCQUNGOzswQkFVSSxNQUFNOzJCQUFDLFlBQVk7OzBCQUtuQixNQUFNOzJCQUFDLE9BQU87NENBYmUsU0FBUztzQkFBeEMsS0FBSzt1QkFBQyxJQUFJOztzQkFBRyxXQUFXO3VCQUFDLElBQUk7Z0JBNkIxQixVQUFVO3NCQURiLEtBQUs7dUJBQUMsc0JBQXNCO2dCQVV6QixjQUFjO3NCQUZqQixXQUFXO3VCQUFDLGdCQUFnQjs7c0JBQzVCLFdBQVc7dUJBQUMsZ0JBQWdCO2dCQU16QixZQUFZO3NCQURmLFdBQVc7dUJBQUMsb0JBQW9CO2dCQU83QixNQUFNO3NCQUZULFdBQVc7dUJBQUMsY0FBYzs7c0JBQzFCLFdBQVc7dUJBQUMsb0JBQW9CO2dCQU03QixRQUFRO3NCQURYLFdBQVc7dUJBQUMsZUFBZTtnQkFNNUIsUUFBUTtzQkFEUCxZQUFZO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IChjKSAyMDE2LTIwMjMgVk13YXJlLCBJbmMuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKiBUaGlzIHNvZnR3YXJlIGlzIHJlbGVhc2VkIHVuZGVyIE1JVCBsaWNlbnNlLlxuICogVGhlIGZ1bGwgbGljZW5zZSBpbmZvcm1hdGlvbiBjYW4gYmUgZm91bmQgaW4gTElDRU5TRSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBwcm9qZWN0LlxuICovXG5cbmltcG9ydCB7XG4gIENvbXBvbmVudEZhY3RvcnlSZXNvbHZlcixcbiAgRGlyZWN0aXZlLFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgSG9zdExpc3RlbmVyLFxuICBJbmplY3QsXG4gIElucHV0LFxuICBWaWV3Q29udGFpbmVyUmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgSUZfQUNUSVZFX0lELCBJZkFjdGl2ZVNlcnZpY2UgfSBmcm9tICcuLi8uLi91dGlscy9jb25kaXRpb25hbC9pZi1hY3RpdmUuc2VydmljZSc7XG5pbXBvcnQgeyBUZW1wbGF0ZVJlZkNvbnRhaW5lciB9IGZyb20gJy4uLy4uL3V0aWxzL3RlbXBsYXRlLXJlZi90ZW1wbGF0ZS1yZWYtY29udGFpbmVyJztcbmltcG9ydCB7IFRhYnNMYXlvdXQgfSBmcm9tICcuL2VudW1zL3RhYnMtbGF5b3V0LmVudW0nO1xuaW1wb3J0IHsgVGFic1NlcnZpY2UgfSBmcm9tICcuL3Byb3ZpZGVycy90YWJzLnNlcnZpY2UnO1xuaW1wb3J0IHsgVEFCU19JRCB9IGZyb20gJy4vdGFicy1pZC5wcm92aWRlcic7XG5cbmxldCBuYlRhYkxpbmtDb21wb25lbnRzID0gMDtcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2NsclRhYkxpbmtdJyxcbiAgaG9zdDoge1xuICAgICdbY2xhc3MuYnRuXSc6ICd0cnVlJyxcbiAgICByb2xlOiAndGFiJyxcbiAgICB0eXBlOiAnYnV0dG9uJyxcbiAgfSxcbn0pXG5leHBvcnQgY2xhc3MgQ2xyVGFiTGluayB7XG4gIEBJbnB1dCgnaWQnKSBASG9zdEJpbmRpbmcoJ2lkJykgdGFiTGlua0lkOiBzdHJpbmc7XG5cbiAgdGVtcGxhdGVSZWZDb250YWluZXI6IFRlbXBsYXRlUmVmQ29udGFpbmVyO1xuXG4gIHByaXZhdGUgX2luT3ZlcmZsb3c6IGJvb2xlYW47XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHVibGljIGlmQWN0aXZlU2VydmljZTogSWZBY3RpdmVTZXJ2aWNlLFxuICAgIEBJbmplY3QoSUZfQUNUSVZFX0lEKSBwcml2YXRlIGlkOiBudW1iZXIsXG4gICAgcHVibGljIGVsOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgY2ZyOiBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsXG4gICAgcHJpdmF0ZSB2aWV3Q29udGFpbmVyUmVmOiBWaWV3Q29udGFpbmVyUmVmLFxuICAgIHByaXZhdGUgdGFic1NlcnZpY2U6IFRhYnNTZXJ2aWNlLFxuICAgIEBJbmplY3QoVEFCU19JRCkgcHVibGljIHRhYnNJZDogbnVtYmVyXG4gICkge1xuICAgIGlmICghdGhpcy50YWJMaW5rSWQpIHtcbiAgICAgIHRoaXMudGFiTGlua0lkID0gJ2Nsci10YWItbGluay0nICsgbmJUYWJMaW5rQ29tcG9uZW50cysrO1xuICAgIH1cblxuICAgIC8vIFRhYiBsaW5rcyBjYW4gYmUgcmVuZGVyZWQgaW4gb25lIG9mIHR3byBwbGFjZXM6IGluIHRoZSBtYWluIGFyZWEgb3IgaW5zaWRlIHRoZSBvdmVyZmxvdyBkcm9wZG93biBtZW51LlxuICAgIC8vIEhlcmUsIHdlIGNyZWF0ZSBhIGNvbnRhaW5lciBzbyB0aGF0IGl0cyB0ZW1wbGF0ZSBjYW4gYmUgdXNlZCB0byBjcmVhdGUgZW1iZWRkZWRWaWV3IG9uIHRoZSBmbHkuXG4gICAgLy8gU2VlIFRhYnNTZXJ2aWNlJ3MgcmVuZGVyVmlldygpIG1ldGhvZCBhbmQgaG93IGl0J3MgdXNlZCBpbiBUYWJzIGNsYXNzIGZvciBhbiBleGFtcGxlLlxuICAgIGNvbnN0IGZhY3RvcnkgPSB0aGlzLmNmci5yZXNvbHZlQ29tcG9uZW50RmFjdG9yeShUZW1wbGF0ZVJlZkNvbnRhaW5lcik7XG4gICAgdGhpcy50ZW1wbGF0ZVJlZkNvbnRhaW5lciA9IHRoaXMudmlld0NvbnRhaW5lclJlZi5jcmVhdGVDb21wb25lbnQoZmFjdG9yeSwgdW5kZWZpbmVkLCB1bmRlZmluZWQsIFtcbiAgICAgIFt0aGlzLmVsLm5hdGl2ZUVsZW1lbnRdLFxuICAgIF0pLmluc3RhbmNlO1xuICB9XG5cbiAgQElucHV0KCdjbHJUYWJMaW5rSW5PdmVyZmxvdycpXG4gIGdldCBpbk92ZXJmbG93KCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9pbk92ZXJmbG93ICYmIHRoaXMudGFic1NlcnZpY2UubGF5b3V0ICE9PSBUYWJzTGF5b3V0LlZFUlRJQ0FMO1xuICB9XG4gIHNldCBpbk92ZXJmbG93KGluT3ZlcmZsb3cpIHtcbiAgICB0aGlzLl9pbk92ZXJmbG93ID0gaW5PdmVyZmxvdztcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuYnRuLWxpbmsnKVxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLm5hdi1saW5rJylcbiAgZ2V0IGFkZExpbmtDbGFzc2VzKCkge1xuICAgIHJldHVybiAhdGhpcy5pbk92ZXJmbG93O1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmFyaWEtY29udHJvbHMnKVxuICBnZXQgYXJpYUNvbnRyb2xzKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMudGFic1NlcnZpY2UuY2hpbGRyZW4uZmluZCh0YWIgPT4gdGFiLnRhYkxpbmsgPT09IHRoaXMpPy50YWJDb250ZW50Py50YWJDb250ZW50SWQ7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmFjdGl2ZScpXG4gIEBIb3N0QmluZGluZygnYXR0ci5hcmlhLXNlbGVjdGVkJylcbiAgZ2V0IGFjdGl2ZSgpIHtcbiAgICByZXR1cm4gdGhpcy5pZkFjdGl2ZVNlcnZpY2UuY3VycmVudCA9PT0gdGhpcy5pZDtcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnYXR0ci50YWJpbmRleCcpXG4gIGdldCB0YWJpbmRleCgpIHtcbiAgICByZXR1cm4gdGhpcy5hY3RpdmUgPyAwIDogLTE7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycpXG4gIGFjdGl2YXRlKCkge1xuICAgIHRoaXMuaWZBY3RpdmVTZXJ2aWNlLmN1cnJlbnQgPSB0aGlzLmlkO1xuICB9XG59XG4iXX0=