kempo-ui 0.4.20 → 0.4.21

package/docs/components/tableControls.html

@@ -540,14 +540,14 @@
     <p>The table component supports controls at both the top and bottom. These controls can handle pagination, adding new records, or other actions. They are web components that interact with their parent <code>k-table</code> by accessing its methods and listening for its events.</p>
     <p>Controls without a slot will be placed at the bottom of the table by default, to place a control on the top of the table give it a <code>slot="top"</code>.</p>
 
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"topBottomControlsExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-export-json</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-export-csv</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-export-csv</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/tableControls/ExportJson.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/tableControls/ExportCsv.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'topBottomControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"topBottomControlsExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-export-json</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-export-csv</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-export-csv</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/controls/TcExportJson.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/controls/TcExportCsv.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'topBottomControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     
     <k-table id="topBottomControlsExample">
-      <k-tc-export-json slot="top"></k-tc-export-json>
-      <k-tc-export-csv></k-tc-export-csv>
+      <kc-tc-export-json slot="top"></kc-tc-export-json>
+      <kc-tc-export-csv></kc-tc-export-csv>
     </k-table>
-    <script type="module" src="../src/components/tableControls/ExportJson.js"></script>
-    <script type="module" src="../src/components/tableControls/ExportCsv.js"></script>
+    <script type="module" src="../src/components/controls/TcExportJson.js"></script>
+    <script type="module" src="../src/components/controls/TcExportCsv.js"></script>
     <script type="module">
       await window.customElements.whenDefined('k-table');
       document.getElementById('topBottomControlsExample').setRecords(contacts);

package/docs/components/tableCustomFields.html

@@ -591,10 +591,10 @@
     <h3>Non-Editable Fields</h3>
     <p>Set <code>editable: false</code> on a field definition to make it read-only when a row is in edit mode. The cell displays its value normally — no input is rendered. This is useful for fields like IDs that should never be changed by the user.</p>
 
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">editableFieldExample</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">after</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-edit</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;editableFieldExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">records</span>: [{<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Alice&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;New York&#x27;</span><br>    }, {<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Bob&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Los Angeles&#x27;</span><br>    }, {<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Charlie&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Chicago&#x27;</span><br>    }],<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;id&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;ID&#x27;</span>,<br>      <span class="hljs-attr">editable</span>: <span class="hljs-literal">false</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;city&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;City&#x27;</span><br>    }]<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">editableFieldExample</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">after</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-edit</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;editableFieldExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">records</span>: [{<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Alice&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;New York&#x27;</span><br>    }, {<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Bob&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Los Angeles&#x27;</span><br>    }, {<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Charlie&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Chicago&#x27;</span><br>    }],<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;id&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;ID&#x27;</span>,<br>      <span class="hljs-attr">editable</span>: <span class="hljs-literal">false</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;city&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;City&#x27;</span><br>    }]<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
 
     <k-table id="editableFieldExample">
-      <k-tc-edit slot="after"></k-tc-edit>
+      <kc-tc-edit slot="after"></kc-tc-edit>
     </k-table>
     <script type="module">
       await window.customElements.whenDefined('k-table');
@@ -617,7 +617,7 @@
   <script type="module" src="../src/components/Main.js"></script>
   
     <script type="module" src="../src/components/Table.js"></script>
-    <script type="module" src="../src/components/tableControls/Edit.js"></script>
+    <script type="module" src="../src/components/controls/TcEdit.js"></script>
   
 </body>
 </html>

package/docs/components/tableFetchRecords.html

@@ -540,7 +540,7 @@
     <p>The <code>setupFetchRecords</code> function is used to configure the table to fetch records dynamically. It takes two parameters: the total number of records and a function that fetching records. It should be an asynconous function that returns/resolves an array of records that will populate the table.</p>
     <p>In this example, the <code>simulateFetchRecords</code> function generates a specified number of random contact records and resolves the promise after a delay, simulating an asynchronous fetch operation.
     </p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"fetchRecordsExample"</span><br />  <span class="hljs-attr">enable-pages</span>=<span class="hljs-string">"true"</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-first-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-prev-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-next-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-last-page</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-select</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-size</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/tableControls/FirstPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/tableControls/PrevPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/tableControls/NextPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/tableControls/LastPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/tableControls/PageSelect.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/tableControls/PageSize.js'</span>;<br /><br />  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">simulateFetchRecords</span>(<span class="hljs-params">start, count</span>)</span>{<br />    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {<br />      <span class="hljs-keyword">const</span> newRecords = [];<br />      <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>; i&lt;count; i++){<br />        newRecords.push(generateContact());<br />      }<br />      setTimeout(<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>res(newRecords), <span class="hljs-number">1000</span>);<br />    });<br />  }<br /><br />  <span class="hljs-keyword">const</span> $table = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fetchRecordsExample'</span>);<br />  <br />  $table.setRecords(contacts);<br />  $table.setupFetchRecords(<span class="hljs-number">100</span>, simulateFetchRecords);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"fetchRecordsExample"</span><br />  <span class="hljs-attr">enable-pages</span>=<span class="hljs-string">"true"</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-first-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-prev-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-next-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-last-page</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-page-select</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-page-size</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/controls/TcFirstPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/controls/TcPrevPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/controls/TcNextPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/controls/TcLastPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/controls/TcPageSelect.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/controls/TcPageSize.js'</span>;<br /><br />  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">simulateFetchRecords</span>(<span class="hljs-params">start, count</span>)</span>{<br />    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {<br />      <span class="hljs-keyword">const</span> newRecords = [];<br />      <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>; i&lt;count; i++){<br />        newRecords.push(generateContact());<br />      }<br />      setTimeout(<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>res(newRecords), <span class="hljs-number">1000</span>);<br />    });<br />  }<br /><br />  <span class="hljs-keyword">const</span> $table = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fetchRecordsExample'</span>);<br />  <br />  $table.setRecords(contacts);<br />  $table.setupFetchRecords(<span class="hljs-number">100</span>, simulateFetchRecords);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table
       id="fetchRecordsExample"
       enable-pages="true"
