coer-elements 0.0.139 → 0.0.140
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -1,20 +1,26 @@
|
|
|
1
|
+
import { AfterViewInit } from '@angular/core';
|
|
1
2
|
import * as i0 from "@angular/core";
|
|
2
|
-
export declare class CoerAccordion {
|
|
3
|
+
export declare class CoerAccordion implements AfterViewInit {
|
|
3
4
|
protected _id: string;
|
|
4
5
|
private _expansionPanel;
|
|
6
|
+
private _htmlElement;
|
|
5
7
|
id: string;
|
|
6
8
|
title: import("@angular/core").InputSignal<string>;
|
|
7
9
|
icon: import("@angular/core").InputSignal<string>;
|
|
8
10
|
expanded: import("@angular/core").InputSignal<boolean>;
|
|
11
|
+
scrollOnOpen: import("@angular/core").InputSignal<boolean>;
|
|
9
12
|
onOpen: import("@angular/core").OutputEmitterRef<void>;
|
|
10
13
|
onClose: import("@angular/core").OutputEmitterRef<void>;
|
|
11
14
|
protected IsNotOnlyWhiteSpace: (value: any) => boolean;
|
|
15
|
+
ngAfterViewInit(): void;
|
|
12
16
|
get isExpanded(): boolean;
|
|
13
17
|
get isCollapsed(): boolean;
|
|
14
18
|
/** */
|
|
15
19
|
Open(): void;
|
|
16
20
|
/** */
|
|
17
21
|
Close(): void;
|
|
22
|
+
/** */
|
|
23
|
+
ScrollToAccordion(): void;
|
|
18
24
|
static ɵfac: i0.ɵɵFactoryDeclaration<CoerAccordion, never>;
|
|
19
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CoerAccordion, "coer-accordion", never, { "id": { "alias": "id"; "required": false; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "onOpen": "onOpen"; "onClose": "onClose"; }, never, ["*"], false, never>;
|
|
25
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CoerAccordion, "coer-accordion", never, { "id": { "alias": "id"; "required": false; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "scrollOnOpen": { "alias": "scrollOnOpen"; "required": false; "isSignal": true; }; }, { "onOpen": "onOpen"; "onClose": "onClose"; }, never, ["*"], false, never>;
|
|
20
26
|
}
|
|
@@ -50,12 +50,18 @@ class CoerAccordion {
|
|
|
50
50
|
this.title = input('');
|
|
51
51
|
this.icon = input('');
|
|
52
52
|
this.expanded = input(true);
|
|
53
|
+
this.scrollOnOpen = input(false);
|
|
53
54
|
//Outputs
|
|
54
55
|
this.onOpen = output();
|
|
55
56
|
this.onClose = output();
|
|
56
57
|
//Generic Tools
|
|
57
58
|
this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
|
|
58
59
|
}
|
|
60
|
+
ngAfterViewInit() {
|
|
61
|
+
Tools.Sleep().then(() => {
|
|
62
|
+
this._htmlElement = document.getElementById(this._id);
|
|
63
|
+
});
|
|
64
|
+
}
|
|
59
65
|
//getter
|
|
60
66
|
get isExpanded() {
|
|
61
67
|
return Tools.IsNotNull(this._expansionPanel())
|
|
@@ -74,6 +80,10 @@ class CoerAccordion {
|
|
|
74
80
|
if (this.isCollapsed) {
|
|
75
81
|
this._expansionPanel()?.open();
|
|
76
82
|
}
|
|
83
|
+
if (this.scrollOnOpen() && Tools.IsNotNull(this._htmlElement)) {
|
|
84
|
+
Tools.Sleep().then(_ => this._htmlElement.scrollIntoView({ behavior: 'smooth' }));
|
|
85
|
+
}
|
|
86
|
+
this.onOpen.emit();
|
|
77
87
|
}
|
|
78
88
|
}
|
|
79
89
|
/** */
|
|
@@ -82,14 +92,21 @@ class CoerAccordion {
|
|
|
82
92
|
if (this.isExpanded) {
|
|
83
93
|
this._expansionPanel()?.close();
|
|
84
94
|
}
|
|
95
|
+
this.onClose.emit();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
/** */
|
|
99
|
+
ScrollToAccordion() {
|
|
100
|
+
if (Tools.IsNotNull(this._expansionPanel())) {
|
|
101
|
+
Tools.Sleep().then(_ => this._htmlElement.scrollIntoView({ behavior: 'smooth' }));
|
|
85
102
|
}
|
|
86
103
|
}
|
|
87
104
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
88
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerAccordion, isStandalone: false, selector: "coer-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["coerAccordion"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-expansion-panel #coerAccordion class=\"coer-accordion\" [expanded]=\"expanded()\" title=\"\" (opened)=\"
|
|
105
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerAccordion, isStandalone: false, selector: "coer-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, scrollOnOpen: { classPropertyName: "scrollOnOpen", publicName: "scrollOnOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["coerAccordion"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-expansion-panel [id]=\"_id\" #coerAccordion class=\"coer-accordion\" [expanded]=\"expanded()\" title=\"\" (opened)=\"Open()\" (closed)=\"Close()\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n @if(IsNotOnlyWhiteSpace(icon())) {\r\n <i [class]=\"icon()\"></i>\r\n }\r\n <span>{{ title() }}</span>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n\r\n <div>\r\n <ng-content></ng-content>\r\n </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:#f5f5f5!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{font-size:16px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}\n"], dependencies: [{ kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }] }); }
|
|
89
106
|
}
|
|
90
107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerAccordion, decorators: [{
|
|
91
108
|
type: Component,
|
|
92
|
-
args: [{ selector: 'coer-accordion', standalone: false, template: "<mat-expansion-panel #coerAccordion class=\"coer-accordion\" [expanded]=\"expanded()\" title=\"\" (opened)=\"
|
|
109
|
+
args: [{ selector: 'coer-accordion', standalone: false, template: "<mat-expansion-panel [id]=\"_id\" #coerAccordion class=\"coer-accordion\" [expanded]=\"expanded()\" title=\"\" (opened)=\"Open()\" (closed)=\"Close()\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n @if(IsNotOnlyWhiteSpace(icon())) {\r\n <i [class]=\"icon()\"></i>\r\n }\r\n <span>{{ title() }}</span>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n\r\n <div>\r\n <ng-content></ng-content>\r\n </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:#f5f5f5!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{font-size:16px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}\n"] }]
|
|
93
110
|
}], propDecorators: { id: [{
|
|
94
111
|
type: Input
|
|
95
112
|
}] } });
|