@junte/ui
Version:
Quality Angular UI components kit
87 lines • 8.61 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Component, ContentChild, HostBinding, Input, TemplateRef } from '@angular/core';
import { Orientation } from '../../core/enums/orientation';
import { ContentApi, PropertyApi } from '../../core/decorators/api';
import { UI } from '../../core/enums/ui';
let CollapsibleComponent = class CollapsibleComponent {
constructor() {
this.host = 'jnt-collapsible-host';
this.ui = UI;
this._orientation = Orientation.horizontal;
this.opened = false;
}
set orientation(type) {
this._orientation = type || Orientation.horizontal;
}
get orientation() {
return this._orientation;
}
};
__decorate([
HostBinding('attr.host'),
__metadata("design:type", Object)
], CollapsibleComponent.prototype, "host", void 0);
__decorate([
HostBinding('attr.data-orientation'),
__metadata("design:type", String)
], CollapsibleComponent.prototype, "_orientation", void 0);
__decorate([
PropertyApi({
description: 'Collapsible orientation',
path: 'ui.orientation',
default: Orientation.horizontal,
options: [Orientation.horizontal, Orientation.vertical]
}),
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], CollapsibleComponent.prototype, "orientation", null);
__decorate([
PropertyApi({
description: 'opened of collapsible',
type: 'boolean',
default: 'false'
}),
Input(),
__metadata("design:type", Object)
], CollapsibleComponent.prototype, "opened", void 0);
__decorate([
PropertyApi({
description: 'icon of collapsible',
type: 'string'
}),
Input(),
__metadata("design:type", String)
], CollapsibleComponent.prototype, "icon", void 0);
__decorate([
PropertyApi({
description: 'Title of collapsible',
type: 'string'
}),
Input(),
__metadata("design:type", String)
], CollapsibleComponent.prototype, "title", void 0);
__decorate([
ContentApi({
selector: '#collapsibleTitleTemplate',
description: 'collapsible title template'
}),
ContentChild('collapsibleTitleTemplate'),
__metadata("design:type", TemplateRef)
], CollapsibleComponent.prototype, "titleTemplate", void 0);
__decorate([
ContentApi({
selector: '#collapsibleContentTemplate',
description: 'collapsible content template'
}),
ContentChild('collapsibleContentTemplate'),
__metadata("design:type", TemplateRef)
], CollapsibleComponent.prototype, "contentTemplate", void 0);
CollapsibleComponent = __decorate([
Component({
selector: 'jnt-collapsible',
template: "<ng-template #defaultTitleTemplate>\n <jnt-stack child-of=\"jnt-collapsible-host\" [orientation]=\"orientation === ui.orientation.vertical ? ui.orientation.vertical : ui.orientation.horizontal\"\n [gutter]=\"ui.gutter.small\"\n [align]=\"ui.align.center\">\n <jnt-icon child-of=\"jnt-collapsible-host\" *ngIf=\"!!icon\" [icon]=\"icon\"></jnt-icon>\n <span child-of=\"jnt-collapsible-host\" >{{title}}</span>\n </jnt-stack>\n</ng-template>\n\n<jnt-stack child-of=\"jnt-collapsible-host\" data-title tabindex=\"0\"\n [attr.active]=\"opened\"\n [orientation]=\"ui.orientation.horizontal\"\n [align]=\"ui.align.center\"\n [justify]=\"ui.justify.between\"\n (click)=\"opened = !opened\">\n <ng-container *ngTemplateOutlet=\"!!titleTemplate ? titleTemplate : defaultTitleTemplate\"></ng-container>\n <jnt-icon child-of=\"jnt-collapsible-host\" *ngIf=\"orientation === ui.orientation.horizontal\" [icon]=\"opened ? ui.icons.chevronUp : ui.icons.chevronDown\"></jnt-icon>\n</jnt-stack>\n\n<div child-of=\"jnt-collapsible-host\" data-content *ngIf=\"opened\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</div>"
})
], CollapsibleComponent);
export { CollapsibleComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sbGFwc2libGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGp1bnRlL3VpLyIsInNvdXJjZXMiOlsibGliL2xheW91dC9jb2xsYXBzaWJsZS9jb2xsYXBzaWJsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pGLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3BFLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQU16QyxJQUFhLG9CQUFvQixHQUFqQyxNQUFhLG9CQUFvQjtJQUFqQztRQUVxQyxTQUFJLEdBQUcsc0JBQXNCLENBQUM7UUFFakUsT0FBRSxHQUFHLEVBQUUsQ0FBQztRQUdSLGlCQUFZLEdBQWdCLFdBQVcsQ0FBQyxVQUFVLENBQUM7UUFzQm5ELFdBQU0sR0FBRyxLQUFLLENBQUM7SUE2QmpCLENBQUM7SUEzQ1UsSUFBSSxXQUFXLENBQUMsSUFBaUI7UUFDeEMsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLElBQUksV0FBVyxDQUFDLFVBQVUsQ0FBQztJQUNyRCxDQUFDO0lBRUQsSUFBSSxXQUFXO1FBQ2IsT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDO0lBQzNCLENBQUM7Q0FxQ0YsQ0FBQTtBQXhEMkI7SUFBekIsV0FBVyxDQUFDLFdBQVcsQ0FBQzs7a0RBQXdDO0FBS2pFO0lBREMsV0FBVyxDQUFDLHVCQUF1QixDQUFDOzswREFDYztBQVExQztJQU5SLFdBQVcsQ0FBQztRQUNYLFdBQVcsRUFBRSx5QkFBeUI7UUFDdEMsSUFBSSxFQUFFLGdCQUFnQjtRQUN0QixPQUFPLEVBQUUsV0FBVyxDQUFDLFVBQVU7UUFDL0IsT0FBTyxFQUFFLENBQUMsV0FBVyxDQUFDLFVBQVUsRUFBRSxXQUFXLENBQUMsUUFBUSxDQUFDO0tBQ3hELENBQUM7SUFDRCxLQUFLLEVBQUU7Ozt1REFFUDtBQVlEO0lBTkMsV0FBVyxDQUFDO1FBQ1gsV0FBVyxFQUFFLHVCQUF1QjtRQUNwQyxJQUFJLEVBQUUsU0FBUztRQUNmLE9BQU8sRUFBRSxPQUFPO0tBQ2pCLENBQUM7SUFDRCxLQUFLLEVBQUU7O29EQUNPO0FBT2Y7SUFMQyxXQUFXLENBQUM7UUFDWCxXQUFXLEVBQUUscUJBQXFCO1FBQ2xDLElBQUksRUFBRSxRQUFRO0tBQ2YsQ0FBQztJQUNELEtBQUssRUFBRTs7a0RBQ0s7QUFPYjtJQUxDLFdBQVcsQ0FBQztRQUNYLFdBQVcsRUFBRSxzQkFBc0I7UUFDbkMsSUFBSSxFQUFFLFFBQVE7S0FDZixDQUFDO0lBQ0QsS0FBSyxFQUFFOzttREFDTTtBQU9kO0lBTEMsVUFBVSxDQUFDO1FBQ1YsUUFBUSxFQUFFLDJCQUEyQjtRQUNyQyxXQUFXLEVBQUUsNEJBQTRCO0tBQzFDLENBQUM7SUFDRCxZQUFZLENBQUMsMEJBQTBCLENBQUM7OEJBQzFCLFdBQVc7MkRBQU07QUFPaEM7SUFMQyxVQUFVLENBQUM7UUFDVixRQUFRLEVBQUUsNkJBQTZCO1FBQ3ZDLFdBQVcsRUFBRSw4QkFBOEI7S0FDNUMsQ0FBQztJQUNELFlBQVksQ0FBQyw0QkFBNEIsQ0FBQzs4QkFDMUIsV0FBVzs2REFBTTtBQXpEdkIsb0JBQW9CO0lBSmhDLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSxpQkFBaUI7UUFDM0IsK3RDQUE4QztLQUMvQyxDQUFDO0dBQ1csb0JBQW9CLENBMERoQztTQTFEWSxvQkFBb0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSG9zdEJpbmRpbmcsIElucHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgT3JpZW50YXRpb24gfSBmcm9tICcuLi8uLi9jb3JlL2VudW1zL29yaWVudGF0aW9uJztcbmltcG9ydCB7IENvbnRlbnRBcGksIFByb3BlcnR5QXBpIH0gZnJvbSAnLi4vLi4vY29yZS9kZWNvcmF0b3JzL2FwaSc7XG5pbXBvcnQgeyBVSSB9IGZyb20gJy4uLy4uL2NvcmUvZW51bXMvdWknO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdqbnQtY29sbGFwc2libGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vY29sbGFwc2libGUuZW5jYXBzdWxhdGVkLmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIENvbGxhcHNpYmxlQ29tcG9uZW50IHtcblxuICBASG9zdEJpbmRpbmcoJ2F0dHIuaG9zdCcpIHJlYWRvbmx5IGhvc3QgPSAnam50LWNvbGxhcHNpYmxlLWhvc3QnO1xuXG4gIHVpID0gVUk7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtb3JpZW50YXRpb24nKVxuICBfb3JpZW50YXRpb246IE9yaWVudGF0aW9uID0gT3JpZW50YXRpb24uaG9yaXpvbnRhbDtcblxuICBAUHJvcGVydHlBcGkoe1xuICAgIGRlc2NyaXB0aW9uOiAnQ29sbGFwc2libGUgb3JpZW50YXRpb24nLFxuICAgIHBhdGg6ICd1aS5vcmllbnRhdGlvbicsXG4gICAgZGVmYXVsdDogT3JpZW50YXRpb24uaG9yaXpvbnRhbCxcbiAgICBvcHRpb25zOiBbT3JpZW50YXRpb24uaG9yaXpvbnRhbCwgT3JpZW50YXRpb24udmVydGljYWxdXG4gIH0pXG4gIEBJbnB1dCgpIHNldCBvcmllbnRhdGlvbih0eXBlOiBPcmllbnRhdGlvbikge1xuICAgIHRoaXMuX29yaWVudGF0aW9uID0gdHlwZSB8fCBPcmllbnRhdGlvbi5ob3Jpem9udGFsO1xuICB9XG5cbiAgZ2V0IG9yaWVudGF0aW9uKCkge1xuICAgIHJldHVybiB0aGlzLl9vcmllbnRhdGlvbjtcbiAgfVxuXG4gIEBQcm9wZXJ0eUFwaSh7XG4gICAgZGVzY3JpcHRpb246ICdvcGVuZWQgb2YgY29sbGFwc2libGUnLFxuICAgIHR5cGU6ICdib29sZWFuJyxcbiAgICBkZWZhdWx0OiAnZmFsc2UnXG4gIH0pXG4gIEBJbnB1dCgpXG4gIG9wZW5lZCA9IGZhbHNlO1xuXG4gIEBQcm9wZXJ0eUFwaSh7XG4gICAgZGVzY3JpcHRpb246ICdpY29uIG9mIGNvbGxhcHNpYmxlJyxcbiAgICB0eXBlOiAnc3RyaW5nJ1xuICB9KVxuICBASW5wdXQoKVxuICBpY29uOiBzdHJpbmc7XG5cbiAgQFByb3BlcnR5QXBpKHtcbiAgICBkZXNjcmlwdGlvbjogJ1RpdGxlIG9mIGNvbGxhcHNpYmxlJyxcbiAgICB0eXBlOiAnc3RyaW5nJ1xuICB9KVxuICBASW5wdXQoKVxuICB0aXRsZTogc3RyaW5nO1xuXG4gIEBDb250ZW50QXBpKHtcbiAgICBzZWxlY3RvcjogJyNjb2xsYXBzaWJsZVRpdGxlVGVtcGxhdGUnLFxuICAgIGRlc2NyaXB0aW9uOiAnY29sbGFwc2libGUgdGl0bGUgdGVtcGxhdGUnXG4gIH0pXG4gIEBDb250ZW50Q2hpbGQoJ2NvbGxhcHNpYmxlVGl0bGVUZW1wbGF0ZScpXG4gIHRpdGxlVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgQENvbnRlbnRBcGkoe1xuICAgIHNlbGVjdG9yOiAnI2NvbGxhcHNpYmxlQ29udGVudFRlbXBsYXRlJyxcbiAgICBkZXNjcmlwdGlvbjogJ2NvbGxhcHNpYmxlIGNvbnRlbnQgdGVtcGxhdGUnXG4gIH0pXG4gIEBDb250ZW50Q2hpbGQoJ2NvbGxhcHNpYmxlQ29udGVudFRlbXBsYXRlJylcbiAgY29udGVudFRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xufVxuIl19