@ptcwebops/ptcw-design 5.6.6 → 5.6.8

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.
@@ -772,42 +772,96 @@ ptc-link, ptc-square-card,
772
772
 
773
773
  .skeleton-on-demand {
774
774
  background-color: #20262A;
775
- padding-bottom: 326px;
776
775
  }
777
776
  .skeleton-on-demand .skeleton-block {
778
777
  background: linear-gradient(to right, #32373B 25%, var(--color-gray-09) 50%, #32373B 75%);
779
- height: 24px;
780
778
  background-size: 200% 100%;
781
779
  margin-bottom: 8px;
782
780
  border-radius: 4px;
783
781
  animation: loading 2.5s ease-in-out infinite;
784
782
  }
783
+ .skeleton-on-demand .skeleton-block.short {
784
+ width: 80%;
785
+ }
786
+ @media only screen and (min-width: 992px) {
787
+ .skeleton-on-demand .skeleton-block.short {
788
+ width: 30%;
789
+ }
790
+ }
785
791
  .skeleton-on-demand .skeleton-block.wide-sm-1 {
786
- width: 40%;
792
+ width: 90%;
793
+ }
794
+ @media only screen and (min-width: 992px) {
795
+ .skeleton-on-demand .skeleton-block.wide-sm-1 {
796
+ width: 40%;
797
+ }
787
798
  }
788
799
  .skeleton-on-demand .skeleton-block.wide-md {
789
- width: 43%;
800
+ width: 93%;
801
+ }
802
+ @media only screen and (min-width: 992px) {
803
+ .skeleton-on-demand .skeleton-block.wide-md {
804
+ width: 43%;
805
+ }
790
806
  }
791
807
  .skeleton-on-demand .skeleton-block.wide-md-1 {
792
- width: 45%;
808
+ width: 95%;
809
+ }
810
+ @media only screen and (min-width: 992px) {
811
+ .skeleton-on-demand .skeleton-block.wide-md-1 {
812
+ width: 45%;
813
+ }
793
814
  }
794
815
  .skeleton-on-demand .skeleton-block.wide-sm-2 {
795
- width: 27%;
816
+ width: 77%;
817
+ }
818
+ @media only screen and (min-width: 992px) {
819
+ .skeleton-on-demand .skeleton-block.wide-sm-2 {
820
+ width: 27%;
821
+ }
796
822
  }
797
823
  .skeleton-on-demand .skeleton-block.smallest {
798
- width: 10%;
824
+ width: 60%;
825
+ }
826
+ @media only screen and (min-width: 992px) {
827
+ .skeleton-on-demand .skeleton-block.smallest {
828
+ width: 10%;
829
+ }
830
+ }
831
+ .skeleton-on-demand .skeleton-block.medium-1 {
832
+ width: 100%;
833
+ }
834
+ @media only screen and (min-width: 480px) {
835
+ .skeleton-on-demand .skeleton-block.medium-1 {
836
+ width: 90%;
837
+ }
838
+ }
839
+ @media only screen and (min-width: 992px) {
840
+ .skeleton-on-demand .skeleton-block.medium-1 {
841
+ width: 50%;
842
+ }
799
843
  }
800
844
  .skeleton-on-demand .on-demand-vl {
801
845
  padding-top: 19px;
802
846
  padding-bottom: 338px;
803
847
  }
804
848
  .skeleton-on-demand .on-demand-vl .grid-top {
805
- padding-bottom: 113px;
849
+ padding-bottom: 90px;
850
+ }
851
+ @media only screen and (min-width: 1600px) {
852
+ .skeleton-on-demand .on-demand-vl .grid-top {
853
+ padding-bottom: 113px;
854
+ }
806
855
  }
807
856
  .skeleton-on-demand .on-demand-vl .grid-medium {
808
- padding-top: 97px;
857
+ padding-top: 84px;
809
858
  padding-bottom: 100px;
810
859
  }
860
+ @media only screen and (min-width: 1600px) {
861
+ .skeleton-on-demand .on-demand-vl .grid-medium {
862
+ padding-top: 97px;
863
+ }
864
+ }
811
865
  .skeleton-on-demand .on-demand-vl .grid-medium-2 {
812
866
  padding-bottom: 59px;
813
867
  }
@@ -822,6 +876,30 @@ ptc-link, ptc-square-card,
822
876
  display: flex;
823
877
  flex-direction: row;
824
878
  justify-content: space-between;
879
+ column-gap: 28px;
880
+ }
881
+ .skeleton-on-demand .on-demand-vl .grid-vl .block {
882
+ flex-basis: 100%;
883
+ }
884
+ @media only screen and (min-width: 480px) {
885
+ .skeleton-on-demand .on-demand-vl .grid-vl .block {
886
+ flex-basis: 50%;
887
+ }
888
+ }
889
+ @media only screen and (min-width: 768px) {
890
+ .skeleton-on-demand .on-demand-vl .grid-vl .block {
891
+ flex-basis: 33%;
892
+ }
893
+ }
894
+ @media only screen and (min-width: 1200px) {
895
+ .skeleton-on-demand .on-demand-vl .grid-vl .block {
896
+ flex-basis: 25%;
897
+ }
898
+ }
899
+ @media only screen and (min-width: 1440px) {
900
+ .skeleton-on-demand .on-demand-vl .grid-vl .block {
901
+ flex-basis: 20%;
902
+ }
825
903
  }
