@keycloakify/angular-email 0.0.1-rc.2 → 0.0.1-rc.4
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/fesm2022/keycloakify-angular-email.mjs +261 -84
- package/fesm2022/keycloakify-angular-email.mjs.map +1 -1
- package/lib/components/background/background.component.d.ts +4 -3
- package/lib/components/body/body.component.d.ts +3 -1
- package/lib/components/button/button.component.d.ts +5 -4
- package/lib/components/column/column.component.d.ts +3 -2
- package/lib/components/container/container.component.d.ts +4 -3
- package/lib/components/heading/heading.component.d.ts +4 -3
- package/lib/components/hr/hr.component.d.ts +4 -3
- package/lib/components/html/html.component.d.ts +3 -1
- package/lib/components/img/img.component.d.ts +4 -3
- package/lib/components/link/link.component.d.ts +4 -3
- package/lib/components/preview/preview.component.d.ts +2 -1
- package/lib/components/section/section.component.d.ts +4 -3
- package/lib/components/text/text.component.d.ts +4 -3
- package/lib/render.d.ts +15 -1
- package/package.json +4 -3
|
@@ -3,40 +3,47 @@ import { input, computed, Component, ChangeDetectionStrategy, effect, CUSTOM_ELE
|
|
|
3
3
|
import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
|
|
4
4
|
import { bootstrapApplication } from '@angular/platform-browser';
|
|
5
5
|
import { provideServerRendering, renderApplication } from '@angular/platform-server';
|
|
6
|
+
import { render as render$1 } from '@maizzle/framework';
|
|
6
7
|
import * as cheerio from 'cheerio';
|
|
7
8
|
import { convert } from 'html-to-text';
|
|
8
|
-
import
|
|
9
|
+
import { readFileSync } from 'node:fs';
|
|
9
10
|
|
|
10
11
|
class BackgroundComponent {
|
|
11
12
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12
|
-
$
|
|
13
|
+
$style = input(null, { alias: 'style' });
|
|
14
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
13
15
|
$width = input(0, { alias: 'width' });
|
|
14
16
|
$height = input(0, { alias: 'height' });
|
|
15
17
|
$src = input(undefined, { alias: 'src' });
|
|
16
18
|
$bgRepeat = input('no-repeat', { alias: 'bgRepeat' });
|
|
17
19
|
$bgColor = input(undefined, { alias: 'bgColor' });
|
|
18
|
-
$
|
|
20
|
+
$bgStyle = computed(() => ({ backgroundRepeat: this.$bgRepeat(), ...(this.$style() ?? {}) }));
|
|
19
21
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: BackgroundComponent, isStandalone: true, selector: "ng-email-background", inputs: { $
|
|
22
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: BackgroundComponent, isStandalone: true, selector: "ng-email-background", inputs: { $style: { classPropertyName: "$style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, $styleClass: { classPropertyName: "$styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, $width: { classPropertyName: "$width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, $height: { classPropertyName: "$height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, $src: { classPropertyName: "$src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, $bgRepeat: { classPropertyName: "$bgRepeat", publicName: "bgRepeat", isSignal: true, isRequired: false, transformFunction: null }, $bgColor: { classPropertyName: "$bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let width = $width();\n@let height = $height();\n\n<table\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n [border]=\"0\"\n width=\"100%\"\n [attr.height]=\"height\"\n role=\"presentation\"\n>\n <tr>\n <td\n [align]=\"'top'\"\n [width]=\"width\"\n [height]=\"height && width ? height : undefined\"\n [attr.bgcolor]=\"$bgColor()\"\n [attr.background]=\"$src()\"\n [style]=\"$bgStyle()\"\n [class]=\"$styleClass()\"\n >\n <ng-content />\n </td>\n </tr>\n</table>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21
23
|
}
|
|
22
24
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BackgroundComponent, decorators: [{
|
|
23
25
|
type: Component,
|
|
24
|
-
args: [{ selector: 'ng-email-background', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "@let width = $width();\n@let height = $height();\n\n<table\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n [border]=\"0\"\n width=\"100%\"\n [attr.height]=\"height\"\n role=\"presentation\"\n>\n <tr>\n <td\n [align]=\"'top'\"\n [width]=\"width\"\n [height]=\"height && width ? height : undefined\"\n [attr.bgcolor]=\"$bgColor()\"\n [attr.background]=\"$src()\"\n [style]=\"$
|
|
26
|
+
args: [{ selector: 'ng-email-background', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "@let width = $width();\n@let height = $height();\n\n<table\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n [border]=\"0\"\n width=\"100%\"\n [attr.height]=\"height\"\n role=\"presentation\"\n>\n <tr>\n <td\n [align]=\"'top'\"\n [width]=\"width\"\n [height]=\"height && width ? height : undefined\"\n [attr.bgcolor]=\"$bgColor()\"\n [attr.background]=\"$src()\"\n [style]=\"$bgStyle()\"\n [class]=\"$styleClass()\"\n >\n <ng-content />\n </td>\n </tr>\n</table>\n" }]
|
|
25
27
|
}] });
|
|
26
28
|
|
|
27
29
|
class BodyComponent {
|
|
30
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
31
|
+
$style = input(null, { alias: 'style' });
|
|
32
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
28
33
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
34
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: BodyComponent, isStandalone: true, selector: "ng-email-body", inputs: { $style: { classPropertyName: "$style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, $styleClass: { classPropertyName: "$styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<body\n [style]=\"$style()\"\n [class]=\"$styleClass()\"\n>\n <ng-content />\n</body>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
30
35
|
}
|
|
31
36
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BodyComponent, decorators: [{
|
|
32
37
|
type: Component,
|
|
33
|
-
args: [{ selector: 'ng-email-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<body>\n <ng-content />\n</body>\n" }]
|
|
38
|
+
args: [{ selector: 'ng-email-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<body\n [style]=\"$style()\"\n [class]=\"$styleClass()\"\n>\n <ng-content />\n</body>\n" }]
|
|
34
39
|
}] });
|
|
35
40
|
|
|
36
41
|
class ButtonComponent {
|
|
37
42
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
38
|
-
$
|
|
43
|
+
$style = input(null, { alias: 'style' });
|
|
44
|
+
$styleClass = input(null, { alias: 'styleClass' });
|
|
39
45
|
$href = input(undefined, { alias: 'href' });
|
|
46
|
+
$textContent = input.required({ alias: 'textContent' });
|
|
40
47
|
$width = input(undefined, { alias: 'width' });
|
|
41
48
|
$height = input(undefined, { alias: 'height' });
|
|
42
49
|
$borderRadius = input(0, { alias: 'borderRadius' });
|
|
@@ -78,28 +85,41 @@ class ButtonComponent {
|
|
|
78
85
|
...(this.$backgroundColor() ? { backgroundColor: this.$backgroundColor() } : {}),
|
|
79
86
|
// text styles
|
|
80
87
|
...(this.$textColor() ? { color: this.$textColor() } : {}),
|
|
81
|
-
...(this.$
|
|
88
|
+
...(this.$style() ?? {}),
|
|
82
89
|
...(this.$withBackground() ? {} : { msoHide: 'all' }),
|
|
83
90
|
}));
|
|
84
91
|
$withoutBackgroundStyle = computed(() => ({
|
|
85
92
|
...this.$baseStyle(),
|
|
86
93
|
// background styles
|
|
87
94
|
...this.$propStyles(),
|
|
88
|
-
...(this.$
|
|
95
|
+
...(this.$style() ?? {}),
|
|
89
96
|
...(this.$withBackground() ? {} : { msoHide: 'all' }),
|
|
90
97
|
}));
|
|
91
|
-
$
|
|
92
|
-
|
|
98
|
+
$noBgInnerHtml = computed(() => {
|
|
99
|
+
const href = this.$href();
|
|
100
|
+
const borderColor = this.$borderColor();
|
|
101
|
+
const borderSize = this.$borderSize();
|
|
102
|
+
const height = this.$height();
|
|
103
|
+
const width = this.$width();
|
|
104
|
+
const arcsize = this.$arcsize();
|
|
105
|
+
const backgroundColor = this.$backgroundColor();
|
|
106
|
+
const fontSize = this.$fontSize();
|
|
107
|
+
const textColor = this.$textColor();
|
|
108
|
+
const textContent = this.$textContent();
|
|
109
|
+
return `<!--[if mso]>
|
|
110
|
+
<v:roundrect href="${href}" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="${height !== undefined ? `height:${height}px` : ''};v-text-anchor:middle;${width !== undefined ? `height:${width}px` : ''};" arcsize="${arcsize}%" ${borderColor ? `strokecolor=${borderColor}` : ''} ${borderSize ? `strokeweight="${borderSize}px"` : `stroke="false"`} ${backgroundColor ? `fillcolor=${backgroundColor}` : `fill="false"`}>
|
|
93
111
|
<w:anchorlock/>
|
|
94
|
-
<center style="font-size:${
|
|
95
|
-
|
|
96
|
-
|
|
112
|
+
<center style="font-size:${fontSize}px;${textColor ? `color:${textColor};` : ''}">
|
|
113
|
+
${textContent}
|
|
114
|
+
</center></v:roundrect>
|
|
115
|
+
<![endif]-->`;
|
|
116
|
+
});
|
|
97
117
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
98
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: ButtonComponent, isStandalone: true, selector: "ng-email-button", inputs: { $
|
|
118
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: ButtonComponent, isStandalone: true, selector: "ng-email-button", inputs: { $style: { classPropertyName: "$style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, $styleClass: { classPropertyName: "$styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, $href: { classPropertyName: "$href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, $textContent: { classPropertyName: "$textContent", publicName: "textContent", isSignal: true, isRequired: true, transformFunction: null }, $width: { classPropertyName: "$width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, $height: { classPropertyName: "$height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, $borderRadius: { classPropertyName: "$borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, $textColor: { classPropertyName: "$textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, $backgroundColor: { classPropertyName: "$backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, $borderColor: { classPropertyName: "$borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, $borderSize: { classPropertyName: "$borderSize", publicName: "borderSize", isSignal: true, isRequired: false, transformFunction: null }, $fontSize: { classPropertyName: "$fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, $align: { classPropertyName: "$align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, $withBackground: { classPropertyName: "$withBackground", publicName: "withBackground", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let withBackground = $withBackground();\n@let align = $align();\n@let href = $href();\n@let height = $height();\n@let width = $width();\n@let borderRadius = $borderRadius();\n\n<ng-template #child><ng-content></ng-content></ng-template>\n\n<table\n [width]=\"'100%'\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n style=\"border-collapse: collapse\"\n role=\"presentation\"\n>\n <tr>\n <td [align]=\"align\">\n @if (withBackground) {\n <table\n [align]=\"align\"\n [width]=\"width\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n role=\"presentation\"\n [style]=\"{\n border: $borderSize() + 'px solid ' + ($borderColor() ?? 'inherit'),\n borderRadius,\n }\"\n >\n <tr>\n <td\n [attr.bgcolor]=\"$backgroundColor()\"\n [width]=\"width\"\n [height]=\"height\"\n [style]=\"{\n borderRadius,\n height,\n width,\n maxWidth: width,\n textAlign: 'center',\n }\"\n >\n <a\n [href]=\"href\"\n [class]=\"$styleClass()\"\n [style]=\"$withBackgroundStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"child\"></ng-container>\n </a>\n </td>\n </tr>\n </table>\n } @else {\n <noscript [attr.data-html]=\"$noBgInnerHtml()\"></noscript>\n <a\n [href]=\"href\"\n [class]=\"$styleClass()\"\n [style]=\"$withoutBackgroundStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"child\"></ng-container>\n </a>\n }\n </td>\n </tr>\n</table>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
99
119
|
}
|
|
100
120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
101
121
|
type: Component,
|
|
102
|
-
args: [{ selector: 'ng-email-button', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let withBackground = $withBackground();\n@let align = $align();\n@let href = $href();\n@let height = $height();\n@let width = $width();\n@let borderRadius = $borderRadius();\n\n<table\n [width]=\"'100%'\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n style=\"border-collapse: collapse\"\n role=\"presentation\"\n>\n <tr>\n <td [align]=\"align\">\n @if (withBackground) {\n <table\n [align]=\"align\"\n [width]=\"width\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n role=\"presentation\"\n [style]=\"{\n border: $borderSize() + 'px solid ' + ($borderColor() ?? 'inherit'),\n borderRadius,\n }\"\n >\n <tr>\n <td\n [attr.bgcolor]=\"$backgroundColor()\"\n [width]=\"width\"\n [height]=\"height\"\n [style]=\"{\n borderRadius,\n height,\n width,\n maxWidth: width,\n textAlign: 'center',\n }\"\n >\n <a\n [href]=\"href\"\n [style]=\"$withBackgroundStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"
|
|
122
|
+
args: [{ selector: 'ng-email-button', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let withBackground = $withBackground();\n@let align = $align();\n@let href = $href();\n@let height = $height();\n@let width = $width();\n@let borderRadius = $borderRadius();\n\n<ng-template #child><ng-content></ng-content></ng-template>\n\n<table\n [width]=\"'100%'\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n style=\"border-collapse: collapse\"\n role=\"presentation\"\n>\n <tr>\n <td [align]=\"align\">\n @if (withBackground) {\n <table\n [align]=\"align\"\n [width]=\"width\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n role=\"presentation\"\n [style]=\"{\n border: $borderSize() + 'px solid ' + ($borderColor() ?? 'inherit'),\n borderRadius,\n }\"\n >\n <tr>\n <td\n [attr.bgcolor]=\"$backgroundColor()\"\n [width]=\"width\"\n [height]=\"height\"\n [style]=\"{\n borderRadius,\n height,\n width,\n maxWidth: width,\n textAlign: 'center',\n }\"\n >\n <a\n [href]=\"href\"\n [class]=\"$styleClass()\"\n [style]=\"$withBackgroundStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"child\"></ng-container>\n </a>\n </td>\n </tr>\n </table>\n } @else {\n <noscript [attr.data-html]=\"$noBgInnerHtml()\"></noscript>\n <a\n [href]=\"href\"\n [class]=\"$styleClass()\"\n [style]=\"$withoutBackgroundStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"child\"></ng-container>\n </a>\n }\n </td>\n </tr>\n</table>\n" }]
|
|
103
123
|
}] });
|
|
104
124
|
|
|
105
125
|
class ColorSchemeComponent {
|
|
@@ -115,15 +135,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
115
135
|
|
|
116
136
|
class ColumnComponent {
|
|
117
137
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
118
|
-
$
|
|
138
|
+
$style = input(null, { alias: 'style' });
|
|
139
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
119
140
|
$bgImage = input(undefined, { alias: 'bgImage' });
|
|
120
141
|
$bgColor = input(undefined, { alias: 'bgColor' });
|
|
121
142
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ColumnComponent, isStandalone: true, selector: "ng-email-column", inputs: { $
|
|
143
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ColumnComponent, isStandalone: true, selector: "ng-email-column", inputs: { $style: { classPropertyName: "$style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, $styleClass: { classPropertyName: "$styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, $bgImage: { classPropertyName: "$bgImage", publicName: "bgImage", isSignal: true, isRequired: false, transformFunction: null }, $bgColor: { classPropertyName: "$bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<td\n [attr.background]=\"$bgImage()\"\n [attr.bgcolor]=\"$bgColor()\"\n [style]=\"$style()\"\n [class]=\"$styleClass()\"\n role=\"presentation\"\n>\n <ng-content />\n</td>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
123
144
|
}
|
|
124
145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ColumnComponent, decorators: [{
|
|
125
146
|
type: Component,
|
|
126
|
-
args: [{ selector: 'ng-email-column', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<td\n [attr.background]=\"$bgImage()\"\n [attr.bgcolor]=\"$bgColor()\"\n [style]=\"$
|
|
147
|
+
args: [{ selector: 'ng-email-column', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<td\n [attr.background]=\"$bgImage()\"\n [attr.bgcolor]=\"$bgColor()\"\n [style]=\"$style()\"\n [class]=\"$styleClass()\"\n role=\"presentation\"\n>\n <ng-content />\n</td>\n" }]
|
|
127
148
|
}] });
|
|
128
149
|
|
|
129
150
|
class ConditionalComponent {
|
|
@@ -153,13 +174,14 @@ class ContainerComponent {
|
|
|
153
174
|
random = Math.random();
|
|
154
175
|
document = inject(DOCUMENT);
|
|
155
176
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
156
|
-
$
|
|
177
|
+
$style = input(null, { alias: 'style' });
|
|
178
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
157
179
|
$alignment = input('center', { alias: 'alignment' });
|
|
158
180
|
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
159
181
|
$containerWidth = input(600, { alias: 'containerWidth' });
|
|
160
|
-
$
|
|
182
|
+
$containerStyle = computed(() => ({
|
|
161
183
|
...(this.$disableDefaultStyle() ? {} : { maxWidth: `${this.$containerWidth()}px` }),
|
|
162
|
-
...this.$
|
|
184
|
+
...this.$style(),
|
|
163
185
|
}));
|
|
164
186
|
$trStyle = computed(() => ({
|
|
165
187
|
...(this.$disableDefaultStyle() ? {} : { width: '100%' }),
|
|
@@ -167,11 +189,11 @@ class ContainerComponent {
|
|
|
167
189
|
$innerHtmlPre = computed(() => `<!--[if mso]><table align="${this.$alignment()}" width="${this.$containerWidth()}" style="border-spacing: 0; width:${this.$containerWidth()}px;" role="presentation"><tr><td><![endif]-->`);
|
|
168
190
|
$innerHtmlPost = computed(() => `<!--[if mso]></td></tr></table><![endif]-->`);
|
|
169
191
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
170
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ContainerComponent, isStandalone: true, selector: "ng-email-container", inputs: { $
|
|
192
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ContainerComponent, isStandalone: true, selector: "ng-email-container", inputs: { $style: { classPropertyName: "$style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, $styleClass: { classPropertyName: "$styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, $alignment: { classPropertyName: "$alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, $disableDefaultStyle: { classPropertyName: "$disableDefaultStyle", publicName: "disableDefaultStyle", isSignal: true, isRequired: false, transformFunction: null }, $containerWidth: { classPropertyName: "$containerWidth", publicName: "containerWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let containerWidth = $containerWidth();\n@let alignment = $alignment();\n\n<div [style]=\"{ tableLayout: 'fixed', width: '100%' }\">\n <div [style]=\"{ margin: '0 auto', maxWidth: containerWidth }\">\n <noscript [attr.data-html]=\"$innerHtmlPre()\"></noscript>\n <table\n [align]=\"alignment\"\n [width]=\"'100%'\"\n role=\"presentation\"\n [cellSpacing]=\"0\"\n [cellPadding]=\"0\"\n [border]=\"0\"\n [style]=\"$containerStyle()\"\n [class]=\"$styleClass()\"\n >\n <tbody>\n <tr [style]=\"$trStyle()\">\n <td [align]=\"alignment\">\n <ng-content></ng-content>\n </td>\n </tr>\n </tbody>\n </table>\n <noscript [attr.data-html]=\"$innerHtmlPost()\"></noscript>\n </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
171
193
|
}
|
|
172
194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ContainerComponent, decorators: [{
|
|
173
195
|
type: Component,
|
|
174
|
-
args: [{ selector: 'ng-email-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "@let containerWidth = $containerWidth();\n@let alignment = $alignment();\n\n<div [style]=\"{ tableLayout: 'fixed', width: '100%' }\">\n <div [style]=\"{ margin: '0 auto', maxWidth: containerWidth }\">\n <noscript [attr.data-html]=\"$innerHtmlPre()\"></noscript>\n <table\n [align]=\"alignment\"\n [width]=\"'100%'\"\n role=\"presentation\"\n [cellSpacing]=\"0\"\n [cellPadding]=\"0\"\n [border]=\"0\"\n [style]=\"$
|
|
196
|
+
args: [{ selector: 'ng-email-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "@let containerWidth = $containerWidth();\n@let alignment = $alignment();\n\n<div [style]=\"{ tableLayout: 'fixed', width: '100%' }\">\n <div [style]=\"{ margin: '0 auto', maxWidth: containerWidth }\">\n <noscript [attr.data-html]=\"$innerHtmlPre()\"></noscript>\n <table\n [align]=\"alignment\"\n [width]=\"'100%'\"\n role=\"presentation\"\n [cellSpacing]=\"0\"\n [cellPadding]=\"0\"\n [border]=\"0\"\n [style]=\"$containerStyle()\"\n [class]=\"$styleClass()\"\n >\n <tbody>\n <tr [style]=\"$trStyle()\">\n <td [align]=\"alignment\">\n <ng-content></ng-content>\n </td>\n </tr>\n </tbody>\n </table>\n <noscript [attr.data-html]=\"$innerHtmlPost()\"></noscript>\n </div>\n</div>\n" }]
|
|
175
197
|
}] });
|
|
176
198
|
|
|
177
199
|
class HeadComponent {
|
|
@@ -378,7 +400,8 @@ const HTMLElements = [
|
|
|
378
400
|
|
|
379
401
|
class HeadingComponent {
|
|
380
402
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
381
|
-
$
|
|
403
|
+
$style = input(null, { alias: 'style' });
|
|
404
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
382
405
|
$as = input('h1', { alias: 'as' });
|
|
383
406
|
$m = input(undefined, { alias: 'm' });
|
|
384
407
|
$mx = input(undefined, { alias: 'mx' });
|
|
@@ -387,7 +410,7 @@ class HeadingComponent {
|
|
|
387
410
|
$mr = input(undefined, { alias: 'mr' });
|
|
388
411
|
$mb = input(undefined, { alias: 'mb' });
|
|
389
412
|
$ml = input(undefined, { alias: 'ml' });
|
|
390
|
-
$
|
|
413
|
+
$headingStyle = computed(() => {
|
|
391
414
|
return styleToString({
|
|
392
415
|
...withMargin({
|
|
393
416
|
m: this.$m(),
|
|
@@ -398,22 +421,23 @@ class HeadingComponent {
|
|
|
398
421
|
mb: this.$mb(),
|
|
399
422
|
ml: this.$ml(),
|
|
400
423
|
}),
|
|
401
|
-
...(this.$
|
|
424
|
+
...(this.$style() ?? {}),
|
|
402
425
|
});
|
|
403
426
|
});
|
|
404
427
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
405
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: HeadingComponent, isStandalone: true, selector: "ng-email-heading", inputs: { $
|
|
428
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: HeadingComponent, isStandalone: true, selector: "ng-email-heading", inputs: { $style: { classPropertyName: "$style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, $styleClass: { classPropertyName: "$styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, $as: { classPropertyName: "$as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null }, $m: { classPropertyName: "$m", publicName: "m", isSignal: true, isRequired: false, transformFunction: null }, $mx: { classPropertyName: "$mx", publicName: "mx", isSignal: true, isRequired: false, transformFunction: null }, $my: { classPropertyName: "$my", publicName: "my", isSignal: true, isRequired: false, transformFunction: null }, $mt: { classPropertyName: "$mt", publicName: "mt", isSignal: true, isRequired: false, transformFunction: null }, $mr: { classPropertyName: "$mr", publicName: "mr", isSignal: true, isRequired: false, transformFunction: null }, $mb: { classPropertyName: "$mb", publicName: "mb", isSignal: true, isRequired: false, transformFunction: null }, $ml: { classPropertyName: "$ml", publicName: "ml", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let heading = $as();\n@let style = $headingStyle();\n@let styleClass = $styleClass();\n@if (heading === 'h1') {\n <h1\n [style]=\"style\"\n [class]=\"styleClass\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h1>\n} @else if (heading === 'h2') {\n <h2\n [style]=\"style\"\n [class]=\"styleClass\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h2>\n} @else if (heading === 'h3') {\n <h3\n [style]=\"style\"\n [class]=\"styleClass\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h3>\n} @else if (heading === 'h4') {\n <h4\n [style]=\"style\"\n [class]=\"styleClass\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h4>\n} @else if (heading === 'h5') {\n <h5\n [style]=\"style\"\n [class]=\"styleClass\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h5>\n} @else if (heading === 'h6') {\n <h6\n [style]=\"style\"\n [class]=\"styleClass\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h6>\n} @else {\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n}\n<ng-template #content><ng-content></ng-content></ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
406
429
|
}
|
|
407
430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HeadingComponent, decorators: [{
|
|
408
431
|
type: Component,
|
|
409
|
-
args: [{ selector: 'ng-email-heading', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let heading = $as();\n@let style = $
|
|
432
|
+
args: [{ selector: 'ng-email-heading', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let heading = $as();\n@let style = $headingStyle();\n@let styleClass = $styleClass();\n@if (heading === 'h1') {\n <h1\n [style]=\"style\"\n [class]=\"styleClass\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h1>\n} @else if (heading === 'h2') {\n <h2\n [style]=\"style\"\n [class]=\"styleClass\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h2>\n} @else if (heading === 'h3') {\n <h3\n [style]=\"style\"\n [class]=\"styleClass\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h3>\n} @else if (heading === 'h4') {\n <h4\n [style]=\"style\"\n [class]=\"styleClass\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h4>\n} @else if (heading === 'h5') {\n <h5\n [style]=\"style\"\n [class]=\"styleClass\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h5>\n} @else if (heading === 'h6') {\n <h6\n [style]=\"style\"\n [class]=\"styleClass\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h6>\n} @else {\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n}\n<ng-template #content><ng-content></ng-content></ng-template>\n" }]
|
|
410
433
|
}] });
|
|
411
434
|
|
|
412
435
|
class HrComponent {
|
|
413
436
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
414
|
-
$
|
|
437
|
+
$style = input(null, { alias: 'style' });
|
|
438
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
415
439
|
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
416
|
-
$
|
|
440
|
+
$hrStyle = computed(() => {
|
|
417
441
|
return {
|
|
418
442
|
...(this.$disableDefaultStyle()
|
|
419
443
|
? {}
|
|
@@ -422,38 +446,42 @@ class HrComponent {
|
|
|
422
446
|
border: 'none',
|
|
423
447
|
borderTop: '1px solid #eaeaea',
|
|
424
448
|
}),
|
|
425
|
-
...(this.$
|
|
449
|
+
...(this.$style() ?? {}),
|
|
426
450
|
};
|
|
427
451
|
});
|
|
428
452
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HrComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
429
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: HrComponent, isStandalone: true, selector: "ng-email-hr", inputs: { $
|
|
453
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: HrComponent, isStandalone: true, selector: "ng-email-hr", inputs: { $style: { classPropertyName: "$style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, $styleClass: { classPropertyName: "$styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, $disableDefaultStyle: { classPropertyName: "$disableDefaultStyle", publicName: "disableDefaultStyle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<hr\n [style]=\"$hrStyle()\"\n [class]=\"$styleClass()\"\n/>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
430
454
|
}
|
|
431
455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HrComponent, decorators: [{
|
|
432
456
|
type: Component,
|
|
433
|
-
args: [{ selector: 'ng-email-hr', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr
|
|
457
|
+
args: [{ selector: 'ng-email-hr', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr\n [style]=\"$hrStyle()\"\n [class]=\"$styleClass()\"\n/>\n" }]
|
|
434
458
|
}] });
|
|
435
459
|
|
|
436
460
|
class HtmlComponent {
|
|
437
461
|
$lang = input('en', { alias: 'lang' });
|
|
438
462
|
$dir = input('ltr', { alias: 'dir' });
|
|
439
463
|
$enableVML = input(true, { alias: 'enableVML' });
|
|
464
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
465
|
+
$style = input(null, { alias: 'style' });
|
|
466
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
440
467
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HtmlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
441
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: HtmlComponent, isStandalone: true, selector: "ng-email-html", inputs: { $lang: { classPropertyName: "$lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, $dir: { classPropertyName: "$dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, $enableVML: { classPropertyName: "$enableVML", publicName: "enableVML", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let enableVML = $enableVML();\n@let lang = $lang();\n@let dir = $dir();\n\n<html\n id=\"__angular-email\"\n [lang]=\"lang\"\n [dir]=\"dir\"\n [attr.xmlns:o]=\"enableVML ? 'urn:schemas-microsoft-com:office:office' : undefined\"\n [attr.xmlns:v]=\"enableVML ? 'urn:schemas-microsoft-com:vml' : undefined\"\n>\n <ng-content />\n</html>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
468
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: HtmlComponent, isStandalone: true, selector: "ng-email-html", inputs: { $lang: { classPropertyName: "$lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, $dir: { classPropertyName: "$dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, $enableVML: { classPropertyName: "$enableVML", publicName: "enableVML", isSignal: true, isRequired: false, transformFunction: null }, $style: { classPropertyName: "$style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, $styleClass: { classPropertyName: "$styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let enableVML = $enableVML();\n@let lang = $lang();\n@let dir = $dir();\n\n<html\n id=\"__angular-email\"\n [lang]=\"lang\"\n [dir]=\"dir\"\n [attr.xmlns:o]=\"enableVML ? 'urn:schemas-microsoft-com:office:office' : undefined\"\n [attr.xmlns:v]=\"enableVML ? 'urn:schemas-microsoft-com:vml' : undefined\"\n [style]=\"$style()\"\n [class]=\"$styleClass()\"\n>\n <ng-content />\n</html>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
442
469
|
}
|
|
443
470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HtmlComponent, decorators: [{
|
|
444
471
|
type: Component,
|
|
445
|
-
args: [{ selector: 'ng-email-html', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let enableVML = $enableVML();\n@let lang = $lang();\n@let dir = $dir();\n\n<html\n id=\"__angular-email\"\n [lang]=\"lang\"\n [dir]=\"dir\"\n [attr.xmlns:o]=\"enableVML ? 'urn:schemas-microsoft-com:office:office' : undefined\"\n [attr.xmlns:v]=\"enableVML ? 'urn:schemas-microsoft-com:vml' : undefined\"\n>\n <ng-content />\n</html>\n" }]
|
|
472
|
+
args: [{ selector: 'ng-email-html', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let enableVML = $enableVML();\n@let lang = $lang();\n@let dir = $dir();\n\n<html\n id=\"__angular-email\"\n [lang]=\"lang\"\n [dir]=\"dir\"\n [attr.xmlns:o]=\"enableVML ? 'urn:schemas-microsoft-com:office:office' : undefined\"\n [attr.xmlns:v]=\"enableVML ? 'urn:schemas-microsoft-com:vml' : undefined\"\n [style]=\"$style()\"\n [class]=\"$styleClass()\"\n>\n <ng-content />\n</html>\n" }]
|
|
446
473
|
}] });
|
|
447
474
|
|
|
448
475
|
class ImgComponent {
|
|
449
476
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
450
|
-
$
|
|
477
|
+
$style = input(null, { alias: 'style' });
|
|
478
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
451
479
|
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
452
480
|
$alt = input('', { alias: 'alt' });
|
|
453
481
|
$src = input('', { alias: 'src' });
|
|
454
482
|
$width = input('0', { alias: 'width' });
|
|
455
483
|
$height = input('0', { alias: 'height' });
|
|
456
|
-
$
|
|
484
|
+
$imageStyle = computed(() => {
|
|
457
485
|
return {
|
|
458
486
|
...(this.$disableDefaultStyle()
|
|
459
487
|
? {}
|
|
@@ -463,24 +491,25 @@ class ImgComponent {
|
|
|
463
491
|
border: 'none',
|
|
464
492
|
textDecoration: 'none',
|
|
465
493
|
}),
|
|
466
|
-
...(this.$
|
|
494
|
+
...(this.$style() ?? {}),
|
|
467
495
|
};
|
|
468
496
|
});
|
|
469
497
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ImgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
470
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ImgComponent, isStandalone: true, selector: "ng-email-img", inputs: { $
|
|
498
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ImgComponent, isStandalone: true, selector: "ng-email-img", inputs: { $style: { classPropertyName: "$style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, $styleClass: { classPropertyName: "$styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, $disableDefaultStyle: { classPropertyName: "$disableDefaultStyle", publicName: "disableDefaultStyle", isSignal: true, isRequired: false, transformFunction: null }, $alt: { classPropertyName: "$alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, $src: { classPropertyName: "$src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, $width: { classPropertyName: "$width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, $height: { classPropertyName: "$height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<img\n [style]=\"$imageStyle()\"\n [class]=\"$styleClass()\"\n [alt]=\"$alt()\"\n [src]=\"$src()\"\n [width]=\"$width()\"\n [height]=\"$height()\"\n/>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
471
499
|
}
|
|
472
500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ImgComponent, decorators: [{
|
|
473
501
|
type: Component,
|
|
474
|
-
args: [{ selector: 'ng-email-img', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n [style]=\"$
|
|
502
|
+
args: [{ selector: 'ng-email-img', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n [style]=\"$imageStyle()\"\n [class]=\"$styleClass()\"\n [alt]=\"$alt()\"\n [src]=\"$src()\"\n [width]=\"$width()\"\n [height]=\"$height()\"\n/>\n" }]
|
|
475
503
|
}] });
|
|
476
504
|
|
|
477
505
|
class LinkComponent {
|
|
478
506
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
479
|
-
$
|
|
507
|
+
$style = input(null, { alias: 'style' });
|
|
508
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
480
509
|
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
481
510
|
$href = input('', { alias: 'href' });
|
|
482
511
|
$target = input('_blank', { alias: 'target' });
|
|
483
|
-
$
|
|
512
|
+
$linkStyle = computed(() => {
|
|
484
513
|
return {
|
|
485
514
|
...(this.$disableDefaultStyle()
|
|
486
515
|
? {}
|
|
@@ -488,54 +517,59 @@ class LinkComponent {
|
|
|
488
517
|
color: '#067df7',
|
|
489
518
|
textDecoration: 'none',
|
|
490
519
|
}),
|
|
491
|
-
...(this.$
|
|
520
|
+
...(this.$style() ?? {}),
|
|
492
521
|
};
|
|
493
522
|
});
|
|
494
523
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
495
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: LinkComponent, isStandalone: true, selector: "ng-email-link", inputs: { $
|
|
524
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: LinkComponent, isStandalone: true, selector: "ng-email-link", inputs: { $style: { classPropertyName: "$style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, $styleClass: { classPropertyName: "$styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, $disableDefaultStyle: { classPropertyName: "$disableDefaultStyle", publicName: "disableDefaultStyle", isSignal: true, isRequired: false, transformFunction: null }, $href: { classPropertyName: "$href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, $target: { classPropertyName: "$target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a\n [style]=\"$linkStyle()\"\n [class]=\"$styleClass()\"\n [href]=\"$href()\"\n [target]=\"$target()\"\n ><ng-content></ng-content\n></a>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
496
525
|
}
|
|
497
526
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: LinkComponent, decorators: [{
|
|
498
527
|
type: Component,
|
|
499
|
-
args: [{ selector: 'ng-email-link', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n [style]=\"$
|
|
528
|
+
args: [{ selector: 'ng-email-link', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n [style]=\"$linkStyle()\"\n [class]=\"$styleClass()\"\n [href]=\"$href()\"\n [target]=\"$target()\"\n ><ng-content></ng-content\n></a>\n" }]
|
|
500
529
|
}] });
|
|
501
530
|
|
|
502
531
|
class PreviewComponent {
|
|
503
532
|
$preview = input('', { alias: 'preview' });
|
|
533
|
+
maxLength = 150;
|
|
504
534
|
$text = computed(() => {
|
|
505
535
|
const preview = this.$preview();
|
|
506
|
-
|
|
507
|
-
|
|
536
|
+
if (preview.length >= this.maxLength)
|
|
537
|
+
return null;
|
|
538
|
+
const whiteSpaceCodes = '\u00A0\u200C\u200B\u200D\u200E\u200F\uFEFF';
|
|
539
|
+
return whiteSpaceCodes.repeat(this.maxLength - preview.length);
|
|
508
540
|
});
|
|
509
541
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
510
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
542
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: PreviewComponent, isStandalone: true, selector: "ng-email-preview", inputs: { $preview: { classPropertyName: "$preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let text = $text();\n\n<div\n id=\"__angular-email-preview\"\n style=\"display: none; overflow: hidden; line-height: 1px; opacity: 0; max-height: 0; max-width: 0\"\n>\n {{ $preview() }}\n @if (text) {\n <span [attr.data-html]=\"text\"></span>\n }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
511
543
|
}
|
|
512
544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PreviewComponent, decorators: [{
|
|
513
545
|
type: Component,
|
|
514
|
-
args: [{ selector: 'ng-email-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n id=\"__angular-email-preview\"\n style=\"display: none; overflow: hidden; line-height: 1px; opacity: 0; max-height: 0; max-width: 0\"\n>\n {{ $preview() }}\n</div>\n" }]
|
|
546
|
+
args: [{ selector: 'ng-email-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let text = $text();\n\n<div\n id=\"__angular-email-preview\"\n style=\"display: none; overflow: hidden; line-height: 1px; opacity: 0; max-height: 0; max-width: 0\"\n>\n {{ $preview() }}\n @if (text) {\n <span [attr.data-html]=\"text\"></span>\n }\n</div>\n" }]
|
|
515
547
|
}] });
|
|
516
548
|
|
|
517
549
|
class SectionComponent {
|
|
518
550
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
519
|
-
$
|
|
520
|
-
$
|
|
551
|
+
$style = input(null, { alias: 'style' });
|
|
552
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
553
|
+
$sectionStyle = computed(() => {
|
|
521
554
|
return styleToString({
|
|
522
555
|
width: '100%',
|
|
523
|
-
...(this.$
|
|
556
|
+
...(this.$style() ?? {}),
|
|
524
557
|
});
|
|
525
558
|
});
|
|
526
559
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
527
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: SectionComponent, isStandalone: true, selector: "ng-email-section", inputs: { $
|
|
560
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: SectionComponent, isStandalone: true, selector: "ng-email-section", inputs: { $style: { classPropertyName: "$style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, $styleClass: { classPropertyName: "$styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<table\n [align]=\"'center'\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n width=\"100%\"\n role=\"presentation\"\n [style]=\"$sectionStyle()\"\n [class]=\"$styleClass()\"\n>\n <tbody>\n <tr>\n <td>\n <ng-content />\n </td>\n </tr>\n </tbody>\n</table>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
528
561
|
}
|
|
529
562
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: SectionComponent, decorators: [{
|
|
530
563
|
type: Component,
|
|
531
|
-
args: [{ selector: 'ng-email-section', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<table\n [align]=\"'center'\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n width=\"100%\"\n role=\"presentation\"\n [style]=\"$
|
|
564
|
+
args: [{ selector: 'ng-email-section', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<table\n [align]=\"'center'\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n width=\"100%\"\n role=\"presentation\"\n [style]=\"$sectionStyle()\"\n [class]=\"$styleClass()\"\n>\n <tbody>\n <tr>\n <td>\n <ng-content />\n </td>\n </tr>\n </tbody>\n</table>\n" }]
|
|
532
565
|
}] });
|
|
533
566
|
|
|
534
567
|
class TextComponent {
|
|
535
568
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
536
|
-
$
|
|
569
|
+
$style = input(null, { alias: 'style' });
|
|
570
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
537
571
|
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
538
|
-
$
|
|
572
|
+
$textStyle = computed(() => {
|
|
539
573
|
return {
|
|
540
574
|
...(this.$disableDefaultStyle()
|
|
541
575
|
? {}
|
|
@@ -544,47 +578,49 @@ class TextComponent {
|
|
|
544
578
|
lineHeight: '24px',
|
|
545
579
|
margin: '16px 0',
|
|
546
580
|
}),
|
|
547
|
-
...(this.$
|
|
581
|
+
...(this.$style() ?? {}),
|
|
548
582
|
};
|
|
549
583
|
});
|
|
550
584
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
551
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: TextComponent, isStandalone: true, selector: "ng-email-text", inputs: { $
|
|
585
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: TextComponent, isStandalone: true, selector: "ng-email-text", inputs: { $style: { classPropertyName: "$style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, $styleClass: { classPropertyName: "$styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, $disableDefaultStyle: { classPropertyName: "$disableDefaultStyle", publicName: "disableDefaultStyle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p\n [style]=\"$textStyle()\"\n [class]=\"$styleClass()\"\n>\n <ng-content></ng-content>\n</p>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
552
586
|
}
|
|
553
587
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TextComponent, decorators: [{
|
|
554
588
|
type: Component,
|
|
555
|
-
args: [{ selector: 'ng-email-text', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p
|
|
589
|
+
args: [{ selector: 'ng-email-text', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p\n [style]=\"$textStyle()\"\n [class]=\"$styleClass()\"\n>\n <ng-content></ng-content>\n</p>\n" }]
|
|
556
590
|
}] });
|
|
557
591
|
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
const
|
|
570
|
-
|
|
571
|
-
const content = $(this).attr('data-html');
|
|
572
|
-
if (content) {
|
|
573
|
-
$(this).replaceWith(`${content}\n`);
|
|
574
|
-
}
|
|
575
|
-
});
|
|
576
|
-
const html = $.html().replaceAll('<', '<').replaceAll('>', '>');
|
|
592
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
593
|
+
/**
|
|
594
|
+
* Renders an Angular component to HTML and applies transformations.
|
|
595
|
+
*
|
|
596
|
+
* @param component - The Angular component to render.
|
|
597
|
+
* @param selector - The Component selector.
|
|
598
|
+
* @param options - Optional rendering options.
|
|
599
|
+
*
|
|
600
|
+
* @returns {Promise<string>} The rendered HTML or plain text.
|
|
601
|
+
*/
|
|
602
|
+
const render = async ({ component, selector, props, options }) => {
|
|
603
|
+
const normalizedHtml = await renderNgComponent(component, selector, props);
|
|
604
|
+
const html = applyHtmlTransformations(normalizedHtml, options?.cssFilePaths);
|
|
577
605
|
if (options?.plainText) {
|
|
578
606
|
return renderAsPlainText(html);
|
|
579
607
|
}
|
|
580
608
|
const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
|
|
581
|
-
const
|
|
609
|
+
const tailwindConfig = await getTailwindConfig(options?.tailwindConfig);
|
|
610
|
+
const markup = await inlineCss(html, !!options?.pretty, tailwindConfig);
|
|
582
611
|
const document = `${doctype}${markup}`;
|
|
583
|
-
if (options?.pretty) {
|
|
584
|
-
return pretty(document);
|
|
585
|
-
}
|
|
586
612
|
return document;
|
|
587
613
|
};
|
|
614
|
+
/**
|
|
615
|
+
* Converts the given markup string to plain text while skipping certain elements.
|
|
616
|
+
*
|
|
617
|
+
* @param markup - The HTML markup string to be converted to plain text.
|
|
618
|
+
* @returns The plain text representation of the given markup.
|
|
619
|
+
*
|
|
620
|
+
* The conversion skips the following elements:
|
|
621
|
+
* - `<img>` tags
|
|
622
|
+
* - Elements with the ID `__angular-email-preview`
|
|
623
|
+
*/
|
|
588
624
|
const renderAsPlainText = (markup) => {
|
|
589
625
|
return convert(markup, {
|
|
590
626
|
selectors: [
|
|
@@ -593,6 +629,147 @@ const renderAsPlainText = (markup) => {
|
|
|
593
629
|
],
|
|
594
630
|
});
|
|
595
631
|
};
|
|
632
|
+
/**
|
|
633
|
+
* Renders an Angular component to html.
|
|
634
|
+
*
|
|
635
|
+
* @param component - The Angular component to render.
|
|
636
|
+
* @param selector - The CSS selector for the component.
|
|
637
|
+
* @returns A promise that resolves to the rendered HTML string.
|
|
638
|
+
*/
|
|
639
|
+
const renderNgComponent = async (component, selector, props) => {
|
|
640
|
+
const bootstrap = async () => {
|
|
641
|
+
const appRef = await bootstrapApplication(component, {
|
|
642
|
+
providers: [provideExperimentalZonelessChangeDetection(), provideServerRendering()],
|
|
643
|
+
});
|
|
644
|
+
appRef.components.forEach((componentRef) => {
|
|
645
|
+
Object.entries(props ?? {}).forEach(([key, value]) => {
|
|
646
|
+
if (key in componentRef.instance) {
|
|
647
|
+
componentRef.instance[key] = value;
|
|
648
|
+
}
|
|
649
|
+
});
|
|
650
|
+
componentRef.changeDetectorRef.detectChanges();
|
|
651
|
+
});
|
|
652
|
+
return appRef;
|
|
653
|
+
};
|
|
654
|
+
const ngHtml = await renderApplication(bootstrap, {
|
|
655
|
+
document: `<${selector}></${selector}>`,
|
|
656
|
+
});
|
|
657
|
+
return normalizeNgHtml(ngHtml, selector);
|
|
658
|
+
};
|
|
659
|
+
/**
|
|
660
|
+
* Normalizes the provided HTML string by extracting the content within the specified selector
|
|
661
|
+
* and removing any non-standard HTML elements.
|
|
662
|
+
*
|
|
663
|
+
* @param html - The HTML string to be normalized.
|
|
664
|
+
* @param selector - The CSS selector used to identify the content to be extracted.
|
|
665
|
+
* @returns The normalized HTML string with the content of the specified selector and without non-standard HTML elements.
|
|
666
|
+
*/
|
|
667
|
+
const normalizeNgHtml = (html, selector) => {
|
|
668
|
+
const nsHtmlRegex = new RegExp(`<(?!(\\/?(${HTMLElements.join('|')})))[^>]+>`, 'gm');
|
|
669
|
+
return html
|
|
670
|
+
.replace(new RegExp(`.+<${selector}[\\s\\S]*?>([\\s\\S]*?)<\\/${selector}>.+`, 'gm'), '$1')
|
|
671
|
+
.replace(nsHtmlRegex, '');
|
|
672
|
+
};
|
|
673
|
+
/**
|
|
674
|
+
* Applies HTML transformations to the provided HTML string.
|
|
675
|
+
*
|
|
676
|
+
* This function uses Cheerio to load the HTML and perform transformations such as
|
|
677
|
+
* replacing placeholders and applying styles from the provided CSS file paths.
|
|
678
|
+
* It also ensures that certain HTML entities are replaced with their corresponding
|
|
679
|
+
* characters.
|
|
680
|
+
*
|
|
681
|
+
* @param html - The HTML string to transform.
|
|
682
|
+
* @param cssFilePaths - An optional array of CSS file paths to apply styles from.
|
|
683
|
+
* @returns The transformed HTML string.
|
|
684
|
+
*/
|
|
685
|
+
const applyHtmlTransformations = (html, cssFilePaths) => {
|
|
686
|
+
const $ = cheerio.load(html, { xml: { lowerCaseAttributeNames: false, lowerCaseTags: false } });
|
|
687
|
+
replacePlaceholders($);
|
|
688
|
+
applyStyles($, cssFilePaths ?? []);
|
|
689
|
+
return $.html().replaceAll('<', '<').replaceAll('>', '>').replaceAll('&nbsp;', ' ');
|
|
690
|
+
};
|
|
691
|
+
/**
|
|
692
|
+
* Replaces elements with the `data-html` attribute with their corresponding HTML content.
|
|
693
|
+
*
|
|
694
|
+
* This function iterates over all elements that have the `data-html` attribute,
|
|
695
|
+
* retrieves the value of the attribute, and replaces the element with the HTML content
|
|
696
|
+
* specified in the attribute.
|
|
697
|
+
*
|
|
698
|
+
* @param $ - The Cheerio API instance used to manipulate the HTML.
|
|
699
|
+
*/
|
|
700
|
+
const replacePlaceholders = ($) => {
|
|
701
|
+
$('[data-html]').each(function () {
|
|
702
|
+
const content = $(this).attr('data-html');
|
|
703
|
+
if (content) {
|
|
704
|
+
$(this).replaceWith(`${content}\n`);
|
|
705
|
+
}
|
|
706
|
+
});
|
|
707
|
+
};
|
|
708
|
+
/**
|
|
709
|
+
* Applies the styles from the specified CSS file paths to the HTML document.
|
|
710
|
+
*
|
|
711
|
+
* @param $ - The Cheerio API instance used to manipulate the HTML document.
|
|
712
|
+
* @param cssFilePaths - An array of file paths to the CSS files to be applied.
|
|
713
|
+
*/
|
|
714
|
+
const applyStyles = ($, cssFilePaths) => {
|
|
715
|
+
(cssFilePaths ?? []).forEach((path) => {
|
|
716
|
+
const styleContent = readFileSync(path, { encoding: 'utf-8' });
|
|
717
|
+
$('head').append(`<style>${styleContent}</style>`);
|
|
718
|
+
});
|
|
719
|
+
};
|
|
720
|
+
/**
|
|
721
|
+
* Inlines CSS into the provided HTML string using Maizzle and Tailwind CSS.
|
|
722
|
+
*
|
|
723
|
+
* @param html - The HTML string to process.
|
|
724
|
+
* @param pretty - Whether to prettify the output HTML. Defaults to `false`.
|
|
725
|
+
* @param tailwindConfig - Optional Tailwind CSS configuration to use. If not provided, the `tailwindcss-preset-email` preset will be used.
|
|
726
|
+
* @returns A promise that resolves to the processed HTML string with inlined CSS.
|
|
727
|
+
*/
|
|
728
|
+
const inlineCss = async (html, pretty = false, tailwindConfig) => {
|
|
729
|
+
//@ts-expect-error: missing exports
|
|
730
|
+
const tailwindcssPresetEmail = (await import('tailwindcss-preset-email')).default;
|
|
731
|
+
return (await render$1(html, {
|
|
732
|
+
css: {
|
|
733
|
+
shorthand: true,
|
|
734
|
+
inline: {
|
|
735
|
+
applyWidthAttributes: true,
|
|
736
|
+
applyHeightAttributes: true,
|
|
737
|
+
},
|
|
738
|
+
purge: {
|
|
739
|
+
removeHTMLComments: false,
|
|
740
|
+
},
|
|
741
|
+
tailwind: {
|
|
742
|
+
presets: tailwindConfig ? [tailwindConfig] : [tailwindcssPresetEmail],
|
|
743
|
+
content: [
|
|
744
|
+
{
|
|
745
|
+
raw: html,
|
|
746
|
+
extension: 'html',
|
|
747
|
+
},
|
|
748
|
+
],
|
|
749
|
+
},
|
|
750
|
+
},
|
|
751
|
+
prettify: pretty,
|
|
752
|
+
minify: !pretty,
|
|
753
|
+
})).html;
|
|
754
|
+
};
|
|
755
|
+
/**
|
|
756
|
+
* Asynchronously retrieves the Tailwind CSS configuration.
|
|
757
|
+
*
|
|
758
|
+
* @param tailwindConfig - The path to the Tailwind CSS configuration file or a partial configuration object.
|
|
759
|
+
* @returns A promise that resolves to a partial Tailwind CSS configuration object, or `undefined` if no configuration is provided.
|
|
760
|
+
*/
|
|
761
|
+
const getTailwindConfig = async (tailwindConfig) => {
|
|
762
|
+
let config;
|
|
763
|
+
if (tailwindConfig) {
|
|
764
|
+
if (typeof tailwindConfig === 'string') {
|
|
765
|
+
config = (await import(tailwindConfig)).default;
|
|
766
|
+
}
|
|
767
|
+
else {
|
|
768
|
+
config = tailwindConfig;
|
|
769
|
+
}
|
|
770
|
+
}
|
|
771
|
+
return config;
|
|
772
|
+
};
|
|
596
773
|
|
|
597
774
|
/*
|
|
598
775
|
* Public API Surface of angular-email
|