ngx-bootstrap
Version:
Native Angular Bootstrap Components
98 lines • 3.77 kB
JavaScript
import { Directive, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2 } from '@angular/core';
var CollapseDirective = /** @class */ (function () {
function CollapseDirective(_el, _renderer) {
this._el = _el;
this._renderer = _renderer;
/** This event fires as soon as content collapses */
this.collapsed = new EventEmitter();
/** This event fires as soon as content becomes visible */
this.expanded = new EventEmitter();
// shown
this.isExpanded = true;
// hidden
this.isCollapsed = false;
// stale state
this.isCollapse = true;
// animation state
this.isCollapsing = false;
}
Object.defineProperty(CollapseDirective.prototype, "collapse", {
get: function () {
return this.isExpanded;
},
set: /** A flag indicating visibility of content (shown or hidden) */
function (value) {
this.isExpanded = value;
this.toggle();
},
enumerable: true,
configurable: true
});
/** allows to manually toggle content visibility */
/** allows to manually toggle content visibility */
CollapseDirective.prototype.toggle = /** allows to manually toggle content visibility */
function () {
if (this.isExpanded) {
this.hide();
}
else {
this.show();
}
};
/** allows to manually hide content */
/** allows to manually hide content */
CollapseDirective.prototype.hide = /** allows to manually hide content */
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);
};
/** allows to manually show collapsed content */
/** allows to manually show collapsed content */
CollapseDirective.prototype.show = /** allows to manually show collapsed content */
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.setStyle(this._el.nativeElement, 'overflow', 'visible');
this._renderer.setStyle(this._el.nativeElement, 'height', 'auto');
this.expanded.emit(this);
};
CollapseDirective.decorators = [
{ type: Directive, args: [{
selector: '[collapse]',
exportAs: 'bs-collapse',
host: {
'[class.collapse]': 'true'
}
},] },
];
/** @nocollapse */
CollapseDirective.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: Renderer2, },
]; };
CollapseDirective.propDecorators = {
"collapsed": [{ type: Output },],
"expanded": [{ type: Output },],
"display": [{ type: HostBinding, args: ['style.display',] },],
"isExpanded": [{ type: HostBinding, args: ['class.in',] }, { type: HostBinding, args: ['class.show',] }, { type: HostBinding, args: ['attr.aria-expanded',] },],
"isCollapsed": [{ type: HostBinding, args: ['attr.aria-hidden',] },],
"isCollapse": [{ type: HostBinding, args: ['class.collapse',] },],
"isCollapsing": [{ type: HostBinding, args: ['class.collapsing',] },],
"collapse": [{ type: Input },],
};
return CollapseDirective;
}());
export { CollapseDirective };
//# sourceMappingURL=collapse.directive.js.map