@luzmo/lucero 2.4.2 → 2.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/action-button/action-button.d.ts +3 -2
- package/components/action-button/index.cjs +1 -1
- package/components/action-button/index.js +1 -1
- package/components/action-button-B4_uvHiN.cjs +22 -0
- package/components/action-button-DU95RNNi.js +138 -0
- package/components/action-menu/action-menu.d.ts +16 -1
- package/components/action-menu/index.cjs +1 -1
- package/components/action-menu/index.d.ts +1 -0
- package/components/action-menu/index.js +1 -1
- package/components/{action-menu-C0sHNsjG.js → action-menu-B6nNYwlL.js} +40 -22
- package/components/action-menu-C_vyFNJt.cjs +58 -0
- package/components/badge/index.cjs +1 -1
- package/components/badge/index.js +1 -1
- package/components/badge-Bp-1d70q.js +96 -0
- package/components/badge-CNeUkS4b.cjs +23 -0
- package/components/button/index.cjs +1 -1
- package/components/button/index.js +1 -1
- package/components/button-B1V_2tHk.cjs +20 -0
- package/components/button-QXavBh1X.js +126 -0
- package/components/calendar/index.cjs +1 -1
- package/components/calendar/index.js +1 -1
- package/components/{calendar-D1UtHvpY.js → calendar-BNGwCJsG.js} +1 -1
- package/components/{calendar-pQxEWdYC.cjs → calendar-CLGqcox8.cjs} +1 -1
- package/components/checkbox/index.cjs +1 -1
- package/components/checkbox/index.js +1 -1
- package/components/{checkbox-BEjvkjfc.js → checkbox-CydI9yXG.js} +1 -1
- package/components/{checkbox-ClVrkeLp.cjs → checkbox-JCvBro0K.cjs} +1 -1
- package/components/date-range-picker/index.cjs +1 -1
- package/components/date-range-picker/index.js +1 -1
- package/components/{date-range-picker-DKVmGpUC.js → date-range-picker-5SDPe2fQ.js} +1 -1
- package/components/{date-range-picker-D149LIGC.cjs → date-range-picker-CLfEEYkE.cjs} +1 -1
- package/components/date-time-picker/index.cjs +1 -1
- package/components/date-time-picker/index.js +1 -1
- package/components/{date-time-picker-CRpvRk9T.cjs → date-time-picker-DXTksnPd.cjs} +1 -1
- package/components/{date-time-picker-6c19YzwF.js → date-time-picker-s3xujamC.js} +1 -1
- package/components/index.cjs +1 -1
- package/components/index.js +23 -21
- package/components/match-media-B_0cVVtk.cjs +18 -0
- package/components/match-media-C5X2OZiD.js +34 -0
- package/components/notice/index.cjs +1 -1
- package/components/notice/index.js +1 -1
- package/components/{notice-CsWaqcq3.cjs → notice-CQFyo6OE.cjs} +1 -1
- package/components/{notice-N0-lxEf_.js → notice-CQI5kFRd.js} +1 -1
- package/components/picker/index.cjs +1 -1
- package/components/picker/index.js +1 -1
- package/components/picker-C1tD-4ac.cjs +124 -0
- package/components/{picker-D0fMBZLb.js → picker-Czkf6auL.js} +7 -6
- package/components/progress-steps/index.cjs +1 -1
- package/components/progress-steps/index.js +1 -1
- package/components/progress-steps/progress-steps.d.ts +0 -5
- package/components/{progress-steps-BvCzsq9Z.js → progress-steps-CXJEaaUg.js} +2 -5
- package/components/{progress-steps-CvdQQwHc.cjs → progress-steps-Dqh53oC1.cjs} +2 -2
- package/components/prompt-box/index.cjs +1 -1
- package/components/prompt-box/index.js +1 -1
- package/components/{prompt-box-Cz_m2wso.js → prompt-box-CA8bsoZP.js} +2 -2
- package/components/{prompt-box-sp9_-Hnx.cjs → prompt-box-DyODaKXV.cjs} +1 -1
- package/components/question-box/index.cjs +1 -1
- package/components/question-box/index.js +1 -1
- package/components/{question-box-D7YSi_6c.js → question-box-DSwTpxAW.js} +4 -4
- package/components/{question-box-Bdtsgv1k.cjs → question-box-cBeVshAq.cjs} +1 -1
- package/components/search/index.cjs +1 -1
- package/components/search/index.js +1 -1
- package/components/{search-DEjLSJ96.js → search-CFTOvmWA.js} +1 -1
- package/components/{search-PxJEuwHt.cjs → search-DJ6KwOam.cjs} +1 -1
- package/components/select/index.cjs +1 -1
- package/components/select/index.js +1 -1
- package/components/{select-BUgHi69P.js → select-B86uAHme.js} +5 -4
- package/components/select-CKMCEJf7.cjs +158 -0
- package/components/status-light/index.cjs +1 -1
- package/components/status-light/index.js +1 -1
- package/components/{status-light-DwUnjE3t.js → status-light-B1T3aGJs.js} +1 -1
- package/components/status-light-COApWq-B.cjs +21 -0
- package/components/strategies-Bb7zEjrU.cjs +18 -0
- package/components/{strategies-Cl59wdNZ.js → strategies-COS7mShJ.js} +11 -24
- package/components/table/controllers/table-announcer.d.ts +12 -0
- package/components/table/controllers/table-column-resize.d.ts +41 -0
- package/components/table/controllers/table-grid-navigation.d.ts +28 -0
- package/components/table/controllers/table-layout.d.ts +55 -0
- package/components/table/controllers/table-row-expansion.d.ts +45 -0
- package/components/table/controllers/table-virtualizer.d.ts +42 -0
- package/components/table/index.cjs +18 -0
- package/components/table/index.d.ts +32 -0
- package/components/table/index.js +20 -0
- package/components/table/table-body.d.ts +24 -0
- package/components/table/table-cell.d.ts +27 -0
- package/components/table/table-checkbox-cell.d.ts +41 -0
- package/components/table/table-columns.d.ts +45 -0
- package/components/table/table-disclosure-cell.d.ts +21 -0
- package/components/table/table-head-cell.d.ts +77 -0
- package/components/table/table-head.d.ts +34 -0
- package/components/table/table-model.d.ts +56 -0
- package/components/table/table-row-details.d.ts +29 -0
- package/components/table/table-row.d.ts +64 -0
- package/components/table/table-styles.d.ts +9 -0
- package/components/table/table-templates.d.ts +41 -0
- package/components/table/table.d.ts +197 -0
- package/components/table/types.d.ts +81 -0
- package/components/table-BckZkgeh.js +1601 -0
- package/components/table-Bcq2K21l.cjs +180 -0
- package/components/tabs/index.cjs +1 -1
- package/components/tabs/index.js +1 -1
- package/components/{tabs-DxOD4QNt.cjs → tabs-CMU8X4ho.cjs} +1 -1
- package/components/{tabs-BD_ATrBg.js → tabs-D8U2PxcE.js} +1 -1
- package/components/tags/index.cjs +1 -1
- package/components/tags/index.js +1 -1
- package/components/tags-D8F1o4UZ.cjs +47 -0
- package/components/tags-ZzY_q4TH.js +208 -0
- package/components/template-property-DNDi7lQv.js +47 -0
- package/components/template-property-yhcAmPXk.cjs +18 -0
- package/components/utils.cjs +1 -1
- package/components/utils.js +2 -1
- package/custom-elements.json +1 -1
- package/index.d.ts +1 -0
- package/package.json +9 -1
- package/standalone/accordion.js +1 -1
- package/standalone/action-bar.js +1 -1
- package/standalone/action-button.js +1 -1
- package/standalone/action-menu.js +5 -3
- package/standalone/avatar.js +1 -1
- package/standalone/badge.js +1 -1
- package/standalone/button.js +1 -1
- package/standalone/calendar.js +1 -1
- package/standalone/checkbox.js +1 -1
- package/standalone/chunks/action-button-BJGE_BDu.js +6 -0
- package/standalone/chunks/badge-SNXdnyCZ.js +7 -0
- package/standalone/chunks/button-DHan4NJY.js +4 -0
- package/standalone/chunks/{button-Dykw3TSO.js → button-DTL9dD2r.js} +1 -1
- package/standalone/chunks/{calendar-ZwUYkzVq.js → calendar-BOzu003d.js} +1 -1
- package/standalone/chunks/{checkbox-OQtakoP8.js → checkbox-DQ4wPgG_.js} +2 -2
- package/standalone/chunks/{clear-button-pVGfwye8.js → clear-button-3zpCVxG5.js} +1 -1
- package/standalone/chunks/{close-button-RpPiwBdf.js → close-button-C96dazyi.js} +1 -1
- package/standalone/chunks/{color-field-CrCF4kqZ.js → color-field-BFvUGE4L.js} +1 -1
- package/standalone/chunks/{color-menu-B5UOMYmX.js → color-menu-BIKuitbH.js} +2 -2
- package/standalone/chunks/{icon-Dy6J1QeX.js → icon-BypO7M7G.js} +1 -1
- package/standalone/chunks/luzmo-icons-B-pCv-xg.js +13 -0
- package/standalone/chunks/match-media-BMi7j6hf.js +2 -0
- package/standalone/chunks/{menu-nolJetlp.js → menu-DSMoQt1w.js} +1 -1
- package/standalone/chunks/{number-field-C3DYfl1s.js → number-field-B6BDXkL7.js} +3 -3
- package/standalone/chunks/{options-BjRSj630.js → options-CkmITqgV.js} +5 -5
- package/standalone/chunks/{picker-button-BeXTIgUt.js → picker-button-BZWqDoNQ.js} +1 -1
- package/{components/picker-BliQJlY_.cjs → standalone/chunks/picker-jZI5AjVJ.js} +31 -47
- package/standalone/chunks/{segments-factory-Ch3AAizU.js → segments-factory-Da9ojsLC.js} +1 -1
- package/standalone/chunks/strategies-C-vW4MlK.js +2 -0
- package/standalone/chunks/{swatch-m_4GcO2_.js → swatch-CGR_GWqO.js} +1 -1
- package/standalone/chunks/template-property-Dn64faHO.js +2 -0
- package/standalone/chunks/{text-field-BnZtyodU.js → text-field-4OKvLOXG.js} +1 -1
- package/standalone/chunks/{text-field-BrlDeJsx.js → text-field-C2oROxum.js} +1 -1
- package/standalone/clear-button.js +1 -1
- package/standalone/close-button.js +1 -1
- package/standalone/color-field.js +1 -1
- package/standalone/color-menu.js +1 -1
- package/standalone/color-picker.js +1 -1
- package/standalone/date-range-picker.js +1 -1
- package/standalone/date-time-picker.js +1 -1
- package/standalone/icon.js +1 -1
- package/standalone/manifest.json +25 -22
- package/standalone/menu.js +1 -1
- package/standalone/multi-language-field.js +1 -1
- package/standalone/notice.js +1 -1
- package/standalone/number-field.js +1 -1
- package/standalone/options.js +1 -1
- package/standalone/picker-button.js +1 -1
- package/standalone/picker.js +1 -1
- package/standalone/progress-steps.js +2 -2
- package/standalone/prompt-box.js +9 -9
- package/standalone/question-box.js +1 -1
- package/standalone/search.js +1 -1
- package/standalone/select.js +2 -2
- package/standalone/slider.js +1 -1
- package/standalone/status-light.js +1 -1
- package/standalone/swatch.js +1 -1
- package/standalone/table.js +185 -0
- package/standalone/tabs.js +1 -1
- package/standalone/tags.js +1 -1
- package/standalone/text-field.js +1 -1
- package/standalone/toast.js +1 -1
- package/standalone/utils.js +1 -1
- package/utils/index.d.ts +1 -0
- package/utils/template-property.d.ts +13 -0
- package/components/action-button-BRijXjEz.js +0 -138
- package/components/action-button-CX1uYbQp.cjs +0 -22
- package/components/action-menu-CwzRbF61.cjs +0 -56
- package/components/badge-D2Hjf-Ww.js +0 -96
- package/components/badge-D8pIDEoq.cjs +0 -23
- package/components/button-Bvnidb4x.cjs +0 -20
- package/components/button-DIV_j_U3.js +0 -126
- package/components/select-DsGVB01K.cjs +0 -158
- package/components/status-light-D3hdx8Pd.cjs +0 -21
- package/components/strategies-BwNbUXYS.cjs +0 -18
- package/components/tags-BIpFgOYy.js +0 -208
- package/components/tags-fLCGajv_.cjs +0 -47
- package/standalone/chunks/action-button-BzzPBqt5.js +0 -6
- package/standalone/chunks/badge-DD-tMgzi.js +0 -7
- package/standalone/chunks/button-Bv3v7VbN.js +0 -4
- package/standalone/chunks/luzmo-icons-CJa-aByT.js +0 -13
- package/standalone/chunks/picker-hbMQOkUX.js +0 -108
- package/standalone/chunks/strategies-kad_0dTB.js +0 -2
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
/*! * Lucero - The design system for Luzmo.
|
|
2
|
+
*
|
|
3
|
+
* Copyright © 2026 Luzmo
|
|
4
|
+
* All rights reserved.
|
|
5
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
+
*
|
|
10
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
+
* SOFTWARE.
|
|
17
|
+
* */
|
|
18
|
+
require("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./roving-tabindex-BoPao4td.cjs"),r=require("./language-resolution-CSjktYg5.cjs"),i=require("./match-media-B_0cVVtk.cjs");require("./checkbox-JCvBro0K.cjs");const a=require("./template-property-yhcAmPXk.cjs");let o=require("lit"),s=require("lit/decorators.js"),c=require("@luzmo/icons"),l=require("lit/directives/if-defined.js"),u=require("lit/directives/class-map.js"),d=require("lit/directives/style-map.js"),f=require("lit/directives/repeat.js"),p=require("@tanstack/table-core"),m=require("@tanstack/virtual-core");var h=`data-luzmo-table-announcer`,g,_=0,v=0,ee=()=>{let e=document.createElement(`div`);return e.setAttribute(h,``),e.setAttribute(`aria-live`,`polite`),e.setAttribute(`aria-atomic`,`true`),Object.assign(e.style,{position:`absolute`,inlineSize:`1px`,blockSize:`1px`,margin:`-1px`,padding:`0`,border:`0`,overflow:`hidden`,clipPath:`inset(50%)`,whiteSpace:`nowrap`}),e},te=class{constructor(e){e.addController(this)}announce(e){if(typeof document>`u`||!v)return;g??=ee(),g.isConnected||document.body.append(g);let t=g;t.textContent=``,cancelAnimationFrame(_),_=requestAnimationFrame(()=>{t.textContent=e})}hostConnected(){v+=1}hostDisconnected(){--v,v===0&&(cancelAnimationFrame(_),g?.remove(),g=void 0)}},y=e=>typeof e==`number`&&Number.isFinite(e)?e:void 0,b=e=>`luzmo-table-details-${[...e].map(e=>/^[A-Za-z0-9]$/.test(e)?e:`_${e.codePointAt(0).toString(16)}_`).join(``)}`,x=e=>y(e.minWidth)??(e.resizable?48:0),S=e=>y(e.maxWidth)??1e4,C=(e,t)=>Math.min(S(t),Math.max(x(t),Math.round(e))),ne=(e,t)=>{let n=y(t)??y(e.width);if(n!==void 0)return`${C(n,e)}px`;let r=y(e.minWidth)??(e.resizable?48:0),i=y(e.maxWidth);return i===void 0?r>0?`minmax(${r}px, 1fr)`:`minmax(0px, 1fr)`:`minmax(${r}px, ${i}px)`},re=(e,t,n)=>{let r=[];n.selects&&r.push(`var(--table-checkbox-cell-inline-size)`),n.expandable&&r.push(`var(--table-disclosure-cell-inline-size)`);for(let n of e)r.push(ne(n,y(t[n.id])));return r.join(` `)},w=(e,t)=>{let n=y(t)??y(e.width);return n===void 0?y(e.minWidth)??(e.resizable?48:0):C(n,e)},ie=(e,t,n)=>{let r=[];n.selects&&r.push(`var(--table-checkbox-cell-inline-size)`),n.expandable&&r.push(`var(--table-disclosure-cell-inline-size)`);let i=e.reduce((e,n)=>e+w(n,y(t[n.id])),0);return r.push(`${i}px`),`calc(${r.join(` + `)})`},ae=e=>({id:e.id,header:typeof e.header==`string`?e.header:e.id,width:y(e.width),minWidth:y(e.minWidth),maxWidth:y(e.maxWidth),resizable:e.resizable!==!1,lineClamp:y(e.lineClamp)}),oe=(e,t)=>{let n=e===`PageDown`||e===`PageUp`;switch(e){case`ArrowRight`:case`PageDown`:return{action:t?`increase`:`decrease`,amount:n?64:16};case`ArrowLeft`:case`PageUp`:return{action:t?`decrease`:`increase`,amount:n?64:16};case`Home`:return{action:`min`,amount:0};case`End`:return{action:`max`,amount:0};default:return}},se=(e,t,n)=>t.action===`min`?x(n):t.action===`max`?S(n):C(e+(t.action===`increase`?1:-1)*t.amount,n),T={selectAll:`Select All`,selectRow:`Select row {index}`,sortAscending:`Sorted by {column}, ascending`,sortDescending:`Sorted by {column}, descending`,expandRow:`Expand {label}`,collapseRow:`Collapse {label}`,resizeColumn:`Resize {column}`,columnWidth:`{column}, {width} pixels`},ce=e=>e.rowType===`information`||e._$rowType$===1,le=e=>e===`asc`?`ascending`:e===`desc`?`descending`:`none`,ue=e=>e===`asc`?`desc`:`asc`,E=(e={},t)=>{let n=Object.fromEntries(Object.entries(e).filter(([,e])=>typeof e==`string`&&e!==``)),r={...T,...n};return t&&(r.selectAll=t),r},D=(e,t)=>{let n=e;for(let[e,r]of Object.entries(t))n=n.replaceAll(`{${e}}`,r);return n},de=(e,t)=>e.map((e,n)=>({item:e,value:t?t(e,n):String(n),index:n,information:ce(e)})),fe=(e,t)=>typeof e==`function`?e(t):e,pe=class{constructor(){this.records=[],this.sorting=[],this.manualSorting=!1,this.rowSelection={},this.selectedOrder=[],this.columns=[],this.table=(0,p.createTable)({data:[],columns:[],state:{},onStateChange:()=>{},renderFallbackValue:null,getCoreRowModel:(0,p.getCoreRowModel)(),getSortedRowModel:(0,p.getSortedRowModel)(),getRowId:e=>e.value,enableRowSelection:e=>!!this.selects&&!e.original.information,enableMultiRowSelection:()=>this.selects===`multiple`,onRowSelectionChange:e=>{this.pendingSelection=fe(e,this.rowSelection)}}),this.compare=(e,t)=>typeof e==`number`&&typeof t==`number`?e-t:((!this.collator||this.collatorLocale!==this.locale)&&(this.collatorLocale=this.locale,this.collator=new Intl.Collator(this.locale,{numeric:!0,sensitivity:`base`})),this.collator.compare(String(e),String(t)))}setRecords(e){this.records=e}setSelected(e){this.selectedOrder=[...e],this.rowSelection=Object.fromEntries(e.map(e=>[e,!0]))}setSorting(e,t=!1){if(this.manualSorting=t,!e){this.sorting=[];return}this.columns.some(t=>t.id===e.key)||(this.columns=[...this.columns,this.createSortColumn(e.key)]),this.sorting=[{id:e.key,desc:e.direction===`desc`}]}get rows(){this.sync();let e=this.table.getRowModel().rows.map(e=>e.original).filter(e=>!e.information);return e.length===this.records.length?e:this.records.map(t=>t.information?t:e.shift())}isSelected(e){return!!this.rowSelection[e]}get allSelected(){let e=this.selectableRecords;return e.length>0&&e.every(e=>this.isSelected(e.value))}get someSelected(){return this.selectableRecords.some(e=>this.isSelected(e.value))}toggle(e){this.sync();let t=this.findRow(e);if(t?.getCanSelect())return this.capture(()=>t.toggleSelected())}toggleAll(e){return this.sync(),this.capture(()=>this.table.toggleAllRowsSelected(e))}get selectableRecords(){return this.selects?this.records.filter(e=>!e.information):[]}findRow(e){return this.table.getCoreRowModel().rows.find(t=>t.original.value===e)}capture(e){this.pendingSelection=void 0,e();let t=this.pendingSelection??this.rowSelection;this.pendingSelection=void 0;let n=this.selectedOrder.filter(e=>t[e]),r=[...new Set([...this.records.map(e=>e.value),...Object.keys(t)])].filter(e=>t[e]&&!n.includes(e));return[...n,...r]}createSortColumn(e){return{id:e,accessorFn:t=>t.item[e],sortUndefined:`last`,sortingFn:(e,t,n)=>this.compare(e.getValue(n),t.getValue(n))}}sync(){this.table.setOptions(e=>({...e,data:this.records,columns:this.columns,manualSorting:this.manualSorting,state:{...this.table.initialState,sorting:this.sorting,rowSelection:this.rowSelection}}))}},me=new Set([`luzmo-table-cell`,`luzmo-table-head-cell`,`luzmo-table-checkbox-cell`]),O=e=>e.find(e=>e instanceof HTMLElement&&e.classList.contains(`resize-handle`)),k=class{constructor(e,t){this.handlePointerDown=e=>{if(!this.options.owns(e)||e.button!==0)return;let t=e.composedPath(),n=O(t),r=this.cellFromPath(t);if(!n||r?.localName!==`luzmo-table-head-cell`||!r.resizable)return;let i=r;e.preventDefault();let a=this.options.headCells().indexOf(i),o=i.toLayout(Math.max(a,0));this.drag={id:o.id,pointerId:e.pointerId,startWidth:i.getBoundingClientRect().width,startX:e.clientX};try{n.setPointerCapture(e.pointerId)}catch{}},this.handlePointerMove=e=>{let t=this.drag;if(!t||e.pointerId!==t.pointerId)return;let n=this.options.layouts().find(e=>e.id===t.id);if(!n)return;let r=(e.clientX-t.startX)*(this.options.isLTR()?1:-1);this.setColumnWidth(n,t.startWidth+r,!1)},this.handlePointerUp=e=>{let t=this.drag;if(!t||e.pointerId!==t.pointerId)return;let n=this.options.layouts().find(e=>e.id===t.id);if(this.drag=void 0,!n)return;let r=(e.clientX-t.startX)*(this.options.isLTR()?1:-1);this.setColumnWidth(n,t.startWidth+r,!0)},this.host=e,this.options=t,e.addController(this)}hostConnected(){this.host.addEventListener(`pointerdown`,this.handlePointerDown),this.host.addEventListener(`pointermove`,this.handlePointerMove),this.host.addEventListener(`pointerup`,this.handlePointerUp),this.host.addEventListener(`pointercancel`,this.handlePointerUp)}hostDisconnected(){this.host.removeEventListener(`pointerdown`,this.handlePointerDown),this.host.removeEventListener(`pointermove`,this.handlePointerMove),this.host.removeEventListener(`pointerup`,this.handlePointerUp),this.host.removeEventListener(`pointercancel`,this.handlePointerUp),this.drag=void 0}handleKeydown(e){if(e.defaultPrevented||!this.options.owns(e))return;let t=e.composedPath();if(!O(t))return;let n=oe(e.code,this.options.isLTR()),r=this.cellFromPath(t);n&&r?.localName===`luzmo-table-head-cell`&&(e.preventDefault(),e.stopPropagation(),this.resizeColumn(r,n))}resizeColumn(e,t){let n=this.options.headCells().indexOf(e),r=e.toLayout(Math.max(n,0)),i=e.currentWidth||Math.round(e.getBoundingClientRect().width);this.setColumnWidth(r,se(i,t,r),!0)}setColumnWidth(e,t,n){let r=C(t,e),i={...this.host.columnWidths,[e.id]:r};this.host.columnWidths=i;let a=this.options.headCells().find((t,n)=>t.toLayout(n).id===e.id);if(a&&(a.currentWidth=r),!n)return;let o=E(this.options.labels(),this.options.selectAllLabel());this.host.dispatchEvent(new CustomEvent(`luzmo-column-resized`,{bubbles:!0,composed:!0,detail:{columnId:e.id,width:r,columnWidths:{...i}}})),this.options.announce(D(o.columnWidth,{column:e.header,width:this.formatWidth(r)}))}formatWidth(e){let t=this.options.language();return(!this.widthFormatter||this.formatterLanguage!==t)&&(this.formatterLanguage=t,this.widthFormatter=new Intl.NumberFormat(t)),this.widthFormatter.format(e)}cellFromPath(e){return e.find(e=>e instanceof HTMLElement&&me.has(e.localName))}},he=`textarea, select, [contenteditable=""], [contenteditable="true"], input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"])`,ge=class extends n.t{constructor(e,{rows:t,isLTR:n,...r}){super(e,r),this.handleFocusout=e=>{let t=e.relatedTarget;t instanceof HTMLElement&&(this.elements.includes(t)||this.elements.some(e=>e.contains(t)))||queueMicrotask(()=>{this.activeGridCell()||this.hostNoLongerContainsFocus()})},this.handleKeydown=e=>{if(e.defaultPrevented||!this.acceptsEventCode(e.code)||!this.owns(e))return;let t=e.composedPath()[0];if(t instanceof HTMLElement&&t.matches(he))return;let n=this.cellFromPath(e.composedPath());if(!n)return;let r=this.navigationTarget(n,e);r&&(e.preventDefault(),this.focusElement(r))},this.rows=t,this.isLTR=n}acceptsEventCode(e){return e===`ArrowLeft`||e===`ArrowRight`||e===`ArrowUp`||e===`ArrowDown`||e===`Home`||e===`End`}focusElement(e,t){let n=this.elements.indexOf(e);if(n===-1)return;let r=this.elements[this.currentIndex];r&&r!==e&&(r.tabIndex=-1),this.currentIndex=n,this.focus(t)}owns(e){for(let t of e.composedPath())if(t instanceof HTMLElement&&t.localName===`luzmo-table`)return t===this.host;return!0}cellFromPath(e){let t=new Set(this.rows().flat());return e.find(e=>e instanceof HTMLElement&&t.has(e))}activeGridCell(){let e=this.host.ownerDocument.activeElement;for(;e instanceof HTMLElement&&e.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e instanceof HTMLElement&&this.rows().flat().includes(e)?e:void 0}navigationTarget(e,t){let n=this.rows(),r=n.findIndex(t=>t.includes(e));if(r===-1)return;let i=n[r].indexOf(e),a=n.length-1,o=(e,t)=>{let r=n[Math.min(Math.max(e,0),a)];return r[Math.min(Math.max(t,0),r.length-1)]},s=t=>{let i=n[Math.min(Math.max(t,0),a)];return this.cellForKey(i,this.columnKey(n[r],e))},c=this.isLTR()?1:-1,l=t.ctrlKey||t.metaKey;switch(t.code){case`ArrowRight`:return o(r,i+c);case`ArrowLeft`:return o(r,i-c);case`ArrowDown`:return s(r+1);case`ArrowUp`:return s(r-1);case`Home`:return o(l?0:r,0);case`End`:return l?o(a,n[a].length-1):o(r,n[r].length-1);default:return}}columnKey(e,t){if(t.classList.contains(`resize-handle`)){let n=e[e.indexOf(t)-1];return n?this.columnKey(e,n):`data:0`}if(t.localName===`luzmo-table-checkbox-cell`)return`select`;if(t.localName===`luzmo-table-disclosure-cell`)return`expand`;if(t.classList.contains(`cell`))return`details`;let n=e.filter(e=>e.localName===`luzmo-table-cell`||e.localName===`luzmo-table-head-cell`);return`data:${Math.max(n.indexOf(t),0)}`}cellForKey(e,t){return t===`expand`?e.find(e=>e.localName===`luzmo-table-disclosure-cell`)??this.cellForKey(e,`data:0`):t===`details`?this.cellForKey(e,`data:0`):e.find(n=>!n.classList.contains(`resize-handle`)&&this.columnKey(e,n)===t)??e[0]}},A=Symbol(`table-details-closing`),j=e=>{let t=e.nextElementSibling;return t?.localName===`luzmo-table-row-details`?t:null},M=e=>e instanceof HTMLElement,_e=class{constructor(e,t){this.closingDetails=new Set,this.handleDetailsCollapsed=e=>{if(!this.options.owns(e))return;let t=e.target,n=[...this.closingDetails].find(e=>b(e)===t?.id);if(!n)return;let r=new Set(this.closingDetails);r.delete(n),this.closingDetails=r,this.host.requestUpdate(A)},this.host=e,this.options=t,e.addController(this)}get closing(){return this.closingDetails}hostConnected(){this.host.addEventListener(`luzmo-table-details-collapsed`,this.handleDetailsCollapsed)}hostDisconnected(){this.host.removeEventListener(`luzmo-table-details-collapsed`,this.handleDetailsCollapsed)}clear(){this.closingDetails=new Set,this.host.requestUpdate(A)}toggle(e){if(!e.expandable&&!j(e))return;let t=this.isDataMode(),n=t?e.value:e.value||String(this.declarativeRows().indexOf(e)),r=t?!this.host.expanded.includes(n):!e.expanded;if(t){let e=this.host.expanded;this.setClosing(n,!r),this.host.expanded=r?[...e,n]:e.filter(e=>e!==n),this.dispatchToggle(n,r)||(this.host.expanded=e,this.setClosing(n,!1));return}if(e.expanded=r,!this.dispatchToggle(n,r)){e.expanded=!r;return}let i=j(e);i&&(i.open=r),e.disclosureLabel=this.expandLabel(n,e.checkboxLabel||e.querySelector(`:scope > luzmo-table-cell`)?.textContent?.trim()||n,this.declarativeRows().indexOf(e))}collapseFromPath(e){let t=e.find(e=>M(e)&&e.localName===`luzmo-table-row-details`),n=(t?.previousElementSibling?.localName===`luzmo-table-row`?t.previousElementSibling:void 0)??e.find(e=>M(e)&&e.localName===`luzmo-table-row`);if(!n?.expanded)return;this.toggle(n);let r=n.shadowRoot?.querySelector(`luzmo-table-disclosure-cell`);r&&this.options.focusDisclosure(r)}setClosing(e,t){let n=new Set([...this.closingDetails].filter(t=>t!==e));t&&n.add(e),this.closingDetails=n,this.host.requestUpdate(A)}dispatchToggle(e,t){return this.host.dispatchEvent(new CustomEvent(`luzmo-table-row-toggle`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:e,expanded:t}}))}expandLabel(e,t,n){let r=E(this.host.labels,this.host.selectAllLabel);return D(this.host.expanded.includes(e)||this.rowByValue(e)?.expanded?r.collapseRow:r.expandRow,{label:t,index:String(n+1)})}rowByValue(e){return this.rows().find(t=>t.value===e)}isDataMode(){return Array.isArray(this.host.items)}declarativeRows(){return[...this.host.querySelectorAll(`:scope > luzmo-table-body > luzmo-table-row`)]}rows(){return this.isDataMode()?[...this.host.shadowRoot?.querySelectorAll(`luzmo-table-row`)??[]]:this.declarativeRows()}},N=e=>e instanceof HTMLElement,P=class{constructor(e,t){this.handleBodyScroll=e=>{this.options.owns(e)&&e.composedPath().find(e=>N(e)&&e.localName===`luzmo-table-body`)&&this.host.requestUpdate()},this.host=e,this.options=t,e.addController(this)}hostConnected(){this.host.addEventListener(`luzmo-table-body-scroll`,this.handleBodyScroll)}hostDisconnected(){this.host.removeEventListener(`luzmo-table-body-scroll`,this.handleBodyScroll),this.bodyObserver?.disconnect(),this.observedBody=void 0}hostUpdated(){this.syncHeadScroll(),this.watchBodyScrollbar()}hasExpansion(){return this.isDataMode()?typeof this.host.renderDetails==`function`:this.declarativeRows().some(e=>e.nextElementSibling?.localName===`luzmo-table-row-details`)}layouts(){return this.isDataMode()&&!this.slottedHead()?this.host.columns.map(ae):this.headCells().map((e,t)=>e.toLayout(t))}headCells(){return[...this.head()?.querySelectorAll(`:scope > luzmo-table-head-cell`)??[]]}applyGridMetrics(){let e={selects:!!this.host.selects,expandable:this.hasExpansion()},t=this.layouts();this.host.style.setProperty(`--table-grid-columns`,re(t,this.host.columnWidths,e)||`none`),this.host.style.setProperty(`--table-min-inline-size`,ie(t,this.host.columnWidths,e))}syncPresentation(){this.syncHead(),this.syncColumns(),this.isDataMode()||this.syncDeclarativeRows()}syncHeadTabStops(){let e=this.head();if(!e)return;let t=e.shadowRoot?.querySelector(`luzmo-table-checkbox-cell`);t&&t.getAttribute(`aria-hidden`)!==`true`&&t.tabIndex!==0&&(t.tabIndex=0);for(let e of this.headCells())e.tabIndex!==0&&(e.tabIndex=0)}syncHead(){let e=this.body();e&&this.syncGridColumns(e);let t=this.head();if(!t)return;this.syncGridColumns(t),this.syncHeadScroll(e,t);let n=E(this.host.labels,this.host.selectAllLabel),r=this.options.model.allSelected,i=this.options.model.someSelected,a=this.host.selects===`multiple`;t.selects=this.host.selects,t.checked=a&&r,t.indeterminate=a&&i&&!r,t.selected=i,t.emphasized=this.host.emphasized,t.checkboxLabel=n.selectAll,t.checkboxSize=this.host.size,t.expandable=this.hasExpansion()}watchBodyScrollbar(){let e=this.body();!e||e===this.observedBody||(this.bodyObserver?.disconnect(),this.observedBody=e,this.bodyObserver??=new ResizeObserver(()=>{this.syncHeadScroll()}),this.bodyObserver.observe(e,{box:`content-box`}))}syncHeadScroll(e=this.body(),t=this.head()){if(!e||!t)return;let n=Math.max(0,e.offsetWidth-e.clientWidth),r=e.scrollWidth>e.clientWidth+1;t.style.paddingInlineEnd=n>0&&!r?`${n}px`:``,t.style.transform=`translateX(${-e.scrollLeft}px)`}syncColumns(){let e=this.layouts(),t=E(this.host.labels,this.host.selectAllLabel);this.headCells().forEach((n,r)=>{let i=e[r];if(!i)return;let a=n.textContent?.trim()||i.header;if(n.resizeLabel=D(t.resizeColumn,{column:a}),!n.resizable)return;let o=y(this.host.columnWidths[i.id])??i.width,s=Math.round(n.getBoundingClientRect().width),c=o??s;c>0&&n.currentWidth!==c&&(n.currentWidth=c)});for(let t of this.rows()){this.syncGridColumns(t);let n=j(t);n&&this.syncGridColumns(n),!t.spanAll&&[...t.children].filter(e=>N(e)&&e.localName===`luzmo-table-cell`).forEach((t,n)=>{let r=e[n]?.lineClamp;t.columnLineClamp!==r&&(t.columnLineClamp=r)})}}syncDeclarativeRows(){let e=this.host.selects,t=E(this.host.labels,this.host.selectAllLabel),n=this.hasExpansion(),r=this.declarativeRows();r.forEach((i,a)=>{this.syncGridColumns(i);let o=i.value||String(a),s=j(i),c=a===r.length-1;i.toggleAttribute(`data-last-row`,c),s&&(this.syncGridColumns(s),s.toggleAttribute(`data-last-row`,c));let l=i.querySelector(`:scope > luzmo-table-cell`)?.textContent?.trim()||o;i.selectable=!!e,i.selectionColumn=!!e,i.selected=!!e&&this.options.model.isSelected(o),i.selectsSingle=e===`single`,i.emphasized=this.host.emphasized,i.checkboxSize=this.host.size,i.checkboxLabel=l,i.expandable=!!s,i.expansionColumn=n&&!s,i.detailsId=s?.id??``,i.disclosureLabel=D(i.expanded?t.collapseRow:t.expandRow,{label:l,index:String(a+1)}),s&&(s.id||(s.id=b(o),i.detailsId=s.id),s.open=i.expanded)})}syncGridColumns(e){for(let t of[`--table-grid-columns`,`--table-min-inline-size`])e.style.setProperty(t,this.host.style.getPropertyValue(t))}isDataMode(){return Array.isArray(this.host.items)}slottedHead(){return this.host.querySelector(`:scope > luzmo-table-head`)}head(){return this.slottedHead()??(this.isDataMode()?this.host.shadowRoot?.querySelector(`luzmo-table-head`)??null:null)}body(){return this.isDataMode()?this.host.shadowRoot?.querySelector(`luzmo-table-body`)??null:this.host.querySelector(`:scope > luzmo-table-body`)}declarativeRows(){return[...this.host.querySelectorAll(`:scope > luzmo-table-body > luzmo-table-row`)]}rows(){return this.isDataMode()?[...this.host.shadowRoot?.querySelectorAll(`luzmo-table-row`)??[]]:this.declarativeRows()}},F=Symbol(`table-virtual-range-updated`),I=40,ve=4,L=e=>e.getBoundingClientRect().height,ye=class{constructor(e,t){this.connected=!1,this.keys=[],this.estimatedSize=I,this.host=e,this.options=t,e.addController(this)}get enabled(){return!!this.virtualizer}set enabled(e){if(e!==this.enabled){if(e){this.virtualizer=new m.Virtualizer(this.createOptions()),this.connected&&(this.cleanup=this.virtualizer._didMount());return}this.cleanup?.(),this.cleanup=void 0,this.virtualizer=void 0,this.range=void 0}}sync(e){return this.virtualizer?(e!==this.keys&&(this.keys=e,this.virtualizer.setOptions(this.createOptions())),this.virtualizer.getVirtualItems()):[]}get totalSize(){return this.virtualizer?.getTotalSize()??0}scrollToIndex(e){this.virtualizer?.scrollToIndex(e,{align:`start`})}hostConnected(){this.connected=!0,this.virtualizer&&!this.cleanup&&(this.cleanup=this.virtualizer._didMount())}hostUpdated(){if(!this.virtualizer)return;this.virtualizer._willUpdate();let e=this.options.getRowElements();this.syncEstimate(e);for(let t of e)this.virtualizer.measureElement(t)}hostDisconnected(){this.connected=!1,this.cleanup?.(),this.cleanup=void 0}syncEstimate(e){let t=e.filter(e=>this.options.isRendered(e)).map(e=>L(e)).filter(Boolean).sort((e,t)=>e-t);if(t.length===0)return;let n=t[Math.floor(t.length/2)];Math.abs(n-this.estimatedSize)>=.5&&(this.estimatedSize=n,this.virtualizer?.measure())}createOptions(){return{count:this.keys.length,getScrollElement:this.options.getScrollElement,estimateSize:()=>this.estimatedSize,getItemKey:e=>this.keys[e]??e,overscan:ve,useAnimationFrameWithResizeObserver:!0,scrollToFn:m.elementScroll,observeElementRect:m.observeElementRect,observeElementOffset:m.observeElementOffset,measureElement:e=>this.options.isRendered(e)&&L(e)||this.estimatedSize,onChange:e=>{let t=this.reportRange(e);queueMicrotask(()=>{t?this.host.requestUpdate(F,!1):this.host.requestUpdate()})}}}reportRange(e){let t=e.range;if(!t||t.endIndex<t.startIndex)return!1;let n=t.startIndex,r=t.endIndex;return this.range?.first===n&&this.range.last===r?!1:(this.range={first:n,last:r},this.options.onRangeChanged({first:n,last:r}),!0)}},be=`:host{grid-template-columns:var(--table-grid-columns);min-inline-size:var(--table-min-inline-size,0);box-sizing:border-box;display:grid;overflow:hidden;border-block-start:none!important;border-inline:none!important;border-block-end-width:var(--table-row-divider-width)!important;border-block-end-style:solid!important;border-block-end-color:var(--highcontrast-table-row-divider-color,var(--luzmo-table-border-color,var(--table-row-divider-color)))!important}:host([data-last-row]){border-block-end-width:0!important}:host([hidden]){display:none!important}.cell{outline:none;grid-column:1/-1;grid-template-rows:1fr;min-inline-size:0;display:grid;overflow:hidden}:host([data-last-row]) .cell{--table-focus-end-start-radius:var(--table-corner-radius);--table-focus-end-end-radius:var(--table-corner-radius)}.cell:focus-visible{outline:var(--luzmo-indicator-width,2px) solid var(--highcontrast-table-details-focus-indicator-color,var(--luzmo-indicator-color,currentColor));outline-offset:calc(var(--luzmo-indicator-width,2px) * -1);border-start-start-radius:var(--table-focus-start-start-radius,0);border-start-end-radius:var(--table-focus-start-end-radius,0);border-end-end-radius:var(--table-focus-end-end-radius,0);border-end-start-radius:var(--table-focus-end-start-radius,0)}.content{padding-block:var(--table-details-padding-block);padding-inline:var(--table-details-padding-inline);overflow:hidden}:host([opening]) .content,:host([closing]) .content{min-block-size:0}:host([opening]) .cell{animation:table-details-open var(--luzmo-animation-duration) ease-out}:host([closing]) .cell{animation:table-details-close var(--luzmo-animation-duration) ease-in}@keyframes table-details-open{0%{opacity:0;grid-template-rows:0fr}}@keyframes table-details-close{to{opacity:0;grid-template-rows:0fr}}@media (prefers-reduced-motion:reduce){:host([opening]) .cell,:host([closing]) .cell{animation:none}}:host{--table-row-divider-color:var(--luzmo-border-color);--table-row-divider-width:var(--luzmo-border-width);--table-details-padding-block:var(--luzmo-spacing-4);--table-details-padding-inline:var(--luzmo-table-cell-padding-inline,var(--table-cell-padding-inline))}@media (forced-colors:active){:host{--highcontrast-table-row-divider-color:CanvasText;--highcontrast-table-details-focus-indicator-color:Highlight}}`;function R(e,t){return[...Array.isArray(e)?e:e?[e]:[],(0,o.unsafeCSS)(t)]}var z=class extends e.n{constructor(...e){super(...e),this.role=`row`,this.open=!1,this._phase=`closed`,this.reducedMotion=new i.r(this,`(prefers-reduced-motion: reduce)`),this.handleAnimationEnd=e=>{e.target===this.renderRoot.querySelector(`.cell`)&&(this._phase===`closing`?this._finishClosing():this._phase===`opening`&&(this._phase=`open`),this.requestUpdate())},this._finishClosing=()=>{this._phase===`closing`&&(window.clearTimeout(this._closeFallback),this._phase=`closed`,this.hidden=!0,this.dispatchEvent(new Event(`luzmo-table-details-collapsed`,{bubbles:!0,composed:!0})),this.requestUpdate())}}static get styles(){return R(super.styles,be)}disconnectedCallback(){window.clearTimeout(this._closeFallback),super.disconnectedCallback()}willUpdate(e){if(super.willUpdate(e),!(!e.has(`open`)&&this.hasUpdated)){if(this.open){this.hidden=!1,this._phase=this.hasUpdated&&!this.reducedMotion.matches?`opening`:`open`;return}if(!this.hasUpdated||this.reducedMotion.matches||this._phase===`closed`){this._phase=`closed`,this.hidden=!0;return}this._phase=`closing`}}render(){return o.html`
|
|
19
|
+
<div
|
|
20
|
+
class="cell"
|
|
21
|
+
role="gridcell"
|
|
22
|
+
@animationend=${this.handleAnimationEnd}
|
|
23
|
+
>
|
|
24
|
+
<div class="content"><slot></slot></div>
|
|
25
|
+
</div>
|
|
26
|
+
`}updated(e){super.updated(e),e.has(`_phase`)&&(this.toggleAttribute(`opening`,this._phase===`opening`),this.toggleAttribute(`closing`,this._phase===`closing`),window.clearTimeout(this._closeFallback),this._phase===`closing`&&(this._closeFallback=window.setTimeout(this._finishClosing,200)))}};e.t([(0,s.property)({reflect:!0})],z.prototype,`role`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],z.prototype,`open`,void 0),e.t([(0,s.state)()],z.prototype,`_phase`,void 0);var B=e=>e.sortKey??e.accessorKey??e.id,V=(e,t)=>{let n=t[e.accessorKey??e.id];return typeof n==`string`||typeof n==`number`?String(n):``},xe=(e,t,n)=>{let r=e.map(e=>{let r=B(e),i=typeof e.header==`string`?e.header:e.id;return o.html`
|
|
27
|
+
<luzmo-table-head-cell
|
|
28
|
+
column-id=${e.id}
|
|
29
|
+
?sortable=${!!e.sortable}
|
|
30
|
+
.resizable=${e.resizable!==!1}
|
|
31
|
+
sort-key=${r}
|
|
32
|
+
.sortDirection=${t?.key===r?t.direction:void 0}
|
|
33
|
+
.width=${e.width}
|
|
34
|
+
.minWidth=${e.minWidth}
|
|
35
|
+
.maxWidth=${e.maxWidth}
|
|
36
|
+
.lineClamp=${e.lineClamp}
|
|
37
|
+
.resizeLabel=${n.resizeLabel(i)}
|
|
38
|
+
>${e.header}</luzmo-table-head-cell
|
|
39
|
+
>
|
|
40
|
+
`});return o.html`
|
|
41
|
+
<luzmo-table-head .expandable=${n.expandable}
|
|
42
|
+
>${r}</luzmo-table-head
|
|
43
|
+
>
|
|
44
|
+
`},Se=(e,t,n)=>{let{item:r,index:i}=e;return n?n(r,i):e.information?o.html`<luzmo-table-cell span-all
|
|
45
|
+
>${t[0]?V(t[0],r):``}</luzmo-table-cell
|
|
46
|
+
>`:t.map(e=>o.html`
|
|
47
|
+
<luzmo-table-cell .columnLineClamp=${e.lineClamp}
|
|
48
|
+
>${e.cell?e.cell(r,i):V(e,r)}</luzmo-table-cell
|
|
49
|
+
>
|
|
50
|
+
`)},H=(e,t,{columns:n,renderItem:r,itemLabel:i,selectRowLabel:a})=>i?i(e.item,e.index):(!r&&n[0]?V(n[0],e.item):``)||D(a,{index:String(t+1)}),U=e=>o.html`
|
|
51
|
+
<div
|
|
52
|
+
class="virtual-spacer"
|
|
53
|
+
aria-hidden="true"
|
|
54
|
+
style=${(0,d.styleMap)({blockSize:`${e}px`})}
|
|
55
|
+
></div>
|
|
56
|
+
`,Ce=e=>{let{rows:t,columns:n,renderItem:r,selects:i,rowIndexOffset:a}=e,s=a!==void 0;return o.html`
|
|
57
|
+
<luzmo-table-body>
|
|
58
|
+
${s?U(e.paddingStart):o.nothing}
|
|
59
|
+
${(0,f.repeat)(t,({record:e})=>e.value,({record:t,position:c})=>{let u=!!i&&!t.information,d=e.expandable&&!t.information,f=d&&e.isExpanded(t.value),p=c===e.rowCount-1,m=e.ariaIndexes?.get(t.value),h=m?.row??(a===void 0?void 0:c+a),g=o.html`${o.html`
|
|
60
|
+
<luzmo-table-row
|
|
61
|
+
value=${t.value}
|
|
62
|
+
data-index=${(0,l.ifDefined)(s?void 0:c)}
|
|
63
|
+
aria-rowindex=${(0,l.ifDefined)(h)}
|
|
64
|
+
?data-last-row=${p}
|
|
65
|
+
.selectable=${u}
|
|
66
|
+
.selected=${u&&e.isSelected(t.value)}
|
|
67
|
+
.selectionColumn=${!!i}
|
|
68
|
+
.selectsSingle=${i===`single`}
|
|
69
|
+
.emphasized=${e.emphasized}
|
|
70
|
+
.checkboxLabel=${u?H(t,c,e):``}
|
|
71
|
+
.checkboxSize=${e.checkboxSize}
|
|
72
|
+
.expandable=${d}
|
|
73
|
+
.expanded=${f}
|
|
74
|
+
.expansionColumn=${e.expandable&&!d}
|
|
75
|
+
.spanAll=${t.information}
|
|
76
|
+
.disclosureLabel=${d?e.expandLabel(t,c):``}
|
|
77
|
+
.detailsId=${d?b(t.value):``}
|
|
78
|
+
>${Se(t,n,r)}</luzmo-table-row
|
|
79
|
+
>
|
|
80
|
+
`}${d?o.html`
|
|
81
|
+
<luzmo-table-row-details
|
|
82
|
+
id=${b(t.value)}
|
|
83
|
+
.open=${f}
|
|
84
|
+
aria-rowindex=${(0,l.ifDefined)(m?.details)}
|
|
85
|
+
?data-last-row=${p}
|
|
86
|
+
>${e.renderDetails?.(t.item,t.index)}</luzmo-table-row-details
|
|
87
|
+
>
|
|
88
|
+
`:o.nothing}`;return s?o.html`<div class="row-group" data-index=${c}>${g}</div>`:g})}
|
|
89
|
+
${s?U(e.paddingEnd):o.nothing}
|
|
90
|
+
</luzmo-table-body>
|
|
91
|
+
`},we=`:host{box-sizing:border-box;font-family:var(--luzmo-font-family);font-size:var(--table-font-size);line-height:var(--luzmo-line-height);color:var(--table-font-color);background-color:var(--luzmo-table-background-color,var(--table-background-color));border-radius:var(--luzmo-table-border-radius,var(--table-border-radius));flex-direction:column;display:flex;position:relative;overflow:hidden;border-width:var(--table-border-width)!important;border-style:solid!important;border-color:var(--highcontrast-table-border-color,var(--luzmo-table-border-color,var(--table-border-color)))!important}slot.data::slotted(luzmo-table-body){display:none}:host{--table-font-size:var(--luzmo-font-size-m);--table-font-color:var(--luzmo-font-color);--table-background-color:var(--luzmo-background-color);--table-border-width:var(--luzmo-border-width);--table-border-color:var(--luzmo-border-color);--table-column-divider-width:0px;--table-column-divider-color:var(--table-border-color);--table-border-radius:var(--luzmo-border-radius);--table-row-min-block-size:calc(var(--luzmo-component-height) + var(--luzmo-spacing-3));--table-row-density-offset:0px;--table-cell-padding-block:var(--luzmo-spacing-2);--table-cell-padding-inline:var(--luzmo-spacing-4);--table-checkbox-cell-inline-size:calc(var(--luzmo-icon-size-m) + var(--luzmo-spacing-4) * 2);--table-disclosure-cell-inline-size:var(--table-checkbox-cell-inline-size);--table-sort-icon-size:var(--luzmo-icon-size-m);--table-row-selected-background-color:var(--luzmo-background-color-highlight);--table-row-selected-hover-background-color:var(--luzmo-background-color-highlight-hover);--table-body-overflow:hidden;--table-corner-radius:max(0px, calc(var(--luzmo-table-border-radius,var(--table-border-radius)) - var(--table-border-width)))}:host([size=s]){--table-font-size:var(--luzmo-font-size-s);--table-row-min-block-size:calc(var(--luzmo-component-height-s) + var(--luzmo-spacing-2));--table-cell-padding-inline:var(--luzmo-spacing-3);--table-checkbox-cell-inline-size:calc(var(--luzmo-icon-size-s) + var(--luzmo-spacing-3) * 2);--table-sort-icon-size:var(--luzmo-icon-size-s)}:host([size=l]){--table-font-size:var(--luzmo-font-size-l);--table-row-min-block-size:calc(var(--luzmo-component-height-l) + var(--luzmo-spacing-3));--table-cell-padding-inline:var(--luzmo-spacing-5);--table-checkbox-cell-inline-size:calc(var(--luzmo-icon-size-l) + var(--luzmo-spacing-5) * 2);--table-sort-icon-size:var(--luzmo-icon-size-l)}:host([size=xl]){--table-font-size:var(--luzmo-font-size-xl);--table-row-min-block-size:calc(var(--luzmo-component-height-xl) + var(--luzmo-spacing-5));--table-cell-padding-inline:var(--luzmo-spacing-5);--table-checkbox-cell-inline-size:calc(var(--luzmo-icon-size-xl) + var(--luzmo-spacing-5) * 2);--table-sort-icon-size:var(--luzmo-icon-size-xl)}:host([density=compact]){--table-row-density-offset:calc(var(--luzmo-spacing-3) * -1);--table-cell-padding-block:var(--luzmo-spacing-1)}:host([density=spacious]){--table-row-density-offset:var(--luzmo-spacing-3);--table-cell-padding-block:var(--luzmo-spacing-3)}:host([emphasized]){--table-row-selected-background-color:rgba(var(--luzmo-primary-rgb), .1);--table-row-selected-hover-background-color:rgba(var(--luzmo-primary-rgb), .16)}:host([quiet]){--table-border-width:0px;--table-background-color:rgba(var(--luzmo-background-color-rgb), 0);--table-border-radius:0px}:host([scroller]),:host([virtualized]){--table-body-overflow:auto}@media (forced-colors:active){:host{--highcontrast-table-border-color:CanvasText;--highcontrast-table-column-divider-color:CanvasText}}`,Te=[`items`,`itemValue`,`selects`,`selected`,`columns`,`expanded`,`renderDetails`,`columnWidths`,`_sort`,`_clientSort`,`_lightDomVersion`,A,r.r],Ee=[`labels`,`selectAllLabel`,`emphasized`,`size`],W=new Set([`luzmo-table-cell`,`luzmo-table-head-cell`,`luzmo-table-checkbox-cell`]),De=[`a[href]`,`button`,`input`,`select`,`textarea`,`label`,`summary`,`[contenteditable=""]`,`[contenteditable="true"]`,`[role="button"]`,`[role="link"]`,`[role="checkbox"]`,`[role="switch"]`,`[role="menuitem"]`].join(`,`),Oe=`textarea, select, [contenteditable=""], [contenteditable="true"], input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"])`,ke=[`columns`,`columnWidths`,`selects`,`items`,`renderDetails`,`_lightDomVersion`],G=e=>e instanceof HTMLElement,K=class extends t.n(e.n){static get styles(){return R(super.styles,we)}constructor(){super(),this.role=`grid`,this.emphasized=!1,this.quiet=!1,this.scroller=!1,this.selected=[],this.expanded=[],this.columnWidths={},this.columns=[],this.virtualized=!1,this.labels={},this._clientSort=!0,this._mode=`declarative`,this._rows=[],this._rowKeys=[],this._warnedSlottedRows=!1,this.model=new pe,this.language=new r.t(this),this.announcer=new te(this),this.layout=new P(this,{model:this.model,owns:e=>this._owns(e)}),this.resize=new k(this,{owns:e=>this._owns(e),isLTR:()=>this.isLTR,language:()=>this.language.language,labels:()=>this.labels,selectAllLabel:()=>this.selectAllLabel,layouts:()=>this.layout.layouts(),headCells:()=>this.layout.headCells(),announce:e=>{this.announcer.announce(e)}}),this.expansion=new _e(this,{owns:e=>this._owns(e),focusDisclosure:e=>{this._activeCell=e,this.navigation.focusElement(e)}}),this._lightDomVersion=0,this._modelSynced=!1,this.lightObserver=new MutationObserver(()=>{this._lightDomVersion+=1}),this.directionManaged=new Set,this.directionObserver=new MutationObserver(()=>{for(let e of this.directionManaged)this._syncDirection(e)}),this.navigation=new ge(this,{direction:`grid`,elements:()=>this._gridRows().flat(),rows:()=>this._gridRows(),isLTR:()=>this.isLTR,focusInIndex:e=>this._gridEntryIndex(e)}),this.virtualizer=new ye(this,{getScrollElement:()=>this.shadowRoot?.querySelector(`luzmo-table-body`)??null,getRowElements:()=>this.virtualizer.enabled?[...this.shadowRoot?.querySelectorAll(`.row-group`)??[]]:this._rowElements(),isRendered:e=>!!e.querySelector(`luzmo-table-row`)?.hasUpdated,onRangeChanged:e=>this.dispatchEvent(new CustomEvent(`luzmo-range-changed`,{bubbles:!0,composed:!0,detail:e}))}),this.handleChange=e=>{if(!this._owns(e))return;let t=e.composedPath(),n=t.find(e=>G(e)&&e.localName===`luzmo-table-checkbox-cell`);if(!n)return;if(e.stopPropagation(),e.preventDefault(),n.headCell){this._toggleAll();return}let r=t.find(e=>G(e)&&e.localName===`luzmo-table-row`);r&&this._toggleRow(r)},this.handleClick=e=>{if(!this._owns(e))return;let t=e.composedPath(),n=t.some(e=>G(e)&&e.localName===`luzmo-table-disclosure-cell`),r=t.find(e=>G(e)&&e.localName===`luzmo-table-row`);if(n&&r){this.expansion.toggle(r);return}if(!r)return;let i=t.indexOf(r);if(!t.slice(0,i).some(e=>G(e)&&(e.localName===`luzmo-table-checkbox-cell`||e.localName===`luzmo-table-disclosure-cell`||e.matches(De)))){if(this.selects){this._toggleRow(r);return}r.expandable&&this.expansion.toggle(r)}},this.handleFocusin=e=>{if(!this._owns(e))return;let t=this._gridElementFromPath(e.composedPath());t&&this.navigation.elements.includes(t)&&(this._activeCell=t)},this.handleKeydown=e=>{if(e.defaultPrevented||!this._owns(e))return;let t=e.composedPath(),n=this._cellFromPath(t),r=this._gridElementFromPath(t),i=t[0],a=i===r;if(!a&&G(i)&&i.matches(Oe))return;if(e.code===`Escape`){this.expansion.collapseFromPath(t);return}if(O(t)){this.resize.handleKeydown(e);return}let o=this._virtualNavigationTarget(e);if(o){e.preventDefault(),e.stopImmediatePropagation(),this._focusVirtualCell(o.index,o.column);return}if(r&&(e.code===`Space`||e.code===`Enter`||e.code===`NumpadEnter`)){if(e.repeat){a&&e.preventDefault();return}if(a&&r.localName===`luzmo-table-disclosure-cell`){e.preventDefault();let n=t.find(e=>G(e)&&e.localName===`luzmo-table-row`);n&&this.expansion.toggle(n);return}a&&n&&n.localName!==`luzmo-table-head-cell`&&this.selects&&(e.preventDefault(),this._activateCell(n))}},this.handleSorted=e=>{if(!this._owns(e))return;let{sortKey:t,sortDirection:n}=e.detail,r=this._cellFromPath(e.composedPath())?.textContent?.trim()||t;queueMicrotask(()=>{let i=E(this.labels,this.selectAllLabel);this._sort={key:t,direction:n},this._clientSort=!e.defaultPrevented,this.announcer.announce(D(n===`asc`?i.sortAscending:i.sortDescending,{column:r}))})},this.addEventListener(`change`,this.handleChange,{capture:!0}),this.addEventListener(`click`,this.handleClick),this.addEventListener(`keydown`,this.handleKeydown),this.addEventListener(`focusin`,this.handleFocusin),this.addEventListener(`luzmo-table-sorted`,this.handleSorted)}get _isDataMode(){return this._mode===`data`}focus(e){let t=this.navigation.elements,n=(this._activeCell&&t.includes(this._activeCell)?this._activeCell:void 0)??t[this._gridEntryIndex(t)];n&&this.navigation.focusElement(n,e)}scrollToIndex(e){if(this.virtualizer.enabled){this.virtualizer.scrollToIndex(e);return}this._rowElements()[e]?.scrollIntoView({block:`nearest`})}startManagingContentDirection(e){this.directionManaged.add(e),this._syncDirection(e)}stopManagingContentDirection(e){this.directionManaged.delete(e)}connectedCallback(){super.connectedCallback(),this.directionObserver.observe(this,{attributes:!0,attributeFilter:[`dir`]}),this.lightObserver.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:[`value`,`expanded`,`line-clamp`,`width`,`min-width`,`max-width`,`resizable`,`column-id`,`sort-key`]})}disconnectedCallback(){this.lightObserver.disconnect(),this.directionObserver.disconnect(),super.disconnectedCallback()}willUpdate(e){super.willUpdate(e);let t=e;e.has(`selects`)&&this.selects!==`single`&&this.selects!==`multiple`&&(this.selects=void 0);let n=Array.isArray(this.items)?`data`:`declarative`,r=n!==this._mode;if(r&&(this._mode=n,this._sort=void 0,this._clientSort=!0,this._activeCell=void 0,this._warnedSlottedRows=!1,this.hasUpdated&&!e.has(`selected`)&&(this.selected=[]),this.hasUpdated&&!e.has(`expanded`)&&(this.expanded=[]),this.expansion.clear()),this._isDataMode&&!this._sort&&(this._sort=this._initialSort()),this.virtualizer.enabled=this._isDataMode&&this.virtualized,(!this.hasUpdated||r||ke.some(e=>t.has(e)))&&this.layout.applyGridMetrics(),this._modelSynced=!this.hasUpdated||r||Te.some(e=>t.has(e)),!this._modelSynced)return;this.model.selects=this.selects,this.model.locale=this.language.language,this.model.setRecords(this._createRecords()),this.model.setSelected(this.selected),this.model.setSorting(this._isDataMode?this._sort:void 0,!this._clientSort);let i=this.model.rows;(i.length!==this._rows.length||i.some((e,t)=>e.value!==this._rows[t]?.value))&&(this._rowKeys=i.map(e=>e.value)),this._rows=i}render(){return o.html`
|
|
92
|
+
<slot class=${this._mode}></slot>
|
|
93
|
+
${this._isDataMode?this._renderData():o.nothing}
|
|
94
|
+
`}updated(e){super.updated(e),e.has(`selects`)&&(this.selects===`multiple`?this.setAttribute(`aria-multiselectable`,`true`):this.removeAttribute(`aria-multiselectable`));let t=this._modelSynced;if(this._modelSynced=!1,t||e.has(`virtualized`))if(this.virtualizer.enabled){let e=this._rows.filter(e=>this.expanded.includes(e.value)).length;this.setAttribute(`aria-rowcount`,String(this._rows.length+e+ +!!this._head()))}else this.removeAttribute(`aria-rowcount`);let n=e;(t||Ee.some(e=>n.has(e)))&&(this.layout.syncPresentation(),this._isDataMode&&this._warnSlottedRows()),(t||n.has(`columnWidths`)||n.has(`virtualized`)||n.has(`renderItem`)||n.has(F))&&this._refreshNavigation()}_renderData(){let e=E(this.labels,this.selectAllLabel),t=this._slottedHead(),n=!!t||this.columns.length>0,r=this.virtualizer.enabled?this.virtualizer.sync(this._rowKeys):void 0,i=r?r.filter(e=>this._rows[e.index]).map(e=>({record:this._rows[e.index],position:e.index})):this._rows.map((e,t)=>({record:e,position:t})),a=r?.[0],s=r?.at(-1);return o.html`
|
|
95
|
+
${t||this.columns.length===0?o.nothing:xe(this.columns,this._sort,{expandable:this.layout.hasExpansion(),resizeLabel:t=>D(e.resizeColumn,{column:t})})}
|
|
96
|
+
${Ce({rows:i,rowCount:this._rows.length,columns:this.columns,renderItem:this.renderItem,itemLabel:this.itemLabel,selectRowLabel:e.selectRow,selects:this.selects,isSelected:e=>this.model.isSelected(e),emphasized:this.emphasized,checkboxSize:this.size,rowIndexOffset:r?n?2:1:void 0,paddingStart:a?.start??0,paddingEnd:s?this.virtualizer.totalSize-s.end:0,expandable:this.layout.hasExpansion(),isExpanded:e=>this.expanded.includes(e),expandLabel:(t,n)=>D(this.expanded.includes(t.value)?e.collapseRow:e.expandRow,{label:this._rowLabel(t,n),index:String(n+1)}),renderDetails:this.renderDetails,closing:this.expansion.closing,ariaIndexes:r?this._ariaIndexes(n):void 0})}
|
|
97
|
+
`}_syncDirection(e){e.dir!==this.dir&&(e.dir=this.dir)}_rowLabel(e,t){if(this.itemLabel)return this.itemLabel(e.item,e.index);let n=this.columns[0],r=n?e.item[n.accessorKey??n.id]:void 0;return typeof r==`string`||typeof r==`number`?String(r):e.value||String(t+1)}_ariaIndexes(e){let t=new Map,n=e?2:1;for(let e of this._rows){let r={row:n};n+=1,this.expanded.includes(e.value)&&(r.details=n,n+=1),t.set(e.value,r)}return t}_owns(e){for(let t of e.composedPath())if(t instanceof HTMLElement&&t.localName===`luzmo-table`)return t===this;return!0}_initialSort(){let e=this.columns.find(e=>e.sortable&&e.sortDirection);if(e?.sortDirection)return{key:B(e),direction:e.sortDirection};let t=this._slottedHead()?.querySelector(`:scope > luzmo-table-head-cell[sortable][sort-direction]`),n=t?.getAttribute(`sort-direction`);if(t&&(n===`asc`||n===`desc`))return{key:t.getAttribute(`sort-key`)??``,direction:n}}_createRecords(){return this._isDataMode?de(this.items??[],this.itemValue):this._declarativeRows().map((e,t)=>({item:{},value:e.value||String(t),index:t,information:!1}))}_slottedHead(){return this.querySelector(`:scope > luzmo-table-head`)}_declarativeRows(){return[...this.querySelectorAll(`:scope > luzmo-table-body > luzmo-table-row`)]}_head(){return this._slottedHead()??(this._isDataMode?this.shadowRoot?.querySelector(`luzmo-table-head`)??null:null)}_rowElements(){return this._isDataMode?[...this.shadowRoot?.querySelectorAll(`luzmo-table-row`)??[]]:this._declarativeRows()}_gridRows(){let e=[];for(let t of this._rowElements()){let n=this._gridCells(t);n.length>0&&e.push(n);let r=j(t),i=r&&!r.hidden?r.shadowRoot?.querySelector(`.cell[role="gridcell"]`):void 0;i&&e.push([i])}return e}_gridEntryIndex(e){let t=this._activeCell?e.indexOf(this._activeCell):-1;return Math.max(t,0)}_virtualNavigationTarget(e){if(!this.virtualizer.enabled||this._rows.length===0)return;let t=this._gridElementFromPath(e.composedPath()),n=this._gridRows(),r=t?n.findIndex(e=>e.includes(t)):-1;if(!t||r===-1)return;let i=this._virtualDataIndex(t);if(i===void 0)return;let a=n[r].indexOf(t),o=e.ctrlKey||e.metaKey,s=this._rows.length-1;if(o&&e.code===`End`)return{index:s,column:2**53-1};if(o&&e.code===`Home`)return{index:0,column:0};if(e.code===`ArrowDown`&&r===n.length-1&&i<s)return{index:i+1,column:a};if(e.code===`ArrowUp`&&r===0&&i>0)return{index:i-1,column:a}}_virtualDataIndex(e){let t=e.getRootNode(),n=(t instanceof ShadowRoot&&t.host!==this?t.host:e).closest(`.row-group`)?.dataset.index;if(!n)return;let r=Number(n);return Number.isInteger(r)?r:void 0}async _focusVirtualCell(e,t){let n=await this._mountedVirtualRow(e);if(!n)return;await n.updateComplete,await this._refreshNavigation();let r=this._gridCells(n),i=r[Math.min(t,Math.max(r.length-1,0))];i&&(this._activeCell=i,this.navigation.focusElement(i))}async _mountedVirtualRow(e){let t=()=>this._rowElements().find(t=>Number(t.closest(`.row-group`)?.dataset.index)===e);for(let n=0;n<8;n+=1){this.virtualizer.scrollToIndex(e),await this.updateComplete,await new Promise(e=>{requestAnimationFrame(()=>{e()})});let n=t();if(n)return n}}_gridCells(e){return[e.shadowRoot?.querySelector(`luzmo-table-checkbox-cell`),e.shadowRoot?.querySelector(`luzmo-table-disclosure-cell`),...[...e.children].filter(e=>G(e)&&W.has(e.localName))].filter(e=>e?e.getAttribute(`aria-hidden`)!==`true`:!1)}_warnSlottedRows(){this._warnedSlottedRows||this._declarativeRows().length===0||(this._warnedSlottedRows=!0,console.warn("luzmo-table renders rows from `items`; slotted luzmo-table-row elements are ignored while `items` is set."))}async _refreshNavigation(){let e=this._head(),t=this._rowElements().map(e=>j(e)).filter(e=>!!e);await Promise.all([...e?[e]:[],...this._rowElements(),...t].map(e=>e.updateComplete)),e&&this.layout.syncHeadTabStops(),this.navigation.clearElementCache();let n=this._activeCell?this.navigation.elements.indexOf(this._activeCell):-1;n>-1&&(this.navigation.currentIndex=n)}_commitSelection(e){let t=this.selected;this.selected=e,this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0,cancelable:!0}))||(this.selected=t)}_toggleRow(e){if(!e.selectable)return;let t=this._isDataMode?e.value:e.value||String(this._declarativeRows().indexOf(e)),n=this.model.toggle(t);n&&this._commitSelection(n)}_toggleAll(){this.selects===`multiple`&&this._commitSelection(this.model.toggleAll(!this.model.allSelected))}_activateCell(e){if(e.localName===`luzmo-table-head-cell`||!this.selects)return;let t=e;if(e.localName===`luzmo-table-checkbox-cell`&&t.headCell){this._toggleAll();return}let n=e.parentElement??e.getRootNode().host;n?.localName===`luzmo-table-row`&&this._toggleRow(n)}_cellFromPath(e){return e.find(e=>G(e)&&W.has(e.localName))}_gridElementFromPath(e){return O(e)??e.find(e=>G(e)&&(e.localName===`luzmo-table-disclosure-cell`||e.classList.contains(`cell`)&&e.getAttribute(`role`)===`gridcell`))??this._cellFromPath(e)}};e.t([(0,s.property)({reflect:!0})],K.prototype,`role`,void 0),e.t([(0,s.property)({reflect:!0})],K.prototype,`density`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],K.prototype,`emphasized`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],K.prototype,`quiet`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],K.prototype,`scroller`,void 0),e.t([(0,s.property)({reflect:!0})],K.prototype,`selects`,void 0),e.t([(0,s.property)({attribute:!1})],K.prototype,`selected`,void 0),e.t([(0,s.property)({reflect:!0,attribute:`select-all-label`})],K.prototype,`selectAllLabel`,void 0),e.t([(0,s.property)({attribute:!1})],K.prototype,`items`,void 0),e.t([(0,s.property)({attribute:!1})],K.prototype,`itemValue`,void 0),e.t([(0,s.property)({attribute:!1})],K.prototype,`itemLabel`,void 0),e.t([a.n({slot:`row`,context:[`item`,`index`],implicit:`item`})],K.prototype,`renderItem`,void 0),e.t([(0,s.property)({attribute:!1})],K.prototype,`expanded`,void 0),e.t([a.n({slot:`details`,context:[`item`,`index`],implicit:`item`})],K.prototype,`renderDetails`,void 0),e.t([(0,s.property)({attribute:!1})],K.prototype,`columnWidths`,void 0),e.t([(0,s.property)({attribute:!1})],K.prototype,`columns`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],K.prototype,`virtualized`,void 0),e.t([(0,s.property)({attribute:!1})],K.prototype,`labels`,void 0),e.t([(0,s.state)()],K.prototype,`_sort`,void 0),e.t([(0,s.state)()],K.prototype,`_clientSort`,void 0),e.t([(0,s.state)()],K.prototype,`_lightDomVersion`,void 0);var Ae=`:host{box-sizing:border-box;min-block-size:0;min-inline-size:0;overflow-x:auto;overflow-y:var(--table-body-overflow,visible);overflow-anchor:none;outline:none;flex:auto;display:block}:host::-webkit-scrollbar{width:var(--luzmo-table-scrollbar-width,var(--table-body-scrollbar-width));height:var(--luzmo-table-scrollbar-width,var(--table-body-scrollbar-width))}:host::-webkit-scrollbar-track{background:var(--luzmo-table-scrollbar-track-background,var(--table-body-scrollbar-track-background));border-radius:var(--luzmo-table-scrollbar-track-border-radius,var(--table-body-scrollbar-track-border-radius))}:host::-webkit-scrollbar-thumb{background:var(--luzmo-table-scrollbar-thumb-background,var(--table-body-scrollbar-thumb-background));border-radius:var(--luzmo-table-scrollbar-thumb-border-radius,var(--table-body-scrollbar-thumb-border-radius))}:host::-webkit-scrollbar-thumb:hover{background:var(--luzmo-table-scrollbar-thumb-hover-background,var(--table-body-scrollbar-thumb-hover-background))}:host{scrollbar-width:var(--luzmo-scrollbar-width,thin);scrollbar-color:var(--luzmo-table-scrollbar-thumb-background,var(--table-body-scrollbar-thumb-background)) var(--luzmo-table-scrollbar-track-background,var(--table-body-scrollbar-track-background))}::slotted(.row-group),::slotted(.virtual-spacer){min-inline-size:var(--table-min-inline-size,0);overflow-anchor:none;display:flow-root}:host(:focus-visible){outline:var(--table-body-focus-indicator-width) solid var(--highcontrast-table-body-focus-indicator-color,var(--table-body-focus-indicator-color));outline-offset:calc(var(--table-body-focus-indicator-width) * -1);border-end-end-radius:var(--table-corner-radius,0);border-end-start-radius:var(--table-corner-radius,0)}:host{--table-body-scrollbar-width:var(--luzmo-scrollbar-size);--table-body-scrollbar-track-background:var(--luzmo-scrollbar-track-background);--table-body-scrollbar-track-border-radius:var(--luzmo-scrollbar-track-border-radius);--table-body-scrollbar-thumb-background:var(--luzmo-scrollbar-thumb-background);--table-body-scrollbar-thumb-border-radius:var(--luzmo-scrollbar-thumb-border-radius);--table-body-scrollbar-thumb-hover-background:var(--luzmo-scrollbar-thumb-hover-background);--table-body-focus-indicator-width:calc(var(--luzmo-indicator-width) * 2);--table-body-focus-indicator-color:var(--luzmo-indicator-color)}@media (forced-colors:active){:host{--highcontrast-table-body-focus-indicator-color:Highlight}}`,q=class extends e.n{static get styles(){return R(super.styles,Ae)}constructor(){super(),this.role=`rowgroup`,this._handleScroll=()=>{this.dispatchEvent(new Event(`luzmo-table-body-scroll`,{bubbles:!0,composed:!0}))},this.addEventListener(`scroll`,this._handleScroll)}connectedCallback(){super.connectedCallback(),this.resizeObserver??=new ResizeObserver(()=>this._syncTabStop()),this.mutationObserver??=new MutationObserver(()=>this._syncTabStop()),this.resizeObserver.observe(this),this.mutationObserver.observe(this,{childList:!0})}disconnectedCallback(){this.resizeObserver?.disconnect(),this.mutationObserver?.disconnect(),super.disconnectedCallback()}render(){return o.html`<slot @slotchange=${this._syncTabStop}></slot>`}_syncTabStop(){this.scrollHeight>this.clientHeight||this.scrollWidth>this.clientWidth?this.setAttribute(`tabindex`,`0`):this.removeAttribute(`tabindex`)}};e.t([(0,s.property)({reflect:!0})],q.prototype,`role`,void 0);var je=`:host{box-sizing:border-box;min-inline-size:0;padding-block:var(--table-cell-padding-block);padding-inline:var(--luzmo-table-cell-padding-inline,var(--table-cell-padding-inline));outline:none;align-self:stretch;align-items:center;display:flex;border-block:none!important;border-inline-start:none!important;border-inline-end-width:var(--luzmo-table-column-divider-width,var(--table-column-divider-width))!important;border-inline-end-style:solid!important;border-inline-end-color:var(--highcontrast-table-column-divider-color,var(--luzmo-table-column-divider-color,var(--table-column-divider-color)))!important}:host([span-all]){grid-column:1/-1;border-inline-end-width:0!important}:host(:last-of-type){border-inline-end-width:0!important}.content{overflow-wrap:anywhere;min-inline-size:0;overflow:hidden}.content.clamped{-webkit-line-clamp:var(--table-cell-line-clamp);line-clamp:var(--table-cell-line-clamp);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:host(:focus-visible){outline:var(--luzmo-indicator-width,2px) solid var(--highcontrast-table-cell-focus-indicator-color,var(--luzmo-indicator-color,currentColor));outline-offset:calc(var(--luzmo-indicator-width,2px) * -1);border-start-start-radius:var(--table-focus-start-start-radius,0);border-start-end-radius:var(--table-focus-start-end-radius,0);border-end-end-radius:var(--table-focus-end-end-radius,0);border-end-start-radius:var(--table-focus-end-start-radius,0)}:host{--table-cell-focus-indicator-width:var(--luzmo-indicator-width);--table-cell-focus-indicator-color:var(--luzmo-indicator-color)}@media (forced-colors:active){:host{--highcontrast-table-cell-focus-indicator-color:Highlight}}`,J=class extends e.n{constructor(...e){super(...e),this.role=`gridcell`,this.spanAll=!1}static get styles(){return R(super.styles,je)}willUpdate(e){super.willUpdate(e),e.has(`lineClamp`)&&!y(this.lineClamp)&&(this.lineClamp=void 0)}render(){let e=y(this.lineClamp)??y(this.columnLineClamp);return o.html`
|
|
98
|
+
<div
|
|
99
|
+
class=${(0,u.classMap)({content:!0,clamped:e!==void 0})}
|
|
100
|
+
style=${(0,d.styleMap)(e?{"--table-cell-line-clamp":String(e)}:{})}
|
|
101
|
+
>
|
|
102
|
+
<slot></slot>
|
|
103
|
+
</div>
|
|
104
|
+
`}};e.t([(0,s.property)({reflect:!0})],J.prototype,`role`,void 0),e.t([(0,s.property)({type:Number,reflect:!0,attribute:`line-clamp`})],J.prototype,`lineClamp`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0,attribute:`span-all`})],J.prototype,`spanAll`,void 0),e.t([(0,s.state)()],J.prototype,`columnLineClamp`,void 0);var Me=`:host{flex:0 0 var(--table-checkbox-cell-inline-size);box-sizing:border-box;padding-block:var(--table-cell-padding-block);outline:none;justify-content:center;align-self:stretch;align-items:center;display:flex;border-block:none!important;border-inline-start:none!important;border-inline-end-width:var(--luzmo-table-column-divider-width,var(--table-column-divider-width))!important;border-inline-end-style:solid!important;border-inline-end-color:var(--highcontrast-table-column-divider-color,var(--luzmo-table-column-divider-color,var(--table-column-divider-color)))!important}:host(:focus-visible){outline:var(--luzmo-indicator-width,2px) solid var(--highcontrast-table-checkbox-cell-focus-indicator-color,var(--luzmo-indicator-color,currentColor));outline-offset:calc(var(--luzmo-indicator-width,2px) * -1);border-start-start-radius:var(--table-focus-start-start-radius,0);border-start-end-radius:var(--table-focus-start-end-radius,0);border-end-end-radius:var(--table-focus-end-end-radius,0);border-end-start-radius:var(--table-focus-end-start-radius,0)}.checkbox{margin:0}.label{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:host{--table-checkbox-cell-focus-indicator-width:var(--luzmo-indicator-width);--table-checkbox-cell-focus-indicator-color:var(--luzmo-indicator-color)}@media (forced-colors:active){:host{--highcontrast-table-checkbox-cell-focus-indicator-color:Highlight}}`,Y=class extends e.n{static get styles(){return R(super.styles,Me)}constructor(){super(),this.role=`gridcell`,this.headCell=!1,this.checked=!1,this.indeterminate=!1,this.disabled=!1,this.selectsSingle=!1,this.emphasized=!1,this.label=``,this.size=`m`,this.handleClick=e=>{!this.checkbox||e.composedPath().includes(this.checkbox)||this.checkbox.click()},this.addEventListener(`click`,this.handleClick)}render(){return this.headCell&&this.selectsSingle?o.nothing:o.html`
|
|
105
|
+
<luzmo-checkbox
|
|
106
|
+
class="checkbox"
|
|
107
|
+
tabindex="-1"
|
|
108
|
+
size=${this.size}
|
|
109
|
+
.checked=${this.checked}
|
|
110
|
+
.indeterminate=${this.indeterminate}
|
|
111
|
+
?disabled=${this.disabled}
|
|
112
|
+
?emphasized=${this.emphasized}
|
|
113
|
+
aria-hidden=${(0,l.ifDefined)(this.selectsSingle?`true`:void 0)}
|
|
114
|
+
>
|
|
115
|
+
${this.label?o.html`<span class="label">${this.label}</span>`:o.nothing}
|
|
116
|
+
</luzmo-checkbox>
|
|
117
|
+
`}willUpdate(e){super.willUpdate(e),(e.has(`headCell`)||e.has(`selectsSingle`))&&(this.role=this.headCell&&!this.selectsSingle?`columnheader`:`gridcell`),e.has(`selectsSingle`)&&(this.selectsSingle?(this.setAttribute(`aria-hidden`,`true`),this.tabIndex=-1):this.removeAttribute(`aria-hidden`))}};e.t([(0,s.property)({reflect:!0})],Y.prototype,`role`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0,attribute:`head-cell`})],Y.prototype,`headCell`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],Y.prototype,`checked`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],Y.prototype,`indeterminate`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],Y.prototype,`disabled`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0,attribute:`selects-single`})],Y.prototype,`selectsSingle`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],Y.prototype,`emphasized`,void 0),e.t([(0,s.property)({reflect:!0})],Y.prototype,`label`,void 0),e.t([(0,s.state)()],Y.prototype,`size`,void 0),e.t([(0,s.query)(`luzmo-checkbox`)],Y.prototype,`checkbox`,void 0);var Ne=`:host{grid-template-columns:var(--table-grid-columns);min-inline-size:var(--table-min-inline-size,0);box-sizing:border-box;min-block-size:calc(var(--luzmo-table-row-min-block-size,var(--table-row-min-block-size)) + var(--table-row-density-offset));background-color:var(--table-head-background-color);flex:none;align-items:stretch;display:grid;border-block-start:none!important;border-inline:none!important;border-block-end-width:var(--table-head-divider-width)!important;border-block-end-style:solid!important;border-block-end-color:var(--highcontrast-table-head-divider-color,var(--luzmo-table-border-color,var(--table-head-divider-color)))!important}luzmo-table-checkbox-cell,.leading::slotted(luzmo-table-head-cell:first-of-type){--table-focus-start-start-radius:var(--table-corner-radius)}.disclosure-spacer{box-sizing:border-box;inline-size:var(--table-disclosure-cell-inline-size);align-self:stretch;border-block:none!important;border-inline-start:none!important;border-inline-end-width:var(--luzmo-table-column-divider-width,var(--table-column-divider-width))!important;border-inline-end-style:solid!important;border-inline-end-color:var(--highcontrast-table-column-divider-color,var(--luzmo-table-column-divider-color,var(--table-column-divider-color)))!important}:host{--table-head-background-color:rgba(var(--luzmo-background-color-rgb), 0);--table-head-divider-color:var(--luzmo-border-color);--table-head-divider-width:var(--luzmo-border-width)}@media (forced-colors:active){:host{--highcontrast-table-head-divider-color:CanvasText}}`,X=class extends e.n{static get styles(){return R(super.styles,Ne)}constructor(){super(),this.role=`row`,this.selected=!1,this.checked=!1,this.indeterminate=!1,this.emphasized=!1,this.checkboxLabel=``,this.checkboxSize=`m`,this.expandable=!1,this.handleSorted=e=>{if(e.defaultPrevented)return;let t=e.target;for(let e of this.querySelectorAll(`:scope > luzmo-table-head-cell`))e!==t&&(e.sortDirection=void 0)},this.addEventListener(`luzmo-table-sorted`,this.handleSorted)}render(){return o.html`${this.selects?o.html`
|
|
118
|
+
<luzmo-table-checkbox-cell
|
|
119
|
+
head-cell
|
|
120
|
+
.checked=${this.checked}
|
|
121
|
+
.indeterminate=${this.indeterminate}
|
|
122
|
+
.selectsSingle=${this.selects===`single`}
|
|
123
|
+
.emphasized=${this.emphasized}
|
|
124
|
+
.label=${this.checkboxLabel}
|
|
125
|
+
.size=${this.checkboxSize}
|
|
126
|
+
></luzmo-table-checkbox-cell>
|
|
127
|
+
`:o.nothing}${this.expandable?o.html`<span class="disclosure-spacer" role="gridcell"></span>`:o.nothing}<slot
|
|
128
|
+
class=${!this.selects&&!this.expandable?`leading`:``}
|
|
129
|
+
></slot>`}};e.t([(0,s.property)({reflect:!0})],X.prototype,`role`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],X.prototype,`selected`,void 0),e.t([(0,s.state)()],X.prototype,`selects`,void 0),e.t([(0,s.state)()],X.prototype,`checked`,void 0),e.t([(0,s.state)()],X.prototype,`indeterminate`,void 0),e.t([(0,s.state)()],X.prototype,`emphasized`,void 0),e.t([(0,s.state)()],X.prototype,`checkboxLabel`,void 0),e.t([(0,s.state)()],X.prototype,`checkboxSize`,void 0),e.t([(0,s.state)()],X.prototype,`expandable`,void 0);var Pe=`:host{align-self:stretch;align-items:center;gap:var(--luzmo-spacing-2);box-sizing:border-box;min-inline-size:0;padding-block:var(--table-cell-padding-block);padding-inline:var(--luzmo-table-cell-padding-inline,var(--table-cell-padding-inline));font-weight:var(--table-head-cell-font-weight);color:var(--table-head-cell-font-color);text-align:start;outline:none;display:flex;position:relative;border-block:none!important;border-inline-start:none!important;border-inline-end-width:var(--luzmo-table-column-divider-width,var(--table-column-divider-width))!important;border-inline-end-style:solid!important;border-inline-end-color:var(--highcontrast-table-column-divider-color,var(--luzmo-table-column-divider-color,var(--table-column-divider-color)))!important}:host(:last-of-type){--table-focus-start-end-radius:var(--table-corner-radius);border-inline-end-width:0!important}.content{overflow-wrap:anywhere;flex:auto;min-inline-size:0;overflow:hidden}.content.clamped{-webkit-line-clamp:var(--table-cell-line-clamp);line-clamp:var(--table-cell-line-clamp);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.resize-handle{z-index:1;inline-size:var(--luzmo-component-height-xs);box-sizing:border-box;cursor:col-resize;touch-action:none;justify-content:center;align-items:stretch;display:flex;position:absolute;inset-block:0;inset-inline-end:calc(var(--luzmo-spacing-4) * -1)}.resize-handle:before{content:"";inline-size:var(--luzmo-indicator-gap,2px);background:var(--luzmo-indicator-color,currentColor);opacity:0}.resize-handle:hover:before,.resize-handle:active:before,.resize-handle:focus-visible:before{opacity:1}:host(:last-of-type) .resize-handle{justify-content:flex-end;inset-inline-end:0}.resize-handle:focus,.resize-handle:focus-visible{outline:none}:host([sortable]){cursor:pointer;-webkit-user-select:none;user-select:none}:host([sortable]:hover){color:var(--table-head-cell-font-color-hover)}:host([active]){color:var(--table-head-cell-font-color-down)}:host(:focus-visible){outline:var(--luzmo-indicator-width,2px) solid var(--highcontrast-table-head-cell-focus-indicator-color,var(--luzmo-indicator-color,currentColor));outline-offset:calc(var(--luzmo-indicator-width,2px) * -1);border-start-start-radius:var(--table-focus-start-start-radius,0);border-start-end-radius:var(--table-focus-start-end-radius,0);border-end-end-radius:var(--table-focus-end-end-radius,0);border-end-start-radius:var(--table-focus-end-start-radius,0)}.sort-icon{inline-size:var(--table-sort-icon-size);block-size:var(--table-sort-icon-size);flex:none;display:inline-flex}.sort-icon svg{fill:currentColor;block-size:100%;inline-size:100%}@media (forced-colors:active){.resize-handle:before{background:canvastext}}:host{--table-head-cell-font-weight:var(--luzmo-font-weight-bold);--table-head-cell-font-color:var(--luzmo-font-color);--table-head-cell-font-color-hover:var(--luzmo-font-color-hover);--table-head-cell-font-color-down:var(--luzmo-font-color-down);--table-head-cell-focus-indicator-width:var(--luzmo-indicator-width);--table-head-cell-focus-indicator-color:var(--luzmo-indicator-color)}@media (forced-colors:active){:host{--highcontrast-table-head-cell-focus-indicator-color:Highlight}}`,Z=class extends e.n{static get styles(){return R(super.styles,Pe)}constructor(){super(),this.role=`columnheader`,this.active=!1,this.sortable=!1,this.sortKey=``,this.columnId=``,this.resizable=!1,this.currentWidth=0,this.resizeLabel=``,this.handleClick=e=>{e.composedPath().some(e=>e instanceof HTMLElement&&e.classList.contains(`resize-handle`))||this._sort()},this.handleKeydown=e=>{!this.sortable||e.composedPath()[0]!==this||(e.code===`Enter`||e.code===`NumpadEnter`?(e.preventDefault(),this._sort()):e.code===`Space`&&(e.preventDefault(),this.active=!0))},this.handleKeyup=e=>{e.code!==`Space`||!this.active||(this.active=!1,this._sort())},this.handleBlur=()=>{this.active=!1},this.addEventListener(`click`,this.handleClick),this.addEventListener(`keydown`,this.handleKeydown),this.addEventListener(`keyup`,this.handleKeyup),this.addEventListener(`blur`,this.handleBlur)}toLayout(e){return{id:this.columnId||this.sortKey||`column-${e}`,header:this.textContent?.trim()||this.columnId||this.sortKey,width:y(this.width),minWidth:y(this.minWidth),maxWidth:y(this.maxWidth),resizable:this.resizable,lineClamp:y(this.lineClamp)}}render(){let e=y(this.lineClamp),t=this.sortable&&this.sortDirection?o.html`<span class="sort-icon" aria-hidden="true"
|
|
130
|
+
>${(0,c.luzmoIcon)(this.sortDirection===`asc`?c.luzmoArrowUp:c.luzmoArrowDown)}</span
|
|
131
|
+
>`:o.nothing,n=this.toLayout(0),r=this.resizable?o.html`
|
|
132
|
+
<div
|
|
133
|
+
class="resize-handle"
|
|
134
|
+
tabindex="0"
|
|
135
|
+
role="separator"
|
|
136
|
+
aria-orientation="vertical"
|
|
137
|
+
aria-valuemin=${x(n)}
|
|
138
|
+
aria-valuemax=${S(n)}
|
|
139
|
+
aria-valuenow=${Math.round(this.currentWidth)}
|
|
140
|
+
aria-label=${(0,l.ifDefined)(this.resizeLabel||void 0)}
|
|
141
|
+
aria-keyshortcuts="ArrowLeft ArrowRight PageUp PageDown Home End"
|
|
142
|
+
></div>
|
|
143
|
+
`:o.nothing;return o.html`
|
|
144
|
+
<div
|
|
145
|
+
class=${(0,u.classMap)({content:!0,clamped:e!==void 0})}
|
|
146
|
+
style=${(0,d.styleMap)(e?{"--table-cell-line-clamp":String(e)}:{})}
|
|
147
|
+
>
|
|
148
|
+
<slot></slot>
|
|
149
|
+
</div>
|
|
150
|
+
${t}${r}
|
|
151
|
+
`}updated(e){super.updated(e),(e.has(`sortable`)||e.has(`sortDirection`))&&(this.sortable?this.setAttribute(`aria-sort`,le(this.sortDirection)):this.removeAttribute(`aria-sort`))}_sort(){this.sortable&&(this.sortDirection=ue(this.sortDirection),this.dispatchEvent(new CustomEvent(`luzmo-table-sorted`,{bubbles:!0,composed:!0,cancelable:!0,detail:{sortKey:this.sortKey,sortDirection:this.sortDirection}})))}};e.t([(0,s.property)({reflect:!0})],Z.prototype,`role`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],Z.prototype,`active`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],Z.prototype,`sortable`,void 0),e.t([(0,s.property)({reflect:!0,attribute:`sort-direction`})],Z.prototype,`sortDirection`,void 0),e.t([(0,s.property)({reflect:!0,attribute:`sort-key`})],Z.prototype,`sortKey`,void 0),e.t([(0,s.property)({reflect:!0,attribute:`column-id`})],Z.prototype,`columnId`,void 0),e.t([(0,s.property)({type:Number,reflect:!0})],Z.prototype,`width`,void 0),e.t([(0,s.property)({type:Number,reflect:!0,attribute:`min-width`})],Z.prototype,`minWidth`,void 0),e.t([(0,s.property)({type:Number,reflect:!0,attribute:`max-width`})],Z.prototype,`maxWidth`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],Z.prototype,`resizable`,void 0),e.t([(0,s.property)({type:Number,reflect:!0,attribute:`line-clamp`})],Z.prototype,`lineClamp`,void 0),e.t([(0,s.state)()],Z.prototype,`currentWidth`,void 0),e.t([(0,s.state)()],Z.prototype,`resizeLabel`,void 0);var Fe=`:host{flex:0 0 var(--table-disclosure-cell-inline-size);box-sizing:border-box;min-inline-size:var(--table-disclosure-cell-inline-size);outline:none;justify-content:center;align-self:stretch;align-items:center;display:flex;border-block:none!important;border-inline-start:none!important;border-inline-end-width:var(--luzmo-table-column-divider-width,var(--table-column-divider-width))!important;border-inline-end-style:solid!important;border-inline-end-color:var(--highcontrast-table-column-divider-color,var(--luzmo-table-column-divider-color,var(--table-column-divider-color)))!important}:host(:focus-visible){outline:var(--luzmo-indicator-width,2px) solid var(--highcontrast-table-disclosure-cell-focus-indicator-color,var(--luzmo-indicator-color,currentColor));outline-offset:calc(var(--luzmo-indicator-width,2px) * -1);border-start-start-radius:var(--table-focus-start-start-radius,0);border-start-end-radius:var(--table-focus-start-end-radius,0);border-end-end-radius:var(--table-focus-end-end-radius,0);border-end-start-radius:var(--table-focus-end-start-radius,0)}.button{block-size:100%;inline-size:100%;min-inline-size:var(--luzmo-component-height-xs);min-block-size:var(--luzmo-component-height-xs);background:rgba(var(--luzmo-background-color-rgb), 0);color:inherit;cursor:pointer;border:0;outline:none;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.icon{inline-size:var(--table-sort-icon-size);block-size:var(--table-sort-icon-size);display:inline-flex;transform:rotate(-90deg)}.icon svg{fill:currentColor;block-size:100%;inline-size:100%}:host([expanded]) .icon{transform:rotate(0)}:host([dir=rtl]:not([expanded])) .icon{transform:rotate(90deg)}@media (prefers-reduced-motion:no-preference){.icon{transition:transform var(--luzmo-animation-duration) ease}}:host{--table-disclosure-cell-focus-indicator-width:var(--luzmo-indicator-width);--table-disclosure-cell-focus-indicator-color:var(--luzmo-indicator-color)}@media (forced-colors:active){:host{--highcontrast-table-disclosure-cell-focus-indicator-color:Highlight}}`,Q=class extends e.n{constructor(...e){super(...e),this.role=`gridcell`,this.expanded=!1,this.label=``}static get styles(){return R(super.styles,Fe)}render(){return o.html`
|
|
152
|
+
<button
|
|
153
|
+
type="button"
|
|
154
|
+
class="button"
|
|
155
|
+
tabindex="-1"
|
|
156
|
+
aria-expanded=${String(this.expanded)}
|
|
157
|
+
aria-label=${(0,l.ifDefined)(this.label||void 0)}
|
|
158
|
+
>
|
|
159
|
+
<span class="icon" aria-hidden="true"
|
|
160
|
+
>${(0,c.luzmoIcon)(c.luzmoAngleDown)}</span
|
|
161
|
+
>
|
|
162
|
+
</button>
|
|
163
|
+
`}};e.t([(0,s.property)({reflect:!0})],Q.prototype,`role`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],Q.prototype,`expanded`,void 0),e.t([(0,s.property)({reflect:!0})],Q.prototype,`label`,void 0);var Ie=`:host{grid-template-columns:var(--table-grid-columns);min-inline-size:var(--table-min-inline-size,0);box-sizing:border-box;min-block-size:calc(var(--luzmo-table-row-min-block-size,var(--table-row-min-block-size)) + var(--table-row-density-offset));align-items:stretch;display:grid;border-block-start:none!important;border-inline:none!important;border-block-end-width:var(--table-row-divider-width)!important;border-block-end-style:solid!important;border-block-end-color:var(--highcontrast-table-row-divider-color,var(--luzmo-table-border-color,var(--table-row-divider-color)))!important}:host([data-last-row]:not([expanded])){border-block-end-width:0!important}:host([data-last-row]:not([expanded])) .leading:not(slot),:host([data-last-row]:not([expanded])) slot.leading::slotted(luzmo-table-cell:first-of-type){--table-focus-end-start-radius:var(--table-corner-radius)}:host([data-last-row]:not([expanded])) ::slotted(luzmo-table-cell:last-of-type){--table-focus-end-end-radius:var(--table-corner-radius)}:host([selectable]){cursor:pointer}:host([selectable]:hover){background-color:var(--table-row-hover-background-color)}:host([selected]){background-color:var(--luzmo-table-row-selected-background-color,var(--table-row-selected-background-color))}:host([selected]:hover){background-color:var(--luzmo-table-row-selected-background-color,var(--table-row-selected-hover-background-color))}.selection-spacer{inline-size:var(--table-checkbox-cell-inline-size)}.selection-spacer,.disclosure-spacer{box-sizing:border-box;align-self:stretch;border-block:none!important;border-inline-start:none!important;border-inline-end-width:var(--luzmo-table-column-divider-width,var(--table-column-divider-width))!important;border-inline-end-style:solid!important;border-inline-end-color:var(--highcontrast-table-column-divider-color,var(--luzmo-table-column-divider-color,var(--table-column-divider-color)))!important}.disclosure-spacer{inline-size:var(--table-disclosure-cell-inline-size)}@media (forced-colors:active){:host([selected]){forced-color-adjust:none;color:highlighttext;background-color:highlight}}:host{--table-row-divider-color:var(--luzmo-border-color);--table-row-divider-width:var(--luzmo-border-width);--table-row-hover-background-color:var(--luzmo-background-color-hover)}@media (forced-colors:active){:host{--highcontrast-table-row-divider-color:CanvasText}}`,$=class extends e.n{constructor(...e){super(...e),this.role=`row`,this.value=``,this.selected=!1,this.selectable=!1,this.expanded=!1,this.expandable=!1,this.selectsSingle=!1,this.emphasized=!1,this.selectionColumn=!1,this.expansionColumn=!1,this.spanAll=!1,this.checkboxLabel=``,this.disclosureLabel=``,this.detailsId=``,this.checkboxSize=`m`}static get styles(){return R(super.styles,Ie)}render(){if(this.spanAll)return o.html`<slot class="leading"></slot>`;let e=this.selectable||this.selectionColumn,t=!e&&(this.expandable||this.expansionColumn),n=o.nothing;this.selectable?n=o.html`
|
|
164
|
+
<luzmo-table-checkbox-cell
|
|
165
|
+
class="leading"
|
|
166
|
+
.checked=${this.selected}
|
|
167
|
+
.selectsSingle=${this.selectsSingle}
|
|
168
|
+
.emphasized=${this.emphasized}
|
|
169
|
+
.label=${this.checkboxLabel}
|
|
170
|
+
.size=${this.checkboxSize}
|
|
171
|
+
></luzmo-table-checkbox-cell>
|
|
172
|
+
`:this.selectionColumn&&(n=o.html`<span class="selection-spacer"></span>`);let r=o.nothing;return this.expandable?r=o.html`
|
|
173
|
+
<luzmo-table-disclosure-cell
|
|
174
|
+
class=${t?`leading`:``}
|
|
175
|
+
.expanded=${this.expanded}
|
|
176
|
+
.label=${this.disclosureLabel}
|
|
177
|
+
></luzmo-table-disclosure-cell>
|
|
178
|
+
`:this.expansionColumn&&(r=o.html`<span class="disclosure-spacer"></span>`),o.html`${n}${r}<slot
|
|
179
|
+
class=${!e&&!t?`leading`:``}
|
|
180
|
+
></slot>`}updated(e){super.updated(e),(e.has(`selectable`)||e.has(`selected`))&&(this.selectable?this.setAttribute(`aria-selected`,String(this.selected)):this.removeAttribute(`aria-selected`)),(e.has(`expandable`)||e.has(`expanded`)||e.has(`detailsId`))&&(this.expandable&&this.detailsId?this.setAttribute(`aria-controls`,this.detailsId):this.removeAttribute(`aria-controls`))}};e.t([(0,s.property)({reflect:!0})],$.prototype,`role`,void 0),e.t([(0,s.property)({reflect:!0})],$.prototype,`value`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],$.prototype,`selected`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],$.prototype,`selectable`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],$.prototype,`expanded`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],$.prototype,`expandable`,void 0),e.t([(0,s.state)()],$.prototype,`selectsSingle`,void 0),e.t([(0,s.state)()],$.prototype,`emphasized`,void 0),e.t([(0,s.state)()],$.prototype,`selectionColumn`,void 0),e.t([(0,s.state)()],$.prototype,`expansionColumn`,void 0),e.t([(0,s.state)()],$.prototype,`spanAll`,void 0),e.t([(0,s.state)()],$.prototype,`checkboxLabel`,void 0),e.t([(0,s.state)()],$.prototype,`disclosureLabel`,void 0),e.t([(0,s.state)()],$.prototype,`detailsId`,void 0),e.t([(0,s.state)()],$.prototype,`checkboxSize`,void 0),typeof customElements<`u`&&!customElements.get(`luzmo-table`)&&customElements.define(`luzmo-table`,K),typeof customElements<`u`&&!customElements.get(`luzmo-table-head`)&&customElements.define(`luzmo-table-head`,X),typeof customElements<`u`&&!customElements.get(`luzmo-table-head-cell`)&&customElements.define(`luzmo-table-head-cell`,Z),typeof customElements<`u`&&!customElements.get(`luzmo-table-body`)&&customElements.define(`luzmo-table-body`,q),typeof customElements<`u`&&!customElements.get(`luzmo-table-row`)&&customElements.define(`luzmo-table-row`,$),typeof customElements<`u`&&!customElements.get(`luzmo-table-cell`)&&customElements.define(`luzmo-table-cell`,J),typeof customElements<`u`&&!customElements.get(`luzmo-table-checkbox-cell`)&&customElements.define(`luzmo-table-checkbox-cell`,Y),typeof customElements<`u`&&!customElements.get(`luzmo-table-disclosure-cell`)&&customElements.define(`luzmo-table-disclosure-cell`,Q),typeof customElements<`u`&&!customElements.get(`luzmo-table-row-details`)&&customElements.define(`luzmo-table-row-details`,z),Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return Y}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return K}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return X}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return z}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return Q}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return J}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return Z}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return q}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return $}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return T}});
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../tabs-
|
|
18
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../tabs-CMU8X4ho.cjs");exports.LuzmoTab=e.i,exports.LuzmoTabPanel=e.r,exports.LuzmoTabs=e.n,exports.LuzmoTabsOverflow=e.t;
|
package/components/tabs/index.js
CHANGED
|
@@ -16,5 +16,5 @@
|
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
18
|
import "../tokens.js";
|
|
19
|
-
import { i as e, n as t, r as n, t as r } from "../tabs-
|
|
19
|
+
import { i as e, n as t, r as n, t as r } from "../tabs-D8U2PxcE.js";
|
|
20
20
|
export { e as LuzmoTab, n as LuzmoTabPanel, t as LuzmoTabs, r as LuzmoTabsOverflow };
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
require("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./focus-visible-DNHNlrty.cjs"),r=require("./focusable-B6h03pAe.cjs"),i=require("./roving-tabindex-BoPao4td.cjs");require("./icon-zOPAWCdx.cjs");const a=require("./observe-slot-text-CvL-2ey3.cjs"),o=require("./random-id-BcUJAxUZ.cjs");require("./action-button-
|
|
18
|
+
require("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./focus-visible-DNHNlrty.cjs"),r=require("./focusable-B6h03pAe.cjs"),i=require("./roving-tabindex-BoPao4td.cjs");require("./icon-zOPAWCdx.cjs");const a=require("./observe-slot-text-CvL-2ey3.cjs"),o=require("./random-id-BcUJAxUZ.cjs");require("./action-button-B4_uvHiN.cjs");const s=require("./observe-slot-presence-CS8pMePk.cjs"),c=require("./scaled-indicator-DLJIztx0.cjs");let l=require("lit"),u=require("lit/decorators.js"),d=require("@luzmo/icons"),f=require("lit/directives/if-defined.js"),p=require("lit/directives/class-map.js"),m=require("lit/decorators/property.js"),h=require("@lit-labs/observers/intersection-controller.js"),g=require("@lit-labs/observers/resize-controller.js");var _=`:host{font-family:var(--luzmo-tab-font-family,var(--luzmo-font-family));box-sizing:border-box;block-size:calc(var(--luzmo-tabs-item-height,var(--tabs-item-height)) - var(--luzmo-tabs-divider-size,var(--tabs-divider-size)));z-index:1;white-space:nowrap;color:var(--highcontrast-tabs-color,var(--luzmo-tabs-color,var(--tabs-color)));transition:color var(--luzmo-tabs-animation-duration,var(--tabs-animation-duration)) ease-out;cursor:pointer;outline:none;-webkit-text-decoration:none;text-decoration:none;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tabs-icon-size,var(--tabs-icon-size));inline-size:var(--luzmo-tabs-icon-size,var(--tabs-icon-size));margin-block-start:var(--luzmo-tabs-top-to-icon,var(--tabs-top-to-icon))}[name=icon]+#item-label{margin-inline-start:var(--luzmo-tabs-icon-to-text,var(--tabs-icon-to-text))}:host:before{content:"";box-sizing:border-box;block-size:calc(100% - var(--luzmo-tabs-top-to-text,var(--tabs-top-to-text)));inline-size:calc(100% + var(--luzmo-tabs-focus-indicator-gap,var(--tabs-focus-indicator-gap)) * 2);border-radius:var(--luzmo-tabs-focus-indicator-border-radius,var(--tabs-focus-indicator-border-radius));pointer-events:none;position:absolute;inset-block-start:calc(var(--luzmo-tabs-top-to-text,var(--tabs-top-to-text)) / 2);inset-inline-start:calc(var(--luzmo-tabs-focus-indicator-gap,var(--tabs-focus-indicator-gap)) * -1);inset-inline-end:calc(var(--luzmo-tabs-focus-indicator-gap,var(--tabs-focus-indicator-gap)) * -1);border:var(--luzmo-tabs-focus-indicator-width,var(--tabs-focus-indicator-width)) solid transparent!important}@media (hover:hover){:host(:hover){color:var(--highcontrast-tabs-color-hover,var(--luzmo-tabs-color-hover,var(--tabs-color-hover)))}}:host([selected]){color:var(--highcontrast-tabs-color-selected,var(--luzmo-tabs-color-selected,var(--tabs-color-selected)))}:host([disabled]){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--luzmo-tabs-color-disabled,var(--tabs-color-disabled)))}:host([disabled]) #item-label{cursor:default}:host(:focus-visible){color:var(--highcontrast-tabs-color-key-focus,var(--luzmo-tabs-color-key-focus,var(--tabs-color-key-focus)))}:host(:focus-visible):before{border-color:var(--highcontrast-tabs-focus-indicator-color,var(--luzmo-tabs-focus-indicator-color,var(--tabs-focus-indicator-color)))!important}#item-label{cursor:pointer;vertical-align:top;font-family:var(--luzmo-tabs-font-family,var(--tabs-font-family));font-style:var(--luzmo-tabs-font-style,var(--tabs-font-style));font-size:var(--luzmo-tabs-font-size,var(--tabs-font-size));font-weight:var(--luzmo-tabs-font-weight,var(--tabs-font-weight));line-height:var(--luzmo-tabs-line-height,var(--tabs-line-height));margin-block-start:var(--luzmo-tabs-top-to-text,var(--tabs-top-to-text));margin-block-end:var(--luzmo-tabs-bottom-to-text,var(--tabs-bottom-to-text));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}:host{scroll-margin-inline:var(--luzmo-tabs-item-horizontal-spacing,var(--tabs-item-horizontal-spacing))}:host([disabled]){pointer-events:none}#item-label[hidden]{display:none}@media (forced-colors:active){:host:before{background-color:buttonface}:host ::slotted([slot=icon]){z-index:1;color:inherit;position:relative}#item-label{z-index:1;position:relative}:host([selected]),:host([selected]) ::slotted([slot=icon]),:host([selected]) #item-label{color:highlighttext}}:host([vertical]){flex-direction:column;justify-content:center;align-items:center;height:auto;display:flex}:host([dir][vertical]) slot[name=icon]+#item-label{margin-inline-start:0;margin-block:calc(var(--luzmo-tabs-top-to-text,var(--tabs-top-to-text)) / 2) calc(var(--luzmo-tabs-bottom-to-text,var(--tabs-bottom-to-text)) / 2)}:host([vertical]) ::slotted([slot=icon]){margin-block-start:calc(var(--luzmo-tabs-top-to-icon,var(--tabs-top-to-icon)) / 2)}`,v=class extends n.t(a.t(s.t(e.n,`[slot="icon"]`),``)){constructor(...e){super(...e),this.disabled=!1,this.label=``,this.selected=!1,this.vertical=!1,this.value=``}static get styles(){return[(0,l.unsafeCSS)(_)]}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return!!this.label||this.slotHasContent}render(){return l.html`
|
|
19
19
|
${this.hasIcon?l.html` <slot name="icon"></slot> `:l.nothing}
|
|
20
20
|
<label id="item-label" ?hidden=${!this.hasLabel}>
|
|
21
21
|
<slot>${this.label}</slot>
|
|
@@ -24,7 +24,7 @@ import { t as a } from "./roving-tabindex-pomAn3z-.js";
|
|
|
24
24
|
import "./icon-CsJZMhIm.js";
|
|
25
25
|
import { t as o } from "./observe-slot-text-Db8Kx3P-.js";
|
|
26
26
|
import { t as s } from "./random-id-CiMDyX7v.js";
|
|
27
|
-
import "./action-button-
|
|
27
|
+
import "./action-button-DU95RNNi.js";
|
|
28
28
|
import { t as c } from "./observe-slot-presence-BKY6n06-.js";
|
|
29
29
|
import { t as l } from "./scaled-indicator-C-TupV4L.js";
|
|
30
30
|
import { html as u, nothing as d, unsafeCSS as f } from "lit";
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../tags-
|
|
18
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../tags-D8F1o4UZ.cjs");exports.LuzmoTag=e.n,exports.LuzmoTags=e.t;
|
package/components/tags/index.js
CHANGED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/*! * Lucero - The design system for Luzmo.
|
|
2
|
+
*
|
|
3
|
+
* Copyright © 2026 Luzmo
|
|
4
|
+
* All rights reserved.
|
|
5
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
+
*
|
|
10
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
+
* SOFTWARE.
|
|
17
|
+
* */
|
|
18
|
+
require("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./focus-visible-DNHNlrty.cjs"),r=require("./roving-tabindex-BoPao4td.cjs"),i=require("./language-resolution-CSjktYg5.cjs");require("./tooltip-DjOW52n2.cjs"),require("./button-B1V_2tHk.cjs");let a=require("lit"),o=require("lit/decorators.js");var s=`:host{font-family:var(--luzmo-font-family);background-color:var(--highcontrast-tag-background-color,var(--luzmo-tag-background-color,var(--tag-background-color)));color:var(--highcontrast-tag-content-color,var(--luzmo-tag-content-color,var(--tag-content-color)));border-radius:var(--luzmo-tag-border-radius,var(--tag-border-radius));block-size:var(--luzmo-tag-height,var(--tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:var(--luzmo-tag-max-inline-size,var(--tag-max-inline-size));-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-tag-animation-duration,var(--tag-animation-duration)) ease-in-out, color var(--luzmo-tag-animation-duration,var(--tag-animation-duration)) ease-in-out, box-shadow var(--luzmo-tag-animation-duration,var(--tag-animation-duration)) ease-in-out, background-color var(--luzmo-tag-animation-duration,var(--tag-animation-duration)) ease-in-out;outline:none;justify-content:center;align-items:center;padding-inline-start:calc(var(--luzmo-tag-spacing-inline-start,var(--tag-spacing-inline-start)) - var(--luzmo-tag-border-width,var(--tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative;border-color:var(--highcontrast-tag-border-color,var(--luzmo-tag-border-color,var(--tag-border-color)))!important;border-width:var(--luzmo-tag-border-width,var(--tag-border-width))!important;border-style:solid!important}::slotted([slot=icon]){block-size:var(--luzmo-tag-icon-size,var(--tag-icon-size));inline-size:var(--luzmo-tag-icon-size,var(--tag-icon-size));flex-shrink:0;margin-inline-end:var(--luzmo-tag-icon-spacing-inline-end,var(--tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-inline-end:var(--luzmo-tag-avatar-spacing-inline-end,var(--tag-avatar-spacing-inline-end))}.clear-button{--luzmo-clear-button-width:fit-content;--clearbutton-fill-size:fit-content;--clearbutton-fill-background-color:transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--luzmo-tag-clear-button-spacing-inline-start,var(--tag-clear-button-spacing-inline-start)) + var(--luzmo-tag-label-spacing-inline-end,var(--tag-label-spacing-inline-end)) * -1);margin-inline-end:calc(var(--luzmo-tag-clear-button-spacing-inline-end,var(--tag-clear-button-spacing-inline-end)) - var(--luzmo-tag-border-width,var(--tag-border-width)))}.clear-button .luzmo-ClearButton-fill{background-color:var(--luzmo-clearbutton-fill-background-color,var(--clearbutton-fill-background-color));inline-size:var(--luzmo-clearbutton-fill-size,var(--clearbutton-fill-size));block-size:var(--luzmo-clearbutton-fill-size,var(--clearbutton-fill-size))}.label{box-sizing:border-box;block-size:100%;min-inline-size:0;line-height:var(--luzmo-tag-label-line-height,var(--tag-label-line-height));font-weight:var(--luzmo-tag-label-font-weight,var(--tag-label-font-weight));font-size:var(--luzmo-tag-font-size,var(--tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;align-items:center;margin-inline-end:calc(var(--luzmo-tag-label-spacing-inline-end,var(--tag-label-spacing-inline-end)) - var(--luzmo-tag-border-width,var(--tag-border-width)));display:flex;overflow:hidden}.label-text{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-inline-size:0;display:block;overflow:hidden}.label-text slot{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}:host([data-luzmo-language-script=Latn]) .label-text{padding-block:var(--tag-label-glyph-overhang);margin-block:calc(var(--tag-label-glyph-overhang) * -1)}:host([data-luzmo-language-script=Latn]) .label-text slot{text-box:trim-both cap alphabetic;padding-block:var(--tag-label-glyph-overhang);margin-block:calc(var(--tag-label-glyph-overhang) * -1)}:host([data-luzmo-language-script=Latn]) .label-text slot::slotted(*){padding-block:var(--tag-label-glyph-overhang);margin-block:calc(var(--tag-label-glyph-overhang) * -1)}:host(:is(:active,[active])){background-color:var(--highcontrast-tag-background-color-active,var(--luzmo-tag-background-color-active,var(--tag-background-color-active)));color:var(--highcontrast-tag-content-color-active,var(--luzmo-tag-content-color-active,var(--tag-content-color-active)));border-color:var(--highcontrast-tag-border-color-active,var(--luzmo-tag-border-color-active,var(--tag-border-color-active)))!important}:host([focused]),:host(:focus-visible){background-color:var(--highcontrast-tag-background-color-focus,var(--luzmo-tag-background-color-focus,var(--tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus,var(--luzmo-tag-content-color-focus,var(--tag-content-color-focus)));border-color:var(--highcontrast-tag-border-color-focus,var(--luzmo-tag-border-color-focus,var(--tag-border-color-focus)))!important}:host([focused]):after,:host(:focus-visible):after{content:"";border-radius:calc(var(--luzmo-tag-border-radius,var(--tag-border-radius)) + var(--luzmo-tag-focus-ring-gap,var(--tag-focus-ring-gap)) + var(--luzmo-tag-border-width,var(--tag-border-width)));pointer-events:none;display:inline-block;position:absolute;inset-block-start:calc(var(--luzmo-tag-focus-ring-gap,var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width,var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness,var(--tag-focus-ring-thickness)));inset-block-end:calc(var(--luzmo-tag-focus-ring-gap,var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width,var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness,var(--tag-focus-ring-thickness)));inset-inline-start:calc(var(--luzmo-tag-focus-ring-gap,var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width,var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness,var(--tag-focus-ring-thickness)));inset-inline-end:calc(var(--luzmo-tag-focus-ring-gap,var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width,var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness,var(--tag-focus-ring-thickness)));border-color:var(--highcontrast-tag-focus-ring-color,var(--luzmo-tag-focus-ring-color,var(--tag-focus-ring-color)))!important;border-width:var(--luzmo-tag-focus-ring-thickness,var(--tag-focus-ring-thickness))!important;border-style:solid!important}:host([selected]){background-color:var(--highcontrast-tag-background-color-selected,var(--luzmo-tag-background-color-selected,var(--tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected,var(--luzmo-tag-content-color-selected,var(--tag-content-color-selected)));border-color:var(--highcontrast-tag-border-color-selected,var(--luzmo-tag-border-color-selected,var(--tag-border-color-selected)))!important}:host([selected]:is(:active,[active])){background-color:var(--highcontrast-tag-background-color-selected-active,var(--luzmo-tag-background-color-selected-active,var(--tag-background-color-selected-active)));border-color:var(--highcontrast-tag-border-color-selected-active,var(--luzmo-tag-border-color-selected-active,var(--tag-border-color-selected-active)))!important}:host([selected][focused]),:host([selected]:focus-visible){background-color:var(--highcontrast-tag-background-color-selected-focus,var(--luzmo-tag-background-color-selected-focus,var(--tag-background-color-selected-focus)));border-color:var(--highcontrast-tag-border-color-selected-focus,var(--luzmo-tag-border-color-selected-focus,var(--tag-border-color-selected-focus)))!important}:host([invalid]){color:var(--highcontrast-tag-content-color-invalid,var(--luzmo-tag-content-color-invalid,var(--tag-content-color-invalid)));border-color:var(--highcontrast-tag-border-color-invalid,var(--luzmo-tag-border-color-invalid,var(--tag-border-color-invalid)))!important}:host([invalid]:is(:active,[active])){color:var(--highcontrast-tag-content-color-invalid-active,var(--luzmo-tag-content-color-invalid-active,var(--tag-content-color-invalid-active)));border-color:var(--highcontrast-tag-border-color-invalid-active,var(--luzmo-tag-border-color-invalid-active,var(--tag-border-color-invalid-active)))!important}:host([invalid][focused]),:host([invalid]:focus-visible){color:var(--highcontrast-tag-content-color-invalid-focus,var(--luzmo-tag-content-color-invalid-focus,var(--tag-content-color-invalid-focus)));border-color:var(--highcontrast-tag-border-color-invalid-focus,var(--luzmo-tag-border-color-invalid-focus,var(--tag-border-color-invalid-focus)))!important}:host([invalid][selected]){background-color:var(--highcontrast-tag-background-color-invalid-selected,var(--luzmo-tag-background-color-invalid-selected,var(--tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--luzmo-tag-content-color-invalid-selected,var(--tag-content-color-invalid-selected)));border-color:var(--highcontrast-tag-border-color-invalid-selected,var(--luzmo-tag-border-color-invalid-selected,var(--tag-border-color-invalid-selected)))!important}:host([invalid][selected]:is(:active,[active])){background-color:var(--highcontrast-tag-background-color-invalid-selected-active,var(--luzmo-tag-background-color-invalid-selected-active,var(--tag-background-color-invalid-selected-active)));border-color:var(--highcontrast-tag-border-color-invalid-selected-active,var(--luzmo-tag-border-color-invalid-selected-active,var(--tag-border-color-invalid-selected-active)))!important}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){background-color:var(--highcontrast-tag-background-color-invalid-selected-focus,var(--luzmo-tag-background-color-invalid-selected-focus,var(--tag-background-color-invalid-selected-focus)));border-color:var(--highcontrast-tag-border-color-invalid-selected-focus,var(--luzmo-tag-border-color-invalid-selected-focus,var(--tag-border-color-invalid-selected-focus)))!important}:host([emphasized]){background-color:var(--highcontrast-tag-background-color-emphasized,var(--luzmo-tag-background-color-emphasized,var(--tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized,var(--luzmo-tag-content-color-emphasized,var(--tag-content-color-emphasized)));--luzmo-clear-button-background-color-hover:var(--luzmo-tag-background-color-emphasized,var(--tag-background-color-emphasized));--luzmo-clear-button-background-color-focus:var(--luzmo-tag-background-color-emphasized,var(--tag-background-color-emphasized));--luzmo-clear-button-background-color-down:var(--luzmo-tag-background-color-emphasized,var(--tag-background-color-emphasized));border-color:var(--highcontrast-tag-border-color-emphasized,var(--luzmo-tag-border-color-emphasized,var(--tag-border-color-emphasized)))!important}@media (hover:hover){:host(:hover){background-color:var(--highcontrast-tag-background-color-hover,var(--luzmo-tag-background-color-hover,var(--tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover,var(--luzmo-tag-content-color-hover,var(--tag-content-color-hover)));border-color:var(--highcontrast-tag-border-color-hover,var(--luzmo-tag-border-color-hover,var(--tag-border-color-hover)))!important}:host([selected]:hover){background-color:var(--highcontrast-tag-background-color-selected-hover,var(--luzmo-tag-background-color-selected-hover,var(--tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected,var(--luzmo-tag-content-color-selected,var(--tag-content-color-selected)));border-color:var(--highcontrast-tag-border-color-selected-hover,var(--luzmo-tag-border-color-selected-hover,var(--tag-border-color-selected-hover)))!important}:host([invalid]:hover){color:var(--highcontrast-tag-content-color-invalid-hover,var(--luzmo-tag-content-color-invalid-hover,var(--tag-content-color-invalid-hover)));border-color:var(--highcontrast-tag-border-color-invalid-hover,var(--luzmo-tag-border-color-invalid-hover,var(--tag-border-color-invalid-hover)))!important}:host([invalid][selected]:hover){background-color:var(--highcontrast-tag-background-color-invalid-selected-hover,var(--luzmo-tag-background-color-invalid-selected-hover,var(--tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--luzmo-tag-content-color-invalid-selected,var(--tag-content-color-invalid-selected)));border-color:var(--highcontrast-tag-border-color-invalid-selected-hover,var(--luzmo-tag-border-color-invalid-selected-hover,var(--tag-border-color-invalid-selected-hover)))!important}:host([emphasized]:hover){background-color:var(--highcontrast-tag-background-color-emphasized-hover,var(--luzmo-tag-background-color-emphasized-hover,var(--tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized,var(--luzmo-tag-content-color-emphasized,var(--tag-content-color-emphasized)));border-color:var(--highcontrast-tag-border-color-emphasized-hover,var(--luzmo-tag-border-color-emphasized-hover,var(--tag-border-color-emphasized-hover)))!important}}:host([emphasized]:is(:active,[active])){background-color:var(--highcontrast-tag-background-color-emphasized-active,var(--luzmo-tag-background-color-emphasized-active,var(--tag-background-color-emphasized-active)));border-color:var(--highcontrast-tag-border-color-emphasized-active,var(--luzmo-tag-border-color-emphasized-active,var(--tag-border-color-emphasized-active)))!important}:host([emphasized][focused]),:host([emphasized]:focus-visible){background-color:var(--highcontrast-tag-background-color-emphasized-focus,var(--luzmo-tag-background-color-emphasized-focus,var(--tag-background-color-emphasized-focus)));border-color:var(--highcontrast-tag-border-color-emphasized-focus,var(--luzmo-tag-border-color-emphasized-focus,var(--tag-border-color-emphasized-focus)))!important}:host([disabled]){background-color:var(--highcontrast-tag-background-color-disabled,var(--luzmo-tag-background-color-disabled,var(--tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled,var(--luzmo-tag-content-color-disabled,var(--tag-content-color-disabled)));pointer-events:none;border-color:var(--highcontrast-tag-border-color-disabled,var(--luzmo-tag-border-color-disabled,var(--tag-border-color-disabled)))!important}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--luzmo-avatar-opacity-disabled,var(--avatar-opacity-disabled))}@media (forced-colors:active){:host{--highcontrast-tag-border-color:ButtonText;--highcontrast-tag-border-color-hover:ButtonText;--highcontrast-tag-border-color-active:ButtonText;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:ButtonFace;--highcontrast-tag-background-color-hover:ButtonFace;--highcontrast-tag-background-color-active:ButtonFace;--highcontrast-tag-background-color-focus:ButtonFace;--highcontrast-tag-content-color:ButtonText;--highcontrast-tag-content-color-hover:ButtonText;--highcontrast-tag-content-color-active:ButtonText;--highcontrast-tag-content-color-focus:ButtonText;--highcontrast-tag-focus-ring-color:Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected:Highlight;--highcontrast-tag-border-color-selected-hover:Highlight;--highcontrast-tag-border-color-selected-active:Highlight;--highcontrast-tag-border-color-selected-focus:Highlight;--highcontrast-tag-background-color-selected:Highlight;--highcontrast-tag-background-color-selected-hover:Highlight;--highcontrast-tag-background-color-selected-active:Highlight;--highcontrast-tag-background-color-selected-focus:Highlight;--highcontrast-tag-content-color-selected:HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled:GrayText;--highcontrast-tag-background-color-disabled:ButtonFace;--highcontrast-tag-content-color-disabled:GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid:Highlight;--highcontrast-tag-border-color-invalid-hover:Highlight;--highcontrast-tag-border-color-invalid-active:Highlight;--highcontrast-tag-border-color-invalid-focus:Highlight;--highcontrast-tag-content-color-invalid:CanvasText;--highcontrast-tag-content-color-invalid-hover:CanvasText;--highcontrast-tag-content-color-invalid-active:CanvasText;--highcontrast-tag-content-color-invalid-focus:CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected:Highlight;--highcontrast-tag-border-color-invalid-selected-hover:Highlight;--highcontrast-tag-border-color-invalid-selected-focus:Highlight;--highcontrast-tag-border-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected:Highlight;--highcontrast-tag-background-color-invalid-selected-hover:Highlight;--highcontrast-tag-background-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected-focus:Highlight;--highcontrast-tag-content-color-invalid-selected:HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized:Highlight;--highcontrast-tag-border-color-emphasized-hover:Highlight;--highcontrast-tag-border-color-emphasized-active:Highlight;--highcontrast-tag-border-color-emphasized-focus:Highlight;--highcontrast-tag-background-color-emphasized:ButtonFace;--highcontrast-tag-background-color-emphasized-hover:ButtonFace;--highcontrast-tag-background-color-emphasized-active:ButtonFace;--highcontrast-tag-background-color-emphasized-focus:ButtonFace;--highcontrast-tag-content-color-emphasized:CanvasText}:host([variant][treatment=fill]){--highcontrast-tag-border-color:Highlight;--highcontrast-tag-border-color-hover:Highlight;--highcontrast-tag-border-color-active:Highlight;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:Highlight;--highcontrast-tag-background-color-hover:Highlight;--highcontrast-tag-background-color-active:Highlight;--highcontrast-tag-background-color-focus:Highlight;--highcontrast-tag-content-color:HighlightText;--highcontrast-tag-content-color-hover:HighlightText;--highcontrast-tag-content-color-active:HighlightText;--highcontrast-tag-content-color-focus:HighlightText}}:host{--tag-border-color:var(--luzmo-border-color);--tag-border-color-hover:var(--luzmo-border-color-hover);--tag-border-color-active:var(--luzmo-border-color-active);--tag-border-color-focus:var(--luzmo-border-color-focus);--tag-size-small-border-radius:var(--luzmo-border-radius-s);--tag-size-medium-border-radius:var(--luzmo-border-radius);--tag-size-large-border-radius:var(--luzmo-border-radius);--tag-background-color:var(--luzmo-background-color);--tag-background-color-hover:var(--luzmo-background-color-hover);--tag-background-color-active:var(--luzmo-background-color-active);--tag-background-color-focus:var(--luzmo-background-color-focus);--tag-content-color:var(--luzmo-font-color);--tag-content-color-hover:var(--luzmo-font-color-hover);--tag-content-color-active:var(--luzmo-font-color-active);--tag-content-color-focus:var(--luzmo-font-color-focus);--tag-border-color-selected:var(--luzmo-border-color-down);--tag-border-color-selected-hover:var(--luzmo-border-color-down);--tag-border-color-selected-active:var(--luzmo-border-color-down);--tag-border-color-selected-focus:var(--luzmo-border-color-down);--tag-border-color-disabled:var(--luzmo-border-color-disabled);--tag-background-color-disabled:var(--luzmo-background-color-disabled);--avatar-opacity-disabled:.3;--tag-animation-duration:var(--luzmo-animation-duration);--tag-border-width:var(--luzmo-border-width);--tag-focus-ring-thickness:var(--luzmo-indicator-width);--tag-focus-ring-gap:var(--luzmo-indicator-gap);--tag-focus-ring-color:var(--luzmo-indicator-color);--tag-label-line-height:var(--luzmo-line-height);--tag-label-font-weight:var(--luzmo-font-weight);--tag-label-glyph-overhang:.35em;--tag-variant-color-hover:color-mix(in oklch, var(--tag-variant-color), black 8%);--tag-variant-color-down:color-mix(in oklch, var(--tag-variant-color), black 20%);--tag-variant-color-focus:var(--tag-variant-color-hover);--tag-variant-fill-color-hover:var(--tag-variant-color-hover);--tag-variant-fill-color-down:var(--tag-variant-color-down);--tag-variant-fill-color-focus:var(--tag-variant-color-focus);--tag-content-color-selected:var(--luzmo-font-color-down);--tag-background-color-selected:var(--luzmo-background-color-down);--tag-background-color-selected-hover:var(--luzmo-background-color-down);--tag-background-color-selected-active:var(--luzmo-background-color-down);--tag-background-color-selected-focus:var(--luzmo-background-color-down);--tag-border-color-invalid:var(--luzmo-negative-color);--tag-border-color-invalid-hover:var(--luzmo-negative-color-hover);--tag-border-color-invalid-active:var(--luzmo-negative-color-down);--tag-border-color-invalid-focus:var(--luzmo-negative-color-focus);--tag-content-color-invalid:var(--luzmo-negative-color);--tag-content-color-invalid-hover:var(--luzmo-negative-color-hover);--tag-content-color-invalid-active:var(--luzmo-negative-color-down);--tag-content-color-invalid-focus:var(--luzmo-negative-color-focus);--tag-border-color-invalid-selected:var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-hover:var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-focus:var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-active:var(--luzmo-negative-color-down);--tag-background-color-invalid-selected:var(--luzmo-background-color-down);--tag-background-color-invalid-selected-hover:var(--luzmo-background-color-down);--tag-background-color-invalid-selected-active:var(--luzmo-background-color-down);--tag-background-color-invalid-selected-focus:var(--luzmo-background-color-down);--tag-content-color-invalid-selected:var(--luzmo-negative-color-down);--tag-border-color-emphasized:var(--luzmo-primary);--tag-border-color-emphasized-hover:var(--luzmo-primary-hover);--tag-border-color-emphasized-active:var(--luzmo-primary-down);--tag-border-color-emphasized-focus:var(--luzmo-primary-focus);--tag-background-color-emphasized:var(--luzmo-primary);--tag-background-color-emphasized-hover:var(--luzmo-primary-hover);--tag-background-color-emphasized-active:var(--luzmo-primary-down);--tag-background-color-emphasized-focus:var(--luzmo-primary-focus);--tag-content-color-emphasized:white;--tag-content-color-disabled:var(--luzmo-disabled-color);--tag-icon-spacing-inline-end:var(--luzmo-spacing-3);--tag-icon-size:var(--luzmo-font-icon-size-s);--tag-avatar-spacing-inline-end:var(--luzmo-spacing-3);--tag-font-size:var(--luzmo-font-size);--tag-max-inline-size:100%;--tag-subtle-background-opacity:10%;--tag-subtle-interaction-background-opacity:20%;--tag-subtle-content-mix:57%}:host([size=s]){--tag-height:var(--luzmo-component-height-xs);--tag-font-size:var(--luzmo-font-size-s);--tag-icon-size:var(--luzmo-icon-size-s);--tag-icon-spacing-inline-end:var(--luzmo-spacing-2);--tag-clear-button-spacing-inline-start:var(--luzmo-spacing-2);--tag-border-radius:var(--luzmo-border-radius);--tag-spacing-inline-start:var(--luzmo-spacing-3);--tag-label-spacing-inline-end:var(--luzmo-spacing-3);--tag-clear-button-spacing-inline-end:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host{--tag-height:var(--luzmo-component-height-s);--tag-font-size:var(--luzmo-font-size);--tag-icon-size:var(--luzmo-icon-size-m);--tag-clear-button-spacing-inline-start:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--tag-border-radius:var(--luzmo-border-radius);--tag-spacing-inline-start:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tag-label-spacing-inline-end:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tag-clear-button-spacing-inline-end:var(--luzmo-spacing-3)}:host([size=l]){--tag-height:var(--luzmo-component-height);--tag-font-size:var(--luzmo-font-size);--tag-icon-size:var(--luzmo-icon-size-l);--tag-icon-spacing-inline-end:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tag-clear-button-spacing-inline-start:var(--luzmo-spacing-3);--tag-border-radius:var(--luzmo-border-radius);--tag-spacing-inline-start:var(--luzmo-spacing-4);--tag-label-spacing-inline-end:var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-end:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=xl]){--tag-height:var(--luzmo-component-height-l);--tag-font-size:var(--luzmo-font-size-l);--tag-icon-size:var(--luzmo-icon-size-xl);--tag-icon-spacing-inline-end:var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-start:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tag-border-radius:var(--luzmo-border-radius-l);--tag-spacing-inline-start:var(--luzmo-spacing-5);--tag-label-spacing-inline-end:var(--luzmo-spacing-5);--tag-clear-button-spacing-inline-end:var(--luzmo-spacing-4)}:host([variant=accent]){--tag-variant-color:var(--luzmo-primary);--tag-variant-color-hover:var(--luzmo-primary-hover);--tag-variant-color-down:var(--luzmo-primary-down);--tag-variant-color-focus:var(--luzmo-primary-focus);--tag-variant-fill-content-color:var(--luzmo-primary-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-accent-on-subtle-color)}:host([variant=neutral]){--tag-variant-color:var(--luzmo-selected-color-hard);--tag-variant-color-hover:var(--luzmo-selected-color-hard-hover);--tag-variant-color-down:var(--luzmo-selected-color-hard-down);--tag-variant-color-focus:var(--luzmo-selected-color-hard-focus);--tag-variant-fill-content-color:var(--luzmo-background-color);--tag-variant-subtle-content-color:var(--luzmo-neutral-on-subtle-color)}:host([variant=informative]){--tag-variant-color:var(--luzmo-informative-color);--tag-variant-color-hover:var(--luzmo-informative-color-hover);--tag-variant-color-down:var(--luzmo-informative-color-down);--tag-variant-color-focus:var(--luzmo-informative-color-focus);--tag-variant-fill-content-color:var(--luzmo-informative-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-informative-on-subtle-color)}:host([variant=positive]){--tag-variant-color:var(--luzmo-positive-color);--tag-variant-color-hover:var(--luzmo-positive-color-hover);--tag-variant-color-down:var(--luzmo-positive-color-down);--tag-variant-color-focus:var(--luzmo-positive-color-focus);--tag-variant-fill-content-color:var(--luzmo-positive-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-positive-on-subtle-color)}:host([variant=negative]){--tag-variant-color:var(--luzmo-negative-color);--tag-variant-color-hover:var(--luzmo-negative-color-hover);--tag-variant-color-down:var(--luzmo-negative-color-down);--tag-variant-color-focus:var(--luzmo-negative-color-focus);--tag-variant-fill-content-color:var(--luzmo-negative-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-negative-on-subtle-color)}:host([variant=notice]){--tag-variant-color:var(--luzmo-notice-color);--tag-variant-color-hover:var(--luzmo-notice-color-hover);--tag-variant-color-down:var(--luzmo-notice-color-down);--tag-variant-color-focus:var(--luzmo-notice-color-focus);--tag-variant-fill-color-hover:color-mix(in oklch, var(--luzmo-notice-color), white 12%);--tag-variant-fill-color-down:color-mix(in oklch, var(--luzmo-notice-color), white 24%);--tag-variant-fill-color-focus:var(--tag-variant-fill-color-hover);--tag-variant-fill-content-color:var(--luzmo-notice-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-notice-on-subtle-color)}:host([variant=seafoam]){--tag-variant-color:var(--luzmo-seafoam-color);--tag-variant-fill-content-color:white}:host([variant=indigo]){--tag-variant-color:var(--luzmo-indigo-color);--tag-variant-fill-content-color:white}:host([variant=purple]){--tag-variant-color:var(--luzmo-purple-color);--tag-variant-fill-content-color:white}:host([variant=fuchsia]){--tag-variant-color:var(--luzmo-fuchsia-color);--tag-variant-fill-content-color:white}:host([variant=magenta]){--tag-variant-color:var(--luzmo-magenta-color);--tag-variant-fill-content-color:white}:host([variant=yellow]){--tag-variant-color:var(--luzmo-yellow-color);--tag-variant-fill-content-color:black}:host([variant=gray]){--tag-variant-color:var(--luzmo-gray-color);--tag-variant-fill-content-color:white}:host([variant=red]){--tag-variant-color:var(--luzmo-red-color);--tag-variant-fill-content-color:white}:host([variant=orange]){--tag-variant-color:var(--luzmo-orange-color);--tag-variant-fill-content-color:black}:host([variant=chartreuse]){--tag-variant-color:var(--luzmo-chartreuse-color);--tag-variant-fill-content-color:white}:host([variant=celery]){--tag-variant-color:var(--luzmo-celery-color);--tag-variant-fill-content-color:black}:host([variant=green]){--tag-variant-color:var(--luzmo-green-color);--tag-variant-fill-content-color:white}:host([variant=cyan]){--tag-variant-color:var(--luzmo-cyan-color);--tag-variant-fill-content-color:white}:host([variant=blue]){--tag-variant-color:var(--luzmo-blue-color);--tag-variant-fill-content-color:white}:host([variant]:not([treatment=fill])){--tag-border-color:var(--tag-variant-color);--tag-border-color-hover:var(--tag-variant-color-hover);--tag-border-color-active:var(--tag-variant-color-down);--tag-border-color-focus:var(--tag-variant-color-focus);--tag-content-color:var(--tag-variant-color);--tag-content-color-hover:var(--tag-variant-color-hover);--tag-content-color-active:var(--tag-variant-color-down);--tag-content-color-focus:var(--tag-variant-color-focus);--tag-background-color:transparent;--tag-background-color-hover:color-mix(in oklch, var(--tag-variant-color), transparent 90%);--tag-background-color-active:color-mix(in oklch, var(--tag-variant-color), transparent 82%);--tag-background-color-focus:color-mix(in oklch, var(--tag-variant-color), transparent 90%);--tag-border-color-selected:var(--tag-variant-color-down);--tag-border-color-selected-hover:var(--tag-variant-color-down);--tag-border-color-selected-active:var(--tag-variant-color-down);--tag-border-color-selected-focus:var(--tag-variant-color-down);--tag-content-color-selected:var(--tag-variant-color-down);--tag-background-color-selected:color-mix(in oklch, var(--tag-variant-color), transparent 80%);--tag-background-color-selected-hover:color-mix(in oklch, var(--tag-variant-color), transparent 72%);--tag-background-color-selected-active:color-mix(in oklch, var(--tag-variant-color), transparent 72%);--tag-background-color-selected-focus:color-mix(in oklch, var(--tag-variant-color), transparent 72%)}:host([variant][treatment=subtle]){--tag-subtle-background-color:color-mix(in srgb, var(--tag-variant-color) var(--tag-subtle-background-opacity), var(--luzmo-background-color));--tag-subtle-interaction-background-color:color-mix(in srgb, var(--tag-variant-color) var(--tag-subtle-interaction-background-opacity), var(--luzmo-background-color));--tag-subtle-content-color:var(--tag-variant-subtle-content-color,color-mix(in oklch, var(--tag-variant-color), var(--luzmo-font-color) var(--tag-subtle-content-mix)));--tag-subtle-interaction-content-color:color-mix(in oklch, var(--tag-variant-color), var(--luzmo-font-color) var(--tag-subtle-content-mix));--tag-background-color:var(--tag-subtle-background-color);--tag-background-color-hover:var(--tag-subtle-interaction-background-color);--tag-background-color-active:var(--tag-subtle-background-color);--tag-background-color-focus:var(--tag-subtle-interaction-background-color);--tag-background-color-selected:var(--tag-subtle-background-color);--tag-background-color-selected-hover:var(--tag-subtle-background-color);--tag-background-color-selected-active:var(--tag-subtle-background-color);--tag-background-color-selected-focus:var(--tag-subtle-background-color);--tag-content-color:var(--tag-subtle-content-color);--tag-content-color-hover:var(--tag-subtle-interaction-content-color);--tag-content-color-active:var(--tag-subtle-content-color);--tag-content-color-focus:var(--tag-subtle-interaction-content-color);--tag-content-color-selected:var(--tag-subtle-content-color);--luzmo-clear-button-background-color-hover:var(--tag-subtle-interaction-background-color);--luzmo-clear-button-background-color-focus:var(--tag-subtle-interaction-background-color);--luzmo-clear-button-background-color-down:var(--tag-subtle-background-color)}:host([variant][treatment=fill]){--tag-background-color:var(--tag-variant-color);--tag-background-color-hover:var(--tag-variant-fill-color-hover);--tag-background-color-active:var(--tag-variant-fill-color-down);--tag-background-color-focus:var(--tag-variant-fill-color-focus);--tag-content-color:var(--tag-variant-fill-content-color);--tag-content-color-hover:var(--tag-variant-fill-content-color);--tag-content-color-active:var(--tag-variant-fill-content-color);--tag-content-color-focus:var(--tag-variant-fill-content-color);--tag-border-color:transparent;--tag-border-color-hover:transparent;--tag-border-color-active:transparent;--tag-border-color-focus:transparent;--tag-background-color-selected:var(--tag-variant-fill-color-down);--tag-background-color-selected-hover:var(--tag-variant-fill-color-down);--tag-background-color-selected-active:var(--tag-variant-fill-color-down);--tag-background-color-selected-focus:var(--tag-variant-fill-color-down);--tag-content-color-selected:var(--tag-variant-fill-content-color);--tag-border-color-selected:transparent;--tag-border-color-selected-hover:transparent;--tag-border-color-selected-active:transparent;--tag-border-color-selected-focus:transparent;--luzmo-clear-button-background-color-hover:var(--tag-variant-fill-color-hover);--luzmo-clear-button-background-color-focus:var(--tag-variant-fill-color-focus);--luzmo-clear-button-background-color-down:var(--tag-variant-fill-color-down)}:host([variant]:is([treatment=subtle],[treatment=fill])[invalid]){--tag-background-color:var(--luzmo-background-color);--tag-background-color-hover:var(--luzmo-background-color-hover);--tag-background-color-active:var(--luzmo-background-color-down);--tag-background-color-focus:var(--luzmo-background-color-focus);--tag-content-color:var(--luzmo-negative-color);--tag-content-color-hover:var(--luzmo-negative-color-hover);--tag-content-color-active:var(--luzmo-negative-color-down);--tag-content-color-focus:var(--luzmo-negative-color-focus)}:host([invalid]) .clear-button{--clearbutton-medium-icon-color:var(--tag-icon-color-error-key-focus,var(--red-600));--clearbutton-medium-icon-color-hover:var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down:var(--tag-deletable-icon-color-error-down,var(--red-700))}:host([invalid]):hover .clear-button,:host([invalid]:is(:active,[active])) .clear-button{--clearbutton-medium-icon-color:var(--tag-icon-color-error-hover,var(--red-600));--clearbutton-medium-icon-color-hover:var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down:var(--tag-deletable-icon-color-error-down,var(--red-700))}:host([size=xs]){--icon-size:var(--workflow-icon-size-50)}:host([size=s]){--icon-size:var(--workflow-icon-size-75)}:host([size=m]){--icon-size:var(--workflow-icon-size)}:host([size=l]){--icon-size:var(--workflow-icon-size-200)}:host([size=xl]){--icon-size:var(--workflow-icon-size-300)}:host([size=xxl]){--icon-size:var(--workflow-icon-size-400)}`,c=[`accent`,`neutral`,`informative`,`positive`,`negative`,`notice`,`seafoam`,`indigo`,`purple`,`fuchsia`,`magenta`,`yellow`,`gray`,`red`,`orange`,`chartreuse`,`celery`,`green`,`cyan`,`blue`],l=class extends t.n(e.n,{validSizes:[`s`,`m`,`l`,`xl`],noDefaultSize:!0}){static get styles(){return[(0,a.unsafeCSS)(s)]}get variant(){return this._variant}set variant(e){if(e===this._variant)return;let t=this._variant;e&&c.includes(e)?(this._variant=e,this.setAttribute(`variant`,e)):(this._variant=void 0,this.removeAttribute(`variant`)),this.requestUpdate(`variant`,t)}constructor(){super(),this._languageScript=new i.n(this),this.treatment=`outline`,this.deletable=!1,this.disabled=!1,this.readonly=!1,this._labelText=``,this.handleFocusin=()=>{this.addEventListener(`focusout`,this.handleFocusout),this.addEventListener(`keydown`,this.handleKeydown)},this.handleFocusout=()=>{this.removeEventListener(`keydown`,this.handleKeydown),this.removeEventListener(`focusout`,this.handleFocusout)},this.handleKeydown=e=>{if(!this.deletable||this.disabled)return;let{code:t}=e;switch(t){case`Backspace`:case`Space`:case`Delete`:e.preventDefault(),e.stopPropagation(),this.delete();break;default:return}},this.addEventListener(`focusin`,this.handleFocusin)}handleIconSlotChange(e){e.target.assignedElements().forEach(e=>{e.tagName.toLowerCase()===`luzmo-icon`&&e.setAttribute(`block`,``)})}handleLabelSlotChange(e){let t=e.target.assignedNodes({flatten:!0});this._labelText=t.map(e=>e.textContent).join(``).trim()}delete(){this.readonly||this.dispatchEvent(new Event(`delete`,{bubbles:!0,cancelable:!0,composed:!0}))&&(this.blur(),this.remove())}render(){return a.html`
|
|
19
|
+
<slot name="avatar"></slot>
|
|
20
|
+
<slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
|
|
21
|
+
<span class="label" focusable>
|
|
22
|
+
<span class="label-text">
|
|
23
|
+
<slot @slotchange=${this.handleLabelSlotChange}></slot>
|
|
24
|
+
</span>
|
|
25
|
+
${this._labelText?a.html`
|
|
26
|
+
<luzmo-tooltip
|
|
27
|
+
self-managed
|
|
28
|
+
show-only-if-truncated
|
|
29
|
+
truncated-element-selector="slot"
|
|
30
|
+
placement="top"
|
|
31
|
+
>
|
|
32
|
+
${this._labelText}
|
|
33
|
+
</luzmo-tooltip>
|
|
34
|
+
`:a.nothing}
|
|
35
|
+
</span>
|
|
36
|
+
${this.deletable?a.html`
|
|
37
|
+
<luzmo-clear-button
|
|
38
|
+
class="clear-button"
|
|
39
|
+
?disabled=${this.disabled}
|
|
40
|
+
label="Remove"
|
|
41
|
+
.size=${this.size}
|
|
42
|
+
tabindex="-1"
|
|
43
|
+
aria-hidden="true"
|
|
44
|
+
@click=${this.delete}
|
|
45
|
+
></luzmo-clear-button>
|
|
46
|
+
`:a.nothing}
|
|
47
|
+
`}firstUpdated(e){super.firstUpdated(e),this.hasAttribute(`role`)||this.setAttribute(`role`,`listitem`),this.hasAttribute(`treatment`)||this.setAttribute(`treatment`,this.treatment),this.deletable&&this.setAttribute(`tabindex`,`0`)}updated(e){super.updated(e),e.has(`disabled`)&&(this.disabled?this.setAttribute(`aria-disabled`,`true`):this.removeAttribute(`aria-disabled`))}};e.t([(0,o.property)({reflect:!0})],l.prototype,`variant`,null),e.t([(0,o.property)({reflect:!0})],l.prototype,`treatment`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],l.prototype,`deletable`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],l.prototype,`disabled`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],l.prototype,`readonly`,void 0),e.t([(0,o.state)()],l.prototype,`_labelText`,void 0);var u=`:host{flex-wrap:wrap;margin:0;padding:0;list-style:none;display:inline-flex}::slotted(*){margin-block:var(--luzmo-tag-group-item-margin-block,var(--tag-group-item-margin-block));margin-inline:var(--luzmo-tag-group-item-margin-inline,var(--tag-group-item-margin-inline))}::slotted(:first-child){margin-inline-start:0}::slotted(:last-child){margin-inline-end:0}:host{--luzmo-tag-group-item-margin-block:var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline:var(--luzmo-spacing-2);--luzmo-clear-button-width:fit-content;margin:0;padding:0;list-style:none;display:inline-flex}:host([size=s]){--luzmo-tag-group-item-margin-block:var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline:var(--luzmo-spacing-2)}:host([size=l]){--luzmo-tag-group-item-margin-block:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--luzmo-tag-group-item-margin-inline:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=xl]){--luzmo-tag-group-item-margin-block:var(--luzmo-spacing-3);--luzmo-tag-group-item-margin-inline:var(--luzmo-spacing-3)}:host{--clear-button-width:fit-content;margin:0;padding:0;list-style:none;display:inline-flex}`,d=class extends n.t(t.n(e.n)){static get styles(){return[(0,a.unsafeCSS)(u)]}get tags(){return this.defaultNodes.filter(e=>e instanceof l)}constructor(){super(),this.rovingTabindexController=new r.t(this,{focusInIndex:e=>e.findIndex(e=>!e.disabled&&e.deletable),elements:()=>this.tags,isFocusableElement:e=>!e.disabled&&e.deletable}),this.handleFocusin=()=>{this.addEventListener(`focusout`,this.handleFocusout),this.addEventListener(`keydown`,this.handleKeydown)},this.handleKeydown=e=>{let{code:t}=e;if(t!==`PageUp`&&t!==`PageDown`)return;let n=(e,t)=>e[(e.length+t)%e.length],r=[...this.getRootNode().querySelectorAll(`luzmo-tags`)];if(r.length<2)return;e.preventDefault();let i=r.indexOf(this),a=t===`PageUp`?-1:1,o=i+a,s=n(r,o),c=0;for(;s.tags.length===0;){if(++c>=r.length)return;o+=a,s=n(r,o)}s.focus()},this.handleFocusout=()=>{this.removeEventListener(`keydown`,this.handleKeydown),this.removeEventListener(`focusout`,this.handleFocusout)},this.addEventListener(`focusin`,this.handleFocusin)}focus(){this.rovingTabindexController.focus()}handleSlotchange(){this.rovingTabindexController.clearElementCache(),this.updateTagSizes()}updateTagSizes(){this.tags.forEach(e=>{e.size=this.size})}render(){return a.html` <slot @slotchange=${this.handleSlotchange}></slot> `}firstUpdated(){this.hasAttribute(`role`)||this.setAttribute(`role`,`list`),this.hasAttribute(`aria-label`)||this.setAttribute(`aria-label`,`Tags`)}updated(e){super.updated(e),e.has(`size`)&&this.updateTagSizes()}};e.t([(0,o.queryAssignedNodes)()],d.prototype,`defaultNodes`,void 0),customElements.get(`luzmo-tag`)||customElements.define(`luzmo-tag`,l),customElements.get(`luzmo-tags`)||customElements.define(`luzmo-tags`,d),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return d}});
|