826
904
  .skeleton-on-demand .jumbotron-section {
827
905
  padding-top: 89px;
@@ -842,6 +920,49 @@ ptc-link, ptc-square-card,
842
920
  padding-bottom: 117px;
843
921
  }
844
922
  }
923
+ .skeleton-on-demand .hide-bl {
924
+ display: block;
925
+ }
926
+ .skeleton-on-demand .hide-xs {
927
+ display: none;
928
+ }
929
+ @media only screen and (min-width: 480px) {
930
+ .skeleton-on-demand .hide-xs {
931
+ display: block;
932
+ }
933
+ }
934
+ .skeleton-on-demand .hide-sm {
935
+ display: none;
936
+ }
937
+ @media only screen and (min-width: 768px) {
938
+ .skeleton-on-demand .hide-sm {
939
+ display: block;
940
+ }
941
+ }
942
+ .skeleton-on-demand .hide-md {
943
+ display: none;
944
+ }
945
+ @media only screen and (min-width: 992px) {
946
+ .skeleton-on-demand .hide-md {
947
+ display: block;
948
+ }
949
+ }
950
+ .skeleton-on-demand .hide-lg {
951
+ display: none;
952
+ }
953
+ @media only screen and (min-width: 1200px) {
954
+ .skeleton-on-demand .hide-lg {
955
+ display: block;
956
+ }
957
+ }
958
+ .skeleton-on-demand .hide-xl {
959
+ display: none;
960
+ }
961
+ @media only screen and (min-width: 1440px) {
962
+ .skeleton-on-demand .hide-xl {
963
+ display: block;
964
+ }
965
+ }
845
966
  .skeleton-on-demand .block .block-1 {
846
967
  width: 316px;
847
968
  height: 501px;
@@ -995,172 +1116,127 @@ ptc-link, ptc-square-card,
995
1116
  }
996
1117
  }
997
1118
  .skeleton-on-demand .block .block-6 {
998
- width: 330px;
1119
+ width: auto;
999
1120
  height: 173px;
1000
1121
  border-radius: 12px;
1001
1122
  }
1002
1123
  @media only screen and (min-width: 480px) {
1003
1124
  .skeleton-on-demand .block .block-6 {
1004
- width: 432px;
1005
1125
  height: 173px;
1006
1126
  }
1007
1127
  }
1008
1128
  @media only screen and (min-width: 768px) {
1009
1129
  .skeleton-on-demand .block .block-6 {
1010
- width: 704px;
1011
1130
  height: 173px;
1012
1131
  }
1013
1132
  }
1014
1133
  @media only screen and (min-width: 992px) {
1015
1134
  .skeleton-on-demand .block .block-6 {
1016
- width: 211.985px;
1017
1135
  height: 161.633px;
1018
1136
  }
1019
1137
  }
1020
1138
  @media only screen and (min-width: 1200px) {
1021
1139
  .skeleton-on-demand .block .block-6 {
1022
- width: 260.619px;
1023
1140
  height: 187.869px;
1024
1141
  }
1025
1142
  }
