@vismaux/ngx-nordic-cool
Version:
Common Nordic-Cool components for Angular.
80 lines • 12.7 kB
JavaScript
import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Input, Output, } from '@angular/core';
import { NcTabComponent } from './tab.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class NcTabChangeEvent {
}
export class NcTabsetComponent {
constructor(cdRef) {
this.cdRef = cdRef;
this.indexToSelect = 0;
this.selectedIndexChange = new EventEmitter(true);
this.selectedTabChange = new EventEmitter(true);
}
set selectedIndex(value) {
if (this._selectedIndex === value) {
return;
}
this.selectTab(value, false);
}
get selectedIndex() {
return this._selectedIndex;
}
ngAfterContentInit() {
if (!this.selectedTab) {
this.selectTab(this.indexToSelect);
}
this.tabs.changes.subscribe(() => {
this.selectTab(this.selectedIndex, true);
this.cdRef.markForCheck();
});
}
selectTab(index, broadcastEvent = false) {
if (!this.tabs?.length) {
this.indexToSelect = index;
return;
}
const clampedTabIndex = this.clampTabIndex(index);
const tabAtIndex = this.tabs.find((_, i) => i === clampedTabIndex);
if (tabAtIndex.disabled) {
return;
}
if (clampedTabIndex !== this.selectedIndex) {
this._selectedIndex = clampedTabIndex;
if (broadcastEvent) {
this.selectedIndexChange.emit(clampedTabIndex);
}
}
if (tabAtIndex !== this.selectedTab) {
this.selectedTab = tabAtIndex;
if (broadcastEvent) {
this.selectedTabChange.emit({
index: clampedTabIndex,
tab: tabAtIndex,
});
}
}
}
clampTabIndex(index) {
// Note the `|| 0`, which ensures that values like NaN can't get through
return Math.min(this.tabs.length - 1, Math.max(index || 0, 0));
}
}
NcTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NcTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NcTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: NcTabsetComponent, selector: "nc-tabset", inputs: { justified: "justified", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange" }, queries: [{ propertyName: "tabs", predicate: NcTabComponent }], ngImport: i0, template: "<ul class=\"nav nav-tabs hide-tabdrop\" [class.nav-justified]=\"justified\">\n <li\n *ngFor=\"let tab of tabs; let i = index\"\n class=\"nav-item\"\n [class.disabled]=\"tab.disabled\"\n [class.active]=\"i === selectedIndex\"\n role=\"presentation\"\n >\n <a\n role=\"tab\"\n href=\"\"\n [tabindex]=\"tab.disabled ? -1 : undefined\"\n (click)=\"selectTab(i, true); $event.preventDefault()\"\n >\n <ng-template [ngIf]=\"!tab.titleTpl\">{{ tab.title }}</ng-template>\n <ng-template [ngTemplateOutlet]=\"tab.titleTpl\"></ng-template>\n </a>\n </li>\n</ul>\n\n<div class=\"tab-content\">\n <ng-template [ngTemplateOutlet]=\"selectedTab?.contentTpl\"></ng-template>\n</div>\n", styles: [":host{display:block}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NcTabsetComponent, decorators: [{
type: Component,
args: [{ selector: 'nc-tabset', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"nav nav-tabs hide-tabdrop\" [class.nav-justified]=\"justified\">\n <li\n *ngFor=\"let tab of tabs; let i = index\"\n class=\"nav-item\"\n [class.disabled]=\"tab.disabled\"\n [class.active]=\"i === selectedIndex\"\n role=\"presentation\"\n >\n <a\n role=\"tab\"\n href=\"\"\n [tabindex]=\"tab.disabled ? -1 : undefined\"\n (click)=\"selectTab(i, true); $event.preventDefault()\"\n >\n <ng-template [ngIf]=\"!tab.titleTpl\">{{ tab.title }}</ng-template>\n <ng-template [ngTemplateOutlet]=\"tab.titleTpl\"></ng-template>\n </a>\n </li>\n</ul>\n\n<div class=\"tab-content\">\n <ng-template [ngTemplateOutlet]=\"selectedTab?.contentTpl\"></ng-template>\n</div>\n", styles: [":host{display:block}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { justified: [{
type: Input
}], selectedIndex: [{
type: Input
}], selectedIndexChange: [{
type: Output
}], selectedTabChange: [{
type: Output
}], tabs: [{
type: ContentChildren,
args: [NcTabComponent]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFic2V0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1ub3JkaWMtY29vbC9zcmMvbGliL3RhYnNldC90YWJzZXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW5vcmRpYy1jb29sL3NyYy9saWIvdGFic2V0L3RhYnNldC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEdBRVAsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFFakQsTUFBTSxPQUFPLGdCQUFnQjtDQUc1QjtBQVFELE1BQU0sT0FBTyxpQkFBaUI7SUF3QjVCLFlBQW9CLEtBQXdCO1FBQXhCLFVBQUssR0FBTCxLQUFLLENBQW1CO1FBdkJwQyxrQkFBYSxHQUFHLENBQUMsQ0FBQztRQWtCaEIsd0JBQW1CLEdBQUcsSUFBSSxZQUFZLENBQVMsSUFBSSxDQUFDLENBQUM7UUFDckQsc0JBQWlCLEdBQUcsSUFBSSxZQUFZLENBQW1CLElBQUksQ0FBQyxDQUFDO0lBSXhCLENBQUM7SUFoQmhELElBQ0ksYUFBYSxDQUFDLEtBQWE7UUFDN0IsSUFBSSxJQUFJLENBQUMsY0FBYyxLQUFLLEtBQUssRUFBRTtZQUNqQyxPQUFPO1NBQ1I7UUFDRCxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQztJQUMvQixDQUFDO0lBQ0QsSUFBSSxhQUFhO1FBQ2YsT0FBTyxJQUFJLENBQUMsY0FBYyxDQUFDO0lBQzdCLENBQUM7SUFTRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDckIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7U0FDcEM7UUFFRCxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQy9CLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsQ0FBQztZQUN6QyxJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQzVCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFNBQVMsQ0FBQyxLQUFhLEVBQUUsY0FBYyxHQUFHLEtBQUs7UUFDN0MsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsTUFBTSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO1lBQzNCLE9BQU87U0FDUjtRQUVELE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDbEQsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEtBQUssZUFBZSxDQUFDLENBQUM7UUFFbkUsSUFBSSxVQUFVLENBQUMsUUFBUSxFQUFFO1lBQ3ZCLE9BQU87U0FDUjtRQUVELElBQUksZUFBZSxLQUFLLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDMUMsSUFBSSxDQUFDLGNBQWMsR0FBRyxlQUFlLENBQUM7WUFDdEMsSUFBSSxjQUFjLEVBQUU7Z0JBQ2xCLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDLENBQUM7YUFDaEQ7U0FDRjtRQUVELElBQUksVUFBVSxLQUFLLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDbkMsSUFBSSxDQUFDLFdBQVcsR0FBRyxVQUFVLENBQUM7WUFDOUIsSUFBSSxjQUFjLEVBQUU7Z0JBQ2xCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUM7b0JBQzFCLEtBQUssRUFBRSxlQUFlO29CQUN0QixHQUFHLEVBQUUsVUFBVTtpQkFDaEIsQ0FBQyxDQUFDO2FBQ0o7U0FDRjtJQUNILENBQUM7SUFFTyxhQUFhLENBQUMsS0FBYTtRQUNqQyx3RUFBd0U7UUFDeEUsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLEtBQUssSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNqRSxDQUFDOzs4R0F2RVUsaUJBQWlCO2tHQUFqQixpQkFBaUIsMk9Bc0JYLGNBQWMsNkJDL0NqQyx5dEJBdUJBOzJGREVhLGlCQUFpQjtrQkFON0IsU0FBUzsrQkFDRSxXQUFXLG1CQUdKLHVCQUF1QixDQUFDLE1BQU07d0dBUXRDLFNBQVM7c0JBQWpCLEtBQUs7Z0JBR0YsYUFBYTtzQkFEaEIsS0FBSztnQkFXSSxtQkFBbUI7c0JBQTVCLE1BQU07Z0JBQ0csaUJBQWlCO3NCQUExQixNQUFNO2dCQUUwQixJQUFJO3NCQUFwQyxlQUFlO3VCQUFDLGNBQWMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlckNvbnRlbnRJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFF1ZXJ5TGlzdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IE5jVGFiQ29tcG9uZW50IH0gZnJvbSAnLi90YWIuY29tcG9uZW50JztcblxuZXhwb3J0IGNsYXNzIE5jVGFiQ2hhbmdlRXZlbnQge1xuICBpbmRleDogbnVtYmVyO1xuICB0YWI6IE5jVGFiQ29tcG9uZW50O1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduYy10YWJzZXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFic2V0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGFic2V0LmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBOY1RhYnNldENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuICBwcml2YXRlIGluZGV4VG9TZWxlY3QgPSAwO1xuICBwcml2YXRlIF9zZWxlY3RlZEluZGV4OiBudW1iZXI7XG5cbiAgc2VsZWN0ZWRUYWI6IE5jVGFiQ29tcG9uZW50O1xuXG4gIEBJbnB1dCgpIGp1c3RpZmllZDogYm9vbGVhbjtcblxuICBASW5wdXQoKVxuICBzZXQgc2VsZWN0ZWRJbmRleCh2YWx1ZTogbnVtYmVyKSB7XG4gICAgaWYgKHRoaXMuX3NlbGVjdGVkSW5kZXggPT09IHZhbHVlKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuc2VsZWN0VGFiKHZhbHVlLCBmYWxzZSk7XG4gIH1cbiAgZ2V0IHNlbGVjdGVkSW5kZXgoKSB7XG4gICAgcmV0dXJuIHRoaXMuX3NlbGVjdGVkSW5kZXg7XG4gIH1cblxuICBAT3V0cHV0KCkgc2VsZWN0ZWRJbmRleENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPih0cnVlKTtcbiAgQE91dHB1dCgpIHNlbGVjdGVkVGFiQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxOY1RhYkNoYW5nZUV2ZW50Pih0cnVlKTtcblxuICBAQ29udGVudENoaWxkcmVuKE5jVGFiQ29tcG9uZW50KSB0YWJzOiBRdWVyeUxpc3Q8TmNUYWJDb21wb25lbnQ+O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2RSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuc2VsZWN0ZWRUYWIpIHtcbiAgICAgIHRoaXMuc2VsZWN0VGFiKHRoaXMuaW5kZXhUb1NlbGVjdCk7XG4gICAgfVxuXG4gICAgdGhpcy50YWJzLmNoYW5nZXMuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgIHRoaXMuc2VsZWN0VGFiKHRoaXMuc2VsZWN0ZWRJbmRleCwgdHJ1ZSk7XG4gICAgICB0aGlzLmNkUmVmLm1hcmtGb3JDaGVjaygpO1xuICAgIH0pO1xuICB9XG5cbiAgc2VsZWN0VGFiKGluZGV4OiBudW1iZXIsIGJyb2FkY2FzdEV2ZW50ID0gZmFsc2UpIHtcbiAgICBpZiAoIXRoaXMudGFicz8ubGVuZ3RoKSB7XG4gICAgICB0aGlzLmluZGV4VG9TZWxlY3QgPSBpbmRleDtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBjb25zdCBjbGFtcGVkVGFiSW5kZXggPSB0aGlzLmNsYW1wVGFiSW5kZXgoaW5kZXgpO1xuICAgIGNvbnN0IHRhYkF0SW5kZXggPSB0aGlzLnRhYnMuZmluZCgoXywgaSkgPT4gaSA9PT0gY2xhbXBlZFRhYkluZGV4KTtcblxuICAgIGlmICh0YWJBdEluZGV4LmRpc2FibGVkKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgaWYgKGNsYW1wZWRUYWJJbmRleCAhPT0gdGhpcy5zZWxlY3RlZEluZGV4KSB7XG4gICAgICB0aGlzLl9zZWxlY3RlZEluZGV4ID0gY2xhbXBlZFRhYkluZGV4O1xuICAgICAgaWYgKGJyb2FkY2FzdEV2ZW50KSB7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRJbmRleENoYW5nZS5lbWl0KGNsYW1wZWRUYWJJbmRleCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgaWYgKHRhYkF0SW5kZXggIT09IHRoaXMuc2VsZWN0ZWRUYWIpIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWRUYWIgPSB0YWJBdEluZGV4O1xuICAgICAgaWYgKGJyb2FkY2FzdEV2ZW50KSB7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRUYWJDaGFuZ2UuZW1pdCh7XG4gICAgICAgICAgaW5kZXg6IGNsYW1wZWRUYWJJbmRleCxcbiAgICAgICAgICB0YWI6IHRhYkF0SW5kZXgsXG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgY2xhbXBUYWJJbmRleChpbmRleDogbnVtYmVyKTogbnVtYmVyIHtcbiAgICAvLyBOb3RlIHRoZSBgfHwgMGAsIHdoaWNoIGVuc3VyZXMgdGhhdCB2YWx1ZXMgbGlrZSBOYU4gY2FuJ3QgZ2V0IHRocm91Z2hcbiAgICByZXR1cm4gTWF0aC5taW4odGhpcy50YWJzLmxlbmd0aCAtIDEsIE1hdGgubWF4KGluZGV4IHx8IDAsIDApKTtcbiAgfVxufVxuIiwiPHVsIGNsYXNzPVwibmF2IG5hdi10YWJzIGhpZGUtdGFiZHJvcFwiIFtjbGFzcy5uYXYtanVzdGlmaWVkXT1cImp1c3RpZmllZFwiPlxuICA8bGlcbiAgICAqbmdGb3I9XCJsZXQgdGFiIG9mIHRhYnM7IGxldCBpID0gaW5kZXhcIlxuICAgIGNsYXNzPVwibmF2LWl0ZW1cIlxuICAgIFtjbGFzcy5kaXNhYmxlZF09XCJ0YWIuZGlzYWJsZWRcIlxuICAgIFtjbGFzcy5hY3RpdmVdPVwiaSA9PT0gc2VsZWN0ZWRJbmRleFwiXG4gICAgcm9sZT1cInByZXNlbnRhdGlvblwiXG4gID5cbiAgICA8YVxuICAgICAgcm9sZT1cInRhYlwiXG4gICAgICBocmVmPVwiXCJcbiAgICAgIFt0YWJpbmRleF09XCJ0YWIuZGlzYWJsZWQgPyAtMSA6IHVuZGVmaW5lZFwiXG4gICAgICAoY2xpY2spPVwic2VsZWN0VGFiKGksIHRydWUpOyAkZXZlbnQucHJldmVudERlZmF1bHQoKVwiXG4gICAgPlxuICAgICAgPG5nLXRlbXBsYXRlIFtuZ0lmXT1cIiF0YWIudGl0bGVUcGxcIj57eyB0YWIudGl0bGUgfX08L25nLXRlbXBsYXRlPlxuICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInRhYi50aXRsZVRwbFwiPjwvbmctdGVtcGxhdGU+XG4gICAgPC9hPlxuICA8L2xpPlxuPC91bD5cblxuPGRpdiBjbGFzcz1cInRhYi1jb250ZW50XCI+XG4gIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJzZWxlY3RlZFRhYj8uY29udGVudFRwbFwiPjwvbmctdGVtcGxhdGU+XG48L2Rpdj5cbiJdfQ==