@junte/ui
Version:
Quality Angular UI components kit
92 lines • 9.08 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';
var CollapsibleComponent = /** @class */ (function () {
function CollapsibleComponent() {
this.host = 'jnt-collapsible-host';
this.ui = UI;
this._orientation = Orientation.horizontal;
this.opened = false;
}
Object.defineProperty(CollapsibleComponent.prototype, "orientation", {
get: function () {
return this._orientation;
},
set: function (type) {
this._orientation = type || Orientation.horizontal;
},
enumerable: true,
configurable: true
});
__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);
return CollapsibleComponent;
}());
export { CollapsibleComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sbGFwc2libGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGp1bnRlL3VpLyIsInNvdXJjZXMiOlsibGliL2xheW91dC9jb2xsYXBzaWJsZS9jb2xsYXBzaWJsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pGLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3BFLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQU16QztJQUFBO1FBRXFDLFNBQUksR0FBRyxzQkFBc0IsQ0FBQztRQUVqRSxPQUFFLEdBQUcsRUFBRSxDQUFDO1FBR1IsaUJBQVksR0FBZ0IsV0FBVyxDQUFDLFVBQVUsQ0FBQztRQXNCbkQsV0FBTSxHQUFHLEtBQUssQ0FBQztJQTZCakIsQ0FBQztJQTNDVSxzQkFBSSw2Q0FBVzthQUl4QjtZQUNFLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztRQUMzQixDQUFDO2FBTlEsVUFBZ0IsSUFBaUI7WUFDeEMsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLElBQUksV0FBVyxDQUFDLFVBQVUsQ0FBQztRQUNyRCxDQUFDOzs7T0FBQTtJQWZ5QjtRQUF6QixXQUFXLENBQUMsV0FBVyxDQUFDOztzREFBd0M7SUFLakU7UUFEQyxXQUFXLENBQUMsdUJBQXVCLENBQUM7OzhEQUNjO0lBUTFDO1FBTlIsV0FBVyxDQUFDO1lBQ1gsV0FBVyxFQUFFLHlCQUF5QjtZQUN0QyxJQUFJLEVBQUUsZ0JBQWdCO1lBQ3RCLE9BQU8sRUFBRSxXQUFXLENBQUMsVUFBVTtZQUMvQixPQUFPLEVBQUUsQ0FBQyxXQUFXLENBQUMsVUFBVSxFQUFFLFdBQVcsQ0FBQyxRQUFRLENBQUM7U0FDeEQsQ0FBQztRQUNELEtBQUssRUFBRTs7OzJEQUVQO0lBWUQ7UUFOQyxXQUFXLENBQUM7WUFDWCxXQUFXLEVBQUUsdUJBQXVCO1lBQ3BDLElBQUksRUFBRSxTQUFTO1lBQ2YsT0FBTyxFQUFFLE9BQU87U0FDakIsQ0FBQztRQUNELEtBQUssRUFBRTs7d0RBQ087SUFPZjtRQUxDLFdBQVcsQ0FBQztZQUNYLFdBQVcsRUFBRSxxQkFBcUI7WUFDbEMsSUFBSSxFQUFFLFFBQVE7U0FDZixDQUFDO1FBQ0QsS0FBSyxFQUFFOztzREFDSztJQU9iO1FBTEMsV0FBVyxDQUFDO1lBQ1gsV0FBVyxFQUFFLHNCQUFzQjtZQUNuQyxJQUFJLEVBQUUsUUFBUTtTQUNmLENBQUM7UUFDRCxLQUFLLEVBQUU7O3VEQUNNO0lBT2Q7UUFMQyxVQUFVLENBQUM7WUFDVixRQUFRLEVBQUUsMkJBQTJCO1lBQ3JDLFdBQVcsRUFBRSw0QkFBNEI7U0FDMUMsQ0FBQztRQUNELFlBQVksQ0FBQywwQkFBMEIsQ0FBQztrQ0FDMUIsV0FBVzsrREFBTTtJQU9oQztRQUxDLFVBQVUsQ0FBQztZQUNWLFFBQVEsRUFBRSw2QkFBNkI7WUFDdkMsV0FBVyxFQUFFLDhCQUE4QjtTQUM1QyxDQUFDO1FBQ0QsWUFBWSxDQUFDLDRCQUE0QixDQUFDO2tDQUMxQixXQUFXO2lFQUFNO0lBekR2QixvQkFBb0I7UUFKaEMsU0FBUyxDQUFDO1lBQ1QsUUFBUSxFQUFFLGlCQUFpQjtZQUMzQiwrdENBQThDO1NBQy9DLENBQUM7T0FDVyxvQkFBb0IsQ0EwRGhDO0lBQUQsMkJBQUM7Q0FBQSxBQTFERCxJQTBEQztTQTFEWSxvQkFBb0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSG9zdEJpbmRpbmcsIElucHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgT3JpZW50YXRpb24gfSBmcm9tICcuLi8uLi9jb3JlL2VudW1zL29yaWVudGF0aW9uJztcbmltcG9ydCB7IENvbnRlbnRBcGksIFByb3BlcnR5QXBpIH0gZnJvbSAnLi4vLi4vY29yZS9kZWNvcmF0b3JzL2FwaSc7XG5pbXBvcnQgeyBVSSB9IGZyb20gJy4uLy4uL2NvcmUvZW51bXMvdWknO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdqbnQtY29sbGFwc2libGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vY29sbGFwc2libGUuZW5jYXBzdWxhdGVkLmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIENvbGxhcHNpYmxlQ29tcG9uZW50IHtcblxuICBASG9zdEJpbmRpbmcoJ2F0dHIuaG9zdCcpIHJlYWRvbmx5IGhvc3QgPSAnam50LWNvbGxhcHNpYmxlLWhvc3QnO1xuXG4gIHVpID0gVUk7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtb3JpZW50YXRpb24nKVxuICBfb3JpZW50YXRpb246IE9yaWVudGF0aW9uID0gT3JpZW50YXRpb24uaG9yaXpvbnRhbDtcblxuICBAUHJvcGVydHlBcGkoe1xuICAgIGRlc2NyaXB0aW9uOiAnQ29sbGFwc2libGUgb3JpZW50YXRpb24nLFxuICAgIHBhdGg6ICd1aS5vcmllbnRhdGlvbicsXG4gICAgZGVmYXVsdDogT3JpZW50YXRpb24uaG9yaXpvbnRhbCxcbiAgICBvcHRpb25zOiBbT3JpZW50YXRpb24uaG9yaXpvbnRhbCwgT3JpZW50YXRpb24udmVydGljYWxdXG4gIH0pXG4gIEBJbnB1dCgpIHNldCBvcmllbnRhdGlvbih0eXBlOiBPcmllbnRhdGlvbikge1xuICAgIHRoaXMuX29yaWVudGF0aW9uID0gdHlwZSB8fCBPcmllbnRhdGlvbi5ob3Jpem9udGFsO1xuICB9XG5cbiAgZ2V0IG9yaWVudGF0aW9uKCkge1xuICAgIHJldHVybiB0aGlzLl9vcmllbnRhdGlvbjtcbiAgfVxuXG4gIEBQcm9wZXJ0eUFwaSh7XG4gICAgZGVzY3JpcHRpb246ICdvcGVuZWQgb2YgY29sbGFwc2libGUnLFxuICAgIHR5cGU6ICdib29sZWFuJyxcbiAgICBkZWZhdWx0OiAnZmFsc2UnXG4gIH0pXG4gIEBJbnB1dCgpXG4gIG9wZW5lZCA9IGZhbHNlO1xuXG4gIEBQcm9wZXJ0eUFwaSh7XG4gICAgZGVzY3JpcHRpb246ICdpY29uIG9mIGNvbGxhcHNpYmxlJyxcbiAgICB0eXBlOiAnc3RyaW5nJ1xuICB9KVxuICBASW5wdXQoKVxuICBpY29uOiBzdHJpbmc7XG5cbiAgQFByb3BlcnR5QXBpKHtcbiAgICBkZXNjcmlwdGlvbjogJ1RpdGxlIG9mIGNvbGxhcHNpYmxlJyxcbiAgICB0eXBlOiAnc3RyaW5nJ1xuICB9KVxuICBASW5wdXQoKVxuICB0aXRsZTogc3RyaW5nO1xuXG4gIEBDb250ZW50QXBpKHtcbiAgICBzZWxlY3RvcjogJyNjb2xsYXBzaWJsZVRpdGxlVGVtcGxhdGUnLFxuICAgIGRlc2NyaXB0aW9uOiAnY29sbGFwc2libGUgdGl0bGUgdGVtcGxhdGUnXG4gIH0pXG4gIEBDb250ZW50Q2hpbGQoJ2NvbGxhcHNpYmxlVGl0bGVUZW1wbGF0ZScpXG4gIHRpdGxlVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgQENvbnRlbnRBcGkoe1xuICAgIHNlbGVjdG9yOiAnI2NvbGxhcHNpYmxlQ29udGVudFRlbXBsYXRlJyxcbiAgICBkZXNjcmlwdGlvbjogJ2NvbGxhcHNpYmxlIGNvbnRlbnQgdGVtcGxhdGUnXG4gIH0pXG4gIEBDb250ZW50Q2hpbGQoJ2NvbGxhcHNpYmxlQ29udGVudFRlbXBsYXRlJylcbiAgY29udGVudFRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xufVxuIl19