@progressive-development/pd-content 0.1.82 → 0.5.0
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/index.js +18 -0
- package/dist/locales/be.js +7 -0
- package/dist/locales/de.js +7 -0
- package/dist/locales/en.js +7 -0
- package/dist/pd-box-view.js +2 -0
- package/dist/pd-collapse.js +2 -0
- package/dist/pd-edit-content.js +2 -0
- package/dist/pd-more-info.js +2 -0
- package/dist/pd-resize-content.js +2 -0
- package/{src → dist/src}/PdBoxView.js +7 -6
- package/{src → dist/src}/PdCollapse.js +18 -24
- package/{src → dist/src}/PdEditContent.js +70 -88
- package/{src → dist/src}/PdMoreInfo.js +14 -29
- package/{src → dist/src}/PdResizeContent.js +11 -26
- package/package.json +40 -22
- package/.editorconfig +0 -29
- package/.storybook/main.js +0 -17
- package/.storybook/preview.js +0 -13
- package/demo/index.html +0 -29
- package/index.js +0 -1
- package/lit-localize.json +0 -18
- package/pd-box-view.js +0 -3
- package/pd-collapse.js +0 -3
- package/pd-edit-content.js +0 -3
- package/pd-more-info.js +0 -3
- package/pd-resize-content.js +0 -3
- package/src/generated/locale/be.js +0 -15
- package/src/generated/locale/de.js +0 -15
- package/src/generated/locale/en.js +0 -15
- package/src/generated/locale-codes.js +0 -27
- package/src/stories/box-view.stories.js +0 -65
- package/src/stories/collapse.stories.js +0 -36
- package/src/stories/edit-content.stories.js +0 -149
- package/src/stories/more-info.stories.js +0 -75
- package/src/stories/resize-content.stories.js +0 -28
- package/test/pd-content.test.js +0 -32
- package/web-dev-server.config.mjs +0 -27
- package/web-test-runner.config.mjs +0 -41
- package/xliff/be.xlf +0 -15
- package/xliff/de.xlf +0 -13
- package/xliff/en.xlf +0 -15
package/.editorconfig
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
# EditorConfig helps developers define and maintain consistent
|
|
2
|
-
# coding styles between different editors and IDEs
|
|
3
|
-
# editorconfig.org
|
|
4
|
-
|
|
5
|
-
root = true
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
[*]
|
|
9
|
-
|
|
10
|
-
# Change these settings to your own preference
|
|
11
|
-
indent_style = space
|
|
12
|
-
indent_size = 2
|
|
13
|
-
|
|
14
|
-
# We recommend you to keep these unchanged
|
|
15
|
-
end_of_line = lf
|
|
16
|
-
charset = utf-8
|
|
17
|
-
trim_trailing_whitespace = true
|
|
18
|
-
insert_final_newline = true
|
|
19
|
-
|
|
20
|
-
[*.md]
|
|
21
|
-
trim_trailing_whitespace = false
|
|
22
|
-
|
|
23
|
-
[*.json]
|
|
24
|
-
indent_size = 2
|
|
25
|
-
|
|
26
|
-
[*.{html,js,md}]
|
|
27
|
-
block_comment_start = /**
|
|
28
|
-
block_comment = *
|
|
29
|
-
block_comment_end = */
|
package/.storybook/main.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/** @type { import('@storybook/web-components-vite').StorybookConfig } */
|
|
2
|
-
const config = {
|
|
3
|
-
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
|
4
|
-
addons: [
|
|
5
|
-
'@storybook/addon-links',
|
|
6
|
-
'@storybook/addon-essentials',
|
|
7
|
-
'@chromatic-com/storybook',
|
|
8
|
-
],
|
|
9
|
-
framework: {
|
|
10
|
-
name: '@storybook/web-components-vite',
|
|
11
|
-
options: {},
|
|
12
|
-
},
|
|
13
|
-
docs: {
|
|
14
|
-
autodocs: 'tag',
|
|
15
|
-
},
|
|
16
|
-
};
|
|
17
|
-
export default config;
|
package/.storybook/preview.js
DELETED
package/demo/index.html
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en-GB">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<style>
|
|
6
|
-
body {
|
|
7
|
-
background: #fafafa;
|
|
8
|
-
}
|
|
9
|
-
</style>
|
|
10
|
-
</head>
|
|
11
|
-
<body>
|
|
12
|
-
<div id="demo"></div>
|
|
13
|
-
|
|
14
|
-
<script type="module">
|
|
15
|
-
import { html, render } from 'lit';
|
|
16
|
-
import '../pd-content.js';
|
|
17
|
-
|
|
18
|
-
const title = 'Hello owc World!';
|
|
19
|
-
render(
|
|
20
|
-
html`
|
|
21
|
-
<pd-content .title=${title}>
|
|
22
|
-
some light-dom
|
|
23
|
-
</pd-content>
|
|
24
|
-
`,
|
|
25
|
-
document.querySelector('#demo')
|
|
26
|
-
);
|
|
27
|
-
</script>
|
|
28
|
-
</body>
|
|
29
|
-
</html>
|
package/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/lit-localize.json
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
|
|
3
|
-
"sourceLocale": "dev",
|
|
4
|
-
"targetLocales": ["de", "en", "be"],
|
|
5
|
-
"inputFiles": [
|
|
6
|
-
"src/**/*.js"
|
|
7
|
-
],
|
|
8
|
-
"output": {
|
|
9
|
-
"mode": "runtime",
|
|
10
|
-
"localeCodesModule": "src/generated/locale-codes.js",
|
|
11
|
-
"outputDir": "src/generated/locale"
|
|
12
|
-
|
|
13
|
-
},
|
|
14
|
-
"interchange": {
|
|
15
|
-
"format": "xliff",
|
|
16
|
-
"xliffDir": "./xliff/"
|
|
17
|
-
}
|
|
18
|
-
}
|
package/pd-box-view.js
DELETED
package/pd-collapse.js
DELETED
package/pd-edit-content.js
DELETED
package/pd-more-info.js
DELETED
package/pd-resize-content.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// Do not modify this file by hand!
|
|
3
|
-
// Re-generate this file by running lit-localize
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
/* eslint-disable no-irregular-whitespace */
|
|
9
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
10
|
-
|
|
11
|
-
export const templates = {
|
|
12
|
-
'pd.moreInfo.less': `Minder informatie`,
|
|
13
|
-
'pd.moreInfo.more': `Meer informatie`,
|
|
14
|
-
};
|
|
15
|
-
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// Do not modify this file by hand!
|
|
3
|
-
// Re-generate this file by running lit-localize
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
/* eslint-disable no-irregular-whitespace */
|
|
9
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
10
|
-
|
|
11
|
-
export const templates = {
|
|
12
|
-
'pd.moreInfo.more': `Mehr Informationen`,
|
|
13
|
-
'pd.moreInfo.less': `Text ausblenden`,
|
|
14
|
-
};
|
|
15
|
-
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// Do not modify this file by hand!
|
|
3
|
-
// Re-generate this file by running lit-localize
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
/* eslint-disable no-irregular-whitespace */
|
|
9
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
10
|
-
|
|
11
|
-
export const templates = {
|
|
12
|
-
'pd.moreInfo.less': `Less information`,
|
|
13
|
-
'pd.moreInfo.more': `More information`,
|
|
14
|
-
};
|
|
15
|
-
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
// Do not modify this file by hand!
|
|
2
|
-
// Re-generate this file by running lit-localize.
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* The locale code that templates in this source code are written in.
|
|
6
|
-
*/
|
|
7
|
-
export const sourceLocale = `dev`;
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* The other locale codes that this application is localized into. Sorted
|
|
11
|
-
* lexicographically.
|
|
12
|
-
*/
|
|
13
|
-
export const targetLocales = [
|
|
14
|
-
`be`,
|
|
15
|
-
`de`,
|
|
16
|
-
`en`,
|
|
17
|
-
];
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* All valid project locale codes. Sorted lexicographically.
|
|
21
|
-
*/
|
|
22
|
-
export const allLocales = [
|
|
23
|
-
`be`,
|
|
24
|
-
`de`,
|
|
25
|
-
`dev`,
|
|
26
|
-
`en`,
|
|
27
|
-
];
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import '../../pd-box-view.js';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export default {
|
|
6
|
-
title: 'PdContent/Box View',
|
|
7
|
-
component: 'pd-box-view',
|
|
8
|
-
parameters: {
|
|
9
|
-
actions: { argTypesRegex: '^on.*' },
|
|
10
|
-
},
|
|
11
|
-
argTypes: {
|
|
12
|
-
|
|
13
|
-
},
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
function Template() {
|
|
17
|
-
return html`
|
|
18
|
-
|
|
19
|
-
<h1>4 Columns (default)</h1>
|
|
20
|
-
|
|
21
|
-
<pd-box-view>
|
|
22
|
-
<div style="background-color: blue;">Test</div>
|
|
23
|
-
<div style="background-color: red;">Test</div>
|
|
24
|
-
<div style="background-color: green;">Test</div>
|
|
25
|
-
<div style="background-color: black;">Test</div>
|
|
26
|
-
<div style="background-color: grey;">Test</div>
|
|
27
|
-
<div style="background-color: purple;">Test</div>
|
|
28
|
-
</pd-box-view>
|
|
29
|
-
|
|
30
|
-
<h1>2 Columns</h1>
|
|
31
|
-
<pd-box-view style="--pd-box-columns: 2;">
|
|
32
|
-
<div style="background-color: blue;">Test</div>
|
|
33
|
-
<div style="background-color: red;">Test</div>
|
|
34
|
-
<div style="background-color: green;">Test</div>
|
|
35
|
-
<div style="background-color: black;">Test</div>
|
|
36
|
-
<div style="background-color: grey;">Test</div>
|
|
37
|
-
<div style="background-color: purple;">Test</div>
|
|
38
|
-
</pd-box-view>
|
|
39
|
-
|
|
40
|
-
<h1>3 Columns / Custom Gap</h1>
|
|
41
|
-
<pd-box-view style="--pd-box-columns: 3; --squi-box-gap: 100px;">
|
|
42
|
-
<div style="background-color: blue;">Test</div>
|
|
43
|
-
<div style="background-color: red;">Test</div>
|
|
44
|
-
<div style="background-color: green;">Test</div>
|
|
45
|
-
<div style="background-color: black;">Test</div>
|
|
46
|
-
<div style="background-color: grey;">Test</div>
|
|
47
|
-
<div style="background-color: purple;">Test</div>
|
|
48
|
-
</pd-box-view>
|
|
49
|
-
|
|
50
|
-
<h1>1 Columns</h1>
|
|
51
|
-
<pd-box-view style="--pd-box-columns: 1;">
|
|
52
|
-
<div style="background-color: blue;">Test</div>
|
|
53
|
-
<div style="background-color: red;">Test</div>
|
|
54
|
-
<div style="background-color: green;">Test</div>
|
|
55
|
-
<div style="background-color: black;">Test</div>
|
|
56
|
-
<div style="background-color: grey;">Test</div>
|
|
57
|
-
<div style="background-color: purple;">Test</div>
|
|
58
|
-
</pd-box-view>
|
|
59
|
-
`;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
export const BoxView = Template.bind({});
|
|
63
|
-
BoxView.args = {
|
|
64
|
-
};
|
|
65
|
-
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import '../../pd-collapse.js';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'PdContent/Collapse',
|
|
6
|
-
component: 'pd-collapse',
|
|
7
|
-
argTypes: {
|
|
8
|
-
|
|
9
|
-
},
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
function Template() {
|
|
13
|
-
return html`
|
|
14
|
-
|
|
15
|
-
<div style="width: 600px;">
|
|
16
|
-
<pd-collapse>
|
|
17
|
-
|
|
18
|
-
<div slot="header" class="header">
|
|
19
|
-
Test Title
|
|
20
|
-
</div>
|
|
21
|
-
|
|
22
|
-
<div slot="content" class="form-group">
|
|
23
|
-
<h1>Test H1</h1>
|
|
24
|
-
<p>UUnd etwa spok sfopk op fsiuhi utfztef opdkgok iaszg6d f5d kzkzßkß 8e67tfgzguzb. Weitere Kommentare können auch mal die Breite übereizen.</p>
|
|
25
|
-
</div>
|
|
26
|
-
|
|
27
|
-
</pd-collapse>
|
|
28
|
-
</div>
|
|
29
|
-
|
|
30
|
-
`;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export const Collapse = Template.bind({});
|
|
34
|
-
Collapse.args = {
|
|
35
|
-
};
|
|
36
|
-
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import '../../pd-edit-content.js';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'PdContent/Edit Content',
|
|
6
|
-
component: 'pd-edit-content',
|
|
7
|
-
argTypes: {
|
|
8
|
-
|
|
9
|
-
},
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const testIcon1 = html`<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
13
|
-
viewBox="0 0 425.2 425.2" style="enable-background:new 0 0 425.2 425.2;" xml:space="preserve" class="own-edit-icon">
|
|
14
|
-
<style type="text/css">
|
|
15
|
-
.st0{fill:#ADD0D8;}
|
|
16
|
-
.st1{fill:#FFC857;}
|
|
17
|
-
.st2{fill:#177E89;}
|
|
18
|
-
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#B2B2B2;}
|
|
19
|
-
</style>
|
|
20
|
-
<g id="Ebene_1_00000112609452286829237170000004421612674235114421_">
|
|
21
|
-
</g>
|
|
22
|
-
<path class="st0" d="M327.7,138.5c-5.2,0-9.4,4.2-9.4,9.4v36.8h-10.5v-8.4c0-20.9-17-37.8-37.8-37.8c-11.3,0-21.5,5-28.4,12.9
|
|
23
|
-
c-6.9-7.9-17.1-12.9-28.4-12.9c-11.3,0-21.5,5-28.4,12.9c-6.9-7.9-17.1-12.9-28.4-12.9c-11.3,0-21.5,5-28.4,12.9
|
|
24
|
-
c-6.9-7.9-17.1-12.9-28.4-12.9c-20.9,0-37.8,17-37.8,37.8v8.4h-19c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4h19V344
|
|
25
|
-
c0,20.9,17,37.8,37.8,37.8c11.3,0,21.5-5,28.4-12.9c6.9,7.9,17.1,12.9,28.4,12.9s21.5-5,28.4-12.9c6.9,7.9,17.1,12.9,28.4,12.9
|
|
26
|
-
s21.5-5,28.4-12.9c6.9,7.9,17.1,12.9,28.4,12.9c20.9,0,37.8-17,37.8-37.8V203.5h19.9c5.2,0,9.4-4.2,9.4-9.4v-46.2
|
|
27
|
-
C337.1,142.7,332.9,138.5,327.7,138.5z M118.5,184.7v18.8V344c0,10.5-8.5,19-19,19s-19-8.5-19-19V203.5v-18.8v-8.4
|
|
28
|
-
c0-10.5,8.5-19,19-19s19,8.5,19,19V184.7z M175.3,184.7v18.8V344c0,10.5-8.5,19-19,19s-19-8.5-19-19V203.5v-18.8v-8.4
|
|
29
|
-
c0-10.5,8.5-19,19-19s19,8.5,19,19V184.7z M232.1,184.7v18.8V344c0,10.5-8.5,19-19,19s-19-8.5-19-19V203.5v-18.8v-8.4
|
|
30
|
-
c0-10.5,8.5-19,19-19s19,8.5,19,19V184.7z M289,184.7v18.8V344c0,10.5-8.5,19-19,19s-19-8.5-19-19V203.5v-18.8v-8.4
|
|
31
|
-
c0-10.5,8.5-19,19-19s19,8.5,19,19V184.7z"/>
|
|
32
|
-
<g>
|
|
33
|
-
<path class="st1" d="M171.8,111c8.4-10.8,12-21.8,7.8-35.1c-3.8-12.1-16.9-23.9-6.7-36c7.7-9.2-5.5-22.6-13.3-13.3
|
|
34
|
-
c-8.5,10.1-12,20.8-7.8,33.7c4.1,12.7,16.9,24.3,6.7,37.4C151.2,107.1,164.4,120.6,171.8,111z"/>
|
|
35
|
-
<path class="st1" d="M210.8,111c8.4-10.8,12-21.8,7.8-35.1c-3.8-12.1-16.9-23.9-6.7-36c7.7-9.2-5.5-22.6-13.3-13.3
|
|
36
|
-
c-8.5,10.1-12,20.8-7.8,33.7c4.1,12.7,16.9,24.3,6.7,37.4C190.2,107.1,203.4,120.6,210.8,111z"/>
|
|
37
|
-
</g>
|
|
38
|
-
<circle class="st2" cx="305.6" cy="306.9" r="111.5"/>
|
|
39
|
-
<path class="st3" d="M370.4,324.6c-1.5,5.3-3.6,10.4-6.3,15.3c0.5,0.5,14.7,18.4,5.9,27.2l-4.4,4.3c-6.6,6.6-23.1-3.7-27-6.3
|
|
40
|
-
c-5.1,2.8-10.5,5-16.2,6.4h1.1c0,0-3.2,23.5-15.7,23.5h-4.3c-9.6,0-14.9-20.1-15.8-24c-5.5-1.6-11-3.8-15.9-6.8l0.9,0.9
|
|
41
|
-
c0,0-18.5,14.6-27.5,5.8l-4-3.3c-6.8-6.8,4.2-24.6,6.3-28.2c-2.7-4.6-4.7-9.7-6.2-14.8c-3.7-0.9-24-6.2-24-15.8v-4.3
|
|
42
|
-
c0-11.1,19.3-14.8,23.9-15.6c1.5-5.2,3.5-10.3,6.2-15c-2-3.2-13.5-21.1-6.6-27.9l4.2-3.5c7.8-7.8,23.9,3.3,27.6,6.1
|
|
43
|
-
c4.7-2.7,9.9-4.9,15.3-6.4c1.1-4.7,6.4-23.5,15.7-23.5h4.3c10.7,0,14.6,18.2,15.5,23.4c5.4,1.5,10.6,3.6,15.5,6.3
|
|
44
|
-
c4.1-2.6,20.8-12.9,27.4-6.3l4,4.2c7.7,7.7-2.9,23.2-6.1,27.4c2.7,4.7,4.9,9.9,6.3,15.3c1.4,0.2,23.4,3.5,23.4,15.7v4.3
|
|
45
|
-
C393.8,318.1,375.3,323.4,370.4,324.6z M305.7,257.3c-27.4,0-49.6,22.2-49.6,49.6c0,27.4,22.2,49.6,49.6,49.6
|
|
46
|
-
c27.4,0,49.6-22.2,49.6-49.6l0,0C355.3,279.5,333,257.3,305.7,257.3L305.7,257.3z M305.7,339.9c-18.3,0-33.1-14.8-33.1-33.1
|
|
47
|
-
c0-18.3,14.8-33.1,33.1-33.1c18.3,0,33.1,14.8,33.1,33.1l0,0C338.8,325.1,324,339.9,305.7,339.9z M305.7,290.4
|
|
48
|
-
c-9.2,0-16.5,7.3-16.5,16.5c0,9.2,7.3,16.5,16.5,16.5c9.2,0,16.5-7.3,16.5-16.5l0,0C322.2,297.7,314.8,290.4,305.7,290.4z"/>
|
|
49
|
-
</svg>`;
|
|
50
|
-
|
|
51
|
-
function BasicEditTemplate({editData}) {
|
|
52
|
-
return html`
|
|
53
|
-
|
|
54
|
-
<pd-box-view style="--squi-box-columns: 2;">
|
|
55
|
-
|
|
56
|
-
<pd-edit-content contentTitle="Test content with slot" @edit-content="${(e) => {
|
|
57
|
-
console.log("event: ", e);
|
|
58
|
-
}}">
|
|
59
|
-
<p>Some content for edit, could be added as own slot</p>
|
|
60
|
-
<ul>
|
|
61
|
-
<li>Das ist auch drinne</li>
|
|
62
|
-
<li>Das ist auch drinne</li>
|
|
63
|
-
<li>Das ist auch drinne</li>
|
|
64
|
-
</ul>
|
|
65
|
-
</pd-edit-content>
|
|
66
|
-
|
|
67
|
-
<pd-edit-content contentTitle="Test content with params"
|
|
68
|
-
.data="${editData}">
|
|
69
|
-
</pd-edit-content>
|
|
70
|
-
|
|
71
|
-
<pd-edit-content contentTitle="Test content without edit"
|
|
72
|
-
.data="${editData}"
|
|
73
|
-
editDisabled
|
|
74
|
-
>
|
|
75
|
-
</pd-edit-content>
|
|
76
|
-
|
|
77
|
-
<pd-edit-content contentTitle="Test content with own links"
|
|
78
|
-
.data="${editData}"
|
|
79
|
-
editDisabled
|
|
80
|
-
.editLinks="${
|
|
81
|
-
[{ key: 2, txt: 'Bewerk e-mail', defaultIcon: true },
|
|
82
|
-
{ key: 2, txt: 'Anderes', defaultIcon: true },
|
|
83
|
-
{ key: 2, txt: 'Ausloggen', defaultIcon: false }]
|
|
84
|
-
}"
|
|
85
|
-
>
|
|
86
|
-
</pd-edit-content>
|
|
87
|
-
|
|
88
|
-
<pd-edit-content contentTitle="Test content with own icons"
|
|
89
|
-
editDisabled
|
|
90
|
-
.editLinks="${
|
|
91
|
-
[{ key: 2, txt: 'Bewerk e-mail', icon: testIcon1 },
|
|
92
|
-
{ key: 2, txt: 'Anderes', icon: testIcon1 },
|
|
93
|
-
{ key: 2, txt: 'Ausloggen', icon: testIcon1 }]
|
|
94
|
-
}"
|
|
95
|
-
>
|
|
96
|
-
<p>Some content for edit, could be added as own slot. Icons are hack-fixed with hard coded css...</p>
|
|
97
|
-
</pd-edit-content>
|
|
98
|
-
</pd-box-view>
|
|
99
|
-
`;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
function NumberEditTemplate({editData}) {
|
|
103
|
-
return html`
|
|
104
|
-
<style>
|
|
105
|
-
.edit-boxes {
|
|
106
|
-
display: flex;
|
|
107
|
-
flex-flow: column;
|
|
108
|
-
gap: 10px;
|
|
109
|
-
}
|
|
110
|
-
</style>
|
|
111
|
-
<div class="edit-boxes">
|
|
112
|
-
<pd-edit-content contentTitle="Test content with params and step number"
|
|
113
|
-
.data="${editData}" stepNumber="1">
|
|
114
|
-
</pd-edit-content>
|
|
115
|
-
|
|
116
|
-
<pd-edit-content contentTitle="Test content with params and step number"
|
|
117
|
-
.data="${editData}" stepNumber="2">
|
|
118
|
-
</pd-edit-content>
|
|
119
|
-
|
|
120
|
-
<pd-edit-content contentTitle="Test content with params and step number"
|
|
121
|
-
.data="${editData}" stepNumber="3">
|
|
122
|
-
</pd-edit-content>
|
|
123
|
-
|
|
124
|
-
<pd-edit-content contentTitle="Test content with params and step number"
|
|
125
|
-
.data="${editData}" stepNumber="4">
|
|
126
|
-
</pd-edit-content>
|
|
127
|
-
</div>`;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
export const EditContent = BasicEditTemplate.bind({});
|
|
133
|
-
EditContent.args = {
|
|
134
|
-
editData: [
|
|
135
|
-
{name: "Testwert1", val: "Value 1"},
|
|
136
|
-
{name: "Testwert2", val: "Value 2"},
|
|
137
|
-
{name: "Testwert3", val: "Value 3"}
|
|
138
|
-
]
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
export const NumberEditContent = NumberEditTemplate.bind({});
|
|
142
|
-
NumberEditContent.args = {
|
|
143
|
-
editData: [
|
|
144
|
-
{name: "Testwert1", val: "Value 1"},
|
|
145
|
-
{name: "Testwert2", val: "Value 2"},
|
|
146
|
-
{name: "Testwert3", val: "Value 3"}
|
|
147
|
-
]
|
|
148
|
-
};
|
|
149
|
-
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import '../../pd-more-info.js';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'PdContent/More Info',
|
|
6
|
-
component: 'pd-more-info',
|
|
7
|
-
argTypes: {
|
|
8
|
-
|
|
9
|
-
},
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
function Template() {
|
|
13
|
-
return html`
|
|
14
|
-
<h1>More Info Story</h1>
|
|
15
|
-
<pd-more-info>
|
|
16
|
-
<span slot="small-view">
|
|
17
|
-
Een regelmatig onderhoud van uw verwarmingsinstallatie is
|
|
18
|
-
essentieel en levert tal van voordelen op.
|
|
19
|
-
</span>
|
|
20
|
-
<span slot="large-view">
|
|
21
|
-
<p>
|
|
22
|
-
Een regelmatig onderhoud van uw verwarmingsinstallatie is
|
|
23
|
-
essentieel en levert tal van voordelen op. Bovendien is door de
|
|
24
|
-
Vlaamse overheid wettelijk verplicht het onderhoud tweejaarlijks
|
|
25
|
-
te laten uitvoeren door een erkende technieker.
|
|
26
|
-
</p>
|
|
27
|
-
<p>
|
|
28
|
-
Het regelmatig onderhouden van uw verwarmingsinstallatie levert
|
|
29
|
-
tal van voordelen op:
|
|
30
|
-
</p>
|
|
31
|
-
<ul>
|
|
32
|
-
<li>
|
|
33
|
-
<b>Je bespaart energie</b> - Een vakkundig onderhoud zorgt
|
|
34
|
-
voor een zuinige verwarmingsketel en lagere verwarmingskosten.
|
|
35
|
-
Zo bespaar je op je energiefactuur.
|
|
36
|
-
</li>
|
|
37
|
-
<li>
|
|
38
|
-
<b>Uw veiligheid</b> - Vermijd gevaarlijke situaties, zoals
|
|
39
|
-
CO-vergiftiging of schouwbrand.
|
|
40
|
-
</li>
|
|
41
|
-
<li>
|
|
42
|
-
<b>U beperkt het risico op pannes</b> - Door regelmatig uw
|
|
43
|
-
verwarmingsinstallatie te onderhouden, verklein je de kans op
|
|
44
|
-
defecten en vermijd je hoge herstellingskosten. Bovendien gaat
|
|
45
|
-
je verwarmingsketel gaat langer mee.
|
|
46
|
-
</li>
|
|
47
|
-
<li>
|
|
48
|
-
<b>U bent wettelijk in orde</b> - Het onderhouden van uw
|
|
49
|
-
verwarmingsinstallatie is verplicht in Vlaanderen.
|
|
50
|
-
</li>
|
|
51
|
-
</ul>
|
|
52
|
-
<ul>
|
|
53
|
-
<li>
|
|
54
|
-
Verwarmingsketels op gas (aardgas, butaan, propaan) moeten
|
|
55
|
-
2-jaarlijks een onderhoudsbeurt krijgen.
|
|
56
|
-
</li>
|
|
57
|
-
<li>
|
|
58
|
-
Verwarmingsketels op stookolie (mazout) of vaste brandstof
|
|
59
|
-
(hout, pellets, steenkool, ...) moeten jaarlijks een
|
|
60
|
-
onderhoudsbeurt krijgen.
|
|
61
|
-
</li>
|
|
62
|
-
<li>
|
|
63
|
-
Het onderhoud op een gas- of stookolieketel moet uitgevoerd
|
|
64
|
-
worden door een erkende technicus.
|
|
65
|
-
</li>
|
|
66
|
-
</ul>
|
|
67
|
-
</span>
|
|
68
|
-
</pd-more-info>
|
|
69
|
-
`;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
export const MoreInfo = Template.bind({});
|
|
73
|
-
MoreInfo.args = {
|
|
74
|
-
};
|
|
75
|
-
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/* eslint-disable lit-a11y/alt-text */
|
|
2
|
-
import { html } from 'lit';
|
|
3
|
-
import '../../pd-resize-content.js';
|
|
4
|
-
|
|
5
|
-
export default {
|
|
6
|
-
title: 'PdContent/Resize Content',
|
|
7
|
-
component: 'pd-resize-content',
|
|
8
|
-
argTypes: {
|
|
9
|
-
|
|
10
|
-
},
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
function Template() {
|
|
14
|
-
return html`
|
|
15
|
-
<pd-resize-content>
|
|
16
|
-
<div slot="preview-content">Eine kurze Vorschau</div>
|
|
17
|
-
<div slot="resize-content">
|
|
18
|
-
<p>Hier steht dann etwaslängerer Text und alles weiteree auch es kann lang und groß werden</p>
|
|
19
|
-
<img src="https://bilder.t-online.de/b/84/93/82/46/id_84938246/920/tid_da/eichhoernchen-geert-weggen-zeigt-die-welt-der-kleinen-nager-.jpg">
|
|
20
|
-
</div>
|
|
21
|
-
</pd-resize-content>
|
|
22
|
-
`;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export const ResizeContent = Template.bind({});
|
|
26
|
-
ResizeContent.args = {
|
|
27
|
-
};
|
|
28
|
-
|
package/test/pd-content.test.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { fixture, expect } from '@open-wc/testing';
|
|
3
|
-
|
|
4
|
-
import '../pd-content.js';
|
|
5
|
-
|
|
6
|
-
describe('PdContent', () => {
|
|
7
|
-
it('has a default title "Hey there" and counter 5', async () => {
|
|
8
|
-
const el = await fixture(html`<pd-content></pd-content>`);
|
|
9
|
-
|
|
10
|
-
expect(el.title).to.equal('Hey there');
|
|
11
|
-
expect(el.counter).to.equal(5);
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
it('increases the counter on button click', async () => {
|
|
15
|
-
const el = await fixture(html`<pd-content></pd-content>`);
|
|
16
|
-
el.shadowRoot.querySelector('button').click();
|
|
17
|
-
|
|
18
|
-
expect(el.counter).to.equal(6);
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
it('can override the title via attribute', async () => {
|
|
22
|
-
const el = await fixture(html`<pd-content title="attribute title"></pd-content>`);
|
|
23
|
-
|
|
24
|
-
expect(el.title).to.equal('attribute title');
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
it('passes the a11y audit', async () => {
|
|
28
|
-
const el = await fixture(html`<pd-content></pd-content>`);
|
|
29
|
-
|
|
30
|
-
await expect(el).shadowDom.to.be.accessible();
|
|
31
|
-
});
|
|
32
|
-
});
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
|
|
2
|
-
|
|
3
|
-
/** Use Hot Module replacement by adding --hmr to the start command */
|
|
4
|
-
const hmr = process.argv.includes('--hmr');
|
|
5
|
-
|
|
6
|
-
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
|
|
7
|
-
open: '/demo/',
|
|
8
|
-
/** Use regular watch mode if HMR is not enabled. */
|
|
9
|
-
watch: !hmr,
|
|
10
|
-
/** Resolve bare module imports */
|
|
11
|
-
nodeResolve: {
|
|
12
|
-
exportConditions: ['browser', 'development'],
|
|
13
|
-
},
|
|
14
|
-
|
|
15
|
-
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
|
|
16
|
-
// esbuildTarget: 'auto'
|
|
17
|
-
|
|
18
|
-
/** Set appIndex to enable SPA routing */
|
|
19
|
-
// appIndex: 'demo/index.html',
|
|
20
|
-
|
|
21
|
-
plugins: [
|
|
22
|
-
/** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
|
|
23
|
-
// hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
|
|
24
|
-
],
|
|
25
|
-
|
|
26
|
-
// See documentation for all available options
|
|
27
|
-
});
|