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