ng-devui
Version:
DevUI components based on Angular
164 lines (156 loc) • 18.5 kB
JavaScript
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, HostBinding, EventEmitter, Input, Output, ContentChild, NgModule } from '@angular/core';
import { __decorate, __metadata } from 'tslib';
import { trigger, transition } from '@angular/animations';
import * as i1 from 'ng-devui/utils';
import { expandCollapseForDomDestroy, WithConfig } from 'ng-devui/utils';
class PanelBodyComponent {
constructor() {
this.default = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PanelBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PanelBodyComponent, selector: "d-panel-body", host: { properties: { "class.d-panel-body": "this.default" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PanelBodyComponent, decorators: [{
type: Component,
args: [{
selector: 'd-panel-body',
template: `<ng-content></ng-content>`,
preserveWhitespaces: false,
}]
}], propDecorators: { default: [{
type: HostBinding,
args: ['class.d-panel-body']
}] } });
class PanelFooterComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PanelFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PanelFooterComponent, selector: "d-panel-footer", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PanelFooterComponent, decorators: [{
type: Component,
args: [{
selector: 'd-panel-footer',
template: `<ng-content></ng-content>`,
preserveWhitespaces: false,
}]
}] });
class PanelHeaderComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PanelHeaderComponent, selector: "d-panel-header", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PanelHeaderComponent, decorators: [{
type: Component,
args: [{
selector: 'd-panel-header',
template: `<ng-content></ng-content>`,
preserveWhitespaces: false,
}]
}] });
class PanelComponent {
constructor(devConfigService) {
this.devConfigService = devConfigService;
this.type = 'default';
this.hasLeftPadding = true;
this.showAnimation = true;
this.toggle = new EventEmitter();
}
toggleBody() {
this.canToggle().then((val) => {
if (!val) {
return;
}
if (this.isCollapsed !== undefined) {
this.isCollapsed = !this.isCollapsed;
this.toggle.emit(this.isCollapsed);
}
});
}
canToggle() {
let changeResult = Promise.resolve(true);
if (this.beforeToggle) {
const result = this.beforeToggle(this.isCollapsed);
if (typeof result !== 'undefined') {
if (result.then) {
changeResult = result;
}
else if (result.subscribe) {
changeResult = result.toPromise();
}
else {
changeResult = Promise.resolve(result);
}
}
}
return changeResult;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PanelComponent, deps: [{ token: i1.DevConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PanelComponent, selector: "d-panel", inputs: { type: "type", cssClass: "cssClass", isCollapsed: "isCollapsed", hasLeftPadding: "hasLeftPadding", showAnimation: "showAnimation", beforeToggle: "beforeToggle" }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "panelHeader", first: true, predicate: PanelHeaderComponent, descendants: true }, { propertyName: "panelFooter", first: true, predicate: PanelFooterComponent, descendants: true }, { propertyName: "panelBody", first: true, predicate: PanelBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"devui-panel devui-panel-{{ type }} {{ cssClass }}\" [@noAnimation]>\n <div class=\"devui-panel-heading\" (click)=\"toggleBody()\" [style.cursor]=\"isCollapsed !== undefined ? 'pointer' : null\">\n <ng-content select=\"d-panel-header\"></ng-content>\n </div>\n <div\n class=\"devui-panel-body\"\n [ngClass]=\"{ 'devui-panel-body-collapse': isCollapsed !== undefined, 'has-left-padding': hasLeftPadding }\"\n @collapseForDomDestroy\n [@.disabled]=\"!showAnimation\"\n *ngIf=\"isCollapsed === undefined || isCollapsed\"\n >\n <ng-container *ngIf=\"panelFooter || panelHeader || panelBody; else elseTemplate\">\n <ng-template [ngTemplateOutlet]=\"panelBodyTpl\"></ng-template>\n </ng-container>\n <ng-template #elseTemplate>\n <div class=\"d-panel-body\">\n <ng-content></ng-content>\n </div>\n </ng-template>\n </div>\n <div class=\"devui-panel-footer\" *ngIf=\"panelFooter\">\n <ng-content select=\"d-panel-footer\"></ng-content>\n </div>\n</div>\n\n<ng-template #panelBodyTpl>\n <ng-content select=\"d-panel-body\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep{display:block}:host ::ng-deep .devui-panel{line-height:1.5;background-color:var(--devui-base-bg, #ffffff)}:host ::ng-deep .devui-panel .devui-panel-heading{padding:12px 20px;color:var(--devui-text, #191919)}:host ::ng-deep .devui-panel .devui-panel-heading d-panel-header{line-height:1.5}:host ::ng-deep .devui-panel .devui-panel-body{display:flex;position:relative;border-top:1px solid var(--devui-dividing-line, #f0f0f0)}:host ::ng-deep .devui-panel .devui-panel-body .d-panel-body{line-height:1.5;padding:20px;background:var(--devui-base-bg, #ffffff);flex:1}:host ::ng-deep .devui-panel .devui-panel-body.devui-panel-body-collapse:before{content:none}:host ::ng-deep .devui-panel .devui-panel-body.devui-panel-body-collapse .d-panel-body{border-left:none}:host ::ng-deep .devui-panel .devui-panel-body.devui-panel-body-collapse.has-left-padding:before{content:\"\";width:30px;height:100%}:host ::ng-deep .devui-panel .devui-panel-body.devui-panel-body-collapse.has-left-padding .d-panel-body{border-left:2px solid var(--devui-dividing-line, #f0f0f0)}:host ::ng-deep .devui-panel .devui-panel-footer{padding:12px 20px;color:var(--devui-text, #191919);background-color:var(--devui-area, #f3f3f3)}:host ::ng-deep .devui-panel .devui-panel-footer d-panel-footer{line-height:1.5}:host ::ng-deep .devui-panel.devui-panel-default .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-default .devui-panel-body,:host ::ng-deep .devui-panel.devui-panel-common .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-common .devui-panel-body{background-color:var(--devui-default-bg, #fafafa)}:host ::ng-deep .devui-panel.devui-panel-primary .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-primary .devui-panel-body{background-color:var(--devui-primary-bg, #e6eeff)}:host ::ng-deep .devui-panel.devui-panel-primary .devui-panel-body-collapse.has-left-padding .d-panel-body{border-color:var(--devui-primary-line, #0a59f7)}:host ::ng-deep .devui-panel.devui-panel-info .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-info .devui-panel-body{background-color:var(--devui-info-bg, #cedefd)}:host ::ng-deep .devui-panel.devui-panel-info .devui-panel-body-collapse.has-left-padding .d-panel-body{border-color:var(--devui-info-line, #0a59f7)}:host ::ng-deep .devui-panel.devui-panel-success .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-success .devui-panel-body{background-color:var(--devui-success-bg, #bcf2db)}:host ::ng-deep .devui-panel.devui-panel-success .devui-panel-body-collapse.has-left-padding .d-panel-body{border-color:var(--devui-success-line, #09aa71)}:host ::ng-deep .devui-panel.devui-panel-warning .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-warning .devui-panel-body{background-color:var(--devui-warning-bg, #fde2bd)}:host ::ng-deep .devui-panel.devui-panel-warning .devui-panel-body-collapse.has-left-padding .d-panel-body{border-color:var(--devui-warning-line, #f4840c)}:host ::ng-deep .devui-panel.devui-panel-danger .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-danger .devui-panel-body{background-color:var(--devui-danger-bg, #fabdc1)}:host ::ng-deep .devui-panel.devui-panel-danger .devui-panel-body-collapse.has-left-padding .d-panel-body{border-color:var(--devui-danger-line, #e02128)}:host ::ng-deep .devui-panel.devui-panel-ghost .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-ghost .devui-panel-body{background-color:transparent;border:none;padding:0}:host ::ng-deep .devui-panel.devui-panel-ghost .d-panel-body{padding:16px 20px}:host ::ng-deep .devui-panel.devui-panel-ghost .devui-panel-body-collapse.has-left-padding:before{display:none}:host ::ng-deep .devui-panel.devui-panel-ghost .devui-panel-body-collapse.has-left-padding .d-panel-body{border:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [trigger('noAnimation', [transition(':enter', [])]), expandCollapseForDomDestroy] }); }
}
__decorate([
WithConfig(),
__metadata("design:type", Object)
], PanelComponent.prototype, "showAnimation", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PanelComponent, decorators: [{
type: Component,
args: [{ selector: 'd-panel', animations: [trigger('noAnimation', [transition(':enter', [])]), expandCollapseForDomDestroy], template: "<div class=\"devui-panel devui-panel-{{ type }} {{ cssClass }}\" [@noAnimation]>\n <div class=\"devui-panel-heading\" (click)=\"toggleBody()\" [style.cursor]=\"isCollapsed !== undefined ? 'pointer' : null\">\n <ng-content select=\"d-panel-header\"></ng-content>\n </div>\n <div\n class=\"devui-panel-body\"\n [ngClass]=\"{ 'devui-panel-body-collapse': isCollapsed !== undefined, 'has-left-padding': hasLeftPadding }\"\n @collapseForDomDestroy\n [@.disabled]=\"!showAnimation\"\n *ngIf=\"isCollapsed === undefined || isCollapsed\"\n >\n <ng-container *ngIf=\"panelFooter || panelHeader || panelBody; else elseTemplate\">\n <ng-template [ngTemplateOutlet]=\"panelBodyTpl\"></ng-template>\n </ng-container>\n <ng-template #elseTemplate>\n <div class=\"d-panel-body\">\n <ng-content></ng-content>\n </div>\n </ng-template>\n </div>\n <div class=\"devui-panel-footer\" *ngIf=\"panelFooter\">\n <ng-content select=\"d-panel-footer\"></ng-content>\n </div>\n</div>\n\n<ng-template #panelBodyTpl>\n <ng-content select=\"d-panel-body\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep{display:block}:host ::ng-deep .devui-panel{line-height:1.5;background-color:var(--devui-base-bg, #ffffff)}:host ::ng-deep .devui-panel .devui-panel-heading{padding:12px 20px;color:var(--devui-text, #191919)}:host ::ng-deep .devui-panel .devui-panel-heading d-panel-header{line-height:1.5}:host ::ng-deep .devui-panel .devui-panel-body{display:flex;position:relative;border-top:1px solid var(--devui-dividing-line, #f0f0f0)}:host ::ng-deep .devui-panel .devui-panel-body .d-panel-body{line-height:1.5;padding:20px;background:var(--devui-base-bg, #ffffff);flex:1}:host ::ng-deep .devui-panel .devui-panel-body.devui-panel-body-collapse:before{content:none}:host ::ng-deep .devui-panel .devui-panel-body.devui-panel-body-collapse .d-panel-body{border-left:none}:host ::ng-deep .devui-panel .devui-panel-body.devui-panel-body-collapse.has-left-padding:before{content:\"\";width:30px;height:100%}:host ::ng-deep .devui-panel .devui-panel-body.devui-panel-body-collapse.has-left-padding .d-panel-body{border-left:2px solid var(--devui-dividing-line, #f0f0f0)}:host ::ng-deep .devui-panel .devui-panel-footer{padding:12px 20px;color:var(--devui-text, #191919);background-color:var(--devui-area, #f3f3f3)}:host ::ng-deep .devui-panel .devui-panel-footer d-panel-footer{line-height:1.5}:host ::ng-deep .devui-panel.devui-panel-default .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-default .devui-panel-body,:host ::ng-deep .devui-panel.devui-panel-common .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-common .devui-panel-body{background-color:var(--devui-default-bg, #fafafa)}:host ::ng-deep .devui-panel.devui-panel-primary .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-primary .devui-panel-body{background-color:var(--devui-primary-bg, #e6eeff)}:host ::ng-deep .devui-panel.devui-panel-primary .devui-panel-body-collapse.has-left-padding .d-panel-body{border-color:var(--devui-primary-line, #0a59f7)}:host ::ng-deep .devui-panel.devui-panel-info .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-info .devui-panel-body{background-color:var(--devui-info-bg, #cedefd)}:host ::ng-deep .devui-panel.devui-panel-info .devui-panel-body-collapse.has-left-padding .d-panel-body{border-color:var(--devui-info-line, #0a59f7)}:host ::ng-deep .devui-panel.devui-panel-success .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-success .devui-panel-body{background-color:var(--devui-success-bg, #bcf2db)}:host ::ng-deep .devui-panel.devui-panel-success .devui-panel-body-collapse.has-left-padding .d-panel-body{border-color:var(--devui-success-line, #09aa71)}:host ::ng-deep .devui-panel.devui-panel-warning .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-warning .devui-panel-body{background-color:var(--devui-warning-bg, #fde2bd)}:host ::ng-deep .devui-panel.devui-panel-warning .devui-panel-body-collapse.has-left-padding .d-panel-body{border-color:var(--devui-warning-line, #f4840c)}:host ::ng-deep .devui-panel.devui-panel-danger .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-danger .devui-panel-body{background-color:var(--devui-danger-bg, #fabdc1)}:host ::ng-deep .devui-panel.devui-panel-danger .devui-panel-body-collapse.has-left-padding .d-panel-body{border-color:var(--devui-danger-line, #e02128)}:host ::ng-deep .devui-panel.devui-panel-ghost .devui-panel-heading,:host ::ng-deep .devui-panel.devui-panel-ghost .devui-panel-body{background-color:transparent;border:none;padding:0}:host ::ng-deep .devui-panel.devui-panel-ghost .d-panel-body{padding:16px 20px}:host ::ng-deep .devui-panel.devui-panel-ghost .devui-panel-body-collapse.has-left-padding:before{display:none}:host ::ng-deep .devui-panel.devui-panel-ghost .devui-panel-body-collapse.has-left-padding .d-panel-body{border:none}\n"] }]
}], ctorParameters: () => [{ type: i1.DevConfigService }], propDecorators: { type: [{
type: Input
}], cssClass: [{
type: Input
}], isCollapsed: [{
type: Input
}], hasLeftPadding: [{
type: Input
}], showAnimation: [{
type: Input
}], beforeToggle: [{
type: Input
}], toggle: [{
type: Output
}], panelHeader: [{
type: ContentChild,
args: [PanelHeaderComponent]
}], panelFooter: [{
type: ContentChild,
args: [PanelFooterComponent]
}], panelBody: [{
type: ContentChild,
args: [PanelBodyComponent]
}] } });
class PanelModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PanelModule, declarations: [PanelComponent,
PanelHeaderComponent,
PanelBodyComponent,
PanelFooterComponent], imports: [CommonModule], exports: [PanelComponent,
PanelHeaderComponent,
PanelBodyComponent,
PanelFooterComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PanelModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PanelModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
exports: [
PanelComponent,
PanelHeaderComponent,
PanelBodyComponent,
PanelFooterComponent
],
declarations: [
PanelComponent,
PanelHeaderComponent,
PanelBodyComponent,
PanelFooterComponent,
],
providers: []
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PanelBodyComponent, PanelComponent, PanelFooterComponent, PanelHeaderComponent, PanelModule };
//# sourceMappingURL=ng-devui-panel.mjs.map