c3-components 0.5.0 → 0.7.0
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/esm2022/lib/c3-expansion/components/c3-expansion/c3-expansion.component.mjs +17 -8
- package/esm2022/lib/c3-expansion/components/c3-expansion-header/c3-expansion-header.component.mjs +9 -9
- package/esm2022/lib/c3-flowing-menu/components/c3-flowing-menu/c3-flowing-menu.component.mjs +4 -4
- package/fesm2022/c3-components.mjs +30 -21
- package/fesm2022/c3-components.mjs.map +1 -1
- package/lib/c3-expansion/components/c3-expansion/c3-expansion.component.d.ts +9 -5
- package/lib/c3-expansion/components/c3-expansion-header/c3-expansion-header.component.d.ts +3 -3
- package/lib/c3-flowing-menu/components/c3-flowing-menu/c3-flowing-menu.component.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { Component, HostBinding, input, model, } from '@angular/core';
|
|
1
|
+
import { Component, contentChild, effect, ElementRef, HostBinding, inject, input, model, } from '@angular/core';
|
|
2
2
|
import { C3AutoAnimateDirective } from '../../../c3-auto-animate/c3-auto-animate.directive';
|
|
3
|
+
import { C3ExpansionHeaderComponent } from '../c3-expansion-header/c3-expansion-header.component';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
import * as i1 from "../../../c3-auto-animate/c3-auto-animate.directive";
|
|
5
6
|
import * as i2 from "@angular/common";
|
|
@@ -8,16 +9,24 @@ export class C3ExpansionComponent {
|
|
|
8
9
|
get hostClass() {
|
|
9
10
|
return 'c3-expansion';
|
|
10
11
|
}
|
|
11
|
-
constructor(
|
|
12
|
-
this._elementRef = _elementRef;
|
|
12
|
+
constructor() {
|
|
13
13
|
this.headerClass = input('c3-expansion-header');
|
|
14
14
|
this.isExpanded = model(false);
|
|
15
|
+
this._elementRef = inject(ElementRef);
|
|
16
|
+
this.header = contentChild(C3ExpansionHeaderComponent);
|
|
17
|
+
effect(() => {
|
|
18
|
+
this.expandSubsciption?.unsubscribe();
|
|
19
|
+
this.header()?.toggleExpand.subscribe(() => this.toggleExpand());
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
ngOnDestroy() {
|
|
23
|
+
this.expandSubsciption?.unsubscribe();
|
|
15
24
|
}
|
|
16
25
|
toggleExpand() {
|
|
17
26
|
this.isExpanded.set(!this.isExpanded());
|
|
18
27
|
}
|
|
19
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, deps: [
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
28
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.1", type: C3ExpansionComponent, selector: "c3-expansion", inputs: { headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "header", first: true, predicate: C3ExpansionHeaderComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.C3AutoAnimateDirective, inputs: ["options", "options"] }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n <ng-content select=\"c3-expansion-header\">\n <c3-expansion-header />\n </ng-content>\n</div>\n\n<div *ngIf=\"isExpanded()\">\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: ["title", "isExpanded"], outputs: ["toggleExpand"] }] }); }
|
|
21
30
|
}
|
|
22
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, decorators: [{
|
|
23
32
|
type: Component,
|
|
@@ -26,9 +35,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
26
35
|
directive: C3AutoAnimateDirective,
|
|
27
36
|
inputs: ['options'],
|
|
28
37
|
},
|
|
29
|
-
], template: "<div [class]=\"headerClass()\">\n <ng-content select=\"c3-expansion-header\">\n <c3-expansion-header
|
|
30
|
-
}], ctorParameters: () => [
|
|
38
|
+
], template: "<div [class]=\"headerClass()\">\n <ng-content select=\"c3-expansion-header\">\n <c3-expansion-header />\n </ng-content>\n</div>\n\n<div *ngIf=\"isExpanded()\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
39
|
+
}], ctorParameters: () => [], propDecorators: { hostClass: [{
|
|
31
40
|
type: HostBinding,
|
|
32
41
|
args: ['class']
|
|
33
42
|
}] } });
|
|
34
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYzMtZXhwYW5zaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2MzLWNvbXBvbmVudHMvc3JjL2xpYi9jMy1leHBhbnNpb24vY29tcG9uZW50cy9jMy1leHBhbnNpb24vYzMtZXhwYW5zaW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2MzLWNvbXBvbmVudHMvc3JjL2xpYi9jMy1leHBhbnNpb24vY29tcG9uZW50cy9jMy1leHBhbnNpb24vYzMtZXhwYW5zaW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLE1BQU0sRUFDTixVQUFVLEVBQ1YsV0FBVyxFQUNYLE1BQU0sRUFDTixLQUFLLEVBQ0wsS0FBSyxHQUVOLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLG9EQUFvRCxDQUFDO0FBQzVGLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLHNEQUFzRCxDQUFDOzs7OztBQWFsRyxNQUFNLE9BQU8sb0JBQW9CO0lBSS9CLElBQTBCLFNBQVM7UUFDakMsT0FBTyxjQUFjLENBQUM7SUFDeEIsQ0FBQztJQU9EO1FBWk8sZ0JBQVcsR0FBRyxLQUFLLENBQVMscUJBQXFCLENBQUMsQ0FBQztRQUNuRCxlQUFVLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBTTFCLGdCQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ2pDLFdBQU0sR0FBRyxZQUFZLENBQUMsMEJBQTBCLENBQUMsQ0FBQztRQUtoRSxNQUFNLENBQUMsR0FBRyxFQUFFO1lBQ1YsSUFBSSxDQUFDLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxDQUFDO1lBRXRDLElBQUksQ0FBQyxNQUFNLEVBQUUsRUFBRSxZQUFZLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDO1FBQ25FLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsaUJBQWlCLEVBQUUsV0FBVyxFQUFFLENBQUM7SUFDeEMsQ0FBQztJQUVELFlBQVk7UUFDVixJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQyxDQUFDO0lBQzFDLENBQUM7OEdBM0JVLG9CQUFvQjtrR0FBcEIsb0JBQW9CLHVkQVNPLDBCQUEwQiw0SkNsQ2xFLDZNQVNBOzsyRkRnQmEsb0JBQW9CO2tCQVZoQyxTQUFTOytCQUNFLGNBQWMsa0JBRVI7d0JBQ2Q7NEJBQ0UsU0FBUyxFQUFFLHNCQUFzQjs0QkFDakMsTUFBTSxFQUFFLENBQUMsU0FBUyxDQUFDO3lCQUNwQjtxQkFDRjt3REFNeUIsU0FBUztzQkFBbEMsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBjb250ZW50Q2hpbGQsXG4gIGVmZmVjdCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIGluamVjdCxcbiAgaW5wdXQsXG4gIG1vZGVsLFxuICBPbkRlc3Ryb3ksXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQzNBdXRvQW5pbWF0ZURpcmVjdGl2ZSB9IGZyb20gJy4uLy4uLy4uL2MzLWF1dG8tYW5pbWF0ZS9jMy1hdXRvLWFuaW1hdGUuZGlyZWN0aXZlJztcbmltcG9ydCB7IEMzRXhwYW5zaW9uSGVhZGVyQ29tcG9uZW50IH0gZnJvbSAnLi4vYzMtZXhwYW5zaW9uLWhlYWRlci9jMy1leHBhbnNpb24taGVhZGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzMtZXhwYW5zaW9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2MzLWV4cGFuc2lvbi5jb21wb25lbnQuaHRtbCcsXG4gIGhvc3REaXJlY3RpdmVzOiBbXG4gICAge1xuICAgICAgZGlyZWN0aXZlOiBDM0F1dG9BbmltYXRlRGlyZWN0aXZlLFxuICAgICAgaW5wdXRzOiBbJ29wdGlvbnMnXSxcbiAgICB9LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBDM0V4cGFuc2lvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIHB1YmxpYyBoZWFkZXJDbGFzcyA9IGlucHV0PHN0cmluZz4oJ2MzLWV4cGFuc2lvbi1oZWFkZXInKTtcbiAgcHVibGljIGlzRXhwYW5kZWQgPSBtb2RlbDxib29sZWFuPihmYWxzZSk7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIGdldCBob3N0Q2xhc3MoKSB7XG4gICAgcmV0dXJuICdjMy1leHBhbnNpb24nO1xuICB9XG5cbiAgcHVibGljIHJlYWRvbmx5IF9lbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuICBwdWJsaWMgcmVhZG9ubHkgaGVhZGVyID0gY29udGVudENoaWxkKEMzRXhwYW5zaW9uSGVhZGVyQ29tcG9uZW50KTtcblxuICBwcml2YXRlIGV4cGFuZFN1YnNjaXB0aW9uOiBTdWJzY3JpcHRpb24gfCB1bmRlZmluZWQ7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgZWZmZWN0KCgpID0+IHtcbiAgICAgIHRoaXMuZXhwYW5kU3Vic2NpcHRpb24/LnVuc3Vic2NyaWJlKCk7XG5cbiAgICAgIHRoaXMuaGVhZGVyKCk/LnRvZ2dsZUV4cGFuZC5zdWJzY3JpYmUoKCkgPT4gdGhpcy50b2dnbGVFeHBhbmQoKSk7XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmV4cGFuZFN1YnNjaXB0aW9uPy51bnN1YnNjcmliZSgpO1xuICB9XG5cbiAgdG9nZ2xlRXhwYW5kKCkge1xuICAgIHRoaXMuaXNFeHBhbmRlZC5zZXQoIXRoaXMuaXNFeHBhbmRlZCgpKTtcbiAgfVxufVxuIiwiPGRpdiBbY2xhc3NdPVwiaGVhZGVyQ2xhc3MoKVwiPlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJjMy1leHBhbnNpb24taGVhZGVyXCI+XG4gICAgPGMzLWV4cGFuc2lvbi1oZWFkZXIgLz5cbiAgPC9uZy1jb250ZW50PlxuPC9kaXY+XG5cbjxkaXYgKm5nSWY9XCJpc0V4cGFuZGVkKClcIj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9kaXY+XG4iXX0=
|
package/esm2022/lib/c3-expansion/components/c3-expansion-header/c3-expansion-header.component.mjs
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import { Component, HostBinding, ViewEncapsulation, input, } from '@angular/core';
|
|
1
|
+
import { Component, HostBinding, ViewEncapsulation, input, output, } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
-
import * as i1 from "@angular/
|
|
4
|
-
import * as i2 from "@angular/material/
|
|
5
|
-
import * as i3 from "@angular/material/
|
|
6
|
-
import * as i4 from "@angular/material/tooltip";
|
|
3
|
+
import * as i1 from "@angular/material/button";
|
|
4
|
+
import * as i2 from "@angular/material/icon";
|
|
5
|
+
import * as i3 from "@angular/material/tooltip";
|
|
7
6
|
export class C3ExpansionHeaderComponent {
|
|
8
7
|
constructor() {
|
|
9
8
|
this.title = input();
|
|
10
|
-
this.
|
|
9
|
+
this.isExpanded = input(false);
|
|
10
|
+
this.toggleExpand = output();
|
|
11
11
|
}
|
|
12
12
|
get hostClass() {
|
|
13
13
|
return 'c3-expansion-header';
|
|
14
14
|
}
|
|
15
15
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
16
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<ng-content>\n @if(title()) {\n <h4 class=\"text-lg\">\n {{ title() }}\n </h4>\n }\n <button\n mat-icon-button\n (click)=\"toggleExpand.emit()\"\n [matTooltip]=\"isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n >\n <mat-icon>{{\n isExpanded() ? \"expand_less\" : \"expand_more\"\n }}</mat-icon>\n </button>\n</ng-content>\n", dependencies: [{ kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
17
17
|
}
|
|
18
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionHeaderComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
|
-
args: [{ selector: 'c3-expansion-header', encapsulation: ViewEncapsulation.None, template: "<ng-content>\n <h4 class=\"text-lg\"
|
|
20
|
+
args: [{ selector: 'c3-expansion-header', encapsulation: ViewEncapsulation.None, template: "<ng-content>\n @if(title()) {\n <h4 class=\"text-lg\">\n {{ title() }}\n </h4>\n }\n <button\n mat-icon-button\n (click)=\"toggleExpand.emit()\"\n [matTooltip]=\"isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n >\n <mat-icon>{{\n isExpanded() ? \"expand_less\" : \"expand_more\"\n }}</mat-icon>\n </button>\n</ng-content>\n" }]
|
|
21
21
|
}], propDecorators: { hostClass: [{
|
|
22
22
|
type: HostBinding,
|
|
23
23
|
args: ['class']
|
|
24
24
|
}] } });
|
|
25
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
25
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYzMtZXhwYW5zaW9uLWhlYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jMy1jb21wb25lbnRzL3NyYy9saWIvYzMtZXhwYW5zaW9uL2NvbXBvbmVudHMvYzMtZXhwYW5zaW9uLWhlYWRlci9jMy1leHBhbnNpb24taGVhZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2MzLWNvbXBvbmVudHMvc3JjL2xpYi9jMy1leHBhbnNpb24vY29tcG9uZW50cy9jMy1leHBhbnNpb24taGVhZGVyL2MzLWV4cGFuc2lvbi1oZWFkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxXQUFXLEVBQ1gsaUJBQWlCLEVBQ2pCLEtBQUssRUFDTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7Ozs7O0FBT3ZCLE1BQU0sT0FBTywwQkFBMEI7SUFMdkM7UUFNUyxVQUFLLEdBQUcsS0FBSyxFQUFVLENBQUM7UUFDeEIsZUFBVSxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztRQUNuQyxpQkFBWSxHQUFHLE1BQU0sRUFBRSxDQUFDO0tBS2hDO0lBSEMsSUFBMEIsU0FBUztRQUNqQyxPQUFPLHFCQUFxQixDQUFDO0lBQy9CLENBQUM7OEdBUFUsMEJBQTBCO2tHQUExQiwwQkFBMEIsc2FDYnZDLDhXQWdCQTs7MkZESGEsMEJBQTBCO2tCQUx0QyxTQUFTOytCQUNFLHFCQUFxQixpQkFFaEIsaUJBQWlCLENBQUMsSUFBSTs4QkFPWCxTQUFTO3NCQUFsQyxXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEhvc3RCaW5kaW5nLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgaW5wdXQsXG4gIG91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2MzLWV4cGFuc2lvbi1oZWFkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYzMtZXhwYW5zaW9uLWhlYWRlci5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIEMzRXhwYW5zaW9uSGVhZGVyQ29tcG9uZW50IHtcbiAgcHVibGljIHRpdGxlID0gaW5wdXQ8c3RyaW5nPigpO1xuICBwdWJsaWMgaXNFeHBhbmRlZCA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbiAgcHVibGljIHRvZ2dsZUV4cGFuZCA9IG91dHB1dCgpO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKSBnZXQgaG9zdENsYXNzKCkge1xuICAgIHJldHVybiAnYzMtZXhwYW5zaW9uLWhlYWRlcic7XG4gIH1cbn1cbiIsIjxuZy1jb250ZW50PlxuICBAaWYodGl0bGUoKSkge1xuICAgIDxoNCBjbGFzcz1cInRleHQtbGdcIj5cbiAgICAgIHt7IHRpdGxlKCkgfX1cbiAgICA8L2g0PlxuICB9XG4gIDxidXR0b25cbiAgICBtYXQtaWNvbi1idXR0b25cbiAgICAoY2xpY2spPVwidG9nZ2xlRXhwYW5kLmVtaXQoKVwiXG4gICAgW21hdFRvb2x0aXBdPVwiaXNFeHBhbmRlZCgpID8gJ1LDqWR1aXJlJyA6ICdEw6l2ZWxvcHBlcidcIlxuICA+XG4gICAgPG1hdC1pY29uPnt7XG4gICAgICBpc0V4cGFuZGVkKCkgPyBcImV4cGFuZF9sZXNzXCIgOiBcImV4cGFuZF9tb3JlXCJcbiAgICB9fTwvbWF0LWljb24+XG4gIDwvYnV0dG9uPlxuPC9uZy1jb250ZW50PlxuIl19
|
package/esm2022/lib/c3-flowing-menu/components/c3-flowing-menu/c3-flowing-menu.component.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, contentChildren, effect,
|
|
1
|
+
import { Component, contentChildren, effect, model, viewChild, ViewContainerRef, ViewEncapsulation, } from '@angular/core';
|
|
2
2
|
import { C3FlowingMenuItemComponent } from '../c3-flowing-menu-item/c3-flowing-menu-item.component';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "@angular/common";
|
|
@@ -8,7 +8,7 @@ export class C3FlowingMenuComponent {
|
|
|
8
8
|
this.targetContentRef = viewChild('targetContent', {
|
|
9
9
|
read: ViewContainerRef,
|
|
10
10
|
});
|
|
11
|
-
this.selectedIndex =
|
|
11
|
+
this.selectedIndex = model(0);
|
|
12
12
|
effect(() => {
|
|
13
13
|
if (this.targetContentRef()) {
|
|
14
14
|
this.updateView();
|
|
@@ -29,7 +29,7 @@ export class C3FlowingMenuComponent {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FlowingMenuComponent, selector: "c3-flowing-menu", host: { attributes: { "ngSkipHydration": "true" }, classAttribute: "c3-flowing-menu" }, queries: [{ propertyName: "c3FlowingMenu", predicate: C3FlowingMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "targetContentRef", first: true, predicate: ["targetContent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<aside class=\"menu\">\n @for(menu of c3FlowingMenu(); track menu; let i = $index) {\n @if(menu.menuTpl()) {\n <button (click)=\"selectMenu(i)\" [class.active]=\"i === selectedIndex()\">\n <ng-container *ngTemplateOutlet=\"menu.menuTpl()!\"></ng-container>\n </button>\n }\n }\n</aside>\n\n<section class=\"contenu\">\n <ng-container #targetContent></ng-container>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
32
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FlowingMenuComponent, selector: "c3-flowing-menu", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, host: { attributes: { "ngSkipHydration": "true" }, classAttribute: "c3-flowing-menu" }, queries: [{ propertyName: "c3FlowingMenu", predicate: C3FlowingMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "targetContentRef", first: true, predicate: ["targetContent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<aside class=\"menu\">\n @for(menu of c3FlowingMenu(); track menu; let i = $index) {\n @if(menu.menuTpl()) {\n <button (click)=\"selectMenu(i)\" [class.active]=\"i === selectedIndex()\">\n <ng-container *ngTemplateOutlet=\"menu.menuTpl()!\"></ng-container>\n </button>\n }\n }\n</aside>\n\n<section class=\"contenu\">\n <ng-container #targetContent></ng-container>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
33
33
|
}
|
|
34
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
@@ -38,4 +38,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
38
38
|
ngSkipHydration: 'true',
|
|
39
39
|
}, template: "<aside class=\"menu\">\n @for(menu of c3FlowingMenu(); track menu; let i = $index) {\n @if(menu.menuTpl()) {\n <button (click)=\"selectMenu(i)\" [class.active]=\"i === selectedIndex()\">\n <ng-container *ngTemplateOutlet=\"menu.menuTpl()!\"></ng-container>\n </button>\n }\n }\n</aside>\n\n<section class=\"contenu\">\n <ng-container #targetContent></ng-container>\n</section>\n" }]
|
|
40
40
|
}], ctorParameters: () => [] });
|
|
41
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
41
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYzMtZmxvd2luZy1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2MzLWNvbXBvbmVudHMvc3JjL2xpYi9jMy1mbG93aW5nLW1lbnUvY29tcG9uZW50cy9jMy1mbG93aW5nLW1lbnUvYzMtZmxvd2luZy1tZW51LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2MzLWNvbXBvbmVudHMvc3JjL2xpYi9jMy1mbG93aW5nLW1lbnUvY29tcG9uZW50cy9jMy1mbG93aW5nLW1lbnUvYzMtZmxvd2luZy1tZW51LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsZUFBZSxFQUNmLE1BQU0sRUFDTixLQUFLLEVBQ0wsU0FBUyxFQUNULGdCQUFnQixFQUNoQixpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sd0RBQXdELENBQUM7OztBQVdwRyxNQUFNLE9BQU8sc0JBQXNCO0lBUWpDO1FBUGdCLGtCQUFhLEdBQUcsZUFBZSxDQUFDLDBCQUEwQixDQUFDLENBQUM7UUFDM0QscUJBQWdCLEdBQUcsU0FBUyxDQUFDLGVBQWUsRUFBRTtZQUM3RCxJQUFJLEVBQUUsZ0JBQWdCO1NBQ3ZCLENBQUMsQ0FBQztRQUVhLGtCQUFhLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBR3ZDLE1BQU0sQ0FBQyxHQUFHLEVBQUU7WUFDVixJQUFJLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxFQUFFLENBQUM7Z0JBQzVCLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUNwQixDQUFDO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRU0sVUFBVSxDQUFDLEtBQWE7UUFDN0IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDOUIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFFTyxVQUFVO1FBQ2hCLElBQUksQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7WUFBRSxPQUFPO1FBRXJDLElBQUksQ0FBQyxnQkFBZ0IsRUFBRyxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2pDLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUMsQ0FBQztRQUNoRSxJQUFJLFlBQVksRUFBRSxDQUFDO1lBQ2pCLElBQUksQ0FBQyxnQkFBZ0IsRUFBRyxDQUFDLGtCQUFrQixDQUFDLFlBQVksQ0FBQyxVQUFVLEVBQUcsQ0FBQyxDQUFDO1FBQzFFLENBQUM7SUFDSCxDQUFDOzhHQTdCVSxzQkFBc0I7a0dBQXRCLHNCQUFzQiw0WEFDZSwwQkFBMEIsMklBRWxFLGdCQUFnQiw2Q0N2QjFCLHNaQWFBOzsyRkRPYSxzQkFBc0I7a0JBVGxDLFNBQVM7K0JBQ0UsaUJBQWlCLGlCQUVaLGlCQUFpQixDQUFDLElBQUksUUFDL0I7d0JBQ0osS0FBSyxFQUFFLGlCQUFpQjt3QkFDeEIsZUFBZSxFQUFFLE1BQU07cUJBQ3hCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBjb250ZW50Q2hpbGRyZW4sXG4gIGVmZmVjdCxcbiAgbW9kZWwsXG4gIHZpZXdDaGlsZCxcbiAgVmlld0NvbnRhaW5lclJlZixcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQzNGbG93aW5nTWVudUl0ZW1Db21wb25lbnQgfSBmcm9tICcuLi9jMy1mbG93aW5nLW1lbnUtaXRlbS9jMy1mbG93aW5nLW1lbnUtaXRlbS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjMy1mbG93aW5nLW1lbnUnLFxuICB0ZW1wbGF0ZVVybDogJy4vYzMtZmxvd2luZy1tZW51LmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgaG9zdDoge1xuICAgIGNsYXNzOiAnYzMtZmxvd2luZy1tZW51JyxcbiAgICBuZ1NraXBIeWRyYXRpb246ICd0cnVlJyxcbiAgfSxcbn0pXG5leHBvcnQgY2xhc3MgQzNGbG93aW5nTWVudUNvbXBvbmVudCB7XG4gIHB1YmxpYyByZWFkb25seSBjM0Zsb3dpbmdNZW51ID0gY29udGVudENoaWxkcmVuKEMzRmxvd2luZ01lbnVJdGVtQ29tcG9uZW50KTtcbiAgcHJpdmF0ZSByZWFkb25seSB0YXJnZXRDb250ZW50UmVmID0gdmlld0NoaWxkKCd0YXJnZXRDb250ZW50Jywge1xuICAgIHJlYWQ6IFZpZXdDb250YWluZXJSZWYsXG4gIH0pO1xuXG4gIHB1YmxpYyByZWFkb25seSBzZWxlY3RlZEluZGV4ID0gbW9kZWwoMCk7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgZWZmZWN0KCgpID0+IHtcbiAgICAgIGlmICh0aGlzLnRhcmdldENvbnRlbnRSZWYoKSkge1xuICAgICAgICB0aGlzLnVwZGF0ZVZpZXcoKTtcbiAgICAgIH1cbiAgICB9KTtcbiAgfVxuXG4gIHB1YmxpYyBzZWxlY3RNZW51KGluZGV4OiBudW1iZXIpIHtcbiAgICB0aGlzLnNlbGVjdGVkSW5kZXguc2V0KGluZGV4KTtcbiAgICB0aGlzLnVwZGF0ZVZpZXcoKTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlVmlldygpIHtcbiAgICBpZiAoIXRoaXMudGFyZ2V0Q29udGVudFJlZigpKSByZXR1cm47XG5cbiAgICB0aGlzLnRhcmdldENvbnRlbnRSZWYoKSEuY2xlYXIoKTtcbiAgICBjb25zdCBzZWxlY3RlZE1lbnUgPSB0aGlzLmMzRmxvd2luZ01lbnUoKVt0aGlzLnNlbGVjdGVkSW5kZXgoKV07XG4gICAgaWYgKHNlbGVjdGVkTWVudSkge1xuICAgICAgdGhpcy50YXJnZXRDb250ZW50UmVmKCkhLmNyZWF0ZUVtYmVkZGVkVmlldyhzZWxlY3RlZE1lbnUuY29udGVudFRwbCgpISk7XG4gICAgfVxuICB9XG59XG4iLCI8YXNpZGUgY2xhc3M9XCJtZW51XCI+XG4gIEBmb3IobWVudSBvZiBjM0Zsb3dpbmdNZW51KCk7IHRyYWNrIG1lbnU7IGxldCBpID0gJGluZGV4KSB7XG4gICAgQGlmKG1lbnUubWVudVRwbCgpKSB7XG4gICAgICA8YnV0dG9uIChjbGljayk9XCJzZWxlY3RNZW51KGkpXCIgW2NsYXNzLmFjdGl2ZV09XCJpID09PSBzZWxlY3RlZEluZGV4KClcIj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cIm1lbnUubWVudVRwbCgpIVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgPC9idXR0b24+XG4gICAgfVxuICB9XG48L2FzaWRlPlxuXG48c2VjdGlvbiBjbGFzcz1cImNvbnRlbnVcIj5cbiAgPG5nLWNvbnRhaW5lciAjdGFyZ2V0Q29udGVudD48L25nLWNvbnRhaW5lcj5cbjwvc2VjdGlvbj5cbiJdfQ==
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, signal, ViewContainerRef, inject, Injector, effect, Injectable, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, input, output, viewChild, computed, HostBinding, model, contentChildren } from '@angular/core';
|
|
2
|
+
import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, signal, ViewContainerRef, inject, Injector, effect, Injectable, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, input, output, viewChild, computed, HostBinding, model, ElementRef, contentChild, contentChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2$1 from '@angular/forms';
|
|
@@ -18,7 +18,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
|
|
|
18
18
|
import * as i6 from '@angular/material/input';
|
|
19
19
|
import { MatInputModule } from '@angular/material/input';
|
|
20
20
|
import * as i7 from '@angular/cdk/text-field';
|
|
21
|
-
import * as
|
|
21
|
+
import * as i2$2 from '@angular/material/icon';
|
|
22
22
|
import { MatIconModule } from '@angular/material/icon';
|
|
23
23
|
import * as i5$1 from '@angular/material/toolbar';
|
|
24
24
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
@@ -26,15 +26,15 @@ import 'reflect-metadata';
|
|
|
26
26
|
import * as i1$4 from '@angular/common/http';
|
|
27
27
|
import { provideHttpClient, withInterceptorsFromDi, HttpClient } from '@angular/common/http';
|
|
28
28
|
import * as i1$3 from '@angular/platform-browser';
|
|
29
|
-
import * as i3 from '@angular/material/core';
|
|
29
|
+
import * as i3$1 from '@angular/material/core';
|
|
30
30
|
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
|
31
31
|
import * as i5$2 from '@angular/material/menu';
|
|
32
32
|
import { MatMenuModule } from '@angular/material/menu';
|
|
33
|
-
import * as
|
|
33
|
+
import * as i3 from '@angular/material/tooltip';
|
|
34
34
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
35
35
|
import autoAnimate from '@formkit/auto-animate';
|
|
36
36
|
import { FlatTreeControl } from '@angular/cdk/tree';
|
|
37
|
-
import * as i4
|
|
37
|
+
import * as i4 from '@angular/material/progress-spinner';
|
|
38
38
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
39
39
|
import * as i1$5 from '@angular/material/tree';
|
|
40
40
|
import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
|
|
@@ -399,7 +399,7 @@ class C3DialogEmbedChildComponent {
|
|
|
399
399
|
<div class="dialog-content">
|
|
400
400
|
<ng-template #target></ng-template>
|
|
401
401
|
</div>
|
|
402
|
-
</mat-dialog-content>`, isInline: true, styles: ["mat-dialog-content{display:flex;flex-direction:column;height:100%}mat-dialog-content .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}mat-dialog-content .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}mat-dialog-content .mat-toolbar span{color:inherit}mat-dialog-content .spacer{flex:1 1 auto;min-width:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type:
|
|
402
|
+
</mat-dialog-content>`, isInline: true, styles: ["mat-dialog-content{display:flex;flex-direction:column;height:100%}mat-dialog-content .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}mat-dialog-content .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}mat-dialog-content .mat-toolbar span{color:inherit}mat-dialog-content .spacer{flex:1 1 auto;min-width:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
|
|
403
403
|
}
|
|
404
404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogEmbedChildComponent, decorators: [{
|
|
405
405
|
type: Component,
|
|
@@ -1231,7 +1231,7 @@ class C3FileDisplayCardComponent {
|
|
|
1231
1231
|
return file ? this.displayFn()(file) : '';
|
|
1232
1232
|
}
|
|
1233
1233
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayCardComponent, isStandalone: true, selector: "c3-file-display-card", inputs: { fileObjectUrl: { classPropertyName: "fileObjectUrl", publicName: "fileObjectUrl", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<button\n class=\"file-card border\"\n [class.size-16]=\"size() === '16'\"\n [class.size-32]=\"size() === '32'\"\n [class.size-64]=\"size() === '64'\"\n [class.size-128]=\"size() === '128'\"\n [class.size-256]=\"size() === '256'\"\n>\n @if(deletable()) {\n <div class=\"actions\">\n <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n } @if(fileObjectUrl()) {\n @switch (getFileType()) { @case ('image') {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n [alt]=\"getFileName()\"\n />\n } @case ('application') {\n <mat-icon> file-pdf-box </mat-icon>\n } @case ('video') {\n <mat-icon> video </mat-icon>\n }\n }\n\n <div class=\"informations flex justify-between items-center\">\n <span class=\"text-xs text-white\">\n {{ getDisplayName() }}\n </span>\n </div>\n }\n</button>\n", styles: [":host{display:block}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:auto}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type:
|
|
1234
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayCardComponent, isStandalone: true, selector: "c3-file-display-card", inputs: { fileObjectUrl: { classPropertyName: "fileObjectUrl", publicName: "fileObjectUrl", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<button\n class=\"file-card border\"\n [class.size-16]=\"size() === '16'\"\n [class.size-32]=\"size() === '32'\"\n [class.size-64]=\"size() === '64'\"\n [class.size-128]=\"size() === '128'\"\n [class.size-256]=\"size() === '256'\"\n>\n @if(deletable()) {\n <div class=\"actions\">\n <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n } @if(fileObjectUrl()) {\n @switch (getFileType()) { @case ('image') {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n [alt]=\"getFileName()\"\n />\n } @case ('application') {\n <mat-icon> file-pdf-box </mat-icon>\n } @case ('video') {\n <mat-icon> video </mat-icon>\n }\n }\n\n <div class=\"informations flex justify-between items-center\">\n <span class=\"text-xs text-white\">\n {{ getDisplayName() }}\n </span>\n </div>\n }\n</button>\n", styles: [":host{display:block}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:auto}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1235
1235
|
}
|
|
1236
1236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayCardComponent, decorators: [{
|
|
1237
1237
|
type: Component,
|
|
@@ -1317,7 +1317,7 @@ class C3FileDisplayIconComponent {
|
|
|
1317
1317
|
});
|
|
1318
1318
|
}
|
|
1319
1319
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1320
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.1", type: C3FileDisplayIconComponent, isStandalone: true, selector: "c3-file-display-icon", inputs: { fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-icon [ngClass]=\"color()\">{{ displayedIcon() }}</mat-icon>\n", styles: [":host{display:block}:host .text-primary{color:var(--primary-color)}:host .text-secondary{color:var(--secondary-color)}:host .text-success{color:var(--success-color)}:host .text-gray{color:var(--gray-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type:
|
|
1320
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.1", type: C3FileDisplayIconComponent, isStandalone: true, selector: "c3-file-display-icon", inputs: { fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-icon [ngClass]=\"color()\">{{ displayedIcon() }}</mat-icon>\n", styles: [":host{display:block}:host .text-primary{color:var(--primary-color)}:host .text-secondary{color:var(--secondary-color)}:host .text-success{color:var(--success-color)}:host .text-gray{color:var(--gray-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1321
1321
|
}
|
|
1322
1322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayIconComponent, decorators: [{
|
|
1323
1323
|
type: Component,
|
|
@@ -1353,7 +1353,7 @@ class C3FileDisplayListComponent {
|
|
|
1353
1353
|
this.dialog()?.openDialog();
|
|
1354
1354
|
}
|
|
1355
1355
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1356
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayListComponent, isStandalone: true, selector: "c3-file-display-list", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- header -->\n<div class=\"header\">\n <div class=\"title full\">\n <span>Nom</span>\n </div>\n <div class=\"title\">\n <span>Date d'ajout</span>\n </div>\n <div class=\"icon\">\n <mat-icon>more_vert</mat-icon>\n </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n <div class=\"file-display-list\">\n @for (file of files(); track $index) {\n <button>\n <div class=\"icon\">\n <c3-file-display-icon [fileType]=\"file.type\" />\n </div>\n <div class=\"name\">\n <span>{{ displayFn()(file) }}</span>\n </div>\n <div class=\"date-label\">\n <span>{{\n file.lastModified ? (file.lastModified | date : \"medium\") : \"-\"\n }}</span>\n </div>\n <button mat-icon-button>\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"openDialog($event, $index)\">\n Ouvrir\n </button>\n @if (deletable()) {\n <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n }\n </mat-menu>\n </button>\n }\n </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .header{display:flex;align-items:center;padding:0 .5rem;border-bottom:1px solid var(--mat-divider-color)}:host .header .title{flex-basis:304px;width:304px;font-size:1.5rem;font-weight:700}:host .header .title.full{flex:auto}:host .header .icon{flex-basis:40px;width:40px}:host .file-display-list{display:flex;flex-direction:column}:host .file-display-list>button{display:flex;flex-direction:row;height:3rem;align-items:center;border-bottom:1px solid var(--mat-divider-color);background-color:var(--mdc-protected-button-container-color);text-align:start;padding:0 .5rem}:host .file-display-list>button:hover{background-color:var(--background-hover)}:host .file-display-list>button .icon{flex-basis:56px;width:56px}:host .file-display-list>button .name{flex:auto;flex-basis:304px;width:304px}:host .file-display-list>button .date-label{flex-basis:304px;width:304px}\n"], dependencies: [{ kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }, { kind: "component", type: C3FileDisplayIconComponent, selector: "c3-file-display-icon", inputs: ["fileType"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type:
|
|
1356
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayListComponent, isStandalone: true, selector: "c3-file-display-list", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- header -->\n<div class=\"header\">\n <div class=\"title full\">\n <span>Nom</span>\n </div>\n <div class=\"title\">\n <span>Date d'ajout</span>\n </div>\n <div class=\"icon\">\n <mat-icon>more_vert</mat-icon>\n </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n <div class=\"file-display-list\">\n @for (file of files(); track $index) {\n <button>\n <div class=\"icon\">\n <c3-file-display-icon [fileType]=\"file.type\" />\n </div>\n <div class=\"name\">\n <span>{{ displayFn()(file) }}</span>\n </div>\n <div class=\"date-label\">\n <span>{{\n file.lastModified ? (file.lastModified | date : \"medium\") : \"-\"\n }}</span>\n </div>\n <button mat-icon-button>\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"openDialog($event, $index)\">\n Ouvrir\n </button>\n @if (deletable()) {\n <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n }\n </mat-menu>\n </button>\n }\n </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .header{display:flex;align-items:center;padding:0 .5rem;border-bottom:1px solid var(--mat-divider-color)}:host .header .title{flex-basis:304px;width:304px;font-size:1.5rem;font-weight:700}:host .header .title.full{flex:auto}:host .header .icon{flex-basis:40px;width:40px}:host .file-display-list{display:flex;flex-direction:column}:host .file-display-list>button{display:flex;flex-direction:row;height:3rem;align-items:center;border-bottom:1px solid var(--mat-divider-color);background-color:var(--mdc-protected-button-container-color);text-align:start;padding:0 .5rem}:host .file-display-list>button:hover{background-color:var(--background-hover)}:host .file-display-list>button .icon{flex-basis:56px;width:56px}:host .file-display-list>button .name{flex:auto;flex-basis:304px;width:304px}:host .file-display-list>button .date-label{flex-basis:304px;width:304px}\n"], dependencies: [{ kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }, { kind: "component", type: C3FileDisplayIconComponent, selector: "c3-file-display-icon", inputs: ["fileType"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
|
|
1357
1357
|
}
|
|
1358
1358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayListComponent, decorators: [{
|
|
1359
1359
|
type: Component,
|
|
@@ -1407,17 +1407,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
1407
1407
|
class C3ExpansionHeaderComponent {
|
|
1408
1408
|
constructor() {
|
|
1409
1409
|
this.title = input();
|
|
1410
|
-
this.
|
|
1410
|
+
this.isExpanded = input(false);
|
|
1411
|
+
this.toggleExpand = output();
|
|
1411
1412
|
}
|
|
1412
1413
|
get hostClass() {
|
|
1413
1414
|
return 'c3-expansion-header';
|
|
1414
1415
|
}
|
|
1415
1416
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1416
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
1417
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleExpand: "toggleExpand" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<ng-content>\n @if(title()) {\n <h4 class=\"text-lg\">\n {{ title() }}\n </h4>\n }\n <button\n mat-icon-button\n (click)=\"toggleExpand.emit()\"\n [matTooltip]=\"isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n >\n <mat-icon>{{\n isExpanded() ? \"expand_less\" : \"expand_more\"\n }}</mat-icon>\n </button>\n</ng-content>\n", dependencies: [{ kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1417
1418
|
}
|
|
1418
1419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionHeaderComponent, decorators: [{
|
|
1419
1420
|
type: Component,
|
|
1420
|
-
args: [{ selector: 'c3-expansion-header', encapsulation: ViewEncapsulation.None, template: "<ng-content>\n <h4 class=\"text-lg\"
|
|
1421
|
+
args: [{ selector: 'c3-expansion-header', encapsulation: ViewEncapsulation.None, template: "<ng-content>\n @if(title()) {\n <h4 class=\"text-lg\">\n {{ title() }}\n </h4>\n }\n <button\n mat-icon-button\n (click)=\"toggleExpand.emit()\"\n [matTooltip]=\"isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n >\n <mat-icon>{{\n isExpanded() ? \"expand_less\" : \"expand_more\"\n }}</mat-icon>\n </button>\n</ng-content>\n" }]
|
|
1421
1422
|
}], propDecorators: { hostClass: [{
|
|
1422
1423
|
type: HostBinding,
|
|
1423
1424
|
args: ['class']
|
|
@@ -1447,16 +1448,24 @@ class C3ExpansionComponent {
|
|
|
1447
1448
|
get hostClass() {
|
|
1448
1449
|
return 'c3-expansion';
|
|
1449
1450
|
}
|
|
1450
|
-
constructor(
|
|
1451
|
-
this._elementRef = _elementRef;
|
|
1451
|
+
constructor() {
|
|
1452
1452
|
this.headerClass = input('c3-expansion-header');
|
|
1453
1453
|
this.isExpanded = model(false);
|
|
1454
|
+
this._elementRef = inject(ElementRef);
|
|
1455
|
+
this.header = contentChild(C3ExpansionHeaderComponent);
|
|
1456
|
+
effect(() => {
|
|
1457
|
+
this.expandSubsciption?.unsubscribe();
|
|
1458
|
+
this.header()?.toggleExpand.subscribe(() => this.toggleExpand());
|
|
1459
|
+
});
|
|
1460
|
+
}
|
|
1461
|
+
ngOnDestroy() {
|
|
1462
|
+
this.expandSubsciption?.unsubscribe();
|
|
1454
1463
|
}
|
|
1455
1464
|
toggleExpand() {
|
|
1456
1465
|
this.isExpanded.set(!this.isExpanded());
|
|
1457
1466
|
}
|
|
1458
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, deps: [
|
|
1459
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
1467
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1468
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.1", type: C3ExpansionComponent, selector: "c3-expansion", inputs: { headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "header", first: true, predicate: C3ExpansionHeaderComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: C3AutoAnimateDirective, inputs: ["options", "options"] }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n <ng-content select=\"c3-expansion-header\">\n <c3-expansion-header />\n </ng-content>\n</div>\n\n<div *ngIf=\"isExpanded()\">\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: ["title", "isExpanded"], outputs: ["toggleExpand"] }] }); }
|
|
1460
1469
|
}
|
|
1461
1470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, decorators: [{
|
|
1462
1471
|
type: Component,
|
|
@@ -1465,8 +1474,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
1465
1474
|
directive: C3AutoAnimateDirective,
|
|
1466
1475
|
inputs: ['options'],
|
|
1467
1476
|
},
|
|
1468
|
-
], template: "<div [class]=\"headerClass()\">\n <ng-content select=\"c3-expansion-header\">\n <c3-expansion-header
|
|
1469
|
-
}], ctorParameters: () => [
|
|
1477
|
+
], template: "<div [class]=\"headerClass()\">\n <ng-content select=\"c3-expansion-header\">\n <c3-expansion-header />\n </ng-content>\n</div>\n\n<div *ngIf=\"isExpanded()\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
1478
|
+
}], ctorParameters: () => [], propDecorators: { hostClass: [{
|
|
1470
1479
|
type: HostBinding,
|
|
1471
1480
|
args: ['class']
|
|
1472
1481
|
}] } });
|
|
@@ -1571,7 +1580,7 @@ class C3TreeComponent {
|
|
|
1571
1580
|
});
|
|
1572
1581
|
}
|
|
1573
1582
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1574
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3TreeComponent, isStandalone: true, selector: "c3-tree", inputs: { treeData: { classPropertyName: "treeData", publicName: "treeData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeData: "treeDataChange", isLoading: "isLoadingChange", treeDataSelected: "treeDataSelected" }, ngImport: i0, template: "@if(isLoading()) {\r\n<div class=\"c3-tree-loader\">\r\n <mat-spinner diameter=\"50\"></mat-spinner>\r\n</div>\r\n}\r\n\r\n<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding class=\"children\">\r\n <button mat-ripple (click)=\"treeDataSelected.emit(node)\">\r\n {{ node.name }}\r\n </button>\r\n </mat-tree-node>\r\n <mat-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n matTreeNodePadding\r\n class=\"has-children\"\r\n >\r\n <button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n </mat-icon>\r\n </button>\r\n <div class=\"mat-tree-node-content\">\r\n <ng-content>\r\n <span>{{ node.name }}</span>\r\n </ng-content>\r\n </div>\r\n </mat-tree-node>\r\n</mat-tree>\r\n", styles: [":host{display:block;width:100%;position:relative;min-height:100%;padding:4px 0}.c3-tree-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}mat-tree{width:100%;height:100%;background-color:transparent;border:1px solid var(--mat-divider-color);border-radius:4px;overflow:auto}mat-tree mat-tree-node{display:flex;align-items:center;justify-content:start;gap:1rem}mat-tree mat-tree-node.has-children>button{height:32px;width:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:1px solid transparent;margin:.5rem}mat-tree mat-tree-node.has-children>button:hover{border-color:var(--mat-divider-color)}mat-tree mat-tree-node.has-children:hover{background-color:var(--background-hover)}mat-tree mat-tree-node.has-children .mat-tree-node-content{padding-right:.25rem;display:flex;justify-content:space-between;align-items:center;width:100%}mat-tree mat-tree-node.children button{width:100%;border-radius:.25rem;padding:0 1rem;height:2rem;text-align:left}mat-tree mat-tree-node.children button:hover{background-color:var(--background-hover)}mat-tree mat-tree-node:hover{background-color:var(--background-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1$5.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1$5.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1$5.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1$5.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1$5.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type:
|
|
1583
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3TreeComponent, isStandalone: true, selector: "c3-tree", inputs: { treeData: { classPropertyName: "treeData", publicName: "treeData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeData: "treeDataChange", isLoading: "isLoadingChange", treeDataSelected: "treeDataSelected" }, ngImport: i0, template: "@if(isLoading()) {\r\n<div class=\"c3-tree-loader\">\r\n <mat-spinner diameter=\"50\"></mat-spinner>\r\n</div>\r\n}\r\n\r\n<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding class=\"children\">\r\n <button mat-ripple (click)=\"treeDataSelected.emit(node)\">\r\n {{ node.name }}\r\n </button>\r\n </mat-tree-node>\r\n <mat-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n matTreeNodePadding\r\n class=\"has-children\"\r\n >\r\n <button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n </mat-icon>\r\n </button>\r\n <div class=\"mat-tree-node-content\">\r\n <ng-content>\r\n <span>{{ node.name }}</span>\r\n </ng-content>\r\n </div>\r\n </mat-tree-node>\r\n</mat-tree>\r\n", styles: [":host{display:block;width:100%;position:relative;min-height:100%;padding:4px 0}.c3-tree-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}mat-tree{width:100%;height:100%;background-color:transparent;border:1px solid var(--mat-divider-color);border-radius:4px;overflow:auto}mat-tree mat-tree-node{display:flex;align-items:center;justify-content:start;gap:1rem}mat-tree mat-tree-node.has-children>button{height:32px;width:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:1px solid transparent;margin:.5rem}mat-tree mat-tree-node.has-children>button:hover{border-color:var(--mat-divider-color)}mat-tree mat-tree-node.has-children:hover{background-color:var(--background-hover)}mat-tree mat-tree-node.has-children .mat-tree-node-content{padding-right:.25rem;display:flex;justify-content:space-between;align-items:center;width:100%}mat-tree mat-tree-node.children button{width:100%;border-radius:.25rem;padding:0 1rem;height:2rem;text-align:left}mat-tree mat-tree-node.children button:hover{background-color:var(--background-hover)}mat-tree mat-tree-node:hover{background-color:var(--background-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1$5.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1$5.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1$5.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1$5.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1$5.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
1575
1584
|
}
|
|
1576
1585
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TreeComponent, decorators: [{
|
|
1577
1586
|
type: Component,
|
|
@@ -1608,7 +1617,7 @@ class C3FlowingMenuComponent {
|
|
|
1608
1617
|
this.targetContentRef = viewChild('targetContent', {
|
|
1609
1618
|
read: ViewContainerRef,
|
|
1610
1619
|
});
|
|
1611
|
-
this.selectedIndex =
|
|
1620
|
+
this.selectedIndex = model(0);
|
|
1612
1621
|
effect(() => {
|
|
1613
1622
|
if (this.targetContentRef()) {
|
|
1614
1623
|
this.updateView();
|
|
@@ -1629,7 +1638,7 @@ class C3FlowingMenuComponent {
|
|
|
1629
1638
|
}
|
|
1630
1639
|
}
|
|
1631
1640
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1632
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FlowingMenuComponent, selector: "c3-flowing-menu", host: { attributes: { "ngSkipHydration": "true" }, classAttribute: "c3-flowing-menu" }, queries: [{ propertyName: "c3FlowingMenu", predicate: C3FlowingMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "targetContentRef", first: true, predicate: ["targetContent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<aside class=\"menu\">\n @for(menu of c3FlowingMenu(); track menu; let i = $index) {\n @if(menu.menuTpl()) {\n <button (click)=\"selectMenu(i)\" [class.active]=\"i === selectedIndex()\">\n <ng-container *ngTemplateOutlet=\"menu.menuTpl()!\"></ng-container>\n </button>\n }\n }\n</aside>\n\n<section class=\"contenu\">\n <ng-container #targetContent></ng-container>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1641
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FlowingMenuComponent, selector: "c3-flowing-menu", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, host: { attributes: { "ngSkipHydration": "true" }, classAttribute: "c3-flowing-menu" }, queries: [{ propertyName: "c3FlowingMenu", predicate: C3FlowingMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "targetContentRef", first: true, predicate: ["targetContent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<aside class=\"menu\">\n @for(menu of c3FlowingMenu(); track menu; let i = $index) {\n @if(menu.menuTpl()) {\n <button (click)=\"selectMenu(i)\" [class.active]=\"i === selectedIndex()\">\n <ng-container *ngTemplateOutlet=\"menu.menuTpl()!\"></ng-container>\n </button>\n }\n }\n</aside>\n\n<section class=\"contenu\">\n <ng-container #targetContent></ng-container>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1633
1642
|
}
|
|
1634
1643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FlowingMenuComponent, decorators: [{
|
|
1635
1644
|
type: Component,
|