@saasquatch/squatch-js 2.8.2-27 → 2.8.2-28

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.
Files changed (11) hide show
  1. package/dist/squatch.cjs.js +236 -321
  2. package/dist/squatch.cjs.js.map +1 -1
  3. package/dist/squatch.esm.js +236 -321
  4. package/dist/squatch.esm.js.map +1 -1
  5. package/dist/squatch.js +236 -321
  6. package/dist/squatch.js.map +1 -1
  7. package/dist/squatch.min.js +1 -1
  8. package/dist/widgets/SkeletonTemplate.d.ts +3 -2
  9. package/dist/widgets/declarative/DeclarativeWidget.d.ts +2 -5
  10. package/dist/widgets/declarative/DeclarativeWidgets.d.ts +2 -7
  11. package/package.json +1 -1
package/dist/squatch.cjs.js CHANGED
@@ -1863,345 +1863,261 @@ function _getAutoConfig() {
1863
1863
  };
1864
1864
  }
1865
1865
  const getSkeleton = ({
1866
+ type = "referrer",
1866
1867
  height = "500px",
1867
1868
  skeletonBackgroundColor = "#e0e0e0",
1868
- skeletonShimmerColor = "#f5f5f5",
1869
- borderColor = "#ccc"
1869
+ skeletonShimmerColor = "#f5f5f5"
1870
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
- padding: 40px;
1883
- box-sizing: border-box;
1884
- }
1885
-
1886
- @keyframes shimmer {
1887
- 0% {
1888
- background-position: -100% 0;
1889
- }
1890
- 100% {
1891
- background-position: 100% 0;
1892
- }
1893
- }
1871
+ const referrerHTML = `
1872
+ <div class="hero-section">
1873
+ <div class="hero-content">
1874
+ <div class="skeleton sk-title-lg"></div>
1875
+ <div class="skeleton sk-text"></div>
1876
+ <div class="skeleton sk-text sk-text-short"></div>
1877
+ </div>
1878
+ <div class="skeleton hero-image"></div>
1879
+ </div>
1894
1880
 
1895
- .skeleton {
1896
- background: ${skeletonBackgroundColor};
1897
- background: linear-gradient(
1898
- 90deg,
1899
- ${skeletonBackgroundColor} 25%,
1900
- ${skeletonShimmerColor} 50%,
1901
- ${skeletonBackgroundColor} 75%
1902
- );
1903
- background-size: 200% 100%;
1904
- animation: shimmer 1.5s infinite linear;
1905
- border-radius: 6px;
1906
- margin-bottom: 12px;
1907
- }
1881
+ <div class="share-section">
1882
+ <div class="skeleton sk-label"></div>
1883
+ <div class="skeleton sk-input"></div>
1884
+ <div class="social-buttons">
1885
+ <div class="skeleton sk-btn-social"></div>
1886
+ <div class="skeleton sk-btn-social"></div>
1887
+ <div class="skeleton sk-btn-social"></div>
1888
+ <div class="skeleton sk-btn-social"></div>
1889
+ </div>
1890
+ </div>
1908
1891
 
1909
- .sk-title-lg {
1910
- height: 36px;
1911
- width: 50%;
1912
- margin-bottom: 16px;
1913
- }
1914
- .sk-title-md {
1915
- height: 28px;
1916
- width: 30%;
1917
- margin-bottom: 20px;
1918
- margin-top: 40px;
1919
- }
1920
- .sk-text {
1921
- height: 16px;
1922
- width: 80%;
1923
- margin-bottom: 8px;
1924
- }
1925
- .sk-text-short {
1926
- width: 40%;
1927
- }
1928
- .sk-label {
1929
- height: 14px;
1930
- width: 25%;
1931
- margin-bottom: 10px;
1932
- }
1892
+ <div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>
1893
+ <div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>
1933
1894
 
1934
- .hero-section {
1935
- display: flex;
1936
- gap: 40px;
1937
- margin-bottom: 40px;
1938
- border-bottom: 1px solid ${borderColor};
1939
- padding-bottom: 40px;
1940
- flex-direction: row;
1941
- }
1942
- .hero-content {
1943
- flex: 1;
1944
- display: flex;
1945
- flex-direction: column;
1946
- justify-content: center;
1947
- }
1948
- .hero-image {
1949
- flex: 1;
1950
- height: 300px;
1951
- border-radius: 12px;
1952
- }
1895
+ <div class="stats-section">
1896
+ <div class="stat-card">
1897
+ <div class="skeleton sk-stat-num"></div>
1898
+ <div class="skeleton sk-stat-label"></div>
1899
+ </div>
1900
+ <div class="stat-card stat-divider">
1901
+ <div class="skeleton sk-stat-num"></div>
1902
+ <div class="skeleton sk-stat-label"></div>
1903
+ </div>
1904
+ </div>
1953
1905
 
1954
- .share-section {
1955
- margin-bottom: 40px;
1956
- }
1957
- .sk-input {
1958
- height: 50px;
1959
- width: 100%;
1960
- border-radius: 8px;
1961
- margin-bottom: 16px;
1962
- }
1963
- .social-buttons {
1964
- display: flex;
1965
- gap: 12px;
1966
- }
1967
- .sk-btn-social {
1968
- flex: 1;
1969
- height: 50px;
1970
- border-radius: 8px;
1971
- }
1906
+ <div class="skeleton sk-title-md"></div>
1972
1907
 
1973
- .stats-section {
1974
- display: flex;
1975
- gap: 24px;
1976
- margin-bottom: 40px;
1977
- padding: 30px 0;
1978
- border-top: 1px solid ${borderColor};
1979
- border-bottom: 1px solid ${borderColor};
1980
- }
1981
- .stat-card {
1982
- flex: 1;
1983
- display: flex;
1984
- flex-direction: column;
1985
- align-items: center;
1986
- }
1987
- .stat-divider {
1988
- padding-left: 24px;
1989
- }
1908
+ <div class="table-header">
1909
+ <div class="skeleton sk-th col-user"></div>
1910
+ <div class="skeleton sk-th col-status"></div>
1911
+ <div class="skeleton sk-th col-reward"></div>
1912
+ <div class="skeleton sk-th col-date"></div>
1913
+ </div>
1990
1914
 
1991
- .sk-stat-num {
1992
- height: 48px;
1993
- width: 120px;
1994
- margin-bottom: 8px;
1995
- }
1996
- .sk-stat-label {
1997
- height: 18px;
1998
- width: 80px;
1999
- }
1915
+ <div class="table-row">
1916
+ <div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>
1917
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
1918
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
1919
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
1920
+ </div>
1921
+
1922
+ <div class="table-row">
1923
+ <div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>
1924
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
1925
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
1926
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
1927
+ </div>
2000
1928
 
2001
- .table-header {
2002
- display: flex;
2003
- gap: 16px;
2004
- margin-bottom: 16px;
2005
- }
2006
- .sk-th {
2007
- height: 16px;
2008
- }
2009
- .table-row {
2010
- display: flex;
2011
- align-items: center;
2012
- gap: 16px;
2013
- padding: 16px 0;
2014
- border-bottom: 1px solid ${borderColor};
2015
- }
1929
+ <div class="table-row">
1930
+ <div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>
1931
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
1932
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
1933
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
1934
+ </div>
2016
1935
 
2017
- .col-user {
2018
- flex: 2;
2019
- }
2020
- .col-status {
2021
- flex: 1;
2022
- }
2023
- .col-reward {
2024
- flex: 2;
2025
- }
2026
- .col-date {
2027
- flex: 1;
2028
- }
1936
+ <div class="pagination">
1937
+ <div class="skeleton sk-btn-page"></div>
1938
+ <div class="skeleton sk-btn-page"></div>
1939
+ </div>
1940
+ `;
1941
+ const instantAccessHTML = `
1942
+ <div class="hero-section instant-access-layout">
1943
+ <div class="skeleton hero-image ia-image"></div>
1944
+
1945
+ <div class="hero-content ia-content">
1946
+ <div class="skeleton sk-title-lg ia-center"></div>
1947
+ <div class="skeleton sk-text ia-center"></div>
1948
+
1949
+ <div class="skeleton sk-btn-action"></div>
2029
1950
 
2030
- .sk-badge {
2031
- height: 28px;
2032
- width: 90px;
2033
- border-radius: 14px;
2034
- }
2035
- .sk-reward-block {
2036
- height: 36px;
2037
- width: 100%;
2038
- border-radius: 6px;
2039
- }
1951
+ <div class="skeleton sk-label"></div>
1952
+ <div class="input-group">
1953
+ <div class="skeleton sk-input"></div>
1954
+ <div class="skeleton sk-btn-copy"></div>
1955
+ </div>
2040
1956
 
2041
- .pagination {
2042
- display: flex;
2043
- justify-content: flex-end;
2044
- gap: 8px;
2045
- margin-top: 24px;
2046
- }
2047
- .sk-btn-page {
2048
- height: 36px;
2049
- width: 64px;
2050
- border-radius: 6px;
2051
- margin-bottom: 0;
2052
- }
1957
+ <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
1958
+ <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
1959
+ </div>
1960
+ </div>
1961
+ `;
1962
+ return `
1963
+ <style>
1964
+ * {
1965
+ box-sizing: border-box;
1966
+ padding: 0;
1967
+ margin: 0;
1968
+ }
2053
1969
 
2054
- @media (max-width: 768px) {
2055
- body {
2056
- padding: 20px;
2057
- }
2058
- .widget-container {
2059
- padding: 24px;
2060
- }
1970
+ .widget-container {
1971
+ background: white;
1972
+ width: 100%;
1973
+ padding: 40px;
1974
+ box-sizing: border-box;
1975
+ overflow: hidden;
1976
+ }
2061
1977
 
2062
- .hero-section {
2063
- flex-direction: column-reverse;
2064
- gap: 24px;
2065
- }
2066
- .hero-image {
2067
- height: 220px;
2068
- width: 100%;
2069
- }
2070
- .sk-title-lg {
2071
- width: 80%;
2072
- }
1978
+ @keyframes shimmer {
1979
+ 0% { background-position: -100% 0; }
1980
+ 100% { background-position: 100% 0; }
1981
+ }
2073
1982
 
2074
- .col-date {
2075
- display: none;
2076
- }
2077
- }
1983
+ .skeleton {
1984
+ background: ${skeletonBackgroundColor};
1985
+ background: linear-gradient(
1986
+ 90deg,
1987
+ ${skeletonBackgroundColor} 25%,
1988
+ ${skeletonShimmerColor} 50%,
1989
+ ${skeletonBackgroundColor} 75%
1990
+ );
1991
+ background-size: 200% 100%;
1992
+ animation: shimmer 1.5s infinite linear;
1993
+ border-radius: 6px;
1994
+ margin-bottom: 12px;
1995
+ }
2078
1996
 
2079
- @media (max-width: 480px) {
2080
- body {
2081
- padding: 10px;
2082
- }
2083
- .widget-container {
2084
- padding: 16px;
2085
- }
1997
+ /* Typography Skeletons */
1998
+ .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
1999
+ .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
2000
+ .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
2001
+ .sk-text-short { width: 40%; }
2002
+ .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
2086
2003
 
2087
- .sk-stat-num {
2088
- width: 80px;
2089
- height: 40px;
2090
- }
2004
+ /* Layouts */
2005
+ .hero-section {
2006
+ display: flex;
2007
+ gap: 40px;
2008
+ margin-bottom: 40px;
2009
+ padding-bottom: 40px;
2010
+ flex-direction: row;
2011
+ height: 100%;
2012
+ /* Removed border-bottom */
2013
+ }
2014
+
2015
+ .hero-content {
2016
+ flex: 1;
2017
+ display: flex;
2018
+ flex-direction: column;
2019
+ justify-content: center;
2020
+ }
2021
+
2022
+ .hero-image {
2023
+ flex: 1;
2024
+ height: 300px;
2025
+ border-radius: 12px;
2026
+ }
2091
2027
 
2092
- .col-reward {
2093
- display: none;
2094
- }
2028
+ /* -- Specific Instant Access Overrides -- */
2029
+ .instant-access-layout {
2030
+ margin-bottom: 0;
2031
+ padding-bottom: 0;
2032
+ align-items: center;
2033
+ }
2034
+ .ia-image {
2035
+ height: 400px;
2036
+ }
2037
+ .ia-center {
2038
+ margin-left: auto;
2039
+ margin-right: auto;
2040
+ }
2041
+ .ia-content {
2042
+ align-items: center;
2043
+ text-align: center;
2044
+ }
2045
+ .sk-btn-action {
2046
+ height: 45px;
2047
+ width: 140px;
2048
+ border-radius: 6px;
2049
+ margin: 24px auto;
2050
+ }
2051
+ .input-group {
2052
+ display: flex;
2053
+ gap: 10px;
2054
+ width: 100%;
2055
+ max-width: 400px;
2056
+ }
2057
+ .sk-btn-copy {
2058
+ height: 50px;
2059
+ width: 120px;
2060
+ border-radius: 8px;
2061
+ }
2062
+ /* ------------------------------------- */
2095
2063
 
2096
- .col-user {
2097
- flex: 3;
2098
- }
2099
- .col-status {
2100
- flex: 2;
2101
- display: flex;
2102
- justify-content: flex-end;
2103
- }
2104
- }
2105
- </style>
2064
+ .share-section { margin-bottom: 40px; }
2065
+ .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }
2066
+
2067
+ .social-buttons { display: flex; gap: 12px; }
2068
+ .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }
2106
2069
 
2107
- <div class="widget-container">
2108
- <div class="hero-section">
2109
- <div class="hero-content">
2110
- <div class="skeleton sk-title-lg"></div>
2111
- <div class="skeleton sk-text"></div>
2112
- <div class="skeleton sk-text sk-text-short"></div>
2113
- </div>
2114
- <div class="skeleton hero-image"></div>
2115
- </div>
2070
+ .stats-section {
2071
+ display: flex;
2072
+ gap: 24px;
2073
+ margin-bottom: 40px;
2074
+ padding: 30px 0;
2075
+ /* Removed border-top and border-bottom */
2076
+ }
2077
+ .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }
2078
+ .stat-divider { padding-left: 24px; }
2079
+ .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }
2080
+ .sk-stat-label { height: 18px; width: 80px; }
2116
2081
 
2117
- <div class="share-section">
2118
- <div class="skeleton sk-label"></div>
2119
- <div class="skeleton sk-input"></div>
2120
- <div class="social-buttons">
2121
- <div class="skeleton sk-btn-social"></div>
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>
2126
- </div>
2082
+ /* Table Styles */
2083
+ .table-header { display: flex; gap: 16px; margin-bottom: 16px; }
2084
+ .sk-th { height: 16px; }
2085
+ .table-row {
2086
+ display: flex;
2087
+ align-items: center;
2088
+ gap: 16px;
2089
+ padding: 16px 0;
2090
+ /* Removed border-bottom */
2091
+ }
2092
+
2093
+ .col-user { flex: 2; }
2094
+ .col-status { flex: 1; }
2095
+ .col-reward { flex: 2; }
2096
+ .col-date { flex: 1; }
2127
2097
 
2128
- <div
2129
- class="skeleton sk-title-md"
2130
- style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"
2131
- ></div>
2132
- <div
2133
- class="skeleton sk-text"
2134
- style="width: 60%; margin-left: auto; margin-right: auto"
2135
- ></div>
2098
+ .sk-badge { height: 28px; width: 90px; border-radius: 14px; }
2099
+ .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }
2136
2100
 
2137
- <div class="stats-section">
2138
- <div class="stat-card">
2139
- <div class="skeleton sk-stat-num"></div>
2140
- <div class="skeleton sk-stat-label"></div>
2141
- </div>
2142
- <div class="stat-card stat-divider">
2143
- <div class="skeleton sk-stat-num"></div>
2144
- <div class="skeleton sk-stat-label"></div>
2145
- </div>
2146
- </div>
2101
+ .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
2102
+ .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }
2147
2103
 
2148
- <div class="skeleton sk-title-md"></div>
2104
+ @media (max-width: 768px) {
2105
+ body { padding: 20px; }
2106
+ .widget-container { padding: 24px; }
2149
2107
 
2150
- <div class="table-header">
2151
- <div class="skeleton sk-th col-user"></div>
2152
- <div class="skeleton sk-th col-status"></div>
2153
- <div class="skeleton sk-th col-reward"></div>
2154
- <div class="skeleton sk-th col-date"></div>
2155
- </div>
2108
+ .hero-section { flex-direction: column-reverse; gap: 24px; }
2109
+ .instant-access-layout { flex-direction: column; }
2110
+
2111
+ .hero-image { height: 220px; width: 100%; }
2112
+ .sk-title-lg { width: 100%; }
2156
2113
 
2157
- <div class="table-row">
2158
- <div class="col-user">
2159
- <div class="skeleton sk-text" style="width: 70%; margin: 0"></div>
2160
- </div>
2161
- <div class="col-status">
2162
- <div class="skeleton sk-badge" style="margin: 0"></div>
2163
- </div>
2164
- <div class="col-reward">
2165
- <div class="skeleton sk-reward-block" style="margin: 0"></div>
2166
- </div>
2167
- <div class="col-date">
2168
- <div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
2169
- </div>
2170
- </div>
2171
- <div class="table-row">
2172
- <div class="col-user">
2173
- <div class="skeleton sk-text" style="width: 60%; margin: 0"></div>
2174
- </div>
2175
- <div class="col-status">
2176
- <div class="skeleton sk-badge" style="margin: 0"></div>
2177
- </div>
2178
- <div class="col-reward">
2179
- <div class="skeleton sk-reward-block" style="margin: 0"></div>
2180
- </div>
2181
- <div class="col-date">
2182
- <div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
2183
- </div>
2184
- </div>
2185
- <div class="table-row">
2186
- <div class="col-user">
2187
- <div class="skeleton sk-text" style="width: 75%; margin: 0"></div>
2188
- </div>
2189
- <div class="col-status">
2190
- <div class="skeleton sk-badge" style="margin: 0"></div>
2191
- </div>
2192
- <div class="col-reward">
2193
- <div class="skeleton sk-reward-block" style="margin: 0"></div>
2194
- </div>
2195
- <div class="col-date">
2196
- <div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
2197
- </div>
2198
- </div>
2114
+ .col-date { display: none; }
2115
+ }
2116
+ </style>
2199
2117
 
2200
- <div class="pagination">
2201
- <div class="skeleton sk-btn-page"></div>
2202
- <div class="skeleton sk-btn-page"></div>
2203
- </div>
2204
- </div>
2118
+ <div class="widget-container">
2119
+ ${type === "referrer" ? referrerHTML : instantAccessHTML}
2120
+ </div>
2205
2121
  `;
2206
2122
  };
