@ui5/create-webcomponents-package 0.0.0-2f7664755 → 0.0.0-31ad69296

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.
Files changed (35) hide show
  1. package/CHANGELOG.md +690 -0
  2. package/README.md +12 -9
  3. package/create-package.js +106 -43
  4. package/package.json +1 -1
  5. package/template/.eslintignore +2 -1
  6. package/template/.eslintrc.js +5 -0
  7. package/template/bundle.esm.js +0 -2
  8. package/template/gitignore +4 -0
  9. package/template/npmrc +2 -0
  10. package/template/src/MyFirstComponent.hbs +6 -1
  11. package/template/src/MyFirstComponent.js +20 -5
  12. package/template/src/MyFirstComponent.ts +23 -18
  13. package/template/src/i18n/messagebundle.properties +3 -2
  14. package/template/src/i18n/messagebundle_de.properties +1 -1
  15. package/template/src/i18n/messagebundle_en.properties +1 -1
  16. package/template/src/i18n/messagebundle_es.properties +1 -1
  17. package/template/src/i18n/messagebundle_fr.properties +1 -1
  18. package/template/src/themes/MyFirstComponent.css +16 -10
  19. package/template/src/themes/sap_fiori_3/parameters-bundle.css +1 -1
  20. package/template/src/themes/sap_horizon_dark/parameters-bundle.css +3 -0
  21. package/template/src/themes/sap_horizon_hcb/parameters-bundle.css +3 -0
  22. package/template/test/pages/css/index.css +36 -0
  23. package/template/test/pages/img/logo.png +0 -0
  24. package/template/test/pages/index.html +35 -30
  25. package/template/test/specs/Demo.spec.js +3 -2
  26. package/template/tsconfig.json +2 -0
  27. package/template/config/postcss.components/postcss.config.js +0 -1
  28. package/template/config/postcss.themes/postcss.config.js +0 -1
  29. package/template/global.d.ts +0 -12
  30. package/template/src/themes/sap_belize_hcw/parameters-bundle.css +0 -3
  31. package/template/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
  32. package/template/src/themes/sap_fiori_3_hcb/parameters-bundle.css +0 -3
  33. package/template/src/themes/sap_fiori_3_hcw/parameters-bundle.css +0 -3
  34. /package/template/src/themes/{sap_belize → sap_horizon}/parameters-bundle.css +0 -0
  35. /package/template/src/themes/{sap_belize_hcb → sap_horizon_hcw}/parameters-bundle.css +0 -0
@@ -10,43 +10,48 @@
10
10
 
11
11
  <script data-ui5-config type="application/json">
12
12
  {
13
+ "theme": "sap_horizon_dark",
13
14
  "language": "EN"
14
15
  }
15
16
  </script>
16
17
 
18
+ <link rel="stylesheet" type="text/css" href="./css/index.css">
17
19
  <script src="../../bundle.esm.js" type="module"></script>
18
-
19
- <style>
20
- code { color: blue; font-size: small; }
21
- </style>
22
-
23
20
  </head>
24
21
 
25
22
  <body>
