@ptcwebops/ptcw-design 0.5.7 → 0.5.9

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 (249) hide show
  1. package/LICENSE +21 -21
  2. package/dist/cjs/dropdown-item.cjs.entry.js +10 -10
  3. package/dist/cjs/icon-asset_13.cjs.entry.js +678 -678
  4. package/dist/cjs/{interfaces-0ecd8027.js → interfaces-574e6df7.js} +9 -9
  5. package/dist/cjs/list-item.cjs.entry.js +19 -19
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/cjs/lottie-player.cjs.entry.js +354 -354
  8. package/dist/cjs/my-component.cjs.entry.js +13 -13
  9. package/dist/cjs/ptc-accordion-item.cjs.entry.js +97 -97
  10. package/dist/cjs/ptc-accordion.cjs.entry.js +38 -38
  11. package/dist/cjs/ptc-announcement.cjs.entry.js +38 -38
  12. package/dist/cjs/ptc-breadcrumb.cjs.entry.js +13 -13
  13. package/dist/cjs/ptc-card-bottom.cjs.entry.js +31 -31
  14. package/dist/cjs/ptc-card-content.cjs.entry.js +32 -32
  15. package/dist/cjs/ptc-card-plm.cjs.entry.js +16 -16
  16. package/dist/cjs/ptc-card.cjs.entry.js +69 -69
  17. package/dist/cjs/ptc-date.cjs.entry.js +48 -48
  18. package/dist/cjs/ptc-ellipsis-dropdown.cjs.entry.js +23 -23
  19. package/dist/cjs/ptc-hero-footer-cta.cjs.entry.js +8 -8
  20. package/dist/cjs/ptc-hero.cjs.entry.js +18 -18
  21. package/dist/cjs/ptc-icon-list.cjs.entry.js +32 -32
  22. package/dist/cjs/ptc-img_2.cjs.entry.js +169 -169
  23. package/dist/cjs/ptc-list.cjs.entry.js +23 -23
  24. package/dist/cjs/ptc-lottie.cjs.entry.js +12 -12
  25. package/dist/cjs/ptc-minimized-footer.cjs.entry.js +8 -8
  26. package/dist/cjs/ptc-minimized-header.cjs.entry.js +11 -11
  27. package/dist/cjs/ptc-mobile-select.cjs.entry.js +69 -69
  28. package/dist/cjs/ptc-nav-item.cjs.entry.js +83 -83
  29. package/dist/cjs/ptc-nav.cjs.entry.js +8 -8
  30. package/dist/cjs/ptc-pagenation.cjs.entry.js +111 -0
  31. package/dist/cjs/ptc-picture.cjs.entry.js +169 -169
  32. package/dist/cjs/ptc-previous-url.cjs.entry.js +8 -8
  33. package/dist/cjs/ptc-pricing-block.cjs.entry.js +14 -14
  34. package/dist/cjs/ptc-quote.cjs.entry.js +25 -25
  35. package/dist/cjs/ptc-responsive-wrapper.cjs.entry.js +54 -54
  36. package/dist/cjs/ptc-social-share.cjs.entry.js +64 -64
  37. package/dist/cjs/ptc-span.cjs.entry.js +23 -23
  38. package/dist/cjs/ptc-svg-btn.cjs.entry.js +75 -75
  39. package/dist/cjs/ptc-tab-list.cjs.entry.js +116 -116
  40. package/dist/cjs/ptc-two-column-media.cjs.entry.js +14 -14
  41. package/dist/cjs/ptcw-design.cjs.js +1 -1
  42. package/dist/cjs/tab-content.cjs.entry.js +26 -26
  43. package/dist/cjs/tab-header.cjs.entry.js +43 -43
  44. package/dist/collection/collection-manifest.json +1 -0
  45. package/dist/collection/components/dropdown-item/dropdown-item.js +56 -56
  46. package/dist/collection/components/icon-asset/icon-asset.css +4 -4
  47. package/dist/collection/components/icon-asset/icon-asset.js +199 -199
  48. package/dist/collection/components/icon-asset/media/brands.svg +1381 -1381
  49. package/dist/collection/components/icon-asset/media/designer.svg +338 -338
  50. package/dist/collection/components/icon-asset/media/regular.svg +463 -463
  51. package/dist/collection/components/icon-asset/media/solid.svg +3013 -3013
  52. package/dist/collection/components/icon-asset/media/svg-with-js.min.css +4 -4
  53. package/dist/collection/components/list-item/list-item.js +103 -103
  54. package/dist/collection/components/my-component/my-component.css +3 -3
  55. package/dist/collection/components/my-component/my-component.js +73 -73
  56. package/dist/collection/components/ptc-accordion/ptc-accordion-item/ptc-accordion-item.js +296 -296
  57. package/dist/collection/components/ptc-accordion/ptc-accordion.js +74 -74
  58. package/dist/collection/components/ptc-announcement/ptc-announcement.css +2 -1
  59. package/dist/collection/components/ptc-announcement/ptc-announcement.js +210 -210
  60. package/dist/collection/components/ptc-breadcrumb/ptc-breadcrumb.css +1 -1
  61. package/dist/collection/components/ptc-breadcrumb/ptc-breadcrumb.js +21 -21
  62. package/dist/collection/components/ptc-button/ptc-button.js +293 -293
  63. package/dist/collection/components/ptc-card/ptc-card.css +76 -0
  64. package/dist/collection/components/ptc-card/ptc-card.js +301 -282
  65. package/dist/collection/components/ptc-card-bottom/ptc-card-bottom.js +105 -105
  66. package/dist/collection/components/ptc-card-content/ptc-card-content.css +1 -1
  67. package/dist/collection/components/ptc-card-content/ptc-card-content.js +105 -105
  68. package/dist/collection/components/ptc-card-plm/ptc-card-plm.js +97 -97
  69. package/dist/collection/components/ptc-checkbox/ptc-checkbox.js +114 -114
  70. package/dist/collection/components/ptc-container/ptc-container.js +119 -119
  71. package/dist/collection/components/ptc-date/ptc-date.js +201 -201
  72. package/dist/collection/components/ptc-dropdown/ptc-dropdown.js +144 -144
  73. package/dist/collection/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.js +77 -77
  74. package/dist/collection/components/ptc-filter-tag/ptc-filter-tag.js +70 -70
  75. package/dist/collection/components/ptc-hero/ptc-hero.js +67 -67
  76. package/dist/collection/components/ptc-hero-footer-cta/ptc-hero-footer-cta.js +77 -77
  77. package/dist/collection/components/ptc-icon-list/ptc-icon-list.js +145 -145
  78. package/dist/collection/components/ptc-icon-minimize/ptc-icon-minimize.js +86 -86
  79. package/dist/collection/components/ptc-img/ptc-img.js +314 -314
  80. package/dist/collection/components/ptc-link/ptc-link.css +1 -1
  81. package/dist/collection/components/ptc-link/ptc-link.js +198 -198
  82. package/dist/collection/components/ptc-list/ptc-list.js +68 -68
  83. package/dist/collection/components/ptc-lottie/ptc-lottie.css +5 -5
  84. package/dist/collection/components/ptc-lottie/ptc-lottie.js +58 -58
  85. package/dist/collection/components/ptc-minimized-footer/ptc-minimized-footer.js +17 -17
  86. package/dist/collection/components/ptc-minimized-header/ptc-minimized-header.js +80 -80
  87. package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js +221 -221
  88. package/dist/collection/components/ptc-modal/ptc-modal.js +337 -337
  89. package/dist/collection/components/ptc-nav/ptc-nav.js +21 -21
  90. package/dist/collection/components/ptc-nav-item/ptc-nav-item.js +252 -252
  91. package/dist/collection/components/ptc-overlay/ptc-overlay.js +99 -99
  92. package/dist/collection/components/ptc-pagenation/ptc-pagenation.css +113 -0
  93. package/dist/collection/components/ptc-pagenation/ptc-pagenation.js +277 -0
  94. package/dist/collection/components/ptc-para/ptc-para.js +157 -157
  95. package/dist/collection/components/ptc-picture/ptc-picture.js +474 -474
  96. package/dist/collection/components/ptc-previous-url/ptc-previous-url.js +54 -54
  97. package/dist/collection/components/ptc-pricing-block/ptc-pricing-block.js +25 -25
  98. package/dist/collection/components/ptc-quote/ptc-quote.js +154 -154
  99. package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.css +3 -3
  100. package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.js +62 -62
  101. package/dist/collection/components/ptc-shopping-cart/ptc-shopping-cart.js +91 -91
  102. package/dist/collection/components/ptc-social-share/ptc-social-share.js +206 -206
  103. package/dist/collection/components/ptc-spacer/ptc-spacer.css +322 -322
  104. package/dist/collection/components/ptc-spacer/ptc-spacer.js +99 -99
  105. package/dist/collection/components/ptc-span/ptc-span.js +89 -89
  106. package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.js +71 -71
  107. package/dist/collection/components/ptc-tab-list/ptc-tab-list.js +140 -140
  108. package/dist/collection/components/ptc-title/ptc-title.js +245 -245
  109. package/dist/collection/components/ptc-two-column-media/ptc-two-column-media.js +40 -40
  110. package/dist/collection/components/tab-content/tab-content.js +74 -74
  111. package/dist/collection/components/tab-header/tab-header.js +107 -107
  112. package/dist/collection/index.js +1 -1
  113. package/dist/collection/media/svg-imgs/Back-arrow.svg +11 -11
  114. package/dist/collection/media/svg-imgs/close.svg +10 -10
  115. package/dist/collection/media/svg-imgs/ptc-shopping-cart-black.svg +3 -3
  116. package/dist/collection/media/svg-imgs/ptc-shopping-cart-white.svg +3 -3
  117. package/dist/collection/media/svg-imgs/slider-arrow-left.svg +18 -18
  118. package/dist/collection/media/svg-imgs/slider-arrow-right.svg +18 -18
  119. package/dist/collection/media/svg-imgs/union.svg +3 -3
  120. package/dist/collection/utils/component.js +3 -3
  121. package/dist/collection/utils/interfaces.js +11 -11
  122. package/dist/collection/utils/utils.js +3 -3
  123. package/dist/custom-elements/index.d.ts +6 -0
  124. package/dist/custom-elements/index.js +2766 -2658
  125. package/dist/esm/dropdown-item.entry.js +10 -10
  126. package/dist/esm/icon-asset_13.entry.js +677 -677
  127. package/dist/esm/{interfaces-c1c73092.js → interfaces-7c0243be.js} +9 -9
  128. package/dist/esm/list-item.entry.js +19 -19
  129. package/dist/esm/loader.js +1 -1
  130. package/dist/esm/lottie-player.entry.js +354 -354
  131. package/dist/esm/my-component.entry.js +13 -13
  132. package/dist/esm/polyfills/core-js.js +0 -0
  133. package/dist/esm/polyfills/dom.js +0 -0
  134. package/dist/esm/polyfills/es5-html-element.js +0 -0
  135. package/dist/esm/polyfills/index.js +0 -0
  136. package/dist/esm/polyfills/system.js +0 -0
  137. package/dist/esm/ptc-accordion-item.entry.js +97 -97
  138. package/dist/esm/ptc-accordion.entry.js +38 -38
  139. package/dist/esm/ptc-announcement.entry.js +38 -38
  140. package/dist/esm/ptc-breadcrumb.entry.js +13 -13
  141. package/dist/esm/ptc-card-bottom.entry.js +31 -31
  142. package/dist/esm/ptc-card-content.entry.js +32 -32
  143. package/dist/esm/ptc-card-plm.entry.js +16 -16
  144. package/dist/esm/ptc-card.entry.js +69 -69
  145. package/dist/esm/ptc-date.entry.js +48 -48
  146. package/dist/esm/ptc-ellipsis-dropdown.entry.js +23 -23
  147. package/dist/esm/ptc-hero-footer-cta.entry.js +8 -8
  148. package/dist/esm/ptc-hero.entry.js +18 -18
  149. package/dist/esm/ptc-icon-list.entry.js +32 -32
  150. package/dist/esm/ptc-img_2.entry.js +169 -169
  151. package/dist/esm/ptc-list.entry.js +23 -23
  152. package/dist/esm/ptc-lottie.entry.js +12 -12
  153. package/dist/esm/ptc-minimized-footer.entry.js +8 -8
  154. package/dist/esm/ptc-minimized-header.entry.js +11 -11
  155. package/dist/esm/ptc-mobile-select.entry.js +69 -69
  156. package/dist/esm/ptc-nav-item.entry.js +83 -83
  157. package/dist/esm/ptc-nav.entry.js +8 -8
  158. package/dist/esm/ptc-pagenation.entry.js +107 -0
  159. package/dist/esm/ptc-picture.entry.js +169 -169
  160. package/dist/esm/ptc-previous-url.entry.js +8 -8
  161. package/dist/esm/ptc-pricing-block.entry.js +14 -14
  162. package/dist/esm/ptc-quote.entry.js +25 -25
  163. package/dist/esm/ptc-responsive-wrapper.entry.js +54 -54
  164. package/dist/esm/ptc-social-share.entry.js +64 -64
  165. package/dist/esm/ptc-span.entry.js +23 -23
  166. package/dist/esm/ptc-svg-btn.entry.js +75 -75
  167. package/dist/esm/ptc-tab-list.entry.js +116 -116
  168. package/dist/esm/ptc-two-column-media.entry.js +14 -14
  169. package/dist/esm/ptcw-design.js +1 -1
  170. package/dist/esm/tab-content.entry.js +26 -26
  171. package/dist/esm/tab-header.entry.js +43 -43
  172. package/dist/ptcw-design/media/brands.svg +1381 -1381
  173. package/dist/ptcw-design/media/designer.svg +338 -338
  174. package/dist/ptcw-design/media/regular.svg +463 -463
  175. package/dist/ptcw-design/media/solid.svg +3013 -3013
  176. package/dist/ptcw-design/media/svg-with-js.min.css +4 -4
  177. package/dist/ptcw-design/p-1884f74a.entry.js +1 -0
  178. package/dist/ptcw-design/{p-9e1fe694.entry.js → p-1b5090d8.entry.js} +1 -1
  179. package/dist/ptcw-design/p-246057c5.entry.js +1 -0
  180. package/dist/ptcw-design/p-26c9bc7b.entry.js +1 -0
  181. package/dist/ptcw-design/{p-5142e9f1.entry.js → p-4a80df00.entry.js} +1 -1
  182. package/dist/ptcw-design/{p-695f82bc.entry.js → p-7541c3e8.entry.js} +1 -1
  183. package/dist/ptcw-design/{p-83277ae9.entry.js → p-b61d821b.entry.js} +1 -1
  184. package/dist/ptcw-design/p-e5b8fc3d.entry.js +1 -0
  185. package/dist/ptcw-design/ptcw-design.css +1 -1
  186. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  187. package/dist/types/components/dropdown-item/dropdown-item.d.ts +5 -5
  188. package/dist/types/components/icon-asset/icon-asset.d.ts +36 -36
  189. package/dist/types/components/list-item/list-item.d.ts +8 -8
  190. package/dist/types/components/my-component/my-component.d.ts +16 -16
  191. package/dist/types/components/ptc-accordion/ptc-accordion-item/ptc-accordion-item.d.ts +59 -59
  192. package/dist/types/components/ptc-accordion/ptc-accordion.d.ts +13 -13
  193. package/dist/types/components/ptc-announcement/ptc-announcement.d.ts +43 -43
  194. package/dist/types/components/ptc-breadcrumb/ptc-breadcrumb.d.ts +4 -4
  195. package/dist/types/components/ptc-button/ptc-button.d.ts +56 -56
  196. package/dist/types/components/ptc-card/ptc-card.d.ts +54 -50
  197. package/dist/types/components/ptc-card-bottom/ptc-card-bottom.d.ts +15 -15
  198. package/dist/types/components/ptc-card-content/ptc-card-content.d.ts +15 -15
  199. package/dist/types/components/ptc-card-plm/ptc-card-plm.d.ts +8 -8
  200. package/dist/types/components/ptc-checkbox/ptc-checkbox.d.ts +11 -11
  201. package/dist/types/components/ptc-container/ptc-container.d.ts +12 -12
  202. package/dist/types/components/ptc-date/ptc-date.d.ts +41 -41
  203. package/dist/types/components/ptc-dropdown/ptc-dropdown.d.ts +18 -18
  204. package/dist/types/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.d.ts +10 -10
  205. package/dist/types/components/ptc-filter-tag/ptc-filter-tag.d.ts +11 -11
  206. package/dist/types/components/ptc-hero/ptc-hero.d.ts +12 -12
  207. package/dist/types/components/ptc-hero-footer-cta/ptc-hero-footer-cta.d.ts +6 -6
  208. package/dist/types/components/ptc-icon-list/ptc-icon-list.d.ts +21 -21
  209. package/dist/types/components/ptc-icon-minimize/ptc-icon-minimize.d.ts +9 -9
  210. package/dist/types/components/ptc-img/ptc-img.d.ts +51 -51
  211. package/dist/types/components/ptc-link/ptc-link.d.ts +36 -36
  212. package/dist/types/components/ptc-list/ptc-list.d.ts +6 -6
  213. package/dist/types/components/ptc-lottie/ptc-lottie.d.ts +12 -12
  214. package/dist/types/components/ptc-minimized-footer/ptc-minimized-footer.d.ts +3 -3
  215. package/dist/types/components/ptc-minimized-header/ptc-minimized-header.d.ts +6 -6
  216. package/dist/types/components/ptc-mobile-select/ptc-mobile-select.d.ts +40 -40
  217. package/dist/types/components/ptc-modal/ptc-modal.d.ts +55 -55
  218. package/dist/types/components/ptc-nav/ptc-nav.d.ts +3 -3
  219. package/dist/types/components/ptc-nav-item/ptc-nav-item.d.ts +53 -53
  220. package/dist/types/components/ptc-overlay/ptc-overlay.d.ts +20 -20
  221. package/dist/types/components/ptc-pagenation/ptc-pagenation.d.ts +25 -0
  222. package/dist/types/components/ptc-para/ptc-para.d.ts +28 -28
  223. package/dist/types/components/ptc-picture/ptc-picture.d.ts +93 -93
  224. package/dist/types/components/ptc-previous-url/ptc-previous-url.d.ts +5 -5
  225. package/dist/types/components/ptc-pricing-block/ptc-pricing-block.d.ts +4 -4
  226. package/dist/types/components/ptc-quote/ptc-quote.d.ts +29 -29
  227. package/dist/types/components/ptc-responsive-wrapper/ptc-responsive-wrapper.d.ts +8 -8
  228. package/dist/types/components/ptc-shopping-cart/ptc-shopping-cart.d.ts +6 -6
  229. package/dist/types/components/ptc-social-share/ptc-social-share.d.ts +25 -25
  230. package/dist/types/components/ptc-spacer/ptc-spacer.d.ts +16 -16
  231. package/dist/types/components/ptc-span/ptc-span.d.ts +16 -16
  232. package/dist/types/components/ptc-svg-btn/ptc-svg-btn.d.ts +12 -12
  233. package/dist/types/components/ptc-tab-list/ptc-tab-list.d.ts +14 -14
  234. package/dist/types/components/ptc-title/ptc-title.d.ts +41 -41
  235. package/dist/types/components/ptc-two-column-media/ptc-two-column-media.d.ts +9 -9
  236. package/dist/types/components/tab-content/tab-content.d.ts +12 -12
  237. package/dist/types/components/tab-header/tab-header.d.ts +13 -13
  238. package/dist/types/components.d.ts +64 -26
  239. package/dist/types/global.d.ts +1072 -1072
  240. package/dist/types/index.d.ts +1 -1
  241. package/dist/types/utils/component.d.ts +1 -1
  242. package/dist/types/utils/interfaces.d.ts +28 -28
  243. package/dist/types/utils/utils.d.ts +1 -1
  244. package/package.json +59 -59
  245. package/readme.md +11 -11
  246. package/dist/ptcw-design/p-32ec2097.entry.js +0 -1
  247. package/dist/ptcw-design/p-525da87e.entry.js +0 -1
  248. package/dist/ptcw-design/p-6ec21b76.entry.js +0 -1
  249. /package/dist/ptcw-design/{p-50e52c88.js → p-ee1183b2.js} +0 -0