1026
1143
  @media only screen and (min-width: 1440px) {
1027
1144
  .skeleton-on-demand .block .block-6 {
1028
- width: 316px;
1029
1145
  height: 220px;
1030
1146
  }
1031
1147
  }
1032
1148
  @media only screen and (min-width: 1600px) {
1033
1149
  .skeleton-on-demand .block .block-6 {
1034
- width: 442.164px;
1035
1150
  height: 291.109px;
1036
1151
  }
1037
1152
  }
1038
1153
  .skeleton-on-demand .block .block-7 {
1039
- width: 87.264px;
1154
+ width: auto;
1040
1155
  height: 114px;
1041
1156
  border-radius: 12px;
1042
1157
  }
1043
1158
  @media only screen and (min-width: 480px) {
1044
1159
  .skeleton-on-demand .block .block-7 {
1045
- width: 114px;
1046
1160
  height: 114px;
1047
1161
  }
1048
1162
  }
1049
1163
  @media only screen and (min-width: 768px) {
1050
1164
  .skeleton-on-demand .block .block-7 {
1051
- width: 114px;
1052
1165
  height: 114px;
1053
1166
  }
1054
1167
  }
1055
1168
  @media only screen and (min-width: 992px) {
1056
1169
  .skeleton-on-demand .block .block-7 {
1057
- width: 76.476px;
1058
1170
  height: 83.755px;
1059
1171
  }
1060
1172
  }
1061
1173
  @media only screen and (min-width: 1200px) {
1062
1174
  .skeleton-on-demand .block .block-7 {
1063
- width: 94.021px;
1064
1175
  height: 97.35px;
1065
1176
  }
1066
1177
  }
1067
1178
  @media only screen and (min-width: 1440px) {
1068
1179
  .skeleton-on-demand .block .block-7 {
1069
- width: 114px;
1180
+ width: auto;
1070
1181
  height: 114px;
1071
1182
  }
1072
1183
  }
1073
1184
  @media only screen and (min-width: 1600px) {
1074
1185
  .skeleton-on-demand .block .block-7 {
1075
- width: 159.42px;
1186
+ width: auto;
1076
1187
  height: 150.848px;
1077
1188
  }
1078
1189
  }
1079
1190
  .skeleton-on-demand .block .block-8 {
1080
1191
  border-radius: 12px;
1081
- width: 328px;
1192
+ width: auto;
1082
1193
  height: 138px;
1083
- display: none;
1084
1194
  margin-bottom: 12px;
1085
1195
  }
1086
1196
  @media only screen and (min-width: 480px) {
1087
1197
  .skeleton-on-demand .block .block-8 {
1088
- width: 203.048px;
1089
1198
  height: 138px;
1090
1199
  }
1091
1200
  }
1092
1201
  @media only screen and (min-width: 768px) {
1093
1202
  .skeleton-on-demand .block .block-8 {
1094
- width: 216.524px;
1095
1203
  height: 138px;
1096
1204
  }
1097
1205
  }
1098
1206
  @media only screen and (min-width: 992px) {
1099
1207
  .skeleton-on-demand .block .block-8 {
1100
- width: 279px;
1101
1208
  height: 138px;
1102
1209
  }
1103
1210
  }
1104
1211
  @media only screen and (min-width: 1200px) {
1105
1212
  .skeleton-on-demand .block .block-8 {
1106
- width: 255px;
1107
1213
  height: 138px;
1108
1214
  }
1109
1215
  }
1110
1216
  @media only screen and (min-width: 1440px) {
1111
1217
  .skeleton-on-demand .block .block-8 {
1112
- width: 246px;
1113
1218
  height: 159px;
1114
1219
  }
1115
1220
  }
1116
1221
  @media only screen and (min-width: 1600px) {
1117
1222
  .skeleton-on-demand .block .block-8 {
1118
- width: 344.545px;
1119
1223
  height: 159px;
1120
1224
  }
1121
1225
  }
1122
1226
  .skeleton-on-demand .block .block-9 {
1123
1227
  border-radius: 12px;
1124
- width: 328px;
1228
+ width: auto;
1125
1229
  height: 381px;
1126
- display: none;
1127
1230
  margin-bottom: 12px;
1128
1231
  }
