ng2-bootstrap
Version:
angular2 bootstrap components
1,020 lines (1,004 loc) • 235 kB
JavaScript
System.registerDynamic('ng2-bootstrap/components/accordion/accordion-group.component', ['@angular/core', './accordion.component'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require('@angular/core');
var accordion_component_1 = $__require('./accordion.component');
/* tslint:disable-next-line */
var MouseEvent = global.MouseEvent;
/* tslint:disable:component-selector-name */
var AccordionPanelComponent = function () {
function AccordionPanelComponent(accordion) {
this.accordion = accordion;
}
Object.defineProperty(AccordionPanelComponent.prototype, "isOpen", {
// Questionable, maybe .panel-open should be on child div.panel element?
get: function () {
return this._isOpen;
},
set: function (value) {
this._isOpen = value;
if (value) {
this.accordion.closeOtherPanels(this);
}
},
enumerable: true,
configurable: true
});
AccordionPanelComponent.prototype.ngOnInit = function () {
this.panelClass = this.panelClass || 'panel-default';
this.accordion.addGroup(this);
};
AccordionPanelComponent.prototype.ngOnDestroy = function () {
this.accordion.removeGroup(this);
};
AccordionPanelComponent.prototype.toggleOpen = function (event) {
event.preventDefault();
if (!this.isDisabled) {
this.isOpen = !this.isOpen;
}
};
AccordionPanelComponent.decorators = [{ type: core_1.Component, args: [{
selector: 'accordion-group, accordion-panel',
template: "\n <div class=\"panel\" [ngClass]=\"panelClass\">\n <div class=\"panel-heading\" (click)=\"toggleOpen($event)\">\n <h4 class=\"panel-title\">\n <a href tabindex=\"0\" class=\"accordion-toggle\">\n <span *ngIf=\"heading\" [ngClass]=\"{'text-muted': isDisabled}\">{{heading}}</span>\n <ng-content select=\"[accordion-heading]\"></ng-content>\n </a>\n </h4>\n </div>\n <div class=\"panel-collapse collapse\" [collapse]=\"!isOpen\">\n <div class=\"panel-body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n "
}] }];
/** @nocollapse */
AccordionPanelComponent.ctorParameters = [{ type: accordion_component_1.AccordionComponent, decorators: [{ type: core_1.Inject, args: [accordion_component_1.AccordionComponent] }] }];
AccordionPanelComponent.propDecorators = {
'heading': [{ type: core_1.Input }],
'panelClass': [{ type: core_1.Input }],
'isDisabled': [{ type: core_1.Input }],
'isOpen': [{ type: core_1.HostBinding, args: ['class.panel-open'] }, { type: core_1.Input }]
};
return AccordionPanelComponent;
}();
exports.AccordionPanelComponent = AccordionPanelComponent;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/accordion/accordion.component', ['@angular/core'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require('@angular/core');
// todo: support template url
var AccordionComponent = function () {
function AccordionComponent() {
/* tslint:disable:no-unused-variable */
this.addClass = true;
/* tslint:enable:no-unused-variable */
this.groups = [];
}
AccordionComponent.prototype.closeOtherPanels = function (openGroup) {
if (!this.closeOthers) {
return;
}
this.groups.forEach(function (group) {
if (group !== openGroup) {
group.isOpen = false;
}
});
};
AccordionComponent.prototype.addGroup = function (group) {
this.groups.push(group);
};
AccordionComponent.prototype.removeGroup = function (group) {
var index = this.groups.indexOf(group);
if (index !== -1) {
this.groups.splice(index, 1);
}
};
AccordionComponent.decorators = [{ type: core_1.Component, args: [{
selector: 'accordion',
template: "<ng-content></ng-content>"
}] }];
/** @nocollapse */
AccordionComponent.ctorParameters = [];
AccordionComponent.propDecorators = {
'closeOthers': [{ type: core_1.Input }],
'addClass': [{ type: core_1.HostBinding, args: ['class.panel-group'] }]
};
return AccordionComponent;
}();
exports.AccordionComponent = AccordionComponent;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/accordion/accordion.module', ['@angular/common', '@angular/core', '../collapse/collapse.module', './accordion-group.component', './accordion.component'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var common_1 = $__require('@angular/common');
var core_1 = $__require('@angular/core');
var collapse_module_1 = $__require('../collapse/collapse.module');
var accordion_group_component_1 = $__require('./accordion-group.component');
var accordion_component_1 = $__require('./accordion.component');
var AccordionModule = function () {
function AccordionModule() {}
AccordionModule.decorators = [{ type: core_1.NgModule, args: [{
imports: [common_1.CommonModule, collapse_module_1.CollapseModule],
declarations: [accordion_component_1.AccordionComponent, accordion_group_component_1.AccordionPanelComponent],
exports: [accordion_component_1.AccordionComponent, accordion_group_component_1.AccordionPanelComponent]
}] }];
/** @nocollapse */
AccordionModule.ctorParameters = [];
return AccordionModule;
}();
exports.AccordionModule = AccordionModule;
return module.exports;
});
System.registerDynamic("ng2-bootstrap/components/alert/alert.component", ["@angular/core"], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require("@angular/core");
var ALERT_TEMPLATE = "\n <div class=\"alert\" role=\"alert\" [ngClass]=\"classes\" *ngIf=\"!closed\">\n <button *ngIf=\"dismissible\" type=\"button\" class=\"close\" (click)=\"onClose()\" (touch)=\"onClose()\">\n <span aria-hidden=\"true\">×</span>\n <span class=\"sr-only\">Close</span>\n </button>\n <ng-content></ng-content>\n </div>\n ";
// TODO: templateUrl
var AlertComponent = function () {
function AlertComponent() {
this.type = 'warning';
this.close = new core_1.EventEmitter(false);
this.classes = [];
}
AlertComponent.prototype.ngOnInit = function () {
var _this = this;
this.classes[0] = "alert-" + this.type;
if (this.dismissible) {
this.classes[1] = 'alert-dismissible';
} else {
this.classes.length = 1;
}
if (this.dismissOnTimeout) {
setTimeout(function () {
return _this.onClose();
}, this.dismissOnTimeout);
}
};
// todo: mouse event + touch + pointer
AlertComponent.prototype.onClose = function () {
this.closed = true;
this.close.emit(this);
};
AlertComponent.decorators = [{ type: core_1.Component, args: [{
selector: 'alert',
template: ALERT_TEMPLATE
}] }];
/** @nocollapse */
AlertComponent.ctorParameters = [];
AlertComponent.propDecorators = {
'type': [{ type: core_1.Input }],
'dismissible': [{ type: core_1.Input }],
'dismissOnTimeout': [{ type: core_1.Input }],
'close': [{ type: core_1.Output }]
};
return AlertComponent;
}();
exports.AlertComponent = AlertComponent;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/alert/alert.module', ['@angular/common', '@angular/core', './alert.component'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var common_1 = $__require('@angular/common');
var core_1 = $__require('@angular/core');
var alert_component_1 = $__require('./alert.component');
var AlertModule = function () {
function AlertModule() {}
AlertModule.decorators = [{ type: core_1.NgModule, args: [{
imports: [common_1.CommonModule],
declarations: [alert_component_1.AlertComponent],
exports: [alert_component_1.AlertComponent]
}] }];
/** @nocollapse */
AlertModule.ctorParameters = [];
return AlertModule;
}();
exports.AlertModule = AlertModule;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/buttons/button-checkbox.directive', ['@angular/core', '@angular/forms'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require('@angular/core');
var forms_1 = $__require('@angular/forms');
// TODO: config: activeClass - Class to apply to the checked buttons.
var ButtonCheckboxDirective = function () {
function ButtonCheckboxDirective(cd) {
this.state = false;
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
this.cd = cd;
// hack !
cd.valueAccessor = this;
}
// view -> model
ButtonCheckboxDirective.prototype.onClick = function () {
this.toggle(!this.state);
this.cd.viewToModelUpdate(this.value);
};
ButtonCheckboxDirective.prototype.ngOnInit = function () {
this.toggle(this.trueValue === this.value);
};
Object.defineProperty(ButtonCheckboxDirective.prototype, "trueValue", {
get: function () {
return typeof this.btnCheckboxTrue !== 'undefined' ? this.btnCheckboxTrue : true;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ButtonCheckboxDirective.prototype, "falseValue", {
get: function () {
return typeof this.btnCheckboxFalse !== 'undefined' ? this.btnCheckboxFalse : false;
},
enumerable: true,
configurable: true
});
ButtonCheckboxDirective.prototype.toggle = function (state) {
this.state = state;
this.value = this.state ? this.trueValue : this.falseValue;
};
// ControlValueAccessor
// model -> view
ButtonCheckboxDirective.prototype.writeValue = function (value) {
this.state = this.trueValue === value;
this.value = value;
};
ButtonCheckboxDirective.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
ButtonCheckboxDirective.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
ButtonCheckboxDirective.decorators = [{ type: core_1.Directive, args: [{ selector: '[btnCheckbox][ngModel]' }] }];
/** @nocollapse */
ButtonCheckboxDirective.ctorParameters = [{ type: forms_1.NgModel, decorators: [{ type: core_1.Self }] }];
ButtonCheckboxDirective.propDecorators = {
'btnCheckboxTrue': [{ type: core_1.Input }],
'btnCheckboxFalse': [{ type: core_1.Input }],
'state': [{ type: core_1.HostBinding, args: ['class.active'] }],
'onClick': [{ type: core_1.HostListener, args: ['click'] }]
};
return ButtonCheckboxDirective;
}();
exports.ButtonCheckboxDirective = ButtonCheckboxDirective;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/buttons/button-radio.directive', ['@angular/core', '@angular/forms'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require('@angular/core');
var forms_1 = $__require('@angular/forms');
/* tslint:disable */
exports.RADIO_CONTROL_VALUE_ACCESSOR = {
provide: forms_1.NG_VALUE_ACCESSOR,
useExisting: core_1.forwardRef(function () {
return ButtonRadioDirective;
}),
multi: true
};
/* tslint:enable */
var ButtonRadioDirective = function () {
function ButtonRadioDirective(el) {
this.el = el;
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
}
Object.defineProperty(ButtonRadioDirective.prototype, "isActive", {
get: function () {
return this.btnRadio === this.value;
},
enumerable: true,
configurable: true
});
ButtonRadioDirective.prototype.onClick = function () {
if (this.el.nativeElement.attributes.disabled) {
return;
}
if (this.uncheckable && this.btnRadio === this.value) {
this.value = undefined;
} else {
this.value = this.btnRadio;
}
this.onTouched();
this.onChange(this.value);
};
ButtonRadioDirective.prototype.ngOnInit = function () {
this.uncheckable = typeof this.uncheckable !== 'undefined';
};
ButtonRadioDirective.prototype.onBlur = function () {
this.onTouched();
};
// ControlValueAccessor
// model -> view
ButtonRadioDirective.prototype.writeValue = function (value) {
this.value = value;
};
ButtonRadioDirective.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
ButtonRadioDirective.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
ButtonRadioDirective.decorators = [{ type: core_1.Directive, args: [{ selector: '[btnRadio]', providers: [exports.RADIO_CONTROL_VALUE_ACCESSOR] }] }];
/** @nocollapse */
ButtonRadioDirective.ctorParameters = [{ type: core_1.ElementRef }];
ButtonRadioDirective.propDecorators = {
'btnRadio': [{ type: core_1.Input }],
'uncheckable': [{ type: core_1.Input }],
'value': [{ type: core_1.Input }],
'isActive': [{ type: core_1.HostBinding, args: ['class.active'] }],
'onClick': [{ type: core_1.HostListener, args: ['click'] }]
};
return ButtonRadioDirective;
}();
exports.ButtonRadioDirective = ButtonRadioDirective;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/buttons/buttons.module', ['@angular/core', '@angular/forms', './button-checkbox.directive', './button-radio.directive'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require('@angular/core');
var forms_1 = $__require('@angular/forms');
var button_checkbox_directive_1 = $__require('./button-checkbox.directive');
var button_radio_directive_1 = $__require('./button-radio.directive');
var ButtonsModule = function () {
function ButtonsModule() {}
ButtonsModule.decorators = [{ type: core_1.NgModule, args: [{
imports: [forms_1.FormsModule],
declarations: [button_checkbox_directive_1.ButtonCheckboxDirective, button_radio_directive_1.ButtonRadioDirective],
exports: [button_checkbox_directive_1.ButtonCheckboxDirective, button_radio_directive_1.ButtonRadioDirective, forms_1.FormsModule]
}] }];
/** @nocollapse */
ButtonsModule.ctorParameters = [];
return ButtonsModule;
}();
exports.ButtonsModule = ButtonsModule;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/carousel/carousel.component', ['@angular/core', '../ng2-bootstrap-config'], true, function ($__require, exports, module) {
// todo: add animate
"use strict";
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require('@angular/core');
var ng2_bootstrap_config_1 = $__require('../ng2-bootstrap-config');
(function (Direction) {
Direction[Direction["UNKNOWN"] = 0] = "UNKNOWN";
Direction[Direction["NEXT"] = 1] = "NEXT";
Direction[Direction["PREV"] = 2] = "PREV";
})(exports.Direction || (exports.Direction = {}));
var Direction = exports.Direction;
// todo:
// (ng-swipe-right)="prev()" (ng-swipe-left)="next()"
/**
* Problems:
* 1) if we set an active slide via model changes, .active class remains on a current slide.
* 2) if we have only one slide, we shouldn't show prev/next nav buttons
* 3) if first or last slide is active and noWrap is true, there should be "disabled" class on the nav buttons.
* 4) default interval should be equal 5000
*/
var CarouselComponent = function () {
function CarouselComponent() {
this.slides = [];
this.destroyed = false;
}
Object.defineProperty(CarouselComponent.prototype, "interval", {
get: function () {
return this._interval;
},
set: function (value) {
this._interval = value;
this.restartTimer();
},
enumerable: true,
configurable: true
});
Object.defineProperty(CarouselComponent.prototype, "isBS4", {
get: function () {
return ng2_bootstrap_config_1.Ng2BootstrapConfig.theme === ng2_bootstrap_config_1.Ng2BootstrapTheme.BS4;
},
enumerable: true,
configurable: true
});
CarouselComponent.prototype.ngOnDestroy = function () {
this.destroyed = true;
};
CarouselComponent.prototype.select = function (nextSlide, direction) {
if (direction === void 0) {
direction = Direction.UNKNOWN;
}
var nextIndex = nextSlide.index;
if (direction === Direction.UNKNOWN) {
direction = nextIndex > this.getCurrentIndex() ? Direction.NEXT : Direction.PREV;
}
// Prevent this user-triggered transition from occurring if there is
// already one in progress
if (nextSlide && nextSlide !== this.currentSlide) {
this.goNext(nextSlide, direction);
}
};
CarouselComponent.prototype.play = function () {
if (!this.isPlaying) {
this.isPlaying = true;
this.restartTimer();
}
};
CarouselComponent.prototype.pause = function () {
if (!this.noPause) {
this.isPlaying = false;
this.resetTimer();
}
};
CarouselComponent.prototype.next = function () {
var newIndex = (this.getCurrentIndex() + 1) % this.slides.length;
if (newIndex === 0 && this.noWrap) {
this.pause();
return;
}
return this.select(this.getSlideByIndex(newIndex), Direction.NEXT);
};
CarouselComponent.prototype.prev = function () {
var newIndex = this.getCurrentIndex() - 1 < 0 ? this.slides.length - 1 : this.getCurrentIndex() - 1;
if (this.noWrap && newIndex === this.slides.length - 1) {
this.pause();
return;
}
return this.select(this.getSlideByIndex(newIndex), Direction.PREV);
};
CarouselComponent.prototype.addSlide = function (slide) {
slide.index = this.slides.length;
this.slides.push(slide);
if (this.slides.length === 1 || slide.active) {
this.select(this.slides[this.slides.length - 1]);
if (this.slides.length === 1) {
this.play();
}
} else {
slide.active = false;
}
};
CarouselComponent.prototype.removeSlide = function (slide) {
this.slides.splice(slide.index, 1);
if (this.slides.length === 0) {
this.currentSlide = void 0;
return;
}
for (var i = 0; i < this.slides.length; i++) {
this.slides[i].index = i;
}
};
CarouselComponent.prototype.goNext = function (slide, direction) {
if (this.destroyed) {
return;
}
slide.direction = direction;
slide.active = true;
if (this.currentSlide) {
this.currentSlide.direction = direction;
this.currentSlide.active = false;
}
this.currentSlide = slide;
// every time you change slides, reset the timer
this.restartTimer();
};
CarouselComponent.prototype.getSlideByIndex = function (index) {
var len = this.slides.length;
for (var i = 0; i < len; ++i) {
if (this.slides[i].index === index) {
return this.slides[i];
}
}
return void 0;
};
CarouselComponent.prototype.getCurrentIndex = function () {
return !this.currentSlide ? 0 : this.currentSlide.index;
};
CarouselComponent.prototype.restartTimer = function () {
var _this = this;
this.resetTimer();
var interval = +this.interval;
if (!isNaN(interval) && interval > 0) {
this.currentInterval = setInterval(function () {
var nInterval = +_this.interval;
if (_this.isPlaying && !isNaN(_this.interval) && nInterval > 0 && _this.slides.length) {
_this.next();
} else {
_this.pause();
}
}, interval);
}
};
CarouselComponent.prototype.resetTimer = function () {
if (this.currentInterval) {
clearInterval(this.currentInterval);
this.currentInterval = void 0;
}
};
CarouselComponent.decorators = [{ type: core_1.Component, args: [{
selector: 'carousel',
template: "\n <div (mouseenter)=\"pause()\" (mouseleave)=\"play()\" class=\"carousel slide\">\n <ol class=\"carousel-indicators\" *ngIf=\"slides.length > 1\">\n <li *ngFor=\"let slidez of slides\" [class.active]=\"slidez.active === true\" (click)=\"select(slidez)\"></li>\n </ol>\n <div class=\"carousel-inner\"><ng-content></ng-content></div>\n <a class=\"left carousel-control\" (click)=\"prev()\" *ngIf=\"slides.length\">\n <span class=\"icon-prev\" aria-hidden=\"true\"></span>\n <span *ngIf=\"isBS4\" class=\"sr-only\">Previous</span>\n </a>\n <a class=\"right carousel-control\" (click)=\"next()\" *ngIf=\"slides.length\">\n <span class=\"icon-next\" aria-hidden=\"true\"></span>\n <span *ngIf=\"isBS4\" class=\"sr-only\">Next</span>\n </a>\n </div>\n "
}] }];
/** @nocollapse */
CarouselComponent.ctorParameters = [];
CarouselComponent.propDecorators = {
'noWrap': [{ type: core_1.Input }],
'noPause': [{ type: core_1.Input }],
'noTransition': [{ type: core_1.Input }],
'interval': [{ type: core_1.Input }]
};
return CarouselComponent;
}();
exports.CarouselComponent = CarouselComponent;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/carousel/slide.component', ['@angular/core', './carousel.component'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require('@angular/core');
var carousel_component_1 = $__require('./carousel.component');
var SlideComponent = function () {
function SlideComponent(carousel) {
this.addClass = true;
this.carousel = carousel;
}
SlideComponent.prototype.ngOnInit = function () {
this.carousel.addSlide(this);
};
SlideComponent.prototype.ngOnDestroy = function () {
this.carousel.removeSlide(this);
};
SlideComponent.decorators = [{ type: core_1.Component, args: [{
selector: 'slide',
template: "\n <div [class.active]=\"active\" class=\"item\">\n <ng-content></ng-content>\n </div>\n "
}] }];
/** @nocollapse */
SlideComponent.ctorParameters = [{ type: carousel_component_1.CarouselComponent }];
SlideComponent.propDecorators = {
'index': [{ type: core_1.Input }],
'direction': [{ type: core_1.Input }],
'active': [{ type: core_1.HostBinding, args: ['class.active'] }, { type: core_1.Input }],
'addClass': [{ type: core_1.HostBinding, args: ['class.item'] }, { type: core_1.HostBinding, args: ['class.carousel-item'] }]
};
return SlideComponent;
}();
exports.SlideComponent = SlideComponent;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/carousel/carousel.module', ['@angular/common', '@angular/core', './carousel.component', './slide.component'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var common_1 = $__require('@angular/common');
var core_1 = $__require('@angular/core');
var carousel_component_1 = $__require('./carousel.component');
var slide_component_1 = $__require('./slide.component');
var CarouselModule = function () {
function CarouselModule() {}
CarouselModule.decorators = [{ type: core_1.NgModule, args: [{
imports: [common_1.CommonModule],
declarations: [slide_component_1.SlideComponent, carousel_component_1.CarouselComponent],
exports: [slide_component_1.SlideComponent, carousel_component_1.CarouselComponent]
}] }];
/** @nocollapse */
CarouselModule.ctorParameters = [];
return CarouselModule;
}();
exports.CarouselModule = CarouselModule;
return module.exports;
});
System.registerDynamic("ng2-bootstrap/components/collapse/collapse.directive", ["@angular/core"], true, function ($__require, exports, module) {
"use strict";
// FIX: in order to update to rc.1 had to disable animation, sorry
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require("@angular/core");
// import {AnimationBuilder} from '@angular/platform-browser/src/animate/animation_builder';
// import {animate, animation, state, style, transition} from '@angular/core';
/*@Directive({
selector: '[collapse]',
// templateUrl: 'app/panel.html',
// styleUrls: ['app/panel.css'],
animations: [
animation('active', [
state('void', style({ height: 0 })),
state('closed', style({ height: 0 })),
state('open', style({ height: '*' })),
transition('void => closed', [ animate(0) ]),
transition('closed => open', [ animate('350ms ease-out') ]),
transition('open => closed', [ animate('350ms ease-out') ])
])
]
})*/
// fix: replace with // '@angular/animate';
// when https://github.com/angular/angular/issues/5984 will be fixed
// TODO: remove ElementRef
// TODO: add on change
// TODO: #576 add callbacks: expanding, collapsing after adding animation
var CollapseDirective = function () {
function CollapseDirective( /*_ab:AnimationBuilder, */_el, _renderer) {
// private animation:any;
this.collapsed = new core_1.EventEmitter(false);
this.expanded = new core_1.EventEmitter(false);
// shown
this.isExpanded = true;
// hidden
this.isCollapsed = false;
// stale state
this.isCollapse = true;
// animation state
this.isCollapsing = false;
// this._ab = _ab;
this._el = _el;
this._renderer = _renderer;
}
Object.defineProperty(CollapseDirective.prototype, "collapse", {
get: function () {
return this.isExpanded;
},
// @Input() private transitionDuration:number = 500; // Duration in ms
set: function (value) {
this.isExpanded = value;
this.toggle();
},
enumerable: true,
configurable: true
});
CollapseDirective.prototype.ngOnInit = function () {
// this.animation = this._ab.css();
// this.animation.setDuration(this.transitionDuration);
};
CollapseDirective.prototype.toggle = function () {
// this.open = !this.open;
if (this.isExpanded) {
this.hide();
} else {
this.show();
}
};
CollapseDirective.prototype.hide = function () {
this.isCollapse = false;
this.isCollapsing = true;
this.isExpanded = false;
this.isCollapsed = true;
this.isCollapse = true;
this.isCollapsing = false;
this.display = 'none';
this.collapsed.emit(this);
/* setTimeout(() => {
// this.height = '0';
// this.isCollapse = true;
// this.isCollapsing = false;
this.animation
.setFromStyles({
height: this._el.nativeElement.scrollHeight + 'px'
})
.setToStyles({
height: '0',
overflow: 'hidden'
});
this.animation.start(this._el.nativeElement)
.onComplete(() => {
if (this._el.nativeElement.offsetHeight === 0) {
this.display = 'none';
}
this.isCollapse = true;
this.isCollapsing = false;
});
}, 4);*/
};
CollapseDirective.prototype.show = function () {
this.isCollapse = false;
this.isCollapsing = true;
this.isExpanded = true;
this.isCollapsed = false;
this.display = 'block';
// this.height = 'auto';
this.isCollapse = true;
this.isCollapsing = false;
this._renderer.setElementStyle(this._el.nativeElement, 'overflow', 'visible');
this._renderer.setElementStyle(this._el.nativeElement, 'height', 'auto');
this.expanded.emit(this);
/*setTimeout(() => {
// this.height = 'auto';
// this.isCollapse = true;
// this.isCollapsing = false;
this.animation
.setFromStyles({
height: this._el.nativeElement.offsetHeight,
overflow: 'hidden'
})
.setToStyles({
height: this._el.nativeElement.scrollHeight + 'px'
});
this.animation.start(this._el.nativeElement)
.onComplete(() => {
this.isCollapse = true;
this.isCollapsing = false;
this._renderer.setElementStyle(this._el.nativeElement, 'overflow', 'visible');
this._renderer.setElementStyle(this._el.nativeElement, 'height', 'auto');
});
}, 4);*/
};
CollapseDirective.decorators = [{ type: core_1.Directive, args: [{ selector: '[collapse]' }] }];
/** @nocollapse */
CollapseDirective.ctorParameters = [{ type: core_1.ElementRef }, { type: core_1.Renderer }];
CollapseDirective.propDecorators = {
'collapsed': [{ type: core_1.Output }],
'expanded': [{ type: core_1.Output }],
'display': [{ type: core_1.HostBinding, args: ['style.display'] }],
'isExpanded': [{ type: core_1.HostBinding, args: ['class.in'] }, { type: core_1.HostBinding, args: ['attr.aria-expanded'] }],
'isCollapsed': [{ type: core_1.HostBinding, args: ['attr.aria-hidden'] }],
'isCollapse': [{ type: core_1.HostBinding, args: ['class.collapse'] }],
'isCollapsing': [{ type: core_1.HostBinding, args: ['class.collapsing'] }],
'collapse': [{ type: core_1.Input }]
};
return CollapseDirective;
}();
exports.CollapseDirective = CollapseDirective;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/collapse/collapse.module', ['@angular/core', './collapse.directive'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require('@angular/core');
var collapse_directive_1 = $__require('./collapse.directive');
var CollapseModule = function () {
function CollapseModule() {}
CollapseModule.decorators = [{ type: core_1.NgModule, args: [{
declarations: [collapse_directive_1.CollapseDirective],
exports: [collapse_directive_1.CollapseDirective]
}] }];
/** @nocollapse */
CollapseModule.ctorParameters = [];
return CollapseModule;
}();
exports.CollapseModule = CollapseModule;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/datepicker/datepicker.component', ['@angular/core', './datepicker-inner.component', '@angular/forms'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require('@angular/core');
var datepicker_inner_component_1 = $__require('./datepicker-inner.component');
var forms_1 = $__require('@angular/forms');
/* tslint:disable:component-selector-name component-selector-type */
/* tslint:enable:component-selector-name component-selector-type */
var DatePickerComponent = function () {
function DatePickerComponent(cd) {
this.selectionDone = new core_1.EventEmitter(undefined);
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
this._now = new Date();
this.cd = cd;
// hack
cd.valueAccessor = this;
}
Object.defineProperty(DatePickerComponent.prototype, "activeDate", {
get: function () {
return this._activeDate || this._now;
},
set: function (value) {
this._activeDate = value;
},
enumerable: true,
configurable: true
});
DatePickerComponent.prototype.onUpdate = function (event) {
this.cd.viewToModelUpdate(event);
};
DatePickerComponent.prototype.onSelectionDone = function (event) {
this.selectionDone.emit(event);
};
// todo: support null value
DatePickerComponent.prototype.writeValue = function (value) {
if (this.datePicker.compare(value, this._activeDate) === 0) {
return;
}
if (value && value instanceof Date) {
this.activeDate = value;
this.datePicker.select(value);
return;
}
this.activeDate = value ? new Date(value) : void 0;
};
DatePickerComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
DatePickerComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
DatePickerComponent.decorators = [{ type: core_1.Component, args: [{
selector: 'datepicker[ngModel]',
template: "\n <datepicker-inner [activeDate]=\"activeDate\"\n (update)=\"onUpdate($event)\"\n [datepickerMode]=\"datepickerMode\"\n [initDate]=\"initDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [minMode]=\"minMode\"\n [maxMode]=\"maxMode\"\n [showWeeks]=\"showWeeks\"\n [formatDay]=\"formatDay\"\n [formatMonth]=\"formatMonth\"\n [formatYear]=\"formatYear\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDay]=\"startingDay\"\n [yearRange]=\"yearRange\"\n [customClass]=\"customClass\"\n [dateDisabled]=\"dateDisabled\"\n [onlyCurrentMonth]=\"onlyCurrentMonth\"\n [shortcutPropagation]=\"shortcutPropagation\"\n (selectionDone)=\"onSelectionDone($event)\">\n <daypicker tabindex=\"0\"></daypicker>\n <monthpicker tabindex=\"0\"></monthpicker>\n <yearpicker tabindex=\"0\"></yearpicker>\n </datepicker-inner>\n ",
providers: [forms_1.NgModel]
}] }];
/** @nocollapse */
DatePickerComponent.ctorParameters = [{ type: forms_1.NgModel, decorators: [{ type: core_1.Self }] }];
DatePickerComponent.propDecorators = {
'datepickerMode': [{ type: core_1.Input }],
'initDate': [{ type: core_1.Input }],
'minDate': [{ type: core_1.Input }],
'maxDate': [{ type: core_1.Input }],
'minMode': [{ type: core_1.Input }],
'maxMode': [{ type: core_1.Input }],
'showWeeks': [{ type: core_1.Input }],
'formatDay': [{ type: core_1.Input }],
'formatMonth': [{ type: core_1.Input }],
'formatYear': [{ type: core_1.Input }],
'formatDayHeader': [{ type: core_1.Input }],
'formatDayTitle': [{ type: core_1.Input }],
'formatMonthTitle': [{ type: core_1.Input }],
'startingDay': [{ type: core_1.Input }],
'yearRange': [{ type: core_1.Input }],
'onlyCurrentMonth': [{ type: core_1.Input }],
'shortcutPropagation': [{ type: core_1.Input }],
'customClass': [{ type: core_1.Input }],
'dateDisabled': [{ type: core_1.Input }],
'selectionDone': [{ type: core_1.Output }],
'datePicker': [{ type: core_1.ViewChild, args: [datepicker_inner_component_1.DatePickerInnerComponent] }],
'activeDate': [{ type: core_1.Input }]
};
return DatePickerComponent;
}();
exports.DatePickerComponent = DatePickerComponent;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/datepicker/daypicker.component', ['@angular/core', '../ng2-bootstrap-config', './datepicker-inner.component'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require('@angular/core');
var ng2_bootstrap_config_1 = $__require('../ng2-bootstrap-config');
var datepicker_inner_component_1 = $__require('./datepicker-inner.component');
// write an interface for template options
var TEMPLATE_OPTIONS = (_a = {}, _a[ng2_bootstrap_config_1.Ng2BootstrapTheme.BS4] = {
ARROW_LEFT: '<',
ARROW_RIGHT: '>'
}, _a[ng2_bootstrap_config_1.Ng2BootstrapTheme.BS3] = {
ARROW_LEFT: "\n <i class=\"glyphicon glyphicon-chevron-left\"></i>\n ",
ARROW_RIGHT: "\n <i class=\"glyphicon glyphicon-chevron-right\"></i>\n "
}, _a);
var DayPickerComponent = function () {
function DayPickerComponent(datePicker) {
this.labels = [];
this.rows = [];
this.weekNumbers = [];
this.CURRENT_THEME_TEMPLATE = TEMPLATE_OPTIONS[ng2_bootstrap_config_1.Ng2BootstrapConfig.theme || ng2_bootstrap_config_1.Ng2BootstrapTheme.BS3];
this.datePicker = datePicker;
}
Object.defineProperty(DayPickerComponent.prototype, "isBS4", {
get: function () {
return ng2_bootstrap_config_1.Ng2BootstrapConfig.theme === ng2_bootstrap_config_1.Ng2BootstrapTheme.BS4;
},
enumerable: true,
configurable: true
});
/*private getDaysInMonth(year:number, month:number) {
return ((month === 1) && (year % 4 === 0) &&
((year % 100 !== 0) || (year % 400 === 0))) ? 29 : DAYS_IN_MONTH[month];
}*/
DayPickerComponent.prototype.ngOnInit = function () {
var self = this;
this.datePicker.stepDay = { months: 1 };
this.datePicker.setRefreshViewHandler(function () {
var year = this.activeDate.getFullYear();
var month = this.activeDate.getMonth();
var firstDayOfMonth = new Date(year, month, 1);
var difference = this.startingDay - firstDayOfMonth.getDay();
var numDisplayedFromPreviousMonth = difference > 0 ? 7 - difference : -difference;
var firstDate = new Date(firstDayOfMonth.getTime());
if (numDisplayedFromPreviousMonth > 0) {
firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
}
// 42 is the number of days on a six-week calendar
var _days = self.getDates(firstDate, 42);
var days = [];
for (var i = 0; i < 42; i++) {
var _dateObject = this.createDateObject(_days[i], this.formatDay);
_dateObject.secondary = _days[i].getMonth() !== month;
_dateObject.uid = this.uniqueId + '-' + i;
days[i] = _dateObject;
}
self.labels = [];
for (var j = 0; j < 7; j++) {
self.labels[j] = {};
self.labels[j].abbr = this.dateFilter(days[j].date, this.formatDayHeader);
self.labels[j].full = this.dateFilter(days[j].date, 'EEEE');
}
self.title = this.dateFilter(this.activeDate, this.formatDayTitle);
self.rows = this.split(days, 7);
if (this.showWeeks) {
self.weekNumbers = [];
var thursdayIndex = (4 + 7 - this.startingDay) % 7;
var numWeeks = self.rows.length;
for (var curWeek = 0; curWeek < numWeeks; curWeek++) {
self.weekNumbers.push(self.getISO8601WeekNumber(self.rows[curWeek][thursdayIndex].date));
}
}
}, 'day');
this.datePicker.setCompareHandler(function (date1, date2) {
var d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
var d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
return d1.getTime() - d2.getTime();
}, 'day');
this.datePicker.refreshView();
};
DayPickerComponent.prototype.getDates = function (startDate, n) {
var dates = new Array(n);
var current = new Date(startDate.getTime());
var i = 0;
var date;
while (i < n) {
date = new Date(current.getTime());
date = this.datePicker.fixTimeZone(date);
dates[i++] = date;
current = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
}
return dates;
};
DayPickerComponent.prototype.getISO8601WeekNumber = function (date) {
var checkDate = new Date(date.getTime());
// Thursday
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
var time = checkDate.getTime();
// Compare with Jan 1
checkDate.setMonth(0);
checkDate.setDate(1);
return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
};
// todo: key events implementation
DayPickerComponent.decorators = [{ type: core_1.Component, args: [{
selector: 'daypicker',
template: "\n<table *ngIf=\"datePicker.datepickerMode==='day'\" role=\"grid\" [attr.aria-labelledby]=\"datePicker.uniqueId+'-title'\" aria-activedescendant=\"activeDateId\">\n <thead>\n <tr>\n <th>\n <button type=\"button\" \n class=\"btn btn-default btn-secondary btn-sm pull-left\" \n (click)=\"datePicker.move(-1)\" \n tabindex=\"-1\"\n [innerHTML]=\"CURRENT_THEME_TEMPLATE.ARROW_LEFT\">\n </button>\n </th>\n <th [attr.colspan]=\"5 + (datePicker.showWeeks ? 1 : 0)\">\n <button [id]=\"datePicker.uniqueId + '-title'\"\n type=\"button\" class=\"btn btn-default btn-secondary btn-sm\"\n (click)=\"datePicker.toggleMode()\"\n [disabled]=\"datePicker.datepickerMode === datePicker.maxMode\"\n [ngClass]=\"{disabled: datePicker.datepickerMode === datePicker.maxMode}\" tabindex=\"-1\" style=\"width:100%;\">\n <strong>{{title}}</strong>\n </button>\n </th>\n <th>\n <button type=\"button\" \n class=\"btn btn-default btn-secondary btn-sm pull-right\" \n (click)=\"datePicker.move(1)\" \n tabindex=\"-1\"\n [innerHTML]=\"CURRENT_THEME_TEMPLATE.ARROW_RIGHT\">\n </button>\n </th>\n </tr>\n <tr>\n <th *ngIf=\"datePicker.showWeeks\"></th>\n <th *ngFor=\"let labelz of labels\" [ngClass]=\"{'text-xs-center':isBS4, 'text-center': !isBS4}\">\n <small aria-label=\"labelz.full\"><b>{{labelz.abbr}}</b></small>\n </th>\n </tr>\n </thead>\n <tbody>\n <template ngFor [ngForOf]=\"rows\" let-rowz=\"$implicit\" let-index=\"index\">\n <tr *ngIf=\"!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)\">\n <td *ngIf=\"datePicker.showWeeks\" class=\"h6\" [ngClass]=\"{'text-xs-center':isBS4, 'text-center': !isBS4}\">\n <em>{{ weekNumbers[index] }}</em>\n </td>\n <td *ngFor=\"let dtz of rowz\" [ngClass]=\"{'text-xs-center':isBS4, 'text-center': !isBS4}\" role=\"gridcell\" [id]=\"dtz.uid\">\n <button type=\"button\" style=\"min-width:100%;\" class=\"btn btn-sm {{dtz.customClass}}\"\n *ngIf=\"!(datePicker.onlyCurrentMonth && dtz.secondary)\"\n [ngClass]=\"{'btn-secondary': isBS4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected, disabled: dtz.disabled, active: !isBS4 && datePicker.isActive(dtz), 'btn-default': !isBS4}\"\n [disabled]=\"dtz.disabled\"\n (click)=\"datePicker.select(dtz.date)\" tabindex=\"-1\">\n <span [ngClass]=\"{'text-muted': dtz.secondary || dtz.current, 'text-info': !isBS4 && dtz.current}\">{{dtz.label}}</span>\n </button>\n </td>\n </tr>\n </template>\n </tbody>\n</table>\n "
}] }];
/** @nocollapse */
DayPickerComponent.ctorParameters = [{ type: datepicker_inner_component_1.DatePickerInnerComponent }];
return DayPickerComponent;
}();
exports.DayPickerComponent = DayPickerComponent;
var _a;
return module.exports;
});
System.registerDynamic('ng2-bootstrap/components/datepicker/monthpicker.component', ['@angular/core', '../ng2-bootstrap-config', './datepicker-inner.component'], true, function ($__require, exports, module) {
"use strict";
var define,
global = this || self,
GLOBAL = global;
var core_1 = $__require('@angular/core');
var ng2_bootstrap_config_1 = $__require('../ng2-bootstrap-config');
var datepicker_inner_component_1 = $__require('./datepicker-inner.component');
var MonthPickerComponent = function () {
function MonthPickerComponent(datePicker) {
this.rows = [];
this.datePicker = datePicker;
}
Object.defineProperty(MonthPickerComponent.prototype, "isBS4", {
get: function () {
return ng2_bootstrap_config_1.Ng2BootstrapConfig.theme === ng2_bootstrap_config_1.Ng2BootstrapTheme.BS4;
},
enumerable: true,
configurable: true
});
MonthPickerComponent.prototype.ngOnInit = function () {
var self = this;
this.datePicker.step