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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/squatch.cjs.js +236 -321
  2. package/dist/squatch.cjs.js.map +1 -1
  3. package/dist/squatch.esm.js +236 -321
  4. package/dist/squatch.esm.js.map +1 -1
  5. package/dist/squatch.js +236 -321
  6. package/dist/squatch.js.map +1 -1
  7. package/dist/squatch.min.js +1 -1
  8. package/dist/widgets/SkeletonTemplate.d.ts +3 -2
  9. package/dist/widgets/declarative/DeclarativeWidget.d.ts +2 -5
  10. package/dist/widgets/declarative/DeclarativeWidgets.d.ts +2 -7
  11. package/package.json +1 -1
package/dist/squatch.js CHANGED
@@ -1865,345 +1865,261 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
1865
1865
  };
1866
1866
  }
1867
1867
  const getSkeleton = ({
1868
+ type = "referrer",
1868
1869
  height = "500px",
1869
1870
  skeletonBackgroundColor = "#e0e0e0",
1870
- skeletonShimmerColor = "#f5f5f5",
1871
- borderColor = "#ccc"
1871
+ skeletonShimmerColor = "#f5f5f5"
1872
1872
  }) => {
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
- }
1873
+ const referrerHTML = `
1874
+ <div class="hero-section">
1875
+ <div class="hero-content">
1876
+ <div class="skeleton sk-title-lg"></div>
1877
+ <div class="skeleton sk-text"></div>
1878
+ <div class="skeleton sk-text sk-text-short"></div>
1879
+ </div>
1880
+ <div class="skeleton hero-image"></div>
1881
+ </div>
1896
1882
 
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
- }
1883
+ <div class="share-section">
1884
+ <div class="skeleton sk-label"></div>
1885
+ <div class="skeleton sk-input"></div>
1886
+ <div class="social-buttons">
1887
+ <div class="skeleton sk-btn-social"></div>
1888
+ <div class="skeleton sk-btn-social"></div>
1889
+ <div class="skeleton sk-btn-social"></div>
1890
+ <div class="skeleton sk-btn-social"></div>
1891
+ </div>
1892
+ </div>
1910
1893
 
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
- }
1894
+ <div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>
1895
+ <div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>
1935
1896
 
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
- }
1897
+ <div class="stats-section">
1898
+ <div class="stat-card">
1899
+ <div class="skeleton sk-stat-num"></div>
1900
+ <div class="skeleton sk-stat-label"></div>
1901
+ </div>
1902
+ <div class="stat-card stat-divider">
1903
+ <div class="skeleton sk-stat-num"></div>
1904
+ <div class="skeleton sk-stat-label"></div>
1905
+ </div>
1906
+ </div>
1955
1907
 
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
- }
1908
+ <div class="skeleton sk-title-md"></div>
1974
1909
 
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
- }
1910
+ <div class="table-header">
1911
+ <div class="skeleton sk-th col-user"></div>
1912
+ <div class="skeleton sk-th col-status"></div>
1913
+ <div class="skeleton sk-th col-reward"></div>
1914
+ <div class="skeleton sk-th col-date"></div>
1915
+ </div>
1992
1916
 
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
- }
1917
+ <div class="table-row">
1918
+ <div class="col-user"><div class="skeleton sk-text" style="width: 70%; 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>
1923
+
1924
+ <div class="table-row">
1925
+ <div class="col-user"><div class="skeleton sk-text" style="width: 60%; 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>
2002
1930
 
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
- }
1931
+ <div class="table-row">
1932
+ <div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>
1933
+ <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
1934
+ <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
1935
+ <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
1936
+ </div>
2018
1937
 
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
- }
1938
+ <div class="pagination">
1939
+ <div class="skeleton sk-btn-page"></div>
1940
+ <div class="skeleton sk-btn-page"></div>
1941
+ </div>
1942
+ `;
1943
+ const instantAccessHTML = `
1944
+ <div class="hero-section instant-access-layout">
1945
+ <div class="skeleton hero-image ia-image"></div>
1946
+
1947
+ <div class="hero-content ia-content">
1948
+ <div class="skeleton sk-title-lg ia-center"></div>
1949
+ <div class="skeleton sk-text ia-center"></div>
1950
+
1951
+ <div class="skeleton sk-btn-action"></div>
2031
1952
 
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
- }
1953
+ <div class="skeleton sk-label"></div>
1954
+ <div class="input-group">
1955
+ <div class="skeleton sk-input"></div>
1956
+ <div class="skeleton sk-btn-copy"></div>
1957
+ </div>
2042
1958
 
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
- }
1959
+ <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
1960
+ <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
1961
+ </div>
1962
+ </div>
1963
+ `;
1964
+ return `
1965
+ <style>
1966
+ * {
1967
+ box-sizing: border-box;
1968
+ padding: 0;
1969
+ margin: 0;
1970
+ }
2055
1971
 
2056
- @media (max-width: 768px) {
2057
- body {
2058
- padding: 20px;
2059
- }
2060
- .widget-container {
2061
- padding: 24px;
2062
- }
1972
+ .widget-container {
1973
+ background: white;
1974
+ width: 100%;
1975
+ padding: 40px;
1976
+ box-sizing: border-box;
1977
+ overflow: hidden;
1978
+ }
2063
1979
 
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
- }
1980
+ @keyframes shimmer {
1981
+ 0% { background-position: -100% 0; }
1982
+ 100% { background-position: 100% 0; }
1983
+ }
2075
1984
 
2076
- .col-date {
2077
- display: none;
2078
- }
2079
- }
1985
+ .skeleton {
1986
+ background: ${skeletonBackgroundColor};
1987
+ background: linear-gradient(
1988
+ 90deg,
1989
+ ${skeletonBackgroundColor} 25%,
1990
+ ${skeletonShimmerColor} 50%,
1991
+ ${skeletonBackgroundColor} 75%
1992
+ );
1993
+ background-size: 200% 100%;
1994
+ animation: shimmer 1.5s infinite linear;
1995
+ border-radius: 6px;
1996
+ margin-bottom: 12px;
1997
+ }
2080
1998
 
2081
- @media (max-width: 480px) {
2082
- body {
2083
- padding: 10px;
2084
- }
2085
- .widget-container {
2086
- padding: 16px;
2087
- }
1999
+ /* Typography Skeletons */
2000
+ .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
2001
+ .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
2002
+ .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
2003
+ .sk-text-short { width: 40%; }
2004
+ .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
2088
2005
 
2089
- .sk-stat-num {
2090
- width: 80px;
2091
- height: 40px;
2092
- }
2006
+ /* Layouts */
2007
+ .hero-section {
2008
+ display: flex;
2009
+ gap: 40px;
2010
+ margin-bottom: 40px;
2011
+ padding-bottom: 40px;
2012
+ flex-direction: row;
2013
+ height: 100%;
2014
+ /* Removed border-bottom */
2015
+ }
2016
+
2017
+ .hero-content {
2018
+ flex: 1;
2019
+ display: flex;
2020
+ flex-direction: column;
2021
+ justify-content: center;
2022
+ }
2023
+
2024
+ .hero-image {
2025
+ flex: 1;
2026
+ height: 300px;
2027
+ border-radius: 12px;
2028
+ }
2093
2029
 
2094
- .col-reward {
2095
- display: none;
2096
- }
2030
+ /* -- Specific Instant Access Overrides -- */
2031
+ .instant-access-layout {
2032
+ margin-bottom: 0;
2033
+ padding-bottom: 0;
2034
+ align-items: center;
2035
+ }
2036
+ .ia-image {
2037
+ height: 400px;
2038
+ }
2039
+ .ia-center {
2040
+ margin-left: auto;
2041
+ margin-right: auto;
2042
+ }
2043
+ .ia-content {
2044
+ align-items: center;
2045
+ text-align: center;
2046
+ }
2047
+ .sk-btn-action {
2048
+ height: 45px;
2049
+ width: 140px;
2050
+ border-radius: 6px;
2051
+ margin: 24px auto;
2052
+ }
2053
+ .input-group {
2054
+ display: flex;
2055
+ gap: 10px;
2056
+ width: 100%;
2057
+ max-width: 400px;
2058
+ }
2059
+ .sk-btn-copy {
2060
+ height: 50px;
2061
+ width: 120px;
2062
+ border-radius: 8px;
2063
+ }
2064
+ /* ------------------------------------- */
2097
2065
 
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>
2066
+ .share-section { margin-bottom: 40px; }
2067
+ .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }
2068
+
2069
+ .social-buttons { display: flex; gap: 12px; }
2070
+ .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }
2108
2071
 
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>
2072
+ .stats-section {
2073
+ display: flex;
2074
+ gap: 24px;
2075
+ margin-bottom: 40px;
2076
+ padding: 30px 0;
2077
+ /* Removed border-top and border-bottom */
2078
+ }
2079
+ .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }
2080
+ .stat-divider { padding-left: 24px; }
2081
+ .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }
2082
+ .sk-stat-label { height: 18px; width: 80px; }
2118
2083
 
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>
2084
+ /* Table Styles */
2085
+ .table-header { display: flex; gap: 16px; margin-bottom: 16px; }
2086
+ .sk-th { height: 16px; }
2087
+ .table-row {
2088
+ display: flex;
2089
+ align-items: center;
2090
+ gap: 16px;
2091
+ padding: 16px 0;
2092
+ /* Removed border-bottom */
2093
+ }
2094
+
2095
+ .col-user { flex: 2; }
2096
+ .col-status { flex: 1; }
2097
+ .col-reward { flex: 2; }
2098
+ .col-date { flex: 1; }
2129
2099
 
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>
2100
+ .sk-badge { height: 28px; width: 90px; border-radius: 14px; }
2101
+ .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }
2138
2102
 
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>
2103
+ .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
2104
+ .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }
2149
2105
 
2150
- <div class="skeleton sk-title-md"></div>
2106
+ @media (max-width: 768px) {
2107
+ body { padding: 20px; }
2108
+ .widget-container { padding: 24px; }
2151
2109
 
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>
2110
+ .hero-section { flex-direction: column-reverse; gap: 24px; }
2111
+ .instant-access-layout { flex-direction: column; }
2112
+
2113
+ .hero-image { height: 220px; width: 100%; }
2114
+ .sk-title-lg { width: 100%; }
2158
2115
 
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>
2116
+ .col-date { display: none; }
2117
+ }
2118
+ </style>
2201
2119
 
2202
- <div class="pagination">
2203
- <div class="skeleton sk-btn-page"></div>
2204
- <div class="skeleton sk-btn-page"></div>
2205
- </div>
2206
- </div>
2120
+ <div class="widget-container">
2121
+ ${type === "referrer" ? referrerHTML : instantAccessHTML}
2122
+ </div>
2207
2123
  `;