1129
1232
  @media only screen and (min-width: 480px) {
1130
1233
  .skeleton-on-demand .block .block-9 {
1131
- width: 203.048px;
1132
1234
  height: 381px;
1133
1235
  }
1134
1236
  }
1135
- @media only screen and (min-width: 768px) {
1136
- .skeleton-on-demand .block .block-9 {
1137
- width: 216.524px;
1138
- }
1139
- }
1140
- @media only screen and (min-width: 992px) {
1141
- .skeleton-on-demand .block .block-9 {
1142
- width: 279px;
1143
- }
1144
- }
1145
- @media only screen and (min-width: 1200px) {
1146
- .skeleton-on-demand .block .block-9 {
1147
- width: 255px;
1148
- }
1149
- }
1150
- @media only screen and (min-width: 1440px) {
1151
- .skeleton-on-demand .block .block-9 {
1152
- width: 246px;
1153
- }
1154
- }
1155
- @media only screen and (min-width: 1600px) {
1156
- .skeleton-on-demand .block .block-9 {
1157
- width: 344.545px;
1158
- }
1159
- }
1160
1237
  .skeleton-on-demand .block .block-10 {
1161
1238
  border-radius: 12px;
1162
1239
  height: 268px;
1163
- display: none;
1164
1240
  }
1165
1241
  @media only screen and (min-width: 1600px) {
1166
1242
  .skeleton-on-demand .block .block-10 {
@@ -1176,34 +1252,6 @@ ptc-link, ptc-square-card,
1176
1252
  height: 141.829px;
1177
1253
  }
1178
1254
  }
1179
- .skeleton-on-demand .block .hide-bl {
1180
- display: block;
1181
- }
1182
- @media only screen and (min-width: 480px) {
1183
- .skeleton-on-demand .block .hide-xs {
1184
- display: block;
1185
- }
1186
- }
1187
- @media only screen and (min-width: 768px) {
1188
- .skeleton-on-demand .block .hide-sm {
1189
- display: block;
1190
- }
1191
- }
1192
- @media only screen and (min-width: 992px) {
1193
- .skeleton-on-demand .block .hide-md {
1194
- display: block;
1195
- }
1196
- }
1197
- @media only screen and (min-width: 1200px) {
1198
- .skeleton-on-demand .block .hide-lg {
1199
- display: block;
1200
- }
1201
- }
1202
- @media only screen and (min-width: 1440px) {
1203
- .skeleton-on-demand .block .hide-xl {
1204
- display: block;
1205
- }
1206
- }
1207
1255
 
1208
1256
  .section-two-col {
1209
1257
  padding-top: 76px;
@@ -49,10 +49,10 @@ export class PtcPreloaderSection {
49
49
  return (h("div", { class: "preloader-wrapper skeleton-on-demand" }, h("div", { class: "ptc-container " }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg is-centered jumbotron-section" }, h("div", { class: "is-col-12" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin center narrow" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block thick center medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin center wide" }), h("div", { class: "skeleton-block thin center long" }), h("div", { class: "skeleton-block thin medium center" })))), h("div", { class: "is-grid has-col-gap-lg has-row-gap-lg" }, h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-1 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-1 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-1 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-2 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-2 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-2 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-3 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-3 skeleton-block" })), h("div", { class: "is-col-12-xs is-col-6-md is-col-4-xl block is-placed-center" }, h("div", { class: "block-3 skeleton-block" }))))));
50
50
  }
