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