@utrecht/web-component-library-stencil 1.0.0-alpha.197 → 1.0.0-alpha.198
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/dist/cjs/utrecht-heading-2_3.cjs.entry.js +6 -6
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/paragraph/{bem.js → css/template.js} +5 -0
- package/dist/collection/paragraph/html/template.js +11 -0
- package/dist/collection/paragraph/{stencil.css → web-component/index.css} +0 -0
- package/dist/collection/paragraph/{stencil.js → web-component/index.stencil.js} +2 -2
- package/dist/collection/paragraph/web-component/template.js +12 -0
- package/dist/custom-elements/index.js +118 -118
- package/dist/esm/utrecht-heading-2_3.entry.js +6 -6
- package/dist/types/paragraph/{stencil.d.ts → web-component/index.stencil.d.ts} +0 -0
- package/package.json +2 -2
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-8c6952a4.js');
|
|
6
6
|
const clsx_m = require('./clsx.m-b00fa5e1.js');
|
|
7
7
|
|
|
8
|
-
const stencilCss$
|
|
8
|
+
const stencilCss$1 = ".utrecht-heading-2{color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-2-letter-spacing);line-height:var(--utrecht-heading-2-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-2-text-transform, inherit)}.utrecht-heading-2--distanced{margin-block-end:var(--utrecht-heading-2-margin-block-end);margin-block-start:var(--utrecht-heading-2-margin-block-start)}:host{display:block}:host([hidden]){display:none !important}";
|
|
9
9
|
|
|
10
10
|
const Heading2 = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -15,9 +15,9 @@ const Heading2 = class {
|
|
|
15
15
|
return (index.h("h2", { class: "utrecht-heading-2" }, index.h("slot", null)));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
|
-
Heading2.style = stencilCss$
|
|
18
|
+
Heading2.style = stencilCss$1;
|
|
19
19
|
|
|
20
|
-
const stencilCss
|
|
20
|
+
const stencilCss = ".utrecht-heading-3{color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-3-letter-spacing);line-height:var(--utrecht-heading-3-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-3-text-transform, inherit)}.utrecht-heading-3--distanced{margin-block-end:var(--utrecht-heading-3-margin-block-end);margin-block-start:var(--utrecht-heading-3-margin-block-start)}:host{display:block}:host([hidden]){display:none !important}";
|
|
21
21
|
|
|
22
22
|
const Heading3 = class {
|
|
23
23
|
constructor(hostRef) {
|
|
@@ -27,9 +27,9 @@ const Heading3 = class {
|
|
|
27
27
|
return (index.h("h3", { class: "utrecht-heading-3" }, index.h("slot", null)));
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
|
-
Heading3.style = stencilCss
|
|
30
|
+
Heading3.style = stencilCss;
|
|
31
31
|
|
|
32
|
-
const
|
|
32
|
+
const indexCss = ".utrecht-paragraph{color:var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));font-family:var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));font-size:var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));font-weight:var(--utrecht-paragraph-font-weight, inherit);line-height:var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));margin-block-end:0;margin-block-start:0}.utrecht-paragraph--lead{color:var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));font-size:var(--utrecht-paragraph-lead-font-size, inherit);font-weight:var(--utrecht-paragraph-lead-font-weight, inherit);line-height:var(--utrecht-paragraph-lead-line-height, inherit)}.utrecht-paragraph--distanced{margin-block-end:var(--utrecht-paragraph-margin-block-end);margin-block-start:var(--utrecht-paragraph-margin-block-start)}:host{display:block}:host([hidden]){display:none !important}";
|
|
33
33
|
|
|
34
34
|
const Paragraph = class {
|
|
35
35
|
constructor(hostRef) {
|
|
@@ -39,7 +39,7 @@ const Paragraph = class {
|
|
|
39
39
|
return (index.h("div", { class: clsx_m.clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead') }, index.h("slot", null)));
|
|
40
40
|
}
|
|
41
41
|
};
|
|
42
|
-
Paragraph.style =
|
|
42
|
+
Paragraph.style = indexCss;
|
|
43
43
|
|
|
44
44
|
exports.utrecht_heading_2 = Heading2;
|
|
45
45
|
exports.utrecht_heading_3 = Heading3;
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"./page-footer/stencil.js",
|
|
59
59
|
"./page-header/stencil.js",
|
|
60
60
|
"./pagination/stencil.js",
|
|
61
|
-
"./paragraph/stencil.js",
|
|
61
|
+
"./paragraph/web-component/index.stencil.js",
|
|
62
62
|
"./separator/stencil.js",
|
|
63
63
|
"./templates/contact-card-template/stencil.js",
|
|
64
64
|
"./textbox/stencil.js"
|
|
@@ -15,3 +15,8 @@ export const Paragraph = ({ distanced = false, textContent = '', lead = false })
|
|
|
15
15
|
'utrecht-paragraph--distanced': distanced,
|
|
16
16
|
'utrecht-paragraph--lead': lead,
|
|
17
17
|
})}">${textContent}</p>`;
|
|
18
|
+
|
|
19
|
+
export const Paragraphs = ({ textContent = '' }) =>
|
|
20
|
+
`<p class="utrecht-paragraph utrecht-paragraph--lead">${textContent}</p>
|
|
21
|
+
<p class="utrecht-paragraph">${textContent}</p>
|
|
22
|
+
<p class="utrecht-paragraph">${textContent}</p>`;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export const Paragraph = ({ textContent = '', lead = false }) =>
|
|
2
|
+
`<section class="utrecht-html">
|
|
3
|
+
<p${lead ? ' class="lead"' : ''}>${textContent}</p>
|
|
4
|
+
</section>`;
|
|
5
|
+
|
|
6
|
+
export const Paragraphs = ({ textContent = '' }) =>
|
|
7
|
+
`<section class="utrecht-html">
|
|
8
|
+
<p class="lead">${textContent}</p>
|
|
9
|
+
<p>${textContent}</p>
|
|
10
|
+
<p>${textContent}</p>
|
|
11
|
+
</section>`;
|
|
File without changes
|
|
@@ -8,10 +8,10 @@ export class Paragraph {
|
|
|
8
8
|
static get is() { return "utrecht-paragraph"; }
|
|
9
9
|
static get encapsulation() { return "shadow"; }
|
|
10
10
|
static get originalStyleUrls() { return {
|
|
11
|
-
"$": ["
|
|
11
|
+
"$": ["index.scss"]
|
|
12
12
|
}; }
|
|
13
13
|
static get styleUrls() { return {
|
|
14
|
-
"$": ["
|
|
14
|
+
"$": ["index.css"]
|
|
15
15
|
}; }
|
|
16
16
|
static get properties() { return {
|
|
17
17
|
"lead": {
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export const defaultArgs = {
|
|
2
|
+
lead: false,
|
|
3
|
+
textContent: '',
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
export const Paragraph = ({ lead = false, textContent = '' }) =>
|
|
7
|
+
`<utrecht-paragraph ${lead ? 'lead="true"' : ''}">${textContent}</p>`;
|
|
8
|
+
|
|
9
|
+
export const Paragraphs = ({ textContent = '' }) =>
|
|
10
|
+
`<utrecht-paragraph lead="true">${textContent}</utrecht-paragraph>
|
|
11
|
+
<utrecht-paragraph">${textContent}</utrecht-paragraph>
|
|
12
|
+
<utrecht-paragraph">${textContent}</utrecht-paragraph>`;
|