@sd-angular/core
Version:
Sd Angular Core Lib
101 lines (94 loc) • 5.77 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/icon'), require('@sd-angular/core/header-title'), require('@angular/animations')) :
typeof define === 'function' && define.amd ? define('@sd-angular/core/group', ['exports', '@angular/core', '@angular/common', '@angular/material/icon', '@sd-angular/core/header-title', '@angular/animations'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.group = {}), global.ng.core, global.ng.common, global.ng.material.icon, global['sd-angular'].core['header-title'], global.ng.animations));
}(this, (function (exports, core, common, icon, headerTitle, animations) { 'use strict';
var SdGroupComponent = /** @class */ (function () {
function SdGroupComponent() {
var _this = this;
this.height = 'auto';
this.isExpanded = true;
this.expandable = false;
this.onExpand = function () {
if (!_this.expandable) {
return;
}
_this.isExpanded = !_this.isExpanded;
};
this.open = function () {
_this.isExpanded = true;
};
this.close = function () {
_this.isExpanded = false;
};
}
Object.defineProperty(SdGroupComponent.prototype, "_isExpanded", {
set: function (val) {
this.isExpanded = (val === '') || val;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SdGroupComponent.prototype, "_expandable", {
set: function (val) {
this.expandable = (val === '') || val;
},
enumerable: false,
configurable: true
});
SdGroupComponent.prototype.ngOnInit = function () {
if (this.expandable) {
this.isExpanded = true;
}
};
return SdGroupComponent;
}());
SdGroupComponent.decorators = [
{ type: core.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: [
animations.trigger('expand', [
animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),
animations.state('expanded', animations.style({ height: '*', visibility: 'visible' })),
animations.transition('expanded <=> collapsed', animations.animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
changeDetection: core.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 = function () { return []; };
SdGroupComponent.propDecorators = {
title: [{ type: core.Input }],
description: [{ type: core.Input }],
icon: [{ type: core.Input }],
tooltip: [{ type: core.Input }],
height: [{ type: core.Input }],
_isExpanded: [{ type: core.Input, args: ['isExpanded',] }],
_expandable: [{ type: core.Input, args: ['expandable',] }]
};
var SdGroupModule = /** @class */ (function () {
function SdGroupModule() {
}
return SdGroupModule;
}());
SdGroupModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
icon.MatIconModule,
headerTitle.SdHeaderTitleModule
],
declarations: [SdGroupComponent],
exports: [SdGroupComponent]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
exports.SdGroupModule = SdGroupModule;
exports.ɵa = SdGroupComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=sd-angular-core-group.umd.js.map