md2
Version:
Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Chips(Tags), Collapse, Colorpicker, Data Table, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.
373 lines • 16.2 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Component, ContentChildren, Directive, ElementRef, EventEmitter, Input, Output, QueryList, TemplateRef, ViewContainerRef, ViewEncapsulation, NgModule, } from '@angular/core';
import { CommonModule } from '@angular/common';
/** Change event object that is emitted when the tab has changed. */
var Md2TabChange = (function () {
function Md2TabChange(tab, index) {
this.tab = tab;
this.index = index;
}
return Md2TabChange;
}());
export { Md2TabChange };
var Md2Transclude = (function () {
function Md2Transclude(viewRef) {
this.viewRef = viewRef;
}
Object.defineProperty(Md2Transclude.prototype, "md2Transclude", {
get: function () { return this._md2Transclude; },
set: function (templateRef) {
this._md2Transclude = templateRef;
if (templateRef) {
this.viewRef.createEmbeddedView(templateRef);
}
},
enumerable: true,
configurable: true
});
return Md2Transclude;
}());
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [TemplateRef])
], Md2Transclude.prototype, "md2Transclude", null);
Md2Transclude = __decorate([
Directive({ selector: '[md2Transclude]' }),
__metadata("design:paramtypes", [ViewContainerRef])
], Md2Transclude);
export { Md2Transclude };
var Md2Tab = (function () {
function Md2Tab() {
}
return Md2Tab;
}());
__decorate([
Input(),
__metadata("design:type", String)
], Md2Tab.prototype, "label", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], Md2Tab.prototype, "active", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], Md2Tab.prototype, "disabled", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], Md2Tab.prototype, "class", void 0);
Md2Tab = __decorate([
Component({selector: 'md2-tab',
template: "<ng-content></ng-content>",
host: {
'[class]': 'class',
'[class.active]': 'active'
}
})
], Md2Tab);
export { Md2Tab };
var Md2TabLabel = (function () {
function Md2TabLabel(templateRef, tab) {
this.templateRef = templateRef;
tab.labelRef = templateRef;
}
return Md2TabLabel;
}());
Md2TabLabel = __decorate([
Directive({ selector: '[md2-tab-label]' }),
__metadata("design:paramtypes", [TemplateRef, Md2Tab])
], Md2TabLabel);
export { Md2TabLabel };
var Md2Tabs = (function () {
function Md2Tabs(elementRef) {
this.elementRef = elementRef;
this._isInitialized = false;
this._focusIndex = 0;
this._selectedIndex = 0;
this._shouldPaginate = false;
this._offsetLeft = 0;
this._inkBarLeft = '0';
this._inkBarWidth = '0';
this.change = new EventEmitter();
this.selectedIndexChange = new EventEmitter();
}
Object.defineProperty(Md2Tabs.prototype, "selectedIndex", {
get: function () { return this._selectedIndex; },
set: function (value) {
if (typeof value === 'string') {
value = parseInt(value);
}
if (value !== this._selectedIndex) {
this._selectedIndex = value;
this.adjustOffset(value);
this._updateInkBar();
if (this.tabs) {
var tabs = this.tabs.toArray();
if (!tabs[value].disabled) {
tabs.forEach(function (tab) { return tab.active = false; });
tabs[value].active = true;
}
}
if (this._isInitialized) {
this._emitChangeEvent();
this.selectedIndexChange.emit(value);
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Tabs.prototype, "focusIndex", {
get: function () { return this._focusIndex; },
set: function (value) {
this._focusIndex = value;
this.adjustOffset(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Tabs.prototype, "element", {
get: function () {
var elements = {
root: this.elementRef.nativeElement,
wrapper: null,
canvas: null,
paging: null,
tabs: null
};
elements.wrapper = elements.root.querySelector('.md2-tabs-header-wrapper');
elements.canvas = elements.wrapper.querySelector('.md2-tabs-canvas');
elements.paging = elements.canvas.querySelector('.md2-tabs-header');
elements.tabs = elements.paging.querySelectorAll('.md2-tab-label');
return elements;
},
enumerable: true,
configurable: true
});
/**
* After Content Init
*/
Md2Tabs.prototype.ngAfterContentInit = function () {
var _this = this;
setTimeout(function () {
_this.updatePagination();
}, 0);
setTimeout(function () {
var tabs = _this.tabs.toArray();
if (_this.selectedIndex) {
if (_this.selectedIndex >= tabs.length) {
_this.selectedIndex = 0;
}
tabs.forEach(function (tab) { return tab.active = false; });
tabs[_this.selectedIndex].active = true;
_this.adjustOffset(_this.selectedIndex);
}
else {
var index = tabs.findIndex(function (t) { return t.active; });
if (index < 0) {
tabs[0].active = true;
}
else {
_this.selectedIndex = index;
}
}
_this._updateInkBar();
}, 0);
this._isInitialized = true;
};
/**
* Calculates the styles from the selected tab for the ink-bar.
*/
Md2Tabs.prototype._updateInkBar = function () {
var elements = this.element;
if (!elements.tabs[this.selectedIndex]) {
return;
}
var tab = elements.tabs[this.selectedIndex];
this._inkBarLeft = tab.offsetLeft + 'px';
this._inkBarWidth = tab.offsetWidth + 'px';
};
/** Emits an event when the user selects an option. */
Md2Tabs.prototype._emitChangeEvent = function () {
var index = this._selectedIndex;
this.change.emit(new Md2TabChange(this.tabs.toArray()[index], index));
};
/**
* Focus next Tab
*/
Md2Tabs.prototype.focusNextTab = function () { this.incrementIndex(1); };
/**
* Focus previous Tab
*/
Md2Tabs.prototype.focusPreviousTab = function () { this.incrementIndex(-1); };
/**
* Mouse Wheel scroll
* @param event
*/
Md2Tabs.prototype.scroll = function (event) {
if (!this._shouldPaginate) {
return;
}
event.preventDefault();
this._offsetLeft = this.fixOffset(this._offsetLeft - event.wheelDelta);
};
/**
* Next Page
*/
Md2Tabs.prototype.nextPage = function () {
var elements = this.element;
var viewportWidth = elements.canvas.clientWidth, totalWidth = viewportWidth + this._offsetLeft, i, tab;
for (i = 0; i < elements.tabs.length; i++) {
tab = elements.tabs[i];
if (tab.offsetLeft + tab.offsetWidth > totalWidth) {
break;
}
}
this._offsetLeft = this.fixOffset(tab.offsetLeft);
};
/**
* Previous Page
*/
Md2Tabs.prototype.previousPage = function () {
var i, tab, elements = this.element;
for (i = 0; i < elements.tabs.length; i++) {
tab = elements.tabs[i];
if (tab.offsetLeft + tab.offsetWidth >= this._offsetLeft) {
break;
}
}
this._offsetLeft = this.fixOffset(tab.offsetLeft +
tab.offsetWidth - elements.canvas.clientWidth);
};
/**
* On Window Resize
* @param event
*/
Md2Tabs.prototype.onWindowResize = function () {
this._offsetLeft = this.fixOffset(this._offsetLeft);
this.updatePagination();
};
/**
* Can page Back
*/
Md2Tabs.prototype.canPageBack = function () { return this._offsetLeft > 0; };
/**
* Can page Previous
*/
Md2Tabs.prototype.canPageForward = function () {
var elements = this.element;
var lastTab = elements.tabs[elements.tabs.length - 1];
return lastTab && lastTab.offsetLeft + lastTab.offsetWidth > elements.canvas.clientWidth +
this._offsetLeft;
};
/**
* Update Pagination
*/
Md2Tabs.prototype.updatePagination = function () {
var canvasWidth = this.element.root.clientWidth;
var tabs = this.element.tabs ? this.element.tabs : [];
for (var i = 0; i < tabs.length; i++) {
canvasWidth -= tabs[i].offsetWidth;
}
this._shouldPaginate = canvasWidth < 0;
};
/**
* Increment Focus Tab
* @param inc
*/
Md2Tabs.prototype.incrementIndex = function (inc) {
var newIndex, index = this.focusIndex;
for (newIndex = index + inc; this.tabs.toArray()[newIndex] && this.tabs.toArray()[newIndex].disabled; newIndex += inc) { }
if (this.tabs.toArray()[newIndex]) {
this.focusIndex = newIndex;
}
};
/**
* Adjust Offset of Tab
* @param index
*/
Md2Tabs.prototype.adjustOffset = function (index) {
var elements = this.element;
if (!elements.tabs[index]) {
return;
}
var tab = elements.tabs[index], left = tab.offsetLeft, right = tab.offsetWidth + left;
this._offsetLeft = Math.max(this._offsetLeft, this.fixOffset(right - elements.canvas.clientWidth + 32 * 2));
this._offsetLeft = Math.min(this._offsetLeft, this.fixOffset(left));
};
/**
* Fix Offset of Tab
* @param value
* @return value
*/
Md2Tabs.prototype.fixOffset = function (value) {
var elements = this.element;
if (!elements.tabs.length || !this._shouldPaginate) {
return 0;
}
var lastTab = elements.tabs[elements.tabs.length - 1], totalWidth = lastTab.offsetLeft + lastTab.offsetWidth;
value = Math.min(totalWidth - elements.canvas.clientWidth, value);
value = Math.max(0, value);
return value;
};
return Md2Tabs;
}());
__decorate([
ContentChildren(Md2Tab),
__metadata("design:type", QueryList)
], Md2Tabs.prototype, "tabs", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], Md2Tabs.prototype, "class", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], Md2Tabs.prototype, "selectedIndex", null);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], Md2Tabs.prototype, "change", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], Md2Tabs.prototype, "selectedIndexChange", void 0);
Md2Tabs = __decorate([
Component({selector: 'md2-tabs',
template: "<div class=\"md2-tabs-header-wrapper\"><div role=\"button\" class=\"md2-prev-button\" [class.disabled]=\"!canPageBack()\" *ngIf=\"_shouldPaginate\" (click)=\"previousPage()\"><em class=\"prev-icon\">Prev</em></div><div role=\"button\" class=\"md2-next-button\" [class.disabled]=\"!canPageForward()\" *ngIf=\"_shouldPaginate\" (click)=\"nextPage()\"><em class=\"next-icon\">Next</em></div><div class=\"md2-tabs-canvas\" [class.md2-paginated]=\"_shouldPaginate\" role=\"tablist\" tabindex=\"0\" (keydown.arrowRight)=\"focusNextTab()\" (keydown.arrowLeft)=\"focusPreviousTab()\" (keydown.enter)=\"selectedIndex = focusIndex\" (mousewheel)=\"scroll($event)\"><div class=\"md2-tabs-header\" [style.marginLeft.px]=\"-_offsetLeft\"><div class=\"md2-tab-label\" role=\"tab\" *ngFor=\"let tab of tabs; let i = index\" [class.focus]=\"focusIndex === i\" [class.active]=\"selectedIndex === i\" [class.disabled]=\"tab.disabled\" (click)=\"focusIndex = selectedIndex = i\"><span [md2Transclude]=\"tab.labelRef\">{{tab.label}}</span></div><div class=\"md2-tab-ink-bar\" [style.left]=\"_inkBarLeft\" [style.width]=\"_inkBarWidth\"></div></div></div></div><div class=\"md2-tabs-body-wrapper\"><ng-content></ng-content></div>",
styles: ["md2-tabs{position:relative;overflow:hidden;display:block;margin:0;border:1px solid #e1e1e1;border-radius:2px}.md2-tabs-header-wrapper{position:relative;display:block;height:48px;background:#fff;border-width:0 0 1px;border-style:solid;border-color:rgba(0,0,0,.12);margin:0;padding:0;list-style:none;user-select:none}.md2-tabs-header-wrapper::after{content:'';display:table;clear:both}.md2-next-button,.md2-prev-button{position:absolute;top:0;height:100%;width:32px;padding:8px 0;z-index:2;cursor:pointer}.md2-next-button.disabled,.md2-prev-button.disabled{opacity:.25;cursor:default}.md2-prev-button{left:0}.md2-next-button{right:0}.md2-next-button .next-icon,.md2-prev-button .prev-icon{display:block;width:12px;height:12px;font-size:0;border-width:0 0 2px 2px;border-style:solid;border-color:#757575;border-radius:1px;transform:rotate(45deg);margin:10px}.md2-next-button .next-icon{border-width:2px 2px 0 0}.md2-tabs-canvas{position:relative;height:100%;overflow:hidden;display:block;outline:0}.md2-tabs-canvas.md2-paginated{margin:0 32px}.md2-tabs-header{position:relative;display:inline-block;height:100%;white-space:nowrap;transition:.5s cubic-bezier(.35,0,.25,1)}.md2-tab-label{position:relative;height:100%;color:rgba(0,0,0,.54);font-size:14px;text-align:center;line-height:24px;padding:12px 24px;transition:background-color 350ms cubic-bezier(.35,0,.25,1);cursor:pointer;white-space:nowrap;text-transform:uppercase;display:inline-block;font-weight:500;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.md2-tab-label.active{color:#106cc8}.md2-tabs-canvas:focus .md2-tab-label.focus{background:rgba(0,0,0,.05)}.md2-tab-label.disabled{color:rgba(0,0,0,.26);pointer-events:none;user-select:none;-webkit-user-drag:none;opacity:.5;cursor:default}.md2-tab-ink-bar{position:absolute;bottom:0;height:2px;background:#ff5252;transition:250ms cubic-bezier(.35,0,.25,1)}.md2-tabs-body-wrapper{position:relative;min-height:0;display:block;clear:both}md2-tab{padding:16px;display:none;position:relative}md2-tab.active{display:block;position:relative} /*# sourceMappingURL=tabs.css.map */ "],
host: {
'[class]': 'class',
'(window:resize)': 'onWindowResize()'
},
encapsulation: ViewEncapsulation.None
}),
__metadata("design:paramtypes", [ElementRef])
], Md2Tabs);
export { Md2Tabs };
export var MD2_TABS_DIRECTIVES = [Md2TabLabel, Md2Tabs, Md2Tab];
var Md2TabsModule = (function () {
function Md2TabsModule() {
}
return Md2TabsModule;
}());
Md2TabsModule = __decorate([
NgModule({
imports: [CommonModule],
exports: MD2_TABS_DIRECTIVES,
declarations: [Md2Transclude, Md2TabLabel, Md2Tabs, Md2Tab],
})
], Md2TabsModule);
export { Md2TabsModule };
//# sourceMappingURL=tabs.js.map