@ptcwebops/ptcw-design 2.4.4 → 2.4.5

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.
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-1662de74.js');
6
6
 
7
- const ptcNavLinkCss = ":host{display:block;padding:12px;position:relative}@media only screen and (min-width: 1200px){:host{display:inline-block}}:host::before,:host::after{content:\" \";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host a{color:var(--color-gray-03);text-decoration:none;display:inline-block;border-bottom:2px solid transparent;margin-left:34%;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}@media only screen and (min-width: 480px){:host a{margin-left:38%}}@media only screen and (min-width: 768px){:host a{margin-left:42%}}@media only screen and (min-width: 1200px){:host a{margin-left:0;border-bottom:2px solid transparent;display:flex;align-items:center;white-space:nowrap}}:host a svg{width:1rem;height:0.875rem;display:inline-block;background-size:cover;transition:margin-left 250ms ease-out;vertical-align:middle;margin-left:4px}:host a:hover,:host a:focus{color:var(--color-white);border-color:var(--color-white)}:host a:hover svg path,:host a:focus svg path{fill:var(--color-white)}:host ::slotted(icon-asset){margin-top:4px;margin-right:8px}";
7
+ const ptcNavLinkCss = ":host{display:block;position:relative}@media only screen and (min-width: 1200px){:host{display:inline-block}}:host::before,:host::after{content:\" \";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host a{color:var(--color-gray-03);text-decoration:none;display:inline-block;border-bottom:2px solid transparent;margin-left:34%;padding:22px 12px;font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}@media only screen and (min-width: 480px){:host a{margin-left:38%}}@media only screen and (min-width: 768px){:host a{margin-left:42%}}@media only screen and (min-width: 1200px){:host a{margin-left:0;display:flex;align-items:center;white-space:nowrap;position:relative}:host a::after{content:\"\";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:20px}}:host a svg{width:1rem;height:0.875rem;display:inline-block;background-size:cover;transition:margin-left 250ms ease-out;vertical-align:middle;margin-left:4px}:host a:hover,:host a:focus{color:var(--color-white)}@media only screen and (min-width: 1200px){:host a:hover::after,:host a:focus::after{border-color:var(--color-white)}}:host a:hover svg path,:host a:focus svg path{fill:var(--color-white)}:host ::slotted(icon-asset){margin-top:4px;margin-right:8px}";
8
8
 
