@keycloakify/angular-email 0.0.1-rc.2 → 0.0.1-rc.20
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/README.md +160 -13
- package/bin/build.mjs +154 -0
- package/esbuild/esbuild.d.ts +2 -1
- package/fesm2022/keycloakify-angular-email-esbuild.mjs +2 -2
- package/fesm2022/keycloakify-angular-email-esbuild.mjs.map +1 -1
- package/fesm2022/keycloakify-angular-email.mjs +357 -127
- package/fesm2022/keycloakify-angular-email.mjs.map +1 -1
- package/index.d.ts +2 -0
- 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 +11 -10
- 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/raw/raw.component.d.ts +8 -0
- package/lib/components/row/row.component.d.ts +8 -0
- 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 +17 -2
- package/lib/utils.d.ts +2 -0
- package/node/index.cjs +1 -0
- package/node/index.d.ts +5 -0
- package/node/index.js +1 -0
- package/package.json +17 -4
|
@@ -1,42 +1,51 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed,
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component, effect, CUSTOM_ELEMENTS_SCHEMA, inject, NO_ERRORS_SCHEMA, provideExperimentalZonelessChangeDetection } from '@angular/core';
|
|
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 * as cheerio from 'cheerio';
|
|
6
|
+
import * as cheerio from 'cheerio/slim';
|
|
7
7
|
import { convert } from 'html-to-text';
|
|
8
|
-
import
|
|
8
|
+
import juice from 'juice';
|
|
9
|
+
import postcss from 'postcss';
|
|
10
|
+
import prettyPrint from 'pretty';
|
|
11
|
+
import tailwindcss from 'tailwindcss';
|
|
9
12
|
|
|
10
13
|
class BackgroundComponent {
|
|
11
14
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12
|
-
$
|
|
15
|
+
$style = input(null, { alias: 'style' });
|
|
16
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
13
17
|
$width = input(0, { alias: 'width' });
|
|
14
18
|
$height = input(0, { alias: 'height' });
|
|
15
19
|
$src = input(undefined, { alias: 'src' });
|
|
16
20
|
$bgRepeat = input('no-repeat', { alias: 'bgRepeat' });
|
|
17
21
|
$bgColor = input(undefined, { alias: 'bgColor' });
|
|
18
|
-
$
|
|
19
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
20
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.
|
|
22
|
+
$bgStyle = computed(() => ({ backgroundRepeat: this.$bgRepeat(), ...(this.$style() ?? {}) }));
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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
25
|
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BackgroundComponent, decorators: [{
|
|
23
27
|
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]=\"$
|
|
28
|
+
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
29
|
}] });
|
|
26
30
|
|
|
27
31
|
class BodyComponent {
|
|
28
|
-
|
|
29
|
-
|
|
32
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
33
|
+
$style = input(null, { alias: 'style' });
|
|
34
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
35
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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
37
|
}
|
|
31
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BodyComponent, decorators: [{
|
|
32
39
|
type: Component,
|
|
33
|
-
args: [{ selector: 'ng-email-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<body>\n <ng-content />\n</body>\n" }]
|
|
40
|
+
args: [{ selector: 'ng-email-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<body\n [style]=\"$style()\"\n [class]=\"$styleClass()\"\n>\n <ng-content />\n</body>\n" }]
|
|
34
41
|
}] });
|
|
35
42
|
|
|
36
43
|
class ButtonComponent {
|
|
37
44
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
38
|
-
$
|
|
45
|
+
$style = input(null, { alias: 'style' });
|
|
46
|
+
$styleClass = input(null, { alias: 'styleClass' });
|
|
39
47
|
$href = input(undefined, { alias: 'href' });
|
|
48
|
+
$textContent = input.required({ alias: 'textContent' });
|
|
40
49
|
$width = input(undefined, { alias: 'width' });
|
|
41
50
|
$height = input(undefined, { alias: 'height' });
|
|
42
51
|
$borderRadius = input(0, { alias: 'borderRadius' });
|
|
@@ -51,11 +60,11 @@ class ButtonComponent {
|
|
|
51
60
|
$lineHeight = computed(() => this.$borderSize() ? (this.$height() ?? 0) - 2 * this.$borderSize() : (this.$height() ?? 0));
|
|
52
61
|
$baseStyle = computed(() => ({
|
|
53
62
|
'-webkit-text-size-adjust': 'none',
|
|
54
|
-
borderRadius: this.$borderRadius()
|
|
63
|
+
borderRadius: `${this.$borderRadius()}px`,
|
|
55
64
|
display: 'inline-block',
|
|
56
|
-
fontSize: this.$fontSize()
|
|
65
|
+
fontSize: `${this.$fontSize()}px`,
|
|
57
66
|
lineHeight: `${this.$lineHeight()}px`,
|
|
58
|
-
maxWidth: this.$width()
|
|
67
|
+
maxWidth: `${this.$width()}px`,
|
|
59
68
|
textAlign: 'center',
|
|
60
69
|
textDecoration: 'none',
|
|
61
70
|
width: '100%',
|
|
@@ -78,52 +87,66 @@ class ButtonComponent {
|
|
|
78
87
|
...(this.$backgroundColor() ? { backgroundColor: this.$backgroundColor() } : {}),
|
|
79
88
|
// text styles
|
|
80
89
|
...(this.$textColor() ? { color: this.$textColor() } : {}),
|
|
81
|
-
...(this.$
|
|
90
|
+
...(this.$style() ?? {}),
|
|
82
91
|
...(this.$withBackground() ? {} : { msoHide: 'all' }),
|
|
83
92
|
}));
|
|
84
93
|
$withoutBackgroundStyle = computed(() => ({
|
|
85
94
|
...this.$baseStyle(),
|
|
86
95
|
// background styles
|
|
87
96
|
...this.$propStyles(),
|
|
88
|
-
...(this.$
|
|
97
|
+
...(this.$style() ?? {}),
|
|
89
98
|
...(this.$withBackground() ? {} : { msoHide: 'all' }),
|
|
90
99
|
}));
|
|
91
|
-
$
|
|
92
|
-
|
|
100
|
+
$noBgInnerHtml = computed(() => {
|
|
101
|
+
const href = this.$href();
|
|
102
|
+
const borderColor = this.$borderColor();
|
|
103
|
+
const borderSize = this.$borderSize();
|
|
104
|
+
const height = this.$height();
|
|
105
|
+
const width = this.$width();
|
|
106
|
+
const arcsize = this.$arcsize();
|
|
107
|
+
const backgroundColor = this.$backgroundColor();
|
|
108
|
+
const fontSize = this.$fontSize();
|
|
109
|
+
const textColor = this.$textColor();
|
|
110
|
+
const textContent = this.$textContent();
|
|
111
|
+
return `<!--[if mso]>
|
|
112
|
+
<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
113
|
<w:anchorlock/>
|
|
94
|
-
<center style="font-size:${
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
114
|
+
<center style="font-size:${fontSize}px;${textColor ? `color:${textColor};` : ''}">
|
|
115
|
+
${textContent}
|
|
116
|
+
</center></v:roundrect>
|
|
117
|
+
<![endif]-->`;
|
|
118
|
+
});
|
|
119
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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: borderRadius ? borderRadius + 'px' : undefined,\n }\"\n >\n <tr>\n <td\n [attr.bgcolor]=\"$backgroundColor()\"\n [width]=\"width\"\n [height]=\"height\"\n [style]=\"{\n borderRadius: borderRadius ? borderRadius + 'px' : undefined,\n height: height ? height + 'px' : undefined,\n width: width ? width + 'px' : undefined,\n maxWidth: width ? width + 'px' : undefined,\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
121
|
}
|
|
100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
101
123
|
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]=\"
|
|
124
|
+
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: borderRadius ? borderRadius + 'px' : undefined,\n }\"\n >\n <tr>\n <td\n [attr.bgcolor]=\"$backgroundColor()\"\n [width]=\"width\"\n [height]=\"height\"\n [style]=\"{\n borderRadius: borderRadius ? borderRadius + 'px' : undefined,\n height: height ? height + 'px' : undefined,\n width: width ? width + 'px' : undefined,\n maxWidth: width ? width + 'px' : undefined,\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
125
|
}] });
|
|
104
126
|
|
|
105
127
|
class ColorSchemeComponent {
|
|
106
128
|
$mode = input('normal', { alias: 'mode' });
|
|
107
129
|
$style = computed(() => `<style>:root { color-scheme: ${this.$mode()}; supported-color-schemes: ${this.$mode()}; }</style>`);
|
|
108
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
109
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.
|
|
130
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColorSchemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
131
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", type: ColorSchemeComponent, isStandalone: true, selector: "ng-email-color-scheme", inputs: { $mode: { classPropertyName: "$mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let mode = $mode();\n\n<meta\n name=\"color-scheme\"\n [content]=\"mode\"\n/>\n<meta\n name=\"supported-color-schemes\"\n [content]=\"mode\"\n/>\n\n<noscript [attr.data-html]=\"$style()\"></noscript>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
110
132
|
}
|
|
111
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColorSchemeComponent, decorators: [{
|
|
112
134
|
type: Component,
|
|
113
|
-
args: [{ selector: 'ng-email-color-scheme', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let mode = $mode();\n\n<meta\n name=\"color-scheme\"\n [content]=\"mode\"\n/>\n<meta\n name=\"supported-color-schemes\"\n [content]=\"mode\"\n/>\n<noscript [attr.data-html]=\"$style()\"></noscript>\n" }]
|
|
135
|
+
args: [{ selector: 'ng-email-color-scheme', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let mode = $mode();\n\n<meta\n name=\"color-scheme\"\n [content]=\"mode\"\n/>\n<meta\n name=\"supported-color-schemes\"\n [content]=\"mode\"\n/>\n\n<noscript [attr.data-html]=\"$style()\"></noscript>\n" }]
|
|
114
136
|
}] });
|
|
115
137
|
|
|
116
138
|
class ColumnComponent {
|
|
117
139
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
118
|
-
$
|
|
140
|
+
$style = input(null, { alias: 'style' });
|
|
141
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
119
142
|
$bgImage = input(undefined, { alias: 'bgImage' });
|
|
120
143
|
$bgColor = input(undefined, { alias: 'bgColor' });
|
|
121
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
122
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.
|
|
144
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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
146
|
}
|
|
124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnComponent, decorators: [{
|
|
125
148
|
type: Component,
|
|
126
|
-
args: [{ selector: 'ng-email-column', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<td\n [attr.background]=\"$bgImage()\"\n [attr.bgcolor]=\"$bgColor()\"\n [style]=\"$
|
|
149
|
+
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
150
|
}] });
|
|
128
151
|
|
|
129
152
|
class ConditionalComponent {
|
|
@@ -141,10 +164,10 @@ class ConditionalComponent {
|
|
|
141
164
|
throw new RangeError('angular-email: Conditional expects the `expression` or `mso` prop to be defined, not both');
|
|
142
165
|
});
|
|
143
166
|
}
|
|
144
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
167
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ConditionalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
168
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ConditionalComponent, isStandalone: true, selector: "ng-email-conditional", inputs: { $expression: { classPropertyName: "$expression", publicName: "expression", isSignal: true, isRequired: false, transformFunction: null }, $mso: { classPropertyName: "$mso", publicName: "mso", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let mso = $mso();\n\n@if (!mso) {\n <noscript [attr.data-html]=\"noMsoInnerHtmlPre\"></noscript>\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n <noscript [attr.data-html]=\"noMsoInnerHtmlPost\"></noscript>\n} @else {\n <noscript [attr.data-html]=\"$msoInnerHtmlPre()\"></noscript>\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n <noscript [attr.data-html]=\"msoInnerHtmlPost\"></noscript>\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 });
|
|
146
169
|
}
|
|
147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ConditionalComponent, decorators: [{
|
|
148
171
|
type: Component,
|
|
149
172
|
args: [{ selector: 'ng-email-conditional', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let mso = $mso();\n\n@if (!mso) {\n <noscript [attr.data-html]=\"noMsoInnerHtmlPre\"></noscript>\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n <noscript [attr.data-html]=\"noMsoInnerHtmlPost\"></noscript>\n} @else {\n <noscript [attr.data-html]=\"$msoInnerHtmlPre()\"></noscript>\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n <noscript [attr.data-html]=\"msoInnerHtmlPost\"></noscript>\n}\n<ng-template #content><ng-content></ng-content></ng-template>\n" }]
|
|
150
173
|
}], ctorParameters: () => [] });
|
|
@@ -153,34 +176,35 @@ class ContainerComponent {
|
|
|
153
176
|
random = Math.random();
|
|
154
177
|
document = inject(DOCUMENT);
|
|
155
178
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
156
|
-
$
|
|
179
|
+
$style = input(null, { alias: 'style' });
|
|
180
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
157
181
|
$alignment = input('center', { alias: 'alignment' });
|
|
158
182
|
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
159
183
|
$containerWidth = input(600, { alias: 'containerWidth' });
|
|
160
|
-
$
|
|
184
|
+
$containerStyle = computed(() => ({
|
|
161
185
|
...(this.$disableDefaultStyle() ? {} : { maxWidth: `${this.$containerWidth()}px` }),
|
|
162
|
-
...this.$
|
|
186
|
+
...this.$style(),
|
|
163
187
|
}));
|
|
164
188
|
$trStyle = computed(() => ({
|
|
165
189
|
...(this.$disableDefaultStyle() ? {} : { width: '100%' }),
|
|
166
190
|
}));
|
|
167
191
|
$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
192
|
$innerHtmlPost = computed(() => `<!--[if mso]></td></tr></table><![endif]-->`);
|
|
169
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
170
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.
|
|
193
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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
195
|
}
|
|
172
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
196
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ContainerComponent, decorators: [{
|
|
173
197
|
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]=\"$
|
|
198
|
+
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
199
|
}] });
|
|
176
200
|
|
|
177
201
|
class HeadComponent {
|
|
178
202
|
$enableFormatDetection = input(false, { alias: 'enableFormatDetection' });
|
|
179
203
|
xml = `\n<xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>\n`;
|
|
180
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
181
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
204
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
205
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: HeadComponent, isStandalone: true, selector: "ng-email-head", inputs: { $enableFormatDetection: { classPropertyName: "$enableFormatDetection", publicName: "enableFormatDetection", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let enableFormatDetection = $enableFormatDetection();\n\n<head>\n <meta\n http-equiv=\"content-type\"\n content=\"text/html; charset=UTF-8\"\n />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, user-scalable=yes\"\n />\n <meta name=\"x-apple-disable-message-reformatting\" />\n @if (!enableFormatDetection) {\n <meta\n name=\"format-detection\"\n content=\"telephone=no, date=no, address=no, email=no, url=no\"\n />\n }\n <ng-content></ng-content>\n <ng-email-conditional [mso]=\"true\">\n <noscript [attr.data-html]=\"xml\"></noscript>\n </ng-email-conditional>\n</head>\n", dependencies: [{ kind: "component", type: ConditionalComponent, selector: "ng-email-conditional", inputs: ["expression", "mso"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
182
206
|
}
|
|
183
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HeadComponent, decorators: [{
|
|
184
208
|
type: Component,
|
|
185
209
|
args: [{ selector: 'ng-email-head', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ConditionalComponent], schemas: [NO_ERRORS_SCHEMA], template: "@let enableFormatDetection = $enableFormatDetection();\n\n<head>\n <meta\n http-equiv=\"content-type\"\n content=\"text/html; charset=UTF-8\"\n />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, user-scalable=yes\"\n />\n <meta name=\"x-apple-disable-message-reformatting\" />\n @if (!enableFormatDetection) {\n <meta\n name=\"format-detection\"\n content=\"telephone=no, date=no, address=no, email=no, url=no\"\n />\n }\n <ng-content></ng-content>\n <ng-email-conditional [mso]=\"true\">\n <noscript [attr.data-html]=\"xml\"></noscript>\n </ng-email-conditional>\n</head>\n" }]
|
|
186
210
|
}] });
|
|
@@ -374,11 +398,22 @@ const HTMLElements = [
|
|
|
374
398
|
'o:OfficeDocumentSettings',
|
|
375
399
|
'o:AllowPNG',
|
|
376
400
|
'o:PixelsPerInch',
|
|
377
|
-
|
|
401
|
+
'angular-email-raw',
|
|
402
|
+
];
|
|
403
|
+
const START_TAG = '__COMMENT_START';
|
|
404
|
+
const END_TAG = '__COMMENT_END';
|
|
405
|
+
function escapeForRawComponent(input) {
|
|
406
|
+
// escape comment sequences
|
|
407
|
+
return input.replace(/<!--/g, START_TAG).replace(/-->/g, END_TAG);
|
|
408
|
+
}
|
|
409
|
+
function unescapeForRawComponent(input) {
|
|
410
|
+
return input.replace(new RegExp(START_TAG, 'g'), '<!--').replace(new RegExp(END_TAG, 'g'), '-->');
|
|
411
|
+
}
|
|
378
412
|
|
|
379
413
|
class HeadingComponent {
|
|
380
414
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
381
|
-
$
|
|
415
|
+
$style = input(null, { alias: 'style' });
|
|
416
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
382
417
|
$as = input('h1', { alias: 'as' });
|
|
383
418
|
$m = input(undefined, { alias: 'm' });
|
|
384
419
|
$mx = input(undefined, { alias: 'mx' });
|
|
@@ -387,7 +422,7 @@ class HeadingComponent {
|
|
|
387
422
|
$mr = input(undefined, { alias: 'mr' });
|
|
388
423
|
$mb = input(undefined, { alias: 'mb' });
|
|
389
424
|
$ml = input(undefined, { alias: 'ml' });
|
|
390
|
-
$
|
|
425
|
+
$headingStyle = computed(() => {
|
|
391
426
|
return styleToString({
|
|
392
427
|
...withMargin({
|
|
393
428
|
m: this.$m(),
|
|
@@ -398,22 +433,23 @@ class HeadingComponent {
|
|
|
398
433
|
mb: this.$mb(),
|
|
399
434
|
ml: this.$ml(),
|
|
400
435
|
}),
|
|
401
|
-
...(this.$
|
|
436
|
+
...(this.$style() ?? {}),
|
|
402
437
|
});
|
|
403
438
|
});
|
|
404
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
405
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
439
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
440
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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
441
|
}
|
|
407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HeadingComponent, decorators: [{
|
|
408
443
|
type: Component,
|
|
409
|
-
args: [{ selector: 'ng-email-heading', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let heading = $as();\n@let style = $
|
|
444
|
+
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
445
|
}] });
|
|
411
446
|
|
|
412
447
|
class HrComponent {
|
|
413
448
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
414
|
-
$
|
|
449
|
+
$style = input(null, { alias: 'style' });
|
|
450
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
415
451
|
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
416
|
-
$
|
|
452
|
+
$hrStyle = computed(() => {
|
|
417
453
|
return {
|
|
418
454
|
...(this.$disableDefaultStyle()
|
|
419
455
|
? {}
|
|
@@ -422,38 +458,42 @@ class HrComponent {
|
|
|
422
458
|
border: 'none',
|
|
423
459
|
borderTop: '1px solid #eaeaea',
|
|
424
460
|
}),
|
|
425
|
-
...(this.$
|
|
461
|
+
...(this.$style() ?? {}),
|
|
426
462
|
};
|
|
427
463
|
});
|
|
428
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
429
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.
|
|
464
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HrComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
465
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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
466
|
}
|
|
431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HrComponent, decorators: [{
|
|
432
468
|
type: Component,
|
|
433
|
-
args: [{ selector: 'ng-email-hr', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr
|
|
469
|
+
args: [{ selector: 'ng-email-hr', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr\n [style]=\"$hrStyle()\"\n [class]=\"$styleClass()\"\n/>\n" }]
|
|
434
470
|
}] });
|
|
435
471
|
|
|
436
472
|
class HtmlComponent {
|
|
437
473
|
$lang = input('en', { alias: 'lang' });
|
|
438
474
|
$dir = input('ltr', { alias: 'dir' });
|
|
439
475
|
$enableVML = input(true, { alias: 'enableVML' });
|
|
440
|
-
|
|
441
|
-
|
|
476
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
477
|
+
$style = input(null, { alias: 'style' });
|
|
478
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
479
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HtmlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
480
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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
481
|
}
|
|
443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HtmlComponent, decorators: [{
|
|
444
483
|
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" }]
|
|
484
|
+
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
485
|
}] });
|
|
447
486
|
|
|
448
487
|
class ImgComponent {
|
|
449
488
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
450
|
-
$
|
|
489
|
+
$style = input(null, { alias: 'style' });
|
|
490
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
451
491
|
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
452
492
|
$alt = input('', { alias: 'alt' });
|
|
453
493
|
$src = input('', { alias: 'src' });
|
|
454
494
|
$width = input('0', { alias: 'width' });
|
|
455
495
|
$height = input('0', { alias: 'height' });
|
|
456
|
-
$
|
|
496
|
+
$imageStyle = computed(() => {
|
|
457
497
|
return {
|
|
458
498
|
...(this.$disableDefaultStyle()
|
|
459
499
|
? {}
|
|
@@ -463,24 +503,25 @@ class ImgComponent {
|
|
|
463
503
|
border: 'none',
|
|
464
504
|
textDecoration: 'none',
|
|
465
505
|
}),
|
|
466
|
-
...(this.$
|
|
506
|
+
...(this.$style() ?? {}),
|
|
467
507
|
};
|
|
468
508
|
});
|
|
469
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
470
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.
|
|
509
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ImgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
510
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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
511
|
}
|
|
472
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
512
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ImgComponent, decorators: [{
|
|
473
513
|
type: Component,
|
|
474
|
-
args: [{ selector: 'ng-email-img', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n [style]=\"$
|
|
514
|
+
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
515
|
}] });
|
|
476
516
|
|
|
477
517
|
class LinkComponent {
|
|
478
518
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
479
|
-
$
|
|
519
|
+
$style = input(null, { alias: 'style' });
|
|
520
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
480
521
|
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
481
522
|
$href = input('', { alias: 'href' });
|
|
482
523
|
$target = input('_blank', { alias: 'target' });
|
|
483
|
-
$
|
|
524
|
+
$linkStyle = computed(() => {
|
|
484
525
|
return {
|
|
485
526
|
...(this.$disableDefaultStyle()
|
|
486
527
|
? {}
|
|
@@ -488,54 +529,84 @@ class LinkComponent {
|
|
|
488
529
|
color: '#067df7',
|
|
489
530
|
textDecoration: 'none',
|
|
490
531
|
}),
|
|
491
|
-
...(this.$
|
|
532
|
+
...(this.$style() ?? {}),
|
|
492
533
|
};
|
|
493
534
|
});
|
|
494
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
495
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.
|
|
535
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
536
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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 });
|
|
537
|
+
}
|
|
538
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LinkComponent, decorators: [{
|
|
539
|
+
type: Component,
|
|
540
|
+
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" }]
|
|
541
|
+
}] });
|
|
542
|
+
|
|
543
|
+
class RawComponent {
|
|
544
|
+
$disablePlainTextOutput = input(false, { alias: 'disablePlainTextOutput' });
|
|
545
|
+
$content = input('', { alias: 'content' });
|
|
546
|
+
$escapingContent = computed(() => `<!--${escapeForRawComponent(this.$content())}-->`);
|
|
547
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RawComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
548
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", type: RawComponent, isStandalone: true, selector: "ng-email-raw", inputs: { $disablePlainTextOutput: { classPropertyName: "$disablePlainTextOutput", publicName: "disablePlainTextOutput", isSignal: true, isRequired: false, transformFunction: null }, $content: { classPropertyName: "$content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<angular-email-raw [attr.data-skip]=\"$disablePlainTextOutput()\">\n <noscript [attr.data-html]=\"$escapingContent()\"></noscript>\n</angular-email-raw>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
496
549
|
}
|
|
497
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
550
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RawComponent, decorators: [{
|
|
498
551
|
type: Component,
|
|
499
|
-
args: [{ selector: 'ng-email-
|
|
552
|
+
args: [{ selector: 'ng-email-raw', changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<angular-email-raw [attr.data-skip]=\"$disablePlainTextOutput()\">\n <noscript [attr.data-html]=\"$escapingContent()\"></noscript>\n</angular-email-raw>\n" }]
|
|
500
553
|
}] });
|
|
501
554
|
|
|
502
555
|
class PreviewComponent {
|
|
503
556
|
$preview = input('', { alias: 'preview' });
|
|
557
|
+
maxLength = 150;
|
|
504
558
|
$text = computed(() => {
|
|
505
559
|
const preview = this.$preview();
|
|
506
|
-
|
|
507
|
-
|
|
560
|
+
if (preview.length >= this.maxLength)
|
|
561
|
+
return null;
|
|
562
|
+
const whiteSpaceCodes = ' ‌​‍‎‏';
|
|
563
|
+
return whiteSpaceCodes.repeat(this.maxLength - preview.length);
|
|
508
564
|
});
|
|
509
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
510
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
565
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: PreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
566
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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 <ng-email-raw\n [content]=\"text\"\n [disablePlainTextOutput]=\"false\"\n ></ng-email-raw>\n }\n</div>\n", dependencies: [{ kind: "component", type: RawComponent, selector: "ng-email-raw", inputs: ["disablePlainTextOutput", "content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
511
567
|
}
|
|
512
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: PreviewComponent, decorators: [{
|
|
513
569
|
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" }]
|
|
570
|
+
args: [{ selector: 'ng-email-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RawComponent], 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 <ng-email-raw\n [content]=\"text\"\n [disablePlainTextOutput]=\"false\"\n ></ng-email-raw>\n }\n</div>\n" }]
|
|
571
|
+
}] });
|
|
572
|
+
|
|
573
|
+
class RowComponent {
|
|
574
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
575
|
+
$style = input(null, { alias: 'style' });
|
|
576
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
577
|
+
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
578
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
579
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", type: RowComponent, isStandalone: true, selector: "ng-email-row", 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: "<table\n align=\"center\"\n width=\"100%\"\n [class]=\"$styleClass()\"\n [style]=\"$style()\"\n role=\"presentation\"\n cellSpacing=\"0\"\n cellPadding=\"0\"\n border=\"0\"\n>\n <tbody [style]=\"$disableDefaultStyle() ? {} : { width: '100%' }\">\n <tr [style]=\"$disableDefaultStyle() ? {} : { width: '100%' }\">\n <ng-content />\n </tr>\n </tbody>\n</table>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
580
|
+
}
|
|
581
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RowComponent, decorators: [{
|
|
582
|
+
type: Component,
|
|
583
|
+
args: [{ selector: 'ng-email-row', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<table\n align=\"center\"\n width=\"100%\"\n [class]=\"$styleClass()\"\n [style]=\"$style()\"\n role=\"presentation\"\n cellSpacing=\"0\"\n cellPadding=\"0\"\n border=\"0\"\n>\n <tbody [style]=\"$disableDefaultStyle() ? {} : { width: '100%' }\">\n <tr [style]=\"$disableDefaultStyle() ? {} : { width: '100%' }\">\n <ng-content />\n </tr>\n </tbody>\n</table>\n" }]
|
|
515
584
|
}] });
|
|
516
585
|
|
|
517
586
|
class SectionComponent {
|
|
518
587
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
519
|
-
$
|
|
520
|
-
$
|
|
588
|
+
$style = input(null, { alias: 'style' });
|
|
589
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
590
|
+
$sectionStyle = computed(() => {
|
|
521
591
|
return styleToString({
|
|
522
592
|
width: '100%',
|
|
523
|
-
...(this.$
|
|
593
|
+
...(this.$style() ?? {}),
|
|
524
594
|
});
|
|
525
595
|
});
|
|
526
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
527
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.
|
|
596
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
597
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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
598
|
}
|
|
529
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
599
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SectionComponent, decorators: [{
|
|
530
600
|
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]=\"$
|
|
601
|
+
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
602
|
}] });
|
|
533
603
|
|
|
534
604
|
class TextComponent {
|
|
535
605
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
536
|
-
$
|
|
606
|
+
$style = input(null, { alias: 'style' });
|
|
607
|
+
$styleClass = input(undefined, { alias: 'styleClass' });
|
|
537
608
|
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
538
|
-
$
|
|
609
|
+
$textStyle = computed(() => {
|
|
539
610
|
return {
|
|
540
611
|
...(this.$disableDefaultStyle()
|
|
541
612
|
? {}
|
|
@@ -544,55 +615,214 @@ class TextComponent {
|
|
|
544
615
|
lineHeight: '24px',
|
|
545
616
|
margin: '16px 0',
|
|
546
617
|
}),
|
|
547
|
-
...(this.$
|
|
618
|
+
...(this.$style() ?? {}),
|
|
548
619
|
};
|
|
549
620
|
});
|
|
550
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
551
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.
|
|
621
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
622
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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
623
|
}
|
|
553
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
624
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TextComponent, decorators: [{
|
|
554
625
|
type: Component,
|
|
555
|
-
args: [{ selector: 'ng-email-text', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p
|
|
626
|
+
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
627
|
}] });
|
|
557
628
|
|
|
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('>', '>');
|
|
629
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
630
|
+
/**
|
|
631
|
+
* Renders an Angular component to HTML and applies transformations.
|
|
632
|
+
*
|
|
633
|
+
* @param component - The Angular component to render.
|
|
634
|
+
* @param selector - The Component selector.
|
|
635
|
+
* @param options - Optional rendering options.
|
|
636
|
+
*
|
|
637
|
+
* @returns {Promise<string>} The rendered HTML or plain text.
|
|
638
|
+
*/
|
|
639
|
+
const render = async ({ component, selector, props, options, }) => {
|
|
640
|
+
const { style, html: normalizedHtml } = await renderNgComponent(component, selector, props, options?.signalInputsPrefix);
|
|
641
|
+
const html = applyHtmlTransformations(normalizedHtml);
|
|
577
642
|
if (options?.plainText) {
|
|
578
643
|
return renderAsPlainText(html);
|
|
579
644
|
}
|
|
645
|
+
const tailwindConfig = options?.tailwindConfig;
|
|
646
|
+
const css = await parseStyles(html, style, tailwindConfig);
|
|
580
647
|
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;
|
|
648
|
+
const markup = await inlineCss(html, css, !!options?.pretty);
|
|
582
649
|
const document = `${doctype}${markup}`;
|
|
583
|
-
if (options?.pretty) {
|
|
584
|
-
return pretty(document);
|
|
585
|
-
}
|
|
586
650
|
return document;
|
|
587
651
|
};
|
|
652
|
+
/**
|
|
653
|
+
* Converts the given markup string to plain text while skipping certain elements.
|
|
654
|
+
*
|
|
655
|
+
* @param markup - The HTML markup string to be converted to plain text.
|
|
656
|
+
* @returns The plain text representation of the given markup.
|
|
657
|
+
*
|
|
658
|
+
* The conversion skips the following elements:
|
|
659
|
+
* - `<img>` tags
|
|
660
|
+
* - Elements with the ID `__angular-email-preview`
|
|
661
|
+
*/
|
|
588
662
|
const renderAsPlainText = (markup) => {
|
|
589
663
|
return convert(markup, {
|
|
664
|
+
decodeEntities: true,
|
|
665
|
+
formatters: {
|
|
666
|
+
raw: (elem, _walk, builder) => {
|
|
667
|
+
if (elem.children.length && elem.children[0].type === 'comment') {
|
|
668
|
+
builder.addInline(unescapeForRawComponent(elem.children[0].data.trim()));
|
|
669
|
+
}
|
|
670
|
+
},
|
|
671
|
+
},
|
|
590
672
|
selectors: [
|
|
673
|
+
{ selector: '[data-skip="true"]', format: 'skip' },
|
|
591
674
|
{ selector: 'img', format: 'skip' },
|
|
592
675
|
{ selector: '#__angular-email-preview', format: 'skip' },
|
|
676
|
+
{
|
|
677
|
+
format: 'raw',
|
|
678
|
+
options: {},
|
|
679
|
+
selector: 'angular-email-raw',
|
|
680
|
+
},
|
|
593
681
|
],
|
|
594
682
|
});
|
|
595
683
|
};
|
|
684
|
+
/**
|
|
685
|
+
* Renders an Angular component to html.
|
|
686
|
+
*
|
|
687
|
+
* @param component - The Angular component to render.
|
|
688
|
+
* @param selector - The CSS selector for the component.
|
|
689
|
+
* @returns A promise that resolves to the rendered HTML string.
|
|
690
|
+
*/
|
|
691
|
+
const renderNgComponent = async (component, selector, props, signalInputsPrefix) => {
|
|
692
|
+
const bootstrap = async () => {
|
|
693
|
+
const appRef = await bootstrapApplication(component, {
|
|
694
|
+
providers: [provideExperimentalZonelessChangeDetection(), provideServerRendering()],
|
|
695
|
+
});
|
|
696
|
+
appRef.components.forEach((componentRef) => {
|
|
697
|
+
Object.entries(props ?? {}).forEach(([key, value]) => {
|
|
698
|
+
if (key in componentRef.instance || `${signalInputsPrefix ?? ''}${key}` in componentRef.instance) {
|
|
699
|
+
componentRef.setInput(key, value);
|
|
700
|
+
}
|
|
701
|
+
});
|
|
702
|
+
componentRef.changeDetectorRef.detectChanges();
|
|
703
|
+
});
|
|
704
|
+
return appRef;
|
|
705
|
+
};
|
|
706
|
+
const ngHtml = await renderApplication(bootstrap, {
|
|
707
|
+
document: `<${selector}></${selector}>`,
|
|
708
|
+
});
|
|
709
|
+
const $ = cheerio.load(ngHtml, {
|
|
710
|
+
xml: { lowerCaseAttributeNames: false, lowerCaseTags: false },
|
|
711
|
+
});
|
|
712
|
+
let style = '';
|
|
713
|
+
$('style').each(function () {
|
|
714
|
+
const content = $(this).html();
|
|
715
|
+
if (content) {
|
|
716
|
+
style += `\n${content}`;
|
|
717
|
+
}
|
|
718
|
+
});
|
|
719
|
+
const html = normalizeNgHtml(ngHtml, selector);
|
|
720
|
+
return { style, html };
|
|
721
|
+
};
|
|
722
|
+
/**
|
|
723
|
+
* Normalizes the provided HTML string by extracting the content within the specified selector
|
|
724
|
+
* and removing any non-standard HTML elements.
|
|
725
|
+
*
|
|
726
|
+
* @param html - The HTML string to be normalized.
|
|
727
|
+
* @param selector - The CSS selector used to identify the content to be extracted.
|
|
728
|
+
* @returns The normalized HTML string with the content of the specified selector and without non-standard HTML elements.
|
|
729
|
+
*/
|
|
730
|
+
const normalizeNgHtml = (html, selector) => {
|
|
731
|
+
const nsHtmlRegex = new RegExp(`<(?!(\\/?(${HTMLElements.join('|')})(?![-\\w])))[^>]+>`, 'gm');
|
|
732
|
+
return html
|
|
733
|
+
.replace(new RegExp(`[\\s\\S]*?<${selector}[\\s\\S]*?>([\\s\\S]*?)<\\/${selector}>[\\s\\S]*?`, 'gm'), '$1')
|
|
734
|
+
.replace(nsHtmlRegex, '');
|
|
735
|
+
};
|
|
736
|
+
/**
|
|
737
|
+
* Applies HTML transformations to the provided HTML string.
|
|
738
|
+
*
|
|
739
|
+
* This function uses Cheerio to load the HTML and perform transformations such as
|
|
740
|
+
* replacing placeholders and applying styles from the provided CSS file paths.
|
|
741
|
+
* It also ensures that certain HTML entities are replaced with their corresponding
|
|
742
|
+
* characters.
|
|
743
|
+
*
|
|
744
|
+
* @param html - The HTML string to transform.
|
|
745
|
+
* @param cssFilePaths - An optional array of CSS file paths to apply styles from.
|
|
746
|
+
* @returns The transformed HTML string.
|
|
747
|
+
*/
|
|
748
|
+
const applyHtmlTransformations = (html) => {
|
|
749
|
+
const $ = cheerio.load(html, {
|
|
750
|
+
xml: { lowerCaseAttributeNames: false, lowerCaseTags: false },
|
|
751
|
+
});
|
|
752
|
+
replacePlaceholders($);
|
|
753
|
+
return $.html()
|
|
754
|
+
.replace(/\s+/g, ' ')
|
|
755
|
+
.replace(/>\s+</g, '><')
|
|
756
|
+
.replaceAll('<', '<')
|
|
757
|
+
.replaceAll('>', '>')
|
|
758
|
+
.replaceAll('$', '$');
|
|
759
|
+
};
|
|
760
|
+
/**
|
|
761
|
+
* Replaces elements with the `data-html` attribute with their corresponding HTML content.
|
|
762
|
+
*
|
|
763
|
+
* This function iterates over all elements that have the `data-html` attribute,
|
|
764
|
+
* retrieves the value of the attribute, and replaces the element with the HTML content
|
|
765
|
+
* specified in the attribute.
|
|
766
|
+
*
|
|
767
|
+
* @param $ - The Cheerio API instance used to manipulate the HTML.
|
|
768
|
+
*/
|
|
769
|
+
const replacePlaceholders = ($) => {
|
|
770
|
+
$('[data-html]').each(function () {
|
|
771
|
+
const content = $(this).attr('data-html');
|
|
772
|
+
if (content) {
|
|
773
|
+
$(this).replaceWith(`${content}`);
|
|
774
|
+
}
|
|
775
|
+
});
|
|
776
|
+
};
|
|
777
|
+
/**
|
|
778
|
+
* Applies the styles from the specified CSS file paths to the HTML document.
|
|
779
|
+
*
|
|
780
|
+
* @param html - The HTML string to process.
|
|
781
|
+
* @param style - The raw content of <style> tags
|
|
782
|
+
* @param tailwindConfig - Optional Tailwind CSS configuration to use. If not provided, the `tailwindcss-preset-email` preset will be used.
|
|
783
|
+
*
|
|
784
|
+
*/
|
|
785
|
+
const parseStyles = async (html, style, tailwindConfig) => {
|
|
786
|
+
//@ts-expect-error: missing exports
|
|
787
|
+
const tailwindcssPresetEmail = (await import('tailwindcss-preset-email')).default;
|
|
788
|
+
const result = await postcss(tailwindcss({
|
|
789
|
+
presets: tailwindConfig ? [tailwindConfig] : [tailwindcssPresetEmail],
|
|
790
|
+
content: [
|
|
791
|
+
{
|
|
792
|
+
raw: html,
|
|
793
|
+
extension: 'html',
|
|
794
|
+
},
|
|
795
|
+
],
|
|
796
|
+
})).process(style, { map: false, from: undefined });
|
|
797
|
+
return result.css;
|
|
798
|
+
};
|
|
799
|
+
/**
|
|
800
|
+
* Inlines CSS into the provided HTML string using Maizzle and Tailwind CSS.
|
|
801
|
+
*
|
|
802
|
+
* @param html - The HTML string to process.
|
|
803
|
+
* @param css - The CSS to inline.
|
|
804
|
+
* @param pretty - Whether to prettify the output HTML. Defaults to `false`.
|
|
805
|
+
* @returns A promise that resolves to the processed HTML string with inlined CSS.
|
|
806
|
+
*/
|
|
807
|
+
const inlineCss = async (html, css, pretty = false) => {
|
|
808
|
+
juice.styleToAttribute = {};
|
|
809
|
+
juice.excludedProperties.push(...[]);
|
|
810
|
+
juice.widthElements = ['img', 'video'].map((i) => i.toUpperCase());
|
|
811
|
+
juice.heightElements = ['img', 'video'].map((i) => i.toUpperCase());
|
|
812
|
+
const inlined = unescapeForRawComponent(juice
|
|
813
|
+
.inlineContent(html, css, {
|
|
814
|
+
applyWidthAttributes: true,
|
|
815
|
+
applyHeightAttributes: true,
|
|
816
|
+
removeStyleTags: false,
|
|
817
|
+
})
|
|
818
|
+
.replace(/\s+/g, ' ')
|
|
819
|
+
.replace(/>\s+</g, '><')
|
|
820
|
+
.replaceAll('$', '$')
|
|
821
|
+
.replace(/<angular-email-raw[\s\S]*?><!--(.*?)--><\/angular-email-raw>/gm, `$1`));
|
|
822
|
+
if (pretty)
|
|
823
|
+
return prettyPrint(inlined);
|
|
824
|
+
return inlined;
|
|
825
|
+
};
|
|
596
826
|
|
|
597
827
|
/*
|
|
598
828
|
* Public API Surface of angular-email
|
|
@@ -602,5 +832,5 @@ const renderAsPlainText = (markup) => {
|
|
|
602
832
|
* Generated bundle index. Do not edit.
|
|
603
833
|
*/
|
|
604
834
|
|
|
605
|
-
export { BackgroundComponent, BodyComponent, ButtonComponent, ColorSchemeComponent, ColumnComponent, ConditionalComponent, ContainerComponent, HTMLElements, HeadComponent, HeadingComponent, HrComponent, HtmlComponent, ImgComponent, LinkComponent, PreviewComponent, SectionComponent, TextComponent, classToString, copyTextToClipboard, pxToPt, render, styleToString, unreachable, withMargin };
|
|
835
|
+
export { BackgroundComponent, BodyComponent, ButtonComponent, ColorSchemeComponent, ColumnComponent, ConditionalComponent, ContainerComponent, HTMLElements, HeadComponent, HeadingComponent, HrComponent, HtmlComponent, ImgComponent, LinkComponent, PreviewComponent, RawComponent, RowComponent, SectionComponent, TextComponent, classToString, copyTextToClipboard, escapeForRawComponent, pxToPt, render, styleToString, unescapeForRawComponent, unreachable, withMargin };
|
|
606
836
|
//# sourceMappingURL=keycloakify-angular-email.mjs.map
|