@ui5/create-webcomponents-package 0.0.0-64a57f090 → 0.0.0-6827fdc09

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 (37) hide show
  1. package/CHANGELOG.md +1107 -0
  2. package/README.md +13 -15
  3. package/create-package.js +152 -219
  4. package/package.json +4 -1
  5. package/template/.eslintignore +3 -2
  6. package/template/.npsrc.json +3 -0
  7. package/template/cypress/component/DemoCounter.tsx +13 -0
  8. package/template/cypress/fixtures/example.json +5 -0
  9. package/template/cypress/support/commands.ts +37 -0
  10. package/template/cypress/support/component-index.html +12 -0
  11. package/template/cypress/support/component.ts +36 -0
  12. package/template/cypress/tsconfig.json +19 -0
  13. package/template/cypress.config.ts +10 -0
  14. package/template/gitignore +2 -2
  15. package/template/{package-scripts.js → package-scripts.cjs} +0 -1
  16. package/template/package.json +35 -0
  17. package/template/src/Assets.ts +1 -1
  18. package/template/src/DemoCounter.ts +56 -0
  19. package/template/src/DemoCounterTemplate.tsx +9 -0
  20. package/template/src/bundle.esm.ts +7 -0
  21. package/template/src/themes/{MyFirstComponent.css → DemoCounter.css} +2 -1
  22. package/template/test/pages/css/index.css +63 -12
  23. package/template/test/pages/img/logo.png +0 -0
  24. package/template/test/pages/index.html +36 -40
  25. package/template/tsconfig.json +13 -14
  26. package/template/vite.config.js +14 -0
  27. package/template/bundle.esm.js +0 -31
  28. package/template/config/postcss.components/postcss.config.js +0 -1
  29. package/template/config/postcss.themes/postcss.config.js +0 -1
  30. package/template/config/wdio.conf.js +0 -1
  31. package/template/src/Assets.js +0 -5
  32. package/template/src/MyFirstComponent.hbs +0 -1
  33. package/template/src/MyFirstComponent.js +0 -82
  34. package/template/src/MyFirstComponent.ts +0 -63
  35. package/template/src/themes/sap_fiori_3/parameters-bundle.css +0 -3
  36. package/template/test/specs/Demo.spec.js +0 -13
  37. /package/template/{.eslintrc.js → .eslintrc.cjs} +0 -0
package/template/gitignore CHANGED
@@ -1,4 +1,4 @@
1
1
  node_modules
2
2
  dist
3
- jsdoc-dist
4
- src/generated
3
+ src/generated
4
+ .dev-server-port
package/template/{package-scripts.js → package-scripts.cjs} RENAMED
@@ -2,7 +2,6 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
2
2
 
3
3
  const options = {
4
4
  port: 8080,
5
- typescript: INIT_PACKAGE_VAR_TYPESCRIPT,
6
5
  };
7
6
 
8
7
  const scripts = getScripts(options);
package/template/package.json ADDED
@@ -0,0 +1,35 @@
1
+ {
2
+ "name": "{{INIT_PACKAGE_VAR_NAME}}",
3
+ "version": "0.0.1",
4
+ "ui5": {
5
+ "webComponentsPackage": true
6
+ },
7
+ "type": "module",
8
+ "scripts": {
9
+ "clean": "wc-dev clean",
10
+ "lint": "wc-dev lint",
11
+ "start": "wc-dev start",
12
+ "watch": "wc-dev watch",
13
+ "build": "wc-dev build",
14
+ {{INIT_PACKAGE_CYPRESS_TEST_COMMANDS}}
15
+ "create-ui5-element": "wc-create-ui5-element",
16
+ "prepublishOnly": "npm run build"
17
+ },
18
+ "exports": {
19
+ "./src/*": "./src/*",
20
+ "./dist/*": "./dist/*",
21
+ "./package.json": "./package.json",
22
+ "./bundle.js": "./bundle.js",
23
+ "./*": "./dist/*"
24
+ },
25
+ "dependencies": {
26
+ "@ui5/webcomponents-base": "{{INIT_PACKAGE_VERSION}}",
27
+ "@ui5/webcomponents-theming": "{{INIT_PACKAGE_VERSION}}"
28
+ },
29
+ "devDependencies": {
30
+ {{INIT_PACKAGE_CYPRESS_DEV_DEPS}}
31
+ "@ui5/webcomponents-tools": "{{INIT_PACKAGE_VERSION}}",
32
+ "chromedriver": "*",
33
+ "typescript": "^5.6.2"
34
+ }
35
+ }
package/template/src/Assets.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
2
2
 
