@natec/mef-dev-ui-kit 1.1.1 → 1.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/markup-kit/collapse/collapse/collapse.component.mjs +7 -3
- package/fesm2015/natec-mef-dev-ui-kit.mjs +6 -2
- package/fesm2015/natec-mef-dev-ui-kit.mjs.map +1 -1
- package/fesm2020/natec-mef-dev-ui-kit.mjs +6 -2
- package/fesm2020/natec-mef-dev-ui-kit.mjs.map +1 -1
- package/lib/markup-kit/collapse/collapse/collapse.component.d.ts +3 -2
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { animate, state, style, transition, trigger } from '@angular/animations';
|
|
2
|
-
import { Component, ContentChild, Host, HostBinding, Input } from '@angular/core';
|
|
2
|
+
import { Component, ContentChild, EventEmitter, Host, HostBinding, Input, Output } from '@angular/core';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "../collapse-set/collapse-set.component";
|
|
5
5
|
import * as i2 from "@angular/common";
|
|
@@ -9,6 +9,7 @@ export class CollapseComponent {
|
|
|
9
9
|
this._elementRef = _elementRef;
|
|
10
10
|
this._disabled = false;
|
|
11
11
|
this._active = false;
|
|
12
|
+
this.stateChange = new EventEmitter();
|
|
12
13
|
this._el = this._elementRef.nativeElement;
|
|
13
14
|
this._collapseSet.addTab(this);
|
|
14
15
|
}
|
|
@@ -32,12 +33,13 @@ export class CollapseComponent {
|
|
|
32
33
|
}
|
|
33
34
|
clickHeader($event) {
|
|
34
35
|
this.Active = !this.Active;
|
|
36
|
+
this.stateChange.next(this.Active);
|
|
35
37
|
/** trigger host collapseSet click event */
|
|
36
38
|
this._collapseSet.pgClick(this);
|
|
37
39
|
}
|
|
38
40
|
}
|
|
39
41
|
CollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CollapseComponent, deps: [{ token: i1.CollapseSetComponent, host: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
40
|
-
CollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CollapseComponent, selector: "mefdev-collapse", inputs: { Disabled: "Disabled", Active: "Active" }, host: { properties: { "class.card": "true", "class.card-default": "true", "class.m-b-0": "true", "class.disabled": "this.Disabled" } }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n <div class=\"col\">\r\n <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n </div>\r\n <div class=\"col\">\r\n <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n <div *ngIf=\"_active\" \r\n class=\"card-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,.card-title,h3{font-family:montserrat-regular;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat-light;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat-semibold;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:montserrat-medium;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato-Bold;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato-Regular;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato-Bold;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato-Regular;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato-Bold;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato-Regular;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-title{background-color:#f3f3f3;padding:17px;margin:0;color:#000}.collapse{background-color:#f3f3f3}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
42
|
+
CollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CollapseComponent, selector: "mefdev-collapse", inputs: { Disabled: "Disabled", Active: "Active" }, outputs: { stateChange: "stateChange" }, host: { properties: { "class.card": "true", "class.card-default": "true", "class.m-b-0": "true", "class.disabled": "this.Disabled" } }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n <div class=\"col\">\r\n <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n </div>\r\n <div class=\"col\">\r\n <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n <div *ngIf=\"_active\" \r\n class=\"card-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,.card-title,h3{font-family:montserrat-regular;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat-light;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat-semibold;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:montserrat-medium;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato-Bold;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato-Regular;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato-Bold;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato-Regular;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato-Bold;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato-Regular;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-title{background-color:#f3f3f3;padding:17px;margin:0;color:#000}.collapse{background-color:#f3f3f3}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
41
43
|
trigger('collapseState', [
|
|
42
44
|
state('inactive', style({
|
|
43
45
|
opacity: '0',
|
|
@@ -83,5 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
83
85
|
args: ['class.disabled']
|
|
84
86
|
}], Active: [{
|
|
85
87
|
type: Input
|
|
88
|
+
}], stateChange: [{
|
|
89
|
+
type: Output
|
|
86
90
|
}] } });
|
|
87
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
91
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sbGFwc2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkta2l0LWxpYi9zcmMvbGliL21hcmt1cC1raXQvY29sbGFwc2UvY29sbGFwc2UvY29sbGFwc2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkta2l0LWxpYi9zcmMvbGliL21hcmt1cC1raXQvY29sbGFwc2UvY29sbGFwc2UvY29sbGFwc2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNqRixPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBYyxZQUFZLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFlLE1BQU0sZUFBZSxDQUFDOzs7O0FBaUNqSSxNQUFNLE9BQU8saUJBQWlCO0lBMEM1QixZQUE0QixZQUFrQyxFQUFVLFdBQXVCO1FBQW5FLGlCQUFZLEdBQVosWUFBWSxDQUFzQjtRQUFVLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBeEN2RixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBQzFCLFlBQU8sR0FBRyxLQUFLLENBQUM7UUE4Qk4sZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBVWxELElBQUksQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUM7UUFDMUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDakMsQ0FBQztJQXJDRCxJQUVJLFFBQVEsQ0FBQyxLQUFjO1FBQ3pCLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO0lBQ3pCLENBQUM7SUFFRCxJQUFJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDeEIsQ0FBQztJQUVELElBQ0ksTUFBTSxDQUFDLEtBQWM7UUFDdkIsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLElBQUksSUFBSSxDQUFDLE9BQU8sS0FBSyxNQUFNLEVBQUU7WUFDM0IsT0FBTztTQUNSO1FBQ0QsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUM7U0FDdkI7SUFDSCxDQUFDO0lBRUQsSUFBSSxNQUFNO1FBQ1IsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ3RCLENBQUM7SUFJRCxXQUFXLENBQUMsTUFBa0I7UUFDNUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7UUFDM0IsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ25DLDJDQUEyQztRQUMzQyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNsQyxDQUFDOzs4R0F4Q1UsaUJBQWlCO2tHQUFqQixpQkFBaUIsZ1lDbEM5Qix5d0JBZ0JNLHMrRURSUTtRQUNWLE9BQU8sQ0FBQyxlQUFlLEVBQUU7WUFDdkIsS0FBSyxDQUNILFVBQVUsRUFDVixLQUFLLENBQUM7Z0JBQ0osT0FBTyxFQUFFLEdBQUc7Z0JBQ1osTUFBTSxFQUFFLENBQUM7YUFDVixDQUFDLENBQ0g7WUFDRCxLQUFLLENBQ0gsUUFBUSxFQUNSLEtBQUssQ0FBQztnQkFDSixPQUFPLEVBQUUsR0FBRztnQkFDWixNQUFNLEVBQUUsR0FBRzthQUNaLENBQUMsQ0FDSDtZQUNELFVBQVUsQ0FBQyxvQkFBb0IsRUFBRSxPQUFPLENBQUMsZUFBZSxDQUFDLENBQUM7WUFDMUQsVUFBVSxDQUFDLG9CQUFvQixFQUFFLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1NBQzVELENBQUM7S0FDSDsyRkFPVSxpQkFBaUI7a0JBOUI3QixTQUFTOytCQUNFLGlCQUFpQixjQUdmO3dCQUNWLE9BQU8sQ0FBQyxlQUFlLEVBQUU7NEJBQ3ZCLEtBQUssQ0FDSCxVQUFVLEVBQ1YsS0FBSyxDQUFDO2dDQUNKLE9BQU8sRUFBRSxHQUFHO2dDQUNaLE1BQU0sRUFBRSxDQUFDOzZCQUNWLENBQUMsQ0FDSDs0QkFDRCxLQUFLLENBQ0gsUUFBUSxFQUNSLEtBQUssQ0FBQztnQ0FDSixPQUFPLEVBQUUsR0FBRztnQ0FDWixNQUFNLEVBQUUsR0FBRzs2QkFDWixDQUFDLENBQ0g7NEJBQ0QsVUFBVSxDQUFDLG9CQUFvQixFQUFFLE9BQU8sQ0FBQyxlQUFlLENBQUMsQ0FBQzs0QkFDMUQsVUFBVSxDQUFDLG9CQUFvQixFQUFFLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO3lCQUM1RCxDQUFDO3FCQUNILFFBQ0s7d0JBQ0osY0FBYyxFQUFFLE1BQU07d0JBQ3RCLHNCQUFzQixFQUFFLE1BQU07d0JBQzlCLGVBQWUsRUFBRSxNQUFNO3FCQUN4Qjs7MEJBNENZLElBQUk7cUVBcENVLFNBQVM7c0JBQW5DLFlBQVk7dUJBQUMsV0FBVztnQkFJckIsUUFBUTtzQkFGWCxLQUFLOztzQkFDTCxXQUFXO3VCQUFDLGdCQUFnQjtnQkFVekIsTUFBTTtzQkFEVCxLQUFLO2dCQWVJLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBhbmltYXRlLCBzdGF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXIgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdCwgSG9zdEJpbmRpbmcsIElucHV0LCBPdXRwdXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbGxhcHNlU2V0Q29tcG9uZW50IH0gZnJvbSAnLi4vY29sbGFwc2Utc2V0L2NvbGxhcHNlLXNldC5jb21wb25lbnQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdtZWZkZXYtY29sbGFwc2UnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9jb2xsYXBzZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vY29sbGFwc2UuY29tcG9uZW50LnNjc3MnXSxcclxuICBhbmltYXRpb25zOiBbXHJcbiAgICB0cmlnZ2VyKCdjb2xsYXBzZVN0YXRlJywgW1xyXG4gICAgICBzdGF0ZShcclxuICAgICAgICAnaW5hY3RpdmUnLFxyXG4gICAgICAgIHN0eWxlKHtcclxuICAgICAgICAgIG9wYWNpdHk6ICcwJyxcclxuICAgICAgICAgIGhlaWdodDogMFxyXG4gICAgICAgIH0pXHJcbiAgICAgICksXHJcbiAgICAgIHN0YXRlKFxyXG4gICAgICAgICdhY3RpdmUnLFxyXG4gICAgICAgIHN0eWxlKHtcclxuICAgICAgICAgIG9wYWNpdHk6ICcxJyxcclxuICAgICAgICAgIGhlaWdodDogJyonXHJcbiAgICAgICAgfSlcclxuICAgICAgKSxcclxuICAgICAgdHJhbnNpdGlvbignaW5hY3RpdmUgPT4gYWN0aXZlJywgYW5pbWF0ZSgnMTI1bXMgZWFzZS1pbicpKSxcclxuICAgICAgdHJhbnNpdGlvbignYWN0aXZlID0+IGluYWN0aXZlJywgYW5pbWF0ZSgnMTI1bXMgZWFzZS1vdXQnKSlcclxuICAgIF0pXHJcbiAgXSwgXHJcbiAgaG9zdDoge1xyXG4gICAgJ1tjbGFzcy5jYXJkXSc6ICd0cnVlJyxcclxuICAgICdbY2xhc3MuY2FyZC1kZWZhdWx0XSc6ICd0cnVlJyxcclxuICAgICdbY2xhc3MubS1iLTBdJzogJ3RydWUnXHJcbiAgfVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ29sbGFwc2VDb21wb25lbnQge1xyXG5cclxuICBwcml2YXRlIF9kaXNhYmxlZCA9IGZhbHNlO1xyXG4gIF9hY3RpdmUgPSBmYWxzZTtcclxuICBfZWw7XHJcblxyXG4gIEBDb250ZW50Q2hpbGQoXCJDYXJkVGl0bGVcIikgQ2FyZFRpdGxlOiBUZW1wbGF0ZVJlZjx2b2lkPjtcclxuXHJcbiAgQElucHV0KClcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmRpc2FibGVkJylcclxuICBzZXQgRGlzYWJsZWQodmFsdWU6IGJvb2xlYW4pIHtcclxuICAgIHRoaXMuX2Rpc2FibGVkID0gdmFsdWU7XHJcbiAgfVxyXG5cclxuICBnZXQgRGlzYWJsZWQoKTogYm9vbGVhbiB7XHJcbiAgICByZXR1cm4gdGhpcy5fZGlzYWJsZWQ7XHJcbiAgfVxyXG5cclxuICBASW5wdXQoKVxyXG4gIHNldCBBY3RpdmUodmFsdWU6IGJvb2xlYW4pIHtcclxuICAgIGNvbnN0IGFjdGl2ZSA9IHZhbHVlO1xyXG4gICAgaWYgKHRoaXMuX2FjdGl2ZSA9PT0gYWN0aXZlKSB7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuICAgIGlmICghdGhpcy5EaXNhYmxlZCkge1xyXG4gICAgICB0aGlzLl9hY3RpdmUgPSBhY3RpdmU7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBnZXQgQWN0aXZlKCk6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuIHRoaXMuX2FjdGl2ZTtcclxuICB9XHJcblxyXG4gIEBPdXRwdXQoKSBzdGF0ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcclxuXHJcbiAgY2xpY2tIZWFkZXIoJGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XHJcbiAgICB0aGlzLkFjdGl2ZSA9ICF0aGlzLkFjdGl2ZTtcclxuICAgIHRoaXMuc3RhdGVDaGFuZ2UubmV4dCh0aGlzLkFjdGl2ZSk7XHJcbiAgICAvKiogdHJpZ2dlciBob3N0IGNvbGxhcHNlU2V0IGNsaWNrIGV2ZW50ICovXHJcbiAgICB0aGlzLl9jb2xsYXBzZVNldC5wZ0NsaWNrKHRoaXMpO1xyXG4gIH1cclxuXHJcbiAgY29uc3RydWN0b3IoQEhvc3QoKSBwcml2YXRlIF9jb2xsYXBzZVNldDogQ29sbGFwc2VTZXRDb21wb25lbnQsIHByaXZhdGUgX2VsZW1lbnRSZWY6IEVsZW1lbnRSZWYpIHtcclxuICAgIHRoaXMuX2VsID0gdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xyXG4gICAgdGhpcy5fY29sbGFwc2VTZXQuYWRkVGFiKHRoaXMpO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwicm93IG10LTIgY2FyZC10aXRsZVwiIFthdHRyLmFyaWEtZXhwYW5kZWRdPVwiX2FjdGl2ZVwiIChjbGljayk9XCJjbGlja0hlYWRlcigkZXZlbnQpXCIgcm9sZT1cInRhYlwiXHJcbmhyZWY9XCJqYXZhc2NyaXB0OjtcIiBbbmdDbGFzc109XCJ7J2NvbGxhcHNlZCc6IV9hY3RpdmV9XCI+XHJcbiAgPGRpdiBjbGFzcz1cImNvbFwiPlxyXG4gICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cIkNhcmRUaXRsZVwiPjwvbmctdGVtcGxhdGU+XHJcbiAgPC9kaXY+XHJcbiAgPGRpdiBjbGFzcz1cImNvbFwiPlxyXG4gICAgPGkgY2xhc3M9XCJmYSBmYS1hbmdsZS1kb3duIGZsb2F0LWVuZCBcIiBhcmlhLWhpZGRlbj1cInRydWVcIiAqbmdJZj1cIiFfYWN0aXZlXCI+PC9pPlxyXG4gICAgPGkgY2xhc3M9XCJmYSBmYS1hbmdsZS11cCBmbG9hdC1lbmQgXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCIgKm5nSWY9XCJfYWN0aXZlXCI+PC9pPlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuXHJcbjxkaXYgY2xhc3M9XCJjb2xsYXBzZVwiIFtuZ0NsYXNzXT1cInsnc2hvdyc6dHJ1ZSwnYWN0aXZlJzpfYWN0aXZlLCdpbmFjdGl2ZSc6IV9hY3RpdmV9XCIgW0Bjb2xsYXBzZVN0YXRlXT1cIl9hY3RpdmU/J2FjdGl2ZSc6J2luYWN0aXZlJ1wiPlxyXG4gICAgPGRpdiAqbmdJZj1cIl9hY3RpdmVcIiBcclxuICAgICBjbGFzcz1cImNhcmQtYm9keVwiPlxyXG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+Il19
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ViewEncapsulation, Input, Host, ContentChild, HostBinding, NgModule, Injectable,
|
|
2
|
+
import { Component, ViewEncapsulation, Input, EventEmitter, Host, ContentChild, HostBinding, Output, NgModule, Injectable, ViewChild, Pipe, forwardRef, HostListener, Directive, Optional, ContentChildren, TemplateRef } from '@angular/core';
|
|
3
3
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
@@ -75,6 +75,7 @@ class CollapseComponent {
|
|
|
75
75
|
this._elementRef = _elementRef;
|
|
76
76
|
this._disabled = false;
|
|
77
77
|
this._active = false;
|
|
78
|
+
this.stateChange = new EventEmitter();
|
|
78
79
|
this._el = this._elementRef.nativeElement;
|
|
79
80
|
this._collapseSet.addTab(this);
|
|
80
81
|
}
|
|
@@ -98,12 +99,13 @@ class CollapseComponent {
|
|
|
98
99
|
}
|
|
99
100
|
clickHeader($event) {
|
|
100
101
|
this.Active = !this.Active;
|
|
102
|
+
this.stateChange.next(this.Active);
|
|
101
103
|
/** trigger host collapseSet click event */
|
|
102
104
|
this._collapseSet.pgClick(this);
|
|
103
105
|
}
|
|
104
106
|
}
|
|
105
107
|
CollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CollapseComponent, deps: [{ token: CollapseSetComponent, host: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
106
|
-
CollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CollapseComponent, selector: "mefdev-collapse", inputs: { Disabled: "Disabled", Active: "Active" }, host: { properties: { "class.card": "true", "class.card-default": "true", "class.m-b-0": "true", "class.disabled": "this.Disabled" } }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n <div class=\"col\">\r\n <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n </div>\r\n <div class=\"col\">\r\n <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n <div *ngIf=\"_active\" \r\n class=\"card-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,.card-title,h3{font-family:montserrat-regular;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat-light;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat-semibold;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:montserrat-medium;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato-Bold;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato-Regular;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato-Bold;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato-Regular;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato-Bold;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato-Regular;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-title{background-color:#f3f3f3;padding:17px;margin:0;color:#000}.collapse{background-color:#f3f3f3}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
108
|
+
CollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CollapseComponent, selector: "mefdev-collapse", inputs: { Disabled: "Disabled", Active: "Active" }, outputs: { stateChange: "stateChange" }, host: { properties: { "class.card": "true", "class.card-default": "true", "class.m-b-0": "true", "class.disabled": "this.Disabled" } }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n <div class=\"col\">\r\n <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n </div>\r\n <div class=\"col\">\r\n <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n <div *ngIf=\"_active\" \r\n class=\"card-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,.card-title,h3{font-family:montserrat-regular;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat-light;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat-semibold;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:montserrat-medium;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato-Bold;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato-Regular;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato-Bold;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato-Regular;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato-Bold;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato-Regular;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-title{background-color:#f3f3f3;padding:17px;margin:0;color:#000}.collapse{background-color:#f3f3f3}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
107
109
|
trigger('collapseState', [
|
|
108
110
|
state('inactive', style({
|
|
109
111
|
opacity: '0',
|
|
@@ -151,6 +153,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
151
153
|
args: ['class.disabled']
|
|
152
154
|
}], Active: [{
|
|
153
155
|
type: Input
|
|
156
|
+
}], stateChange: [{
|
|
157
|
+
type: Output
|
|
154
158
|
}] } });
|
|
155
159
|
|
|
156
160
|
const mefDevCollapseModuleComponents = [CollapseSetComponent, CollapseComponent];
|