@ptcwebops/ptcw-design 5.1.3 → 5.1.4

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 (48) hide show
  1. package/dist/cjs/blog-detail-content_2.cjs.entry.js +1 -1
  2. package/dist/cjs/blog-detail-layout.cjs.entry.js +1 -1
  3. package/dist/cjs/icon-asset.cjs.entry.js +1 -1
  4. package/dist/cjs/ptc-card_2.cjs.entry.js +1 -1
  5. package/dist/cjs/ptc-filter-tag_2.cjs.entry.js +1 -1
  6. package/dist/cjs/ptc-footer.cjs.entry.js +1 -1
  7. package/dist/cjs/ptc-form-checkbox_2.cjs.entry.js +76 -185
  8. package/dist/cjs/ptc-jumbotron.cjs.entry.js +1 -1
  9. package/dist/cjs/ptc-mobile-select.cjs.entry.js +4 -3
  10. package/dist/cjs/ptc-pricing-tabs.cjs.entry.js +1 -1
  11. package/dist/collection/components/icon-asset/icon-asset.css +2 -2
  12. package/dist/collection/components/organism-bundles/blog-detail-content/blog-detail-content.css +1 -1
  13. package/dist/collection/components/organism-bundles/blog-detail-layout/blog-detail-layout.css +1 -1
  14. package/dist/collection/components/ptc-card/ptc-card.css +1 -1
  15. package/dist/collection/components/ptc-footer/ptc-footer-v2.css +5 -1
  16. package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.css +7 -7
  17. package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +2 -2
  18. package/dist/collection/components/ptc-pagenation/ptc-pagenation.css +1 -1
  19. package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css +2 -2
  20. package/dist/collection/components/ptc-textfield/ptc-textfield.css +34 -51
  21. package/dist/custom-elements/index.js +88 -196
  22. package/dist/esm/blog-detail-content_2.entry.js +1 -1
  23. package/dist/esm/blog-detail-layout.entry.js +1 -1
  24. package/dist/esm/icon-asset.entry.js +1 -1
  25. package/dist/esm/ptc-card_2.entry.js +1 -1
  26. package/dist/esm/ptc-filter-tag_2.entry.js +1 -1
  27. package/dist/esm/ptc-footer.entry.js +1 -1
  28. package/dist/esm/ptc-form-checkbox_2.entry.js +76 -185
  29. package/dist/esm/ptc-jumbotron.entry.js +1 -1
  30. package/dist/esm/ptc-mobile-select.entry.js +4 -3
  31. package/dist/esm/ptc-pricing-tabs.entry.js +1 -1
  32. package/dist/ptcw-design/{p-dfeb5574.entry.js → p-4452f0cb.entry.js} +1 -1
  33. package/dist/ptcw-design/{p-7e77a2ce.entry.js → p-612c0f9b.entry.js} +1 -1
  34. package/dist/ptcw-design/{p-fc51fc29.entry.js → p-657ecf13.entry.js} +1 -1
  35. package/dist/ptcw-design/p-94593ca7.entry.js +1 -0
  36. package/dist/ptcw-design/{p-661e7736.entry.js → p-95c74739.entry.js} +1 -1
  37. package/dist/ptcw-design/{p-a3ae424f.entry.js → p-9a077de7.entry.js} +1 -1
  38. package/dist/ptcw-design/{p-8e6059b8.entry.js → p-a27e3899.entry.js} +1 -1
  39. package/dist/ptcw-design/{p-a11dbfda.entry.js → p-b76cd8af.entry.js} +1 -1
  40. package/dist/ptcw-design/p-cabb1a4d.entry.js +68 -0
  41. package/dist/ptcw-design/p-e732466f.entry.js +1 -0
  42. package/dist/ptcw-design/ptcw-design.css +1 -1
  43. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  44. package/package.json +1 -1
  45. package/readme.md +1 -1
  46. package/dist/ptcw-design/p-1e95df47.entry.js +0 -68
  47. package/dist/ptcw-design/p-3d8902b8.entry.js +0 -1
  48. package/dist/ptcw-design/p-86fdbdb5.entry.js +0 -1
@@ -67,8 +67,8 @@ svg {
67
67
  transition: all var(--ptc-transition-medium) var(--ptc-ease-inout);
68
68
  }