2208
2124
  };
2209
2125
  const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
@@ -2221,7 +2137,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2221
2137
  }
2222
2138
  const _log$1 = debug("squatch-js:DeclarativeWidget");
2223
2139
  class DeclarativeWidget extends HTMLElement {
2224
- constructor(res) {
2140
+ constructor() {
2225
2141
  super();
2226
2142
  /**
2227
2143
  * Configuration overrides
@@ -2268,7 +2184,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2268
2184
  */
2269
2185
  __publicField(this, "container");
2270
2186
  __publicField(this, "element");
2271
- __publicField(this, "widgetConfig");
2272
2187
  /**
2273
2188
  * Flag for if the component has been loaded or not
2274
2189
  * @hidden
@@ -2332,7 +2247,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2332
2247
  this.config = getConfig();
2333
2248
  this.token = getToken();
2334
2249
  this.tenant = window.squatchTenant;
2335
- this.widgetConfig = res.widgetConfig;
2336
2250
  this.container = this;
2337
2251
  }
2338
2252
  _setupApis(config) {
@@ -2423,8 +2337,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2423
2337
  }
2424
2338
  }
2425
2339
  class DeclarativeEmbedWidget extends DeclarativeWidget {
2426
- constructor(res) {
2427
- super(res);
2340
+ constructor() {
2341
+ super();
2428
2342
  this.type = "EMBED";
2429
2343
  this.loaded = false;
2430
2344
  }
@@ -2443,9 +2357,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2443
2357
  async connectedCallback() {
2444
2358
  this.loaded = true;
2445
2359
  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%" });
2360
+ const skeletonHTML = getSkeleton({
2361
+ height: "100%",
2362
+ type: "instant-access"
2363
+ });
2449
2364
  const skeletonContainer = document.createElement("div");
2450
2365
  skeletonContainer.id = "loading-skeleton";
2451
2366
  skeletonContainer.innerHTML = skeletonHTML;
@@ -2461,8 +2376,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
2461
2376
  }
2462
2377
  }
2463
2378
  class DeclarativePopupWidget extends DeclarativeWidget {
2464
- constructor(res) {
2465
- super(res);
2379
+ constructor() {
2380
+ super();
2466
2381
  this.type = "POPUP";
2467
2382
  this.loaded = false;
2468
2383
  this.addEventListener("click", (e) => {