@saasquatch/squatch-js 2.8.2-23 → 2.8.2-25
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 +343 -5
- package/dist/squatch.cjs.js.map +1 -1
- package/dist/squatch.esm.js +343 -5
- package/dist/squatch.esm.js.map +1 -1
- package/dist/squatch.js +343 -5
- package/dist/squatch.js.map +1 -1
- package/dist/squatch.min.js +1 -1
- package/package.json +1 -1
package/dist/squatch.js
CHANGED
|
@@ -1864,6 +1864,348 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
1864
1864
|
}
|
|
1865
1865
|
};
|
|
1866
1866
|
}
|
|
1867
|
+
const getSkeleton = ({
|
|
1868
|
+
height = "500px",
|
|
1869
|
+
skeletonBackgroundColor = "#e0e0e0",
|
|
1870
|
+
skeletonShimmerColor = "#f5f5f5",
|
|
1871
|
+
borderColor = "#ccc"
|
|
1872
|
+
}) => {
|
|
1873
|
+
return `
|
|
1874
|
+
<style>
|
|
1875
|
+
* {
|
|
1876
|
+
box-sizing: border-box;
|
|
1877
|
+
padding: 0;
|
|
1878
|
+
margin: 0;
|
|
1879
|
+
}
|
|
1880
|
+
|
|
1881
|
+
.widget-container {
|
|
1882
|
+
background: white;
|
|
1883
|
+
width: 100%;
|
|
1884
|
+
padding: 40px;
|
|
1885
|
+
box-sizing: border-box;
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1888
|
+
@keyframes shimmer {
|
|
1889
|
+
0% {
|
|
1890
|
+
background-position: -100% 0;
|
|
1891
|
+
}
|
|
1892
|
+
100% {
|
|
1893
|
+
background-position: 100% 0;
|
|
1894
|
+
}
|
|
1895
|
+
}
|
|
1896
|
+
|
|
1897
|
+
.skeleton {
|
|
1898
|
+
background: ${skeletonBackgroundColor};
|
|
1899
|
+
background: linear-gradient(
|
|
1900
|
+
90deg,
|
|
1901
|
+
${skeletonBackgroundColor} 25%,
|
|
1902
|
+
${skeletonShimmerColor} 50%,
|
|
1903
|
+
${skeletonBackgroundColor} 75%
|
|
1904
|
+
);
|
|
1905
|
+
background-size: 200% 100%;
|
|
1906
|
+
animation: shimmer 1.5s infinite linear;
|
|
1907
|
+
border-radius: 6px;
|
|
1908
|
+
margin-bottom: 12px;
|
|
1909
|
+
}
|
|
1910
|
+
|
|
1911
|
+
.sk-title-lg {
|
|
1912
|
+
height: 36px;
|
|
1913
|
+
width: 50%;
|
|
1914
|
+
margin-bottom: 16px;
|
|
1915
|
+
}
|
|
1916
|
+
.sk-title-md {
|
|
1917
|
+
height: 28px;
|
|
1918
|
+
width: 30%;
|
|
1919
|
+
margin-bottom: 20px;
|
|
1920
|
+
margin-top: 40px;
|
|
1921
|
+
}
|
|
1922
|
+
.sk-text {
|
|
1923
|
+
height: 16px;
|
|
1924
|
+
width: 80%;
|
|
1925
|
+
margin-bottom: 8px;
|
|
1926
|
+
}
|
|
1927
|
+
.sk-text-short {
|
|
1928
|
+
width: 40%;
|
|
1929
|
+
}
|
|
1930
|
+
.sk-label {
|
|
1931
|
+
height: 14px;
|
|
1932
|
+
width: 25%;
|
|
1933
|
+
margin-bottom: 10px;
|
|
1934
|
+
}
|
|
1935
|
+
|
|
1936
|
+
.hero-section {
|
|
1937
|
+
display: flex;
|
|
1938
|
+
gap: 40px;
|
|
1939
|
+
margin-bottom: 40px;
|
|
1940
|
+
border-bottom: 1px solid ${borderColor};
|
|
1941
|
+
padding-bottom: 40px;
|
|
1942
|
+
flex-direction: row;
|
|
1943
|
+
}
|
|
1944
|
+
.hero-content {
|
|
1945
|
+
flex: 1;
|
|
1946
|
+
display: flex;
|
|
1947
|
+
flex-direction: column;
|
|
1948
|
+
justify-content: center;
|
|
1949
|
+
}
|
|
1950
|
+
.hero-image {
|
|
1951
|
+
flex: 1;
|
|
1952
|
+
height: 300px;
|
|
1953
|
+
border-radius: 12px;
|
|
1954
|
+
}
|
|
1955
|
+
|
|
1956
|
+
.share-section {
|
|
1957
|
+
margin-bottom: 40px;
|
|
1958
|
+
}
|
|
1959
|
+
.sk-input {
|
|
1960
|
+
height: 50px;
|
|
1961
|
+
width: 100%;
|
|
1962
|
+
border-radius: 8px;
|
|
1963
|
+
margin-bottom: 16px;
|
|
1964
|
+
}
|
|
1965
|
+
.social-buttons {
|
|
1966
|
+
display: flex;
|
|
1967
|
+
gap: 12px;
|
|
1968
|
+
}
|
|
1969
|
+
.sk-btn-social {
|
|
1970
|
+
flex: 1;
|
|
1971
|
+
height: 50px;
|
|
1972
|
+
border-radius: 8px;
|
|
1973
|
+
}
|
|
1974
|
+
|
|
1975
|
+
.stats-section {
|
|
1976
|
+
display: flex;
|
|
1977
|
+
gap: 24px;
|
|
1978
|
+
margin-bottom: 40px;
|
|
1979
|
+
padding: 30px 0;
|
|
1980
|
+
border-top: 1px solid ${borderColor};
|
|
1981
|
+
border-bottom: 1px solid ${borderColor};
|
|
1982
|
+
}
|
|
1983
|
+
.stat-card {
|
|
1984
|
+
flex: 1;
|
|
1985
|
+
display: flex;
|
|
1986
|
+
flex-direction: column;
|
|
1987
|
+
align-items: center;
|
|
1988
|
+
}
|
|
1989
|
+
.stat-divider {
|
|
1990
|
+
padding-left: 24px;
|
|
1991
|
+
}
|
|
1992
|
+
|
|
1993
|
+
.sk-stat-num {
|
|
1994
|
+
height: 48px;
|
|
1995
|
+
width: 120px;
|
|
1996
|
+
margin-bottom: 8px;
|
|
1997
|
+
}
|
|
1998
|
+
.sk-stat-label {
|
|
1999
|
+
height: 18px;
|
|
2000
|
+
width: 80px;
|
|
2001
|
+
}
|
|
2002
|
+
|
|
2003
|
+
.table-header {
|
|
2004
|
+
display: flex;
|
|
2005
|
+
gap: 16px;
|
|
2006
|
+
margin-bottom: 16px;
|
|
2007
|
+
}
|
|
2008
|
+
.sk-th {
|
|
2009
|
+
height: 16px;
|
|
2010
|
+
}
|
|
2011
|
+
.table-row {
|
|
2012
|
+
display: flex;
|
|
2013
|
+
align-items: center;
|
|
2014
|
+
gap: 16px;
|
|
2015
|
+
padding: 16px 0;
|
|
2016
|
+
border-bottom: 1px solid ${borderColor};
|
|
2017
|
+
}
|
|
2018
|
+
|
|
2019
|
+
.col-user {
|
|
2020
|
+
flex: 2;
|
|
2021
|
+
}
|
|
2022
|
+
.col-status {
|
|
2023
|
+
flex: 1;
|
|
2024
|
+
}
|
|
2025
|
+
.col-reward {
|
|
2026
|
+
flex: 2;
|
|
2027
|
+
}
|
|
2028
|
+
.col-date {
|
|
2029
|
+
flex: 1;
|
|
2030
|
+
}
|
|
2031
|
+
|
|
2032
|
+
.sk-badge {
|
|
2033
|
+
height: 28px;
|
|
2034
|
+
width: 90px;
|
|
2035
|
+
border-radius: 14px;
|
|
2036
|
+
}
|
|
2037
|
+
.sk-reward-block {
|
|
2038
|
+
height: 36px;
|
|
2039
|
+
width: 100%;
|
|
2040
|
+
border-radius: 6px;
|
|
2041
|
+
}
|
|
2042
|
+
|
|
2043
|
+
.pagination {
|
|
2044
|
+
display: flex;
|
|
2045
|
+
justify-content: flex-end;
|
|
2046
|
+
gap: 8px;
|
|
2047
|
+
margin-top: 24px;
|
|
2048
|
+
}
|
|
2049
|
+
.sk-btn-page {
|
|
2050
|
+
height: 36px;
|
|
2051
|
+
width: 64px;
|
|
2052
|
+
border-radius: 6px;
|
|
2053
|
+
margin-bottom: 0;
|
|
2054
|
+
}
|
|
2055
|
+
|
|
2056
|
+
@media (max-width: 768px) {
|
|
2057
|
+
body {
|
|
2058
|
+
padding: 20px;
|
|
2059
|
+
}
|
|
2060
|
+
.widget-container {
|
|
2061
|
+
padding: 24px;
|
|
2062
|
+
}
|
|
2063
|
+
|
|
2064
|
+
.hero-section {
|
|
2065
|
+
flex-direction: column-reverse;
|
|
2066
|
+
gap: 24px;
|
|
2067
|
+
}
|
|
2068
|
+
.hero-image {
|
|
2069
|
+
height: 220px;
|
|
2070
|
+
width: 100%;
|
|
2071
|
+
}
|
|
2072
|
+
.sk-title-lg {
|
|
2073
|
+
width: 80%;
|
|
2074
|
+
}
|
|
2075
|
+
|
|
2076
|
+
.col-date {
|
|
2077
|
+
display: none;
|
|
2078
|
+
}
|
|
2079
|
+
}
|
|
2080
|
+
|
|
2081
|
+
@media (max-width: 480px) {
|
|
2082
|
+
body {
|
|
2083
|
+
padding: 10px;
|
|
2084
|
+
}
|
|
2085
|
+
.widget-container {
|
|
2086
|
+
padding: 16px;
|
|
2087
|
+
}
|
|
2088
|
+
|
|
2089
|
+
.sk-stat-num {
|
|
2090
|
+
width: 80px;
|
|
2091
|
+
height: 40px;
|
|
2092
|
+
}
|
|
2093
|
+
|
|
2094
|
+
.col-reward {
|
|
2095
|
+
display: none;
|
|
2096
|
+
}
|
|
2097
|
+
|
|
2098
|
+
.col-user {
|
|
2099
|
+
flex: 3;
|
|
2100
|
+
}
|
|
2101
|
+
.col-status {
|
|
2102
|
+
flex: 2;
|
|
2103
|
+
display: flex;
|
|
2104
|
+
justify-content: flex-end;
|
|
2105
|
+
}
|
|
2106
|
+
}
|
|
2107
|
+
</style>
|
|
2108
|
+
|
|
2109
|
+
<div class="widget-container">
|
|
2110
|
+
<div class="hero-section">
|
|
2111
|
+
<div class="hero-content">
|
|
2112
|
+
<div class="skeleton sk-title-lg"></div>
|
|
2113
|
+
<div class="skeleton sk-text"></div>
|
|
2114
|
+
<div class="skeleton sk-text sk-text-short"></div>
|
|
2115
|
+
</div>
|
|
2116
|
+
<div class="skeleton hero-image"></div>
|
|
2117
|
+
</div>
|
|
2118
|
+
|
|
2119
|
+
<div class="share-section">
|
|
2120
|
+
<div class="skeleton sk-label"></div>
|
|
2121
|
+
<div class="skeleton sk-input"></div>
|
|
2122
|
+
<div class="social-buttons">
|
|
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 class="skeleton sk-btn-social"></div>
|
|
2127
|
+
</div>
|
|
2128
|
+
</div>
|
|
2129
|
+
|
|
2130
|
+
<div
|
|
2131
|
+
class="skeleton sk-title-md"
|
|
2132
|
+
style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"
|
|
2133
|
+
></div>
|
|
2134
|
+
<div
|
|
2135
|
+
class="skeleton sk-text"
|
|
2136
|
+
style="width: 60%; margin-left: auto; margin-right: auto"
|
|
2137
|
+
></div>
|
|
2138
|
+
|
|
2139
|
+
<div class="stats-section">
|
|
2140
|
+
<div class="stat-card">
|
|
2141
|
+
<div class="skeleton sk-stat-num"></div>
|
|
2142
|
+
<div class="skeleton sk-stat-label"></div>
|
|
2143
|
+
</div>
|
|
2144
|
+
<div class="stat-card stat-divider">
|
|
2145
|
+
<div class="skeleton sk-stat-num"></div>
|
|
2146
|
+
<div class="skeleton sk-stat-label"></div>
|
|
2147
|
+
</div>
|
|
2148
|
+
</div>
|
|
2149
|
+
|
|
2150
|
+
<div class="skeleton sk-title-md"></div>
|
|
2151
|
+
|
|
2152
|
+
<div class="table-header">
|
|
2153
|
+
<div class="skeleton sk-th col-user"></div>
|
|
2154
|
+
<div class="skeleton sk-th col-status"></div>
|
|
2155
|
+
<div class="skeleton sk-th col-reward"></div>
|
|
2156
|
+
<div class="skeleton sk-th col-date"></div>
|
|
2157
|
+
</div>
|
|
2158
|
+
|
|
2159
|
+
<div class="table-row">
|
|
2160
|
+
<div class="col-user">
|
|
2161
|
+
<div class="skeleton sk-text" style="width: 70%; margin: 0"></div>
|
|
2162
|
+
</div>
|
|
2163
|
+
<div class="col-status">
|
|
2164
|
+
<div class="skeleton sk-badge" style="margin: 0"></div>
|
|
2165
|
+
</div>
|
|
2166
|
+
<div class="col-reward">
|
|
2167
|
+
<div class="skeleton sk-reward-block" style="margin: 0"></div>
|
|
2168
|
+
</div>
|
|
2169
|
+
<div class="col-date">
|
|
2170
|
+
<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
|
|
2171
|
+
</div>
|
|
2172
|
+
</div>
|
|
2173
|
+
<div class="table-row">
|
|
2174
|
+
<div class="col-user">
|
|
2175
|
+
<div class="skeleton sk-text" style="width: 60%; margin: 0"></div>
|
|
2176
|
+
</div>
|
|
2177
|
+
<div class="col-status">
|
|
2178
|
+
<div class="skeleton sk-badge" style="margin: 0"></div>
|
|
2179
|
+
</div>
|
|
2180
|
+
<div class="col-reward">
|
|
2181
|
+
<div class="skeleton sk-reward-block" style="margin: 0"></div>
|
|
2182
|
+
</div>
|
|
2183
|
+
<div class="col-date">
|
|
2184
|
+
<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
|
|
2185
|
+
</div>
|
|
2186
|
+
</div>
|
|
2187
|
+
<div class="table-row">
|
|
2188
|
+
<div class="col-user">
|
|
2189
|
+
<div class="skeleton sk-text" style="width: 75%; margin: 0"></div>
|
|
2190
|
+
</div>
|
|
2191
|
+
<div class="col-status">
|
|
2192
|
+
<div class="skeleton sk-badge" style="margin: 0"></div>
|
|
2193
|
+
</div>
|
|
2194
|
+
<div class="col-reward">
|
|
2195
|
+
<div class="skeleton sk-reward-block" style="margin: 0"></div>
|
|
2196
|
+
</div>
|
|
2197
|
+
<div class="col-date">
|
|
2198
|
+
<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
|
|
2199
|
+
</div>
|
|
2200
|
+
</div>
|
|
2201
|
+
|
|
2202
|
+
<div class="pagination">
|
|
2203
|
+
<div class="skeleton sk-btn-page"></div>
|
|
2204
|
+
<div class="skeleton sk-btn-page"></div>
|
|
2205
|
+
</div>
|
|
2206
|
+
</div>
|
|
2207
|
+
`;
|
|
2208
|
+
};
|
|
1867
2209
|
const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
|
|
1868
2210
|
function decodeUserJwt(tokenStr) {
|
|
1869
2211
|
var _a2;
|
|
@@ -2099,11 +2441,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
2099
2441
|
async connectedCallback() {
|
|
2100
2442
|
this.loaded = true;
|
|
2101
2443
|
this.container = this.getAttribute("container");
|
|
2102
|
-
const skeletonHTML =
|
|
2103
|
-
<div>
|
|
2104
|
-
<h1>Do I see this text ????</h1>
|
|
2105
|
-
</div>
|
|
2106
|
-
`;
|
|
2444
|
+
const skeletonHTML = getSkeleton({ height: "100%" });
|
|
2107
2445
|
const skeletonContainer = document.createElement("div");
|
|
2108
2446
|
skeletonContainer.id = "loading-skeleton";
|
|
2109
2447
|
skeletonContainer.innerHTML = skeletonHTML;
|