@sd-angular/core 19.0.0-beta.72 → 19.0.0-beta.73
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/components/chart/index.d.ts +4 -0
- package/components/chart/src/bar-chart.component.d.ts +19 -0
- package/components/chart/src/doughnut-chart.component.d.ts +16 -0
- package/components/chart/src/line-chart.component.d.ts +16 -0
- package/components/chart/src/pie-chart.component.d.ts +16 -0
- package/components/index.d.ts +1 -0
- package/components/section/src/section.component.d.ts +3 -3
- package/components/workflow/src/models/form-generic-expression.model.d.ts +1 -0
- package/components/workflow/src/pipes/html.pipe.d.ts +4 -4
- package/fesm2022/sd-angular-core-components-chart.mjs +284 -0
- package/fesm2022/sd-angular-core-components-chart.mjs.map +1 -0
- package/fesm2022/sd-angular-core-components-section.mjs +5 -5
- package/fesm2022/sd-angular-core-components-section.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-side-drawer.mjs +2 -2
- package/fesm2022/sd-angular-core-components-side-drawer.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-workflow.mjs +123 -116
- package/fesm2022/sd-angular-core-components-workflow.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components.mjs +1 -0
- package/fesm2022/sd-angular-core-components.mjs.map +1 -1
- package/fesm2022/sd-angular-core-utilities-extensions.mjs +27 -35
- package/fesm2022/sd-angular-core-utilities-extensions.mjs.map +1 -1
- package/package.json +85 -80
- package/sd-angular-core-19.0.0-beta.73.tgz +0 -0
- package/sd-angular-core-19.0.0-beta.72.tgz +0 -0
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ElementRef, OnDestroy, OnInit } from '@angular/core';
|
|
2
|
+
import { Chart, ChartData, Plugin } from 'chart.js';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class SdBarChartComponent implements OnInit, OnDestroy {
|
|
5
|
+
canvas: ElementRef<HTMLCanvasElement>;
|
|
6
|
+
data: import("@angular/core").InputSignal<ChartData<"bar", (number | [number, number] | null)[], unknown>>;
|
|
7
|
+
options: import("@angular/core").InputSignal<import("node_modules/chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<"bar"> & import("chart.js").ElementChartOptions<"bar"> & import("chart.js").PluginChartOptions<"bar"> & import("chart.js").DatasetChartOptions<"bar"> & import("chart.js").ScaleChartOptions<"bar"> & import("chart.js").BarControllerChartOptions> | undefined>;
|
|
8
|
+
plugins: import("@angular/core").InputSignal<Plugin<"bar", import("node_modules/chart.js/dist/types/basic").AnyObject>[]>;
|
|
9
|
+
scrollable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
10
|
+
minWidth: import("@angular/core").InputSignalWithTransform<number, unknown>;
|
|
11
|
+
chart: Chart<'bar'> | undefined;
|
|
12
|
+
constructor();
|
|
13
|
+
ngOnInit(): void;
|
|
14
|
+
ngOnDestroy(): void;
|
|
15
|
+
getMinWidth(): number;
|
|
16
|
+
private initChart;
|
|
17
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SdBarChartComponent, never>;
|
|
18
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdBarChartComponent, "sd-bar-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
19
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ElementRef, OnDestroy, OnInit } from '@angular/core';
|
|
2
|
+
import { Chart, ChartData, Plugin } from 'chart.js';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class SdDoughnutChartComponent implements OnInit, OnDestroy {
|
|
5
|
+
canvas: ElementRef<HTMLCanvasElement>;
|
|
6
|
+
data: import("@angular/core").InputSignal<ChartData<"doughnut", number[], unknown>>;
|
|
7
|
+
options: import("@angular/core").InputSignal<import("node_modules/chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<"doughnut"> & import("chart.js").ElementChartOptions<"doughnut"> & import("chart.js").PluginChartOptions<"doughnut"> & import("chart.js").DatasetChartOptions<"doughnut"> & import("chart.js").ScaleChartOptions<"doughnut"> & import("chart.js").DoughnutControllerChartOptions> | undefined>;
|
|
8
|
+
plugins: import("@angular/core").InputSignal<Plugin<"doughnut", import("node_modules/chart.js/dist/types/basic").AnyObject>[]>;
|
|
9
|
+
chart: Chart<'doughnut'> | undefined;
|
|
10
|
+
constructor();
|
|
11
|
+
ngOnInit(): void;
|
|
12
|
+
ngOnDestroy(): void;
|
|
13
|
+
private initChart;
|
|
14
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SdDoughnutChartComponent, never>;
|
|
15
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdDoughnutChartComponent, "sd-doughnut-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
16
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ElementRef, OnDestroy, OnInit } from '@angular/core';
|
|
2
|
+
import { Chart, ChartData, Plugin } from 'chart.js';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class SdLineChartComponent implements OnInit, OnDestroy {
|
|
5
|
+
canvas: ElementRef<HTMLCanvasElement>;
|
|
6
|
+
data: import("@angular/core").InputSignal<ChartData<"line", (number | import("chart.js").Point | null)[], unknown>>;
|
|
7
|
+
options: import("@angular/core").InputSignal<import("node_modules/chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<"line"> & import("chart.js").ElementChartOptions<"line"> & import("chart.js").PluginChartOptions<"line"> & import("chart.js").DatasetChartOptions<"line"> & import("chart.js").ScaleChartOptions<"line"> & import("chart.js").LineControllerChartOptions> | undefined>;
|
|
8
|
+
plugins: import("@angular/core").InputSignal<Plugin<"line", import("node_modules/chart.js/dist/types/basic").AnyObject>[]>;
|
|
9
|
+
chart: Chart<'line'> | undefined;
|
|
10
|
+
constructor();
|
|
11
|
+
ngOnInit(): void;
|
|
12
|
+
ngOnDestroy(): void;
|
|
13
|
+
private initChart;
|
|
14
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SdLineChartComponent, never>;
|
|
15
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdLineChartComponent, "sd-line-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
16
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ElementRef, OnDestroy, OnInit } from '@angular/core';
|
|
2
|
+
import { Chart, ChartData, Plugin } from 'chart.js';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class SdPieChartComponent implements OnInit, OnDestroy {
|
|
5
|
+
canvas: ElementRef<HTMLCanvasElement>;
|
|
6
|
+
data: import("@angular/core").InputSignal<ChartData<"pie", number[], unknown>>;
|
|
7
|
+
options: import("@angular/core").InputSignal<import("node_modules/chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<"pie"> & import("chart.js").ElementChartOptions<"pie"> & import("chart.js").PluginChartOptions<"pie"> & import("chart.js").DatasetChartOptions<"pie"> & import("chart.js").ScaleChartOptions<"pie"> & import("chart.js").DoughnutControllerChartOptions> | undefined>;
|
|
8
|
+
plugins: import("@angular/core").InputSignal<Plugin<"pie", import("node_modules/chart.js/dist/types/basic").AnyObject>[]>;
|
|
9
|
+
chart: Chart<'pie'> | undefined;
|
|
10
|
+
constructor();
|
|
11
|
+
ngOnInit(): void;
|
|
12
|
+
ngOnDestroy(): void;
|
|
13
|
+
private initChart;
|
|
14
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SdPieChartComponent, never>;
|
|
15
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdPieChartComponent, "sd-pie-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
16
|
+
}
|
package/components/index.d.ts
CHANGED
|
@@ -17,3 +17,4 @@ export * from '@sd-angular/core/components/document-builder';
|
|
|
17
17
|
export * from '@sd-angular/core/components/mini-editor';
|
|
18
18
|
export * from '@sd-angular/core/components/view';
|
|
19
19
|
export * from '@sd-angular/core/components/code-editor';
|
|
20
|
+
export * from '@sd-angular/core/components/chart';
|
|
@@ -3,9 +3,9 @@ import { SdColor } from '@sd-angular/core/utilities';
|
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export declare class SdSection extends SdBaseSecureComponent {
|
|
5
5
|
#private;
|
|
6
|
-
title: import("@angular/core").InputSignal<string | null>;
|
|
7
|
-
subTitle: import("@angular/core").InputSignal<string>;
|
|
8
|
-
icon: import("@angular/core").InputSignal<string | null>;
|
|
6
|
+
title: import("@angular/core").InputSignal<string | null | undefined>;
|
|
7
|
+
subTitle: import("@angular/core").InputSignal<string | null | undefined>;
|
|
8
|
+
icon: import("@angular/core").InputSignal<string | null | undefined>;
|
|
9
9
|
iconColor: import("@angular/core").InputSignal<SdColor>;
|
|
10
10
|
collapsed: import("@angular/core").ModelSignal<boolean>;
|
|
11
11
|
collapsable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
@@ -69,5 +69,6 @@ export declare const AttributeOperators: Record<Attribute['type'], {
|
|
|
69
69
|
}[]>;
|
|
70
70
|
export declare const GetAttributes: (components: (SdFormGenericComponent | SdFormGenericGroup)[]) => Attribute[];
|
|
71
71
|
export declare const TemplateToCondition: (template: string | undefined | null, entity: Record<string, any>) => string | undefined;
|
|
72
|
+
export declare const EvaluateExpression: (condition: SdFormGenericExpression | SdFormGenericExpressionCondition, entity: Record<string, any>) => boolean | undefined;
|
|
72
73
|
export declare const ExpressionToJavascriptExpression: (condition: SdFormGenericExpression | SdFormGenericExpressionCondition) => string | undefined;
|
|
73
74
|
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { PipeTransform } from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
3
3
|
import { SdFormGenericHtml } from '../models';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export declare class HtmlPipe implements PipeTransform {
|
|
6
|
-
private readonly
|
|
7
|
-
constructor(
|
|
8
|
-
transform: (hashed: string | undefined | null, content: string, component: SdFormGenericHtml) =>
|
|
6
|
+
private readonly sanitizer;
|
|
7
|
+
constructor(sanitizer: DomSanitizer);
|
|
8
|
+
transform: (hashed: string | undefined | null, content: string, component: SdFormGenericHtml) => string;
|
|
9
9
|
static ɵfac: i0.ɵɵFactoryDeclaration<HtmlPipe, never>;
|
|
10
10
|
static ɵpipe: i0.ɵɵPipeDeclaration<HtmlPipe, "htmlPipe", true>;
|
|
11
11
|
}
|
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, numberAttribute, effect, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { Chart, registerables } from 'chart.js';
|
|
4
|
+
|
|
5
|
+
Chart.register(...registerables);
|
|
6
|
+
class SdBarChartComponent {
|
|
7
|
+
canvas;
|
|
8
|
+
data = input.required();
|
|
9
|
+
options = input();
|
|
10
|
+
plugins = input([]);
|
|
11
|
+
scrollable = input(false, { transform: booleanAttribute });
|
|
12
|
+
minWidth = input(800, { transform: numberAttribute });
|
|
13
|
+
chart;
|
|
14
|
+
constructor() {
|
|
15
|
+
effect(() => {
|
|
16
|
+
const currentData = this.data();
|
|
17
|
+
const currentOptions = this.options();
|
|
18
|
+
if (this.chart) {
|
|
19
|
+
this.chart.data = currentData;
|
|
20
|
+
if (currentOptions) {
|
|
21
|
+
this.chart.options = currentOptions;
|
|
22
|
+
}
|
|
23
|
+
this.chart.update();
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
ngOnInit() {
|
|
28
|
+
this.initChart();
|
|
29
|
+
}
|
|
30
|
+
ngOnDestroy() {
|
|
31
|
+
if (this.chart) {
|
|
32
|
+
this.chart.destroy();
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
getMinWidth() {
|
|
36
|
+
return this.minWidth();
|
|
37
|
+
}
|
|
38
|
+
initChart() {
|
|
39
|
+
if (this.chart) {
|
|
40
|
+
this.chart.destroy();
|
|
41
|
+
}
|
|
42
|
+
const ctx = this.canvas.nativeElement.getContext('2d');
|
|
43
|
+
if (ctx) {
|
|
44
|
+
this.chart = new Chart(ctx, {
|
|
45
|
+
type: 'bar',
|
|
46
|
+
data: this.data(),
|
|
47
|
+
options: this.options() || {},
|
|
48
|
+
plugins: this.plugins(),
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: SdBarChartComponent, isStandalone: true, selector: "sd-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: `
|
|
54
|
+
<div [style.overflow-x]="scrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
|
|
55
|
+
<div [style.height]="'100%'" [style.min-width.px]="scrollable() ? getMinWidth() : null" style="position: relative;">
|
|
56
|
+
<canvas #canvas></canvas>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
60
|
+
}
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdBarChartComponent, decorators: [{
|
|
62
|
+
type: Component,
|
|
63
|
+
args: [{
|
|
64
|
+
selector: 'sd-bar-chart',
|
|
65
|
+
template: `
|
|
66
|
+
<div [style.overflow-x]="scrollable() ? 'auto' : 'visible'" style="width: 100%; height: 100%;">
|
|
67
|
+
<div [style.height]="'100%'" [style.min-width.px]="scrollable() ? getMinWidth() : null" style="position: relative;">
|
|
68
|
+
<canvas #canvas></canvas>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
`,
|
|
72
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
73
|
+
standalone: true,
|
|
74
|
+
}]
|
|
75
|
+
}], ctorParameters: () => [], propDecorators: { canvas: [{
|
|
76
|
+
type: ViewChild,
|
|
77
|
+
args: ['canvas', { static: true }]
|
|
78
|
+
}] } });
|
|
79
|
+
|
|
80
|
+
Chart.register(...registerables);
|
|
81
|
+
2;
|
|
82
|
+
class SdLineChartComponent {
|
|
83
|
+
canvas;
|
|
84
|
+
data = input.required();
|
|
85
|
+
options = input();
|
|
86
|
+
plugins = input([]);
|
|
87
|
+
chart;
|
|
88
|
+
constructor() {
|
|
89
|
+
effect(() => {
|
|
90
|
+
const currentData = this.data();
|
|
91
|
+
const currentOptions = this.options();
|
|
92
|
+
if (this.chart) {
|
|
93
|
+
this.chart.data = currentData;
|
|
94
|
+
if (currentOptions) {
|
|
95
|
+
this.chart.options = currentOptions;
|
|
96
|
+
}
|
|
97
|
+
this.chart.update();
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
ngOnInit() {
|
|
102
|
+
this.initChart();
|
|
103
|
+
}
|
|
104
|
+
ngOnDestroy() {
|
|
105
|
+
if (this.chart) {
|
|
106
|
+
this.chart.destroy();
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
initChart() {
|
|
110
|
+
if (this.chart) {
|
|
111
|
+
this.chart.destroy();
|
|
112
|
+
}
|
|
113
|
+
const ctx = this.canvas.nativeElement.getContext('2d');
|
|
114
|
+
if (ctx) {
|
|
115
|
+
this.chart = new Chart(ctx, {
|
|
116
|
+
type: 'line',
|
|
117
|
+
data: this.data(),
|
|
118
|
+
options: this.options() || {},
|
|
119
|
+
plugins: this.plugins(),
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
124
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: SdLineChartComponent, isStandalone: true, selector: "sd-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: `
|
|
125
|
+
<div style="position: relative; height: 100%; width: 100%;">
|
|
126
|
+
<canvas #canvas></canvas>
|
|
127
|
+
</div>
|
|
128
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
129
|
+
}
|
|
130
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdLineChartComponent, decorators: [{
|
|
131
|
+
type: Component,
|
|
132
|
+
args: [{
|
|
133
|
+
selector: 'sd-line-chart',
|
|
134
|
+
template: `
|
|
135
|
+
<div style="position: relative; height: 100%; width: 100%;">
|
|
136
|
+
<canvas #canvas></canvas>
|
|
137
|
+
</div>
|
|
138
|
+
`,
|
|
139
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
140
|
+
standalone: true,
|
|
141
|
+
}]
|
|
142
|
+
}], ctorParameters: () => [], propDecorators: { canvas: [{
|
|
143
|
+
type: ViewChild,
|
|
144
|
+
args: ['canvas', { static: true }]
|
|
145
|
+
}] } });
|
|
146
|
+
|
|
147
|
+
Chart.register(...registerables);
|
|
148
|
+
class SdPieChartComponent {
|
|
149
|
+
canvas;
|
|
150
|
+
data = input.required();
|
|
151
|
+
options = input();
|
|
152
|
+
plugins = input([]);
|
|
153
|
+
chart;
|
|
154
|
+
constructor() {
|
|
155
|
+
effect(() => {
|
|
156
|
+
const currentData = this.data();
|
|
157
|
+
const currentOptions = this.options();
|
|
158
|
+
if (this.chart) {
|
|
159
|
+
this.chart.data = currentData;
|
|
160
|
+
if (currentOptions) {
|
|
161
|
+
this.chart.options = currentOptions;
|
|
162
|
+
}
|
|
163
|
+
this.chart.update();
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
}
|
|
167
|
+
ngOnInit() {
|
|
168
|
+
this.initChart();
|
|
169
|
+
}
|
|
170
|
+
ngOnDestroy() {
|
|
171
|
+
if (this.chart) {
|
|
172
|
+
this.chart.destroy();
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
initChart() {
|
|
176
|
+
if (this.chart) {
|
|
177
|
+
this.chart.destroy();
|
|
178
|
+
}
|
|
179
|
+
const ctx = this.canvas.nativeElement.getContext('2d');
|
|
180
|
+
if (ctx) {
|
|
181
|
+
this.chart = new Chart(ctx, {
|
|
182
|
+
type: 'pie',
|
|
183
|
+
data: this.data(),
|
|
184
|
+
options: this.options() || {},
|
|
185
|
+
plugins: this.plugins(),
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
190
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: SdPieChartComponent, isStandalone: true, selector: "sd-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: `
|
|
191
|
+
<div style="position: relative; height: 100%; width: 100%;">
|
|
192
|
+
<canvas #canvas></canvas>
|
|
193
|
+
</div>
|
|
194
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
195
|
+
}
|
|
196
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPieChartComponent, decorators: [{
|
|
197
|
+
type: Component,
|
|
198
|
+
args: [{
|
|
199
|
+
selector: 'sd-pie-chart',
|
|
200
|
+
template: `
|
|
201
|
+
<div style="position: relative; height: 100%; width: 100%;">
|
|
202
|
+
<canvas #canvas></canvas>
|
|
203
|
+
</div>
|
|
204
|
+
`,
|
|
205
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
206
|
+
standalone: true,
|
|
207
|
+
}]
|
|
208
|
+
}], ctorParameters: () => [], propDecorators: { canvas: [{
|
|
209
|
+
type: ViewChild,
|
|
210
|
+
args: ['canvas', { static: true }]
|
|
211
|
+
}] } });
|
|
212
|
+
|
|
213
|
+
Chart.register(...registerables);
|
|
214
|
+
class SdDoughnutChartComponent {
|
|
215
|
+
canvas;
|
|
216
|
+
data = input.required();
|
|
217
|
+
options = input();
|
|
218
|
+
plugins = input([]);
|
|
219
|
+
chart;
|
|
220
|
+
constructor() {
|
|
221
|
+
effect(() => {
|
|
222
|
+
const currentData = this.data();
|
|
223
|
+
const currentOptions = this.options();
|
|
224
|
+
if (this.chart) {
|
|
225
|
+
this.chart.data = currentData;
|
|
226
|
+
if (currentOptions) {
|
|
227
|
+
this.chart.options = currentOptions;
|
|
228
|
+
}
|
|
229
|
+
this.chart.update();
|
|
230
|
+
}
|
|
231
|
+
});
|
|
232
|
+
}
|
|
233
|
+
ngOnInit() {
|
|
234
|
+
this.initChart();
|
|
235
|
+
}
|
|
236
|
+
ngOnDestroy() {
|
|
237
|
+
if (this.chart) {
|
|
238
|
+
this.chart.destroy();
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
initChart() {
|
|
242
|
+
if (this.chart) {
|
|
243
|
+
this.chart.destroy();
|
|
244
|
+
}
|
|
245
|
+
const ctx = this.canvas.nativeElement.getContext('2d');
|
|
246
|
+
if (ctx) {
|
|
247
|
+
this.chart = new Chart(ctx, {
|
|
248
|
+
type: 'doughnut',
|
|
249
|
+
data: this.data(),
|
|
250
|
+
options: this.options() || {},
|
|
251
|
+
plugins: this.plugins(),
|
|
252
|
+
});
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDoughnutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: SdDoughnutChartComponent, isStandalone: true, selector: "sd-doughnut-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: `
|
|
257
|
+
<div style="position: relative; height: 100%; width: 100%;">
|
|
258
|
+
<canvas #canvas></canvas>
|
|
259
|
+
</div>
|
|
260
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
261
|
+
}
|
|
262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDoughnutChartComponent, decorators: [{
|
|
263
|
+
type: Component,
|
|
264
|
+
args: [{
|
|
265
|
+
selector: 'sd-doughnut-chart',
|
|
266
|
+
template: `
|
|
267
|
+
<div style="position: relative; height: 100%; width: 100%;">
|
|
268
|
+
<canvas #canvas></canvas>
|
|
269
|
+
</div>
|
|
270
|
+
`,
|
|
271
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
272
|
+
standalone: true,
|
|
273
|
+
}]
|
|
274
|
+
}], ctorParameters: () => [], propDecorators: { canvas: [{
|
|
275
|
+
type: ViewChild,
|
|
276
|
+
args: ['canvas', { static: true }]
|
|
277
|
+
}] } });
|
|
278
|
+
|
|
279
|
+
/**
|
|
280
|
+
* Generated bundle index. Do not edit.
|
|
281
|
+
*/
|
|
282
|
+
|
|
283
|
+
export { SdBarChartComponent, SdDoughnutChartComponent, SdLineChartComponent, SdPieChartComponent };
|
|
284
|
+
//# sourceMappingURL=sd-angular-core-components-chart.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sd-angular-core-components-chart.mjs","sources":["../../../projects/sd-angular/components/chart/src/bar-chart.component.ts","../../../projects/sd-angular/components/chart/src/line-chart.component.ts","../../../projects/sd-angular/components/chart/src/pie-chart.component.ts","../../../projects/sd-angular/components/chart/src/doughnut-chart.component.ts","../../../projects/sd-angular/components/chart/sd-angular-core-components-chart.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, ViewChild, booleanAttribute, effect, input, numberAttribute } from '@angular/core';\r\nimport { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';\r\n\r\nChart.register(...registerables);\r\n\r\n@Component({\r\n selector: 'sd-bar-chart',\r\n template: `\r\n <div [style.overflow-x]=\"scrollable() ? 'auto' : 'visible'\" style=\"width: 100%; height: 100%;\">\r\n <div [style.height]=\"'100%'\" [style.min-width.px]=\"scrollable() ? getMinWidth() : null\" style=\"position: relative;\">\r\n <canvas #canvas></canvas>\r\n </div>\r\n </div>\r\n `,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n})\r\nexport class SdBarChartComponent implements OnInit, OnDestroy {\r\n @ViewChild('canvas', { static: true }) canvas!: ElementRef<HTMLCanvasElement>;\r\n\r\n data = input.required<ChartData<'bar'>>();\r\n options = input<ChartOptions<'bar'>>();\r\n plugins = input<Plugin<'bar'>[]>([]);\r\n\r\n scrollable = input(false, { transform: booleanAttribute });\r\n minWidth = input(800, { transform: numberAttribute });\r\n\r\n chart: Chart<'bar'> | undefined;\r\n\r\n constructor() {\r\n effect(() => {\r\n const currentData = this.data();\r\n const currentOptions = this.options();\r\n \r\n if (this.chart) {\r\n this.chart.data = currentData as any;\r\n if (currentOptions) {\r\n this.chart.options = currentOptions;\r\n }\r\n this.chart.update();\r\n }\r\n });\r\n }\r\n\r\n ngOnInit() {\r\n this.initChart();\r\n }\r\n\r\n ngOnDestroy() {\r\n if (this.chart) {\r\n this.chart.destroy();\r\n }\r\n }\r\n\r\n getMinWidth(): number {\r\n return this.minWidth();\r\n }\r\n\r\n private initChart() {\r\n if (this.chart) {\r\n this.chart.destroy();\r\n }\r\n const ctx = this.canvas.nativeElement.getContext('2d');\r\n if (ctx) {\r\n this.chart = new Chart(ctx, {\r\n type: 'bar',\r\n data: this.data() as any,\r\n options: this.options() || {},\r\n plugins: this.plugins(),\r\n });\r\n }\r\n }\r\n}\r\n","import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, ViewChild, effect, input } from '@angular/core';\r\nimport { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';\r\n\r\nChart.register(...registerables);\r\n2\r\n@Component({\r\n selector: 'sd-line-chart',\r\n template: `\r\n <div style=\"position: relative; height: 100%; width: 100%;\">\r\n <canvas #canvas></canvas>\r\n </div>\r\n `,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n})\r\nexport class SdLineChartComponent implements OnInit, OnDestroy {\r\n @ViewChild('canvas', { static: true }) canvas!: ElementRef<HTMLCanvasElement>;\r\n\r\n data = input.required<ChartData<'line'>>();\r\n options = input<ChartOptions<'line'>>();\r\n plugins = input<Plugin<'line'>[]>([]);\r\n\r\n chart: Chart<'line'> | undefined;\r\n\r\n constructor() {\r\n effect(() => {\r\n const currentData = this.data();\r\n const currentOptions = this.options();\r\n \r\n if (this.chart) {\r\n this.chart.data = currentData;\r\n if (currentOptions) {\r\n this.chart.options = currentOptions;\r\n }\r\n this.chart.update();\r\n }\r\n });\r\n }\r\n\r\n ngOnInit() {\r\n this.initChart();\r\n }\r\n\r\n ngOnDestroy() {\r\n if (this.chart) {\r\n this.chart.destroy();\r\n }\r\n }\r\n\r\n private initChart() {\r\n if (this.chart) {\r\n this.chart.destroy();\r\n }\r\n const ctx = this.canvas.nativeElement.getContext('2d');\r\n if (ctx) {\r\n this.chart = new Chart(ctx, {\r\n type: 'line',\r\n data: this.data(),\r\n options: this.options() || {},\r\n plugins: this.plugins(),\r\n });\r\n }\r\n }\r\n}\r\n","import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, ViewChild, effect, input } from '@angular/core';\r\nimport { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';\r\n\r\nChart.register(...registerables);\r\n\r\n@Component({\r\n selector: 'sd-pie-chart',\r\n template: `\r\n <div style=\"position: relative; height: 100%; width: 100%;\">\r\n <canvas #canvas></canvas>\r\n </div>\r\n `,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n})\r\nexport class SdPieChartComponent implements OnInit, OnDestroy {\r\n @ViewChild('canvas', { static: true }) canvas!: ElementRef<HTMLCanvasElement>;\r\n\r\n data = input.required<ChartData<'pie'>>();\r\n options = input<ChartOptions<'pie'>>();\r\n plugins = input<Plugin<'pie'>[]>([]);\r\n\r\n chart: Chart<'pie'> | undefined;\r\n\r\n constructor() {\r\n effect(() => {\r\n const currentData = this.data();\r\n const currentOptions = this.options();\r\n \r\n if (this.chart) {\r\n this.chart.data = currentData;\r\n if (currentOptions) {\r\n this.chart.options = currentOptions;\r\n }\r\n this.chart.update();\r\n }\r\n });\r\n }\r\n\r\n ngOnInit() {\r\n this.initChart();\r\n }\r\n\r\n ngOnDestroy() {\r\n if (this.chart) {\r\n this.chart.destroy();\r\n }\r\n }\r\n\r\n private initChart() {\r\n if (this.chart) {\r\n this.chart.destroy();\r\n }\r\n const ctx = this.canvas.nativeElement.getContext('2d');\r\n if (ctx) {\r\n this.chart = new Chart(ctx, {\r\n type: 'pie',\r\n data: this.data(),\r\n options: this.options() || {},\r\n plugins: this.plugins(),\r\n });\r\n }\r\n }\r\n}\r\n","import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, ViewChild, effect, input } from '@angular/core';\r\nimport { Chart, ChartData, ChartOptions, Plugin, registerables } from 'chart.js';\r\n\r\nChart.register(...registerables);\r\n\r\n@Component({\r\n selector: 'sd-doughnut-chart',\r\n template: `\r\n <div style=\"position: relative; height: 100%; width: 100%;\">\r\n <canvas #canvas></canvas>\r\n </div>\r\n `,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n})\r\nexport class SdDoughnutChartComponent implements OnInit, OnDestroy {\r\n @ViewChild('canvas', { static: true }) canvas!: ElementRef<HTMLCanvasElement>;\r\n\r\n data = input.required<ChartData<'doughnut'>>();\r\n options = input<ChartOptions<'doughnut'>>();\r\n plugins = input<Plugin<'doughnut'>[]>([]);\r\n\r\n chart: Chart<'doughnut'> | undefined;\r\n\r\n constructor() {\r\n effect(() => {\r\n const currentData = this.data();\r\n const currentOptions = this.options();\r\n \r\n if (this.chart) {\r\n this.chart.data = currentData;\r\n if (currentOptions) {\r\n this.chart.options = currentOptions;\r\n }\r\n this.chart.update();\r\n }\r\n });\r\n }\r\n\r\n ngOnInit() {\r\n this.initChart();\r\n }\r\n\r\n ngOnDestroy() {\r\n if (this.chart) {\r\n this.chart.destroy();\r\n }\r\n }\r\n\r\n private initChart() {\r\n if (this.chart) {\r\n this.chart.destroy();\r\n }\r\n const ctx = this.canvas.nativeElement.getContext('2d');\r\n if (ctx) {\r\n this.chart = new Chart(ctx, {\r\n type: 'doughnut',\r\n data: this.data(),\r\n options: this.options() || {},\r\n plugins: this.plugins(),\r\n });\r\n }\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -7,13 +7,13 @@ import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
|
|
|
7
7
|
/* eslint-disable @angular-eslint/no-input-rename */
|
|
8
8
|
class SdSection extends SdBaseSecureComponent {
|
|
9
9
|
#el = inject(ElementRef);
|
|
10
|
-
title = input(
|
|
11
|
-
subTitle = input(
|
|
12
|
-
icon = input(
|
|
10
|
+
title = input(undefined);
|
|
11
|
+
subTitle = input(undefined);
|
|
12
|
+
icon = input(undefined);
|
|
13
13
|
iconColor = input('primary', { alias: 'iconColor' });
|
|
14
14
|
collapsed = model(false, { alias: 'collapsed' });
|
|
15
|
-
collapsable = input(false, { transform: booleanAttribute
|
|
16
|
-
hideHeader = input(false, { transform: booleanAttribute
|
|
15
|
+
collapsable = input(false, { transform: booleanAttribute });
|
|
16
|
+
hideHeader = input(false, { transform: booleanAttribute });
|
|
17
17
|
noPaddingBody = input(false, { transform: booleanAttribute });
|
|
18
18
|
constructor() {
|
|
19
19
|
super();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-angular-core-components-section.mjs","sources":["../../../projects/sd-angular/components/section/src/section.component.ts","../../../projects/sd-angular/components/section/src/section.component.html","../../../projects/sd-angular/components/section/src/section-item/section-item.component.ts","../../../projects/sd-angular/components/section/src/section-item/section-item.component.html","../../../projects/sd-angular/components/section/sd-angular-core-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities';\r\n\r\n@Component({\r\n selector: 'sd-section',\r\n templateUrl: './section.component.html',\r\n styleUrls: ['./section.component.scss'],\r\n imports: [MatIconModule],\r\n})\r\nexport class SdSection extends SdBaseSecureComponent {\r\n #el = inject(ElementRef);\r\n\r\n title = input<string | null>(
|
|
1
|
+
{"version":3,"file":"sd-angular-core-components-section.mjs","sources":["../../../projects/sd-angular/components/section/src/section.component.ts","../../../projects/sd-angular/components/section/src/section.component.html","../../../projects/sd-angular/components/section/src/section-item/section-item.component.ts","../../../projects/sd-angular/components/section/src/section-item/section-item.component.html","../../../projects/sd-angular/components/section/sd-angular-core-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities';\r\n\r\n@Component({\r\n selector: 'sd-section',\r\n templateUrl: './section.component.html',\r\n styleUrls: ['./section.component.scss'],\r\n imports: [MatIconModule],\r\n})\r\nexport class SdSection extends SdBaseSecureComponent {\r\n #el = inject(ElementRef);\r\n\r\n title = input<string | undefined | null>(undefined);\r\n subTitle = input<string | undefined | null>(undefined);\r\n icon = input<string | undefined | null>(undefined);\r\n iconColor = input<SdColor>('primary', { alias: 'iconColor' });\r\n\r\n collapsed = model<boolean>(false, { alias: 'collapsed' });\r\n collapsable = input(false, { transform: booleanAttribute });\r\n hideHeader = input(false, { transform: booleanAttribute });\r\n noPaddingBody = input(false, { transform: booleanAttribute });\r\n\r\n constructor() {\r\n super();\r\n effect(() => {\r\n if (this.title()) {\r\n this.#el.nativeElement.removeAttribute('title');\r\n }\r\n });\r\n }\r\n\r\n toggleCollapse = () => {\r\n if (this.collapsable()) {\r\n this.collapsed.set(!this.collapsed());\r\n } else {\r\n if (this.collapsed()) {\r\n this.collapsed.set(false);\r\n }\r\n }\r\n };\r\n}\r\n","@let _hideHeader = hideHeader();\r\n@let _collapsable = collapsable();\r\n@let _collapsed = collapsed();\r\n@let _title = title();\r\n@let _subTitle = subTitle();\r\n@let _iconColor = iconColor();\r\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\r\n @if (!_hideHeader) {\r\n <div\r\n class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n (click)=\"toggleCollapse()\"\r\n aria-hidden=\"true\">\r\n <div class=\"d-flex align-items-center\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n @if (icon()) {\r\n <span\r\n class=\"mr-8 material-icons-outlined\"\r\n [class.text-primary]=\"_iconColor === 'primary'\"\r\n [class.text-secondary]=\"_iconColor === 'secondary'\"\r\n [class.text-error]=\"_iconColor === 'error'\"\r\n [class.text-warning]=\"_iconColor === 'warning'\"\r\n [class.text-success]=\"_iconColor === 'success'\">\r\n {{ icon() }}\r\n </span>\r\n }\r\n <div>\r\n @if (_title) {\r\n <div class=\"T16M\">{{ _title }}</div>\r\n }\r\n @if (_subTitle) {\r\n <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\r\n }\r\n </div>\r\n </ng-content>\r\n </div>\r\n <div class=\"d-flex\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n @if (_collapsable) {\r\n <div class=\"d-flex align-items-center\">\r\n @if (_collapsed) {\r\n <mat-icon>expand_more</mat-icon>\r\n } @else {\r\n <mat-icon>expand_less</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (!_collapsed || _hideHeader) {\r\n <!-- Nếu header bị ẩn thì không cần border top -->\r\n <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n","import { Component, input } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sd-section-item',\r\n templateUrl: './section-item.component.html',\r\n styleUrls: ['section-item.component.scss'],\r\n standalone: true,\r\n})\r\nexport class SdSectionItem {\r\n label = input.required<string>();\r\n labelWidth = input<string, string | null | undefined>('150px', {\r\n transform: (val: any): string => {\r\n return val || '150px';\r\n },\r\n });\r\n}\r\n","<div class=\"c-item\">\r\n <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\r\n <div style=\"flex: 1;\"><ng-content></ng-content></div>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -108,11 +108,11 @@ class SdSideDrawer extends SdBaseSecureComponent {
|
|
|
108
108
|
this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(startWith(false), distinctUntilChanged(), takeUntil(this.#destroy$));
|
|
109
109
|
}
|
|
110
110
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSideDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
111
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdSideDrawer, isStandalone: true, selector: "sd-side-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, drawerClass: { classPropertyName: "drawerClass", publicName: "drawerClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortal>\r\n <div\r\n [id]=\"id\"\r\n class=\"sd-side-drawer\"\r\n [ngStyle]=\"{ width: width() }\"\r\n [ngClass]=\"drawerClass()\"\r\n [class.sd-side-drawer-active]=\"isOpened\"\r\n #drawerContainer>\r\n @if (isOpened) {\r\n <ng-container>\r\n <div class=\"
|
|
111
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdSideDrawer, isStandalone: true, selector: "sd-side-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, drawerClass: { classPropertyName: "drawerClass", publicName: "drawerClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortal>\r\n <div\r\n [id]=\"id\"\r\n class=\"sd-side-drawer\"\r\n [ngStyle]=\"{ width: width() }\"\r\n [ngClass]=\"drawerClass()\"\r\n [class.sd-side-drawer-active]=\"isOpened\"\r\n #drawerContainer>\r\n @if (isOpened) {\r\n <ng-container>\r\n <div class=\"sd-side-drawer-header\">\r\n <div class=\"sd-side-drawer-title\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n {{ title() }}\r\n </ng-content>\r\n </div>\r\n <div class=\"sd-side-drawer-header-actions\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n @if (!hideClose()) {\r\n <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n height=\"24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n fill=\"none\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n @if (isOpened) {\r\n <div class=\"sd-side-drawer-body\">\r\n <div class=\"sd-side-drawer-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"sd-side-drawer-footer\">\r\n <ng-content select=\"[sdFooter]\"></ng-content>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <div\r\n aria-hidden=\"true\"\r\n class=\"sd-side-drawer-backdrop\"\r\n (click)=\"disableBackdropClose() ? null : close()\"\r\n (wheel)=\"preventScroll($event)\"\r\n (touchmove)=\"preventScroll($event)\"></div>\r\n }\r\n</ng-template>\r\n", styles: [".sd-side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.sd-side-drawer-active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.sd-side-drawer-header{min-height:64px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.sd-side-drawer-header-actions{display:flex;align-items:center;gap:8px}.sd-side-drawer-title{font-size:20px;line-height:28px;font-weight:500;flex:1;margin-right:16px}.sd-side-drawer-close-btn{background:transparent;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sd-secondary-color, #666);border-radius:50%;transition:background-color .2s,color .2s}.sd-side-drawer-close-btn:hover{background-color:#0000000a;color:var(--sd-primary-color, #333)}.sd-side-drawer-close-btn:focus{outline:none;background-color:#00000014}.sd-side-drawer-body{flex:1;position:relative}.sd-side-drawer-content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.sd-side-drawer-footer{border-top:1px solid #dde0e5;padding:8px}.sd-side-drawer-backdrop{background-color:#0006;border:0;outline:none!important;position:fixed;inset:0;z-index:99;width:100%;height:100%;transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
112
112
|
}
|
|
113
113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSideDrawer, decorators: [{
|
|
114
114
|
type: Component,
|
|
115
|
-
args: [{ selector: 'sd-side-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, PortalModule], template: "<ng-template cdkPortal>\r\n <div\r\n [id]=\"id\"\r\n class=\"sd-side-drawer\"\r\n [ngStyle]=\"{ width: width() }\"\r\n [ngClass]=\"drawerClass()\"\r\n [class.sd-side-drawer-active]=\"isOpened\"\r\n #drawerContainer>\r\n @if (isOpened) {\r\n <ng-container>\r\n <div class=\"
|
|
115
|
+
args: [{ selector: 'sd-side-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, PortalModule], template: "<ng-template cdkPortal>\r\n <div\r\n [id]=\"id\"\r\n class=\"sd-side-drawer\"\r\n [ngStyle]=\"{ width: width() }\"\r\n [ngClass]=\"drawerClass()\"\r\n [class.sd-side-drawer-active]=\"isOpened\"\r\n #drawerContainer>\r\n @if (isOpened) {\r\n <ng-container>\r\n <div class=\"sd-side-drawer-header\">\r\n <div class=\"sd-side-drawer-title\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n {{ title() }}\r\n </ng-content>\r\n </div>\r\n <div class=\"sd-side-drawer-header-actions\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n @if (!hideClose()) {\r\n <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n height=\"24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n fill=\"none\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n @if (isOpened) {\r\n <div class=\"sd-side-drawer-body\">\r\n <div class=\"sd-side-drawer-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"sd-side-drawer-footer\">\r\n <ng-content select=\"[sdFooter]\"></ng-content>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <div\r\n aria-hidden=\"true\"\r\n class=\"sd-side-drawer-backdrop\"\r\n (click)=\"disableBackdropClose() ? null : close()\"\r\n (wheel)=\"preventScroll($event)\"\r\n (touchmove)=\"preventScroll($event)\"></div>\r\n }\r\n</ng-template>\r\n", styles: [".sd-side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.sd-side-drawer-active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.sd-side-drawer-header{min-height:64px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.sd-side-drawer-header-actions{display:flex;align-items:center;gap:8px}.sd-side-drawer-title{font-size:20px;line-height:28px;font-weight:500;flex:1;margin-right:16px}.sd-side-drawer-close-btn{background:transparent;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sd-secondary-color, #666);border-radius:50%;transition:background-color .2s,color .2s}.sd-side-drawer-close-btn:hover{background-color:#0000000a;color:var(--sd-primary-color, #333)}.sd-side-drawer-close-btn:focus{outline:none;background-color:#00000014}.sd-side-drawer-body{flex:1;position:relative}.sd-side-drawer-content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.sd-side-drawer-footer{border-top:1px solid #dde0e5;padding:8px}.sd-side-drawer-backdrop{background-color:#0006;border:0;outline:none!important;position:fixed;inset:0;z-index:99;width:100%;height:100%;transition:all .3s ease-in-out}\n"] }]
|
|
116
116
|
}], ctorParameters: () => [] });
|
|
117
117
|
|
|
118
118
|
/**
|