@table-bro/native 1.1.0 → 1.2.0

package/README.md

@@ -3,6 +3,21 @@
 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`.
 
+## With an AI coding agent
+
+The skin `nv` gives a table made by the agent plain HTML elements and no UI library, for any framework. Tell your AI
+assistant to use Table, Bro, or add its MCP server to Claude Code, Cursor or Codex: the agent installs the packages,
+generates the table, its setup and its cells from one request, and checks the result.
+
+```sh
+claude mcp add --scope project table-bro -- npx -y @table-bro/mcp@1.2.0
+```
+
+The setup for Cursor, Codex and VS Code is in the README of
+[`@table-bro/mcp`](https://github.com/table-bro/table-bro/tree/main/packages/mcp) and on [MCP
+server](https://table-bro.com/docs/ai/mcp-server). Docs: [Getting started](https://table-bro.com/docs/getting-started),
+[Docs](https://table-bro.com/docs).
+
 ## Install
 
 ```sh
@@ -41,8 +56,8 @@ 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>
+<script src="https://cdn.jsdelivr.net/npm/@table-bro/core@1.2.0/dist/table-bro.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@table-bro/native@1.2.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
@@ -64,6 +79,10 @@ Or define an element itself: `customElements.define('bro-nv-tags', BroNativeTags
 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.
 
+A cell of tags without items shows No data: `withTags({texts: {empty: 'No tags'}})` gives the text of the
+application, and `setTagsTexts({empty})` changes it at any time, as when the language of the page changes; the tags on
+the page take it at once. Since 1.2.0; the deprecated `texts.noItems` of a config still works below them.
+
 | Element | Value |
 | --- | --- |
 | `bro-nv-tags` | An array of strings in `row[col.name]`; the tags that do not fit become an ellipsis |

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

@@ -1,4 +1,49 @@
 import { BroCellElement, BroCol, BroConfiguredElement, BroHTMLElement, BroResolvedConfig, BroRow, BroView } from "@table-bro/core";
+//#region ../shared/js/bro-tags.d.ts
+/** The texts of the tags of a skin. */
+interface BroTagsTexts {
+  /** The text of a cell of tags without items, No data by default. */
+  empty: string;
+}
+/**
+ * Sets the texts of the tags of the skin, as when the language of the page changes: the tags in the DOM take them at
+ * once. They take the place of texts.noItems of the config of a table.
+ * @param texts - the texts that change
+ */
+export declare function setTagsTexts(texts: Partial<BroTagsTexts>): void;
+/**
+ * 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[];
+  /** Whether the cell has no items and shows the text of an empty cell. */
+  private empty;
+  /** 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;
+  /** Renders the text of an empty cell again, as setTagsTexts() changes it. */
+  renderEmpty(): void;
+  /**
+   * Puts an item into its tag: a tag is markup only for a column with html: true.
+   * @param tagEl - the tag
+   * @param item - the item
+   */
+  private renderTag;
+  /** The text of an empty cell: the one of the skin, the deprecated texts.noItems of the table, or No data. */
+  private emptyText;
+  /** 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/table-bro.native.config.d.ts
 export declare const nativeSkinConfig: {
   css: {
@@ -118,30 +163,9 @@ export declare const nativeSkinConfig: {
     'bro-nv-tags': string;
     'bro-switch': string;
   };
+  defineElements: (registry: CustomElementRegistry) => void;
 };
 //#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 {
@@ -179,7 +203,11 @@ export declare function withSwitch(): void;
 /**
  * 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.
+ * @param options - the texts of the tags, as {texts: {empty: 'No tags'}}; setTagsTexts() changes them later
+ * @param options.texts - the texts of the tags
  */
-export declare function withTags(): void;
+export declare function withTags(options?: {
+  texts?: Partial<BroTagsTexts>;
+}): void;
 //#endregion
-export {};
+export type { BroTagsTexts };

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

@@ -1,33 +1,34 @@
-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)}"`:``}>
+import{BroDom as e,BroHTML as t,BroHTMLElement as n,broCellSelectors as r,broVisuallyHidden as i,dispatchAction as a,events as o,fitCellItems as s,isPrerendered as c,registerSkin as l}from"@table-bro/core";let u={};const d=/* @__PURE__ */ new Set;function f(e){u={...u,...e},d.forEach(e=>e.renderEmpty())}var p=class extends n{template(){let e=this.col?.name,t=e&&this.row?.[e];return this.empty=!(Array.isArray(t)&&t.length),this.items=this.empty?[this.emptyText()]:t,this.items.map(()=>this.tagHTML).join(``)}row;col;config;items=[];empty=!1;fitting;rendered=!1;render(){this.insertAdjacentHTML(`afterbegin`,this.template()),Array.from(this.children).forEach((e,t)=>this.renderTag(e,this.items[t]))}renderEmpty(){this.empty&&this.firstElementChild&&(this.items=[this.emptyText()],this.renderTag(this.firstElementChild,this.items[0]))}renderTag(e,t){this.col?.html?e.innerHTML=t:e.textContent=t}emptyText(){return u.empty??this.config?.texts.noItems??`No data`}connectedCallback(){d.add(this),this.rendered?this.renderEmpty():(this.rendered=!0,this.render()),this.fitting=new AbortController,s(this,this.fitting.signal)}disconnectedCallback(){d.delete(this),this.fitting?.abort()}};const{escape:m}=t;var h=class extends n{template(){this.css=this.config.components.switch?.css,this.checked=this.getAttribute(`checked`);let e=this.checked===`true`;return`
+      <div ${this.css?`class="${m(this.css.div.className)}"`:``}>
         <input type="checkbox"
-               ${this.css?`class="${s(this.css.div.input.className)}"`:``}
+               ${this.css?`class="${m(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)}">
+      </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:g}=t;var _=class extends n{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="${g(this.css.nav.className)}">
+        <div class="${g(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`
+      </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{escape:v}=t;var y=class extends n{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="${v(this.css.toolbarTitle.className)}">${v(this.toolbarTitle)}</span>
 
         <span class="bro-toolbar-space"></span>
 
-        <div class="${f(this.css.navbarCollapse.className)} bro-toolbar-buttons">
-          <ul class="${f(e)}">
+        <div class="${v(this.css.navbarCollapse.className)} bro-toolbar-buttons">
+          <ul class="${v(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)}
+      <!--/bro-toolbar-->`}config;contentClassName=`bro-navbar-nav`;toolbarTitle;css;navContentEl;rendered=!1;events(){this.addEventListener(`click`,e=>{e.preventDefault()}),this.addEventListener(`keydown`,e=>{let t=e.target.closest?.(`a[role="button"]`);e.key===` `&&!e.repeat&&!e.defaultPrevented&&t&&(e.preventDefault(),t.click())}),this.navContentEl.children[0].addEventListener(`click`,()=>{this.dispatchEvent(new CustomEvent(o.toolbarEvent,{bubbles:!0,composed:!0,detail:o.toolbarSearchOpenEvent}))})}render(){let e=this.dom.createElement(this.config.components.toolbar.selector);e.setAttribute(`class`,`bro-toolbar`),e.config=this.config,this.appendChild(e);let t=this.dom.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(){c(this)||this.rendered||(this.rendered=!0,this.render())}appendToolbarContent(...e){this.navContentEl||=this.querySelector(`.${this.contentClassName}`),this.navContentEl.append(...e)}get dom(){return new e(this.ownerDocument)}templateToolbarButton(e,t,n,r){let a=t===this.config.texts.buttonRole?` aria-hidden="true"`:``,o=e&&t?`<span class="${v(i)}"${a}> ${v(t)}</span>`:``;return this.dom.createFromHTML(`
+      <li class="${v(this.css.navbarCollapse.ul.li.className)}">
+        <a class="${v(this.css.navbarCollapse.ul.li.a.className)}${r?` ${v(r)}`:``}" href=""
+           role="button">
+           ${n||``}${v(e)}${o}
         </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`?`
+      </li>`)}renderSearchButton(){let e=this.dom.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,this.config.texts.searchRole(this.config.toolbarTitle),e.iconHTML,`bro-toolbar-button-search`)}renderButtons(){return(this.config.components.toolbarMain.buttons??[]).map(e=>{if(e.mode===`navbar-dropdown`){let t=this.dom.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(o.toolbarEvent,{bubbles:!0,composed:!0,detail:e.detail}))}),t}{let t=this.templateToolbarButton(e.buttonTitle,this.config.texts.buttonRole,e.iconHTML);return t.querySelector(`a`)?.addEventListener(`click`,()=>{this.dispatchEvent(new CustomEvent(o.toolbarEvent,{bubbles:!0,composed:!0,detail:e.eventType}))}),t}})}};const{escape:b}=t;var x=class extends n{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="${b(this.buttonClassName)}"`:``,t=!this.buttonTitle&&this.label?` aria-label="${b(this.label)}"`:``,n=`${b(this.buttonTitle)}${this.iconHTML?`${this.buttonTitle?`&nbsp;`:``}${this.iconHTML}`:``}`;return this.mode===`link`?`
         <a${e} href=""
            role="button"${t}>
           ${n}
@@ -35,14 +36,14 @@ import{BroHTML as e,BroHTMLElement as t,broCellSelectors as n,dispatchAction as
         <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`
+        </button>`}label;buttonClassName;buttonTitle;iconHTML;mode;eventType;events(){let e=this.children[0];e.addEventListener(`click`,t=>{a(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:S,text:C}=t;var w=class extends n{template(){return this.containerClassName=this.getAttribute(`container-class`),this.value=this.getAttribute(`value`)||``,`
+      <span class="${r.ellipsisContainer}${this.containerClassName?` ${S(this.containerClassName)}`:``}">
+        <span class="${r.ellipsis}"></span>
+      </span>`}row;col;config;containerClassName;tooltip;value;release;released=!1;rendered=!1;render(){this.insertAdjacentHTML(`afterbegin`,this.template());let e=this.querySelector(`.${r.ellipsis}`);this.col?.html?(e.innerHTML=this.value,this.tooltip=C(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:T}=t;var E=class extends n{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-content">${T(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)}};
+      </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`)),a(this,o.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(){c(this)||(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.config.prerender||(this.release=this.config.components.sortHeader.afterRender?.(e,this.tooltip))}};
 /**
 * @license
 * Copyright Google LLC All Rights Reserved.
@@ -50,12 +51,12 @@ import{BroHTML as e,BroHTMLElement as t,broCellSelectors as n,dispatchAction as
 * 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,`
+const{escape:D}=t,O={"bro-button":x,"bro-paginator":class extends n{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="${D(t.className)}"`:``,r=t?.li?.className?` class="${D(t.li.className)}"`:``,i=t?.li?.a?.className?`${D(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)}
+              ${D(e.itemsPerPage)}
             </div>
 
             ${this.pageSizeDropdown?.length?``:this.templatePageSizeValue()}
@@ -63,51 +64,51 @@ const{escape:x}=e,S={"bro-button":h,"bro-paginator":class extends t{template(){t
 
           <div class="bro-paginator-range-actions">
             <div class="bro-paginator-range-label" aria-live="polite">
-              ${x(e.rangeLabel(this.pageIndex,this.pageSize,this.length))}
+              ${D(e.rangeLabel(this.pageIndex,this.pageSize,this.length))}
             </div>
 
-            <nav aria-label="${x(e.pageNavigation)}">
+            <nav aria-label="${D(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>
+                       aria-label="${D(e.firstPage)}">${D(e.first)}</a>
                   </li>`:``}
 
                   <li${r}>
                     <a class="${i}bro-paginator-navigation-previous" href=""
-                       aria-label="${x(e.previousPage)}">${x(e.previous)}</a>
+                       aria-label="${D(e.previousPage)}">${D(e.previous)}</a>
                   </li>
 
                   <li${r}>
                     <a class="${i}bro-paginator-navigation-next" href=""
-                       aria-label="${x(e.nextPage)}">${x(e.next)}</a>
+                       aria-label="${D(e.nextPage)}">${D(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>
+                       aria-label="${D(e.lastPage)}">${D(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>
+      </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(){c(this)||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 t=new e(this.ownerDocument).createElement(this.dropdownSelector);t.config=this.config,t.setAttribute(`mode`,`select`),t.setAttribute(`button-title`,this.pageSize.toString()),t.setAttribute(`options`,JSON.stringify(this.pageSizeDropdown)),t.setAttribute(`label`,this.texts.itemsPerPage),t.setAttribute(`disabled`,this.disabled.toString()),this.eventsPageSize(t),this.pageSizeEl.append(t)}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":E,"bro-text-ellipsis":w,"bro-toolbar":_,"bro-toolbar-main":y};function k(){A(`bro-switch`,h)}function A(e,t,n=typeof customElements<`u`?customElements:void 0){n&&!n.get(e)&&n.define(e,t)}function j(e,t){let n=[];Object.entries(O).forEach(([e,r])=>{let i=t.get(e);i?i!==r&&n.push(e):t.define(e,r)}),n.length&&console.warn(`${e}: ${n.join(`, `)} are already defined by another vanilla skin bundle, so this skin uses its elements. Load one vanilla skin bundle per page.`)}var M=class extends p{tagHTML=`<mark></mark>`};const{escape:N}=t;var P=class extends n{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="${N(e)}"`:``;return this.mode===`select`||this.mode===`dropdown`?`
+        <select name="${N(this.name)}"${t}>
+          <option value="" hidden>${N(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>
+          <select name="${N(this.name)}"${t}>
+            <option value="" hidden>${N(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`
+        </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(){c(this)||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`
+             <option value="${N(e.value)}">${N(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(),`
+            <optgroup label="${N(e.header)}"></optgroup>`}).join(``)}`}renderDisabled(){this.dropdownToggleEl.toggleAttribute(`disabled`,this.getAttribute(`disabled`)===`true`)}};const{escape:F}=t;var I=class extends n{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};
+        max="${e?``:100}" aria-label="${F(this.config.texts.loadingProgress)}"></progress>`}static get observedAttributes(){return[`value`]}config;color;mode;value;rendered=!1;valueEl;render(){this.insertAdjacentHTML(`afterbegin`,this.template())}connectedCallback(){c(this)||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)}};const L={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`},defineElements:e=>{j(`@table-bro/native`,e),A(`bro-nv-dropdown`,P,e),A(`bro-nv-progress-bar`,I,e)}};typeof customElements<`u`&&L.defineElements(customElements),l(`nv`,L);function R(e={}){f(e.texts??{}),A(`bro-nv-tags`,M)}export{M as BroNativeTagsComponent,h as BroSwitchComponent,L as nativeSkinConfig,f as setTagsTexts,k as withSwitch,R as withTags};
 //# sourceMappingURL=table-bro.native.esm.js.map