26
- <ul>
27
- <li><a href="?sap-ui-theme=sap_fiori_3">Fiori 3</a></li>
28
- <li><a href="?sap-ui-theme=sap_fiori_3_dark">Fiori 3 Dark</a></li>
29
- <li><a href="?sap-ui-theme=sap_fiori_3_hcb">Fiori 3 High Contrast Black</a></li>
30
- <li><a href="?sap-ui-theme=sap_fiori_3_hcw">Fiori 3 High Contrast White</a></li>
31
- <li><a href="?sap-ui-theme=sap_belize">Belize</a></li>
32
- <li><a href="?sap-ui-theme=sap_belize_hcb">Belize High Contrast Black</a></li>
33
- <li><a href="?sap-ui-theme=sap_belize_hcw">Belize High Contrast White</a></li>
34
- </ul>
35
- <br>
36
- <span>or in the browser console, for example:</span>
37
- <code>window['sap-ui-webcomponents-bundle'].configuration.setTheme("sap_belize_hcb")</code>
38
-
39
- <br><br>
40
-
41
- <a href="?sap-ui-language=en">English</a> |
42
- <a href="?sap-ui-language=de">German</a> |
43
- <a href="?sap-ui-language=es">Spanish</a> |
44
- <a href="?sap-ui-language=fr">French</a>
45
-
46
- <br><br>
47
-
48
- <h1>Test your web components here</h1>
49
- <INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
23
+ <div class="app">
24
+ <a href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-getting-started-first-steps--docs" target="_blank"><img src="./img/logo.png" alt="logo"/></a>
25
+
26
+ <div class="app-first-component">
27
+ <h1>Hooray! It's Your First Web Component!</h1>
28
+ <div> <pre>&lt;INIT_PACKAGE_VAR_TAG>&lt;/INIT_PACKAGE_VAR_TAG> </pre></div>
29
+ <INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
30
+ </div>
31
+
32
+ <div class="app-settings">
33
+
34
+ <h2>Switch themes</h2>
35
+ <div style="display: flex; flex-direction: row;">
36
+ <a class="link" href="?sap-ui-theme=sap_horizon">Horizon</a>
37
+ <a class="link" href="?sap-ui-theme=sap_horizon_dark">Horizon Dark</a>
38
+ <a class="link" href="?sap-ui-theme=sap_horizon_hcb">Horizon High Contrast Black</a>
39
+ <a class="link" href="?sap-ui-theme=sap_horizon_hcw">Horizon High Contrast White</a>
40
+ </div>
41
+
42
+ <h2>Switch language</h2>
43
+ <div>
44
+ <a class="link" href="?sap-ui-language=en">English</a>
45
+ <a class="link" href="?sap-ui-language=de">German</a>
46
+ <a class="link" href="?sap-ui-language=es">Spanish</a>
47
+ <a class="link" href="?sap-ui-language=fr">French</a>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="app-docs">
52
+ <h2>Documentation</h2>
53
+ <a class="link" href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-development-custom-ui5-web-components-packages--docs">Custom Component Development</a>
54
+ </div>
55
+ </div>
50
56
  </body>
51
-
52
57
  </html>
@@ -1,10 +1,11 @@
1
1
  const assert = require("assert");
2
2
 
3
3
  describe("INIT_PACKAGE_VAR_TAG rendering", async () => {
4
- await browser.url("test/pages/index.html");
4
+ before(async () => {
5
+ await browser.url("test/pages/index.html");
6
+ });
5
7
 
6
8
  it("tests if web component is correctly rendered", async () => {
7
-
8
9
  const innerContent = await browser.$("#myFirstComponent").shadow$("div");
9
10
 
10
11
  assert.ok(innerContent, "content rendered");
@@ -2,11 +2,13 @@
2
2
  "include": ["src/**/*", "global.d.ts"],
3
3
  "compilerOptions": {
4
4
  "target": "ES2021",
5
+ "lib": ["DOM", "DOM.Iterable", "ES2023"],
5
6
  // Generate d.ts files
6
7
  "declaration": true,
7
8
  "outDir": "dist",
8
9
  "skipLibCheck": true,
9
10
  "sourceMap": true,
11
+ "inlineSources": true,
10
12
  "strict": true,
11
13
  "moduleResolution": "node",
12
14
  "experimentalDecorators": true,
@@ -1 +0,0 @@
1
- module.exports = require("@ui5/webcomponents-tools/components-package/postcss.components.js"); // eslint-disable-line
@@ -1 +0,0 @@
1
- module.exports = require("@ui5/webcomponents-tools/components-package/postcss.themes.js"); // eslint-disable-line
@@ -1,12 +0,0 @@
1
- // eslint-disable-next-line
2
- import "@ui5/webcomponents-base/dist/global";
3
- import { TemplateFunction } from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
4
-
5
- export {};
6
-
7
- declare global {
8
- module "*.lit.js" {
9
- const content: TemplateFunction;
10
- export default content;
11
- }
12
- }
@@ -1,3 +0,0 @@
1
- :root {
2
- --my-component-border-color: black;
3
- }
@@ -1,3 +0,0 @@
1
- :root {
2
- --my-component-border-color: blue;
3
- }
@@ -1,3 +0,0 @@
1
- :root {
2
- --my-component-border-color: lightblue;
3
- }
@@ -1,3 +0,0 @@
1
- :root {
2
- --my-component-border-color: gray;
3
- }