@table-bro/native 0.0.0-stage → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Table, Bro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,82 @@
-# Temporary Holding Version
+# @table-bro/native
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The native skin of [Table, Bro](https://table-bro.com): data tables on the native controls of the browser, without a
+UI library. The skin is `nv`.
+
+## Install
+
+```sh
+npm install @table-bro/core @table-bro/native
+```
+
+## Use
+
+Link the CSS of the core and of the skin, each from its package:
+
+```html
+<link rel="stylesheet" href="node_modules/@table-bro/core/dist/table-bro.min.css">
+<link rel="stylesheet" href="node_modules/@table-bro/native/dist/table-bro.native.min.css">
+```
+
+Import the core and the skin once, before the tables. The import registers the skin:
+
+```ts
+import '@table-bro/core';
+import '@table-bro/native';
+
+const table = document.createElement('table-bro');
+
+table.configure({
+  cols: [
+    {title: 'Description', name: 'description'},
+    {title: 'Price', name: 'price', dataType: 'number', className: 'bro-col_text-right'}
+  ],
+  rows: [{description: 'Modern Cotton Chair', price: 1}],
+  conf: {skin: 'nv'}
+});
+
+document.body.append(table);
+```
+
+Without a bundler, load the UMD build after the core: it puts the skin on the `TableBroNative` global.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@table-bro/core@1.1.0/dist/table-bro.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@table-bro/native@1.1.0/dist/table-bro.native.umd.js"></script>
+```
+
+Load one vanilla skin per page: `@table-bro/native` and `@table-bro/bootstrap` share elements, and the skin loaded
+second warns about it.
+
+## Elements for cells
+
+The elements of the cells are optional: a page carries their code only when it defines them. After the import of the
+skin, `withTags()` defines `bro-nv-tags` and `withSwitch()` defines `bro-switch`:
+
+```ts
+import {withSwitch, withTags} from '@table-bro/native';
+
+withTags();
+withSwitch();
+```
+
+Or define an element itself: `customElements.define('bro-nv-tags', BroNativeTagsComponent)`. The UMD build carries the code of both
+and has the same functions on its global, as `TableBroNative.withTags()`. A table that uses an element that is not defined
+names its function in the console.
+
+| Element | Value |
+| --- | --- |
+| `bro-nv-tags` | An array of strings in `row[col.name]`; the tags that do not fit become an ellipsis |
+| `bro-switch` | A boolean from the attribute `checked`: `attrs: {checked: (_col, row) => row.done}`. With the attribute `name` and `event: 'action'` a change sends the action `name` with the column and the row; the title of the column names the switch |
+
+## Settings
+
+`nativeSkinConfig` is the config of the skin. `config.components` and `config.css` of a table change any of its values
+or functions, at any depth, for that table. The sizes and timings are CSS variables of the table: see the README of
+`@table-bro/core`.
+
+The skin has a light and a dark theme, as the README of `@table-bro/core` describes.
+
+## License
+
+MIT

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,69 @@
+# Third-party notices
+
+Table, Bro is MIT-licensed (LICENSE). Parts of it come from or are built with the code of other projects, under their
+licenses below.
+
+## Angular Components (Angular Material)
+
+Ported from Angular Material and carrying its license header:
+
+- `packages/skins/shared/js/material-based/paginator/bro-paginator.ts`: the paginator of the vanilla skins, a port of
+  `MatPaginator`;
+- `packages/skins/shared/styles/vanilla-js/shared/components/material-based/_paginator.scss` and `_sort-header.scss`:
+  the styles of the paginator and of the sort header of the vanilla skins.
+
+The CSS of the skin `mat` (`table-bro.material.min.css`) is built with the Sass of `@angular/material`, and the CSS of
+the vanilla skins contains the styles above. Minified CSS keeps no comments, so this file carries the notice for it.
+
+```
+The MIT License
+
+Copyright (c) 2026 Google LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```
+
+## Bootstrap
+
+The CSS of the skin `bs` (`table-bro.bootstrap.min.css`) and of the shared elements of the vanilla skins is built with
+the Sass functions, variables and mixins of Bootstrap 5.
+
+```
+The MIT License (MIT)
+
+Copyright (c) 2011-2025 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```

package/dist/table-bro.native.d.ts

@@ -0,0 +1,185 @@
+import { BroCellElement, BroCol, BroConfiguredElement, BroHTMLElement, BroResolvedConfig, BroRow, BroView } from "@table-bro/core";
+//#region js/table-bro.native.config.d.ts
+export declare const nativeSkinConfig: {
+  css: {
+    table: {
+      thead: {
+        tr: {
+          className: string;
+          th: {
+            className: string;
+          };
+        };
+      };
+      tbody: {
+        tr: {
+          className: string;
+          td: {
+            className: string;
+          };
+        };
+      };
+    };
+    shadow: {
+      className: string;
+    };
+  };
+  components: {
+    button: {
+      selector: string;
+      iconSelector: string;
+      beforeRender: (element: Element, value: string) => void;
+    };
+    dropdown: {
+      selector: string;
+    };
+    filterDrawer: {
+      beforeRender: (closeButton: Element) => void;
+    };
+    paginator: {
+      selector: string;
+      css: {
+        ul: {
+          className: string;
+          li: {
+            className: string;
+            a: {
+              className: string;
+            };
+          };
+        };
+      };
+    };
+    progressBar: {
+      selector: string;
+    };
+    sortHeader: {
+      selector: string;
+      contentSelector: string;
+      beforeRender: (element: Element, value: string) => void;
+      afterRender: (element: Element, value: string) => void;
+    };
+    state: {
+      states: {
+        loading: [string, string];
+        'no-data': [string, string];
+        'not-found': [string, string];
+        fail: [string, string];
+      };
+    };
+    switch: {
+      selector: string;
+      css: {
+        div: {
+          className: string;
+          input: {
+            className: string;
+          };
+        };
+      };
+    };
+    textEllipsis: {
+      selector: string;
+      afterRender: (element: Element, value: string) => void;
+    };
+    toolbar: {
+      selector: string;
+      css: {
+        nav: {
+          className: string;
+        };
+      };
+    };
+    toolbarMain: {
+      selector: string;
+      css: {
+        toolbarTitle: {
+          className: string;
+        };
+        navbarCollapse: {
+          className: string;
+          ul: {
+            li: {
+              className: string;
+              a: {
+                className: string;
+              };
+            };
+          };
+        };
+      };
+      beforeRender: (searchButton: Element, value: string) => void;
+    };
+    toolbarSearch: {
+      beforeRender: (backButton: Element, clearButton: Element) => void;
+    };
+  };
+  elements: {
+    'bro-nv-tags': string;
+    'bro-switch': string;
+  };
+};
+//#endregion
+//#region ../shared/js/bro-tags.d.ts
+/**
+ * The tags of a cell of the vanilla skins: the items of the field of the column in the row, each in the markup of a tag
+ * of the skin.
+ */
+declare abstract class BroTagsComponent extends BroHTMLElement implements BroView, BroCellElement, BroConfiguredElement {
+  template(): string;
+  row?: BroRow;
+  col?: BroCol;
+  config?: BroResolvedConfig;
+  items: string[];
+  /** Stops fitting the tags into the line when the element leaves the DOM. */
+  private fitting?;
+  /** A move in the DOM connects the element again; it keeps its markup and listeners. */
+  private rendered;
+  render(): void;
+  /** The empty markup of one tag of the skin, which takes the text of an item. */
+  protected abstract readonly tagHTML: string;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+}
+//#endregion
+//#region js/bro-tags.native.d.ts
+/** The tags of the native skin: marks. */
+export declare class BroNativeTagsComponent extends BroTagsComponent {
+  protected readonly tagHTML: string;
+}
+//#endregion
+//#region ../shared/js/bootstrap-based/bro-switch.d.ts
+/**
+ * A switch of a boolean of a cell. A change sends the action of the attribute name, as the event action that the table
+ * turns into bro-action with the column and the row (event: 'action' of the column); the title of the column names
+ * the switch for screen readers.
+ */
+export declare class BroSwitchComponent extends BroHTMLElement implements BroView, BroConfiguredElement {
+  template(): string;
+  config: BroResolvedConfig;
+  /** The column of the cell, which the table sets. */
+  col?: BroCol;
+  checked: string | null;
+  private css;
+  /** A move in the DOM connects the element again; it keeps its markup and listeners. */
+  private rendered;
+  events(): void;
+  render(): void;
+  connectedCallback(): void;
+}
+//#endregion
+//#region ../shared/js/define-shared-elements.d.ts
+/**
+ * Defines the optional element bro-switch, a boolean of a column as a switch, unless it is defined; without a DOM, as
+ * in the server render, it does nothing.
+ */
+export declare function withSwitch(): void;
+//#endregion
+//#region js/table-bro.native.d.ts
+/**
+ * Defines the optional element bro-nv-tags, the items of a column as tags, unless it is defined; without a DOM, as in
+ * the server render, it does nothing. A page without the call does not carry the code of the tags.
+ */
+export declare function withTags(): void;
+//#endregion
+export {};

package/dist/table-bro.native.esm.js

@@ -0,0 +1,113 @@
+import{BroHTML as e,BroHTMLElement as t,broCellSelectors as n,dispatchAction as r,events as i,fitCellItems as a,registerSkin as o}from"@table-bro/core";const{escape:s}=e;var c=class extends t{template(){this.css=this.config.components.switch?.css,this.checked=this.getAttribute(`checked`);let e=this.checked===`true`;return`
+      <div ${this.css?`class="${s(this.css.div.className)}"`:``}>
+        <input type="checkbox"
+               ${this.css?`class="${s(this.css.div.input.className)}"`:``}
+               role="switch"
+               ${e?` checked`:``}>
+      </div>`}config;col;checked;css;rendered=!1;events(){let e=this.querySelector(`input`),t=this.getAttribute(`name`);e.setAttribute(`aria-label`,this.col?.title??``),e.addEventListener(`change`,()=>{t&&this.dispatchEvent(new CustomEvent(`action`,{detail:t}))})}render(){this.insertAdjacentHTML(`afterbegin`,this.template()),this.events()}connectedCallback(){this.rendered||(this.rendered=!0,this.render())}};const{escape:l}=e;var u=class extends t{template(){this.css=this.config.components.toolbar.css;let e=this.css.nav.div?.className?`${this.css.nav.div.className} ${this.contentClassName}`:this.contentClassName;return`
+      <nav class="${l(this.css.nav.className)}">
+        <div class="${l(e)}">
+          <!-- toolbar content -->
+        </div>
+      </nav>`}config;contentClassName=`bro-toolbar-content`;css;render(){this.insertAdjacentHTML(`afterbegin`,this.template())}appendToolbarContent(...e){this.firstChild||this.render(),this.querySelector(`.${this.contentClassName}`)?.append(...e)}};const{createElement:d,escape:f}=e;var p=class extends t{template(){this.css=this.config.components.toolbarMain.css,this.toolbarTitle=this.config.toolbarTitle;let e=this.css.navbarCollapse.ul.className?`${this.css.navbarCollapse.ul.className} ${this.contentClassName}`:this.contentClassName;return`
+      <!--bro-toolbar-->
+        <span class="bro-toolbar-title-space"></span>
+        <span class="${f(this.css.toolbarTitle.className)}">${f(this.toolbarTitle)}</span>
+
+        <span class="bro-toolbar-space"></span>
+
+        <div class="${f(this.css.navbarCollapse.className)} bro-toolbar-buttons">
+          <ul class="${f(e)}">
+            <!-- search-button -->
+            <!-- buttons -->
+          </ul>
+        </div>
+      <!--/bro-toolbar-->`}config;contentClassName=`bro-navbar-nav`;toolbarTitle;css;navContentEl;rendered=!1;events(){this.addEventListener(`click`,e=>{e.preventDefault()}),this.navContentEl.children[0].addEventListener(`click`,()=>{this.dispatchEvent(new CustomEvent(i.toolbarEvent,{bubbles:!0,composed:!0,detail:i.toolbarSearchOpenEvent}))})}render(){let e=document.createElement(this.config.components.toolbar.selector);e.setAttribute(`class`,`bro-toolbar`),e.config=this.config,this.appendChild(e);let t=document.createElement(`div`);t.insertAdjacentHTML(`afterbegin`,this.template()),e.appendToolbarContent(...Array.from(t.children)),this.appendToolbarContent(this.renderSearchButton(),...this.renderButtons()),this.querySelectorAll(this.config.components.dropdown?.selector).forEach(e=>{e.replaceWith(e.children[0])}),this.events()}connectedCallback(){this.rendered||(this.rendered=!0,this.render())}appendToolbarContent(...e){this.navContentEl||=this.querySelector(`.${this.contentClassName}`),this.navContentEl.append(...e)}templateToolbarButton(e,t,n){return d(`
+      <li class="${f(this.css.navbarCollapse.ul.li.className)}">
+        <a class="${f(this.css.navbarCollapse.ul.li.a.className)}${n?` ${f(n)}`:``}" href="">
+           ${t||``}${f(e)}
+        </a>
+      </li>`)}renderSearchButton(){let e=document.createElement(this.config.components.button.selector);this.config.components.toolbarMain.beforeRender?.(e,this.config.texts.search);let t=e.getAttribute(`button-title`)??``;return this.templateToolbarButton(t,e.iconHTML,`bro-toolbar-button-search`)}renderButtons(){return(this.config.components.toolbarMain.buttons??[]).map(e=>{if(e.mode===`navbar-dropdown`){let t=document.createElement(this.config.components.dropdown?.selector);return t.config=this.config,t.setAttribute(`mode`,`navbar-dropdown`),t.setAttribute(`button-title`,e.buttonTitle),t.setAttribute(`options`,JSON.stringify(e.options)),t.addEventListener(`value`,e=>{this.dispatchEvent(new CustomEvent(i.toolbarEvent,{bubbles:!0,composed:!0,detail:e.detail}))}),t}{let t=this.templateToolbarButton(e.buttonTitle,e.iconHTML);return t.querySelector(`a`)?.addEventListener(`click`,()=>{this.dispatchEvent(new CustomEvent(i.toolbarEvent,{bubbles:!0,composed:!0,detail:e.eventType}))}),t}})}};const{escape:m}=e;var h=class extends t{template(){this.label=this.getAttribute(`label`)||``,this.buttonClassName=this.getAttribute(`button-class`),this.buttonTitle=this.getAttribute(`button-title`)||``,this.iconHTML=this.getAttribute(`icon-html`)||this.iconHTML,this.mode=this.getAttribute(`mode`)||`button`,this.eventType=this.getAttribute(`event-type`)||`action`;let e=this.buttonClassName?` class="${m(this.buttonClassName)}"`:``,t=!this.buttonTitle&&this.label?` aria-label="${m(this.label)}"`:``,n=`${m(this.buttonTitle)}${this.iconHTML?`${this.buttonTitle?`&nbsp;`:``}${this.iconHTML}`:``}`;return this.mode===`link`?`
+        <a${e} href=""
+           role="button"${t}>
+          ${n}
+        </a>`:`
+        <button${e}
+                type="button"${t}>
+          ${n}
+        </button>`}label;buttonClassName;buttonTitle;iconHTML;mode;eventType;events(){let e=this.children[0];e.addEventListener(`click`,t=>{r(e,this.eventType),t.preventDefault()}),this.mode===`link`&&e.addEventListener(`keydown`,t=>{t.key===` `&&!t.repeat&&(t.preventDefault(),e.click())})}render(){this.insertAdjacentHTML(`afterbegin`,this.template()),this.events()}connectedCallback(){this.firstChild||this.render()}};const{escape:g,text:_}=e;var v=class extends t{template(){return this.containerClassName=this.getAttribute(`container-class`),this.value=this.getAttribute(`value`)||``,`
+      <span class="${n.ellipsisContainer}${this.containerClassName?` ${g(this.containerClassName)}`:``}">
+        <span class="${n.ellipsis}"></span>
+      </span>`}row;col;config;containerClassName;tooltip;value;release;released=!1;rendered=!1;render(){this.insertAdjacentHTML(`afterbegin`,this.template());let e=this.querySelector(`.${n.ellipsis}`);this.col?.html?(e.innerHTML=this.value,this.tooltip=_(this.value)):(e.textContent=this.value,this.tooltip=this.value),this.afterRender()}connectedCallback(){this.rendered?this.released&&(this.released=!1,this.afterRender()):(this.rendered=!0,this.render())}disconnectedCallback(){queueMicrotask(()=>{this.isConnected||(typeof this.release==`function`&&this.release(),this.release=void 0,this.released=!0)})}afterRender(){let e=this.children[0];this.config.components.textEllipsis.afterRender&&(this.release=this.config.components.textEllipsis.afterRender(e,this.tooltip))}};const{escape:y}=e;var b=class extends t{template(){this.arrowPosition=this.getAttribute(`arrow-position`)||`after`,this.sortId=this.getAttribute(`sort-id`)||``,this.dataType=this.getAttribute(`data-type`)||``,this.headerTitle=this.getAttribute(`header-title`)||``,this.iconHTML=this.getAttribute(`icon-html`)||``,this.tooltip=this.getAttribute(`tooltip`)||``;let e=``;this.arrowPosition===`before`&&(e+=` bro-sort-header-position-before`),e+=` bro-sort-header-descending`;let t=this.headerTitle?` role="button" tabindex="0"`:``;return`
+      <div class="bro-sort-header-container${e}"${t}>
+        <div class="bro-sort-header-content">${y(this.headerTitle)}</div>
+        <div class="bro-sort-header-arrow" aria-hidden="true">${this.iconHTML}</div>
+      </div>`}static get observedAttributes(){return[`tooltip`]}config;arrowPosition;headerTitle;dataType;iconHTML;sortId;tooltip;_activeSort;direction=``;release;released=!1;rendered=!1;events(){let e=this.children[0];this.headerTitle&&(e.addEventListener(`blur`,()=>{e.classList.remove(`bro-sort-header-recently-cleared-ascending`)}),e.addEventListener(`keydown`,t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),e.click())}),e.addEventListener(`click`,()=>{this.direction===``?(this.direction=`desc`,e.classList.add(`bro-sort-header-sorted`),e.classList.remove(`bro-sort-header-recently-cleared-ascending`)):this.direction===`desc`?(this.direction=`asc`,e.classList.remove(`bro-sort-header-descending`)):this.direction===`asc`&&(this.direction=``,e.classList.remove(`bro-sort-header-sorted`),e.classList.add(`bro-sort-header-descending`),e.classList.add(`bro-sort-header-recently-cleared-ascending`)),r(this,i.filtersSortEvent,{sortKey:this.sortId,sortDirection:this.direction||void 0})}))}render(){this.insertAdjacentHTML(`afterbegin`,this.template()),this.afterRender(),this.events()}get activeSort(){return this._activeSort}set activeSort(e){this._activeSort=e;let t=this.children[0];this.direction!==``&&e?.sortKey!==this.sortId&&t&&(this.direction=``,t.classList.remove(`bro-sort-header-sorted`),t.classList.add(`bro-sort-header-descending`))}connectedCallback(){this.rendered?this.released&&(this.released=!1,this.afterRender()):(this.rendered=!0,this.render())}disconnectedCallback(){queueMicrotask(()=>{this.isConnected||(typeof this.release==`function`&&this.release(),this.release=void 0,this.released=!0)})}attributeChangedCallback(e,t,n){this.rendered&&t!==n&&(this.tooltip=n||``,typeof this.release==`function`&&this.release(),this.release=void 0,this.isConnected?this.afterRender():this.released=!0)}afterRender(){let e=this.children[0];this.release=this.config.components.sortHeader.afterRender?.(e,this.tooltip)}};
+/**
+* @license
+* Copyright Google LLC All Rights Reserved.
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://angular.dev/license
+*/
+const{escape:x}=e,S={"bro-button":h,"bro-paginator":class extends t{template(){this.disabled=this.getAttribute(`disabled`)===`true`||!1,this.length=Number(this.getAttribute(`length`))||0,this.pageIndex=Math.max(Number(this.getAttribute(`page-index`))||0,0),this.pageSize=Number(this.getAttribute(`page-size`)),this.showFirstLastButtons=this.getAttribute(`show-first-last-buttons`)!==`false`,this.parsePageSizeOptions();let e=this.texts=this.config.texts,t=this.config.components.paginator.css?.ul,n=t?.className?` class="${x(t.className)}"`:``,r=t?.li?.className?` class="${x(t.li.className)}"`:``,i=t?.li?.a?.className?`${x(t.li.a.className)} `:``;return this.dropdownSelector=this.config.components.dropdown?.selector,`
+      <div class="bro-paginator-outer-container">
+        <div class="bro-paginator-inner-container">
+          <div class="bro-paginator-page-size">
+            <div class="bro-paginator-page-size-label">
+              ${x(e.itemsPerPage)}
+            </div>
+
+            ${this.pageSizeDropdown?.length?``:this.templatePageSizeValue()}
+          </div>
+
+          <div class="bro-paginator-range-actions">
+            <div class="bro-paginator-range-label" aria-live="polite">
+              ${x(e.rangeLabel(this.pageIndex,this.pageSize,this.length))}
+            </div>
+
+            <nav aria-label="${x(e.pageNavigation)}">
+              <ul${n}>
+                ${this.showFirstLastButtons?`
+                  <li${r}>
+                    <a class="${i}bro-paginator-navigation-first" href=""
+                       aria-label="${x(e.firstPage)}">${x(e.first)}</a>
+                  </li>`:``}
+
+                  <li${r}>
+                    <a class="${i}bro-paginator-navigation-previous" href=""
+                       aria-label="${x(e.previousPage)}">${x(e.previous)}</a>
+                  </li>
+
+                  <li${r}>
+                    <a class="${i}bro-paginator-navigation-next" href=""
+                       aria-label="${x(e.nextPage)}">${x(e.next)}</a>
+                  </li>
+
+                ${this.showFirstLastButtons?`
+                  <li${r}>
+                    <a class="${i}bro-paginator-navigation-last" href=""
+                       aria-label="${x(e.lastPage)}">${x(e.last)}</a>
+                  </li>`:``}
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>`}static get observedAttributes(){return[`page-index`,`page-size`,`length`,`page-size-options`,`disabled`]}config;disabled;length;pageIndex;pageSize;pageSizeOptions;showFirstLastButtons;page;eventName=`page`;firstEl;previousEl;nextEl;lastEl;pageSizeEl;pageSizeValueEl;rangeLabelEl;dropdownSelector;texts;pageSizeDropdown;rendered=!1;events(){this.previousEl=this.querySelector(`.bro-paginator-navigation-previous`),this.nextEl=this.querySelector(`.bro-paginator-navigation-next`),this.previousEl.addEventListener(`click`,e=>{e.preventDefault(),this.hasPreviousPage()&&this.navigate(this.pageIndex-1)}),this.nextEl.addEventListener(`click`,e=>{e.preventDefault(),this.hasNextPage()&&this.navigate(this.pageIndex+1)}),this.showFirstLastButtons&&(this.firstEl=this.querySelector(`.bro-paginator-navigation-first`),this.lastEl=this.querySelector(`.bro-paginator-navigation-last`),this.firstEl.addEventListener(`click`,e=>{e.preventDefault(),this.hasPreviousPage()&&this.navigate(0)}),this.lastEl.addEventListener(`click`,e=>{e.preventDefault(),this.hasNextPage()&&this.navigate(this.getNumberOfPages()-1)}))}render(){this.insertAdjacentHTML(`afterbegin`,this.template()),this.pageSizeDropdown?.length&&(this.pageSizeEl=this.querySelector(`.bro-paginator-page-size`),this.renderPageSizeDropdown()),this.events(),this.renderNavigationState()}connectedCallback(){this.rendered||(this.rendered=!0,this.render())}attributeChangedCallback(e,t,n){this.texts&&((e===`page-index`||e===`page-size`||e===`length`)&&(this.rangeLabelEl||=this.querySelector(`.bro-paginator-range-label`),this.pageSizeValueEl||=this.querySelector(`.bro-paginator-page-size-value`),e===`page-index`&&(this.pageIndex=+n),e===`page-size`&&(this.pageSize=+n,this.pageSizeOptions.length||(this.pageSizeValueEl.innerText=n)),e===`length`&&(this.length=+n),this.rangeLabelEl.textContent=this.texts.rangeLabel(this.pageIndex,this.pageSize,this.length),this.renderNavigationState()),e===`page-size-options`&&(this.parsePageSizeOptions(),this.unrenderPageSizeControls(),this.pageSizeEl||=this.querySelector(`.bro-paginator-page-size`),this.pageSizeDropdown?.length?this.renderPageSizeDropdown():(this.renderPageSizeValue(),this.setAttribute(`disabled`,`true`))),e===`disabled`&&this.setDisabledState(n===`true`))}hasPreviousPage(){return this.pageIndex>=1&&this.pageSize!=0}hasNextPage(){let e=this.getNumberOfPages()-1;return this.pageIndex<e&&this.pageSize!=0}getNumberOfPages(){return this.pageSize?Math.ceil(this.length/this.pageSize):0}parsePageSizeOptions(){if(this.getAttribute(`page-size-options`))try{this.pageSizeOptions=JSON.parse(this.getAttribute(`page-size-options`)).map(e=>+e),this.pageSizeDropdown=this.pageSizeOptions.map(e=>({value:e.toString(),title:e.toString()}))}catch(e){this.pageSizeOptions=[],this.config.debug&&console.log(e)}}templatePageSizeValue(){return`<div class="bro-paginator-page-size-value">${this.pageSize}</div>`}unrenderPageSizeControls(){let e=this.querySelector(this.dropdownSelector);e&&e.remove();let t=this.querySelector(`.bro-paginator-page-size-value`);t&&t.remove()}renderPageSizeDropdown(){let e=document.createElement(this.dropdownSelector);e.config=this.config,e.setAttribute(`mode`,`select`),e.setAttribute(`button-title`,this.pageSize.toString()),e.setAttribute(`options`,JSON.stringify(this.pageSizeDropdown)),e.setAttribute(`label`,this.texts.itemsPerPage),this.eventsPageSize(e),this.pageSizeEl.append(e)}eventsPageSize(e){e.addEventListener(`value`,e=>{let t=e.detail;this.changePageSize(+t),this.setAttribute(`page-size`,t)})}renderPageSizeValue(){this.pageSizeEl.insertAdjacentHTML(`beforeend`,this.templatePageSizeValue())}setDisabledState(e){this.disabled=e;let t=this.querySelector(this.dropdownSelector);t&&t.setAttribute(`disabled`,e.toString()),this.renderNavigationState()}renderNavigationState(){let e=this.disabled||!this.hasPreviousPage(),t=this.disabled||!this.hasNextPage();[[this.firstEl,e],[this.previousEl,e],[this.nextEl,t],[this.lastEl,t]].forEach(([e,t])=>{t?(e?.parentElement?.classList.add(`disabled`),e?.setAttribute(`aria-disabled`,`true`)):(e?.parentElement?.classList.remove(`disabled`),e?.removeAttribute(`aria-disabled`))})}navigate(e){let t=this.pageIndex;e!==t&&(this.pageIndex=e,this.setAttribute(`page-index`,this.pageIndex.toString()),this.emitPageEvent(t))}changePageSize(e){let t=this.pageIndex*this.pageSize,n=this.pageIndex;this.pageIndex=Math.floor(t/e)||0,this.pageSize=e,this.emitPageEvent(n)}emitPageEvent(e){this.page={previousPageIndex:e,pageIndex:this.pageIndex,pageSize:this.pageSize,length:this.length},this.dispatchEvent(new CustomEvent(this.eventName,{bubbles:!0,composed:!0,detail:this.page}))}},"bro-sort-header":b,"bro-text-ellipsis":v,"bro-toolbar":u,"bro-toolbar-main":p};function C(){w(`bro-switch`,c)}function w(e,t){typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)}function T(e){let t=[];Object.entries(S).forEach(([e,n])=>{let r=customElements.get(e);r?r!==n&&t.push(e):customElements.define(e,n)}),t.length&&console.warn(`${e}: ${t.join(`, `)} are already defined by another vanilla skin bundle, so this skin uses its elements. Load one vanilla skin bundle per page.`)}const{escape:E}=e;var D=class extends t{template(){this.buttonTitle=this.getAttribute(`button-title`)||``,this.name=this.getAttribute(`name`)||`action`,this.mode=this.getAttribute(`mode`)||`dropdown`;try{this.options=JSON.parse(this.getAttribute(`options`))}catch(e){this.options=[],this.config.debug&&console.log(e)}let e=this.getAttribute(`label`)||this.buttonTitle,t=e?` aria-label="${E(e)}"`:``;return this.mode===`select`||this.mode===`dropdown`?`
+        <select name="${E(this.name)}"${t}>
+          <option value="" hidden>${E(this.buttonTitle)}</option>
+          ${this.templateDropdown(this.options)}
+        </select>`:`
+        <li class="bro-nav-item bro-dropdown">
+          <select name="${E(this.name)}"${t}>
+            <option value="" hidden>${E(this.buttonTitle)}</option>
+            ${this.templateDropdown(this.options)}
+          </select>
+        </li>`}static get observedAttributes(){return[`disabled`]}config;buttonTitle;name;mode;options;eventName=`value`;dropdownToggleEl;rendered=!1;events(){let e=this.querySelector(`select`),t=this.mode===`navbar-dropdown`,n=!1,r=null;this.dropdownToggleEl=e,this.renderDisabled();let i=n=>{r=null,t&&(e.selectedIndex=0),this.dispatchEvent(new CustomEvent(this.eventName,{bubbles:!0,composed:!0,detail:n}))};t&&(e.addEventListener(`pointerdown`,()=>{n=!1}),e.addEventListener(`keydown`,e=>{n=e.key!==`Enter`,e.key===`Enter`&&r!==null&&i(r)}),e.addEventListener(`blur`,()=>{r!==null&&(r=null,e.selectedIndex=0)})),e.addEventListener(`change`,()=>{t&&n?r=e.value:i(e.value)})}render(){this.insertAdjacentHTML(`afterbegin`,this.template()),this.events()}connectedCallback(){this.rendered||(this.rendered=!0,this.render())}attributeChangedCallback(e){e===`disabled`&&this.dropdownToggleEl&&this.renderDisabled()}templateDropdown(e){return`
+      ${e.map(e=>{if(`value`in e&&`title`in e)return`
+             <option value="${E(e.value)}">${E(e.title)}</option>`;if(`divider`in e)return`
+            <hr>`;if(`header`in e)return`
+            <optgroup label="${E(e.header)}"></optgroup>`}).join(``)}`}renderDisabled(){this.dropdownToggleEl.toggleAttribute(`disabled`,this.getAttribute(`disabled`)===`true`)}};const{escape:O}=e;var k=class extends t{template(){this.color=this.getAttribute(`color`)||``,this.mode=this.getAttribute(`mode`)||`indeterminate`;let e=this.mode===`indeterminate`;return this.value=(e?100:this.getAttribute(`value`)||0).toString(),`
+      <progress ${e?``:`value="${this.value}"`}
+        max="${e?``:100}" aria-label="${O(this.config.texts.loadingProgress)}"></progress>`}static get observedAttributes(){return[`value`]}config;color;mode;value;rendered=!1;valueEl;render(){this.insertAdjacentHTML(`afterbegin`,this.template())}connectedCallback(){this.rendered||(this.rendered=!0,this.render())}attributeChangedCallback(e,t,n){this.mode===`determinate`&&e===`value`&&(this.valueEl||=this.querySelector(`progress`),this.valueEl.value=+n)}},A=class extends t{template(){let e=this.col?.name,t=e&&this.row?.[e];return this.items=Array.isArray(t)&&t.length?t:[this.config?.texts.noItems??``],this.items.map(()=>this.tagHTML).join(``)}row;col;config;items=[];fitting;rendered=!1;render(){this.insertAdjacentHTML(`afterbegin`,this.template()),Array.from(this.children).forEach((e,t)=>{this.col?.html?e.innerHTML=this.items[t]:e.textContent=this.items[t]})}connectedCallback(){this.rendered||(this.rendered=!0,this.render()),this.fitting=new AbortController,a(this,this.fitting.signal)}disconnectedCallback(){this.fitting?.abort()}},j=class extends A{tagHTML=`<mark></mark>`};const M={css:{table:{thead:{tr:{className:`bro-header-row`,th:{className:`bro-header-cell`}}},tbody:{tr:{className:`bro-row`,td:{className:`bro-cell`}}}},shadow:{className:`shadow-lg`}},components:{button:{selector:`bro-button`,iconSelector:`.bro-button-toggle`,beforeRender:(e,t)=>{e.setAttribute(`mode`,`link`),e.setAttribute(`button-title`,t),e.setAttribute(`icon-html`,`<span class="bro-button-toggle"></span>`)}},dropdown:{selector:`bro-nv-dropdown`},filterDrawer:{beforeRender:e=>{e.iconHTML=`&times;`,e.setAttribute(`button-class`,`bro-nav-link`),e.setAttribute(`mode`,`link`)}},paginator:{selector:`bro-paginator`,css:{ul:{className:`bro-pagination`,li:{className:`bro-page-item`,a:{className:`bro-page-link`}}}}},progressBar:{selector:`bro-nv-progress-bar`},sortHeader:{selector:`bro-sort-header`,contentSelector:`.bro-sort-header-content`,beforeRender:(e=>{e.setAttribute(`icon-html`,`<span class="bro-button-icon">&#9660;</span>`)}),afterRender:(e,t)=>{e.setAttribute(`title`,t)}},state:{states:{loading:[`🚀`,`Loading`],"no-data":[`💔`,`No data`],"not-found":[`🔦`,`No records found`],fail:[`😕`,`Failed`]}},switch:{selector:`bro-switch`,css:{div:{className:`bro-form-check bro-form-switch`,input:{className:`bro-form-check-input`}}}},textEllipsis:{selector:`bro-text-ellipsis`,afterRender:(e,t)=>{e.setAttribute(`title`,t)}},toolbar:{selector:`bro-toolbar`,css:{nav:{className:`bro-navbar bro-navbar-expand`}}},toolbarMain:{selector:`bro-toolbar-main`,css:{toolbarTitle:{className:`bro-navbar-brand`},navbarCollapse:{className:`bro-navbar-collapse`,ul:{li:{className:`bro-nav-item`,a:{className:`bro-nav-link`}}}}},beforeRender:(e,t)=>{e.setAttribute(`button-title`,t)}},toolbarSearch:{beforeRender:(e,t)=>{e.iconHTML=`&larr;`,e.setAttribute(`button-class`,`bro-nav-link`),e.setAttribute(`mode`,`link`),t.iconHTML=`&times;`,t.setAttribute(`button-class`,`bro-nav-link`),t.setAttribute(`mode`,`link`)}}},elements:{"bro-nv-tags":`withTags`,"bro-switch":`withSwitch`}};typeof customElements<`u`&&(T(`@table-bro/native`),w(`bro-nv-dropdown`,D),w(`bro-nv-progress-bar`,k)),o(`nv`,M);function N(){w(`bro-nv-tags`,j)}export{j as BroNativeTagsComponent,c as BroSwitchComponent,M as nativeSkinConfig,C as withSwitch,N as withTags};
+//# sourceMappingURL=table-bro.native.esm.js.map