p-elements-core 1.2.32-rc8 → 1.2.32

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 (64) hide show
  1. package/.editorconfig +17 -17
  2. package/.gitlab-ci.yml +18 -18
  3. package/CHANGELOG.md +201 -201
  4. package/demo/sample.js +1 -1
  5. package/demo/screen.css +16 -16
  6. package/dist/p-elements-core-modern.js +1 -1
  7. package/dist/p-elements-core.js +1 -1
  8. package/docs/package-lock.json +6897 -6897
  9. package/docs/package.json +27 -27
  10. package/docs/src/404.md +8 -8
  11. package/docs/src/_data/demos/hello-world/hello-world.tsx +35 -35
  12. package/docs/src/_data/demos/hello-world/index.html +10 -10
  13. package/docs/src/_data/demos/hello-world/project.json +7 -7
  14. package/docs/src/_data/demos/timer/demo-timer.tsx +120 -120
  15. package/docs/src/_data/demos/timer/icons.tsx +62 -62
  16. package/docs/src/_data/demos/timer/index.html +12 -12
  17. package/docs/src/_data/demos/timer/project.json +8 -8
  18. package/docs/src/_data/global.js +13 -13
  19. package/docs/src/_data/helpers.js +19 -19
  20. package/docs/src/_includes/layouts/base.njk +30 -30
  21. package/docs/src/_includes/layouts/playground.njk +40 -40
  22. package/docs/src/_includes/partials/app-header.njk +8 -8
  23. package/docs/src/_includes/partials/head.njk +14 -14
  24. package/docs/src/_includes/partials/nav.njk +19 -19
  25. package/docs/src/_includes/partials/top-nav.njk +51 -51
  26. package/docs/src/documentation/custom-element.md +221 -221
  27. package/docs/src/documentation/decorators/bind.md +71 -71
  28. package/docs/src/documentation/decorators/custom-element-config.md +63 -63
  29. package/docs/src/documentation/decorators/property.md +83 -83
  30. package/docs/src/documentation/decorators/query.md +66 -66
  31. package/docs/src/documentation/decorators/render-property-on-set.md +60 -60
  32. package/docs/src/documentation/decorators.md +9 -9
  33. package/docs/src/documentation/reactive-properties.md +53 -53
  34. package/docs/src/index.d.ts +25 -25
  35. package/docs/src/index.md +3 -3
  36. package/docs/src/scripts/components/app-mode-switch/app-mode-switch.css +78 -78
  37. package/docs/src/scripts/components/app-mode-switch/app-mode-switch.tsx +166 -166
  38. package/docs/src/scripts/components/app-playground/app-playground.tsx +189 -189
  39. package/docs/tsconfig.json +22 -22
  40. package/index.html +10 -2
  41. package/package.json +1 -1
  42. package/readme.md +206 -206
  43. package/src/custom-element-controller.ts +31 -31
  44. package/src/custom-element.test.ts +906 -906
  45. package/src/custom-element.ts +3 -8
  46. package/src/decorators/bind.test.ts +163 -163
  47. package/src/decorators/bind.ts +46 -46
  48. package/src/decorators/custom-element-config.ts +17 -17
  49. package/src/decorators/property.test.ts +279 -279
  50. package/src/decorators/query.test.ts +146 -146
  51. package/src/decorators/query.ts +12 -12
  52. package/src/decorators/render-property-on-set.ts +3 -3
  53. package/src/helpers/css.ts +71 -71
  54. package/src/maquette/cache.ts +35 -35
  55. package/src/maquette/dom.ts +115 -115
  56. package/src/maquette/h.ts +100 -100
  57. package/src/maquette/index.ts +12 -12
  58. package/src/maquette/interfaces.ts +536 -536
  59. package/src/maquette/jsx.ts +61 -61
  60. package/src/maquette/mapping.ts +56 -56
  61. package/src/maquette/projection.ts +666 -666
  62. package/src/maquette/projector.ts +205 -205
  63. package/src/sample/mixin/highlight.tsx +33 -33
  64. package/src/sample/sample.tsx +98 -0
