@salesforcedevs/docs-components 1.17.13-table-2 → 1.18.0

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* 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.
+
+* 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.
+
+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.

package/lwc.config.json

@@ -11,7 +11,6 @@
         "doc/content",
         "doc/contentCallout",
         "doc/doDont",
-        "doc/table",
         "doc/contentLayout",
         "doc/contentMedia",
         "doc/docXmlContent",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.13-table-2",
+    "version": "1.18.0",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
+    "gitHead": "356246059688070ad1c23baf2a84839ab4e27b6a"
 }

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -248,65 +248,41 @@ export default class ContentLayout extends LightningElement {
             const docHeaderHeight = docHeaderEl.getBoundingClientRect().height;
             const totalHeaderHeight = globalNavHeight + docHeaderHeight;
 
-            // Collect any banners rendered via the doc-phase and version-banner slots
-            const versionBannerSlot = this.template.querySelector(
-                "[name=version-banner]"
-            ) as any;
-            const docPhaseSlot = this.template.querySelector(
-                "[name=doc-phase]"
-            ) as any;
-            const versionBannerEls = (
-                versionBannerSlot
-                    ? (versionBannerSlot.assignedElements() as HTMLElement[])
-                    : []
-            ) as HTMLElement[];
-            const docPhaseEls = (
-                docPhaseSlot
-                    ? (docPhaseSlot.assignedElements() as HTMLElement[])
-                    : []
-            ) as HTMLElement[];
-            const bannersTotalHeight = [
-                ...versionBannerEls,
-                ...docPhaseEls
-            ].reduce(
-                (sum, el) => sum + (el?.getBoundingClientRect()?.height || 0),
-                0
-            );
-
             // Selecting the doc section heading and RNB here.
             const docHeadingEls = Array.from(
                 document.querySelectorAll("doc-heading")
             );
             const rightNavBarEl = this.template.querySelector(".right-nav-bar");
 
-            (sidebarEl as HTMLElement).style.setProperty(
+            sidebarEl.style.setProperty(
                 "--dx-c-content-sidebar-sticky-top",
-                `${totalHeaderHeight}px`
+                `${globalNavHeight + docHeaderHeight}px`
             );
 
             docHeaderEl.style.setProperty(
                 "--dx-g-global-header-height",
                 `${globalNavHeight}px`
             );
-            // Expose heights as CSS variables for sticky offsets used by page content
-            const rootStyle = document.documentElement.style;
-            rootStyle.setProperty(
-                "--dx-g-doc-header-banner-height",
-                `${docHeaderHeight + bannersTotalHeight}px`
-            );
 
             // Adjusting the doc section heading on scroll.
             docHeadingEls.forEach((docHeadingEl) => {
-                (docHeadingEl as any).style.scrollMarginTop = `${
-                    totalHeaderHeight + bannersTotalHeight + 40
-                }px`;
+                (docHeadingEl as any).style.scrollMarginTop = docPhaseEl
+                    ? `${
+                          totalHeaderHeight +
+                          docPhaseEl.getBoundingClientRect().height +
+                          40
+                      }px`
+                    : `${totalHeaderHeight + 40}px`;
             });
 
             // Adjusting the right nav bar on scroll.
             if (rightNavBarEl) {
-                (rightNavBarEl as HTMLElement).style.top = `${
-                    totalHeaderHeight + bannersTotalHeight
-                }px`;
+                rightNavBarEl.style.top = docPhaseEl
+                    ? `${
+                          totalHeaderHeight +
+                          docPhaseEl.getBoundingClientRect().height
+                      }px`
+                    : `${totalHeaderHeight}px`;
             }
 
             // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).

package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts

@@ -2,44 +2,111 @@ import ContentLayout from "doc/contentLayout";
 
 const TOC_HEADER_TAG = "doc-heading";
 const RNB_BY_TAB = "docs-tab";
-const SPECIFICATION_TAB_TITLE = "Specification";
+const SPECIFICATION_TAG = "doc-specification-content";
 export const OBSERVER_ATTACH_WAIT_TIME = 500;
 
 export default class LwcContentLayout extends ContentLayout {
     private rnbByTab: boolean = false;
 
+    // DOM element caches to avoid repeated queries
+    private tabPanelListCache: any = null;
+    private hasSpecContentCache: boolean | null = null;
+    private allTabsCache: any[] | null = null;
+    private mainSlotCache: any = null;
+
     private setRNBByTab() {
-        const tabPanelListItem: any = this.getTabPanelList();
-        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB ? true : false;
+        const tabPanelListItem = this.getTabPanelList();
+        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB;
     }
 
     get showTabBasedRNB() {
         return this.rnbByTab;
     }
 
+    /**
+     * Check if the main slot contains doc-specification-content
+     * Uses caching to avoid repeated DOM queries
+     */
+    private hasSpecificationContent(): boolean {
+        if (this.hasSpecContentCache !== null) {
+            return this.hasSpecContentCache;
+        }
+
+        const mainSlot = this.getMainSlot();
+        if (mainSlot) {
+            const assignedElements = (mainSlot as any).assignedElements();
+
+            for (const element of assignedElements) {
+                if (
+                    element.tagName === SPECIFICATION_TAG ||
+                    element.querySelector(SPECIFICATION_TAG) ||
+                    element.shadowRoot?.querySelector(SPECIFICATION_TAG)
+                ) {
+                    return (this.hasSpecContentCache = true);
+                }
+            }
+        }
+        return (this.hasSpecContentCache = false);
+    }
+
+    /**
+     * Clear all caches when content changes
+     */
+    private clearAllCaches(): void {
+        this.hasSpecContentCache = null;
+        this.tabPanelListCache = null;
+        this.allTabsCache = null;
+        this.mainSlotCache = null;
+    }
+
+    /**
+     * Get the main slot element with caching
+     */
+    private getMainSlot(): any {
+        if (!this.mainSlotCache) {
+            this.mainSlotCache =
+                this.template.querySelector("slot:not([name])");
+        }
+        return this.mainSlotCache;
+    }
+
+    /**
+     * Get tab panel list with caching
+     */
+    private getTabPanelList(): any {
+        if (!this.tabPanelListCache) {
+            // eslint-disable-next-line @lwc/lwc/no-document-query
+            this.tabPanelListCache =
+                document.querySelector("dx-tab-panel-list");
+        }
+        return this.tabPanelListCache;
+    }
+
     onRNBClick = (event: CustomEvent) => {
         event.stopPropagation();
-        const currentTab = this.getSelectedTabId();
-        if (currentTab === SPECIFICATION_TAB_TITLE) {
+        if (this.hasSpecificationContent()) {
             this.didScrollToSelectedHash = false;
         }
     };
 
     onTabChanged = () => {
         this.updateRNB();
-    };
 
-    private getTabPanelList() {
-        // eslint-disable-next-line @lwc/lwc/no-document-query
-        return document.querySelector("dx-tab-panel-list");
-    }
+        const { hash } = window.location;
+        if (this.hasSpecificationContent() && hash) {
+            this.didScrollToSelectedHash = false;
+
+            requestAnimationFrame(() => this.updateHeadingForRNB());
+        }
+    };
 
     protected getHeadingElements() {
         let headingElements = super.getHeadingElements();
         if (this.showTabBasedRNB) {
-            const tabPanelListItem: any = this.getTabPanelList();
+            const tabPanelListItem = this.getTabPanelList();
             const tabPanels =
                 tabPanelListItem?.querySelectorAll("dx-tab-panel");
+
             for (const tabPanelItem of tabPanels) {
                 if (tabPanelItem.active) {
                     // This is needed for Specification tab content
@@ -65,6 +132,7 @@ export default class LwcContentLayout extends ContentLayout {
     private updateURL() {
         const tabs = this.getAllTabs();
         const selectedTabId = this.getSelectedTabId();
+
         tabs.forEach((tab: any) => {
             if (tab.getAttribute("aria-selected") === "true") {
                 const tabID = tab.getAttribute("aria-label");
@@ -101,22 +169,38 @@ export default class LwcContentLayout extends ContentLayout {
             const selectedTabId = this.getSelectedTabId();
             if (selectedTabId) {
                 this.selectTabById(selectedTabId);
+
+                // If there's a hash and we have specification content,
+                // we need to wait for the content to load before scrolling
+                const { hash } = window.location;
+                if (this.hasSpecificationContent() && hash) {
+                    // Reset the scroll flag to allow scrolling once content is loaded
+                    this.didScrollToSelectedHash = false;
+                }
             }
         });
     }
 
     private getAllTabs(): any[] {
-        const tabPanelListItem: any = this.getTabPanelList();
+        // Return cached result if available
+        if (this.allTabsCache) {
+            return this.allTabsCache;
+        }
+
+        const tabPanelListItem = this.getTabPanelList();
         if (tabPanelListItem?.shadowRoot) {
-            return Array.from(
+            this.allTabsCache = Array.from(
                 tabPanelListItem.shadowRoot.querySelectorAll(
                     "dx-tab-panel-item"
                 )
             ).map((tabPanelItem: any) =>
                 tabPanelItem.shadowRoot.querySelector("button")
             );
+        } else {
+            this.allTabsCache = [];
         }
-        return [];
+
+        return this.allTabsCache;
     }
 
     private selectTabById(tabId: string) {
@@ -158,8 +242,12 @@ export default class LwcContentLayout extends ContentLayout {
         }
     }
 
+    onSlotChange(): void {
+        this.clearAllCaches();
+        super.onSlotChange();
+    }
+
     updateHeadingForRNB(): void {
-        // We only need to update URL in case of /docs and ignore if tabs are used anywhere else in DSC
         if (this.showTabBasedRNB) {
             this.updateURL();
         }

package/src/modules/doc/specificationContent/specificationContent.html

@@ -73,9 +73,7 @@
                         <template lwc:if={method.firstArgument}>
                             <tr key={method.name}>
                                 <td rowspan={method.arguments.length}>
-                                    <span class="code">
-                                        {method.nameInKebabCase}
-                                    </span>
+                                    <span class="code">{method.name}</span>
                                 </td>
                                 <td rowspan={method.arguments.length}>
                                     {method.description}
@@ -100,9 +98,7 @@
                         <template lwc:else>
                             <tr key={method.name}>
                                 <td>
-                                    <span class="code">
-                                        {method.nameInKebabCase}
-                                    </span>
+                                    <span class="code">{method.name}</span>
                                 </td>
                                 <td>{method.description}</td>
                                 <td colspan="3"></td>

package/src/modules/doc/table/table.css

@@ -1,267 +0,0 @@
-/* stylelint-disable selector-class-pattern */
-
-/* Table wrapper for overflow handling */
-.doc-table-wrapper {
-    margin: 16px 0;
-
-    /* Ensure sticky positioning context */
-    position: relative;
-}
-
-/* Only add horizontal scroll when sticky headers are disabled */
-.doc-table-wrapper:not(.doc-table-wrapper--sticky-headers) {
-    overflow-x: auto;
-}
-
-/* When sticky headers are enabled, remove overflow to allow sticky positioning */
-.doc-table-wrapper--sticky-headers {
-    overflow-x: visible;
-}
-
-/* GitHub markdown table styles - exact replication */
-.doc-table {
-    border-spacing: 0;
-    border-collapse: collapse;
-    display: table;
-    width: max-content;
-    max-width: 100%;
-    overflow: auto;
-    font-size: 14px;
-    line-height: 1.45;
-    color: #1f2328;
-}
-
-/* Table caption - GitHub style */
-.doc-table__caption {
-    caption-side: top;
-    padding: 8px 0;
-    font-weight: 600;
-    color: #656d76;
-    text-align: left;
-    font-size: 14px;
-}
-
-/* Header and cell base styles */
-.doc-table__header-cell,
-.doc-table__cell {
-    padding: 6px 13px;
-    border: 1px solid #d1d9e0;
-}
-
-/* Header specific styles */
-.doc-table__header-cell {
-    font-weight: 600;
-    background-color: #f6f8fa;
-    text-align: left;
-}
-
-/* Body cell styles */
-.doc-table__cell {
-    background-color: #fff;
-}
-
-/* Row hover effect - subtle like GitHub */
-.doc-table__row:hover .doc-table__cell {
-    background-color: #f6f8fa;
-}
-
-/* Sticky headers */
-.doc-table--sticky-headers .doc-table__header-cell {
-    position: sticky;
-    top: calc(
-        var(--dx-g-global-header-height) +
-            var(--dx-g-doc-header-banner-height, 0px)
-    );
-    z-index: 10;
-
-    /* Ensure background is maintained when sticky */
-    background-color: #f6f8fa;
-}
-
-/* Bordered table variant - enhanced GitHub style */
-.doc-table--bordered {
-    border: 1px solid #d1d9e0;
-    border-radius: 6px;
-    overflow: hidden;
-}
-
-.doc-table--bordered .doc-table__header-cell:first-child,
-.doc-table--bordered .doc-table__cell:first-child {
-    border-left: none;
-}
-
-.doc-table--bordered .doc-table__header-cell:last-child,
-.doc-table--bordered .doc-table__cell:last-child {
-    border-right: none;
-}
-
-/* Striped table variant - GitHub style alternating rows */
-.doc-table--striped .doc-table__row:nth-child(even) .doc-table__cell {
-    background-color: #f6f8fa;
-}
-
-.doc-table--striped .doc-table__row:nth-child(even):hover .doc-table__cell {
-    background-color: #eaeef2;
-}
-
-/* Links within table cells - GitHub style */
-.doc-table__cell a {
-    color: #0969da;
-    text-decoration: none;
-}
-
-.doc-table__cell a:hover {
-    text-decoration: underline;
-}
-
-.doc-table__cell a:visited {
-    color: #8250df;
-}
-
-/* Code within table cells - GitHub style */
-.doc-table__cell code {
-    padding: 0.2em 0.4em;
-    margin: 0;
-    font-size: 85%;
-    white-space: break-spaces;
-    background-color: rgb(175 184 193 / 20%);
-    border-radius: 6px;
-    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
-        "Liberation Mono", Menlo, monospace;
-}
-
-/* Strong/bold text in cells */
-.doc-table__cell strong,
-.doc-table__cell b {
-    font-weight: 600;
-}
-
-/* Emphasis/italic text in cells */
-.doc-table__cell em,
-.doc-table__cell i {
-    font-style: italic;
-}
-
-/* Empty state - GitHub inspired */
-.doc-table__empty {
-    padding: 32px;
-    text-align: center;
-    border: 1px solid #d1d9e0;
-    border-radius: 6px;
-    background-color: #f6f8fa;
-    margin: 16px 0;
-}
-
-.doc-table__empty-message {
-    color: #656d76;
-    font-style: italic;
-    margin: 0;
-    font-size: 14px;
-}
-
-/* Responsive design - GitHub mobile behavior */
-@media (max-width: 768px) {
-    .doc-table-wrapper {
-        margin-left: -16px;
-        margin-right: -16px;
-    }
-
-    .doc-table {
-        font-size: 12px;
-    }
-
-    .doc-table__header-cell,
-    .doc-table__cell {
-        padding: 4px 8px;
-    }
-
-    /* Adjust sticky header position for mobile */
-    .doc-table--sticky-headers .doc-table__header-cell {
-        top: calc(
-            var(--dx-g-global-header-height) +
-                var(--dx-g-doc-header-banner-height, 0px)
-        );
-    }
-}
-
-/* Dark mode support (GitHub style) */
-@media (prefers-color-scheme: dark) {
-    .doc-table {
-        color: #f0f6fc;
-    }
-
-    .doc-table__header-cell,
-    .doc-table__cell {
-        border-color: #30363d;
-    }
-
-    .doc-table__header-cell {
-        background-color: #161b22;
-    }
-
-    /* Ensure sticky headers maintain background in dark mode */
-    .doc-table--sticky-headers .doc-table__header-cell {
-        background-color: #161b22;
-    }
-
-    .doc-table__cell {
-        background-color: #0d1117;
-    }
-
-    .doc-table__row:hover .doc-table__cell {
-        background-color: #161b22;
-    }
-
-    .doc-table--striped .doc-table__row:nth-child(even) .doc-table__cell {
-        background-color: #161b22;
-    }
-
-    .doc-table--striped .doc-table__row:nth-child(even):hover .doc-table__cell {
-        background-color: #21262d;
-    }
-
-    .doc-table__caption {
-        color: #8b949e;
-    }
-
-    .doc-table__empty {
-        background-color: #161b22;
-        border-color: #30363d;
-    }
-
-    .doc-table__empty-message {
-        color: #8b949e;
-    }
-
-    .doc-table__cell a {
-        color: #58a6ff;
-    }
-
-    .doc-table__cell a:visited {
-        color: #bc8cff;
-    }
-
-    .doc-table__cell code {
-        background-color: rgb(110 118 129 / 40%);
-    }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-    .doc-table__header-cell,
-    .doc-table__cell {
-        border: 1px solid;
-    }
-
-    .doc-table__row:hover .doc-table__cell {
-        background-color: highlight;
-        color: highlighttext;
-    }
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-    .doc-table__row:hover .doc-table__cell {
-        transition: none;
-    }
-}

package/src/modules/doc/table/table.html

@@ -1,46 +0,0 @@
-<template>
-    <div class={wrapperClasses} if:true={hasData}>
-        <table class={tableClasses}>
-            <!-- Caption -->
-            <caption if:true={caption} class="doc-table__caption">
-                {caption}
-            </caption>
-            <!-- Table Header -->
-            <thead class="doc-table__head">
-                <tr class="doc-table__header-row">
-                    <th
-                        for:each={columns}
-                        for:item="column"
-                        key={column.key}
-                        class="doc-table__header-cell"
-                        scope="col"
-                    >
-                        {column.label}
-                    </th>
-                </tr>
-            </thead>
-            <!-- Table Body -->
-            <tbody class="doc-table__body">
-                <tr
-                    for:each={processedRows}
-                    for:item="row"
-                    key={row.id}
-                    class="doc-table__row"
-                >
-                    <td
-                        for:each={row.cells}
-                        for:item="cell"
-                        key={cell.key}
-                        class="doc-table__cell"
-                    >
-                        {cell.value}
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <!-- Empty state -->
-    <div class="doc-table__empty" if:false={hasData}>
-        <p class="doc-table__empty-message">No data available</p>
-    </div>
-</template>

package/src/modules/doc/table/table.ts

@@ -1,175 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-interface TableColumn {
-    key: string;
-    label: string;
-    type?: "text" | "link" | "html";
-}
-
-interface TableRow {
-    [key: string]: any;
-}
-
-interface TableData {
-    columns: TableColumn[];
-    rows: TableRow[];
-}
-
-export default class Table extends LightningElement {
-    @api caption: string = "";
-
-    private _striped: boolean = false;
-    private _bordered: boolean = false;
-    private _stickyHeaders: boolean = false;
-
-    @api
-    get striped(): boolean {
-        return this._striped;
-    }
-    set striped(value: boolean | string) {
-        this._striped = this.toBooleanValue(value);
-    }
-
-    @api
-    get bordered(): boolean {
-        return this._bordered;
-    }
-    set bordered(value: boolean | string) {
-        this._bordered = this.toBooleanValue(value);
-    }
-
-    @api
-    get stickyHeaders(): boolean {
-        return this._stickyHeaders;
-    }
-    set stickyHeaders(value: boolean | string) {
-        this._stickyHeaders = this.toBooleanValue(value);
-    }
-
-    private _tableData: TableData = { columns: [], rows: [] };
-
-    @api
-    get tableData(): string | TableData {
-        return this._tableData;
-    }
-
-    set tableData(value: string | TableData) {
-        if (typeof value === "string") {
-            // Handle the case where object is stringified as "[object Object]"
-            if (value === "[object Object]") {
-                console.error(
-                    "Invalid JSON provided to table component: Object was not properly serialized. Use property binding (.table-data) instead of attribute binding (table-data) for objects."
-                );
-                this._tableData = { columns: [], rows: [] };
-                return;
-            }
-
-            try {
-                this._tableData = JSON.parse(value);
-            } catch (error) {
-                console.error(
-                    "Invalid JSON provided to table component:",
-                    error
-                );
-                this._tableData = { columns: [], rows: [] };
-            }
-        } else if (value) {
-            this._tableData = value as TableData;
-        } else {
-            this._tableData = { columns: [], rows: [] };
-        }
-    }
-
-    get columns(): TableColumn[] {
-        return this._tableData?.columns || [];
-    }
-
-    get rows(): TableRow[] {
-        return this._tableData?.rows || [];
-    }
-
-    get hasData(): boolean {
-        return this.columns.length > 0 && this.rows.length > 0;
-    }
-
-    get wrapperClasses(): string {
-        const classes = ["doc-table-wrapper"];
-
-        if (this.stickyHeaders) {
-            classes.push("doc-table-wrapper--sticky-headers");
-        }
-
-        return classes.join(" ");
-    }
-
-    get tableClasses(): string {
-        const classes = ["doc-table"];
-
-        if (this.striped) {
-            classes.push("doc-table--striped");
-        }
-
-        if (this.bordered) {
-            classes.push("doc-table--bordered");
-        }
-
-        if (this.stickyHeaders) {
-            classes.push("doc-table--sticky-headers");
-        }
-        return classes.join(" ");
-    }
-
-    get processedRows(): Array<{
-        id: string;
-        cells: Array<{ key: string; value: any; type: string }>;
-    }> {
-        return this.rows.map((row, index) => ({
-            id: `row-${index}`,
-            cells: this.columns.map((column) => ({
-                key: column.key,
-                value: row[column.key] || "",
-                type: column.type || "text"
-            }))
-        }));
-    }
-
-    private renderCellContent(value: any, type: string): string {
-        if (value === null || value === undefined) {
-            return "";
-        }
-
-        switch (type) {
-            case "html":
-                return value.toString();
-            case "link":
-                if (typeof value === "object" && value.url && value.text) {
-                    return `<a href="${value.url}" target="_blank" rel="noopener noreferrer">${value.text}</a>`;
-                }
-                return value.toString();
-            case "text":
-            default:
-                return value.toString();
-        }
-    }
-
-    // Method to handle cell content rendering in the template
-    getCellContent(value: any, type: string): string {
-        return this.renderCellContent(value, type);
-    }
-
-    // Method to check if cell content should be rendered as HTML
-    isHtmlCell(type: string): boolean {
-        return type === "html" || type === "link";
-    }
-
-    // Helper method to convert string/boolean values to boolean
-    private toBooleanValue(value: boolean | string): boolean {
-        if (typeof value === "boolean") {
-            return value;
-        }
-        if (typeof value === "string") {
-            return value.toLowerCase() === "true";
-        }
-        return false;
-    }
-}