69
69
  svg.micro {
70
- width: calc(var(--ptc-font-size-x-small) / 2);
71
- height: calc(var(--ptc-font-size-x-small) / 2);
70
+ width: calc(var(--ptc-font-size-x-small)/2);
71
+ height: calc(var(--ptc-font-size-x-small)/2);
72
72
  }
73
73
  svg.xxx-small {
74
74
  width: var(--ptc-font-size-xxx-small);
@@ -236,7 +236,7 @@ ptc-link, ptc-square-card,
236
236
  }
237
237
  }
238
238
  :host #blog-detail-content {
239
- margin-top: calc(2 * var(--ptc-element-spacing-06) + 27px + 48px);
239
+ margin-top: calc(2*var(--ptc-element-spacing-06) + 27px + 48px);
240
240
  }
241
241
  @media only screen and (min-width: 992px) {
242
242
  :host #blog-detail-content {
@@ -81,7 +81,7 @@ ptc-link, ptc-square-card,
81
81
  width: 100%;
82
82
  height: 85px;
83
83
  /* TODO: Dynamic usage of desktop TOC height */
84
- margin-bottom: 180px;
84
+ margin-bottom: calc(48px + 132px);
85
85
  background-color: var(--color-gray-08);
86
86
  position: sticky;
87
87
  top: 0;
@@ -200,7 +200,7 @@ ptc-link, ptc-square-card,
200
200
  border-radius: var(--ptc-border-radius-standard);
201
201
  }
