@saasquatch/squatch-js 2.8.2-20 → 2.8.2-22
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.
- package/dist/squatch.cjs.js +346 -76
- package/dist/squatch.cjs.js.map +1 -1
- package/dist/squatch.esm.js +346 -76
- package/dist/squatch.esm.js.map +1 -1
- package/dist/squatch.js +346 -76
- package/dist/squatch.js.map +1 -1
- package/dist/squatch.min.js +1 -1
- package/package.json +1 -1
package/dist/squatch.cjs.js
CHANGED
|
@@ -1118,72 +1118,6 @@ class EmbedWidget extends Widget {
|
|
|
1118
1118
|
this.container = container;
|
|
1119
1119
|
}
|
|
1120
1120
|
}
|
|
1121
|
-
//Old code for testing
|
|
1122
|
-
// async load() {
|
|
1123
|
-
// const brandingConfig = this.context.widgetConfig?.values?.brandingConfig;
|
|
1124
|
-
// const sizes = brandingConfig?.widgetSize?.embeddedWidgets;
|
|
1125
|
-
// const maxWidth = sizes?.maxWidth ? formatWidth(sizes.maxWidth) : "";
|
|
1126
|
-
// const minWidth = sizes?.minWidth ? formatWidth(sizes.minWidth) : "";
|
|
1127
|
-
// const frame = this._createFrame({ minWidth, maxWidth });
|
|
1128
|
-
// const element = this._findElement();
|
|
1129
|
-
// if (this.context?.container) {
|
|
1130
|
-
// // Custom container is used
|
|
1131
|
-
// element.style.visibility = "hidden";
|
|
1132
|
-
// element.style.height = "0";
|
|
1133
|
-
// element.style["overflow-y"] = "hidden";
|
|
1134
|
-
// }
|
|
1135
|
-
// if (this.container) {
|
|
1136
|
-
// if (element.shadowRoot) {
|
|
1137
|
-
// if (element.shadowRoot.lastChild?.nodeName === "IFRAME") {
|
|
1138
|
-
// element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
|
|
1139
|
-
// } else {
|
|
1140
|
-
// element.shadowRoot.appendChild(frame);
|
|
1141
|
-
// }
|
|
1142
|
-
// }
|
|
1143
|
-
// // Widget reloaded - replace existing element
|
|
1144
|
-
// else if (element.firstChild) {
|
|
1145
|
-
// element.replaceChild(frame, element.firstChild);
|
|
1146
|
-
// // Add iframe for the first time
|
|
1147
|
-
// } else {
|
|
1148
|
-
// element.appendChild(frame);
|
|
1149
|
-
// }
|
|
1150
|
-
// } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
|
|
1151
|
-
// element.appendChild(frame);
|
|
1152
|
-
// }
|
|
1153
|
-
// const { contentWindow } = frame;
|
|
1154
|
-
// if (!contentWindow) {
|
|
1155
|
-
// throw new Error("Frame needs a content window");
|
|
1156
|
-
// }
|
|
1157
|
-
// const frameDoc = contentWindow.document;
|
|
1158
|
-
// frameDoc.open();
|
|
1159
|
-
// frameDoc.write(this.content);
|
|
1160
|
-
// frameDoc.write(
|
|
1161
|
-
// `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
|
|
1162
|
-
// );
|
|
1163
|
-
// frameDoc.close();
|
|
1164
|
-
// domready(frameDoc, async () => {
|
|
1165
|
-
// const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
|
|
1166
|
-
// // @ts-ignore -- number will be cast to string by browsers
|
|
1167
|
-
// frame.height = frameDoc.body.scrollHeight;
|
|
1168
|
-
// // Adjust frame height when size of body changes
|
|
1169
|
-
// /* istanbul ignore next: hard to test */
|
|
1170
|
-
// const ro = new contentWindow["ResizeObserver"]((entries) => {
|
|
1171
|
-
// for (const entry of entries) {
|
|
1172
|
-
// const { height } = entry.contentRect;
|
|
1173
|
-
// // @ts-ignore -- number will be cast to string by browsers
|
|
1174
|
-
// frame.height = height;
|
|
1175
|
-
// }
|
|
1176
|
-
// });
|
|
1177
|
-
// const container = await this._findInnerContainer(frame);
|
|
1178
|
-
// ro.observe(container);
|
|
1179
|
-
// if (this._shouldFireLoadEvent()) {
|
|
1180
|
-
// this._loadEvent(_sqh);
|
|
1181
|
-
// _log("loaded");
|
|
1182
|
-
// } else if (frameDoc) {
|
|
1183
|
-
// this._attachLoadEventListener(frameDoc, _sqh);
|
|
1184
|
-
// }
|
|
1185
|
-
// });
|
|
1186
|
-
// }
|
|
1187
1121
|
async load() {
|
|
1188
1122
|
var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
1189
1123
|
const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
|
|
@@ -1194,11 +1128,6 @@ class EmbedWidget extends Widget {
|
|
|
1194
1128
|
const sizes = (_h = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _h.embeddedWidgets;
|
|
1195
1129
|
const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
|
|
1196
1130
|
const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
|
|
1197
|
-
console.log({
|
|
1198
|
-
brandingConfig,
|
|
1199
|
-
initialHeight,
|
|
1200
|
-
widgetConfig: this.context.widgetConfig
|
|
1201
|
-
});
|
|
1202
1131
|
const frame = this._createFrame({
|
|
1203
1132
|
minWidth,
|
|
1204
1133
|
maxWidth,
|
|
@@ -1933,6 +1862,351 @@ function _getAutoConfig() {
|
|
|
1933
1862
|
}
|
|
1934
1863
|
};
|
|
1935
1864
|
}
|
|
1865
|
+
const getSkeleton = ({
|
|
1866
|
+
height = "500px",
|
|
1867
|
+
skeletonBackgroundColor = "#e0e0e0",
|
|
1868
|
+
skeletonShimmerColor = "#f5f5f5",
|
|
1869
|
+
borderColor = "#ccc"
|
|
1870
|
+
}) => {
|
|
1871
|
+
return `
|
|
1872
|
+
<style>
|
|
1873
|
+
* {
|
|
1874
|
+
box-sizing: border-box;
|
|
1875
|
+
padding: 0;
|
|
1876
|
+
margin: 0;
|
|
1877
|
+
}
|
|
1878
|
+
|
|
1879
|
+
.widget-container {
|
|
1880
|
+
background: white;
|
|
1881
|
+
width: 100%;
|
|
1882
|
+
max-width: 900px;
|
|
1883
|
+
padding: 40px;
|
|
1884
|
+
border-radius: 12px;
|
|
1885
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
1886
|
+
box-sizing: border-box;
|
|
1887
|
+
}
|
|
1888
|
+
|
|
1889
|
+
@keyframes shimmer {
|
|
1890
|
+
0% {
|
|
1891
|
+
background-position: -100% 0;
|
|
1892
|
+
}
|
|
1893
|
+
100% {
|
|
1894
|
+
background-position: 100% 0;
|
|
1895
|
+
}
|
|
1896
|
+
}
|
|
1897
|
+
|
|
1898
|
+
.skeleton {
|
|
1899
|
+
background: ${skeletonBackgroundColor};
|
|
1900
|
+
background: linear-gradient(
|
|
1901
|
+
90deg,
|
|
1902
|
+
${skeletonBackgroundColor} 25%,
|
|
1903
|
+
${skeletonShimmerColor} 50%,
|
|
1904
|
+
${skeletonBackgroundColor} 75%
|
|
1905
|
+
);
|
|
1906
|
+
background-size: 200% 100%;
|
|
1907
|
+
animation: shimmer 1.5s infinite linear;
|
|
1908
|
+
border-radius: 6px;
|
|
1909
|
+
margin-bottom: 12px;
|
|
1910
|
+
}
|
|
1911
|
+
|
|
1912
|
+
.sk-title-lg {
|
|
1913
|
+
height: 36px;
|
|
1914
|
+
width: 50%;
|
|
1915
|
+
margin-bottom: 16px;
|
|
1916
|
+
}
|
|
1917
|
+
.sk-title-md {
|
|
1918
|
+
height: 28px;
|
|
1919
|
+
width: 30%;
|
|
1920
|
+
margin-bottom: 20px;
|
|
1921
|
+
margin-top: 40px;
|
|
1922
|
+
}
|
|
1923
|
+
.sk-text {
|
|
1924
|
+
height: 16px;
|
|
1925
|
+
width: 80%;
|
|
1926
|
+
margin-bottom: 8px;
|
|
1927
|
+
}
|
|
1928
|
+
.sk-text-short {
|
|
1929
|
+
width: 40%;
|
|
1930
|
+
}
|
|
1931
|
+
.sk-label {
|
|
1932
|
+
height: 14px;
|
|
1933
|
+
width: 25%;
|
|
1934
|
+
margin-bottom: 10px;
|
|
1935
|
+
}
|
|
1936
|
+
|
|
1937
|
+
.hero-section {
|
|
1938
|
+
display: flex;
|
|
1939
|
+
gap: 40px;
|
|
1940
|
+
margin-bottom: 40px;
|
|
1941
|
+
border-bottom: 1px solid ${borderColor};
|
|
1942
|
+
padding-bottom: 40px;
|
|
1943
|
+
flex-direction: row;
|
|
1944
|
+
}
|
|
1945
|
+
.hero-content {
|
|
1946
|
+
flex: 1;
|
|
1947
|
+
display: flex;
|
|
1948
|
+
flex-direction: column;
|
|
1949
|
+
justify-content: center;
|
|
1950
|
+
}
|
|
1951
|
+
.hero-image {
|
|
1952
|
+
flex: 1;
|
|
1953
|
+
height: 300px;
|
|
1954
|
+
border-radius: 12px;
|
|
1955
|
+
}
|
|
1956
|
+
|
|
1957
|
+
.share-section {
|
|
1958
|
+
margin-bottom: 40px;
|
|
1959
|
+
}
|
|
1960
|
+
.sk-input {
|
|
1961
|
+
height: 50px;
|
|
1962
|
+
width: 100%;
|
|
1963
|
+
border-radius: 8px;
|
|
1964
|
+
margin-bottom: 16px;
|
|
1965
|
+
}
|
|
1966
|
+
.social-buttons {
|
|
1967
|
+
display: flex;
|
|
1968
|
+
gap: 12px;
|
|
1969
|
+
}
|
|
1970
|
+
.sk-btn-social {
|
|
1971
|
+
flex: 1;
|
|
1972
|
+
height: 50px;
|
|
1973
|
+
border-radius: 8px;
|
|
1974
|
+
}
|
|
1975
|
+
|
|
1976
|
+
.stats-section {
|
|
1977
|
+
display: flex;
|
|
1978
|
+
gap: 24px;
|
|
1979
|
+
margin-bottom: 40px;
|
|
1980
|
+
padding: 30px 0;
|
|
1981
|
+
border-top: 1px solid ${borderColor};
|
|
1982
|
+
border-bottom: 1px solid ${borderColor};
|
|
1983
|
+
}
|
|
1984
|
+
.stat-card {
|
|
1985
|
+
flex: 1;
|
|
1986
|
+
display: flex;
|
|
1987
|
+
flex-direction: column;
|
|
1988
|
+
align-items: center;
|
|
1989
|
+
}
|
|
1990
|
+
.stat-divider {
|
|
1991
|
+
padding-left: 24px;
|
|
1992
|
+
}
|
|
1993
|
+
|
|
1994
|
+
.sk-stat-num {
|
|
1995
|
+
height: 48px;
|
|
1996
|
+
width: 120px;
|
|
1997
|
+
margin-bottom: 8px;
|
|
1998
|
+
}
|
|
1999
|
+
.sk-stat-label {
|
|
2000
|
+
height: 18px;
|
|
2001
|
+
width: 80px;
|
|
2002
|
+
}
|
|
2003
|
+
|
|
2004
|
+
.table-header {
|
|
2005
|
+
display: flex;
|
|
2006
|
+
gap: 16px;
|
|
2007
|
+
margin-bottom: 16px;
|
|
2008
|
+
}
|
|
2009
|
+
.sk-th {
|
|
2010
|
+
height: 16px;
|
|
2011
|
+
}
|
|
2012
|
+
.table-row {
|
|
2013
|
+
display: flex;
|
|
2014
|
+
align-items: center;
|
|
2015
|
+
gap: 16px;
|
|
2016
|
+
padding: 16px 0;
|
|
2017
|
+
border-bottom: 1px solid ${borderColor};
|
|
2018
|
+
}
|
|
2019
|
+
|
|
2020
|
+
.col-user {
|
|
2021
|
+
flex: 2;
|
|
2022
|
+
}
|
|
2023
|
+
.col-status {
|
|
2024
|
+
flex: 1;
|
|
2025
|
+
}
|
|
2026
|
+
.col-reward {
|
|
2027
|
+
flex: 2;
|
|
2028
|
+
}
|
|
2029
|
+
.col-date {
|
|
2030
|
+
flex: 1;
|
|
2031
|
+
}
|
|
2032
|
+
|
|
2033
|
+
.sk-badge {
|
|
2034
|
+
height: 28px;
|
|
2035
|
+
width: 90px;
|
|
2036
|
+
border-radius: 14px;
|
|
2037
|
+
}
|
|
2038
|
+
.sk-reward-block {
|
|
2039
|
+
height: 36px;
|
|
2040
|
+
width: 100%;
|
|
2041
|
+
border-radius: 6px;
|
|
2042
|
+
}
|
|
2043
|
+
|
|
2044
|
+
.pagination {
|
|
2045
|
+
display: flex;
|
|
2046
|
+
justify-content: flex-end;
|
|
2047
|
+
gap: 8px;
|
|
2048
|
+
margin-top: 24px;
|
|
2049
|
+
}
|
|
2050
|
+
.sk-btn-page {
|
|
2051
|
+
height: 36px;
|
|
2052
|
+
width: 64px;
|
|
2053
|
+
border-radius: 6px;
|
|
2054
|
+
margin-bottom: 0;
|
|
2055
|
+
}
|
|
2056
|
+
|
|
2057
|
+
@media (max-width: 768px) {
|
|
2058
|
+
body {
|
|
2059
|
+
padding: 20px;
|
|
2060
|
+
}
|
|
2061
|
+
.widget-container {
|
|
2062
|
+
padding: 24px;
|
|
2063
|
+
}
|
|
2064
|
+
|
|
2065
|
+
.hero-section {
|
|
2066
|
+
flex-direction: column-reverse;
|
|
2067
|
+
gap: 24px;
|
|
2068
|
+
}
|
|
2069
|
+
.hero-image {
|
|
2070
|
+
height: 220px;
|
|
2071
|
+
width: 100%;
|
|
2072
|
+
}
|
|
2073
|
+
.sk-title-lg {
|
|
2074
|
+
width: 80%;
|
|
2075
|
+
}
|
|
2076
|
+
|
|
2077
|
+
.col-date {
|
|
2078
|
+
display: none;
|
|
2079
|
+
}
|
|
2080
|
+
}
|
|
2081
|
+
|
|
2082
|
+
@media (max-width: 480px) {
|
|
2083
|
+
body {
|
|
2084
|
+
padding: 10px;
|
|
2085
|
+
}
|
|
2086
|
+
.widget-container {
|
|
2087
|
+
padding: 16px;
|
|
2088
|
+
}
|
|
2089
|
+
|
|
2090
|
+
.sk-stat-num {
|
|
2091
|
+
width: 80px;
|
|
2092
|
+
height: 40px;
|
|
2093
|
+
}
|
|
2094
|
+
|
|
2095
|
+
.col-reward {
|
|
2096
|
+
display: none;
|
|
2097
|
+
}
|
|
2098
|
+
|
|
2099
|
+
.col-user {
|
|
2100
|
+
flex: 3;
|
|
2101
|
+
}
|
|
2102
|
+
.col-status {
|
|
2103
|
+
flex: 2;
|
|
2104
|
+
display: flex;
|
|
2105
|
+
justify-content: flex-end;
|
|
2106
|
+
}
|
|
2107
|
+
}
|
|
2108
|
+
</style>
|
|
2109
|
+
|
|
2110
|
+
<div class="widget-container">
|
|
2111
|
+
<div class="hero-section">
|
|
2112
|
+
<div class="hero-content">
|
|
2113
|
+
<div class="skeleton sk-title-lg"></div>
|
|
2114
|
+
<div class="skeleton sk-text"></div>
|
|
2115
|
+
<div class="skeleton sk-text sk-text-short"></div>
|
|
2116
|
+
</div>
|
|
2117
|
+
<div class="skeleton hero-image"></div>
|
|
2118
|
+
</div>
|
|
2119
|
+
|
|
2120
|
+
<div class="share-section">
|
|
2121
|
+
<div class="skeleton sk-label"></div>
|
|
2122
|
+
<div class="skeleton sk-input"></div>
|
|
2123
|
+
<div class="social-buttons">
|
|
2124
|
+
<div class="skeleton sk-btn-social"></div>
|
|
2125
|
+
<div class="skeleton sk-btn-social"></div>
|
|
2126
|
+
<div class="skeleton sk-btn-social"></div>
|
|
2127
|
+
<div class="skeleton sk-btn-social"></div>
|
|
2128
|
+
</div>
|
|
2129
|
+
</div>
|
|
2130
|
+
|
|
2131
|
+
<div
|
|
2132
|
+
class="skeleton sk-title-md"
|
|
2133
|
+
style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"
|
|
2134
|
+
></div>
|
|
2135
|
+
<div
|
|
2136
|
+
class="skeleton sk-text"
|
|
2137
|
+
style="width: 60%; margin-left: auto; margin-right: auto"
|
|
2138
|
+
></div>
|
|
2139
|
+
|
|
2140
|
+
<div class="stats-section">
|
|
2141
|
+
<div class="stat-card">
|
|
2142
|
+
<div class="skeleton sk-stat-num"></div>
|
|
2143
|
+
<div class="skeleton sk-stat-label"></div>
|
|
2144
|
+
</div>
|
|
2145
|
+
<div class="stat-card stat-divider">
|
|
2146
|
+
<div class="skeleton sk-stat-num"></div>
|
|
2147
|
+
<div class="skeleton sk-stat-label"></div>
|
|
2148
|
+
</div>
|
|
2149
|
+
</div>
|
|
2150
|
+
|
|
2151
|
+
<div class="skeleton sk-title-md"></div>
|
|
2152
|
+
|
|
2153
|
+
<div class="table-header">
|
|
2154
|
+
<div class="skeleton sk-th col-user"></div>
|
|
2155
|
+
<div class="skeleton sk-th col-status"></div>
|
|
2156
|
+
<div class="skeleton sk-th col-reward"></div>
|
|
2157
|
+
<div class="skeleton sk-th col-date"></div>
|
|
2158
|
+
</div>
|
|
2159
|
+
|
|
2160
|
+
<div class="table-row">
|
|
2161
|
+
<div class="col-user">
|
|
2162
|
+
<div class="skeleton sk-text" style="width: 70%; margin: 0"></div>
|
|
2163
|
+
</div>
|
|
2164
|
+
<div class="col-status">
|
|
2165
|
+
<div class="skeleton sk-badge" style="margin: 0"></div>
|
|
2166
|
+
</div>
|
|
2167
|
+
<div class="col-reward">
|
|
2168
|
+
<div class="skeleton sk-reward-block" style="margin: 0"></div>
|
|
2169
|
+
</div>
|
|
2170
|
+
<div class="col-date">
|
|
2171
|
+
<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
|
|
2172
|
+
</div>
|
|
2173
|
+
</div>
|
|
2174
|
+
<div class="table-row">
|
|
2175
|
+
<div class="col-user">
|
|
2176
|
+
<div class="skeleton sk-text" style="width: 60%; margin: 0"></div>
|
|
2177
|
+
</div>
|
|
2178
|
+
<div class="col-status">
|
|
2179
|
+
<div class="skeleton sk-badge" style="margin: 0"></div>
|
|
2180
|
+
</div>
|
|
2181
|
+
<div class="col-reward">
|
|
2182
|
+
<div class="skeleton sk-reward-block" style="margin: 0"></div>
|
|
2183
|
+
</div>
|
|
2184
|
+
<div class="col-date">
|
|
2185
|
+
<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
|
|
2186
|
+
</div>
|
|
2187
|
+
</div>
|
|
2188
|
+
<div class="table-row">
|
|
2189
|
+
<div class="col-user">
|
|
2190
|
+
<div class="skeleton sk-text" style="width: 75%; margin: 0"></div>
|
|
2191
|
+
</div>
|
|
2192
|
+
<div class="col-status">
|
|
2193
|
+
<div class="skeleton sk-badge" style="margin: 0"></div>
|
|
2194
|
+
</div>
|
|
2195
|
+
<div class="col-reward">
|
|
2196
|
+
<div class="skeleton sk-reward-block" style="margin: 0"></div>
|
|
2197
|
+
</div>
|
|
2198
|
+
<div class="col-date">
|
|
2199
|
+
<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
|
|
2200
|
+
</div>
|
|
2201
|
+
</div>
|
|
2202
|
+
|
|
2203
|
+
<div class="pagination">
|
|
2204
|
+
<div class="skeleton sk-btn-page"></div>
|
|
2205
|
+
<div class="skeleton sk-btn-page"></div>
|
|
2206
|
+
</div>
|
|
2207
|
+
</div>
|
|
2208
|
+
`;
|
|
2209
|
+
};
|
|
1936
2210
|
const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
|
|
1937
2211
|
function decodeUserJwt(tokenStr) {
|
|
1938
2212
|
var _a2;
|
|
@@ -2168,11 +2442,7 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
|
|
|
2168
2442
|
async connectedCallback() {
|
|
2169
2443
|
this.loaded = true;
|
|
2170
2444
|
this.container = this.getAttribute("container");
|
|
2171
|
-
const skeletonHTML =
|
|
2172
|
-
<div>
|
|
2173
|
-
<h1>Do I see this text ????</h1>
|
|
2174
|
-
</div>
|
|
2175
|
-
`;
|
|
2445
|
+
const skeletonHTML = getSkeleton({});
|
|
2176
2446
|
const skeletonContainer = document.createElement("div");
|
|
2177
2447
|
skeletonContainer.id = "loading-skeleton";
|
|
2178
2448
|
skeletonContainer.innerHTML = skeletonHTML;
|