51
51
  case 'on-demand-video-landing': {
52
- return (h("div", { class: "preloader-wrapper" }, h("div", { class: "ptc-container-lg skeleton-on-demand" }, h("div", { class: "skeleton" }, h("ptc-spacer", { breakpoint: "x-large", size: "small", class: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium", class: "medium" }), h("div", { class: "skeleton-block thin left narrow" }), h("ptc-spacer", { breakpoint: "x-large", size: "small", class: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium", class: "medium" })), h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "grid-left is-col-12-xs is-col-8-lg is-col-9-xl" }, h("div", { class: "is-grid has-row-gap-lg" }, h("div", { class: "is-col-12 block" }, h("div", { class: "block-4 skeleton-block" })), h("div", { class: "is-col-12" }, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-6 block is-placed-left" }, h("div", { class: "block-5 skeleton-block" })), h("div", { class: "is-col-6 block is-placed-right" }, h("div", { class: "block-5 skeleton-block" })))))), h("div", { class: "grid-right is-col-12-xs is-col-4-lg is-col-3-xl" }, h("div", { class: "block" }, h("div", { class: "block-6 skeleton-block" })), h("ptc-spacer", { breakpoint: "small", size: "large", class: "large" }), h("div", { class: "skeleton-block thin left wide" }), h("ptc-spacer", { breakpoint: "small", size: "small", class: "small" }), h("div", { class: "is-grid has-row-gap-sm" }, Array.from({ length: 7 }).map(() => (h("div", { class: "is-col-12" }, h("div", { class: "is-grid has-row-gap-md has-col-gap" }, h("div", { class: "is-col-4 block is-placed-left" }, h("div", { class: "block-7 skeleton-block" })), h("div", { class: "is-col-8 skeleton centered padding-left-sm" }, h("div", { class: "skeleton-block thin left" }), h("div", { class: "skeleton-block thin medium left" }))))))))))));
52
+ return (h("div", { class: "preloader-wrapper skeleton-on-demand" }, h("div", { class: "ptc-container-lg" }, h("div", { class: "skeleton" }, h("ptc-spacer", { breakpoint: "x-large", size: "small", class: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium", class: "medium" }), h("div", { class: "skeleton-block thin left narrow" }), h("ptc-spacer", { breakpoint: "x-large", size: "small", class: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium", class: "medium" })), h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "grid-left is-col-12-xs is-col-8-lg is-col-9-xl" }, h("div", { class: "is-grid has-row-gap-lg" }, h("div", { class: "is-col-12 block" }, h("div", { class: "block-4 skeleton-block" })), h("div", { class: "is-col-12" }, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-6 block is-placed-left" }, h("div", { class: "block-5 skeleton-block" })), h("div", { class: "is-col-6 block is-placed-right" }, h("div", { class: "block-5 skeleton-block" })))))), h("div", { class: "grid-right is-col-12-xs is-col-4-lg is-col-3-xl" }, h("div", { class: "block" }, h("div", { class: "block-6 skeleton-block" })), h("ptc-spacer", { breakpoint: "small", size: "large", class: "large" }), h("div", { class: "skeleton-block thin left wide" }), h("ptc-spacer", { breakpoint: "small", size: "small", class: "small" }), h("div", { class: "is-grid has-row-gap-sm" }, Array.from({ length: 7 }).map(() => (h("div", { class: "is-col-12 is-col-6-md is-col-12-lg" }, h("div", { class: "is-grid has-row-gap-md has-col-gap" }, h("div", { class: "is-col-4 is-col-5-xl block is-placed-left" }, h("div", { class: "block-7 skeleton-block" })), h("div", { class: "is-col-8 is-col-7-xl skeleton centered padding-left-sm" }, h("div", { class: "skeleton-block thin left" }), h("div", { class: "skeleton-block thin medium left" }))))))))))));
53
53
  }
54
54
  case 'on-demand-video-listing': {
55
- return (h("div", { class: "preloader-wrapper" }, h("div", { class: "ptc-container-lg skeleton-on-demand" }, h("div", { class: "skeleton" }, h("div", { class: "on-demand-vl" }, h("div", { class: "is-grid block grid-top" }, h("div", { class: "is-col-6 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin medium left" }))), h("div", { class: "is-col-6 is-placed-right" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick medium right" })))), h("div", { class: "is-grid block" }, h("div", { class: "is-col-12 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick short left" }), h("div", { class: "skeleton-block thin wide-sm-1 left" }), h("div", { class: "skeleton-block thin wide-md left" }), h("div", { class: "skeleton-block thin wide-md-1 left" }), h("div", { class: "skeleton-block thin wide-md left" }), h("div", { class: "skeleton-block thin wide-sm-2 left" }), h("div", { class: "skeleton-block thin smallest left" })))), h("div", { class: "grid-medium" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-bl" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-xs" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-sm" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-lg" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-xl" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })))), h("div", { class: "grid-medium-2" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-9 hide-bl" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-9 hide-xs" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-9 hide-sm" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-9 hide-lg" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-9 hide-xl" })))), h("div", { class: "grid-bottom-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "is-grid has-col-gap-sm" }, h("div", { class: "is-col-12-xs is-col-6-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-10 hide-bl" }))), h("div", { class: "is-col-12-xs is-col-6-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-10 hide-sm" }))))), h("div", { class: "grid-bottom-2" }, h("div", { class: "is-grid" }, h("div", { class: "is-col-12" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-11" }))))), h("div", { class: "grid-bottom" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-bl" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-xs" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-sm" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-lg" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block" }, h("div", { class: "skeleton-block block-8 hide-xl" }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })))))))));
55
+ return (h("div", { class: "preloader-wrapper skeleton-on-demand" }, h("div", { class: "ptc-container-lg" }, h("div", { class: "skeleton" }, h("div", { class: "on-demand-vl" }, h("div", { class: "is-grid block grid-top" }, h("div", { class: "is-col-6 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin medium-1 left" }))), h("div", { class: "is-col-6 is-placed-right" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick medium-1 right" })))), h("div", { class: "is-grid block" }, h("div", { class: "is-col-12 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick short left" }), h("div", { class: "skeleton-block thin wide-sm-1 left" }), h("div", { class: "skeleton-block thin wide-md left" }), h("div", { class: "skeleton-block thin wide-md-1 left" }), h("div", { class: "skeleton-block thin wide-md left" }), h("div", { class: "skeleton-block thin wide-sm-2 left" }), h("div", { class: "skeleton-block thin smallest left" })))), h("div", { class: "grid-medium" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block hide-bl" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-xs" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-sm" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-lg" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-xl" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })))), h("div", { class: "grid-medium-2" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block hide-bl" }, h("div", { class: "skeleton-block block-9 " })), h("div", { class: "block hide-xs" }, h("div", { class: "skeleton-block block-9 " })), h("div", { class: "block hide-sm" }, h("div", { class: "skeleton-block block-9 " })), h("div", { class: "block hide-lg" }, h("div", { class: "skeleton-block block-9 " })), h("div", { class: "block hide-xl" }, h("div", { class: "skeleton-block block-9 " })))), h("div", { class: "grid-bottom-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "is-grid has-col-gap-sm" }, h("div", { class: "is-col-12-xs is-col-6-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-10 hide-bl" }))), h("div", { class: "is-col-12-xs is-col-6-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-10 hide-sm" }))))), h("div", { class: "grid-bottom-2" }, h("div", { class: "is-grid" }, h("div", { class: "is-col-12" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-11" }))))), h("div", { class: "grid-bottom" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block hide-bl" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-xs" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-sm" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-lg" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-xl" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })))))))));
56
56
  }