2207
2123
  const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
@@ -2219,7 +2135,7 @@ function decodeUserJwt(tokenStr) {
2219
2135
  }
2220
2136
  const _log$1 = debug("squatch-js:DeclarativeWidget");
2221
2137
  class DeclarativeWidget extends HTMLElement {
2222
- constructor(res) {
2138
+ constructor() {
2223
2139
  super();
2224
2140
  /**
2225
2141
  * Configuration overrides
@@ -2266,7 +2182,6 @@ class DeclarativeWidget extends HTMLElement {
2266
2182
  */
2267
2183
  __publicField(this, "container");
2268
2184
  __publicField(this, "element");
2269
- __publicField(this, "widgetConfig");
2270
2185
  /**
2271
2186
  * Flag for if the component has been loaded or not
2272
2187
  * @hidden
@@ -2330,7 +2245,6 @@ class DeclarativeWidget extends HTMLElement {
2330
2245
  this.config = getConfig();
2331
2246
  this.token = getToken();
2332
2247
  this.tenant = window.squatchTenant;
2333
- this.widgetConfig = res.widgetConfig;
2334
2248
  this.container = this;
2335
2249
  }
2336
2250
  _setupApis(config) {
@@ -2421,8 +2335,8 @@ class DeclarativeWidget extends HTMLElement {
2421
2335
  }
2422
2336
  }
2423
2337
  class DeclarativeEmbedWidget extends DeclarativeWidget {
2424
- constructor(res) {
2425
- super(res);
2338
+ constructor() {
2339
+ super();
2426
2340
  this.type = "EMBED";
2427
2341
  this.loaded = false;
2428
2342
  }
@@ -2441,9 +2355,10 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
2441
2355
  async connectedCallback() {
2442
2356
  this.loaded = true;
2443
2357
  this.container = this.getAttribute("container");
2444
- const brandingConfig = this.widgetConfig.values.brandingConfig || {};
2445
- console.log("THIS IS THE BRANDING CONFIG", brandingConfig);
2446
- const skeletonHTML = getSkeleton({ height: "100%" });
2358
+ const skeletonHTML = getSkeleton({
2359
+ height: "100%",
2360
+ type: "instant-access"
2361
+ });
2447
2362
  const skeletonContainer = document.createElement("div");
2448
2363
  skeletonContainer.id = "loading-skeleton";
2449
2364
  skeletonContainer.innerHTML = skeletonHTML;
@@ -2459,8 +2374,8 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
2459
2374
  }
2460
2375
  }
2461
2376
  class DeclarativePopupWidget extends DeclarativeWidget {
2462
- constructor(res) {
2463
- super(res);
2377
+ constructor() {
2378
+ super();
2464
2379
  this.type = "POPUP";
2465
2380
  this.loaded = false;
2466
2381
  this.addEventListener("click", (e) => {