202
202
  :host(.clip-edge-card) .card-body {
203
- transform: translateY(calc(-1 * var(--ptc-element-spacing-04)));
203
+ transform: translateY(calc((-1) * var(--ptc-element-spacing-04)));
204
204
  overflow: hidden;
205
205
  width: calc(95% - var(--ptc-element-spacing-04) - var(--ptc-element-spacing-04));
206
206
  font-size: var(--ptc-font-size-xx-small);
@@ -349,11 +349,15 @@ ptc-footer .ft-grid .ft-menu {
349
349
  @media only screen and (min-width: 992px) {
350
350
  ptc-footer .ft-grid .ft-menu {
351
351
  width: auto;
352
- min-width: 360px;
353
352
  max-width: 365px;
354
353
  padding-right: 0;
355
354
  }
356
355
  }
356
+ @media (min-width: 998px) {
357
+ ptc-footer .ft-grid .ft-menu {
358
+ min-width: 360px;
359
+ }
360
+ }
357
361
  @media only screen and (min-width: 1200px) {
358
362
  ptc-footer .ft-grid .ft-menu {
359
363
  padding-right: 64px;
@@ -1133,29 +1133,29 @@ ptc-link, ptc-square-card,
1133
1133
 
1134
1134
  .mdc-checkbox {
1135
1135
  transform: translateX(-8px);
1136
- padding: 8px;
1136
+ padding: calc((34px - 18px) / 2);
1137
1137
  /* @alternate */
1138
1138
  padding: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
1139
- margin: 0px;
1139
+ margin: calc((34px - 34px) / 2);
1140
1140
  /* @alternate */
1141
1141
  margin: calc((var(--mdc-checkbox-touch-target-size, 34px) - 34px) / 2);
1142
1142
  }
1143
1143
  .mdc-checkbox .mdc-checkbox__background {
1144
- top: 8px;
1144
+ top: calc((34px - 18px) / 2);
1145
1145
  /* @alternate */
1146
1146
  top: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
1147
- left: 8px;
1147
+ left: calc((34px - 18px) / 2);
1148
1148
  /* @alternate */
1149
1149
  left: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
1150
1150
  }
1151
1151
  .mdc-checkbox .mdc-checkbox__native-control {
1152
- top: 0px;
1152
+ top: calc((34px - 34px) / 2);
1153
1153
  /* @alternate */
1154
1154
  top: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
1155
- right: 0px;
1155
+ right: calc((34px - 34px) / 2);
1156
1156
  /* @alternate */
1157
1157
  right: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
1158
- left: 0px;
1158
+ left: calc((34px - 34px) / 2);
1159
1159
  /* @alternate */
1160
1160
  left: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
1161
1161
  width: 34px;
@@ -1101,7 +1101,7 @@ ptc-link, ptc-square-card,
1101
1101
  }
1102
1102
  @media only screen and (min-width: 992px) {
1103
1103
  .u-3-col-grid .u-3-col {
1104
- width: calc(33.3333333333% - 10.66666666px);
1104
+ width: calc(33.333333333333% - 10.66666666px);
1105
1105
  }
1106
1106
  }
1107
1107
  .u-3-col-grid.u-col-space-lg {
@@ -1118,7 +1118,7 @@ ptc-link, ptc-square-card,
1118
1118
  }
1119
1119
  @media only screen and (min-width: 992px) {
1120
1120
  .u-3-col-grid.u-col-space-lg .u-3-col {
1121
- width: calc(33.3333333333% - 21.3333333px);
1121
+ width: calc(33.333333333333% - 21.3333333px);
1122
1122
  }
1123
1123
  }
1124
1124
 
@@ -128,7 +128,7 @@ ptc-link, ptc-square-card,
128
128
  width: 1.125rem;
129
129
  height: 1.125rem;
130
130
  border: 1px solid var(--color-gray-10);
131
- border-radius: calc(var(--ptc-border-radius-standard) / 2);
131
+ border-radius: calc(var(--ptc-border-radius-standard)/2);
132
132
  transition: background-color var(--ptc-ease-out) var(--ptc-transition-medium), fill var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);
133
133
  }
134
134
  .standard-filter .next-button:hover, .standard-filter .previous-button:hover {
@@ -1046,7 +1046,7 @@ ptc-link, ptc-square-card,
1046
1046
  }
1047
1047
  @media only screen and (min-width: 992px) {
1048
1048
  .u-3-col-grid .u-3-col {
1049
- width: calc(33.3333333333% - 10.66666666px);
1049
+ width: calc(33.333333333333% - 10.66666666px);
1050
1050
  }
1051
1051
  }
1052
1052
  .u-3-col-grid.u-col-space-lg {
@@ -1063,7 +1063,7 @@ ptc-link, ptc-square-card,
1063
1063
  }
1064
1064
  @media only screen and (min-width: 992px) {
1065
1065
  .u-3-col-grid.u-col-space-lg .u-3-col {
1066
- width: calc(33.3333333333% - 21.3333333px);
1066
+ width: calc(33.333333333333% - 21.3333333px);
1067
1067
  }
1068
1068
  }
1069
1069
 
@@ -2215,9 +2215,9 @@
2215
2215
  .iti__v-hide {
2216
2216
  visibility: hidden;
2217
2217
  }
2218
- .iti input.iti__tel-input,
2219
- .iti input.iti__tel-input[type=text],
2220
- .iti input.iti__tel-input[type=tel] {
2218
+ .iti input,
2219
+ .iti input[type=text],
2220
+ .iti input[type=tel] {
2221
2221
  position: relative;
2222
2222
  z-index: 0;
2223
2223
  margin-top: 0 !important;
@@ -2256,35 +2256,26 @@
2256
2256
  border-top: none;
2257
2257
  border-bottom: 4px solid #555;
2258
2258
  }
2259
- .iti__dropdown-content {
2259
+ .iti__country-list {
2260
2260
  position: absolute;
2261
2261
  z-index: 2;
2262
- margin-left: -1px;
2262
+ list-style: none;
2263
+ padding: 0;
2264
+ margin: 0 0 0 -1px;
2263
2265
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
2264
2266
  background-color: white;
2265
2267
  border: 1px solid #ccc;
2268
+ white-space: nowrap;
2266
2269
  max-height: 200px;
2267
2270
  overflow-y: scroll;
2268
2271
  -webkit-overflow-scrolling: touch;
2269
2272
  }
2270
- .iti__dropdown-content--dropup {
2273
+ .iti__country-list--dropup {
2271
2274
  bottom: 100%;
2272
2275
  margin-bottom: -1px;
2273
2276
  }
2274
- .iti__search-input {
2275
- width: 100%;
2276
- border-width: 0;
2277
- }
2278
- .iti__country-list {
2279
- list-style: none;
2280
- padding: 0;
2281
- margin: 0;
2282
- }
2283
- .iti--flexible-dropdown-width .iti__country-list {
2284
- white-space: nowrap;
2285
- }
2286
2277
  @media (max-width: 500px) {
2287
- .iti--flexible-dropdown-width .iti__country-list {
2278
+ .iti__country-list {
2288
2279
  white-space: normal;
2289
2280
  }
2290
2281
  }
@@ -2316,20 +2307,20 @@
2316
2307
  margin-right: 0;
2317
2308
  margin-left: 6px;
2318
2309
  }
2319
- .iti--allow-dropdown input.iti__tel-input,
2320
- .iti--allow-dropdown input.iti__tel-input[type=text],
2321
- .iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
2322
- .iti--separate-dial-code input.iti__tel-input[type=text],
2323
- .iti--separate-dial-code input.iti__tel-input[type=tel] {
2310
+ .iti--allow-dropdown input,
2311
+ .iti--allow-dropdown input[type=text],
2312
+ .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
2313
+ .iti--separate-dial-code input[type=text],
2314
+ .iti--separate-dial-code input[type=tel] {
2324
2315
  padding-right: 6px;
2325
2316
  padding-left: 52px;
2326
2317
  margin-left: 0;
2327
2318
  }
2328
- [dir=rtl] .iti--allow-dropdown input.iti__tel-input,
2329
- [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
2330
- [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
2331
- [dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
2332
- [dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
2319
+ [dir=rtl] .iti--allow-dropdown input,
2320
+ [dir=rtl] .iti--allow-dropdown input[type=text],
2321
+ [dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
2322
+ [dir=rtl] .iti--separate-dial-code input[type=text],
2323
+ [dir=rtl] .iti--separate-dial-code input[type=tel] {
2333
2324
  padding-right: 52px;
2334
2325
  padding-left: 6px;
2335
2326
  margin-right: 0;
@@ -2348,12 +2339,12 @@
2348
2339
  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
2349
2340
  background-color: rgba(0, 0, 0, 0.05);
2350
2341
  }
2351
- .iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
2352
- .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
2342
+ .iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
2343
+ .iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
2353
2344
  cursor: default;
2354
2345
  }
2355
- .iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
2356
- .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
2346
+ .iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
2347
+ .iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
2357
2348
  background-color: transparent;
2358
2349
  }
2359
2350
  .iti--separate-dial-code .iti__selected-flag {
@@ -2377,26 +2368,18 @@
2377
2368
  cursor: pointer;
2378
2369
  }
2379
2370
 
2380
- .iti--fullscreen-popup.iti--container {
2381
- background-color: rgba(0, 0, 0, 0.5);
2382
- top: 0;
2383
- bottom: 0;
2384
- left: 0;
2385
- right: 0;
2371
+ .iti-mobile .iti--container {
2372
+ top: 30px;
2373
+ bottom: 30px;
2374
+ left: 30px;
2375
+ right: 30px;
2386
2376
  position: fixed;
2387
- padding: 30px;
2388
- display: flex;
2389
- flex-direction: column;
2390
- justify-content: center;
2391
- }
2392
- .iti--fullscreen-popup.iti--container.iti--country-search {
2393
- justify-content: flex-start;
2394
2377
  }
2395
- .iti--fullscreen-popup .iti__dropdown-content {
2378
+ .iti-mobile .iti__country-list {
2396
2379
  max-height: 100%;
2397
- position: relative;
2380
+ width: 100%;
2398
2381
  }
2399
- .iti--fullscreen-popup .iti__country {
2382
+ .iti-mobile .iti__country {
2400
2383
  padding: 10px 10px;
2401
2384
  line-height: 1.5em;
2402
2385
  }
@@ -2422,7 +2405,7 @@
2422
2405
  .iti__flag.iti__va {
2423
2406
  width: 15px;
2424
2407
  }
2425
- @media (min-resolution: 2x) {
2408
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
2426
2409
  .iti__flag {
2427
2410
  background-size: 5762px 15px;
2428
2411
  }
@@ -3488,7 +3471,7 @@
3488
3471
  background-color: #dbdbdb;
3489
3472
  background-position: 20px 0;
3490
3473
  }
3491
- @media (min-resolution: 2x) {
3474
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
3492
3475
  .iti__flag {
3493
3476
  background-image: url("../img/flags@2x.png?1");
3494
3477
  }