@keycloakify/angular-email 0.0.1-rc.2 → 0.0.1-rc.3
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 +239 -77
- 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/section/section.component.d.ts +4 -3
- package/lib/components/text/text.component.d.ts +4 -3
- package/lib/render.d.ts +13 -0
- 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,15 +517,15 @@ 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 {
|
|
@@ -516,26 +545,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
516
545
|
|
|
517
546
|
class SectionComponent {
|
|
518
547
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
519
|
-
$
|
|
520
|
-
$
|
|
548
|
+
$style = input(null, { alias: 'style' });
|
|
549
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
550
|
+
$sectionStyle = computed(() => {
|
|
521
551
|
return styleToString({
|
|
522
552
|
width: '100%',
|
|
523
|
-
...(this.$
|
|
553
|
+
...(this.$style() ?? {}),
|
|
524
554
|
});
|
|
525
555
|
});
|
|
526
556
|
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: { $
|
|
557
|
+
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
558
|
}
|
|
529
559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: SectionComponent, decorators: [{
|
|
530
560
|
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]=\"$
|
|
561
|
+
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
562
|
}] });
|
|
533
563
|
|
|
534
564
|
class TextComponent {
|
|
535
565
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
536
|
-
$
|
|
566
|
+
$style = input(null, { alias: 'style' });
|
|
567
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
537
568
|
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
538
|
-
$
|
|
569
|
+
$textStyle = computed(() => {
|
|
539
570
|
return {
|
|
540
571
|
...(this.$disableDefaultStyle()
|
|
541
572
|
? {}
|
|
@@ -544,55 +575,186 @@ class TextComponent {
|
|
|
544
575
|
lineHeight: '24px',
|
|
545
576
|
margin: '16px 0',
|
|
546
577
|
}),
|
|
547
|
-
...(this.$
|
|
578
|
+
...(this.$style() ?? {}),
|
|
548
579
|
};
|
|
549
580
|
});
|
|
550
581
|
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: { $
|
|
582
|
+
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
583
|
}
|
|
553
584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TextComponent, decorators: [{
|
|
554
585
|
type: Component,
|
|
555
|
-
args: [{ selector: 'ng-email-text', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p
|
|
586
|
+
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
587
|
}] });
|
|
557
588
|
|
|
589
|
+
/**
|
|
590
|
+
* Renders an Angular component to HTML and applies transformations.
|
|
591
|
+
*
|
|
592
|
+
* @param component - The Angular component to render.
|
|
593
|
+
* @param selector - The Component selector.
|
|
594
|
+
* @param options - Optional rendering options.
|
|
595
|
+
*
|
|
596
|
+
* @returns {Promise<string>} The rendered HTML or plain text.
|
|
597
|
+
*/
|
|
558
598
|
const render = async ({ component, selector, options }) => {
|
|
559
|
-
const
|
|
599
|
+
const normalizedHtml = await renderNgComponent(component, selector);
|
|
600
|
+
const html = applyHtmlTransformations(normalizedHtml, options?.cssFilePaths);
|
|
601
|
+
if (options?.plainText) {
|
|
602
|
+
return renderAsPlainText(html);
|
|
603
|
+
}
|
|
604
|
+
const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
|
|
605
|
+
const tailwindConfig = await getTailwindConfig(options?.tailwindConfig);
|
|
606
|
+
const markup = await inlineCss(html, !!options?.pretty, tailwindConfig);
|
|
607
|
+
const document = `${doctype}${markup}`;
|
|
608
|
+
return document;
|
|
609
|
+
};
|
|
610
|
+
/**
|
|
611
|
+
* Converts the given markup string to plain text while skipping certain elements.
|
|
612
|
+
*
|
|
613
|
+
* @param markup - The HTML markup string to be converted to plain text.
|
|
614
|
+
* @returns The plain text representation of the given markup.
|
|
615
|
+
*
|
|
616
|
+
* The conversion skips the following elements:
|
|
617
|
+
* - `<img>` tags
|
|
618
|
+
* - Elements with the ID `__angular-email-preview`
|
|
619
|
+
*/
|
|
620
|
+
const renderAsPlainText = (markup) => {
|
|
621
|
+
return convert(markup, {
|
|
622
|
+
selectors: [
|
|
623
|
+
{ selector: 'img', format: 'skip' },
|
|
624
|
+
{ selector: '#__angular-email-preview', format: 'skip' },
|
|
625
|
+
],
|
|
626
|
+
});
|
|
627
|
+
};
|
|
628
|
+
/**
|
|
629
|
+
* Renders an Angular component to html.
|
|
630
|
+
*
|
|
631
|
+
* @param component - The Angular component to render.
|
|
632
|
+
* @param selector - The CSS selector for the component.
|
|
633
|
+
* @returns A promise that resolves to the rendered HTML string.
|
|
634
|
+
*/
|
|
635
|
+
const renderNgComponent = async (component, selector) => {
|
|
560
636
|
const bootstrap = () => bootstrapApplication(component, {
|
|
561
637
|
providers: [provideExperimentalZonelessChangeDetection(), provideServerRendering()],
|
|
562
638
|
});
|
|
563
639
|
const ngHtml = await renderApplication(bootstrap, {
|
|
564
640
|
document: `<${selector}></${selector}>`,
|
|
565
641
|
});
|
|
566
|
-
|
|
642
|
+
return normalizeNgHtml(ngHtml, selector);
|
|
643
|
+
};
|
|
644
|
+
/**
|
|
645
|
+
* Normalizes the provided HTML string by extracting the content within the specified selector
|
|
646
|
+
* and removing any non-standard HTML elements.
|
|
647
|
+
*
|
|
648
|
+
* @param html - The HTML string to be normalized.
|
|
649
|
+
* @param selector - The CSS selector used to identify the content to be extracted.
|
|
650
|
+
* @returns The normalized HTML string with the content of the specified selector and without non-standard HTML elements.
|
|
651
|
+
*/
|
|
652
|
+
const normalizeNgHtml = (html, selector) => {
|
|
653
|
+
const nsHtmlRegex = new RegExp(`<(?!(\\/?(${HTMLElements.join('|')})))[^>]+>`, 'gm');
|
|
654
|
+
return html
|
|
567
655
|
.replace(new RegExp(`.+<${selector}[\\s\\S]*?>([\\s\\S]*?)<\\/${selector}>.+`, 'gm'), '$1')
|
|
568
656
|
.replace(nsHtmlRegex, '');
|
|
569
|
-
|
|
657
|
+
};
|
|
658
|
+
/**
|
|
659
|
+
* Applies HTML transformations to the provided HTML string.
|
|
660
|
+
*
|
|
661
|
+
* This function uses Cheerio to load the HTML and perform transformations such as
|
|
662
|
+
* replacing placeholders and applying styles from the provided CSS file paths.
|
|
663
|
+
* It also ensures that certain HTML entities are replaced with their corresponding
|
|
664
|
+
* characters.
|
|
665
|
+
*
|
|
666
|
+
* @param html - The HTML string to transform.
|
|
667
|
+
* @param cssFilePaths - An optional array of CSS file paths to apply styles from.
|
|
668
|
+
* @returns The transformed HTML string.
|
|
669
|
+
*/
|
|
670
|
+
const applyHtmlTransformations = (html, cssFilePaths) => {
|
|
671
|
+
const $ = cheerio.load(html, { xml: { lowerCaseAttributeNames: false, lowerCaseTags: false } });
|
|
672
|
+
replacePlaceholders($);
|
|
673
|
+
applyStyles($, cssFilePaths ?? []);
|
|
674
|
+
return $.html().replaceAll('<', '<').replaceAll('>', '>');
|
|
675
|
+
};
|
|
676
|
+
/**
|
|
677
|
+
* Replaces elements with the `data-html` attribute with their corresponding HTML content.
|
|
678
|
+
*
|
|
679
|
+
* This function iterates over all elements that have the `data-html` attribute,
|
|
680
|
+
* retrieves the value of the attribute, and replaces the element with the HTML content
|
|
681
|
+
* specified in the attribute.
|
|
682
|
+
*
|
|
683
|
+
* @param $ - The Cheerio API instance used to manipulate the HTML.
|
|
684
|
+
*/
|
|
685
|
+
const replacePlaceholders = ($) => {
|
|
570
686
|
$('[data-html]').each(function () {
|
|
571
687
|
const content = $(this).attr('data-html');
|
|
572
688
|
if (content) {
|
|
573
689
|
$(this).replaceWith(`${content}\n`);
|
|
574
690
|
}
|
|
575
691
|
});
|
|
576
|
-
const html = $.html().replaceAll('<', '<').replaceAll('>', '>');
|
|
577
|
-
if (options?.plainText) {
|
|
578
|
-
return renderAsPlainText(html);
|
|
579
|
-
}
|
|
580
|
-
const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
|
|
581
|
-
const markup = html;
|
|
582
|
-
const document = `${doctype}${markup}`;
|
|
583
|
-
if (options?.pretty) {
|
|
584
|
-
return pretty(document);
|
|
585
|
-
}
|
|
586
|
-
return document;
|
|
587
692
|
};
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
693
|
+
/**
|
|
694
|
+
* Applies the styles from the specified CSS file paths to the HTML document.
|
|
695
|
+
*
|
|
696
|
+
* @param $ - The Cheerio API instance used to manipulate the HTML document.
|
|
697
|
+
* @param cssFilePaths - An array of file paths to the CSS files to be applied.
|
|
698
|
+
*/
|
|
699
|
+
const applyStyles = ($, cssFilePaths) => {
|
|
700
|
+
(cssFilePaths ?? []).forEach((path) => {
|
|
701
|
+
const styleContent = readFileSync(path, { encoding: 'utf-8' });
|
|
702
|
+
$('head').append(`<style>${styleContent}</style>`);
|
|
594
703
|
});
|
|
595
704
|
};
|
|
705
|
+
/**
|
|
706
|
+
* Inlines CSS into the provided HTML string using Maizzle and Tailwind CSS.
|
|
707
|
+
*
|
|
708
|
+
* @param html - The HTML string to process.
|
|
709
|
+
* @param pretty - Whether to prettify the output HTML. Defaults to `false`.
|
|
710
|
+
* @param tailwindConfig - Optional Tailwind CSS configuration to use. If not provided, the `tailwindcss-preset-email` preset will be used.
|
|
711
|
+
* @returns A promise that resolves to the processed HTML string with inlined CSS.
|
|
712
|
+
*/
|
|
713
|
+
const inlineCss = async (html, pretty = false, tailwindConfig) => {
|
|
714
|
+
//@ts-expect-error: missing exports
|
|
715
|
+
const tailwindcssPresetEmail = (await import('tailwindcss-preset-email')).default;
|
|
716
|
+
return (await render$1(html, {
|
|
717
|
+
css: {
|
|
718
|
+
shorthand: true,
|
|
719
|
+
inline: {
|
|
720
|
+
applyWidthAttributes: true,
|
|
721
|
+
applyHeightAttributes: true,
|
|
722
|
+
},
|
|
723
|
+
purge: {
|
|
724
|
+
removeHTMLComments: false,
|
|
725
|
+
},
|
|
726
|
+
tailwind: {
|
|
727
|
+
presets: tailwindConfig ? [tailwindConfig] : [tailwindcssPresetEmail],
|
|
728
|
+
content: [
|
|
729
|
+
{
|
|
730
|
+
raw: html,
|
|
731
|
+
extension: 'html',
|
|
732
|
+
},
|
|
733
|
+
],
|
|
734
|
+
},
|
|
735
|
+
},
|
|
736
|
+
prettify: pretty,
|
|
737
|
+
minify: !pretty,
|
|
738
|
+
})).html;
|
|
739
|
+
};
|
|
740
|
+
/**
|
|
741
|
+
* Asynchronously retrieves the Tailwind CSS configuration.
|
|
742
|
+
*
|
|
743
|
+
* @param tailwindConfig - The path to the Tailwind CSS configuration file or a partial configuration object.
|
|
744
|
+
* @returns A promise that resolves to a partial Tailwind CSS configuration object, or `undefined` if no configuration is provided.
|
|
745
|
+
*/
|
|
746
|
+
const getTailwindConfig = async (tailwindConfig) => {
|
|
747
|
+
let config;
|
|
748
|
+
if (tailwindConfig) {
|
|
749
|
+
if (typeof tailwindConfig === 'string') {
|
|
750
|
+
config = (await import(tailwindConfig)).default;
|
|
751
|
+
}
|
|
752
|
+
else {
|
|
753
|
+
config = tailwindConfig;
|
|
754
|
+
}
|
|
755
|
+
}
|
|
756
|
+
return config;
|
|
757
|
+
};
|
|
596
758
|
|
|
597
759
|
/*
|
|
598
760
|
* Public API Surface of angular-email
|