@blackbaud/skyux
Version:
SKY UX built on Angular 2
103 lines • 6.18 kB
JavaScript
import { animate, Component, ElementRef, Input, trigger, state, style, transition } from '@angular/core';
import { SkyRepeaterService } from './repeater.service';
import { SkyLogService } from '../log/log.service';
var SkyRepeaterItemComponent = (function () {
function SkyRepeaterItemComponent(repeaterService, elementRef, logService) {
this.repeaterService = repeaterService;
this.elementRef = elementRef;
this.logService = logService;
this.selectable = false;
this._isCollapsible = true;
this._isExpanded = true;
this._isSelected = false;
this.slideForExpanded(false);
}
Object.defineProperty(SkyRepeaterItemComponent.prototype, "isExpanded", {
get: function () {
return this._isExpanded;
},
set: function (value) {
this.updateForExpanded(value, true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyRepeaterItemComponent.prototype, "isSelected", {
get: function () {
return this._isSelected;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyRepeaterItemComponent.prototype, "isCollapsible", {
get: function () {
return this._isCollapsible;
},
set: function (value) {
if (this._isCollapsible !== value) {
this._isCollapsible = value;
/*istanbul ignore else */
if (!this._isCollapsible) {
this.updateForExpanded(true, false);
}
}
},
enumerable: true,
configurable: true
});
SkyRepeaterItemComponent.prototype.headerClick = function () {
if (this.isCollapsible) {
this.updateForExpanded(!this.isExpanded, true);
}
};
SkyRepeaterItemComponent.prototype.chevronDirectionChange = function (direction) {
this.updateForExpanded(direction === 'up', true);
};
SkyRepeaterItemComponent.prototype.updateForExpanded = function (value, animate) {
if (this.isCollapsible === false && value === false) {
this.logService.warn("Setting isExpanded to false when the repeater item is not collapsible\n will have no effect.");
}
else if (this._isExpanded !== value) {
this._isExpanded = value;
this.repeaterService.onItemCollapseStateChange(this);
this.slideForExpanded(animate);
}
};
SkyRepeaterItemComponent.prototype.updateIsSelected = function (value) {
this._isSelected = value.checked;
};
SkyRepeaterItemComponent.prototype.slideForExpanded = function (animate) {
this.slideDirection = this.isExpanded ? 'down' : 'up';
};
return SkyRepeaterItemComponent;
}());
export { SkyRepeaterItemComponent };
SkyRepeaterItemComponent.decorators = [
{ type: Component, args: [{
selector: 'sky-repeater-item',
styles: [".sky-repeater-item{display:flex;padding:10px;border-bottom:1px dotted #cdcfd2}.sky-repeater-item-left{padding-top:7px}.sky-repeater-item-right{flex-grow:1}.sky-repeater-item-header{align-items:center;display:flex}.sky-repeater-item-chevron{margin-left:10px}.sky-repeater-item-context-menu{padding:5px 10px 0 0}.sky-repeater-item-checkbox{padding:0 10px 0 0}.sky-repeater-item-selected{background-color:#f1eef6;transition:background-color 150ms}.sky-repeater-item-title{color:#282b31;font-weight:600;font-size:16px;margin:10px 0;flex-grow:1}.sky-repeater-item-collapsible .sky-repeater-item-header{cursor:pointer}.sky-repeater-item-collapsible .sky-repeater-item-content{padding-right:34px}.sky-repeater-item-collapsed .sky-repeater-item-content{display:none}\n"],
template: "<section\n class=\"sky-repeater-item\"\n [ngClass]=\"{'sky-repeater-item-collapsible': isCollapsible, 'sky-repeater-item-selected': isSelected}\"\n>\n\n <div class=\"sky-repeater-item-left\">\n <sky-checkbox \n *ngIf=\"selectable\" \n class=\"sky-repeater-item-checkbox\"\n [checked]=\"isSelected\"\n [label]=\"'repeater_item_checkbox_label' | skyResources\"\n (change)=\"updateIsSelected($event)\"\n >\n </sky-checkbox>\n <div\n class=\"sky-repeater-item-context-menu\"\n [hidden]=\"contextMenuEl.children.length === 0\"\n #contextMenuEl\n >\n <ng-content select=\"sky-repeater-item-context-menu\"></ng-content>\n </div>\n </div>\n <div class=\"sky-repeater-item-right\">\n <header\n class=\"sky-repeater-item-header\"\n [hidden]=\"titleEl.children.length === 0\"\n (click)=\"headerClick()\"\n >\n <h1 class=\"sky-repeater-item-title\" #titleEl>\n <ng-content select=\"sky-repeater-item-title\"></ng-content>\n </h1>\n <div class=\"sky-repeater-item-chevron\" [hidden]=\"!isCollapsible\">\n <sky-chevron\n [direction]=\"isExpanded ? 'up' : 'down'\"\n (directionChange)=\"chevronDirectionChange($event)\"\n >\n </sky-chevron>\n </div>\n </header>\n <div class=\"sky-repeater-item-content\" [@slide]=\"slideDirection\">\n <ng-content select=\"sky-repeater-item-content\"></ng-content>\n </div>\n </div>\n</section>\n",
animations: [trigger('slide', [
state('down', style({
overflow: 'hidden',
height: '*'
})),
state('up', style({
overflow: 'hidden',
height: 0
})),
transition('up <=> down', animate('150ms ease-in'))
])]
},] },
];
/** @nocollapse */
SkyRepeaterItemComponent.ctorParameters = function () { return [
{ type: SkyRepeaterService, },
{ type: ElementRef, },
{ type: SkyLogService, },
]; };
SkyRepeaterItemComponent.propDecorators = {
'isExpanded': [{ type: Input },],
'selectable': [{ type: Input },],
};
//# sourceMappingURL=repeater-item.component.js.map