@salesforcedevs/docs-components 1.17.12 → 1.17.13-table

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/docs-components",
3
- "version": "1.17.12",
3
+ "version": "1.17.13-table",
4
4
  "description": "Docs Lightning web components for DSC",
5
5
  "license": "MIT",
6
6
  "main": "index.js",
@@ -25,5 +25,5 @@
25
25
  "@types/lodash.orderby": "4.6.9",
26
26
  "@types/lodash.uniqby": "4.7.9"
27
27
  },
28
- "gitHead": "70531724fc102e034c3240e369b488fe8df896fc"
28
+ "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
29
29
  }
@@ -248,41 +248,65 @@ export default class ContentLayout extends LightningElement {
248
248
  const docHeaderHeight = docHeaderEl.getBoundingClientRect().height;
249
249
  const totalHeaderHeight = globalNavHeight + docHeaderHeight;
250
250
 
251
+ // Collect any banners rendered via the doc-phase and version-banner slots
252
+ const versionBannerSlot = this.template.querySelector(
253
+ "[name=version-banner]"
254
+ ) as any;
255
+ const docPhaseSlot = this.template.querySelector(
256
+ "[name=doc-phase]"
257
+ ) as any;
258
+ const versionBannerEls = (
259
+ versionBannerSlot
260
+ ? (versionBannerSlot.assignedElements() as HTMLElement[])
261
+ : []
262
+ ) as HTMLElement[];
263
+ const docPhaseEls = (
264
+ docPhaseSlot
265
+ ? (docPhaseSlot.assignedElements() as HTMLElement[])
266
+ : []
267
+ ) as HTMLElement[];
268
+ const bannersTotalHeight = [
269
+ ...versionBannerEls,
270
+ ...docPhaseEls
271
+ ].reduce(
272
+ (sum, el) => sum + (el?.getBoundingClientRect()?.height || 0),
273
+ 0
274
+ );
275
+
251
276
  // Selecting the doc section heading and RNB here.
252
277
  const docHeadingEls = Array.from(
253
278
  document.querySelectorAll("doc-heading")
254
279
  );
255
280
  const rightNavBarEl = this.template.querySelector(".right-nav-bar");
256
281
 
257
- sidebarEl.style.setProperty(
282
+ (sidebarEl as HTMLElement).style.setProperty(
258
283
  "--dx-c-content-sidebar-sticky-top",
259
- `${globalNavHeight + docHeaderHeight}px`
284
+ `${totalHeaderHeight}px`
260
285
  );
261
286
 
262
287
  docHeaderEl.style.setProperty(
263
288
  "--dx-g-global-header-height",
264
289
  `${globalNavHeight}px`
265
290
  );
291
+ // Expose heights as CSS variables for sticky offsets used by page content
292
+ const rootStyle = document.documentElement.style;
293
+ rootStyle.setProperty(
294
+ "--dx-g-doc-header-banner-height",
295
+ `${docHeaderHeight + bannersTotalHeight}px`
296
+ );
266
297
 
267
298
  // Adjusting the doc section heading on scroll.
268
299
  docHeadingEls.forEach((docHeadingEl) => {
269
- (docHeadingEl as any).style.scrollMarginTop = docPhaseEl
270
- ? `${
271
- totalHeaderHeight +
272
- docPhaseEl.getBoundingClientRect().height +
273
- 40
274
- }px`
275
- : `${totalHeaderHeight + 40}px`;
300
+ (docHeadingEl as any).style.scrollMarginTop = `${
301
+ totalHeaderHeight + bannersTotalHeight + 40
302
+ }px`;
276
303
  });
277
304
 
278
305
  // Adjusting the right nav bar on scroll.
279
306
  if (rightNavBarEl) {
280
- rightNavBarEl.style.top = docPhaseEl
281
- ? `${
282
- totalHeaderHeight +
283
- docPhaseEl.getBoundingClientRect().height
284
- }px`
285
- : `${totalHeaderHeight}px`;
307
+ (rightNavBarEl as HTMLElement).style.top = `${
308
+ totalHeaderHeight + bannersTotalHeight
309
+ }px`;
286
310
  }
287
311
 
288
312
  // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).
@@ -2,111 +2,44 @@ import ContentLayout from "doc/contentLayout";
2
2
 
3
3
  const TOC_HEADER_TAG = "doc-heading";
4
4
  const RNB_BY_TAB = "docs-tab";
5
- const SPECIFICATION_TAG = "doc-specification-content";
5
+ const SPECIFICATION_TAB_TITLE = "Specification";
6
6
  export const OBSERVER_ATTACH_WAIT_TIME = 500;
7
7
 
8
8
  export default class LwcContentLayout extends ContentLayout {
9
9
  private rnbByTab: boolean = false;
10
10
 
11
- // DOM element caches to avoid repeated queries
12
- private tabPanelListCache: any = null;
13
- private hasSpecContentCache: boolean | null = null;
14
- private allTabsCache: any[] | null = null;
15
- private mainSlotCache: any = null;
16
-
17
11
  private setRNBByTab() {
18
- const tabPanelListItem = this.getTabPanelList();
19
- this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB;
12
+ const tabPanelListItem: any = this.getTabPanelList();
13
+ this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB ? true : false;
20
14
  }
21
15
 
22
16
  get showTabBasedRNB() {
23
17
  return this.rnbByTab;
24
18
  }
25
19
 
26
- /**
27
- * Check if the main slot contains doc-specification-content
28
- * Uses caching to avoid repeated DOM queries
29
- */
30
- private hasSpecificationContent(): boolean {
31
- if (this.hasSpecContentCache !== null) {
32
- return this.hasSpecContentCache;
33
- }
34
-
35
- const mainSlot = this.getMainSlot();
36
- if (mainSlot) {
37
- const assignedElements = (mainSlot as any).assignedElements();
38
-
39
- for (const element of assignedElements) {
40
- if (
41
- element.tagName === SPECIFICATION_TAG ||
42
- element.querySelector(SPECIFICATION_TAG) ||
43
- element.shadowRoot?.querySelector(SPECIFICATION_TAG)
44
- ) {
45
- return (this.hasSpecContentCache = true);
46
- }
47
- }
48
- }
49
- return (this.hasSpecContentCache = false);
50
- }
51
-
52
- /**
53
- * Clear all caches when content changes
54
- */
55
- private clearAllCaches(): void {
56
- this.hasSpecContentCache = null;
57
- this.tabPanelListCache = null;
58
- this.allTabsCache = null;
59
- this.mainSlotCache = null;
60
- }
61
-
62
- /**
63
- * Get the main slot element with caching
64
- */
65
- private getMainSlot(): any {
66
- if (!this.mainSlotCache) {
67
- this.mainSlotCache =
68
- this.template.querySelector("slot:not([name])");
69
- }
70
- return this.mainSlotCache;
71
- }
72
-
73
- /**
74
- * Get tab panel list with caching
75
- */
76
- private getTabPanelList(): any {
77
- if (!this.tabPanelListCache) {
78
- // eslint-disable-next-line @lwc/lwc/no-document-query
79
- this.tabPanelListCache =
80
- document.querySelector("dx-tab-panel-list");
81
- }
82
- return this.tabPanelListCache;
83
- }
84
-
85
20
  onRNBClick = (event: CustomEvent) => {
86
21
  event.stopPropagation();
87
- if (this.hasSpecificationContent()) {
22
+ const currentTab = this.getSelectedTabId();
23
+ if (currentTab === SPECIFICATION_TAB_TITLE) {
88
24
  this.didScrollToSelectedHash = false;
89
25
  }
90
26
  };
91
27
 
92
28
  onTabChanged = () => {
93
29
  this.updateRNB();
94
-
95
- const { hash } = window.location;
96
- if (this.hasSpecificationContent() && hash) {
97
- this.didScrollToSelectedHash = false;
98
-
99
- requestAnimationFrame(() => this.updateHeadingForRNB());
100
- }
101
30
  };
102
31
 
32
+ private getTabPanelList() {
33
+ // eslint-disable-next-line @lwc/lwc/no-document-query
34
+ return document.querySelector("dx-tab-panel-list");
35
+ }
36
+
103
37
  protected getHeadingElements() {
104
38
  let headingElements = super.getHeadingElements();
105
39
  if (this.showTabBasedRNB) {
106
- const tabPanelListItem = this.getTabPanelList();
40
+ const tabPanelListItem: any = this.getTabPanelList();
107
41
  const tabPanels =
108
42
  tabPanelListItem?.querySelectorAll("dx-tab-panel");
109
-
110
43
  for (const tabPanelItem of tabPanels) {
111
44
  if (tabPanelItem.active) {
112
45
  // This is needed for Specification tab content
@@ -132,7 +65,6 @@ export default class LwcContentLayout extends ContentLayout {
132
65
  private updateURL() {
133
66
  const tabs = this.getAllTabs();
134
67
  const selectedTabId = this.getSelectedTabId();
135
-
136
68
  tabs.forEach((tab: any) => {
137
69
  if (tab.getAttribute("aria-selected") === "true") {
138
70
  const tabID = tab.getAttribute("aria-label");
@@ -169,38 +101,22 @@ export default class LwcContentLayout extends ContentLayout {
169
101
  const selectedTabId = this.getSelectedTabId();
170
102
  if (selectedTabId) {
171
103
  this.selectTabById(selectedTabId);
172
-
173
- // If there's a hash and we have specification content,
174
- // we need to wait for the content to load before scrolling
175
- const { hash } = window.location;
176
- if (this.hasSpecificationContent() && hash) {
177
- // Reset the scroll flag to allow scrolling once content is loaded
178
- this.didScrollToSelectedHash = false;
179
- }
180
104
  }
181
105
  });
182
106
  }
183
107
 
184
108
  private getAllTabs(): any[] {
185
- // Return cached result if available
186
- if (this.allTabsCache) {
187
- return this.allTabsCache;
188
- }
189
-
190
- const tabPanelListItem = this.getTabPanelList();
109
+ const tabPanelListItem: any = this.getTabPanelList();
191
110
  if (tabPanelListItem?.shadowRoot) {
192
- this.allTabsCache = Array.from(
111
+ return Array.from(
193
112
  tabPanelListItem.shadowRoot.querySelectorAll(
194
113
  "dx-tab-panel-item"
195
114
  )
196
115
  ).map((tabPanelItem: any) =>
197
116
  tabPanelItem.shadowRoot.querySelector("button")
198
117
  );
199
- } else {
200
- this.allTabsCache = [];
201
118
  }
202
-
203
- return this.allTabsCache;
119
+ return [];
204
120
  }
205
121
 
206
122
  private selectTabById(tabId: string) {
@@ -242,12 +158,8 @@ export default class LwcContentLayout extends ContentLayout {
242
158
  }
243
159
  }
244
160
 
245
- onSlotChange(): void {
246
- this.clearAllCaches();
247
- super.onSlotChange();
248
- }
249
-
250
161
  updateHeadingForRNB(): void {
162
+ // We only need to update URL in case of /docs and ignore if tabs are used anywhere else in DSC
251
163
  if (this.showTabBasedRNB) {
252
164
  this.updateURL();
253
165
  }
@@ -73,7 +73,9 @@
73
73
  <template lwc:if={method.firstArgument}>
74
74
  <tr key={method.name}>
75
75
  <td rowspan={method.arguments.length}>
76
- <span class="code">{method.name}</span>
76
+ <span class="code">
77
+ {method.nameInKebabCase}
78
+ </span>
77
79
  </td>
78
80
  <td rowspan={method.arguments.length}>
79
81
  {method.description}
@@ -98,7 +100,9 @@
98
100
  <template lwc:else>
99
101
  <tr key={method.name}>
100
102
  <td>
101
- <span class="code">{method.name}</span>
103
+ <span class="code">
104
+ {method.nameInKebabCase}
105
+ </span>
102
106
  </td>
103
107
  <td>{method.description}</td>
104
108
  <td colspan="3"></td>
@@ -0,0 +1,261 @@
1
+ /* stylelint-disable selector-class-pattern */
2
+
3
+ /* Table wrapper for overflow handling */
4
+ .doc-table-wrapper {
5
+ margin: 16px 0;
6
+
7
+ /* Ensure sticky positioning context */
8
+ position: relative;
9
+ }
10
+
11
+ /* Only add horizontal scroll when sticky headers are disabled */
12
+ .doc-table-wrapper:not(.doc-table-wrapper--sticky-headers) {
13
+ overflow-x: auto;
14
+ }
15
+
16
+ /* When sticky headers are enabled, remove overflow to allow sticky positioning */
17
+ .doc-table-wrapper--sticky-headers {
18
+ overflow-x: visible;
19
+ }
20
+
21
+ /* GitHub markdown table styles - exact replication */
22
+ .doc-table {
23
+ border-spacing: 0;
24
+ border-collapse: collapse;
25
+ display: table;
26
+ width: max-content;
27
+ max-width: 100%;
28
+ overflow: auto;
29
+ font-size: 14px;
30
+ line-height: 1.45;
31
+ color: #1f2328;
32
+ }
33
+
34
+ /* Table caption - GitHub style */
35
+ .doc-table__caption {
36
+ caption-side: top;
37
+ padding: 8px 0;
38
+ font-weight: 600;
39
+ color: #656d76;
40
+ text-align: left;
41
+ font-size: 14px;
42
+ }
43
+
44
+ /* Header and cell base styles */
45
+ .doc-table__header-cell,
46
+ .doc-table__cell {
47
+ padding: 6px 13px;
48
+ border: 1px solid #d1d9e0;
49
+ }
50
+
51
+ /* Header specific styles */
52
+ .doc-table__header-cell {
53
+ font-weight: 600;
54
+ background-color: #f6f8fa;
55
+ text-align: left;
56
+ }
57
+
58
+ /* Body cell styles */
59
+ .doc-table__cell {
60
+ background-color: #fff;
61
+ }
62
+
63
+ /* Row hover effect - subtle like GitHub */
64
+ .doc-table__row:hover .doc-table__cell {
65
+ background-color: #f6f8fa;
66
+ }
67
+
68
+ /* Sticky headers */
69
+ .doc-table--sticky-headers .doc-table__header-cell {
70
+ position: sticky;
71
+ top: var(--dx-g-doc-header-banner-height, 0);
72
+ z-index: 10;
73
+
74
+ /* Ensure background is maintained when sticky */
75
+ background-color: #f6f8fa;
76
+ }
77
+
78
+ /* Bordered table variant - enhanced GitHub style */
79
+ .doc-table--bordered {
80
+ border: 1px solid #d1d9e0;
81
+ border-radius: 6px;
82
+ overflow: hidden;
83
+ }
84
+
85
+ .doc-table--bordered .doc-table__header-cell:first-child,
86
+ .doc-table--bordered .doc-table__cell:first-child {
87
+ border-left: none;
88
+ }
89
+
90
+ .doc-table--bordered .doc-table__header-cell:last-child,
91
+ .doc-table--bordered .doc-table__cell:last-child {
92
+ border-right: none;
93
+ }
94
+
95
+ /* Striped table variant - GitHub style alternating rows */
96
+ .doc-table--striped .doc-table__row:nth-child(even) .doc-table__cell {
97
+ background-color: #f6f8fa;
98
+ }
99
+
100
+ .doc-table--striped .doc-table__row:nth-child(even):hover .doc-table__cell {
101
+ background-color: #eaeef2;
102
+ }
103
+
104
+ /* Links within table cells - GitHub style */
105
+ .doc-table__cell a {
106
+ color: #0969da;
107
+ text-decoration: none;
108
+ }
109
+
110
+ .doc-table__cell a:hover {
111
+ text-decoration: underline;
112
+ }
113
+
114
+ .doc-table__cell a:visited {
115
+ color: #8250df;
116
+ }
117
+
118
+ /* Code within table cells - GitHub style */
119
+ .doc-table__cell code {
120
+ padding: 0.2em 0.4em;
121
+ margin: 0;
122
+ font-size: 85%;
123
+ white-space: break-spaces;
124
+ background-color: rgb(175 184 193 / 20%);
125
+ border-radius: 6px;
126
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
127
+ "Liberation Mono", Menlo, monospace;
128
+ }
129
+
130
+ /* Strong/bold text in cells */
131
+ .doc-table__cell strong,
132
+ .doc-table__cell b {
133
+ font-weight: 600;
134
+ }
135
+
136
+ /* Emphasis/italic text in cells */
137
+ .doc-table__cell em,
138
+ .doc-table__cell i {
139
+ font-style: italic;
140
+ }
141
+
142
+ /* Empty state - GitHub inspired */
143
+ .doc-table__empty {
144
+ padding: 32px;
145
+ text-align: center;
146
+ border: 1px solid #d1d9e0;
147
+ border-radius: 6px;
148
+ background-color: #f6f8fa;
149
+ margin: 16px 0;
150
+ }
151
+
152
+ .doc-table__empty-message {
153
+ color: #656d76;
154
+ font-style: italic;
155
+ margin: 0;
156
+ font-size: 14px;
157
+ }
158
+
159
+ /* Responsive design - GitHub mobile behavior */
160
+ @media (max-width: 768px) {
161
+ .doc-table-wrapper {
162
+ margin-left: -16px;
163
+ margin-right: -16px;
164
+ }
165
+
166
+ .doc-table {
167
+ font-size: 12px;
168
+ }
169
+
170
+ .doc-table__header-cell,
171
+ .doc-table__cell {
172
+ padding: 4px 8px;
173
+ }
174
+
175
+ /* Adjust sticky header position for mobile */
176
+ .doc-table--sticky-headers .doc-table__header-cell {
177
+ top: var(--dx-g-doc-header-banner-height, 0);
178
+ }
179
+ }
180
+
181
+ /* Dark mode support (GitHub style) */
182
+ @media (prefers-color-scheme: dark) {
183
+ .doc-table {
184
+ color: #f0f6fc;
185
+ }
186
+
187
+ .doc-table__header-cell,
188
+ .doc-table__cell {
189
+ border-color: #30363d;
190
+ }
191
+
192
+ .doc-table__header-cell {
193
+ background-color: #161b22;
194
+ }
195
+
196
+ /* Ensure sticky headers maintain background in dark mode */
197
+ .doc-table--sticky-headers .doc-table__header-cell {
198
+ background-color: #161b22;
199
+ }
200
+
201
+ .doc-table__cell {
202
+ background-color: #0d1117;
203
+ }
204
+
205
+ .doc-table__row:hover .doc-table__cell {
206
+ background-color: #161b22;
207
+ }
208
+
209
+ .doc-table--striped .doc-table__row:nth-child(even) .doc-table__cell {
210
+ background-color: #161b22;
211
+ }
212
+
213
+ .doc-table--striped .doc-table__row:nth-child(even):hover .doc-table__cell {
214
+ background-color: #21262d;
215
+ }
216
+
217
+ .doc-table__caption {
218
+ color: #8b949e;
219
+ }
220
+
221
+ .doc-table__empty {
222
+ background-color: #161b22;
223
+ border-color: #30363d;
224
+ }
225
+
226
+ .doc-table__empty-message {
227
+ color: #8b949e;
228
+ }
229
+
230
+ .doc-table__cell a {
231
+ color: #58a6ff;
232
+ }
233
+
234
+ .doc-table__cell a:visited {
235
+ color: #bc8cff;
236
+ }
237
+
238
+ .doc-table__cell code {
239
+ background-color: rgb(110 118 129 / 40%);
240
+ }
241
+ }
242
+
243
+ /* High contrast mode support */
244
+ @media (prefers-contrast: high) {
245
+ .doc-table__header-cell,
246
+ .doc-table__cell {
247
+ border: 1px solid;
248
+ }
249
+
250
+ .doc-table__row:hover .doc-table__cell {
251
+ background-color: highlight;
252
+ color: highlighttext;
253
+ }
254
+ }
255
+
256
+ /* Reduced motion support */
257
+ @media (prefers-reduced-motion: reduce) {
258
+ .doc-table__row:hover .doc-table__cell {
259
+ transition: none;
260
+ }
261
+ }
@@ -0,0 +1,46 @@
1
+ <template>
2
+ <div class={wrapperClasses} if:true={hasData}>
3
+ <table class={tableClasses}>
4
+ <!-- Caption -->
5
+ <caption if:true={caption} class="doc-table__caption">
6
+ {caption}
7
+ </caption>
8
+ <!-- Table Header -->
9
+ <thead class="doc-table__head">
10
+ <tr class="doc-table__header-row">
11
+ <th
12
+ for:each={columns}
13
+ for:item="column"
14
+ key={column.key}
15
+ class="doc-table__header-cell"
16
+ scope="col"
17
+ >
18
+ {column.label}
19
+ </th>
20
+ </tr>
21
+ </thead>
22
+ <!-- Table Body -->
23
+ <tbody class="doc-table__body">
24
+ <tr
25
+ for:each={processedRows}
26
+ for:item="row"
27
+ key={row.id}
28
+ class="doc-table__row"
29
+ >
30
+ <td
31
+ for:each={row.cells}
32
+ for:item="cell"
33
+ key={cell.key}
34
+ class="doc-table__cell"
35
+ >
36
+ {cell.value}
37
+ </td>
38
+ </tr>
39
+ </tbody>
40
+ </table>
41
+ </div>
42
+ <!-- Empty state -->
43
+ <div class="doc-table__empty" if:false={hasData}>
44
+ <p class="doc-table__empty-message">No data available</p>
45
+ </div>
46
+ </template>
@@ -0,0 +1,175 @@
1
+ import { LightningElement, api } from "lwc";
2
+
3
+ interface TableColumn {
4
+ key: string;
5
+ label: string;
6
+ type?: "text" | "link" | "html";
7
+ }
8
+
9
+ interface TableRow {
10
+ [key: string]: any;
11
+ }
12
+
13
+ interface TableData {
14
+ columns: TableColumn[];
15
+ rows: TableRow[];
16
+ }
17
+
18
+ export default class Table extends LightningElement {
19
+ @api caption: string = "";
20
+
21
+ private _striped: boolean = false;
22
+ private _bordered: boolean = false;
23
+ private _stickyHeaders: boolean = false;
24
+
25
+ @api
26
+ get striped(): boolean {
27
+ return this._striped;
28
+ }
29
+ set striped(value: boolean | string) {
30
+ this._striped = this.toBooleanValue(value);
31
+ }
32
+
33
+ @api
34
+ get bordered(): boolean {
35
+ return this._bordered;
36
+ }
37
+ set bordered(value: boolean | string) {
38
+ this._bordered = this.toBooleanValue(value);
39
+ }
40
+
41
+ @api
42
+ get stickyHeaders(): boolean {
43
+ return this._stickyHeaders;
44
+ }
45
+ set stickyHeaders(value: boolean | string) {
46
+ this._stickyHeaders = this.toBooleanValue(value);
47
+ }
48
+
49
+ private _tableData: TableData = { columns: [], rows: [] };
50
+
51
+ @api
52
+ get tableData(): string | TableData {
53
+ return this._tableData;
54
+ }
55
+
56
+ set tableData(value: string | TableData) {
57
+ if (typeof value === "string") {
58
+ // Handle the case where object is stringified as "[object Object]"
59
+ if (value === "[object Object]") {
60
+ console.error(
61
+ "Invalid JSON provided to table component: Object was not properly serialized. Use property binding (.table-data) instead of attribute binding (table-data) for objects."
62
+ );
63
+ this._tableData = { columns: [], rows: [] };
64
+ return;
65
+ }
66
+
67
+ try {
68
+ this._tableData = JSON.parse(value);
69
+ } catch (error) {
70
+ console.error(
71
+ "Invalid JSON provided to table component:",
72
+ error
73
+ );
74
+ this._tableData = { columns: [], rows: [] };
75
+ }
76
+ } else if (value) {
77
+ this._tableData = value as TableData;
78
+ } else {
79
+ this._tableData = { columns: [], rows: [] };
80
+ }
81
+ }
82
+
83
+ get columns(): TableColumn[] {
84
+ return this._tableData?.columns || [];
85
+ }
86
+
87
+ get rows(): TableRow[] {
88
+ return this._tableData?.rows || [];
89
+ }
90
+
91
+ get hasData(): boolean {
92
+ return this.columns.length > 0 && this.rows.length > 0;
93
+ }
94
+
95
+ get wrapperClasses(): string {
96
+ const classes = ["doc-table-wrapper"];
97
+
98
+ if (this.stickyHeaders) {
99
+ classes.push("doc-table-wrapper--sticky-headers");
100
+ }
101
+
102
+ return classes.join(" ");
103
+ }
104
+
105
+ get tableClasses(): string {
106
+ const classes = ["doc-table"];
107
+
108
+ if (this.striped) {
109
+ classes.push("doc-table--striped");
110
+ }
111
+
112
+ if (this.bordered) {
113
+ classes.push("doc-table--bordered");
114
+ }
115
+
116
+ if (this.stickyHeaders) {
117
+ classes.push("doc-table--sticky-headers");
118
+ }
119
+ return classes.join(" ");
120
+ }
121
+
122
+ get processedRows(): Array<{
123
+ id: string;
124
+ cells: Array<{ key: string; value: any; type: string }>;
125
+ }> {
126
+ return this.rows.map((row, index) => ({
127
+ id: `row-${index}`,
128
+ cells: this.columns.map((column) => ({
129
+ key: column.key,
130
+ value: row[column.key] || "",
131
+ type: column.type || "text"
132
+ }))
133
+ }));
134
+ }
135
+
136
+ private renderCellContent(value: any, type: string): string {
137
+ if (value === null || value === undefined) {
138
+ return "";
139
+ }
140
+
141
+ switch (type) {
142
+ case "html":
143
+ return value.toString();
144
+ case "link":
145
+ if (typeof value === "object" && value.url && value.text) {
146
+ return `<a href="${value.url}" target="_blank" rel="noopener noreferrer">${value.text}</a>`;
147
+ }
148
+ return value.toString();
149
+ case "text":
150
+ default:
151
+ return value.toString();
152
+ }
153
+ }
154
+
155
+ // Method to handle cell content rendering in the template
156
+ getCellContent(value: any, type: string): string {
157
+ return this.renderCellContent(value, type);
158
+ }
159
+
160
+ // Method to check if cell content should be rendered as HTML
161
+ isHtmlCell(type: string): boolean {
162
+ return type === "html" || type === "link";
163
+ }
164
+
165
+ // Helper method to convert string/boolean values to boolean
166
+ private toBooleanValue(value: boolean | string): boolean {
167
+ if (typeof value === "boolean") {
168
+ return value;
169
+ }
170
+ if (typeof value === "string") {
171
+ return value.toLowerCase() === "true";
172
+ }
173
+ return false;
174
+ }
175
+ }
package/LICENSE DELETED
@@ -1,12 +0,0 @@
1
- Copyright (c) 2020, Salesforce.com, Inc.
2
- All rights reserved.
3
-
4
- Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5
-
6
- * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
7
-
8
- * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
9
-
10
- * Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
11
-
12
- THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.