@sd-angular/core
Version:
Sd Angular Core Lib
83 lines (78 loc) • 3.98 kB
JavaScript
import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { SdHeaderTitleModule } from '@sd-angular/core/header-title';
import { trigger, state, style, transition, animate } from '@angular/animations';
class SdGroupComponent {
constructor() {
this.height = 'auto';
this.isExpanded = true;
this.expandable = false;
this.onExpand = () => {
if (!this.expandable) {
return;
}
this.isExpanded = !this.isExpanded;
};
this.open = () => {
this.isExpanded = true;
};
this.close = () => {
this.isExpanded = false;
};
}
set _isExpanded(val) {
this.isExpanded = (val === '') || val;
}
set _expandable(val) {
this.expandable = (val === '') || val;
}
ngOnInit() {
if (this.expandable) {
this.isExpanded = true;
}
}
}
SdGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'sd-group',
template: "<div class=\"c-sd-group\">\r\n <div (click)=\"onExpand()\" class=\"c-sd-group-header\">\r\n <div [class.d-none]=\"!headerTitle?.children?.length\" style=\"width: 100%;\" #headerTitle>\r\n <ng-content select=\"[sdGroupTitle]\"></ng-content>\r\n </div>\r\n <sd-header-title *ngIf=\"!headerTitle?.children?.length\" [title]=\"title\" [tooltip]=\"tooltip\"\r\n [description]=\"description\" [icon]=\"icon || (isExpanded ? 'keyboard_arrow_down':'chevron_right')\">\r\n <div sdHeaderRight>\r\n <ng-content select=\"[sdGroupHeaderRight]\"></ng-content>\r\n </div>\r\n </sd-header-title>\r\n </div>\r\n <div [@expand]=\"isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"isExpanded\">\r\n <div [style.height]=\"height\" class=\"c-sd-group-body\">\r\n <ng-content select=\"[sdGroupBody]\"></ng-content>\r\n </div>\r\n </ng-container>\r\n <ng-content select=\"[sdGroupFooter]\"></ng-content>\r\n </div>\r\n</div>",
animations: [
trigger('expand', [
state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
state('expanded', style({ height: '*', visibility: 'visible' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".c-sd-group{background:#fff;border:1px solid #f0f0f0;border-radius:4px;overflow:hidden}.c-sd-group .c-sd-group-header{align-items:center;background:#fff;cursor:pointer;display:flex;padding:12px}.c-sd-group .c-sd-group-header:hover{background:#f5f5f5}.c-sd-group .c-sd-group-body{display:flex;flex-direction:column;padding:8px 12px}"]
},] }
];
SdGroupComponent.ctorParameters = () => [];
SdGroupComponent.propDecorators = {
title: [{ type: Input }],
description: [{ type: Input }],
icon: [{ type: Input }],
tooltip: [{ type: Input }],
height: [{ type: Input }],
_isExpanded: [{ type: Input, args: ['isExpanded',] }],
_expandable: [{ type: Input, args: ['expandable',] }]
};
class SdGroupModule {
}
SdGroupModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatIconModule,
SdHeaderTitleModule
],
declarations: [SdGroupComponent],
exports: [SdGroupComponent]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
export { SdGroupModule, SdGroupComponent as ɵa };
//# sourceMappingURL=sd-angular-core-group.js.map