@saasquatch/squatch-js 2.8.2-23 → 2.8.2-24
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 -5
- package/dist/squatch.cjs.js.map +1 -1
- package/dist/squatch.esm.js +346 -5
- package/dist/squatch.esm.js.map +1 -1
- package/dist/squatch.js +346 -5
- 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
|
@@ -1862,6 +1862,351 @@ function _getAutoConfig() {
|
|
|
1862
1862
|
}
|
|
1863
1863
|
};
|
|
1864
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
|
+
};
|
|
1865
2210
|
const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
|
|
1866
2211
|
function decodeUserJwt(tokenStr) {
|
|
1867
2212
|
var _a2;
|
|
@@ -2097,11 +2442,7 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
|
|
|
2097
2442
|
async connectedCallback() {
|
|
2098
2443
|
this.loaded = true;
|
|
2099
2444
|
this.container = this.getAttribute("container");
|
|
2100
|
-
const skeletonHTML =
|
|
2101
|
-
<div>
|
|
2102
|
-
<h1>Do I see this text ????</h1>
|
|
2103
|
-
</div>
|
|
2104
|
-
`;
|
|
2445
|
+
const skeletonHTML = getSkeleton({ height: "100%" });
|
|
2105
2446
|
const skeletonContainer = document.createElement("div");
|
|
2106
2447
|
skeletonContainer.id = "loading-skeleton";
|
|
2107
2448
|
skeletonContainer.innerHTML = skeletonHTML;
|