57
57
  default:
58
58
  return (h("div", { class: "ptc-section-standard preload-min-height" }, h("div", { class: "ptc-container" }, h("max-width-container", { "max-width": "960", breakpoint: 1200 }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block wide bold" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block narrow" }), h("div", { class: "skeleton-block short" })), h("div", { class: "skeleton-image" }), h("div", { class: "skeleton-text" }, h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block narrow" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block short bold" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" })))))));
@@ -42,7 +42,7 @@ export class PtcSocialIconsFooter {
42
42
  modal.show = true;
43
43
  }
44
44
  render() {
45
- return (h(Host, null, h("slot", null), h("ul", null, this.instagramUrl && h("li", { id: "footerInstagramIconID" }, " ", h("a", { href: this.instagramUrl, title: 'Instagram', innerHTML: this.instagramImageUrl == "" ? instagramSVG : "", target: this.target }, this.instagramImageUrl != "" && h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt })), " "), this.facebookUrl && h("li", { id: "footerFacebookIconID" }, " ", h("a", { href: this.facebookUrl, title: 'Facebook', innerHTML: this.facebookImageUrl == "" ? facebookSVG : "", target: this.target }, this.facebookImageUrl != "" && h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt })), " "), this.linkedinUrl && h("li", { id: "footerLinkedInIconID" }, " ", h("a", { href: this.linkedinUrl, title: 'LinkedIn', innerHTML: this.linkedinImageUrl == "" ? linkedinSVG : "", target: this.target }, this.linkedinImageUrl != "" && h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt })), " "), this.xUrl && h("li", { id: "footerXIconID" }, " ", h("a", { href: this.xUrl, title: 'X', innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && h("img", { src: this.xImageUrl, alt: this.xImageAlt })), " "), this.youtubeUrl && h("li", { id: "footerYouTubeIconID" }, " ", h("a", { href: this.youtubeUrl, title: 'Youtube', innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt })), " "), this.weiboUrl && h("li", { id: "footerWeiboIconID" }, " ", h("a", { href: this.weiboUrl, title: 'Weibo', innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && h("img", { src: this.weiboImageUrl, alt: this.wechatQrImageAltText })), " "), this.youkuUrl && h("li", { id: "footerYouKuIconID" }, " ", h("a", { href: this.youkuUrl, title: 'Youku', innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt })), " "), this.wechatQrImageUrl && h("li", { id: "footerWeChatIconID" }, " ", h("a", { href: "#", onClick: (Event) => { this.openModal(Event); }, title: this.wechatImageAlt != "" ? this.wechatImageAlt : "WeChat", innerHTML: this.wechatImageUrl == "" ? wechatSVG : "" }, this.wechatImageUrl != "" && h("img", { src: this.wechatImageUrl, alt: this.wechatImageAlt })), " ")), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: '.wrapper .modal-popup .modal-body { padding-bottom: 40px}' }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": '250', "image-alignment": 'center', styles: 'img{margin:auto}' }))));
45
+ return (h(Host, null, h("slot", null), h("ul", null, this.instagramUrl && h("li", { id: "footerInstagramIconID" }, " ", h("a", { href: this.instagramUrl, title: 'Instagram', innerHTML: this.instagramImageUrl == "" ? instagramSVG : "", target: this.target }, this.instagramImageUrl != "" && h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt })), " "), this.facebookUrl && h("li", { id: "footerFacebookIconID" }, " ", h("a", { href: this.facebookUrl, title: 'Facebook', innerHTML: this.facebookImageUrl == "" ? facebookSVG : "", target: this.target }, this.facebookImageUrl != "" && h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt })), " "), this.linkedinUrl && h("li", { id: "footerLinkedInIconID" }, " ", h("a", { href: this.linkedinUrl, title: this.linkedinImageAlt, innerHTML: this.linkedinImageUrl == "" ? linkedinSVG : "", target: this.target }, this.linkedinImageUrl != "" && h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt })), " "), this.xUrl && h("li", { id: "footerXIconID" }, " ", h("a", { href: this.xUrl, title: 'X', innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && h("img", { src: this.xImageUrl, alt: this.xImageAlt })), " "), this.youtubeUrl && h("li", { id: "footerYouTubeIconID" }, " ", h("a", { href: this.youtubeUrl, title: 'Youtube', innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt })), " "), this.weiboUrl && h("li", { id: "footerWeiboIconID" }, " ", h("a", { href: this.weiboUrl, title: 'Weibo', innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && h("img", { src: this.weiboImageUrl, alt: this.wechatQrImageAltText })), " "), this.youkuUrl && h("li", { id: "footerYouKuIconID" }, " ", h("a", { href: this.youkuUrl, title: 'Youku', innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt })), " "), this.wechatQrImageUrl && h("li", { id: "footerWeChatIconID" }, " ", h("a", { href: "#", onClick: (Event) => { this.openModal(Event); }, title: this.wechatImageAlt != "" ? this.wechatImageAlt : "WeChat", innerHTML: this.wechatImageUrl == "" ? wechatSVG : "" }, this.wechatImageUrl != "" && h("img", { src: this.wechatImageUrl, alt: this.wechatImageAlt })), " ")), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: '.wrapper .modal-popup .modal-body { padding-bottom: 40px}' }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": '250', "image-alignment": 'center', styles: 'img{margin:auto}' }))));
46
46
  }
47
47
  static get is() { return "ptc-social-icons-footer"; }
48
48
  static get encapsulation() { return "shadow"; }