@scania/tegel/dist/components/tds-table-toolbar.js

Tegel Design System

import{t,p as e,H as a,c as s,h as r,a as o}from"./index.js";import{d as i}from"./p-CIt4YhvL.js";const l=["compactDesign","noMinWidth","verticalDividers","horizontalScrollWidth"],d=e(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tdsFilter=s(this,"tdsFilter",7),this.tableTitle="",this.filter=!1,this.tdsSearchAriaLabel="",this.verticalDividers=!1,this.compactDesign=!1,this.noMinWidth=!1,this.whiteBackground=!1,this.tableId="",this.horizontalScrollWidth=null}internalTdsPropChangeListener(t){this.tableId===t.detail.tableId&&t.detail.changed.filter((t=>l.includes(t))).forEach((e=>{if(void 0===this[e])throw Error("Table prop is not supported: "+e);this[e]=t.detail[e]}))}connectedCallback(){var t;this.tableEl=this.host.closest("tds-table"),this.tableId=null===(t=this.tableEl)||void 0===t?void 0:t.tableId,this.tdsSearchAriaLabel||console.warn("tds-table-toolbar: tdsSearchAriaLabel is highly recommended for accessibility")}componentWillLoad(){l.forEach((t=>{var e;this[t]=null===(e=this.tableEl)||void 0===e?void 0:e[t]}))}handleSearch(t){const e=t.currentTarget.value.toLowerCase(),a=t.currentTarget.parentElement;this.tdsFilter.emit({tableId:this.tableId,query:e}),e.length>0?a.classList.add("tds-table__searchbar--active"):a.classList.remove("tds-table__searchbar--active")}getStyles(){const t={};return this.horizontalScrollWidth&&(t.width=this.horizontalScrollWidth+"px"),t}render(){return r(o,{key:"f8a4f02533b392cdef06823c0a8f3fc7eb65dac1",class:{"tds-table--compact":this.compactDesign,"toolbar__horizontal-scroll":!!this.horizontalScrollWidth},style:this.getStyles(),"aria-labelledby":"table-toolbar-title"},r("div",{key:"a4d5d8b3a1f874ad6cf8b6c2f0387abb80dc6c7c",class:"tds-table__upper-bar-flex"},r("div",{key:"fdda25df918b94db38efec19b67486c27ecef944",class:"tds-table__actionbar-left"},this.tableTitle&&r("caption",{key:"835fa2f6230dffd4e30f219d5753959d66833717",id:"table-toolbar-title",class:"tds-table__title"},this.tableTitle),r("slot",{key:"1e55264456b36bfee36674ced3ab6b7a4767dd24",name:"start"})),r("div",{key:"6bbc6ca3917171e610ae162bc2ffce3e5b190874",class:"tds-table__actionbar"},this.filter&&r("div",{key:"49acb858ed5fefb5ef3cd7e84a11d22a8ffbbfa4",class:"tds-table__searchbar"},r("input",{key:"72e41aef9c82e018e03c95dc3c48f1901cf1ce84",class:"tds-table__searchbar-input",type:"text",onKeyUp:t=>this.handleSearch(t),"aria-label":this.tdsSearchAriaLabel}),r("span",{key:"c9825e7843f1460f2d9d2aa1122790b2d2c8fd01",class:"tds-table__searchbar-icon"},r("tds-icon",{key:"3f772922cc80abbb127ff675f4e0e9db79cd6c9a",name:"search",size:"20px"}))),r("slot",{key:"20128d959ea3a1fc97eeb4dcf41313db088feae5",name:"end"}))))}get host(){return this}static get style(){return':host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--tds-table-toolbar-background);color:var(--tds-table-color);padding:0 var(--tds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .tds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .tds-table__actionbar-left{display:flex}:host .tds-table__title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding-top:var(--tds-spacing-element-16);text-align:left;margin-right:var(--tds-spacing-element-8)}:host .tds-table__actionbar,:host slot[name=end]::slotted(*),:host slot[name=start]::slotted(*){display:flex;align-self:center}:host .tds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .tds-table__searchbar::after{content:"";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--tds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .tds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .tds-table__searchbar:focus-within,:host .tds-table__searchbar.tds-table__searchbar--active{width:208px;background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:focus-within:hover,:host .tds-table__searchbar.tds-table__searchbar--active:hover{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar .tds-table__searchbar-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .tds-table__searchbar .tds-table__searchbar-input :focus{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:hover{background-color:var(--tds-table-toolbar-searchbar-background-hover)}:host .tds-table__searchbar .tds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.toolbar__horizontal-scroll){position:absolute;top:var(--tds-spacing-element-16)}:host(.tds-table--compact){height:56px}'}},[257,"tds-table-toolbar",{tableTitle:[513,"table-title"],filter:[516],tdsSearchAriaLabel:[1,"tds-search-aria-label"],verticalDividers:[32],compactDesign:[32],noMinWidth:[32],whiteBackground:[32],tableId:[32],horizontalScrollWidth:[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]);function c(){"undefined"!=typeof customElements&&["tds-table-toolbar","tds-icon"].forEach((e=>{switch(e){case"tds-table-toolbar":customElements.get(t(e))||customElements.define(t(e),d);break;case"tds-icon":customElements.get(t(e))||i()}}))}c();const b=d,n=c;export{b as TdsTableToolbar,n as defineCustomElement}