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

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 +246 -330
  2. package/dist/squatch.cjs.js.map +1 -1
  3. package/dist/squatch.esm.js +246 -330
  4. package/dist/squatch.esm.js.map +1 -1
  5. package/dist/squatch.js +246 -330
  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.js CHANGED
@@ -1121,13 +1121,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
1121
1121
  }
1122
1122
  }
1123
1123
  async load() {
1124
- var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
1124
+ var _a2, _b, _c, _d, _e, _f, _g;
1125
1125
  const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
1126
1126
  const initialHeight = brandingConfig == null ? void 0 : brandingConfig.loadingHeight;
1127
- (_d = (_c = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _c.loadingSkeleton) == null ? void 0 : _d.background;
1128
- (_f = (_e = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _e.loadingSkeleton) == null ? void 0 : _f.animationBackground;
1129
- (_g = brandingConfig == null ? void 0 : brandingConfig.border) == null ? void 0 : _g.borderColor;
1130
- const sizes = (_h = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _h.embeddedWidgets;
1127
+ const sizes = (_c = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _c.embeddedWidgets;
1131
1128
  const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
1132
1129
  const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
1133
1130
  const frame = this._createFrame({
@@ -1136,14 +1133,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
1136
1133
  initialHeight
1137
1134
  });
1138
1135
  const element = this._findElement();
1139
- if ((_i = this.context) == null ? void 0 : _i.container) {
1136
+ if ((_d = this.context) == null ? void 0 : _d.container) {
1140
1137
  element.style.visibility = "hidden";
1141
1138
  element.style.height = "0";
1142
1139
  element.style["overflow-y"] = "hidden";
1143
1140
  }
1144
1141
  if (this.container) {
1145
1142
  if (element.shadowRoot) {
1146
- if (((_j = element.shadowRoot.lastChild) == null ? void 0 : _j.nodeName) === "IFRAME") {
1143
+ if (((_e = element.shadowRoot.lastChild) == null ? void 0 : _e.nodeName) === "IFRAME") {
1147
1144
  element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
1148
1145
  } else {
1149
1146
  element.shadowRoot.appendChild(frame);
@@ -1164,12 +1161,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
1164
1161
  frameDoc.open();
1165
1162
  const domain = this.widgetApi.domain;
1166
1163
  frameDoc.write(`
1167
- ${((_k = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _k.brandFont) ? `
1164
+ ${((_f = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _f.brandFont) ? `
1168
1165
  <link rel="preconnect" href="https://fast${domain === "https://staging.referralsaasquatch.com" && "-staging"}.ssqt.io">
1169
1166
  <link rel="preconnect" href="https://fonts.gstatic.com">
1170
1167
  <link rel="preconnect" href="https://fonts.googleapis.com">
1171
1168
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(
1172
- (_l = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _l.brandFont
1169
+ (_g = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _g.brandFont
1173
1170
  )}" as="style">` : ""}
1174
1171
  <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
1175
1172
  <style data-styles>
@@ -1865,345 +1862,261 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
1865
1862
  };
1866
1863
  }
1867
1864
  const getSkeleton = ({
1865
+ type = "referrer",
1868
1866
  height = "500px",
1869
1867
  skeletonBackgroundColor = "#e0e0e0",
1870
- skeletonShimmerColor = "#f5f5f5",
1871
- borderColor = "#ccc"
1868
+ skeletonShimmerColor = "#f5f5f5"
1872
1869
  }) => {
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
- }
1870
+ const referrerHTML = `
1871
+ <div class="hero-section">
1872
+ <div class="hero-content">
1873
+ <div class="skeleton sk-title-lg"></div>
1874
+ <div class="skeleton sk-text"></div>
1875
+ <div class="skeleton sk-text sk-text-short"></div>
1876
+ </div>
1877
+ <div class="skeleton hero-image"></div>
1878
+ </div>
1896
1879
 
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
- }
1880
+ <div class="share-section">
1881
+ <div class="skeleton sk-label"></div>
1882
+ <div class="skeleton sk-input"></div>
1883
+ <div class="social-buttons">
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 class="skeleton sk-btn-social"></div>
1888
+ </div>
1889
+ </div>
1910
1890
 
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
- }
1891
+ <div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>
1892
+ <div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>
1935
1893
 
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
- }
1894
+ <div class="stats-section">
1895
+ <div class="stat-card">
1896
+ <div class="skeleton sk-stat-num"></div>
1897
+ <div class="skeleton sk-stat-label"></div>
1898
+ </div>
1899
+ <div class="stat-card stat-divider">
1900
+ <div class="skeleton sk-stat-num"></div>
1901
+ <div class="skeleton sk-stat-label"></div>
1902
+ </div>
1903
+ </div>
1955
1904
 
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
- }
1905
+ <div class="skeleton sk-title-md"></div>
1974
1906
 
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
- }
1907
+ <div class="table-header">
1908
+ <div class="skeleton sk-th col-user"></div>
1909
+ <div class="skeleton sk-th col-status"></div>
1910
+ <div class="skeleton sk-th col-reward"></div>
1911
+ <div class="skeleton sk-th col-date"></div>
1912
+ </div>
1992
1913
 
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
- }
1914
+ <div class="table-row">
1915
+ <div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>
1916
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
1917
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
1918
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
1919
+ </div>
1920
+
1921
+ <div class="table-row">
1922
+ <div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>
1923
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
1924
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
1925
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
1926
+ </div>
2002
1927
 
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
- }
1928
+ <div class="table-row">
1929
+ <div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>
1930
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
1931
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
1932
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
1933
+ </div>
2018
1934
 
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
- }
1935
+ <div class="pagination">
1936
+ <div class="skeleton sk-btn-page"></div>
1937
+ <div class="skeleton sk-btn-page"></div>
1938
+ </div>
1939
+ `;
1940
+ const instantAccessHTML = `
1941
+ <div class="hero-section instant-access-layout">
1942
+ <div class="skeleton hero-image ia-image"></div>
1943
+
1944
+ <div class="hero-content ia-content">
1945
+ <div class="skeleton sk-title-lg ia-center"></div>
1946
+ <div class="skeleton sk-text ia-center"></div>
1947
+
1948
+ <div class="skeleton sk-btn-action"></div>
2031
1949
 
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
- }
1950
+ <div class="skeleton sk-label"></div>
1951
+ <div class="input-group">
1952
+ <div class="skeleton sk-input"></div>
1953
+ <div class="skeleton sk-btn-copy"></div>
1954
+ </div>
2042
1955
 
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
- }
1956
+ <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
1957
+ <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
1958
+ </div>
1959
+ </div>
1960
+ `;
1961
+ return `
1962
+ <style>
1963
+ * {
1964
+ box-sizing: border-box;
1965
+ padding: 0;
1966
+ margin: 0;
1967
+ }
2055
1968
 
2056
- @media (max-width: 768px) {
2057
- body {
2058
- padding: 20px;
2059
- }
2060
- .widget-container {
2061
- padding: 24px;
2062
- }
1969
+ .widget-container {
1970
+ background: white;
1971
+ width: 100%;
1972
+ padding: 40px;
1973
+ box-sizing: border-box;
1974
+ overflow: hidden;
1975
+ }
2063
1976
 
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
- }
1977
+ @keyframes shimmer {
1978
+ 0% { background-position: -100% 0; }
1979
+ 100% { background-position: 100% 0; }
1980
+ }
2075
1981
 
2076
- .col-date {
2077
- display: none;
2078
- }
2079
- }
1982
+ .skeleton {
1983
+ background: ${skeletonBackgroundColor};
1984
+ background: linear-gradient(
1985
+ 90deg,
1986
+ ${skeletonBackgroundColor} 25%,
1987
+ ${skeletonShimmerColor} 50%,
1988
+ ${skeletonBackgroundColor} 75%
1989
+ );
1990
+ background-size: 200% 100%;
1991
+ animation: shimmer 1.5s infinite linear;
1992
+ border-radius: 6px;
1993
+ margin-bottom: 12px;
1994
+ }
2080
1995
 
2081
- @media (max-width: 480px) {
2082
- body {
2083
- padding: 10px;
2084
- }
2085
- .widget-container {
2086
- padding: 16px;
2087
- }
1996
+ /* Typography Skeletons */
1997
+ .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
1998
+ .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
1999
+ .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
2000
+ .sk-text-short { width: 40%; }
2001
+ .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
2088
2002
 
2089
- .sk-stat-num {
2090
- width: 80px;
2091
- height: 40px;
2092
- }
2003
+ /* Layouts */
2004
+ .hero-section {
2005
+ display: flex;
2006
+ gap: 40px;
2007
+ margin-bottom: 40px;
2008
+ padding-bottom: 40px;
2009
+ flex-direction: row;
2010
+ height: 100%;
2011
+ /* Removed border-bottom */
2012
+ }
2013
+
2014
+ .hero-content {
2015
+ flex: 1;
2016
+ display: flex;
2017
+ flex-direction: column;
2018
+ justify-content: center;
2019
+ }
2020
+
2021
+ .hero-image {
2022
+ flex: 1;
2023
+ height: 300px;
2024
+ border-radius: 12px;
2025
+ }
2093
2026
 
2094
- .col-reward {
2095
- display: none;
2096
- }
2027
+ /* -- Specific Instant Access Overrides -- */
2028
+ .instant-access-layout {
2029
+ margin-bottom: 0;
2030
+ padding-bottom: 0;
2031
+ align-items: center;
2032
+ }
2033
+ .ia-image {
2034
+ height: 400px;
2035
+ }
2036
+ .ia-center {
2037
+ margin-left: auto;
2038
+ margin-right: auto;
2039
+ }
2040
+ .ia-content {
2041
+ align-items: center;
2042
+ text-align: center;
2043
+ }
2044
+ .sk-btn-action {
2045
+ height: 45px;
2046
+ width: 140px;
2047
+ border-radius: 6px;
2048
+ margin: 24px auto;
2049
+ }
2050
+ .input-group {
2051
+ display: flex;
2052
+ gap: 10px;
2053
+ width: 100%;
2054
+ max-width: 400px;
2055
+ }
2056
+ .sk-btn-copy {
2057
+ height: 50px;
2058
+ width: 120px;
2059
+ border-radius: 8px;
2060
+ }
2061
+ /* ------------------------------------- */
2097
2062
 
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>
2063
+ .share-section { margin-bottom: 40px; }
2064
+ .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }
2065
+
2066
+ .social-buttons { display: flex; gap: 12px; }
2067
+ .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }
2108
2068
 
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>
2069
+ .stats-section {
2070
+ display: flex;
2071
+ gap: 24px;
2072
+ margin-bottom: 40px;
2073
+ padding: 30px 0;
2074
+ /* Removed border-top and border-bottom */
2075
+ }
2076
+ .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }
2077
+ .stat-divider { padding-left: 24px; }
2078
+ .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }
2079
+ .sk-stat-label { height: 18px; width: 80px; }
2118
2080
 
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>
2081
+ /* Table Styles */
2082
+ .table-header { display: flex; gap: 16px; margin-bottom: 16px; }
2083
+ .sk-th { height: 16px; }
2084
+ .table-row {
2085
+ display: flex;
2086
+ align-items: center;
2087
+ gap: 16px;
2088
+ padding: 16px 0;
2089
+ /* Removed border-bottom */
2090
+ }
2091
+
2092
+ .col-user { flex: 2; }
2093
+ .col-status { flex: 1; }
2094
+ .col-reward { flex: 2; }
2095
+ .col-date { flex: 1; }
2129
2096
 
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>
2097
+ .sk-badge { height: 28px; width: 90px; border-radius: 14px; }
2098
+ .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }
2138
2099
 
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>
2100
+ .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
2101
+ .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }
2149
2102
 
2150
- <div class="skeleton sk-title-md"></div>
2103
+ @media (max-width: 768px) {
2104
+ body { padding: 20px; }
2105
+ .widget-container { padding: 24px; }
2151
2106
 
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>
2107
+ .hero-section { flex-direction: column-reverse; gap: 24px; }
2108
+ .instant-access-layout { flex-direction: column; }
2109
+
2110
+ .hero-image { height: 220px; width: 100%; }
2111
+ .sk-title-lg { width: 100%; }
2158
2112
 
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>
2113
+ .col-date { display: none; }
2114
+ }
2115
+ </style>
2201
2116
 
2202
- <div class="pagination">
2203
- <div class="skeleton sk-btn-page"></div>
2204
- <div class="skeleton sk-btn-page"></div>
2205
- </div>
2206
- </div>
2117
+ <div class="widget-container">
2118
+ ${type === "referrer" ? referrerHTML : instantAccessHTML}
2119
+ </div>
2207
2120
  `;
2208
2121
  };
2209
2122
  const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
@@ -2221,7 +2134,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2221
2134
  }
2222
2135
  const _log$1 = debug("squatch-js:DeclarativeWidget");
2223
2136
  class DeclarativeWidget extends HTMLElement {
2224
- constructor(res) {
2137
+ constructor() {
2225
2138
  super();
2226
2139
  /**
2227
2140
  * Configuration overrides
@@ -2268,7 +2181,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2268
2181
  */
2269
2182
  __publicField(this, "container");
2270
2183
  __publicField(this, "element");
2271
- __publicField(this, "widgetConfig");
2272
2184
  /**
2273
2185
  * Flag for if the component has been loaded or not
2274
2186
  * @hidden
@@ -2332,7 +2244,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2332
2244
  this.config = getConfig();
2333
2245
  this.token = getToken();
2334
2246
  this.tenant = window.squatchTenant;
2335
- this.widgetConfig = res.widgetConfig;
2336
2247
  this.container = this;
2337
2248
  }
2338
2249
  _setupApis(config) {
@@ -2423,8 +2334,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2423
2334
  }
2424
2335
  }
2425
2336
  class DeclarativeEmbedWidget extends DeclarativeWidget {
2426
- constructor(res) {
2427
- super(res);
2337
+ constructor() {
2338
+ super();
2428
2339
  this.type = "EMBED";
2429
2340
  this.loaded = false;
2430
2341
  }
@@ -2443,9 +2354,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2443
2354
  async connectedCallback() {
2444
2355
  this.loaded = true;
2445
2356
  this.container = this.getAttribute("container");
2446
- const brandingConfig = this.widgetConfig.values.brandingConfig || {};
2447
- console.log("THIS IS THE BRANDING CONFIG", brandingConfig);
2448
- const skeletonHTML = getSkeleton({ height: "100%" });
2357
+ this.widgetType = this.getAttribute("widget") || void 0;
2358
+ console.log("widget type", this.widgetType);
2359
+ const skeletonHTML = getSkeleton({
2360
+ height: "100%",
2361
+ type: "instant-access"
2362
+ });
2449
2363
  const skeletonContainer = document.createElement("div");
2450
2364
  skeletonContainer.id = "loading-skeleton";
2451
2365
  skeletonContainer.innerHTML = skeletonHTML;
@@ -2461,8 +2375,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2461
2375
  }
2462
2376
  }
2463
2377
  class DeclarativePopupWidget extends DeclarativeWidget {
2464
- constructor(res) {
2465
- super(res);
2378
+ constructor() {
2379
+ super();
2466
2380
  this.type = "POPUP";
2467
2381
  this.loaded = false;
2468
2382
  this.addEventListener("click", (e) => {
@@ -2485,6 +2399,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2485
2399
  async connectedCallback() {
2486
2400
  this.loaded = true;
2487
2401
  this.container = this.getAttribute("container");
2402
+ this.widgetType = this.getAttribute("widget") || void 0;
2403
+ console.log("widget type", this.widgetType);
2488
2404
  const skeletonHTML = getSkeleton({ height: "100%" });
2489
2405
  const skeletonContainer = document.createElement("div");
2490
2406
  skeletonContainer.id = "loading-skeleton";