package/docs/package.json CHANGED
@@ -1,27 +1,27 @@
1
- {
2
- "name": "docs",
3
- "version": "1.0.0",
4
- "main": "index.js",
5
- "scripts": {
6
- "test": "echo \"Error: no test specified\" && exit 1",
7
- "dev": "eleventy --serve",
8
- "build": "eleventy"
9
- },
10
- "keywords": [],
11
- "author": "",
12
- "license": "ISC",
13
- "description": "",
14
- "type": "module",
15
- "dependencies": {
16
- "@11ty/eleventy": "^3.0.0",
17
- "@11ty/eleventy-navigation": "^1.0.4",
18
- "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
19
- "cssnano": "^7.0.6",
20
- "esbuild": "^0.25.3",
21
- "p-elements-core": "^1.2.27",
22
- "playground-elements": "^0.20.0",
23
- "postcss": "^8.5.3",
24
- "postcss-import": "^16.1.0",
25
- "postcss-preset-env": "^10.1.6"
26
- }
27
- }
1
+ {
2
+ "name": "docs",
3
+ "version": "1.0.0",
4
+ "main": "index.js",
5
+ "scripts": {
6
+ "test": "echo \"Error: no test specified\" && exit 1",
7
+ "dev": "eleventy --serve",
8
+ "build": "eleventy"
9
+ },
10
+ "keywords": [],
11
+ "author": "",
12
+ "license": "ISC",
13
+ "description": "",
14
+ "type": "module",
15
+ "dependencies": {
16
+ "@11ty/eleventy": "^3.0.0",
17
+ "@11ty/eleventy-navigation": "^1.0.4",
18
+ "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
19
+ "cssnano": "^7.0.6",
20
+ "esbuild": "^0.25.3",
21
+ "p-elements-core": "^1.2.27",
22
+ "playground-elements": "^0.20.0",
23
+ "postcss": "^8.5.3",
24
+ "postcss-import": "^16.1.0",
25
+ "postcss-preset-env": "^10.1.6"
26
+ }
27
+ }
package/docs/src/404.md CHANGED
@@ -1,8 +1,8 @@
1
- ---
2
- title: "Page Not Found"
3
- layout: "base.njk"
4
- description: "Requested page does not exist."
5
- permalink: "404.html"
6
- ---
7
-
8
- # Page Not Found
1
+ ---
2
+ title: "Page Not Found"
3
+ layout: "base.njk"
4
+ description: "Requested page does not exist."
5
+ permalink: "404.html"
6
+ ---
7
+
8
+ # Page Not Found
package/docs/src/_data/demos/hello-world/hello-world.tsx CHANGED
@@ -1,35 +1,35 @@
1
- /* playground-hide */
2
-
3
- import "p-elements-core";
4
-
5
- // Can not configure tsxFactory in the playground,
6
- // so we assign Maquette.h to React.createElement
7
- const React = {
8
- createElement: Maquette.h,
9
- };
10
-
11
- /* playground-hide-end */
12
-
13
- @CustomElementConfig({
14
- tagName: "p-hello",
15
- })
16
- export class HelloWorldElement extends CustomElement {
17
- static style = `
18
- .hello-world{
19
- color: red;
20
- }`;
21
-
22
- onNameClick = () => {
23
- const newName = prompt("Enter a new name:", this.name);
24
- if (newName) {
25
- this.name = newName;
26
- }
27
- }
28
-
29
- @Property({ type: "string", attribute: "name", reflect: true })
30
- name: string = "World";
31
-
32
- render= () : VNode => {
33
- return <div class="hello-world">Hello <strong onclick={this.onNameClick}>{this.name}</strong></div>;
34
- }
35
- }
1
+ /* playground-hide */
2
+
3
+ import "p-elements-core";
4
+
5
+ // Can not configure tsxFactory in the playground,
6
+ // so we assign Maquette.h to React.createElement
7
+ const React = {
8
+ createElement: Maquette.h,
9
+ };
10
+
11
+ /* playground-hide-end */
12
+
13
+ @CustomElementConfig({
14
+ tagName: "p-hello",
15
+ })
16
+ export class HelloWorldElement extends CustomElement {
17
+ static style = `
18
+ .hello-world{
19
+ color: red;
20
+ }`;
21
+
22
+ onNameClick = () => {
23
+ const newName = prompt("Enter a new name:", this.name);
24
+ if (newName) {
25
+ this.name = newName;
26
+ }
27
+ }
28
+
29
+ @Property({ type: "string", attribute: "name", reflect: true })
30
+ name: string = "World";
31
+
32
+ render= () : VNode => {
33
+ return <div class="hello-world">Hello <strong onclick={this.onNameClick}>{this.name}</strong></div>;
34
+ }
35
+ }
package/docs/src/_data/demos/hello-world/index.html CHANGED
@@ -1,10 +1,10 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>Hello World</title>
5
- </head>
6
- <body>
7
- <p-hello name="World"></p-hello>
8
- <script type="module" src="./hello-world.js"></script>
9
- </body>
10
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Hello World</title>
5
+ </head>
6
+ <body>
7
+ <p-hello name="World"></p-hello>
8
+ <script type="module" src="./hello-world.js"></script>
9
+ </body>
10
+ </html>
package/docs/src/_data/demos/hello-world/project.json CHANGED
@@ -1,7 +1,7 @@
1
- {
2
- "files": {
3
- "hello-world.tsx": {},
4
- "index.html": {}
5
- },
6
- "previewHeight": "125px"
7
- }
1
+ {
2
+ "files": {
3
+ "hello-world.tsx": {},
4
+ "index.html": {}
5
+ },
6
+ "previewHeight": "125px"
7
+ }
package/docs/src/_data/demos/timer/demo-timer.tsx CHANGED
@@ -1,120 +1,120 @@
1
- import { pause, play, replay } from "./icons.js";
2
-
3
- /* playground-hide */
4
-
5
- import "p-elements-core";
6
-
7
- // Can not configure tsxFactory in the playground,
8
- // so we assign Maquette.h to React.createElement
9
- const React = {
10
- createElement: Maquette.h,
11
- };
12
-
13
- /* playground-hide-end */
14
- /* playground-fold */
15
- function pad(pad: unknown, val: number) {
16
- return pad ? String(val).padStart(2, "0") : val;
17
- }
18
- /* playground-fold-end */
19
-
20
- const css = /* playground-fold */ `
21
- :host {
22
- margin: 1rem;
23
- font-family: monospace;
24
- font-size: 2rem;
25
- display: inline-flex;
26
- flex-direction: column;
27
- align-items: center;
28
- justify-content: center;
29
- }
30
- .timer {
31
- display: flex;
32
- justify-content: center;
33
- align-items: center;
34
- }
35
- .buttons {
36
- user-select: none;
37
- display: flex;
38
- gap: .5rem;
39
- }
40
- button {
41
- line-height: 0;
42
- padding: 0;
43
- }
44
- ` /* playground-fold-end */;
45
-
46
- @CustomElementConfig({
47
- tagName: "demo-timer",
48
- })
49
- export class DemoTimerElement extends CustomElement {
50
- static style = css
51
-
52
- @Property({ type: "number", attribute: "duration" })
53
- duration: number = 0;
54
-
55
- @PropertyRenderOnSet
56
- private end: number = null;
57
-
58
- @PropertyRenderOnSet
59
- private remaining: number = 0;
60
-
61
- render(): VNode {
62
- const { remaining, running } = this;
63
- const min = Math.floor(remaining / 60000);
64
- const sec = pad(min, Math.floor((remaining / 1000) % 60));
65
- const hun = pad(true, Math.floor((remaining % 1000) / 10));
66
-
67
- return (
68
- <div>
69
- <div class="timer">{`${min ? `${min}:${sec}` : `${sec}.${hun}`}`}</div>
70
- <div class="buttons">
71
- {remaining === 0 ? (
72
- ""
73
- ) : running ? (
74
- <button onclick={this.pause} key="pause-button">
75
- {pause("pause-icon")}
76
- </button>
77
- ) : (
78
- <button onclick={this.start} key="play-button">
79
- {play("play-icon")}
80
- </button>
81
- )}
82
- <button onclick={this.reset} key="replay-button">
83
- {replay("replay-icon")}
84
- </button>
85
- </div>
86
- </div>
87
- );
88
- }
89
-
90
- start = () => {
91
- this.end = Date.now() + this.remaining;
92
- this.tick();
93
- };
94
-
95
- pause = () => {
96
- this.end = null;
97
- };
98
-
99
- reset = () => {
100
- const running = this.running;
101
- this.remaining = this.duration * 1000;
102
- this.end = running ? Date.now() + this.remaining : null;
103
- };
104
-
105
- tick() {
106
- if (this.running) {
107
- this.remaining = Math.max(0, this.end! - Date.now());
108
- requestAnimationFrame(() => this.tick());
109
- }
110
- }
111
-
112
- get running() {
113
- return this.end && this.remaining;
114
- }
115
-
116
- connectedCallback() {
117
- super.connectedCallback();
118
- this.reset();
119
- }
120
- }
1
+ import { pause, play, replay } from "./icons.js";
2
+
3
+ /* playground-hide */
4
+
5
+ import "p-elements-core";
6
+
7
+ // Can not configure tsxFactory in the playground,
8
+ // so we assign Maquette.h to React.createElement
9
+ const React = {
10
+ createElement: Maquette.h,
11
+ };
12
+
13
+ /* playground-hide-end */
14
+ /* playground-fold */
15
+ function pad(pad: unknown, val: number) {
16
+ return pad ? String(val).padStart(2, "0") : val;
17
+ }
18
+ /* playground-fold-end */
19
+
20
+ const css = /* playground-fold */ `
21
+ :host {
22
+ margin: 1rem;
23
+ font-family: monospace;
24
+ font-size: 2rem;
25
+ display: inline-flex;
26
+ flex-direction: column;
27
+ align-items: center;
28
+ justify-content: center;
29
+ }
30
+ .timer {
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ }
35
+ .buttons {
36
+ user-select: none;
37
+ display: flex;
38
+ gap: .5rem;
39
+ }
40
+ button {
41
+ line-height: 0;
42
+ padding: 0;
43
+ }
44
+ ` /* playground-fold-end */;
45
+
46
+ @CustomElementConfig({
47
+ tagName: "demo-timer",
48
+ })
49
+ export class DemoTimerElement extends CustomElement {
50
+ static style = css
51
+
52
+ @Property({ type: "number", attribute: "duration" })
53
+ duration: number = 0;
54
+
55
+ @PropertyRenderOnSet
56
+ private end: number = null;
57
+
58
+ @PropertyRenderOnSet
59
+ private remaining: number = 0;
60
+
61
+ render(): VNode {
62
+ const { remaining, running } = this;
63
+ const min = Math.floor(remaining / 60000);
64
+ const sec = pad(min, Math.floor((remaining / 1000) % 60));
65
+ const hun = pad(true, Math.floor((remaining % 1000) / 10));
66
+
67
+ return (
68
+ <div>
69
+ <div class="timer">{`${min ? `${min}:${sec}` : `${sec}.${hun}`}`}</div>
70
+ <div class="buttons">
71
+ {remaining === 0 ? (
72
+ ""
73
+ ) : running ? (
74
+ <button onclick={this.pause} key="pause-button">
75
+ {pause("pause-icon")}
76
+ </button>
77
+ ) : (
78
+ <button onclick={this.start} key="play-button">
79
+ {play("play-icon")}
80
+ </button>
81
+ )}
82
+ <button onclick={this.reset} key="replay-button">
83
+ {replay("replay-icon")}
84
+ </button>
85
+ </div>
86
+ </div>
87
+ );
88
+ }
89
+
90
+ start = () => {
91
+ this.end = Date.now() + this.remaining;
92
+ this.tick();
93
+ };
94
+
95
+ pause = () => {
96
+ this.end = null;
97
+ };
98
+
99
+ reset = () => {
100
+ const running = this.running;
101
+ this.remaining = this.duration * 1000;
102
+ this.end = running ? Date.now() + this.remaining : null;
103
+ };
104
+
105
+ tick() {
106
+ if (this.running) {
107
+ this.remaining = Math.max(0, this.end! - Date.now());
108
+ requestAnimationFrame(() => this.tick());
109
+ }
110
+ }
111
+
112
+ get running() {
113
+ return this.end && this.remaining;
114
+ }
115
+
116
+ connectedCallback() {
117
+ super.connectedCallback();
118
+ this.reset();
119
+ }
120
+ }
package/docs/src/_data/demos/timer/icons.tsx CHANGED
@@ -1,62 +1,62 @@
1
- /* playground-hide */
2
-
3
- import "p-elements-core";
4
-
5
- // Can not configure tsxFactory in the playground,
6
- // so we assign Maquette.h to React.createElement
7
- const React = {
8
- createElement: Maquette.h,
9
- };
10
-
11
- /* playground-hide-end */
12
- export const replay = (key: string) => (
13
- <svg
14
- key={key}
15
- xmlns="http://www.w3.org/2000/svg"
16
- enable-background="new 0 0 24 24"
17
- height="24px"
18
- viewBox="0 0 24 24"
19
- width="24px"
20
- fill="#000000"
21
- >
22
- <title>Replay</title>
23
- <g>
24
- <rect fill="none" height="24" width="24" />
25
- <rect fill="none" height="24" width="24" />
26
- <rect fill="none" height="24" width="24" />
27
- </g>
28
- <g>
29
- <g />
30
- <path d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z" />
31
- </g>
32
- </svg>
33
- );
34
-
35
- export const pause = (key: string) => (
36
- <svg
37
- key={key}
38
- xmlns="http://www.w3.org/2000/svg"
39
- height="24px"
40
- viewBox="0 0 24 24"
41
- width="24px"
42
- fill="#000000"
43
- >
44
- <title>Pause</title>
45
- <path d="M0 0h24v24H0V0z" fill="none" />
46
- <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
47
- </svg>
48
- );
49
- export const play = (key: string) => (
50
- <svg
51
- key={key}
52
- xmlns="http://www.w3.org/2000/svg"
53
- height="24px"
54
- viewBox="0 0 24 24"
55
- width="24px"
56
- fill="#000000"
57
- >
58
- <title>Play</title>
59
- <path d="M0 0h24v24H0V0z" fill="none" />
60
- <path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z" />
61
- </svg>
62
- );
1
+ /* playground-hide */
2
+
3
+ import "p-elements-core";
4
+
5
+ // Can not configure tsxFactory in the playground,
6
+ // so we assign Maquette.h to React.createElement
7
+ const React = {
8
+ createElement: Maquette.h,
9
+ };
10
+
11
+ /* playground-hide-end */
12
+ export const replay = (key: string) => (
13
+ <svg
14
+ key={key}
15
+ xmlns="http://www.w3.org/2000/svg"
16
+ enable-background="new 0 0 24 24"
17
+ height="24px"
18
+ viewBox="0 0 24 24"
19
+ width="24px"
20
+ fill="#000000"
21
+ >
22
+ <title>Replay</title>
23
+ <g>
24
+ <rect fill="none" height="24" width="24" />
25
+ <rect fill="none" height="24" width="24" />
26
+ <rect fill="none" height="24" width="24" />
27
+ </g>
28
+ <g>
29
+ <g />
30
+ <path d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z" />
31
+ </g>
32
+ </svg>
33
+ );
34
+
35
+ export const pause = (key: string) => (
36
+ <svg
37
+ key={key}
38
+ xmlns="http://www.w3.org/2000/svg"
39
+ height="24px"
40
+ viewBox="0 0 24 24"
41
+ width="24px"
42
+ fill="#000000"
43
+ >
44
+ <title>Pause</title>
45
+ <path d="M0 0h24v24H0V0z" fill="none" />
46
+ <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
47
+ </svg>
48
+ );
49
+ export const play = (key: string) => (
50
+ <svg
51
+ key={key}
52
+ xmlns="http://www.w3.org/2000/svg"
53
+ height="24px"
54
+ viewBox="0 0 24 24"
55
+ width="24px"
56
+ fill="#000000"
57
+ >
58
+ <title>Play</title>
59
+ <path d="M0 0h24v24H0V0z" fill="none" />
60
+ <path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z" />
61
+ </svg>
62
+ );
package/docs/src/_data/demos/timer/index.html CHANGED
@@ -1,12 +1,12 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>Demo timer</title>
5
- </head>
6
- <body>
7
- <demo-timer duration="7"></demo-timer>
8
- <demo-timer duration="60"></demo-timer>
9
- <demo-timer duration="300"></demo-timer>
10
- <script type="module" src="./demo-timer.js"></script>
11
- </body>
12
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Demo timer</title>
5
+ </head>
6
+ <body>
7
+ <demo-timer duration="7"></demo-timer>
8
+ <demo-timer duration="60"></demo-timer>
9
+ <demo-timer duration="300"></demo-timer>
10
+ <script type="module" src="./demo-timer.js"></script>
11
+ </body>
12
+ </html>
package/docs/src/_data/demos/timer/project.json CHANGED
@@ -1,8 +1,8 @@
1
- {
2
- "files": {
3
- "demo-timer.tsx": {},
4
- "icons.tsx": {},
5
- "index.html": {}
6
- },
7
- "previewHeight": "125px"
8
- }
1
+ {
2
+ "files": {
3
+ "demo-timer.tsx": {},
4
+ "icons.tsx": {},
5
+ "index.html": {}
6
+ },
7
+ "previewHeight": "125px"
8
+ }
package/docs/src/_data/global.js CHANGED
@@ -1,13 +1,13 @@
1
-
2
-
3
- export default global = {
4
- site:"P Elements",
5
- pathPrefix: process.argv.indexOf("--serve") !== -1 ? "" : "/p-elements-core",
6
- navigation: [
7
- { title: "Documentation", url: "/documentation/index.html" },
8
- { title: "Playground", url: "/playground/index.html"},
9
- ],
10
- playground: [
11
- { title: "Hello world", path: "/playground" }
12
- ]
13
- };
1
+
2
+
3
+ export default global = {
4
+ site:"P Elements",
5
+ pathPrefix: process.argv.indexOf("--serve") !== -1 ? "" : "/p-elements-core",
6
+ navigation: [
7
+ { title: "Documentation", url: "/documentation/index.html" },
8
+ { title: "Playground", url: "/playground/index.html"},
9
+ ],
10
+ playground: [
11
+ { title: "Hello world", path: "/playground" }
12
+ ]
13
+ };
package/docs/src/_data/helpers.js CHANGED
@@ -1,19 +1,19 @@
1
- export function getLinkActiveState(itemUrl, pageUrl) {
2
- let response = '';
3
-
4
- // Ensure pageUrl is a string before proceeding
5
- if (typeof pageUrl === 'string') {
6
- if (itemUrl === pageUrl) {
7
- response = ' aria-current=page';
8
- }
9
-
10
- // Need to check if the pageUrl is a subpath of the itemUrl
11
- const itemPath = itemUrl.split('/')[1];
12
- const pagePath = pageUrl.split('/')[1];
13
- if (itemPath === pagePath) {
14
- response += ' data-state=active';
15
- }
16
- }
17
-
18
- return response;
19
- }
1
+ export function getLinkActiveState(itemUrl, pageUrl) {
2
+ let response = '';
3
+
4
+ // Ensure pageUrl is a string before proceeding
5
+ if (typeof pageUrl === 'string') {
6
+ if (itemUrl === pageUrl) {
7
+ response = ' aria-current=page';
8
+ }
9
+
10
+ // Need to check if the pageUrl is a subpath of the itemUrl
11
+ const itemPath = itemUrl.split('/')[1];
12
+ const pagePath = pageUrl.split('/')[1];
13
+ if (itemPath === pagePath) {
14
+ response += ' data-state=active';
15
+ }
16
+ }
17
+
18
+ return response;
19
+ }