@@ -548,28 +548,28 @@
     >
       <div class="d-f full">
         <div>
-          <k-tc-first-page></k-tc-first-page>
-          <k-tc-prev-page></k-tc-prev-page>
-          <k-tc-next-page></k-tc-next-page>
-          <k-tc-last-page></k-tc-last-page>
+          <kc-tc-first-page></kc-tc-first-page>
+          <kc-tc-prev-page></kc-tc-prev-page>
+          <kc-tc-next-page></kc-tc-next-page>
+          <kc-tc-last-page></kc-tc-last-page>
         </div>
         <div class="flex"></div>
         <div>
-          <k-tc-page-select></k-tc-page-select>
+          <kc-tc-page-select></kc-tc-page-select>
         </div>
         <div class="flex"></div>
         <div>
-          <k-tc-page-size></k-tc-page-size>
+          <kc-tc-page-size></kc-tc-page-size>
         </div>
       </div>
     </k-table>
     <script type="module">
-      import '/src/components/tableControls/FirstPage.js';
-      import '/src/components/tableControls/PrevPage.js';
-      import '/src/components/tableControls/NextPage.js';
-      import '/src/components/tableControls/LastPage.js';
-      import '/src/components/tableControls/PageSelect.js';
-      import '/src/components/tableControls/PageSize.js';
+      import '/src/components/controls/TcFirstPage.js';
+      import '/src/components/controls/TcPrevPage.js';
+      import '/src/components/controls/TcNextPage.js';
+      import '/src/components/controls/TcLastPage.js';
+      import '/src/components/controls/TcPageSelect.js';
+      import '/src/components/controls/TcPageSize.js';
 
       function simulateFetchRecords(start, count){
         return new Promise(res => {

package/docs/components/tableFieldSortHide.html

@@ -538,12 +538,12 @@
 
     <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
 
-    <p>This example shows how to use the <code>&lt;k-tc-field-sort-hide&gt;</code> component to allow users to show or hide fields in the table, and sort fields.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"fieldVisibilityExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-field-sort-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-field-sort-hide</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/tableControls/FieldSortHide.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fieldVisibilityExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <p>This example shows how to use the <code>&lt;kc-tc-field-sort-hide&gt;</code> component to allow users to show or hide fields in the table, and sort fields.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"fieldVisibilityExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-field-sort-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-field-sort-hide</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/controls/TcFieldSortHide.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fieldVisibilityExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="fieldVisibilityExample">
-      <k-tc-field-sort-hide slot="top"></k-tc-field-sort-hide>
+      <kc-tc-field-sort-hide slot="top"></kc-tc-field-sort-hide>
     </k-table>
-    <script type="module" src="../src/components/tableControls/FieldSortHide.js"></script>
+    <script type="module" src="../src/components/controls/TcFieldSortHide.js"></script>
     <script type="module">
       document.getElementById('fieldVisibilityExample').setRecords(contacts);
     </script>

package/docs/components/tablePagination.html

@@ -538,7 +538,7 @@
         <p>The table component supports pagination, enable it by adding the <code>enable-pages</code> attribute to the <code>k-table</code> element.</p>
     <p>You can optionally set the page size and page size options by setting the <code>page-size</code> and <code>page-size-options</code> attributes respectively. <code>page-size-options</code> must be in the format of an array of numbers (with brackets).</p>
     
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"paginationExample"</span><br />  <span class="hljs-attr">enable-pages</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />  <span class="hljs-attr">page-size-options</span>=<span class="hljs-string">"[5,10,25,50]"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"align-items: center;"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-first-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-prev-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-next-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-last-page</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-select</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-size</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'paginationExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"paginationExample"</span><br />  <span class="hljs-attr">enable-pages</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />  <span class="hljs-attr">page-size-options</span>=<span class="hljs-string">"[5,10,25,50]"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"align-items: center;"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-first-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-prev-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-next-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-last-page</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-page-select</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-page-size</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'paginationExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
 
     <k-table
       id="paginationExample"
@@ -548,18 +548,18 @@
     >
       <div class="d-f full" style="align-items: center;">
         <div>
-          <k-tc-first-page></k-tc-first-page>
-          <k-tc-prev-page></k-tc-prev-page>
-          <k-tc-next-page></k-tc-next-page>
-          <k-tc-last-page></k-tc-last-page>
+          <kc-tc-first-page></kc-tc-first-page>
+          <kc-tc-prev-page></kc-tc-prev-page>
+          <kc-tc-next-page></kc-tc-next-page>
+          <kc-tc-last-page></kc-tc-last-page>
         </div>
         <div class="flex"></div>
         <div>
-          <k-tc-page-select></k-tc-page-select>
+          <kc-tc-page-select></kc-tc-page-select>
         </div>
         <div class="flex"></div>
         <div>
-          <k-tc-page-size></k-tc-page-size>
+          <kc-tc-page-size></kc-tc-page-size>
         </div>
       </div>
     </k-table>
@@ -573,12 +573,12 @@
   <script type="module" src="../src/components/Main.js"></script>
   
     <script type="module" src="../src/components/Table.js"></script>
-    <script type="module" src="../src/components/tableControls/FirstPage.js"></script>
-    <script type="module" src="../src/components/tableControls/PrevPage.js"></script>
-    <script type="module" src="../src/components/tableControls/NextPage.js"></script>
-    <script type="module" src="../src/components/tableControls/LastPage.js"></script>
-    <script type="module" src="../src/components/tableControls/PageSelect.js"></script>
-    <script type="module" src="../src/components/tableControls/PageSize.js"></script>
+    <script type="module" src="../src/components/controls/TcFirstPage.js"></script>
+    <script type="module" src="../src/components/controls/TcPrevPage.js"></script>
+    <script type="module" src="../src/components/controls/TcNextPage.js"></script>
+    <script type="module" src="../src/components/controls/TcLastPage.js"></script>
+    <script type="module" src="../src/components/controls/TcPageSelect.js"></script>
+    <script type="module" src="../src/components/controls/TcPageSize.js"></script>
   
 </body>
 </html>

package/docs/components/tablePlaceholder.html

@@ -540,12 +540,12 @@
 
     <h3>Filtered Placeholder</h3>
     <p>Use <code>filtered-placeholder</code> to show a distinct message when records exist but all are filtered out. Try searching for something that does not match any record below.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">filteredTableExample</span> <span class="hljs-attr">filtered-placeholder</span>=<span class="hljs-string">&#x27;No records match your search.&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">k-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">top</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&#x27;width: 20rem&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-search</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span> <span class="hljs-attr">src</span>=<span class="hljs-string">/src/components/tableControls/Search.js</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;filteredTableExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;city&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;City&#x27;</span><br>    }],<br>    <span class="hljs-attr">records</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Alice&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;New York&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Bob&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Chicago&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Charlie&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Houston&#x27;</span><br>    }]<br>  })<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">filteredTableExample</span> <span class="hljs-attr">filtered-placeholder</span>=<span class="hljs-string">&#x27;No records match your search.&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">top</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&#x27;width: 20rem&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-search</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span> <span class="hljs-attr">src</span>=<span class="hljs-string">/src/components/controls/TcSearch.js</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;filteredTableExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;city&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;City&#x27;</span><br>    }],<br>    <span class="hljs-attr">records</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Alice&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;New York&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Bob&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Chicago&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Charlie&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Houston&#x27;</span><br>    }]<br>  })<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-card label="Result">
       <k-table id="filteredTableExample" filtered-placeholder="No records match your search.">
-        <k-tc-search slot="top" style="width: 20rem"></k-tc-search>
+        <kc-tc-search slot="top" style="width: 20rem"></kc-tc-search>
       </k-table>
-      <script type="module" src="../src/components/tableControls/Search.js"></script>
+      <script type="module" src="../src/components/controls/TcSearch.js"></script>
       <script type="module">
         await window.customElements.whenDefined('k-table');
         document.getElementById('filteredTableExample').setData({

package/docs/components/tableRecordEditing.html

@@ -540,12 +540,12 @@
     <p>You can also define a custom editor by adding a generator function to the <code>Table.editors</code> object that will generate an input (or select). This will be global to all tables on the page.</p>
     <p>You can also define a custom editor on a per-field basis by adding an "editor" generator function to the field object. This will override the global editor for that field.</p>
     
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"recordEditingExample"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-edit</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Table.js'</span>;<br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  Table.editors.tel = <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> {<br />    <span class="hljs-keyword">const</span> $input = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"input"</span>);<br />    $input.value = v;<br />    $input.addEventListener(<span class="hljs-string">'change'</span>, () =&gt; {<br />      $input.value = $input.value.replace(<span class="hljs-regexp">/\D/g</span>, <span class="hljs-string">''</span>); <span class="hljs-comment">// Remove all non-digit characters</span><br />      <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">7</span>) {<br />        $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{4})/</span>, <span class="hljs-string">'$1-$2'</span>);<br />      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">10</span>) {<br />        $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{3})(\d{4})/</span>, <span class="hljs-string">'($1) $2-$3'</span>);<br />      } <span class="hljs-keyword">else</span> {<br />        $input.value = v; <span class="hljs-comment">// Reset to default value if not 7 or 10 digits</span><br />      }<br />    });<br />    <span class="hljs-keyword">return</span> $input;<br />  };<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordEditingExample'</span>).setData({<br />    <span class="hljs-attr">records</span>: contacts,<br />    <span class="hljs-attr">fields</span>: [<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"name"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Name"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"email"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Email"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"birthday"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Birthday"</span>,<br />        <span class="hljs-attr">type</span>: <span class="hljs-string">"date"</span>,<br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"phoneNumber"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Phone Number"</span>,<br />        <span class="hljs-attr">type</span>: <span class="hljs-string">"tel"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"age"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Age"</span>,<br />        <span class="hljs-attr">calculator</span>: <span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {<br />          <span class="hljs-keyword">const</span> today = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();<br />          <span class="hljs-keyword">const</span> birthDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(record.birthday);<br />          <span class="hljs-keyword">let</span> age = today.getFullYear() - birthDate.getFullYear();<br />          <span class="hljs-keyword">const</span> monthDifference = today.getMonth() - birthDate.getMonth();<br />          <span class="hljs-keyword">if</span> (monthDifference &lt; <span class="hljs-number">0</span> || (monthDifference === <span class="hljs-number">0</span> &amp;&amp; today.getDate() &lt; birthDate.getDate())) {<br />            age--;<br />          }<br />          <span class="hljs-keyword">return</span> age;<br />        }<br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"gender"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Gender"</span>,<br />        <span class="hljs-attr">formatter</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> v === <span class="hljs-string">"m"</span> ? <span class="hljs-string">"Male"</span> : <span class="hljs-string">"Female"</span>,<br />        <span class="hljs-attr">editor</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> {<br />          <span class="hljs-keyword">const</span> $select = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"select"</span>);<br />          $select.innerHTML = <span class="hljs-string">`<br />            &lt;option value="m"&gt;Male&lt;/option&gt;<br />            &lt;option value="f"&gt;Female&lt;/option&gt;<br />          `</span>;<br />          $select.value = v;<br />          <span class="hljs-keyword">return</span> $select;<br />        }<br />      }<br />    ]<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"recordEditingExample"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-edit</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Table.js'</span>;<br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  Table.editors.tel = <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> {<br />    <span class="hljs-keyword">const</span> $input = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"input"</span>);<br />    $input.value = v;<br />    $input.addEventListener(<span class="hljs-string">'change'</span>, () =&gt; {<br />      $input.value = $input.value.replace(<span class="hljs-regexp">/\D/g</span>, <span class="hljs-string">''</span>); <span class="hljs-comment">// Remove all non-digit characters</span><br />      <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">7</span>) {<br />        $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{4})/</span>, <span class="hljs-string">'$1-$2'</span>);<br />      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">10</span>) {<br />        $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{3})(\d{4})/</span>, <span class="hljs-string">'($1) $2-$3'</span>);<br />      } <span class="hljs-keyword">else</span> {<br />        $input.value = v; <span class="hljs-comment">// Reset to default value if not 7 or 10 digits</span><br />      }<br />    });<br />    <span class="hljs-keyword">return</span> $input;<br />  };<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordEditingExample'</span>).setData({<br />    <span class="hljs-attr">records</span>: contacts,<br />    <span class="hljs-attr">fields</span>: [<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"name"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Name"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"email"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Email"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"birthday"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Birthday"</span>,<br />        <span class="hljs-attr">type</span>: <span class="hljs-string">"date"</span>,<br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"phoneNumber"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Phone Number"</span>,<br />        <span class="hljs-attr">type</span>: <span class="hljs-string">"tel"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"age"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Age"</span>,<br />        <span class="hljs-attr">calculator</span>: <span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {<br />          <span class="hljs-keyword">const</span> today = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();<br />          <span class="hljs-keyword">const</span> birthDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(record.birthday);<br />          <span class="hljs-keyword">let</span> age = today.getFullYear() - birthDate.getFullYear();<br />          <span class="hljs-keyword">const</span> monthDifference = today.getMonth() - birthDate.getMonth();<br />          <span class="hljs-keyword">if</span> (monthDifference &lt; <span class="hljs-number">0</span> || (monthDifference === <span class="hljs-number">0</span> &amp;&amp; today.getDate() &lt; birthDate.getDate())) {<br />            age--;<br />          }<br />          <span class="hljs-keyword">return</span> age;<br />        }<br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"gender"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Gender"</span>,<br />        <span class="hljs-attr">formatter</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> v === <span class="hljs-string">"m"</span> ? <span class="hljs-string">"Male"</span> : <span class="hljs-string">"Female"</span>,<br />        <span class="hljs-attr">editor</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> {<br />          <span class="hljs-keyword">const</span> $select = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"select"</span>);<br />          $select.innerHTML = <span class="hljs-string">`<br />            &lt;option value="m"&gt;Male&lt;/option&gt;<br />            &lt;option value="f"&gt;Female&lt;/option&gt;<br />          `</span>;<br />          $select.value = v;<br />          <span class="hljs-keyword">return</span> $select;<br />        }<br />      }<br />    ]<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
 
     <k-table
       id="recordEditingExample"
     >
-      <k-tc-edit slot="after"></k-tc-edit>
+      <kc-tc-edit slot="after"></kc-tc-edit>
     </k-table>
     <script type="module">
       import Table from '../src/components/Table.js';
@@ -624,7 +624,7 @@
     <pre><code class="hljs javascript"><span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;nonEditableFieldExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>  <span class="hljs-attr">records</span>: contacts,<br>  <span class="hljs-attr">fields</span>: [{<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>    <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span>,<br>    <span class="hljs-attr">editable</span>: <span class="hljs-literal">false</span><br>  }, {<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;email&#x27;</span>,<br>    <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Email&#x27;</span><br>  }, {<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;birthday&#x27;</span>,<br>    <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Birthday&#x27;</span>,<br>    <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;date&#x27;</span><br>  }]<br>});</code></pre>
 
     <k-table id="nonEditableFieldExample">
-      <k-tc-edit slot="after"></k-tc-edit>
+      <kc-tc-edit slot="after"></kc-tc-edit>
     </k-table>
     <script type="module">
       await window.customElements.whenDefined('k-table');
@@ -654,7 +654,7 @@
   <script type="module" src="../src/components/Main.js"></script>
   
     <script type="module" src="../src/components/Table.js"></script>
-    <script type="module" src="../src/components/tableControls/Edit.js"></script>
+    <script type="module" src="../src/components/controls/TcEdit.js"></script>
   
 </body>
 </html>

package/docs/components/tableRecordFiltering.html

@@ -542,20 +542,20 @@
     
     <h3>Basic Filtering (Case-Insensitive)</h3>
     <p>By default, filters are case-insensitive. This means that filtering for "smith" will match "Smith", "SMITH", and "smith".</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordFilteringExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-filters</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/tableControls/Filters.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordFilteringExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordFilteringExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-filters</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/controls/TcFilters.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordFilteringExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="recordFilteringExample">
-      <k-tc-filters slot="top"></k-tc-filters>
+      <kc-tc-filters slot="top"></kc-tc-filters>
     </k-table>
-    <script type="module" src="../src/components/tableControls/Filters.js"></script>
+    <script type="module" src="../src/components/controls/TcFilters.js"></script>
     <script type="module">
       document.getElementById('recordFilteringExample').setRecords(contacts);
     </script>
 
     <h3>Case-Sensitive Filtering</h3>
     <p>You can enable case-sensitive filtering by adding the <code>case-sensitive-filters</code> attribute. With this enabled, filtering for "smith" will only match "smith", not "Smith" or "SMITH".</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"caseSensitiveExample"</span> <span class="hljs-attr">case-sensitive-filters</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-filters</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'caseSensitiveExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"caseSensitiveExample"</span> <span class="hljs-attr">case-sensitive-filters</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-filters</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'caseSensitiveExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="caseSensitiveExample" case-sensitive-filters>
-      <k-tc-filters slot="top"></k-tc-filters>
+      <kc-tc-filters slot="top"></kc-tc-filters>
     </k-table>
     <script type="module">
       document.getElementById('caseSensitiveExample').setRecords(contacts);

package/docs/components/tableRecordHiding.html

@@ -539,12 +539,12 @@
 
     <p>The table component supports record hiding. To allow for hiding add the "hide" control to the "before" or "after" controls. There is a built-in "showAll" control that can be added to the "top" or "bottom" controls to reveal previously hidden fields.</p>
     
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordHidingExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-hide</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-hidden-count</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-hidden-count</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-show-all</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-show-all</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordHidingExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordHidingExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-hide</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-hidden-count</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-hidden-count</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-show-all</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-show-all</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordHidingExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
 
     <k-table id="recordHidingExample">
-      <k-tc-hide slot="after"></k-tc-hide>
-      <k-tc-hidden-count></k-tc-hidden-count>
-      <k-tc-show-all></k-tc-show-all>
+      <kc-tc-hide slot="after"></kc-tc-hide>
+      <kc-tc-hidden-count></kc-tc-hidden-count>
+      <kc-tc-show-all></kc-tc-show-all>
     </k-table>
     <script type="module">
       await window.customElements.whenDefined('k-table');
@@ -556,9 +556,9 @@
   <script type="module" src="../src/components/Main.js"></script>
   
     <script type="module" src="../src/components/Table.js"></script>
-    <script type="module" src="../src/components/tableControls/Hide.js"></script>
-    <script type="module" src="../src/components/tableControls/HiddenCount.js"></script>
-    <script type="module" src="../src/components/tableControls/ShowAll.js"></script>
+    <script type="module" src="../src/components/controls/TcHide.js"></script>
+    <script type="module" src="../src/components/controls/TcHiddenCount.js"></script>
+    <script type="module" src="../src/components/controls/TcShowAll.js"></script>
   
 </body>
 </html>

package/docs/components/tableRecordSearching.html

@@ -539,11 +539,11 @@
     <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
 
     <p>The search control (aka quick filter) is a feature that allows users to filter the records displayed in the table. The control is a search input that can be used to filter records based on the values in the columns.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"quickFilterExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 20rem"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-search</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/tableControls/Search.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'quickFilterExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"quickFilterExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 20rem"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-search</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/controls/TcSearch.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'quickFilterExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="quickFilterExample">
-      <k-tc-search slot="top" style="width: 20rem"></k-tc-search>
+      <kc-tc-search slot="top" style="width: 20rem"></kc-tc-search>
     </k-table>
-    <script type="module" src="../src/components/tableControls/Search.js"></script>
+    <script type="module" src="../src/components/controls/TcSearch.js"></script>
     <script type="module">
       document.getElementById('quickFilterExample').setRecords(contacts);
     </script>

package/docs/components/tableRowControls.html

@@ -537,12 +537,12 @@
 
     <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
     <p>The table component can display controls before or after each row. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function. Use <code>slot="before"</code> to add the control before each row, and use <code>slot="after"</code> to add the control after each row.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rowControlsExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"before"</span> <span class="hljs-attr">max-width</span>=<span class="hljs-string">"40"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"export-file"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-export-json</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-delete-record</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'rowControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rowControlsExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"before"</span> <span class="hljs-attr">max-width</span>=<span class="hljs-string">"40"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"export-file"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-export-json</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-delete-record</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'rowControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="rowControlsExample">
-      <k-tc-export-json slot="before" max-width="40">
+      <kc-tc-export-json slot="before" max-width="40">
         <k-icon name="export-file"></k-icon>
-      </k-tc-export-json>
-      <k-tc-delete-record slot="after"></k-tc-delete-record>
+      </kc-tc-export-json>
+      <kc-tc-delete-record slot="after"></kc-tc-delete-record>
     </k-table>
     <script type="module">
       await window.customElements.whenDefined('k-table');
@@ -554,8 +554,8 @@
   <script type="module" src="../src/components/Main.js"></script>
   
     <script type="module" src="../src/components/Table.js"></script>
-    <script type="module" src="../src/components/tableControls/ExportJson.js"></script>
-    <script type="module" src="../src/components/tableControls/DeleteRecord.js"></script>
+    <script type="module" src="../src/components/controls/TcExportJson.js"></script>
+    <script type="module" src="../src/components/controls/TcDeleteRecord.js"></script>
   
 </body>
 </html>