@angular-mdl/core
Version:
Angular components, directives and styles based on material design lite https://getmdl.io.
142 lines • 14.2 kB
JavaScript
import { Component, ContentChildren, EventEmitter, HostBinding, Input, Output, QueryList, ViewEncapsulation, } from "@angular/core";
import { MdlTabPanelComponent } from "./mdl-tab-panel.component";
import { toNumber } from "../common/number.property";
import { toBoolean } from "../common/boolean-property";
import * as i0 from "@angular/core";
import * as i1 from "../common/append-view-container-ref-directive";
import * as i2 from "../ripple/mdl-ripple.directive";
import * as i3 from "@angular/common";
export class MdlTabsComponent {
constructor() {
// eslint-disable-next-line
this.selectedTabEmitter = new EventEmitter();
this.tabs = new QueryList();
this.isTabs = true;
this.isUpgraded = true;
this.selectedIndexIntern = 0;
this.isRippleIntern = false;
}
get selectedIndex() {
return this.selectedIndexIntern;
}
set selectedIndex(value) {
this.selectedIndexIntern = toNumber(value) ?? 0;
}
get isRipple() {
return this.isRippleIntern;
}
set isRipple(value) {
this.isRippleIntern = toBoolean(value);
}
ngAfterContentInit() {
// the initial tabs
this.updateSelectedTabIndex();
// listen to tab changes - this would not be necessary if this would be fixed:
// https://github.com/angular/angular/issues/12818
this.tabs.changes.subscribe(() => {
this.updateSelectedTabIndex();
});
}
ngOnChanges(changes) {
if (changes["selectedIndex"]) {
this.updateSelectedTabIndex();
}
}
tabSelected(tab) {
if (tab.disabled) {
return;
}
const index = this.tabs.toArray().indexOf(tab);
if (index !== this.selectedIndex) {
this.selectedIndex = index;
this.updateSelectedTabIndex();
this.selectedTabEmitter.emit({ index: this.selectedIndex });
}
}
updateSelectedTabIndex() {
if (this.tabs) {
// https://github.com/angular/angular/issues/6005
// this would not be necessare if this would be fixed: https://github.com/angular/angular/issues/12818
setTimeout(() => {
this.tabs.forEach((tab, idx) => {
tab.isActive = this.selectedIndex === idx;
});
}, 1);
}
}
}
MdlTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MdlTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MdlTabsComponent, selector: "mdl-tabs", inputs: { selectedIndex: ["mdl-tab-active-index", "selectedIndex"], isRipple: ["mdl-ripple", "isRipple"] }, outputs: { selectedTabEmitter: "mdl-tab-active-changed" }, host: { properties: { "class.mdl-tabs": "this.isTabs", "class.is-upgraded": "this.isUpgraded" } }, queries: [{ propertyName: "tabs", predicate: MdlTabPanelComponent }], usesOnChanges: true, ngImport: i0, template: `
<div class="mdl-tabs__tab-bar">
<div *ngFor="let tab of tabs.toArray()">
<div
*ngIf="tab.titleComponent"
class="mdl-tabs__tab"
(click)="tabSelected(tab)"
[mdl-ripple]="isRipple && !tab.disabled"
[ngClass]="{ 'is-active': tab.isActive, disabled: tab.disabled }"
[append-view-container-ref]="tab.titleComponent.vcRef"
></div>
<a
*ngIf="!tab.titleComponent"
href="javascript:void(0)"
(click)="tabSelected(tab)"
class="mdl-tabs__tab"
[mdl-ripple]="isRipple && !tab.disabled"
[ngClass]="{ 'is-active': tab.isActive, disabled: tab.disabled }"
>{{ tab.title }}</a
>
</div>
</div>
<ng-content></ng-content>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.AppendViewContainerRefDirective, selector: "[append-view-container-ref]", inputs: ["append-view-container-ref"] }, { kind: "directive", type: i2.MdlAnchorRippleDirective, selector: "a[mdl-ripple],div[mdl-ripple]", inputs: ["mdl-ripple"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlTabsComponent, decorators: [{
type: Component,
args: [{
selector: "mdl-tabs",
template: `
<div class="mdl-tabs__tab-bar">
<div *ngFor="let tab of tabs.toArray()">
<div
*ngIf="tab.titleComponent"
class="mdl-tabs__tab"
(click)="tabSelected(tab)"
[mdl-ripple]="isRipple && !tab.disabled"
[ngClass]="{ 'is-active': tab.isActive, disabled: tab.disabled }"
[append-view-container-ref]="tab.titleComponent.vcRef"
></div>
<a
*ngIf="!tab.titleComponent"
href="javascript:void(0)"
(click)="tabSelected(tab)"
class="mdl-tabs__tab"
[mdl-ripple]="isRipple && !tab.disabled"
[ngClass]="{ 'is-active': tab.isActive, disabled: tab.disabled }"
>{{ tab.title }}</a
>
</div>
</div>
<ng-content></ng-content>
`,
encapsulation: ViewEncapsulation.None,
}]
}], propDecorators: { selectedTabEmitter: [{
type: Output,
args: ["mdl-tab-active-changed"]
}], tabs: [{
type: ContentChildren,
args: [MdlTabPanelComponent]
}], isTabs: [{
type: HostBinding,
args: ["class.mdl-tabs"]
}], isUpgraded: [{
type: HostBinding,
args: ["class.is-upgraded"]
}], selectedIndex: [{
type: Input,
args: ["mdl-tab-active-index"]
}], isRipple: [{
type: Input,
args: ["mdl-ripple"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWRsLXRhYnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZS9zcmMvbGliL3RhYnMvbWRsLXRhYnMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxTQUFTLEVBQ1QsZUFBZSxFQUNmLFlBQVksRUFDWixXQUFXLEVBQ1gsS0FBSyxFQUVMLE1BQU0sRUFDTixTQUFTLEVBRVQsaUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2pFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNyRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sNEJBQTRCLENBQUM7Ozs7O0FBOEJ2RCxNQUFNLE9BQU8sZ0JBQWdCO0lBNUI3QjtRQTZCRSwyQkFBMkI7UUFFM0IsdUJBQWtCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUV4QyxTQUFJLEdBQW9DLElBQUksU0FBUyxFQUF3QixDQUFDO1FBRzlFLFdBQU0sR0FBRyxJQUFJLENBQUM7UUFFZCxlQUFVLEdBQUcsSUFBSSxDQUFDO1FBRVYsd0JBQW1CLEdBQUcsQ0FBQyxDQUFDO1FBQ3hCLG1CQUFjLEdBQUcsS0FBSyxDQUFDO0tBNERoQztJQTFEQyxJQUNJLGFBQWE7UUFDZixPQUFPLElBQUksQ0FBQyxtQkFBbUIsQ0FBQztJQUNsQyxDQUFDO0lBRUQsSUFBSSxhQUFhLENBQUMsS0FBc0I7UUFDdEMsSUFBSSxDQUFDLG1CQUFtQixHQUFHLFFBQVEsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVELElBQ0ksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLGNBQWMsQ0FBQztJQUM3QixDQUFDO0lBRUQsSUFBSSxRQUFRLENBQUMsS0FBdUI7UUFDbEMsSUFBSSxDQUFDLGNBQWMsR0FBRyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVELGtCQUFrQjtRQUNoQixtQkFBbUI7UUFDbkIsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUM7UUFDOUIsOEVBQThFO1FBQzlFLGtEQUFrRDtRQUNsRCxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQy9CLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDO1FBQ2hDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxlQUFlLENBQUMsRUFBRTtZQUM1QixJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQztTQUMvQjtJQUNILENBQUM7SUFFRCxXQUFXLENBQUMsR0FBeUI7UUFDbkMsSUFBSSxHQUFHLENBQUMsUUFBUSxFQUFFO1lBQ2hCLE9BQU87U0FDUjtRQUVELE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQy9DLElBQUksS0FBSyxLQUFLLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDaEMsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7WUFDM0IsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUM7WUFDOUIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUMsQ0FBQztTQUM3RDtJQUNILENBQUM7SUFFTyxzQkFBc0I7UUFDNUIsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ2IsaURBQWlEO1lBQ2pELHNHQUFzRztZQUN0RyxVQUFVLENBQUMsR0FBRyxFQUFFO2dCQUNkLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsR0FBRyxFQUFFLEdBQUcsRUFBRSxFQUFFO29CQUM3QixHQUFHLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxhQUFhLEtBQUssR0FBRyxDQUFDO2dCQUM1QyxDQUFDLENBQUMsQ0FBQztZQUNMLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztTQUNQO0lBQ0gsQ0FBQzs7NkdBeEVVLGdCQUFnQjtpR0FBaEIsZ0JBQWdCLCtVQUlWLG9CQUFvQixrREE5QjNCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXVCVDsyRkFHVSxnQkFBZ0I7a0JBNUI1QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxVQUFVO29CQUNwQixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBdUJUO29CQUNELGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO2lCQUN0Qzs4QkFJQyxrQkFBa0I7c0JBRGpCLE1BQU07dUJBQUMsd0JBQXdCO2dCQUdoQyxJQUFJO3NCQURILGVBQWU7dUJBQUMsb0JBQW9CO2dCQUlyQyxNQUFNO3NCQURMLFdBQVc7dUJBQUMsZ0JBQWdCO2dCQUc3QixVQUFVO3NCQURULFdBQVc7dUJBQUMsbUJBQW1CO2dCQU81QixhQUFhO3NCQURoQixLQUFLO3VCQUFDLHNCQUFzQjtnQkFVekIsUUFBUTtzQkFEWCxLQUFLO3VCQUFDLFlBQVkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlckNvbnRlbnRJbml0LFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZHJlbixcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT3V0cHV0LFxuICBRdWVyeUxpc3QsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5pbXBvcnQgeyBNZGxUYWJQYW5lbENvbXBvbmVudCB9IGZyb20gXCIuL21kbC10YWItcGFuZWwuY29tcG9uZW50XCI7XG5pbXBvcnQgeyB0b051bWJlciB9IGZyb20gXCIuLi9jb21tb24vbnVtYmVyLnByb3BlcnR5XCI7XG5pbXBvcnQgeyB0b0Jvb2xlYW4gfSBmcm9tIFwiLi4vY29tbW9uL2Jvb2xlYW4tcHJvcGVydHlcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIm1kbC10YWJzXCIsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cIm1kbC10YWJzX190YWItYmFyXCI+XG4gICAgICA8ZGl2ICpuZ0Zvcj1cImxldCB0YWIgb2YgdGFicy50b0FycmF5KClcIj5cbiAgICAgICAgPGRpdlxuICAgICAgICAgICpuZ0lmPVwidGFiLnRpdGxlQ29tcG9uZW50XCJcbiAgICAgICAgICBjbGFzcz1cIm1kbC10YWJzX190YWJcIlxuICAgICAgICAgIChjbGljayk9XCJ0YWJTZWxlY3RlZCh0YWIpXCJcbiAgICAgICAgICBbbWRsLXJpcHBsZV09XCJpc1JpcHBsZSAmJiAhdGFiLmRpc2FibGVkXCJcbiAgICAgICAgICBbbmdDbGFzc109XCJ7ICdpcy1hY3RpdmUnOiB0YWIuaXNBY3RpdmUsIGRpc2FibGVkOiB0YWIuZGlzYWJsZWQgfVwiXG4gICAgICAgICAgW2FwcGVuZC12aWV3LWNvbnRhaW5lci1yZWZdPVwidGFiLnRpdGxlQ29tcG9uZW50LnZjUmVmXCJcbiAgICAgICAgPjwvZGl2PlxuICAgICAgICA8YVxuICAgICAgICAgICpuZ0lmPVwiIXRhYi50aXRsZUNvbXBvbmVudFwiXG4gICAgICAgICAgaHJlZj1cImphdmFzY3JpcHQ6dm9pZCgwKVwiXG4gICAgICAgICAgKGNsaWNrKT1cInRhYlNlbGVjdGVkKHRhYilcIlxuICAgICAgICAgIGNsYXNzPVwibWRsLXRhYnNfX3RhYlwiXG4gICAgICAgICAgW21kbC1yaXBwbGVdPVwiaXNSaXBwbGUgJiYgIXRhYi5kaXNhYmxlZFwiXG4gICAgICAgICAgW25nQ2xhc3NdPVwieyAnaXMtYWN0aXZlJzogdGFiLmlzQWN0aXZlLCBkaXNhYmxlZDogdGFiLmRpc2FibGVkIH1cIlxuICAgICAgICAgID57eyB0YWIudGl0bGUgfX08L2FcbiAgICAgICAgPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICBgLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBNZGxUYWJzQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCwgT25DaGFuZ2VzIHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lXG4gIEBPdXRwdXQoXCJtZGwtdGFiLWFjdGl2ZS1jaGFuZ2VkXCIpXG4gIHNlbGVjdGVkVGFiRW1pdHRlciA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQENvbnRlbnRDaGlsZHJlbihNZGxUYWJQYW5lbENvbXBvbmVudClcbiAgdGFiczogUXVlcnlMaXN0PE1kbFRhYlBhbmVsQ29tcG9uZW50PiA9IG5ldyBRdWVyeUxpc3Q8TWRsVGFiUGFuZWxDb21wb25lbnQ+KCk7XG5cbiAgQEhvc3RCaW5kaW5nKFwiY2xhc3MubWRsLXRhYnNcIilcbiAgaXNUYWJzID0gdHJ1ZTtcbiAgQEhvc3RCaW5kaW5nKFwiY2xhc3MuaXMtdXBncmFkZWRcIilcbiAgaXNVcGdyYWRlZCA9IHRydWU7XG5cbiAgcHJpdmF0ZSBzZWxlY3RlZEluZGV4SW50ZXJuID0gMDtcbiAgcHJpdmF0ZSBpc1JpcHBsZUludGVybiA9IGZhbHNlO1xuXG4gIEBJbnB1dChcIm1kbC10YWItYWN0aXZlLWluZGV4XCIpXG4gIGdldCBzZWxlY3RlZEluZGV4KCk6IG51bWJlciB7XG4gICAgcmV0dXJuIHRoaXMuc2VsZWN0ZWRJbmRleEludGVybjtcbiAgfVxuXG4gIHNldCBzZWxlY3RlZEluZGV4KHZhbHVlOiBudW1iZXIgfCBzdHJpbmcpIHtcbiAgICB0aGlzLnNlbGVjdGVkSW5kZXhJbnRlcm4gPSB0b051bWJlcih2YWx1ZSkgPz8gMDtcbiAgfVxuXG4gIEBJbnB1dChcIm1kbC1yaXBwbGVcIilcbiAgZ2V0IGlzUmlwcGxlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLmlzUmlwcGxlSW50ZXJuO1xuICB9XG5cbiAgc2V0IGlzUmlwcGxlKHZhbHVlOiBib29sZWFuIHwgc3RyaW5nKSB7XG4gICAgdGhpcy5pc1JpcHBsZUludGVybiA9IHRvQm9vbGVhbih2YWx1ZSk7XG4gIH1cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgLy8gdGhlIGluaXRpYWwgdGFic1xuICAgIHRoaXMudXBkYXRlU2VsZWN0ZWRUYWJJbmRleCgpO1xuICAgIC8vIGxpc3RlbiB0byB0YWIgY2hhbmdlcyAtIHRoaXMgd291bGQgbm90IGJlIG5lY2Vzc2FyeSBpZiB0aGlzIHdvdWxkIGJlIGZpeGVkOlxuICAgIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS9hbmd1bGFyL2FuZ3VsYXIvaXNzdWVzLzEyODE4XG4gICAgdGhpcy50YWJzLmNoYW5nZXMuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgIHRoaXMudXBkYXRlU2VsZWN0ZWRUYWJJbmRleCgpO1xuICAgIH0pO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzW1wic2VsZWN0ZWRJbmRleFwiXSkge1xuICAgICAgdGhpcy51cGRhdGVTZWxlY3RlZFRhYkluZGV4KCk7XG4gICAgfVxuICB9XG5cbiAgdGFiU2VsZWN0ZWQodGFiOiBNZGxUYWJQYW5lbENvbXBvbmVudCk6IHZvaWQge1xuICAgIGlmICh0YWIuZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBjb25zdCBpbmRleCA9IHRoaXMudGFicy50b0FycmF5KCkuaW5kZXhPZih0YWIpO1xuICAgIGlmIChpbmRleCAhPT0gdGhpcy5zZWxlY3RlZEluZGV4KSB7XG4gICAgICB0aGlzLnNlbGVjdGVkSW5kZXggPSBpbmRleDtcbiAgICAgIHRoaXMudXBkYXRlU2VsZWN0ZWRUYWJJbmRleCgpO1xuICAgICAgdGhpcy5zZWxlY3RlZFRhYkVtaXR0ZXIuZW1pdCh7IGluZGV4OiB0aGlzLnNlbGVjdGVkSW5kZXggfSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVTZWxlY3RlZFRhYkluZGV4KCkge1xuICAgIGlmICh0aGlzLnRhYnMpIHtcbiAgICAgIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS9hbmd1bGFyL2FuZ3VsYXIvaXNzdWVzLzYwMDVcbiAgICAgIC8vIHRoaXMgd291bGQgbm90IGJlIG5lY2Vzc2FyZSBpZiB0aGlzIHdvdWxkIGJlIGZpeGVkOiBodHRwczovL2dpdGh1Yi5jb20vYW5ndWxhci9hbmd1bGFyL2lzc3Vlcy8xMjgxOFxuICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgIHRoaXMudGFicy5mb3JFYWNoKCh0YWIsIGlkeCkgPT4ge1xuICAgICAgICAgIHRhYi5pc0FjdGl2ZSA9IHRoaXMuc2VsZWN0ZWRJbmRleCA9PT0gaWR4O1xuICAgICAgICB9KTtcbiAgICAgIH0sIDEpO1xuICAgIH1cbiAgfVxufVxuIl19