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