3
- // own INIT_PACKAGE_VAR_NAME package assets
3
+ // own {{INIT_PACKAGE_VAR_NAME}} package assets
4
4
  import "./generated/json-imports/Themes.js";
5
5
  import "./generated/json-imports/i18n.js";
package/template/src/DemoCounter.ts ADDED
@@ -0,0 +1,56 @@
1
+ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2
+ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
3
+ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
4
+ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
5
+ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
6
+ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
7
+
8
+ // Template
9
+ import DemoCounterTemplate from "./DemoCounterTemplate.js";
10
+
11
+ // Styles
12
+ import DemoCounterCss from "./generated/themes/DemoCounter.css.js";
13
+
14
+ import { COUNT } from "./generated/i18n/i18n-defaults.js";
15
+
16
+ /**
17
+ * @class
18
+ *
19
+ * <h3 class="comment-api-title">Overview</h3>
20
+ *
21
+ * The <code>demo-counter</code> component is a demo component that increases a number upon click.
22
+ *
23
+ * @constructor
24
+ * @extends UI5Element
25
+ * @public
26
+ */
27
+ @customElement({
28
+ tag: "demo-counter",
29
+ renderer: jsxRenderer,
30
+ styles: DemoCounterCss,
31
+ template: DemoCounterTemplate,
32
+ })
33
+ class DemoCounter extends UI5Element {
34
+ @i18n("{{INIT_PACKAGE_VAR_NAME}}")
35
+ static i18nBundle: I18nBundle;
36
+
37
+ /**
38
+ * Defines the component count.
39
+ * @default 0
40
+ * @public
41
+ */
42
+ @property({ type: Number })
43
+ count = 0;
44
+
45
+ onClick() {
46
+ this.count++;
47
+ }
48
+
49
+ get counterText() {
50
+ return DemoCounter.i18nBundle.getText(COUNT);
51
+ }
52
+ }
53
+
54
+ DemoCounter.define();
55
+
56
+ export default DemoCounter;
package/template/src/DemoCounterTemplate.tsx ADDED
@@ -0,0 +1,9 @@
1
+ import type DemoCounter from "./DemoCounter.js";
2
+
3
+ export default function DemoCounterTemplate(this: DemoCounter) {
4
+ return (
5
+ <div class="root" onClick={this.onClick}>
6
+ {this.counterText} :: {this.count}
7
+ </div>
8
+ );
9
+ }
package/template/src/bundle.esm.ts ADDED
@@ -0,0 +1,7 @@
1
+ // Entry point for all components and resources used in the test pages
2
+
3
+ // Themes and i18n texts
4
+ import "./Assets.js";
5
+
6
+ // Web components
7
+ import "./DemoCounter.js";
package/template/src/themes/{MyFirstComponent.css → DemoCounter.css} RENAMED
@@ -1,4 +1,4 @@
1
- :host {
1
+ .root {
2
2
  display: inline-flex;
3
3
  align-items: center;
4
4
  justify-content: center;
@@ -13,4 +13,5 @@
13
13
  line-height: 3rem;
14
14
  font-size: 1.25rem;
15
15
  user-select: none;
16
+ cursor: pointer;
16
17
  }
package/template/test/pages/css/index.css CHANGED
@@ -3,6 +3,7 @@ body {
3
3
  background-color: var(--sapBackgroundColor);
4
4
  font-size: var(--sapFontSize);
5
5
  font-family: var(--sapFontFamily);
6
+ padding: 2rem;
6
7
  }
7
8
 
8
9
  h1 {
@@ -11,26 +12,76 @@ h1 {
11
12
  }
12
13
 
13
14
  h2 {
14
- font-size: var(--sapFontHeader3Size);
15
- margin-bottom: 0.5rem;
15
+ font-size: var(--sapFontHeader4Size);
16
+ }
17
+
18
+ a {
19
+ margin: 0.25rem;
20
+ padding: 0.5rem;
21
+ }
22
+
23
+ a.link {
24
+ color: var(--sapLinkColor);
16
25
  }
17
26
 
18
- .app, .app-settings, .app-docs, .app-first-component {
27
+ a.theme-link {
28
+ color: var(--sapButton_Emphasized_TextColor);
29
+ background-color: var(--sapButton_Emphasized_Background);
30
+ text-decoration: none;
31
+ }
32
+
33
+ a.lang-link {
34
+ color: var(--sapButton_Attention_TextColor);
35
+ background-color: var(--sapButton_Attention_Background);
36
+ text-decoration: none;
37
+ }
38
+
39
+ .app {
19
40
  display: flex;
20
- align-items: center;
21
- justify-content: center;
22
41
  flex-direction: column;
42
+ align-items: center;
23
43
  }
24
44
 
25
- .app-first-component {
26
- margin-bottom: 3rem;
45
+ .app-nav {
46
+ display: flex;
47
+ width: 100%;
48
+ flex-direction: row;
49
+ justify-content: flex-end;
27
50
  }
28
51
 
29
- .app-docs {
30
- margin-top: 3rem;
52
+ .app-logo {
53
+ height: 5rem;
54
+ width: 5rem;
31
55
  }
32
56
 
33
- a {
34
- margin: 0.25rem;
35
- color: var(--sapLinkColor);
57
+ .app-header {
58
+ display: flex;
59
+ flex-direction: row;
60
+ align-items: center;
61
+ }
62
+
63
+ .app-main {
64
+ display: flex;
65
+ flex-direction: row;
66
+ align-items: flex-start;
67
+ padding-top: 2rem;
68
+ }
69
+
70
+ .app-main-demo {
71
+ padding: 2rem;
72
+ border-radius: 0.5rem;
73
+ box-sizing: border-box;
74
+ background-color: var(--sapTile_Background);
75
+ }
76
+
77
+ .app-main-settings {
78
+ display: flex;
79
+ flex-direction: column;
80
+ padding: 0 2rem;
81
+ }
82
+
83
+ @media (max-width: 768px) {
84
+ .app-main {
85
+ flex-direction: column;
86
+ }
36
87
  }
package/template/test/pages/img/logo.png CHANGED
Binary file
package/template/test/pages/index.html CHANGED
@@ -1,57 +1,53 @@
1
1
  <!DOCTYPE html>
2
- <html>
2
+ <html lang="en">
3
3
 
4
4
  <head>
5
5
  <meta charset="utf-8">
6
-
7
- <title>INIT_PACKAGE_VAR_TAG</title>
6
+ <title>UI5 Web Components</title>
8
7
  <meta name="viewport" content="width=device-width, initial-scale=1">
9
8
  <meta charset="utf-8">
10
-
11
- <script data-ui5-config type="application/json">
12
- {
13
- "theme": "sap_horizon_dark",
14
- "language": "EN"
15
- }
16
- </script>
17
-
18
9
  <link rel="stylesheet" type="text/css" href="./css/index.css">
19
- <script src="../../bundle.esm.js" type="module"></script>
10
+ <script src="../../dist/bundle.esm.js" type="module"></script>
20
11
  </head>
21
12
 
22
13
  <body>
23
14
  <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>
15
+ <nav class="app-nav">
16
+ <a class="link" href="https://sap.github.io/ui5-webcomponents/">Website</a>
17
+ <a class="link" href="https://sap.github.io/ui5-webcomponents/components/">Components</a>
18
+ <a class="link" href="https://sap.github.io/ui5-webcomponents/docs/development/package/">Development</a>
19
+ </nav>
20
+
21
+ <header class="app-header">
22
+ <a href="https://sap.github.io/ui5-webcomponents/" target="_blank"><img src="./img/logo.png" class="app-logo" alt="logo"/></a>
23
+ <h1>UI5 Web Components</h1>
24
+ </header>
25
+
26
+ <main class="app-main">
27
+ <div class="app-main-demo">
28
+ <h2>Congrats! It's your First Web Component 🎉</h2>
29
+ <div> <pre>&lt;demo-counter>&lt;/demo-counter> </pre></div>
30
+ <demo-counter id="myFirstComponent"></demo-counter>
40
31
  </div>
41
32
 
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>
33
+ <div class="app-main-settings">
34
+ <h3>Switch theme</h3>
35
+ <div style="display: grid; grid-template-columns: 1fr 1fr;">
36
+ <a class="link theme-link" href="?sap-ui-theme=sap_horizon">Horizon Morning</a>
37
+ <a class="link theme-link" href="?sap-ui-theme=sap_horizon_dark">Horizon Evening</a>
38
+ <a class="link theme-link" href="?sap-ui-theme=sap_horizon_hcb">High Contrast Black</a>
39
+ <a class="link theme-link" href="?sap-ui-theme=sap_horizon_hcw">High Contrast White</a>
40
+ </div>
41
+
42
+ <h3>Switch language</h3>
43
+ <div style="display: grid; grid-template-columns: 1fr 1fr;">
44
+ <a class="link lang-link" href="?sap-ui-language=en">English</a>
45
+ <a class="link lang-link" href="?sap-ui-language=de">German</a>
46
+ <a class="link lang-link" href="?sap-ui-language=es">Spanish</a>
47
+ <a class="link lang-link" href="?sap-ui-language=fr">French</a>
48
+ </div>
48
49
  </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>
50
+ </main>
55
51
  </div>
56
52
  </body>
57
53
  </html>
package/template/tsconfig.json CHANGED
@@ -1,15 +1,14 @@
1
1
  {
2
- "include": ["src/**/*", "global.d.ts"],
3
- "compilerOptions": {
4
- "target": "ES2021",
5
- // Generate d.ts files
6
- "declaration": true,
7
- "outDir": "dist",
8
- "skipLibCheck": true,
9
- "sourceMap": true,
10
- "inlineSources": true,
11
- "strict": true,
12
- "moduleResolution": "node",
13
- "experimentalDecorators": true,
14
- },
15
- }
2
+ "extends": "@ui5/webcomponents-tools/tsconfig.json",
3
+ "include": [
4
+ "src/**/*",
5
+ "global.d.ts"
6
+ ],
7
+ "compilerOptions": {
8
+ {{INIT_PACKAGE_CYPRESS_ROOT_TSCONFIG}}
9
+ "outDir": "dist",
10
+ "experimentalDecorators": true,
11
+ "module": "NodeNext",
12
+ "moduleResolution": "NodeNext"
13
+ },
14
+ }
package/template/vite.config.js ADDED
@@ -0,0 +1,14 @@
1
+ import viteConfig from "@ui5/webcomponents-tools/components-package/vite.config.js"; //eslint-disable-line
2
+
3
+ // Modifying the default Vite configuration provided by the @ui5/webcomponents-tools package.
4
+ // You can directly access and update the properties you need to change.
5
+ // Ensure that the property exists before modifying it to avoid unintended errors.
6
+ // For available configuration options, refer to: https://vite.dev/config/#configuring-vite
7
+ //
8
+ // Ensure the plugins array exists
9
+ // viteConfig.plugins = viteConfig.plugins || [];
10
+ //
11
+ // Push a new fake plugin
12
+ // viteConfig.plugins.push({ name: 'my-custom-plugin' });
13
+
14
+ export default viteConfig;
package/template/bundle.esm.js DELETED
@@ -1,31 +0,0 @@
1
- // used in test pages
2
- import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
3
-
4
- import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
5
- import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
6
- import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
7
- import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
8
- import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
9
- import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
10
- import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
11
-
12
- // Enable additional themes and i18n texts
13
- import "./dist/Assets.js";
14
-
15
- // Import your web components here from the dist/ directory
16
- import "./dist/INIT_PACKAGE_VAR_CLASS_NAME.js";
17
-
18
- window["sap-ui-webcomponents-bundle"] = {
19
- renderFinished,
20
- configuration: {
21
- getAnimationMode,
22
- getLanguage,
23
- getTheme,
24
- setTheme,
25
- getNoConflict,
26
- setNoConflict,
27
- getCalendarType,
28
- getRTL,
29
- getFirstDayOfWeek,
30
- },
31
- };
package/template/config/postcss.components/postcss.config.js DELETED
@@ -1 +0,0 @@
1
- module.exports = require("@ui5/webcomponents-tools/components-package/postcss.components.js"); // eslint-disable-line
package/template/config/postcss.themes/postcss.config.js DELETED
@@ -1 +0,0 @@
1
- module.exports = require("@ui5/webcomponents-tools/components-package/postcss.themes.js"); // eslint-disable-line
package/template/config/wdio.conf.js DELETED
@@ -1 +0,0 @@
1
- module.exports = require("@ui5/webcomponents-tools/components-package/wdio.js"); // eslint-disable-line
package/template/src/Assets.js DELETED
@@ -1,5 +0,0 @@
1
- import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
2
-
3
- // own INIT_PACKAGE_VAR_NAME package assets
4
- import "./generated/json-imports/Themes.js";
5
- import "./generated/json-imports/i18n.js";
package/template/src/MyFirstComponent.hbs DELETED
@@ -1 +0,0 @@
1
- <div @click="{{onClick}}">{{counterText}} :: {{count}}</div>
package/template/src/MyFirstComponent.js DELETED
@@ -1,82 +0,0 @@
1
- import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2
- import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
3
- import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
4
- import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
5
-
6
- // Template
7
- import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
8
-
9
- // Styles
10
- import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
11
-
12
- import { COUNT } from "./generated/i18n/i18n-defaults.js";
13
-
14
- /**
15
- * @public
16
- */
17
- const metadata = {
18
- tag: "INIT_PACKAGE_VAR_TAG",
19
- properties: /** @lends INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME.prototype */ {
20
- /**
21
- * Defines the count of the component.
22
- * @type { sap.ui.webc.base.types.Integer }
23
- * @defaultvalue 0
24
- * @public
25
- */
26
- count: {
27
- type: Integer,
28
- defaultValue: 0,
29
- },
30
- },
31
- slots: {
32
- },
33
- events: {
34
- },
35
- };
36
-
37
- /**
38
- * @class
39
- *
40
- * <h3 class="comment-api-title">Overview</h3>
41
- *
42
- * The <code>INIT_PACKAGE_VAR_TAG</code> component is a demo component that displays some text.
43
- *
44
- * @constructor
45
- * @alias INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME
46
- * @extends sap.ui.webc.base.UI5Element
47
- * @tagname INIT_PACKAGE_VAR_TAG
48
- * @public
49
- */
50
- class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
51
- static get metadata() {
52
- return metadata;
53
- }
54
-
55
- static get render() {
56
- return litRender;
57
- }
58
-
59
- static get template() {
60
- return INIT_PACKAGE_VAR_CLASS_NAMETemplate;
61
- }
62
-
63
- static get styles() {
64
- return INIT_PACKAGE_VAR_CLASS_NAMECss;
65
- }
66
-
67
- static async onDefine() {
68
- INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
69
- }
70
-
71
- onClick() {
72
- this.count++;
73
- }
74
-
75
- get counterText() {
76
- return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNT);
77
- }
78
- }
79
-
80
- INIT_PACKAGE_VAR_CLASS_NAME.define();
81
-
82
- export default INIT_PACKAGE_VAR_CLASS_NAME;
package/template/src/MyFirstComponent.ts DELETED
@@ -1,63 +0,0 @@
1
- import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2
- import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
3
- import property from "@ui5/webcomponents-base/dist/decorators/property.js";
4
- import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
5
- import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
6
- import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
7
- import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
8
-
9
- // Template
10
- import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
11
-
12
- // Styles
13
- import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
14
-
15
- import { COUNT } from "./generated/i18n/i18n-defaults.js";
16
-
17
- /**
18
- * @class
19
- *
20
- * <h3 class="comment-api-title">Overview</h3>
21
- *
22
- * The <code>INIT_PACKAGE_VAR_TAG</code> component is a demo component that displays some text.
23
- *
24
- * @constructor
25
- * @alias INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME
26
- * @extends sap.ui.webc.base.UI5Element
27
- * @tagname INIT_PACKAGE_VAR_TAG
28
- * @public
29
- */
30
- @customElement({
31
- tag: "INIT_PACKAGE_VAR_TAG",
32
- renderer: litRender,
33
- styles: INIT_PACKAGE_VAR_CLASS_NAMECss,
34
- template: INIT_PACKAGE_VAR_CLASS_NAMETemplate,
35
- })
36
- class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
37
- static i18nBundle: I18nBundle;
38
-
39
- static async onDefine() {
40
- INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
41
- }
42
-
43
- /**
44
- * Defines the component count.
45
- * @name INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME.prototype.count
46
- * @public
47
- * @type { sap.ui.webc.base.types.Integer }
48
- */
49
- @property({ validator: Integer, defaultValue: 0 })
50
- count!: number;
51
-
52
- onClick() {
53
- this.count++;
54
- }
55
-
56
- get counterText() {
57
- return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNT);
58
- }
59
- }
60
-
61
- INIT_PACKAGE_VAR_CLASS_NAME.define();
62
-
63
- export default INIT_PACKAGE_VAR_CLASS_NAME;
package/template/src/themes/sap_fiori_3/parameters-bundle.css DELETED
@@ -1,3 +0,0 @@
1
- :root {
2
- --my-component-border-color: blue;
3
- }
package/template/test/specs/Demo.spec.js DELETED
@@ -1,13 +0,0 @@
1
- const assert = require("assert");
2
-
3
- describe("INIT_PACKAGE_VAR_TAG rendering", async () => {
4
- before(async () => {
5
- await browser.url("test/pages/index.html");
6
- });
7
-
8
- it("tests if web component is correctly rendered", async () => {
9
- const innerContent = await browser.$("#myFirstComponent").shadow$("div");
10
-
11
- assert.ok(innerContent, "content rendered");
12
- });
13
- });
/package/template/{.eslintrc.js → .eslintrc.cjs} RENAMED
File without changes