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