@@ -1,21 +1,21 @@
1
- import { Component, Host, h } from '@stencil/core';
2
- export class PtcNav {
3
- render() {
4
- return (h(Host, null,
5
- h("nav", { class: "nav-style" },
6
- h("div", { class: "primary-nav", part: "primary-nav-part" },
7
- h("slot", { name: "primary-nav-content" })),
8
- h("div", { class: "secondary-nav", part: "secondary-nav-part" },
9
- h("slot", { name: "secondary-nav-content" })),
10
- h("div", { class: "language-nav", part: "language-nav-part" },
11
- h("slot", { name: "language-nav-content" })))));
12
- }
13
- static get is() { return "ptc-nav"; }
14
- static get encapsulation() { return "shadow"; }
15
- static get originalStyleUrls() { return {
16
- "$": ["ptc-nav.scss"]
17
- }; }
18
- static get styleUrls() { return {
19
- "$": ["ptc-nav.css"]
20
- }; }
21
- }
1
+ import { Component, Host, h } from '@stencil/core';
2
+ export class PtcNav {
3
+ render() {
4
+ return (h(Host, null,
5
+ h("nav", { class: "nav-style" },
6
+ h("div", { class: "primary-nav", part: "primary-nav-part" },
7
+ h("slot", { name: "primary-nav-content" })),
8
+ h("div", { class: "secondary-nav", part: "secondary-nav-part" },
9
+ h("slot", { name: "secondary-nav-content" })),
10
+ h("div", { class: "language-nav", part: "language-nav-part" },
11
+ h("slot", { name: "language-nav-content" })))));
12
+ }
13
+ static get is() { return "ptc-nav"; }
14
+ static get encapsulation() { return "shadow"; }
15
+ static get originalStyleUrls() { return {
16
+ "$": ["ptc-nav.scss"]
17
+ }; }
18
+ static get styleUrls() { return {
19
+ "$": ["ptc-nav.css"]
20
+ }; }
21
+ }
@@ -1,252 +1,252 @@
1
- import { Component, Host, h, Element, Prop, Listen, Watch, Event } from '@stencil/core';
2
- export class PtcNavItem {
3
- constructor() {
4
- /**
5
- * Link URL
6
- */
7
- this.url = undefined;
8
- /**
9
- * Nav Description
10
- */
11
- this.label = '';
12
- /**
13
- * If the current nav item is expanded
14
- */
15
- this.ariaExpanded = false;
16
- /**
17
- * Depth of the current nav item
18
- */
19
- this.depth = 0;
20
- /**
21
- * If the current nav item has children nav items
22
- */
23
- this.hasChildren = false;
24
- /**
25
- * If the parent nav item of the current one is expanded
26
- */
27
- this.parentExpanded = false;
28
- /**
29
- * Nav Item Type
30
- */
31
- this.navType = undefined;
32
- }
33
- /**
34
- * Watch
35
- */
36
- expandedHandler(newValue) {
37
- const children = Array.prototype.slice.call(this.el.children);
38
- children.forEach(child => {
39
- child.parentExpanded = newValue;
40
- });
41
- this.menuItemToggled.emit({ expanded: this.ariaExpanded });
42
- }
43
- /**
44
- * Event Listener
45
- */
46
- handleClick(e) {
47
- if (this.hasChildren) {
48
- e.preventDefault();
49
- this.ariaExpanded = !this.ariaExpanded;
50
- }
51
- }
52
- handleResize(ev) {
53
- console.log('the body was scrolled', ev);
54
- }
55
- /**
56
- * Lifecycle method
57
- */
58
- componentWillRender() {
59
- this.hasChildren = !!this.el.hasChildNodes();
60
- let parentMenu = this.el.closest('ptc-nav-item');
61
- let nextParentMenu;
62
- this.depth = 0;
63
- while (parentMenu) {
64
- nextParentMenu = parentMenu.parentElement.closest('ptc-nav-item');
65
- if (nextParentMenu === parentMenu) {
66
- break;
67
- }
68
- else {
69
- parentMenu = nextParentMenu;
70
- this.depth = this.depth + 1;
71
- }
72
- }
73
- }
74
- render() {
75
- //const leftIndent = this.depth > 1 ? 25 * this.depth + 'px' : '25px';
76
- return (h(Host, { role: "none" },
77
- h("a", { role: "menuitem", href: this.url, tabIndex: this.parentExpanded || this.depth === 1 ? 0 : -1, "aria-depth": this.depth, "aria-haspopup": this.hasChildren.toString(), "aria-expanded": this.hasChildren ? this.ariaExpanded.toString() : this.ariaExpanded, onClick: e => this.handleClick(e), class: this.navType },
78
- h("span", null, this.label)),
79
- this.hasChildren && (h("div", { class: "ptc-nav-children", role: "menu", part: this.navType, "aria-label": this.label },
80
- h("slot", null)))));
81
- }
82
- static get is() { return "ptc-nav-item"; }
83
- static get encapsulation() { return "shadow"; }
84
- static get originalStyleUrls() { return {
85
- "$": ["ptc-nav-item.scss"]
86
- }; }
87
- static get styleUrls() { return {
88
- "$": ["ptc-nav-item.css"]
89
- }; }
90
- static get properties() { return {
91
- "url": {
92
- "type": "string",
93
- "mutable": true,
94
- "complexType": {
95
- "original": "string",
96
- "resolved": "string",
97
- "references": {}
98
- },
99
- "required": false,
100
- "optional": false,
101
- "docs": {
102
- "tags": [],
103
- "text": "Link URL"
104
- },
105
- "attribute": "url",
106
- "reflect": false,
107
- "defaultValue": "undefined"
108
- },
109
- "label": {
110
- "type": "string",
111
- "mutable": true,
112
- "complexType": {
113
- "original": "string",
114
- "resolved": "string",
115
- "references": {}
116
- },
117
- "required": false,
118
- "optional": false,
119
- "docs": {
120
- "tags": [],
121
- "text": "Nav Description"
122
- },
123
- "attribute": "label",
124
- "reflect": false,
125
- "defaultValue": "''"
126
- },
127
- "ariaExpanded": {
128
- "type": "boolean",
129
- "mutable": true,
130
- "complexType": {
131
- "original": "boolean",
132
- "resolved": "boolean",
133
- "references": {}
134
- },
135
- "required": false,
136
- "optional": false,
137
- "docs": {
138
- "tags": [],
139
- "text": "If the current nav item is expanded"
140
- },
141
- "attribute": "aria-expanded",
142
- "reflect": false,
143
- "defaultValue": "false"
144
- },
145
- "depth": {
146
- "type": "number",
147
- "mutable": true,
148
- "complexType": {
149
- "original": "number",
150
- "resolved": "number",
151
- "references": {}
152
- },
153
- "required": false,
154
- "optional": false,
155
- "docs": {
156
- "tags": [],
157
- "text": "Depth of the current nav item"
158
- },
159
- "attribute": "depth",
160
- "reflect": true,
161
- "defaultValue": "0"
162
- },
163
- "hasChildren": {
164
- "type": "boolean",
165
- "mutable": true,
166
- "complexType": {
167
- "original": "boolean",
168
- "resolved": "boolean",
169
- "references": {}
170
- },
171
- "required": false,
172
- "optional": false,
173
- "docs": {
174
- "tags": [],
175
- "text": "If the current nav item has children nav items"
176
- },
177
- "attribute": "has-children",
178
- "reflect": false,
179
- "defaultValue": "false"
180
- },
181
- "parentExpanded": {
182
- "type": "boolean",
183
- "mutable": true,
184
- "complexType": {
185
- "original": "boolean",
186
- "resolved": "boolean",
187
- "references": {}
188
- },
189
- "required": false,
190
- "optional": false,
191
- "docs": {
192
- "tags": [],
193
- "text": "If the parent nav item of the current one is expanded"
194
- },
195
- "attribute": "parent-expanded",
196
- "reflect": true,
197
- "defaultValue": "false"
198
- },
199
- "navType": {
200
- "type": "string",
201
- "mutable": false,
202
- "complexType": {
203
- "original": "'primary-nav' | 'secondary-nav' | 'primary-footer' | 'secondary-footer' | 'language-nav'",
204
- "resolved": "\"language-nav\" | \"primary-footer\" | \"primary-nav\" | \"secondary-footer\" | \"secondary-nav\"",
205
- "references": {}
206
- },
207
- "required": false,
208
- "optional": false,
209
- "docs": {
210
- "tags": [],
211
- "text": "Nav Item Type"
212
- },
213
- "attribute": "nav-type",
214
- "reflect": false,
215
- "defaultValue": "undefined"
216
- }
217
- }; }
218
- static get events() { return [{
219
- "method": "menuItemToggled",
220
- "name": "menuItemToggled",
221
- "bubbles": true,
222
- "cancelable": true,
223
- "composed": true,
224
- "docs": {
225
- "tags": [],
226
- "text": "Menu Toggle Event"
227
- },
228
- "complexType": {
229
- "original": "any",
230
- "resolved": "any",
231
- "references": {}
232
- }
233
- }]; }
234
- static get elementRef() { return "el"; }
235
- static get watchers() { return [{
236
- "propName": "ariaExpanded",
237
- "methodName": "expandedHandler"
238
- }]; }
239
- static get listeners() { return [{
240
- "name": "handleClick",
241
- "method": "handleClick",
242
- "target": undefined,
243
- "capture": false,
244
- "passive": false
245
- }, {
246
- "name": "resize",
247
- "method": "handleResize",
248
- "target": "window",
249
- "capture": false,
250
- "passive": true
251
- }]; }
252
- }
1
+ import { Component, Host, h, Element, Prop, Listen, Watch, Event } from '@stencil/core';
2
+ export class PtcNavItem {
3
+ constructor() {
4
+ /**
5
+ * Link URL
6
+ */
7
+ this.url = undefined;
8
+ /**
9
+ * Nav Description
10
+ */
11
+ this.label = '';
12
+ /**
13
+ * If the current nav item is expanded
14
+ */
15
+ this.ariaExpanded = false;
16
+ /**
17
+ * Depth of the current nav item
18
+ */
19
+ this.depth = 0;
20
+ /**
21
+ * If the current nav item has children nav items
22
+ */
23
+ this.hasChildren = false;
24
+ /**
25
+ * If the parent nav item of the current one is expanded
26
+ */
27
+ this.parentExpanded = false;
28
+ /**
29
+ * Nav Item Type
30
+ */
31
+ this.navType = undefined;
32
+ }
33
+ /**
34
+ * Watch
35
+ */
36
+ expandedHandler(newValue) {
37
+ const children = Array.prototype.slice.call(this.el.children);
38
+ children.forEach(child => {
39
+ child.parentExpanded = newValue;
40
+ });
41
+ this.menuItemToggled.emit({ expanded: this.ariaExpanded });
42
+ }
43
+ /**
44
+ * Event Listener
45
+ */
46
+ handleClick(e) {
47
+ if (this.hasChildren) {
48
+ e.preventDefault();
49
+ this.ariaExpanded = !this.ariaExpanded;
50
+ }
51
+ }
52
+ handleResize(ev) {
53
+ console.log('the body was scrolled', ev);
54
+ }
55
+ /**
56
+ * Lifecycle method
57
+ */
58
+ componentWillRender() {
59
+ this.hasChildren = !!this.el.hasChildNodes();
60
+ let parentMenu = this.el.closest('ptc-nav-item');
61
+ let nextParentMenu;
62
+ this.depth = 0;
63
+ while (parentMenu) {
64
+ nextParentMenu = parentMenu.parentElement.closest('ptc-nav-item');
65
+ if (nextParentMenu === parentMenu) {
66
+ break;
67
+ }
68
+ else {
69
+ parentMenu = nextParentMenu;
70
+ this.depth = this.depth + 1;
71
+ }
72
+ }
73
+ }
74
+ render() {
75
+ //const leftIndent = this.depth > 1 ? 25 * this.depth + 'px' : '25px';
76
+ return (h(Host, { role: "none" },
77
+ h("a", { role: "menuitem", href: this.url, tabIndex: this.parentExpanded || this.depth === 1 ? 0 : -1, "aria-depth": this.depth, "aria-haspopup": this.hasChildren.toString(), "aria-expanded": this.hasChildren ? this.ariaExpanded.toString() : this.ariaExpanded, onClick: e => this.handleClick(e), class: this.navType },
78
+ h("span", null, this.label)),
79
+ this.hasChildren && (h("div", { class: "ptc-nav-children", role: "menu", part: this.navType, "aria-label": this.label },
80
+ h("slot", null)))));
81
+ }
82
+ static get is() { return "ptc-nav-item"; }
83
+ static get encapsulation() { return "shadow"; }
84
+ static get originalStyleUrls() { return {
85
+ "$": ["ptc-nav-item.scss"]
86
+ }; }
87
+ static get styleUrls() { return {
88
+ "$": ["ptc-nav-item.css"]
89
+ }; }
90
+ static get properties() { return {
91
+ "url": {
92
+ "type": "string",
93
+ "mutable": true,
94
+ "complexType": {
95
+ "original": "string",
96
+ "resolved": "string",
97
+ "references": {}
98
+ },
99
+ "required": false,
100
+ "optional": false,
101
+ "docs": {
102
+ "tags": [],
103
+ "text": "Link URL"
104
+ },
105
+ "attribute": "url",
106
+ "reflect": false,
107
+ "defaultValue": "undefined"
108
+ },
109
+ "label": {
110
+ "type": "string",
111
+ "mutable": true,
112
+ "complexType": {
113
+ "original": "string",
114
+ "resolved": "string",
115
+ "references": {}
116
+ },
117
+ "required": false,
118
+ "optional": false,
119
+ "docs": {
120
+ "tags": [],
121
+ "text": "Nav Description"
122
+ },
123
+ "attribute": "label",
124
+ "reflect": false,
125
+ "defaultValue": "''"
126
+ },
127
+ "ariaExpanded": {
128
+ "type": "boolean",
129
+ "mutable": true,
130
+ "complexType": {
131
+ "original": "boolean",
132
+ "resolved": "boolean",
133
+ "references": {}
134
+ },
135
+ "required": false,
136
+ "optional": false,
137
+ "docs": {
138
+ "tags": [],
139
+ "text": "If the current nav item is expanded"
140
+ },
141
+ "attribute": "aria-expanded",
142
+ "reflect": false,
143
+ "defaultValue": "false"
144
+ },
145
+ "depth": {
146
+ "type": "number",
147
+ "mutable": true,
148
+ "complexType": {
149
+ "original": "number",
150
+ "resolved": "number",
151
+ "references": {}
152
+ },
153
+ "required": false,
154
+ "optional": false,
155
+ "docs": {
156
+ "tags": [],
157
+ "text": "Depth of the current nav item"
158
+ },
159
+ "attribute": "depth",
160
+ "reflect": true,
161
+ "defaultValue": "0"
162
+ },
163
+ "hasChildren": {
164
+ "type": "boolean",
165
+ "mutable": true,
166
+ "complexType": {
167
+ "original": "boolean",
168
+ "resolved": "boolean",
169
+ "references": {}
170
+ },
171
+ "required": false,
172
+ "optional": false,
173
+ "docs": {
174
+ "tags": [],
175
+ "text": "If the current nav item has children nav items"
176
+ },
177
+ "attribute": "has-children",
178
+ "reflect": false,
179
+ "defaultValue": "false"
180
+ },
181
+ "parentExpanded": {
182
+ "type": "boolean",
183
+ "mutable": true,
184
+ "complexType": {
185
+ "original": "boolean",
186
+ "resolved": "boolean",
187
+ "references": {}
188
+ },
189
+ "required": false,
190
+ "optional": false,
191
+ "docs": {
192
+ "tags": [],
193
+ "text": "If the parent nav item of the current one is expanded"
194
+ },
195
+ "attribute": "parent-expanded",
196
+ "reflect": true,
197
+ "defaultValue": "false"
198
+ },
199
+ "navType": {
200
+ "type": "string",
201
+ "mutable": false,
202
+ "complexType": {
203
+ "original": "'primary-nav' | 'secondary-nav' | 'primary-footer' | 'secondary-footer' | 'language-nav'",
204
+ "resolved": "\"language-nav\" | \"primary-footer\" | \"primary-nav\" | \"secondary-footer\" | \"secondary-nav\"",
205
+ "references": {}
206
+ },
207
+ "required": false,
208
+ "optional": false,
209
+ "docs": {
210
+ "tags": [],
211
+ "text": "Nav Item Type"
212
+ },
213
+ "attribute": "nav-type",
214
+ "reflect": false,
215
+ "defaultValue": "undefined"
216
+ }
217
+ }; }
218
+ static get events() { return [{
219
+ "method": "menuItemToggled",
220
+ "name": "menuItemToggled",
221
+ "bubbles": true,
222
+ "cancelable": true,
223
+ "composed": true,
224
+ "docs": {
225
+ "tags": [],
226
+ "text": "Menu Toggle Event"
227
+ },
228
+ "complexType": {
229
+ "original": "any",
230
+ "resolved": "any",
231
+ "references": {}
232
+ }
233
+ }]; }
234
+ static get elementRef() { return "el"; }
235
+ static get watchers() { return [{
236
+ "propName": "ariaExpanded",
237
+ "methodName": "expandedHandler"
238
+ }]; }
239
+ static get listeners() { return [{
240
+ "name": "handleClick",
241
+ "method": "handleClick",
242
+ "target": undefined,
243
+ "capture": false,
244
+ "passive": false
245
+ }, {
246
+ "name": "resize",
247
+ "method": "handleResize",
248
+ "target": "window",
249
+ "capture": false,
250
+ "passive": true
251
+ }]; }
252
+ }