9
9
  const PtcNavLink = class {
10
10
  constructor(hostRef) {
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-1662de74.js');
6
6
 
7
- const ptcNavSubmenuCss = ":host{display:block;padding:var(--ptc-element-spacing-03);position:relative}:host .back-btn{display:none;position:absolute;left:30px;color:var(--color-white);font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .back-btn svg{margin-right:4px;vertical-align:middle}@media only screen and (min-width: 1200px){:host{display:inline-block;position:initial}}:host::before,:host::after{content:\" \";width:800px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host .submenu-toggle{display:inline-block;cursor:pointer;color:var(--color-gray-03);font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold);white-space:nowrap;border-bottom:2px solid transparent;margin-left:34%}@media only screen and (min-width: 480px){:host .submenu-toggle{margin-left:38%}}@media only screen and (min-width: 768px){:host .submenu-toggle{margin-left:42%}}@media only screen and (min-width: 1200px){:host .submenu-toggle{margin-left:0;display:flex;align-items:center}}:host .submenu-toggle svg{margin-left:5px;margin-top:2px;vertical-align:middle}:host .submenu-toggle svg path{fill:var(--color-gray-04)}:host .submenu-toggle:hover{color:var(--color-white);border-color:var(--color-white)}:host .submenu-toggle:hover svg path{fill:var(--color-white)}:host .submenu-toggle icon-asset{margin-right:8px}:host .submenu-toggle icon-asset svg{margin:0}:host .submenu-container{background-color:var(--color-gray-12)}@media only screen and (min-width: 1200px){:host .submenu-container{position:absolute;width:100%;right:0;left:0;top:64px}}:host .submenu-container .submenu-container-lg{padding:0 32px;width:100%;margin:auto}@media only screen and (min-width: 992px){:host .submenu-container .submenu-container-lg{padding:0 32px}}@media only screen and (min-width: 1200px){:host .submenu-container .submenu-container-lg{padding:0;width:1106px}}@media only screen and (min-width: 1256px){:host .submenu-container .submenu-container-lg{width:1164px}}@media only screen and (min-width: 1280px){:host .submenu-container .submenu-container-lg{width:1180px}}@media only screen and (min-width: 1300px){:host .submenu-container .submenu-container-lg{width:1200px}}@media only screen and (min-width: 1440px){:host .submenu-container .submenu-container-lg{width:83.5rem}}@media only screen and (min-width: 1600px){:host .submenu-container .submenu-container-lg{width:93.5rem}}@media only screen and (min-width: 1980px){:host .submenu-container .submenu-container-lg{width:113.5rem}}:host ::slotted(ptc-nav-link:last-child)::before,:host ::slotted(ptc-nav-link:last-child)::after{display:none}:host(.short-dropdown) .submenu-container{text-align:center}@media only screen and (min-width: 1200px){:host(.short-dropdown) .submenu-container{width:initial;right:3%;left:initial;top:56px;z-index:1000}}:host(.short-dropdown) .submenu-container .submenu-container-lg{padding:0;width:auto;min-width:348px;display:flex;justify-content:space-evenly}:host(.active){padding-bottom:0}:host(.active) .submenu-toggle{color:var(--color-white);border-color:var(--color-white)}:host(.active) .submenu-toggle svg path{fill:var(--color-white)}:host(.active)::before,:host(.active)::after{display:none}@media only screen and (min-width: 1200px){:host(.active){padding-bottom:var(--ptc-element-spacing-03)}}:host(.active.short-dropdown) .back-btn{display:inline-block}@media only screen and (min-width: 1200px){:host(.active.short-dropdown) .back-btn{display:none}}.custom-icon{object-fit:cover;width:1.5rem;height:1.5rem}.custom-icon:hover{filter:brightness(0) invert(1)}.menu-right *{color:transparent !important}";
7
+ const ptcNavSubmenuCss = ":host{display:block;position:relative;cursor:pointer}:host .back-btn{display:none;position:absolute;left:30px;top:22px;color:var(--color-white);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .back-btn svg{margin-right:4px;vertical-align:middle;width:12px;height:12px}@media only screen and (min-width: 1200px){:host{display:inline-block;position:initial}}:host::before,:host::after{content:\" \";width:800px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host .submenu-toggle{display:inline-block;color:var(--color-gray-03);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold);white-space:nowrap;padding:22px var(--ptc-element-spacing-03);margin-left:34%;position:relative}:host .submenu-toggle::after{content:\"\";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:20px}@media only screen and (min-width: 480px){:host .submenu-toggle{margin-left:38%}}@media only screen and (min-width: 768px){:host .submenu-toggle{margin-left:42%}}@media only screen and (min-width: 1200px){:host .submenu-toggle{margin-left:0;display:flex;align-items:center}}:host .submenu-toggle svg{margin-left:5px;margin-top:2px;vertical-align:middle;width:12px;height:12px}:host .submenu-toggle svg path{fill:var(--color-gray-04)}:host .submenu-toggle:hover{color:var(--color-white)}:host .submenu-toggle:hover::after{border-color:var(--color-white)}:host .submenu-toggle:hover svg path{fill:var(--color-white)}:host .submenu-toggle icon-asset{margin-right:8px}:host .submenu-toggle icon-asset svg{margin:0}:host .submenu-container{background-color:var(--color-gray-12)}@media only screen and (min-width: 1200px){:host .submenu-container{position:absolute;width:100%;right:0;left:0;top:67px}}:host .submenu-container .submenu-container-lg{max-width:1200px;margin:auto}@media only screen and (min-width: 1200px){:host .submenu-container .submenu-container-lg{padding:0 32px}}:host ::slotted(ptc-nav-link:last-child)::before,:host ::slotted(ptc-nav-link:last-child)::after{display:none}:host(.short-dropdown) .submenu-container{text-align:center}@media only screen and (min-width: 1200px){:host(.short-dropdown) .submenu-container{width:initial;right:3%;left:initial;top:56px;z-index:1000}}:host(.short-dropdown) .submenu-container .submenu-container-lg{padding:0;width:auto;min-width:348px;display:flex;justify-content:space-evenly}:host(.active){padding-bottom:0}:host(.active) .submenu-toggle{color:var(--color-white);border-color:var(--color-white)}:host(.active) .submenu-toggle svg path{fill:var(--color-white)}:host(.active)::before,:host(.active)::after{display:none}:host(.active.short-dropdown) .back-btn{display:inline-block}@media only screen and (min-width: 1200px){:host(.active.short-dropdown) .back-btn{display:none}}.custom-icon{object-fit:cover;width:1.5rem;height:1.5rem}.custom-icon:hover{filter:brightness(0) invert(1)}.menu-right *{color:transparent !important}";
8
8
 
9
9
  const PtcNavSubmenu = class {
10
10
  constructor(hostRef) {
@@ -19,7 +19,7 @@ const PtcNavSubmenu = class {
19
19
  var container = this.el.closest('ptc-subnav');
20
20
  if (dropdown && container) {
21
21
  if (window.innerWidth >= 1200) {
22
- let height = container.clientHeight - 10;
22
+ let height = container.clientHeight;
23
23
  if (height > 0) {
24
24
  dropdown.style.top = `${height}px`;
25
25
  }
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-1662de74.js');
6
6
 
7
- const ptcSubnavCss = ":host{display:block;width:100%;background-color:var(--color-gray-10);position:relative}:host .navbar .navbar-inner{width:100%;margin:auto;padding:0px;display:none}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{width:1170px}}@media only screen and (min-width: 1256px){:host .navbar .navbar-inner{width:1256px}}@media only screen and (min-width: 1440px){:host .navbar .navbar-inner{width:87.5rem}}@media only screen and (min-width: 1600px){:host .navbar .navbar-inner{width:97.5rem}}@media only screen and (min-width: 1980px){:host .navbar .navbar-inner{width:117.5rem}}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{padding:10px 16px;height:auto;display:block}}:host .navbar .navbar-inner .nav-wrapper{width:auto;margin:auto 32px;min-width:163px}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner .nav-wrapper{width:auto;display:flex;justify-content:space-between}}:host .navbar.navOpen .navbar-inner{background-color:var(--color-gray-12);display:block}:host .navbar .navbar-toggle{display:block;width:100%;text-align:center;color:var(--color-white);background-color:var(--color-gray-10);border:none;padding:16px;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .navbar .navbar-toggle svg{vertical-align:middle;margin-left:4px}@media only screen and (min-width: 1200px){:host .navbar .navbar-toggle{display:none}}";
7
+ const ptcSubnavCss = ":host{display:block;width:100%;background-color:var(--color-gray-10);position:relative}:host .navbar{overflow-x:hidden}@media only screen and (min-width: 1200px){:host .navbar{overflow-x:visible}}:host .navbar .navbar-inner{max-width:1200px;margin:auto;box-sizing:border-box;padding:0px;display:none}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{padding:0px;height:auto;display:block}}:host .navbar .navbar-inner .nav-wrapper{width:auto;margin:auto 0;min-width:163px}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner .nav-wrapper{width:auto;display:flex;justify-content:space-between}}:host .navbar.navOpen .navbar-inner{background-color:var(--color-gray-12);display:block}:host .navbar .navbar-toggle{display:block;width:100%;text-align:center;color:var(--color-white);background-color:var(--color-gray-10);border:none;padding:16px;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .navbar .navbar-toggle svg{vertical-align:middle;margin-left:4px}@media only screen and (min-width: 1200px){:host .navbar .navbar-toggle{display:none}}";
8
8
 
9
9
  const PtcSubnav = class {
10
10
  constructor(hostRef) {
@@ -1,6 +1,5 @@
1
1
  :host {
2
2
  display: block;
3
- padding: 12px;
4
3
  position: relative;
5
4
  }
6
5
  @media only screen and (min-width: 1200px) {
@@ -32,7 +31,8 @@
32
31
  display: inline-block;
33
32
  border-bottom: 2px solid transparent;
34
33
  margin-left: 34%;
35
- font-size: 15px;
34
+ padding: 22px 12px;
35
+ font-size: var(--ptc-font-size-xx-small);
36
36
  line-height: var(--ptc-line-height-denser);
37
37
  font-weight: var(--ptc-font-weight-bold);
38
38
  }
@@ -49,10 +49,21 @@
49
49
  @media only screen and (min-width: 1200px) {
50
50
  :host a {
51
51
  margin-left: 0;
52
- border-bottom: 2px solid transparent;
53
52
  display: flex;
54
53
  align-items: center;
55
54
  white-space: nowrap;
55
+ position: relative;
56
+ }
57
+ :host a::after {
58
+ content: "";
59
+ display: block;
60
+ border-bottom: 2px solid transparent;
61
+ margin: auto;
62
+ position: absolute;
63
+ width: calc(100% - 20px);
64
+ left: 0;
65
+ right: 0;
66
+ bottom: 20px;
56
67
  }
57
68
  }
58
69
  :host a svg {
@@ -67,7 +78,12 @@
67
78
  :host a:hover,
68
79
  :host a:focus {
69
80
  color: var(--color-white);
70
- border-color: var(--color-white);
81
+ }
82
+ @media only screen and (min-width: 1200px) {
83
+ :host a:hover::after,
84
+ :host a:focus::after {
85
+ border-color: var(--color-white);
86
+ }
71
87
  }
72
88
  :host a:hover svg path,
73
89
  :host a:focus svg path {
@@ -1,20 +1,23 @@
1
1
  :host {
2
2
  display: block;
3
- padding: var(--ptc-element-spacing-03);
4
3
  position: relative;
4
+ cursor: pointer;
5
5
  }
6
6
  :host .back-btn {
7
7
  display: none;
8
8
  position: absolute;
9
9
  left: 30px;
10
+ top: 22px;
10
11
  color: var(--color-white);
11
- font-size: 15px;
12
+ font-size: var(--ptc-font-size-xx-small);
12
13
  line-height: var(--ptc-line-height-denser);
13
14
  font-weight: var(--ptc-font-weight-bold);
14
15
  }
15
16
  :host .back-btn svg {
16
17
  margin-right: 4px;
17
18
  vertical-align: middle;
19
+ width: 12px;
20
+ height: 12px;
18
21
  }
19
22
  @media only screen and (min-width: 1200px) {
20
23
  :host {
@@ -42,14 +45,25 @@
42
45
  }
43
46
  :host .submenu-toggle {
44
47
  display: inline-block;
45
- cursor: pointer;
46
48
  color: var(--color-gray-03);
47
- font-size: 15px;
49
+ font-size: var(--ptc-font-size-xx-small);
48
50
  line-height: var(--ptc-line-height-denser);
49
51
  font-weight: var(--ptc-font-weight-bold);
50
52
  white-space: nowrap;
51
- border-bottom: 2px solid transparent;
53
+ padding: 22px var(--ptc-element-spacing-03);
52
54
  margin-left: 34%;
55
+ position: relative;
56
+ }
57
+ :host .submenu-toggle::after {
58
+ content: "";
59
+ display: block;
60
+ border-bottom: 2px solid transparent;
61
+ margin: auto;
62
+ position: absolute;
63
+ width: calc(100% - 20px);
64
+ left: 0;
65
+ right: 0;
66
+ bottom: 20px;
53
67
  }
54
68
  @media only screen and (min-width: 480px) {
55
69
  :host .submenu-toggle {
@@ -72,12 +86,16 @@
72
86
  margin-left: 5px;
73
87
  margin-top: 2px;
74
88
  vertical-align: middle;
89
+ width: 12px;
90
+ height: 12px;
75
91
  }
76
92
  :host .submenu-toggle svg path {
77
93
  fill: var(--color-gray-04);
78
94
  }
79
95
  :host .submenu-toggle:hover {
80
96
  color: var(--color-white);
97
+ }
98
+ :host .submenu-toggle:hover::after {
81
99
  border-color: var(--color-white);
82
100
  }
83
101
  :host .submenu-toggle:hover svg path {
@@ -98,53 +116,16 @@
98
116
  width: 100%;
99
117
  right: 0;
100
118
  left: 0;
101
- top: 64px;
119
+ top: 67px;
102
120
  }
103
121
  }
104
122
  :host .submenu-container .submenu-container-lg {
105
- padding: 0 32px;
106
- width: 100%;
123
+ max-width: 1200px;
107
124
  margin: auto;
108
125
  }
109
- @media only screen and (min-width: 992px) {
110
- :host .submenu-container .submenu-container-lg {
111
- padding: 0 32px;
112
- }
113
- }
114
126
  @media only screen and (min-width: 1200px) {
115
127
  :host .submenu-container .submenu-container-lg {
116
- padding: 0;
117
- width: 1106px;
118
- }
119
- }
120
- @media only screen and (min-width: 1256px) {
121
- :host .submenu-container .submenu-container-lg {
122
- width: 1164px;
123
- }
124
- }
125
- @media only screen and (min-width: 1280px) {
126
- :host .submenu-container .submenu-container-lg {
127
- width: 1180px;
128
- }
129
- }
130
- @media only screen and (min-width: 1300px) {
131
- :host .submenu-container .submenu-container-lg {
132
- width: 1200px;
133
- }
134
- }
135
- @media only screen and (min-width: 1440px) {
136
- :host .submenu-container .submenu-container-lg {
137
- width: 83.5rem;
138
- }
139
- }
140
- @media only screen and (min-width: 1600px) {
141
- :host .submenu-container .submenu-container-lg {
142
- width: 93.5rem;
143
- }
144
- }
145
- @media only screen and (min-width: 1980px) {
146
- :host .submenu-container .submenu-container-lg {
147
- width: 113.5rem;
128
+ padding: 0 32px;
148
129
  }
149
130
  }
150
131
  :host ::slotted(ptc-nav-link:last-child)::before, :host ::slotted(ptc-nav-link:last-child)::after {
@@ -184,11 +165,6 @@
184
165
  :host(.active)::before, :host(.active)::after {
185
166
  display: none;
186
167
  }
187
- @media only screen and (min-width: 1200px) {
188
- :host(.active) {
189
- padding-bottom: var(--ptc-element-spacing-03);
190
- }
191
- }
192
168
 
193
169
  :host(.active.short-dropdown) .back-btn {
194
170
  display: inline-block;
@@ -10,7 +10,7 @@ export class PtcNavSubmenu {
10
10
  var container = this.el.closest('ptc-subnav');
11
11
  if (dropdown && container) {
12
12
  if (window.innerWidth >= 1200) {
13
- let height = container.clientHeight - 10;
13
+ let height = container.clientHeight;
14
14
  if (height > 0) {
15
15
  dropdown.style.top = `${height}px`;
16
16
  }
@@ -4,47 +4,31 @@
4
4
  background-color: var(--color-gray-10);
5
5
  position: relative;
6
6
  }
7
- :host .navbar .navbar-inner {
8
- width: 100%;
9
- margin: auto;
10
- padding: 0px;
11
- display: none;
7
+ :host .navbar {
8
+ overflow-x: hidden;
12
9
  }
13
10
  @media only screen and (min-width: 1200px) {
14
- :host .navbar .navbar-inner {
15
- width: 1170px;
11
+ :host .navbar {
12
+ overflow-x: visible;
16
13
  }
17
14
  }
18
- @media only screen and (min-width: 1256px) {
19
- :host .navbar .navbar-inner {
20
- width: 1256px;
21
- }
22
- }
23
- @media only screen and (min-width: 1440px) {
24
- :host .navbar .navbar-inner {
25
- width: 87.5rem;
26
- }
27
- }
28
- @media only screen and (min-width: 1600px) {
29
- :host .navbar .navbar-inner {
30
- width: 97.5rem;
31
- }
32
- }
33
- @media only screen and (min-width: 1980px) {
34
- :host .navbar .navbar-inner {
35
- width: 117.5rem;
36
- }
15
+ :host .navbar .navbar-inner {
16
+ max-width: 1200px;
17
+ margin: auto;
18
+ box-sizing: border-box;
19
+ padding: 0px;
20
+ display: none;
37
21
  }
38
22
  @media only screen and (min-width: 1200px) {
39
23
  :host .navbar .navbar-inner {
40
- padding: 10px 16px;
24
+ padding: 0px;
41
25
  height: auto;
42
26
  display: block;
43
27
  }
44
28
  }
45
29
  :host .navbar .navbar-inner .nav-wrapper {
46
30
  width: auto;
47
- margin: auto 32px;
31
+ margin: auto 0;
48
32
  min-width: 163px;
49
33
  }
50
34
  @media only screen and (min-width: 1200px) {
@@ -9478,7 +9478,7 @@ const PtcNavCard$1 = class extends HTMLElement$1 {
9478
9478
  static get style() { return ptcNavCardCss; }
9479
9479
  };
9480
9480
 
9481
- const ptcNavLinkCss = ":host{display:block;padding:12px;position:relative}@media only screen and (min-width: 1200px){:host{display:inline-block}}:host::before,:host::after{content:\" \";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host a{color:var(--color-gray-03);text-decoration:none;display:inline-block;border-bottom:2px solid transparent;margin-left:34%;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}@media only screen and (min-width: 480px){:host a{margin-left:38%}}@media only screen and (min-width: 768px){:host a{margin-left:42%}}@media only screen and (min-width: 1200px){:host a{margin-left:0;border-bottom:2px solid transparent;display:flex;align-items:center;white-space:nowrap}}:host a svg{width:1rem;height:0.875rem;display:inline-block;background-size:cover;transition:margin-left 250ms ease-out;vertical-align:middle;margin-left:4px}:host a:hover,:host a:focus{color:var(--color-white);border-color:var(--color-white)}:host a:hover svg path,:host a:focus svg path{fill:var(--color-white)}:host ::slotted(icon-asset){margin-top:4px;margin-right:8px}";
9481
+ const ptcNavLinkCss = ":host{display:block;position:relative}@media only screen and (min-width: 1200px){:host{display:inline-block}}:host::before,:host::after{content:\" \";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host a{color:var(--color-gray-03);text-decoration:none;display:inline-block;border-bottom:2px solid transparent;margin-left:34%;padding:22px 12px;font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}@media only screen and (min-width: 480px){:host a{margin-left:38%}}@media only screen and (min-width: 768px){:host a{margin-left:42%}}@media only screen and (min-width: 1200px){:host a{margin-left:0;display:flex;align-items:center;white-space:nowrap;position:relative}:host a::after{content:\"\";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:20px}}:host a svg{width:1rem;height:0.875rem;display:inline-block;background-size:cover;transition:margin-left 250ms ease-out;vertical-align:middle;margin-left:4px}:host a:hover,:host a:focus{color:var(--color-white)}@media only screen and (min-width: 1200px){:host a:hover::after,:host a:focus::after{border-color:var(--color-white)}}:host a:hover svg path,:host a:focus svg path{fill:var(--color-white)}:host ::slotted(icon-asset){margin-top:4px;margin-right:8px}";
9482
9482
 
9483
9483
  const PtcNavLink$1 = class extends HTMLElement$1 {
9484
9484
  constructor() {
@@ -9630,7 +9630,7 @@ const PtcNavSlider$1 = class extends HTMLElement$1 {
9630
9630
  static get style() { return ptcNavSliderCss; }
9631
9631
  };
9632
9632
 
9633
- const ptcNavSubmenuCss = ":host{display:block;padding:var(--ptc-element-spacing-03);position:relative}:host .back-btn{display:none;position:absolute;left:30px;color:var(--color-white);font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .back-btn svg{margin-right:4px;vertical-align:middle}@media only screen and (min-width: 1200px){:host{display:inline-block;position:initial}}:host::before,:host::after{content:\" \";width:800px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host .submenu-toggle{display:inline-block;cursor:pointer;color:var(--color-gray-03);font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold);white-space:nowrap;border-bottom:2px solid transparent;margin-left:34%}@media only screen and (min-width: 480px){:host .submenu-toggle{margin-left:38%}}@media only screen and (min-width: 768px){:host .submenu-toggle{margin-left:42%}}@media only screen and (min-width: 1200px){:host .submenu-toggle{margin-left:0;display:flex;align-items:center}}:host .submenu-toggle svg{margin-left:5px;margin-top:2px;vertical-align:middle}:host .submenu-toggle svg path{fill:var(--color-gray-04)}:host .submenu-toggle:hover{color:var(--color-white);border-color:var(--color-white)}:host .submenu-toggle:hover svg path{fill:var(--color-white)}:host .submenu-toggle icon-asset{margin-right:8px}:host .submenu-toggle icon-asset svg{margin:0}:host .submenu-container{background-color:var(--color-gray-12)}@media only screen and (min-width: 1200px){:host .submenu-container{position:absolute;width:100%;right:0;left:0;top:64px}}:host .submenu-container .submenu-container-lg{padding:0 32px;width:100%;margin:auto}@media only screen and (min-width: 992px){:host .submenu-container .submenu-container-lg{padding:0 32px}}@media only screen and (min-width: 1200px){:host .submenu-container .submenu-container-lg{padding:0;width:1106px}}@media only screen and (min-width: 1256px){:host .submenu-container .submenu-container-lg{width:1164px}}@media only screen and (min-width: 1280px){:host .submenu-container .submenu-container-lg{width:1180px}}@media only screen and (min-width: 1300px){:host .submenu-container .submenu-container-lg{width:1200px}}@media only screen and (min-width: 1440px){:host .submenu-container .submenu-container-lg{width:83.5rem}}@media only screen and (min-width: 1600px){:host .submenu-container .submenu-container-lg{width:93.5rem}}@media only screen and (min-width: 1980px){:host .submenu-container .submenu-container-lg{width:113.5rem}}:host ::slotted(ptc-nav-link:last-child)::before,:host ::slotted(ptc-nav-link:last-child)::after{display:none}:host(.short-dropdown) .submenu-container{text-align:center}@media only screen and (min-width: 1200px){:host(.short-dropdown) .submenu-container{width:initial;right:3%;left:initial;top:56px;z-index:1000}}:host(.short-dropdown) .submenu-container .submenu-container-lg{padding:0;width:auto;min-width:348px;display:flex;justify-content:space-evenly}:host(.active){padding-bottom:0}:host(.active) .submenu-toggle{color:var(--color-white);border-color:var(--color-white)}:host(.active) .submenu-toggle svg path{fill:var(--color-white)}:host(.active)::before,:host(.active)::after{display:none}@media only screen and (min-width: 1200px){:host(.active){padding-bottom:var(--ptc-element-spacing-03)}}:host(.active.short-dropdown) .back-btn{display:inline-block}@media only screen and (min-width: 1200px){:host(.active.short-dropdown) .back-btn{display:none}}.custom-icon{object-fit:cover;width:1.5rem;height:1.5rem}.custom-icon:hover{filter:brightness(0) invert(1)}.menu-right *{color:transparent !important}";
9633
+ const ptcNavSubmenuCss = ":host{display:block;position:relative;cursor:pointer}:host .back-btn{display:none;position:absolute;left:30px;top:22px;color:var(--color-white);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .back-btn svg{margin-right:4px;vertical-align:middle;width:12px;height:12px}@media only screen and (min-width: 1200px){:host{display:inline-block;position:initial}}:host::before,:host::after{content:\" \";width:800px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host .submenu-toggle{display:inline-block;color:var(--color-gray-03);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold);white-space:nowrap;padding:22px var(--ptc-element-spacing-03);margin-left:34%;position:relative}:host .submenu-toggle::after{content:\"\";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:20px}@media only screen and (min-width: 480px){:host .submenu-toggle{margin-left:38%}}@media only screen and (min-width: 768px){:host .submenu-toggle{margin-left:42%}}@media only screen and (min-width: 1200px){:host .submenu-toggle{margin-left:0;display:flex;align-items:center}}:host .submenu-toggle svg{margin-left:5px;margin-top:2px;vertical-align:middle;width:12px;height:12px}:host .submenu-toggle svg path{fill:var(--color-gray-04)}:host .submenu-toggle:hover{color:var(--color-white)}:host .submenu-toggle:hover::after{border-color:var(--color-white)}:host .submenu-toggle:hover svg path{fill:var(--color-white)}:host .submenu-toggle icon-asset{margin-right:8px}:host .submenu-toggle icon-asset svg{margin:0}:host .submenu-container{background-color:var(--color-gray-12)}@media only screen and (min-width: 1200px){:host .submenu-container{position:absolute;width:100%;right:0;left:0;top:67px}}:host .submenu-container .submenu-container-lg{max-width:1200px;margin:auto}@media only screen and (min-width: 1200px){:host .submenu-container .submenu-container-lg{padding:0 32px}}:host ::slotted(ptc-nav-link:last-child)::before,:host ::slotted(ptc-nav-link:last-child)::after{display:none}:host(.short-dropdown) .submenu-container{text-align:center}@media only screen and (min-width: 1200px){:host(.short-dropdown) .submenu-container{width:initial;right:3%;left:initial;top:56px;z-index:1000}}:host(.short-dropdown) .submenu-container .submenu-container-lg{padding:0;width:auto;min-width:348px;display:flex;justify-content:space-evenly}:host(.active){padding-bottom:0}:host(.active) .submenu-toggle{color:var(--color-white);border-color:var(--color-white)}:host(.active) .submenu-toggle svg path{fill:var(--color-white)}:host(.active)::before,:host(.active)::after{display:none}:host(.active.short-dropdown) .back-btn{display:inline-block}@media only screen and (min-width: 1200px){:host(.active.short-dropdown) .back-btn{display:none}}.custom-icon{object-fit:cover;width:1.5rem;height:1.5rem}.custom-icon:hover{filter:brightness(0) invert(1)}.menu-right *{color:transparent !important}";
9634
9634
 
9635
9635
  const PtcNavSubmenu$1 = class extends HTMLElement$1 {
9636
9636
  constructor() {
@@ -9647,7 +9647,7 @@ const PtcNavSubmenu$1 = class extends HTMLElement$1 {
9647
9647
  var container = this.el.closest('ptc-subnav');
9648
9648
  if (dropdown && container) {
9649
9649
  if (window.innerWidth >= 1200) {
9650
- let height = container.clientHeight - 10;
9650
+ let height = container.clientHeight;
9651
9651
  if (height > 0) {
9652
9652
  dropdown.style.top = `${height}px`;
9653
9653
  }
@@ -12347,7 +12347,7 @@ const PtcStickyTitle$1 = class extends HTMLElement$1 {
12347
12347
  static get style() { return ptcStickyTitleCss; }
12348
12348
  };
12349
12349
 
12350
- const ptcSubnavCss = ":host{display:block;width:100%;background-color:var(--color-gray-10);position:relative}:host .navbar .navbar-inner{width:100%;margin:auto;padding:0px;display:none}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{width:1170px}}@media only screen and (min-width: 1256px){:host .navbar .navbar-inner{width:1256px}}@media only screen and (min-width: 1440px){:host .navbar .navbar-inner{width:87.5rem}}@media only screen and (min-width: 1600px){:host .navbar .navbar-inner{width:97.5rem}}@media only screen and (min-width: 1980px){:host .navbar .navbar-inner{width:117.5rem}}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{padding:10px 16px;height:auto;display:block}}:host .navbar .navbar-inner .nav-wrapper{width:auto;margin:auto 32px;min-width:163px}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner .nav-wrapper{width:auto;display:flex;justify-content:space-between}}:host .navbar.navOpen .navbar-inner{background-color:var(--color-gray-12);display:block}:host .navbar .navbar-toggle{display:block;width:100%;text-align:center;color:var(--color-white);background-color:var(--color-gray-10);border:none;padding:16px;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .navbar .navbar-toggle svg{vertical-align:middle;margin-left:4px}@media only screen and (min-width: 1200px){:host .navbar .navbar-toggle{display:none}}";
12350
+ const ptcSubnavCss = ":host{display:block;width:100%;background-color:var(--color-gray-10);position:relative}:host .navbar{overflow-x:hidden}@media only screen and (min-width: 1200px){:host .navbar{overflow-x:visible}}:host .navbar .navbar-inner{max-width:1200px;margin:auto;box-sizing:border-box;padding:0px;display:none}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{padding:0px;height:auto;display:block}}:host .navbar .navbar-inner .nav-wrapper{width:auto;margin:auto 0;min-width:163px}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner .nav-wrapper{width:auto;display:flex;justify-content:space-between}}:host .navbar.navOpen .navbar-inner{background-color:var(--color-gray-12);display:block}:host .navbar .navbar-toggle{display:block;width:100%;text-align:center;color:var(--color-white);background-color:var(--color-gray-10);border:none;padding:16px;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .navbar .navbar-toggle svg{vertical-align:middle;margin-left:4px}@media only screen and (min-width: 1200px){:host .navbar .navbar-toggle{display:none}}";
12351
12351
 
12352
12352
  const PtcSubnav$1 = class extends HTMLElement$1 {
12353
12353
  constructor() {
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, H as Host, g as getElement } from './index-22a84644.js';
2
2
 
3
- const ptcNavLinkCss = ":host{display:block;padding:12px;position:relative}@media only screen and (min-width: 1200px){:host{display:inline-block}}:host::before,:host::after{content:\" \";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host a{color:var(--color-gray-03);text-decoration:none;display:inline-block;border-bottom:2px solid transparent;margin-left:34%;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}@media only screen and (min-width: 480px){:host a{margin-left:38%}}@media only screen and (min-width: 768px){:host a{margin-left:42%}}@media only screen and (min-width: 1200px){:host a{margin-left:0;border-bottom:2px solid transparent;display:flex;align-items:center;white-space:nowrap}}:host a svg{width:1rem;height:0.875rem;display:inline-block;background-size:cover;transition:margin-left 250ms ease-out;vertical-align:middle;margin-left:4px}:host a:hover,:host a:focus{color:var(--color-white);border-color:var(--color-white)}:host a:hover svg path,:host a:focus svg path{fill:var(--color-white)}:host ::slotted(icon-asset){margin-top:4px;margin-right:8px}";
3
+ const ptcNavLinkCss = ":host{display:block;position:relative}@media only screen and (min-width: 1200px){:host{display:inline-block}}:host::before,:host::after{content:\" \";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host a{color:var(--color-gray-03);text-decoration:none;display:inline-block;border-bottom:2px solid transparent;margin-left:34%;padding:22px 12px;font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}@media only screen and (min-width: 480px){:host a{margin-left:38%}}@media only screen and (min-width: 768px){:host a{margin-left:42%}}@media only screen and (min-width: 1200px){:host a{margin-left:0;display:flex;align-items:center;white-space:nowrap;position:relative}:host a::after{content:\"\";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:20px}}:host a svg{width:1rem;height:0.875rem;display:inline-block;background-size:cover;transition:margin-left 250ms ease-out;vertical-align:middle;margin-left:4px}:host a:hover,:host a:focus{color:var(--color-white)}@media only screen and (min-width: 1200px){:host a:hover::after,:host a:focus::after{border-color:var(--color-white)}}:host a:hover svg path,:host a:focus svg path{fill:var(--color-white)}:host ::slotted(icon-asset){margin-top:4px;margin-right:8px}";
4
4
 
5
5
  const PtcNavLink = class {
6
6
  constructor(hostRef) {
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-22a84644.js';
2
2
 
3
- const ptcNavSubmenuCss = ":host{display:block;padding:var(--ptc-element-spacing-03);position:relative}:host .back-btn{display:none;position:absolute;left:30px;color:var(--color-white);font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .back-btn svg{margin-right:4px;vertical-align:middle}@media only screen and (min-width: 1200px){:host{display:inline-block;position:initial}}:host::before,:host::after{content:\" \";width:800px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host .submenu-toggle{display:inline-block;cursor:pointer;color:var(--color-gray-03);font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold);white-space:nowrap;border-bottom:2px solid transparent;margin-left:34%}@media only screen and (min-width: 480px){:host .submenu-toggle{margin-left:38%}}@media only screen and (min-width: 768px){:host .submenu-toggle{margin-left:42%}}@media only screen and (min-width: 1200px){:host .submenu-toggle{margin-left:0;display:flex;align-items:center}}:host .submenu-toggle svg{margin-left:5px;margin-top:2px;vertical-align:middle}:host .submenu-toggle svg path{fill:var(--color-gray-04)}:host .submenu-toggle:hover{color:var(--color-white);border-color:var(--color-white)}:host .submenu-toggle:hover svg path{fill:var(--color-white)}:host .submenu-toggle icon-asset{margin-right:8px}:host .submenu-toggle icon-asset svg{margin:0}:host .submenu-container{background-color:var(--color-gray-12)}@media only screen and (min-width: 1200px){:host .submenu-container{position:absolute;width:100%;right:0;left:0;top:64px}}:host .submenu-container .submenu-container-lg{padding:0 32px;width:100%;margin:auto}@media only screen and (min-width: 992px){:host .submenu-container .submenu-container-lg{padding:0 32px}}@media only screen and (min-width: 1200px){:host .submenu-container .submenu-container-lg{padding:0;width:1106px}}@media only screen and (min-width: 1256px){:host .submenu-container .submenu-container-lg{width:1164px}}@media only screen and (min-width: 1280px){:host .submenu-container .submenu-container-lg{width:1180px}}@media only screen and (min-width: 1300px){:host .submenu-container .submenu-container-lg{width:1200px}}@media only screen and (min-width: 1440px){:host .submenu-container .submenu-container-lg{width:83.5rem}}@media only screen and (min-width: 1600px){:host .submenu-container .submenu-container-lg{width:93.5rem}}@media only screen and (min-width: 1980px){:host .submenu-container .submenu-container-lg{width:113.5rem}}:host ::slotted(ptc-nav-link:last-child)::before,:host ::slotted(ptc-nav-link:last-child)::after{display:none}:host(.short-dropdown) .submenu-container{text-align:center}@media only screen and (min-width: 1200px){:host(.short-dropdown) .submenu-container{width:initial;right:3%;left:initial;top:56px;z-index:1000}}:host(.short-dropdown) .submenu-container .submenu-container-lg{padding:0;width:auto;min-width:348px;display:flex;justify-content:space-evenly}:host(.active){padding-bottom:0}:host(.active) .submenu-toggle{color:var(--color-white);border-color:var(--color-white)}:host(.active) .submenu-toggle svg path{fill:var(--color-white)}:host(.active)::before,:host(.active)::after{display:none}@media only screen and (min-width: 1200px){:host(.active){padding-bottom:var(--ptc-element-spacing-03)}}:host(.active.short-dropdown) .back-btn{display:inline-block}@media only screen and (min-width: 1200px){:host(.active.short-dropdown) .back-btn{display:none}}.custom-icon{object-fit:cover;width:1.5rem;height:1.5rem}.custom-icon:hover{filter:brightness(0) invert(1)}.menu-right *{color:transparent !important}";
3
+ const ptcNavSubmenuCss = ":host{display:block;position:relative;cursor:pointer}:host .back-btn{display:none;position:absolute;left:30px;top:22px;color:var(--color-white);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .back-btn svg{margin-right:4px;vertical-align:middle;width:12px;height:12px}@media only screen and (min-width: 1200px){:host{display:inline-block;position:initial}}:host::before,:host::after{content:\" \";width:800px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host .submenu-toggle{display:inline-block;color:var(--color-gray-03);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold);white-space:nowrap;padding:22px var(--ptc-element-spacing-03);margin-left:34%;position:relative}:host .submenu-toggle::after{content:\"\";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:20px}@media only screen and (min-width: 480px){:host .submenu-toggle{margin-left:38%}}@media only screen and (min-width: 768px){:host .submenu-toggle{margin-left:42%}}@media only screen and (min-width: 1200px){:host .submenu-toggle{margin-left:0;display:flex;align-items:center}}:host .submenu-toggle svg{margin-left:5px;margin-top:2px;vertical-align:middle;width:12px;height:12px}:host .submenu-toggle svg path{fill:var(--color-gray-04)}:host .submenu-toggle:hover{color:var(--color-white)}:host .submenu-toggle:hover::after{border-color:var(--color-white)}:host .submenu-toggle:hover svg path{fill:var(--color-white)}:host .submenu-toggle icon-asset{margin-right:8px}:host .submenu-toggle icon-asset svg{margin:0}:host .submenu-container{background-color:var(--color-gray-12)}@media only screen and (min-width: 1200px){:host .submenu-container{position:absolute;width:100%;right:0;left:0;top:67px}}:host .submenu-container .submenu-container-lg{max-width:1200px;margin:auto}@media only screen and (min-width: 1200px){:host .submenu-container .submenu-container-lg{padding:0 32px}}:host ::slotted(ptc-nav-link:last-child)::before,:host ::slotted(ptc-nav-link:last-child)::after{display:none}:host(.short-dropdown) .submenu-container{text-align:center}@media only screen and (min-width: 1200px){:host(.short-dropdown) .submenu-container{width:initial;right:3%;left:initial;top:56px;z-index:1000}}:host(.short-dropdown) .submenu-container .submenu-container-lg{padding:0;width:auto;min-width:348px;display:flex;justify-content:space-evenly}:host(.active){padding-bottom:0}:host(.active) .submenu-toggle{color:var(--color-white);border-color:var(--color-white)}:host(.active) .submenu-toggle svg path{fill:var(--color-white)}:host(.active)::before,:host(.active)::after{display:none}:host(.active.short-dropdown) .back-btn{display:inline-block}@media only screen and (min-width: 1200px){:host(.active.short-dropdown) .back-btn{display:none}}.custom-icon{object-fit:cover;width:1.5rem;height:1.5rem}.custom-icon:hover{filter:brightness(0) invert(1)}.menu-right *{color:transparent !important}";
4
4
 
5
5
  const PtcNavSubmenu = class {
6
6
  constructor(hostRef) {
@@ -15,7 +15,7 @@ const PtcNavSubmenu = class {
15
15
  var container = this.el.closest('ptc-subnav');
16
16
  if (dropdown && container) {
17
17
  if (window.innerWidth >= 1200) {
18
- let height = container.clientHeight - 10;
18
+ let height = container.clientHeight;
19
19
  if (height > 0) {
20
20
  dropdown.style.top = `${height}px`;
21
21
  }
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, H as Host, g as getElement } from './index-22a84644.js';
2
2
 
3
- const ptcSubnavCss = ":host{display:block;width:100%;background-color:var(--color-gray-10);position:relative}:host .navbar .navbar-inner{width:100%;margin:auto;padding:0px;display:none}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{width:1170px}}@media only screen and (min-width: 1256px){:host .navbar .navbar-inner{width:1256px}}@media only screen and (min-width: 1440px){:host .navbar .navbar-inner{width:87.5rem}}@media only screen and (min-width: 1600px){:host .navbar .navbar-inner{width:97.5rem}}@media only screen and (min-width: 1980px){:host .navbar .navbar-inner{width:117.5rem}}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{padding:10px 16px;height:auto;display:block}}:host .navbar .navbar-inner .nav-wrapper{width:auto;margin:auto 32px;min-width:163px}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner .nav-wrapper{width:auto;display:flex;justify-content:space-between}}:host .navbar.navOpen .navbar-inner{background-color:var(--color-gray-12);display:block}:host .navbar .navbar-toggle{display:block;width:100%;text-align:center;color:var(--color-white);background-color:var(--color-gray-10);border:none;padding:16px;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .navbar .navbar-toggle svg{vertical-align:middle;margin-left:4px}@media only screen and (min-width: 1200px){:host .navbar .navbar-toggle{display:none}}";
3
+ const ptcSubnavCss = ":host{display:block;width:100%;background-color:var(--color-gray-10);position:relative}:host .navbar{overflow-x:hidden}@media only screen and (min-width: 1200px){:host .navbar{overflow-x:visible}}:host .navbar .navbar-inner{max-width:1200px;margin:auto;box-sizing:border-box;padding:0px;display:none}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{padding:0px;height:auto;display:block}}:host .navbar .navbar-inner .nav-wrapper{width:auto;margin:auto 0;min-width:163px}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner .nav-wrapper{width:auto;display:flex;justify-content:space-between}}:host .navbar.navOpen .navbar-inner{background-color:var(--color-gray-12);display:block}:host .navbar .navbar-toggle{display:block;width:100%;text-align:center;color:var(--color-white);background-color:var(--color-gray-10);border:none;padding:16px;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .navbar .navbar-toggle svg{vertical-align:middle;margin-left:4px}@media only screen and (min-width: 1200px){:host .navbar .navbar-toggle{display:none}}";
4
4
 
5
5
  const PtcSubnav = class {
6
6
  constructor(hostRef) {
@@ -0,0 +1 @@
1
+ import{r as a,h as n,H as e,g as r}from"./p-ce0e4c5c.js";const t=class{constructor(n){a(this,n),this.mobileTitle="See page topics",this.navOpen=!1}toggleNav(){this.navOpen=!this.navOpen}handleScroll(){const a=this.el.shadowRoot.querySelector(".navbar");a&&a.getBoundingClientRect().top<=0&&(this.navOpen=!1)}render(){return n(e,null,n("nav",{class:"navbar "+(this.navOpen?"navOpen":"")},n("button",{class:"navbar-toggle",onClick:()=>this.toggleNav()},this.mobileTitle,n("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"15",viewBox:"0 0 15 15",fill:"white",class:""},n("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z",fill:"white"}))),n("div",{class:"navbar-inner"},n("div",{class:"nav-wrapper"},n("slot",{name:"subnav-menu-left"}),n("slot",{name:"subnav-menu-right"})))))}get el(){return r(this)}};t.style=":host{display:block;width:100%;background-color:var(--color-gray-10);position:relative}:host .navbar{overflow-x:hidden}@media only screen and (min-width: 1200px){:host .navbar{overflow-x:visible}}:host .navbar .navbar-inner{max-width:1200px;margin:auto;box-sizing:border-box;padding:0px;display:none}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner{padding:0px;height:auto;display:block}}:host .navbar .navbar-inner .nav-wrapper{width:auto;margin:auto 0;min-width:163px}@media only screen and (min-width: 1200px){:host .navbar .navbar-inner .nav-wrapper{width:auto;display:flex;justify-content:space-between}}:host .navbar.navOpen .navbar-inner{background-color:var(--color-gray-12);display:block}:host .navbar .navbar-toggle{display:block;width:100%;text-align:center;color:var(--color-white);background-color:var(--color-gray-10);border:none;padding:16px;font-size:15px;line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .navbar .navbar-toggle svg{vertical-align:middle;margin-left:4px}@media only screen and (min-width: 1200px){:host .navbar .navbar-toggle{display:none}}";export{t as ptc_subnav}
@@ -0,0 +1 @@
1
+ import{r as t,c as e,h as o,H as i,g as n}from"./p-ce0e4c5c.js";const s=class{constructor(o){t(this,o),this.dropdownClickEvent=e(this,"dropdownClickEvent",7),this.label=void 0,this.iconAssetName=void 0,this.iconSrc=void 0}calculateOffset(){var t=this.el.shadowRoot.querySelector(".submenu-container"),e=this.el.closest("ptc-subnav");if(t&&e)if(window.innerWidth>=1200){let o=e.clientHeight;o>0&&(t.style.top=`${o}px`)}else t.style.top=""}handleClick(t){this.calculateOffset(),setTimeout((()=>{this.dropdownClickEvent.emit(t)}),100)}render(){return o(i,{class:"dropdown"},o("span",{class:"back-btn"},o("svg",{width:"10",height:"16",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z",fill:"white"})),"Back"),o("span",{class:"submenu-toggle",onClick:()=>this.handleClick(this),onMouseOver:()=>this.handleClick(this)},this.iconAssetName&&o("icon-asset",{type:"ptc",size:"xx-small",name:this.iconAssetName,color:"white"}),this.label,this.iconSrc&&o("img",{src:this.iconSrc,alt:this.label,class:"custom-icon"}),!this.iconSrc&&o("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"15",viewBox:"0 0 15 15",fill:"white",class:""},o("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z",fill:"white"}))),o("div",{class:"submenu-container"},o("div",{class:"submenu-container-lg"},o("slot",null))))}get el(){return n(this)}};s.style=':host{display:block;position:relative;cursor:pointer}:host .back-btn{display:none;position:absolute;left:30px;top:22px;color:var(--color-white);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}:host .back-btn svg{margin-right:4px;vertical-align:middle;width:12px;height:12px}@media only screen and (min-width: 1200px){:host{display:inline-block;position:initial}}:host::before,:host::after{content:" ";width:800px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host .submenu-toggle{display:inline-block;color:var(--color-gray-03);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold);white-space:nowrap;padding:22px var(--ptc-element-spacing-03);margin-left:34%;position:relative}:host .submenu-toggle::after{content:"";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:20px}@media only screen and (min-width: 480px){:host .submenu-toggle{margin-left:38%}}@media only screen and (min-width: 768px){:host .submenu-toggle{margin-left:42%}}@media only screen and (min-width: 1200px){:host .submenu-toggle{margin-left:0;display:flex;align-items:center}}:host .submenu-toggle svg{margin-left:5px;margin-top:2px;vertical-align:middle;width:12px;height:12px}:host .submenu-toggle svg path{fill:var(--color-gray-04)}:host .submenu-toggle:hover{color:var(--color-white)}:host .submenu-toggle:hover::after{border-color:var(--color-white)}:host .submenu-toggle:hover svg path{fill:var(--color-white)}:host .submenu-toggle icon-asset{margin-right:8px}:host .submenu-toggle icon-asset svg{margin:0}:host .submenu-container{background-color:var(--color-gray-12)}@media only screen and (min-width: 1200px){:host .submenu-container{position:absolute;width:100%;right:0;left:0;top:67px}}:host .submenu-container .submenu-container-lg{max-width:1200px;margin:auto}@media only screen and (min-width: 1200px){:host .submenu-container .submenu-container-lg{padding:0 32px}}:host ::slotted(ptc-nav-link:last-child)::before,:host ::slotted(ptc-nav-link:last-child)::after{display:none}:host(.short-dropdown) .submenu-container{text-align:center}@media only screen and (min-width: 1200px){:host(.short-dropdown) .submenu-container{width:initial;right:3%;left:initial;top:56px;z-index:1000}}:host(.short-dropdown) .submenu-container .submenu-container-lg{padding:0;width:auto;min-width:348px;display:flex;justify-content:space-evenly}:host(.active){padding-bottom:0}:host(.active) .submenu-toggle{color:var(--color-white);border-color:var(--color-white)}:host(.active) .submenu-toggle svg path{fill:var(--color-white)}:host(.active)::before,:host(.active)::after{display:none}:host(.active.short-dropdown) .back-btn{display:inline-block}@media only screen and (min-width: 1200px){:host(.active.short-dropdown) .back-btn{display:none}}.custom-icon{object-fit:cover;width:1.5rem;height:1.5rem}.custom-icon:hover{filter:brightness(0) invert(1)}.menu-right *{color:transparent !important}';export{s as ptc_nav_submenu}
@@ -0,0 +1 @@
1
+ import{r as t,h as o,H as i,g as e}from"./p-ce0e4c5c.js";const a=class{constructor(o){t(this,o),this.href=void 0,this.isOutsideLink=!1,this.titleText=""}handleClick(){this.href&&this.href.startsWith("#")&&document.querySelector(this.href).scrollIntoView({behavior:"smooth"})}componentWillLoad(){const t=this.el.textContent;t.length>32&&(this.titleText=t,this.el.textContent=t.substring(0,32)+"...")}render(){return o(i,null,o("a",{href:this.href,target:this.isOutsideLink?"_blank":"_self",title:this.titleText,onClick:()=>{this.handleClick()}},o("slot",null),!this.href.startsWith("#")&&o("svg",{class:"icon-arrow-right",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"10",viewBox:"0 0 14 10",fill:"none"},o("path",{d:"M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z",fill:"#AEB8BD"}))))}get el(){return e(this)}};a.style=':host{display:block;position:relative}@media only screen and (min-width: 1200px){:host{display:inline-block}}:host::before,:host::after{content:" ";width:1600px;height:1px;background-color:var(--color-gray-08);position:absolute;right:0;bottom:0}@media only screen and (min-width: 1200px){:host::before,:host::after{display:none}}:host::after{left:0;right:auto}:host a{color:var(--color-gray-03);text-decoration:none;display:inline-block;border-bottom:2px solid transparent;margin-left:34%;padding:22px 12px;font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-denser);font-weight:var(--ptc-font-weight-bold)}@media only screen and (min-width: 480px){:host a{margin-left:38%}}@media only screen and (min-width: 768px){:host a{margin-left:42%}}@media only screen and (min-width: 1200px){:host a{margin-left:0;display:flex;align-items:center;white-space:nowrap;position:relative}:host a::after{content:"";display:block;border-bottom:2px solid transparent;margin:auto;position:absolute;width:calc(100% - 20px);left:0;right:0;bottom:20px}}:host a svg{width:1rem;height:0.875rem;display:inline-block;background-size:cover;transition:margin-left 250ms ease-out;vertical-align:middle;margin-left:4px}:host a:hover,:host a:focus{color:var(--color-white)}@media only screen and (min-width: 1200px){:host a:hover::after,:host a:focus::after{border-color:var(--color-white)}}:host a:hover svg path,:host a:focus svg path{fill:var(--color-white)}:host ::slotted(icon-asset){margin-top:4px;margin-right:8px}';export{a as ptc_nav_link}