@ds-mo/ui 14.33.2 → 14.35.0

package/dist/components/ds-table-sort.js.map

@@ -1 +1 @@
-{"version":3,"names":["TABLE_SORT_DIRECTION_ASC","TABLE_SORT_DIRECTION_DESC","TABLE_SORT_FIELD_PREFIX","tableSortFields","columns","fields","seen","Set","column","isTableActionColumn","sortable","segments","headerSegments","filter","segment","sortKey","trim","length","has","add","push","id","label","dataLabel","header","headerLabel","tableSortMenuSections","sort","items","map","field","value","encodeURIComponent","isSelected","columnId","icon","direction","tableSortStatesEqual","left","right","nextTableSortStateFromMenuItem","current","item","some","startsWith","decodeURIComponent","slice","tableSortCss","tableSortSeq","TableSort","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","ariaLabel","menuOpen","menuSurfaceOpen","initialFocusVisible","componentId","triggerId","menuId","setFocus","trigger","el","querySelector","CSS","escape","render","name","h","Host","key","hidden","undefined","variant","size","labelEmphasis","pressScale","hasMenu","collapseLabel","expanded","surfaceOpen","controls","onDsClick","event","toggle","detail","open","anchorId","align","side","menuLabel","selectionMode","sections","onDsClose","close","onDsAfterClose","onDsSelect","handleSelect","fromKeyboard","next","dsSortChange","emit"],"sources":["src/wc/components/TableSort/table-sort-menu.ts","src/wc/components/TableSort/TableSort.css?tag=ds-table-sort&encapsulation=scoped","src/wc/components/TableSort/TableSort.tsx"],"sourcesContent":["import type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport { isTableActionColumn } from '../Table/table-column-customizer';\nimport type { TableColumn, TableSortState } from '../Table/table-types';\n\nexport const TABLE_SORT_DIRECTION_ASC = 'direction:asc';\nexport const TABLE_SORT_DIRECTION_DESC = 'direction:desc';\nconst TABLE_SORT_FIELD_PREFIX = 'field:';\n\nexport interface TableSortField {\n  id: string;\n  label: string;\n}\n\n/** Sortable data fields from the catalog, including compound header segments. */\nexport function tableSortFields(columns: readonly TableColumn[]): TableSortField[] {\n  const fields: TableSortField[] = [];\n  const seen = new Set<string>();\n\n  for (const column of columns) {\n    if (isTableActionColumn(column) || !column.sortable) continue;\n    const segments = column.headerSegments?.filter(segment => segment.sortKey.trim()) ?? [];\n    if (segments.length > 0) {\n      for (const segment of segments) {\n        if (seen.has(segment.sortKey)) continue;\n        seen.add(segment.sortKey);\n        fields.push({\n          id: segment.sortKey,\n          label: segment.dataLabel?.trim() || segment.label.trim() || segment.sortKey,\n        });\n      }\n      continue;\n    }\n    if (seen.has(column.id)) continue;\n    seen.add(column.id);\n    fields.push({\n      id: column.id,\n      label:\n        column.dataLabel?.trim() || column.header.trim() || column.headerLabel?.trim() || column.id,\n    });\n  }\n\n  return fields;\n}\n\nexport function tableSortMenuSections(\n  columns: readonly TableColumn[],\n  sort: TableSortState | null | undefined\n): MenuSection[] {\n  const fields = tableSortFields(columns);\n  return [\n    {\n      header: 'Data',\n      items: fields.map(field => ({\n        label: field.label,\n        value: `${TABLE_SORT_FIELD_PREFIX}${encodeURIComponent(field.id)}`,\n        isSelected: sort?.columnId === field.id,\n      })),\n    },\n    {\n      header: 'Order',\n      items: [\n        {\n          label: 'Ascending',\n          value: TABLE_SORT_DIRECTION_ASC,\n          icon: 'ArrowUp',\n          isSelected: sort?.direction === 'asc',\n        },\n        {\n          label: 'Descending',\n          value: TABLE_SORT_DIRECTION_DESC,\n          icon: 'ArrowDown',\n          isSelected: sort?.direction === 'desc',\n        },\n      ],\n    },\n  ];\n}\n\nexport function tableSortStatesEqual(\n  left: TableSortState | null | undefined,\n  right: TableSortState | null | undefined\n): boolean {\n  if (left === right) return true;\n  if (!left || !right) return false;\n  return left.columnId === right.columnId && left.direction === right.direction;\n}\n\n/** Next controlled sort from a Sort menu selection. Does not toggle like a header click. */\nexport function nextTableSortStateFromMenuItem(\n  columns: readonly TableColumn[],\n  current: TableSortState | null | undefined,\n  item: MenuItemData\n): TableSortState | null {\n  const fields = tableSortFields(columns);\n  if (fields.length === 0) return current ?? null;\n\n  if (item.value === TABLE_SORT_DIRECTION_ASC || item.value === TABLE_SORT_DIRECTION_DESC) {\n    const direction = item.value === TABLE_SORT_DIRECTION_ASC ? 'asc' : 'desc';\n    const columnId = fields.some(field => field.id === current?.columnId)\n      ? current!.columnId\n      : fields[0]!.id;\n    return { columnId, direction };\n  }\n\n  if (!item.value?.startsWith(TABLE_SORT_FIELD_PREFIX)) return current ?? null;\n  let columnId: string;\n  try {\n    columnId = decodeURIComponent(item.value.slice(TABLE_SORT_FIELD_PREFIX.length));\n  } catch {\n    return current ?? null;\n  }\n  if (!fields.some(field => field.id === columnId)) return current ?? null;\n  if (current?.columnId === columnId) return current ?? null;\n  return { columnId, direction: current?.direction ?? 'asc' };\n}\n",":host {\n  display: inline-flex;\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport type { TableColumn, TableSortChangeDetail, TableSortState } from '../Table/table-types';\nimport {\n  nextTableSortStateFromMenuItem,\n  tableSortFields,\n  tableSortMenuSections,\n  tableSortStatesEqual,\n} from './table-sort-menu';\n\nlet tableSortSeq = 0;\n\n@Component({\n  tag: 'ds-table-sort',\n  styleUrl: 'TableSort.css',\n  scoped: true,\n})\nexport class TableSort {\n  @Element() private el!: HTMLElement;\n\n  /** Catalog used to derive sortable fields, including compound header segments. */\n  @Prop() columns: TableColumn[] = [];\n  /** Controlled table sort. Header sorting and this menu share the same value. */\n  @Prop() sort: TableSortState | null = null;\n  /** Accessible name for the trigger and menu. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event({ bubbles: false }) dsSortChange!: EventEmitter<TableSortChangeDetail>;\n\n  @State() private menuOpen = false;\n  @State() private menuSurfaceOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly componentId = `ds-table-sort-${++tableSortSeq}`;\n  private readonly triggerId = `${this.componentId}-trigger`;\n  private readonly menuId = `${this.componentId}-menu`;\n\n  @Method()\n  async setFocus() {\n    const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n      `#${CSS.escape(this.triggerId)}`\n    );\n    await trigger?.setFocus?.();\n  }\n\n  render() {\n    const fields = tableSortFields(this.columns);\n    const name = this.ariaLabel?.trim() || 'Sort table';\n\n    return (\n      <Host hidden={fields.length === 0 ? true : undefined}>\n        {fields.length === 0 ? null : (\n          <ds-button-unfilled\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"ArrowsVertical\"\n            label=\"Sort\"\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label={name}\n            hasMenu={true}\n            collapseLabel={true}\n            expanded={this.menuOpen}\n            surfaceOpen={this.menuSurfaceOpen}\n            controls={this.menuId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => {\n              this.toggle(event.detail.detail === 0);\n            }}\n          />\n        )}\n        {fields.length === 0 ? null : (\n          <ds-menu\n            id={this.menuId}\n            open={this.menuOpen}\n            anchorId={this.triggerId}\n            align=\"start\"\n            side=\"bottom\"\n            menuLabel={name}\n            selectionMode=\"none\"\n            initialFocusVisible={this.initialFocusVisible}\n            sections={tableSortMenuSections(this.columns, this.sort)}\n            onDsClose={() => this.close()}\n            onDsAfterClose={() => {\n              if (!this.menuOpen) this.menuSurfaceOpen = false;\n            }}\n            onDsSelect={event => this.handleSelect(event.detail)}\n          />\n        )}\n      </Host>\n    );\n  }\n\n  private toggle(fromKeyboard = false): void {\n    if (this.menuOpen) this.close();\n    else this.open(fromKeyboard);\n  }\n\n  private open(fromKeyboard = false): void {\n    if (this.menuOpen) return;\n    this.initialFocusVisible = fromKeyboard;\n    this.menuOpen = true;\n    this.menuSurfaceOpen = true;\n  }\n\n  private close(): void {\n    this.menuOpen = false;\n  }\n\n  private handleSelect(item: MenuItemData): void {\n    const next = nextTableSortStateFromMenuItem(this.columns, this.sort, item);\n    if (tableSortStatesEqual(this.sort, next)) return;\n    this.dsSortChange.emit({ sort: next });\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tableSortCss","tableSortSeq","TableSort","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","hasBorder","columns","sort","ariaLabel","menuOpen","menuSurfaceOpen","initialFocusVisible","componentId","triggerId","menuId","setFocus","trigger","el","querySelector","CSS","escape","render","fields","tableSortFields","name","trim","h","Host","key","hidden","length","undefined","id","variant","size","icon","label","labelEmphasis","pressScale","haspopup","collapseLabel","expanded","surfaceOpen","controls","onDsClick","event","toggle","detail","open","anchorId","align","side","menuLabel","selectionMode","sections","tableSortMenuSections","onDsClose","close","onDsAfterClose","onDsSelect","handleSelect","fromKeyboard","item","next","nextTableSortStateFromMenuItem","tableSortStatesEqual","dsSortChange","emit"],"sources":["src/wc/components/TableSort/TableSort.css?tag=ds-table-sort&encapsulation=scoped","src/wc/components/TableSort/TableSort.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport type { TableColumn, TableSortChangeDetail, TableSortState } from '../Table/table-types';\nimport {\n  nextTableSortStateFromMenuItem,\n  tableSortFields,\n  tableSortMenuSections,\n  tableSortStatesEqual,\n} from './table-sort-menu';\n\nlet tableSortSeq = 0;\n\n@Component({\n  tag: 'ds-table-sort',\n  styleUrl: 'TableSort.css',\n  scoped: true,\n})\nexport class TableSort {\n  @Element() private el!: HTMLElement;\n\n  /** Catalog used to derive sortable fields, including compound header segments. */\n  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  @Prop() columns: TableColumn[] = [];\n  /** Controlled table sort. Header sorting and this menu share the same value. */\n  @Prop() sort: TableSortState | null = null;\n  /** Accessible name for the trigger and menu. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event({ bubbles: false }) dsSortChange!: EventEmitter<TableSortChangeDetail>;\n\n  @State() private menuOpen = false;\n  @State() private menuSurfaceOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly componentId = `ds-table-sort-${++tableSortSeq}`;\n  private readonly triggerId = `${this.componentId}-trigger`;\n  private readonly menuId = `${this.componentId}-menu`;\n\n  @Method()\n  async setFocus() {\n    const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n      `#${CSS.escape(this.triggerId)}`\n    );\n    await trigger?.setFocus?.();\n  }\n\n  render() {\n    const fields = tableSortFields(this.columns);\n    const name = this.ariaLabel?.trim() || 'Sort table';\n\n    return (\n      <Host hidden={fields.length === 0 ? true : undefined}>\n        {fields.length === 0 ? null : (\n          <ds-button-unfilled\n            hasBorder={this.hasBorder}\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"ArrowsVertical\"\n            label=\"Sort\"\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label={name}\n            haspopup=\"menu\"\n            collapseLabel={true}\n            expanded={this.menuOpen}\n            surfaceOpen={this.menuSurfaceOpen}\n            controls={this.menuId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => {\n              this.toggle(event.detail.detail === 0);\n            }}\n          />\n        )}\n        {fields.length === 0 ? null : (\n          <ds-menu\n            id={this.menuId}\n            open={this.menuOpen}\n            anchorId={this.triggerId}\n            align=\"start\"\n            side=\"bottom\"\n            menuLabel={name}\n            selectionMode=\"none\"\n            initialFocusVisible={this.initialFocusVisible}\n            sections={tableSortMenuSections(this.columns, this.sort)}\n            onDsClose={() => this.close()}\n            onDsAfterClose={() => {\n              if (!this.menuOpen) this.menuSurfaceOpen = false;\n            }}\n            onDsSelect={event => this.handleSelect(event.detail)}\n          />\n        )}\n      </Host>\n    );\n  }\n\n  private toggle(fromKeyboard = false): void {\n    if (this.menuOpen) this.close();\n    else this.open(fromKeyboard);\n  }\n\n  private open(fromKeyboard = false): void {\n    if (this.menuOpen) return;\n    this.initialFocusVisible = fromKeyboard;\n    this.menuOpen = true;\n    this.menuSurfaceOpen = true;\n  }\n\n  private close(): void {\n    this.menuOpen = false;\n  }\n\n  private handleSelect(item: MenuItemData): void {\n    const next = nextTableSortStateFromMenuItem(this.columns, this.sort, item);\n    if (tableSortStatesEqual(this.sort, next)) return;\n    this.dsSortChange.emit({ sort: next });\n  }\n}\n"],"mappings":"8dAAA,MAAMA,EAAe,IAAM,qJCoB3B,IAAIC,EAAe,E,MAONC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,uFAUUC,KAAAC,UAAqB,KACrBD,KAAAE,QAAyB,GAEzBF,KAAAG,KAA8B,KAEHH,KAAAI,UAA2B,KAI7CJ,KAAAK,SAAW,MACXL,KAAAM,gBAAkB,MAClBN,KAAAO,oBAAsB,MAEtBP,KAAAQ,YAAc,mBAAmBd,IACjCM,KAAAS,UAAY,GAAGT,KAAKQ,sBACpBR,KAAAU,OAAS,GAAGV,KAAKQ,kBAgFnC,CA7EC,cAAMG,GACJ,MAAMC,EAAUZ,KAAKa,GAAGC,cACtB,IAAIC,IAAIC,OAAOhB,KAAKS,oBAEhBG,GAASD,a,CAGjB,MAAAM,GACE,MAAMC,EAASC,EAAgBnB,KAAKE,SACpC,MAAMkB,EAAOpB,KAAKI,WAAWiB,QAAU,aAEvC,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,OAAQP,EAAOQ,SAAW,EAAI,KAAOC,WACxCT,EAAOQ,SAAW,EAAI,KACrBJ,EAAA,sBACErB,UAAWD,KAAKC,UAChB2B,GAAI5B,KAAKS,UACToB,QAAQ,aACRC,KAAK,KACLC,KAAK,iBACLC,MAAM,OACNC,cAAe,MACfC,WAAY,MAAK,aACLd,EACZe,SAAS,OACTC,cAAe,KACfC,SAAUrC,KAAKK,SACfiC,YAAatC,KAAKM,gBAClBiC,SAAUvC,KAAKU,OACf8B,UAAYC,IACVzC,KAAK0C,OAAOD,EAAME,OAAOA,SAAW,EAAE,IAI3CzB,EAAOQ,SAAW,EAAI,KACrBJ,EAAA,WACEM,GAAI5B,KAAKU,OACTkC,KAAM5C,KAAKK,SACXwC,SAAU7C,KAAKS,UACfqC,MAAM,QACNC,KAAK,SACLC,UAAW5B,EACX6B,cAAc,OACd1C,oBAAqBP,KAAKO,oBAC1B2C,SAAUC,EAAsBnD,KAAKE,QAASF,KAAKG,MACnDiD,UAAW,IAAMpD,KAAKqD,QACtBC,eAAgB,KACd,IAAKtD,KAAKK,SAAUL,KAAKM,gBAAkB,KAAK,EAElDiD,WAAYd,GAASzC,KAAKwD,aAAaf,EAAME,U,CAO/C,MAAAD,CAAOe,EAAe,OAC5B,GAAIzD,KAAKK,SAAUL,KAAKqD,aACnBrD,KAAK4C,KAAKa,E,CAGT,IAAAb,CAAKa,EAAe,OAC1B,GAAIzD,KAAKK,SAAU,OACnBL,KAAKO,oBAAsBkD,EAC3BzD,KAAKK,SAAW,KAChBL,KAAKM,gBAAkB,I,CAGjB,KAAA+C,GACNrD,KAAKK,SAAW,K,CAGV,YAAAmD,CAAaE,GACnB,MAAMC,EAAOC,EAA+B5D,KAAKE,QAASF,KAAKG,KAAMuD,GACrE,GAAIG,EAAqB7D,KAAKG,KAAMwD,GAAO,OAC3C3D,KAAK8D,aAAaC,KAAK,CAAE5D,KAAMwD,G","ignoreList":[]}

package/dist/components/ds-table-toolbar.js

@@ -1,2 +1,2 @@
-import{p as t,H as a,h as e,a as l,t as o}from"./index.js";import{d as s}from"./p-eo_pmPqp.js";const b=()=>`.sc-ds-table-toolbar-h{--ds-control-press-active-scale:var(--dimension-scale-default);display:block;min-inline-size:0;max-inline-size:100%}[slot='header'].sc-ds-table-toolbar-h{display:contents;max-inline-size:none}.table-toolbar.sc-ds-table-toolbar{box-sizing:border-box;display:flex;align-items:center;inline-size:100%;min-inline-size:0;gap:var(--dimension-space-100);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}[slot='header'].sc-ds-table-toolbar-h .table-toolbar.sc-ds-table-toolbar{display:contents}.table-toolbar.sc-ds-table-toolbar::-webkit-scrollbar{display:none}.table-toolbar__start.sc-ds-table-toolbar,.table-toolbar__search.sc-ds-table-toolbar,.table-toolbar__leading.sc-ds-table-toolbar,.table-toolbar__trailing.sc-ds-table-toolbar{display:flex;align-items:center;min-inline-size:0;gap:var(--dimension-space-100)}.table-toolbar__start.sc-ds-table-toolbar{flex:0 0 auto;min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs);overflow:hidden}.table-toolbar__rule.sc-ds-table-toolbar{flex:0 0 auto}.table-toolbar__search.sc-ds-table-toolbar{flex:1 1 0;max-inline-size:none;contain:inline-size}.table-toolbar__slot--empty.sc-ds-table-toolbar{display:none}.table-toolbar__leading.sc-ds-table-toolbar{flex:0 0 auto}.table-toolbar__trailing.sc-ds-table-toolbar{flex:0 0 auto;margin-inline-start:auto}.table-toolbar__trailing.sc-ds-table-toolbar>*.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar [slot='start'].sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-table-filter.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-filter-menu.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-select.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-table-group.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-table-sort.sc-ds-table-toolbar{min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs);--ds-choice-popup-min-inline-size:var(--dimension-menu-width-xs)}.table-toolbar__trailing.sc-ds-table-toolbar>*.sc-ds-table-toolbar{flex:0 0 auto}.table-toolbar__start.sc-ds-table-toolbar slot.sc-ds-table-toolbar,.table-toolbar__search.sc-ds-table-toolbar slot.sc-ds-table-toolbar,.table-toolbar__leading.sc-ds-table-toolbar slot.sc-ds-table-toolbar,.table-toolbar__trailing.sc-ds-table-toolbar slot.sc-ds-table-toolbar{display:contents}`;const r=1<<0;const i=1<<1;const n=1<<2;const d=1<<3;const c=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.label="Table controls";this.slotPresence=0;this.syncSlotPresence=()=>{let t=0;if(this.hasOwnedSlot("start"))t|=r;if(this.hasOwnedSlot("search"))t|=i;if(this.hasOwnedSlot("leading"))t|=n;if(this.hasOwnedSlot("trailing"))t|=d;if(t!==this.slotPresence)this.slotPresence=t}}componentWillLoad(){this.syncSlotPresence()}hasOwnedSlot(t){return Array.from(this.el.querySelectorAll(`[slot="${t}"]`)).some((t=>t.closest("ds-table-toolbar")===this.el))}render(){const t=(this.slotPresence&r)!==0;const a=(this.slotPresence&i)!==0;const o=(this.slotPresence&n)!==0;const s=(this.slotPresence&d)!==0;return e(l,{key:"d32c6b378c16de79477bbdda89c9ce5607ab3fbb"},e("div",{key:"bc3cdaba27a4fe5f095a8209b3144b06ea424f17",class:"table-toolbar",role:"toolbar","aria-label":this.label},e("div",{key:"14463df67848bcd779752422661f93a41adb8652",class:{"table-toolbar__start":true,"table-toolbar__slot--empty":!t}},e("slot",{key:"fbdcb40afaa61a86a5990ed3408e058930b8ed4b",name:"start",onSlotchange:this.syncSlotPresence})),e("ds-divider",{key:"7c44fe41c597a42fc40addac760771b6a84551d9",class:{"table-toolbar__rule":true,"table-toolbar__slot--empty":!t},orientation:"vertical",length:"32px"}),e("div",{key:"bc91bd4f1bb4b4d4e176a918d70fc6b60235d45b",class:{"table-toolbar__search":true,"table-toolbar__slot--empty":!a}},e("slot",{key:"90175cb2d94fb30d4a394ee00595d17324ba98a8",name:"search",onSlotchange:this.syncSlotPresence})),e("div",{key:"246b0e8d8bc67e70f74739fdc5bfe77a6861ced9",class:{"table-toolbar__leading":true,"table-toolbar__slot--empty":!o}},e("slot",{key:"aaf53dd16a4aac19f9b8b5974fbd498a38109377",name:"leading",onSlotchange:this.syncSlotPresence})),e("div",{key:"62375eed82f2eff7069b6b977c81f391240f2bd2",class:{"table-toolbar__trailing":true,"table-toolbar__slot--empty":!s}},e("slot",{key:"b89c30c50bdc7bf5db8847be63333416032ff5ae",name:"trailing",onSlotchange:this.syncSlotPresence}))))}get el(){return this}static get style(){return b()}},[262,"ds-table-toolbar",{label:[1],slotPresence:[32]}]);function f(){if(typeof customElements==="undefined"){return}const t=["ds-table-toolbar","ds-divider"];t.forEach((t=>{switch(t){case"ds-table-toolbar":if(!customElements.get(o(t))){customElements.define(o(t),c)}break;case"ds-divider":if(!customElements.get(o(t))){s()}break}}))}f();const _=c;const h=f;export{_ as DsTableToolbar,h as defineCustomElement};
+import{p as t,H as a,h as e,a as l,t as o}from"./index.js";import{d as s}from"./p-eo_pmPqp.js";const b=()=>`.sc-ds-table-toolbar-h{--ds-control-press-active-scale:var(--dimension-scale-default);display:block;min-inline-size:0;max-inline-size:100%}[slot='header'].sc-ds-table-toolbar-h{display:contents;max-inline-size:none}.table-toolbar.sc-ds-table-toolbar{box-sizing:border-box;display:flex;align-items:center;inline-size:100%;min-inline-size:0;gap:var(--dimension-space-100);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}[slot='header'].sc-ds-table-toolbar-h .table-toolbar.sc-ds-table-toolbar{display:contents}.table-toolbar.sc-ds-table-toolbar::-webkit-scrollbar{display:none}.table-toolbar__start.sc-ds-table-toolbar,.table-toolbar__search.sc-ds-table-toolbar,.table-toolbar__leading.sc-ds-table-toolbar,.table-toolbar__trailing.sc-ds-table-toolbar{display:flex;align-items:center;min-inline-size:0;gap:var(--dimension-space-100)}.table-toolbar__start.sc-ds-table-toolbar{flex:0 0 auto;min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs);overflow:hidden}.table-toolbar__rule.sc-ds-table-toolbar{flex:0 0 auto}.table-toolbar__search.sc-ds-table-toolbar{flex:1 1 0;max-inline-size:none;contain:inline-size}.table-toolbar__slot--empty.sc-ds-table-toolbar{display:none}.table-toolbar__leading.sc-ds-table-toolbar{flex:0 0 auto}.table-toolbar__trailing.sc-ds-table-toolbar{flex:0 0 auto;margin-inline-start:auto}.table-toolbar__trailing.sc-ds-table-toolbar>*.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar [slot='start'].sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-table-filter.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-filter-menu.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-select.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-table-group.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-table-sort.sc-ds-table-toolbar{min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs);--ds-choice-popup-min-inline-size:var(--dimension-menu-width-xs)}.table-toolbar__trailing.sc-ds-table-toolbar>*.sc-ds-table-toolbar{flex:0 0 auto}.table-toolbar__start.sc-ds-table-toolbar slot.sc-ds-table-toolbar,.table-toolbar__search.sc-ds-table-toolbar slot.sc-ds-table-toolbar,.table-toolbar__leading.sc-ds-table-toolbar slot.sc-ds-table-toolbar,.table-toolbar__trailing.sc-ds-table-toolbar slot.sc-ds-table-toolbar{display:contents}`;const r=1<<0;const i=1<<1;const n=1<<2;const d=1<<3;const c=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.label="Table controls";this.borderless=false;this.slotPresence=0;this.syncSlotPresence=()=>{let t=0;if(this.hasOwnedSlot("start"))t|=r;if(this.hasOwnedSlot("search"))t|=i;if(this.hasOwnedSlot("leading"))t|=n;if(this.hasOwnedSlot("trailing"))t|=d;if(t!==this.slotPresence)this.slotPresence=t}}componentWillLoad(){this.syncSlotPresence()}hasOwnedSlot(t){return Array.from(this.el.querySelectorAll(`[slot="${t}"]`)).some((t=>t.closest("ds-table-toolbar")===this.el))}render(){const t=(this.slotPresence&r)!==0;const a=(this.slotPresence&i)!==0;const o=(this.slotPresence&n)!==0;const s=(this.slotPresence&d)!==0;return e(l,{key:"9cfe6b2d9c1ece118f4bf785cf3fea27cca37e1c"},e("div",{key:"ecd9e161be2a11e691b10e402b8e47487962e226",class:"table-toolbar",role:"toolbar","aria-label":this.label},e("div",{key:"3b98123e17145240b80c1347bba840ced8a1fc78",class:{"table-toolbar__start":true,"table-toolbar__slot--empty":!t}},e("slot",{key:"3c08eaefab8a3a8490a5c07e02077d47af904370",name:"start",onSlotchange:this.syncSlotPresence})),e("ds-divider",{key:"81b13a7ba2350c18432d9180ff7539f547e342f2",class:{"table-toolbar__rule":true,"table-toolbar__slot--empty":!this.borderless||!t||!(a||o||s)},orientation:"vertical",length:"var(--dimension-space-250)"}),e("div",{key:"d8c03f99ae8a45436ff664345ba7aae1b0383824",class:{"table-toolbar__search":true,"table-toolbar__slot--empty":!a}},e("slot",{key:"319dbd2b77977f61572cd5b76a38921a6a94c3b5",name:"search",onSlotchange:this.syncSlotPresence})),e("ds-divider",{key:"1cc7abad61873cbc6582ba7d77568d9a902b5e5b",class:{"table-toolbar__rule":true,"table-toolbar__slot--empty":!this.borderless||!a||!(o||s)},orientation:"vertical",length:"var(--dimension-space-250)"}),e("div",{key:"ed38d3c7c100194e53d50edcbd57a7829f3a3456",class:{"table-toolbar__leading":true,"table-toolbar__slot--empty":!o}},e("slot",{key:"0e5d0e663429e5f8a80350a5680f09a664a6da90",name:"leading",onSlotchange:this.syncSlotPresence})),e("div",{key:"63f6eb97899a72dca5d3bd9deaee4803b492a765",class:{"table-toolbar__trailing":true,"table-toolbar__slot--empty":!s}},e("slot",{key:"8a3bc2103cf70e4443940a3385eb9bd0c5a9f68d",name:"trailing",onSlotchange:this.syncSlotPresence}))))}get el(){return this}static get style(){return b()}},[262,"ds-table-toolbar",{label:[1],borderless:[4],slotPresence:[32]}]);function _(){if(typeof customElements==="undefined"){return}const t=["ds-table-toolbar","ds-divider"];t.forEach((t=>{switch(t){case"ds-table-toolbar":if(!customElements.get(o(t))){customElements.define(o(t),c)}break;case"ds-divider":if(!customElements.get(o(t))){s()}break}}))}_();const f=c;const h=_;export{f as DsTableToolbar,h as defineCustomElement};
 //# sourceMappingURL=ds-table-toolbar.js.map

package/dist/components/ds-table-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["tableToolbarCss","TABLE_TOOLBAR_SLOT_START","TABLE_TOOLBAR_SLOT_SEARCH","TABLE_TOOLBAR_SLOT_LEADING","TABLE_TOOLBAR_SLOT_TRAILING","TableToolbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","label","slotPresence","syncSlotPresence","presence","hasOwnedSlot","componentWillLoad","name","Array","from","el","querySelectorAll","some","element","closest","render","hasStart","hasSearch","hasLeading","hasTrailing","h","Host","key","class","role","onSlotchange","orientation","length"],"sources":["src/wc/components/TableToolbar/TableToolbar.css?tag=ds-table-toolbar&encapsulation=scoped","src/wc/components/TableToolbar/TableToolbar.tsx"],"sourcesContent":[":host {\n  --ds-control-press-active-scale: var(--dimension-scale-default);\n\n  display: block;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n}\n\n/* A table caption owns overflow for the complete application + table control row. */\n:host([slot='header']) {\n  display: contents;\n  max-inline-size: none;\n}\n\n.table-toolbar {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  inline-size: 100%;\n  min-inline-size: 0;\n  gap: var(--dimension-space-100);\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n}\n\n:host([slot='header']) .table-toolbar {\n  display: contents;\n}\n\n.table-toolbar::-webkit-scrollbar {\n  display: none;\n}\n\n.table-toolbar__start,\n.table-toolbar__search,\n.table-toolbar__leading,\n.table-toolbar__trailing {\n  display: flex;\n  align-items: center;\n  min-inline-size: 0;\n  gap: var(--dimension-space-100);\n}\n\n.table-toolbar__start {\n  flex: 0 0 auto;\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n  overflow: hidden;\n}\n\n.table-toolbar__rule {\n  flex: 0 0 auto;\n}\n\n.table-toolbar__search {\n  flex: 1 1 0;\n  max-inline-size: none;\n  contain: inline-size;\n}\n\n.table-toolbar__slot--empty {\n  display: none;\n}\n\n.table-toolbar__leading {\n  flex: 0 0 auto;\n}\n\n.table-toolbar__trailing {\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n}\n\n.table-toolbar__trailing > *,\n.table-toolbar [slot='start'],\n.table-toolbar ds-table-filter,\n.table-toolbar ds-filter-menu,\n.table-toolbar ds-select,\n.table-toolbar ds-table-group,\n.table-toolbar ds-table-sort {\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n  --ds-choice-popup-min-inline-size: var(--dimension-menu-width-xs);\n}\n\n.table-toolbar__trailing > * {\n  flex: 0 0 auto;\n}\n\n.table-toolbar__start slot,\n.table-toolbar__search slot,\n.table-toolbar__leading slot,\n.table-toolbar__trailing slot {\n  display: contents;\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nconst TABLE_TOOLBAR_SLOT_START = 1 << 0;\nconst TABLE_TOOLBAR_SLOT_SEARCH = 1 << 1;\nconst TABLE_TOOLBAR_SLOT_LEADING = 1 << 2;\nconst TABLE_TOOLBAR_SLOT_TRAILING = 1 << 3;\n\n@Component({\n  tag: 'ds-table-toolbar',\n  styleUrl: 'TableToolbar.css',\n  scoped: true,\n})\nexport class TableToolbar {\n  @Element() el!: HTMLElement;\n\n  /** Accessible name for the grouped table controls. */\n  @Prop() label: string = 'Table controls';\n\n  @State() private slotPresence = 0;\n\n  componentWillLoad(): void {\n    this.syncSlotPresence();\n  }\n\n  private hasOwnedSlot(name: string): boolean {\n    return Array.from(this.el.querySelectorAll<HTMLElement>(`[slot=\"${name}\"]`)).some(\n      element => element.closest('ds-table-toolbar') === this.el\n    );\n  }\n\n  private syncSlotPresence = () => {\n    let presence = 0;\n    if (this.hasOwnedSlot('start')) presence |= TABLE_TOOLBAR_SLOT_START;\n    if (this.hasOwnedSlot('search')) presence |= TABLE_TOOLBAR_SLOT_SEARCH;\n    if (this.hasOwnedSlot('leading')) presence |= TABLE_TOOLBAR_SLOT_LEADING;\n    if (this.hasOwnedSlot('trailing')) presence |= TABLE_TOOLBAR_SLOT_TRAILING;\n    if (presence !== this.slotPresence) this.slotPresence = presence;\n  };\n\n  render() {\n    const hasStart = (this.slotPresence & TABLE_TOOLBAR_SLOT_START) !== 0;\n    const hasSearch = (this.slotPresence & TABLE_TOOLBAR_SLOT_SEARCH) !== 0;\n    const hasLeading = (this.slotPresence & TABLE_TOOLBAR_SLOT_LEADING) !== 0;\n    const hasTrailing = (this.slotPresence & TABLE_TOOLBAR_SLOT_TRAILING) !== 0;\n\n    return (\n      <Host>\n        <div class=\"table-toolbar\" role=\"toolbar\" aria-label={this.label}>\n          <div\n            class={{\n              'table-toolbar__start': true,\n              'table-toolbar__slot--empty': !hasStart,\n            }}\n          >\n            <slot name=\"start\" onSlotchange={this.syncSlotPresence} />\n          </div>\n          <ds-divider\n            class={{\n              'table-toolbar__rule': true,\n              'table-toolbar__slot--empty': !hasStart,\n            }}\n            orientation=\"vertical\"\n            length=\"32px\"\n          />\n          <div\n            class={{\n              'table-toolbar__search': true,\n              'table-toolbar__slot--empty': !hasSearch,\n            }}\n          >\n            <slot name=\"search\" onSlotchange={this.syncSlotPresence} />\n          </div>\n          <div\n            class={{\n              'table-toolbar__leading': true,\n              'table-toolbar__slot--empty': !hasLeading,\n            }}\n          >\n            <slot name=\"leading\" onSlotchange={this.syncSlotPresence} />\n          </div>\n          <div\n            class={{\n              'table-toolbar__trailing': true,\n              'table-toolbar__slot--empty': !hasTrailing,\n            }}\n          >\n            <slot name=\"trailing\" onSlotchange={this.syncSlotPresence} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAkB,IAAM,0wECE9B,MAAMC,EAA2B,GAAK,EACtC,MAAMC,EAA4B,GAAK,EACvC,MAAMC,EAA6B,GAAK,EACxC,MAAMC,EAA8B,GAAK,E,MAO5BC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,4CASUC,KAAAC,MAAgB,iBAEPD,KAAAE,aAAe,EAYxBF,KAAAG,iBAAmB,KACzB,IAAIC,EAAW,EACf,GAAIJ,KAAKK,aAAa,SAAUD,GAAYb,EAC5C,GAAIS,KAAKK,aAAa,UAAWD,GAAYZ,EAC7C,GAAIQ,KAAKK,aAAa,WAAYD,GAAYX,EAC9C,GAAIO,KAAKK,aAAa,YAAaD,GAAYV,EAC/C,GAAIU,IAAaJ,KAAKE,aAAcF,KAAKE,aAAeE,CAAQ,CAwDnE,CAxEC,iBAAAE,GACEN,KAAKG,kB,CAGC,YAAAE,CAAaE,GACnB,OAAOC,MAAMC,KAAKT,KAAKU,GAAGC,iBAA8B,UAAUJ,QAAWK,MAC3EC,GAAWA,EAAQC,QAAQ,sBAAwBd,KAAKU,I,CAa5D,MAAAK,GACE,MAAMC,GAAYhB,KAAKE,aAAeX,KAA8B,EACpE,MAAM0B,GAAajB,KAAKE,aAAeV,KAA+B,EACtE,MAAM0B,GAAclB,KAAKE,aAAeT,KAAgC,EACxE,MAAM0B,GAAenB,KAAKE,aAAeR,KAAiC,EAE1E,OACE0B,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBAAgBC,KAAK,UAAS,aAAaxB,KAAKC,OACzDmB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,uBAAwB,KACxB,8BAA+BP,IAGjCI,EAAA,QAAAE,IAAA,2CAAMf,KAAK,QAAQkB,aAAczB,KAAKG,oBAExCiB,EAAA,cAAAE,IAAA,2CACEC,MAAO,CACL,sBAAuB,KACvB,8BAA+BP,GAEjCU,YAAY,WACZC,OAAO,SAETP,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,wBAAyB,KACzB,8BAA+BN,IAGjCG,EAAA,QAAAE,IAAA,2CAAMf,KAAK,SAASkB,aAAczB,KAAKG,oBAEzCiB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,yBAA0B,KAC1B,8BAA+BL,IAGjCE,EAAA,QAAAE,IAAA,2CAAMf,KAAK,UAAUkB,aAAczB,KAAKG,oBAE1CiB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,0BAA2B,KAC3B,8BAA+BJ,IAGjCC,EAAA,QAAAE,IAAA,2CAAMf,KAAK,WAAWkB,aAAczB,KAAKG,qB","ignoreList":[]}
+{"version":3,"names":["tableToolbarCss","TABLE_TOOLBAR_SLOT_START","TABLE_TOOLBAR_SLOT_SEARCH","TABLE_TOOLBAR_SLOT_LEADING","TABLE_TOOLBAR_SLOT_TRAILING","TableToolbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","label","borderless","slotPresence","syncSlotPresence","presence","hasOwnedSlot","componentWillLoad","name","Array","from","el","querySelectorAll","some","element","closest","render","hasStart","hasSearch","hasLeading","hasTrailing","h","Host","key","class","role","onSlotchange","orientation","length"],"sources":["src/wc/components/TableToolbar/TableToolbar.css?tag=ds-table-toolbar&encapsulation=scoped","src/wc/components/TableToolbar/TableToolbar.tsx"],"sourcesContent":[":host {\n  --ds-control-press-active-scale: var(--dimension-scale-default);\n\n  display: block;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n}\n\n/* A table caption owns overflow for the complete application + table control row. */\n:host([slot='header']) {\n  display: contents;\n  max-inline-size: none;\n}\n\n.table-toolbar {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  inline-size: 100%;\n  min-inline-size: 0;\n  gap: var(--dimension-space-100);\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n}\n\n:host([slot='header']) .table-toolbar {\n  display: contents;\n}\n\n.table-toolbar::-webkit-scrollbar {\n  display: none;\n}\n\n.table-toolbar__start,\n.table-toolbar__search,\n.table-toolbar__leading,\n.table-toolbar__trailing {\n  display: flex;\n  align-items: center;\n  min-inline-size: 0;\n  gap: var(--dimension-space-100);\n}\n\n.table-toolbar__start {\n  flex: 0 0 auto;\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n  overflow: hidden;\n}\n\n.table-toolbar__rule {\n  flex: 0 0 auto;\n}\n\n.table-toolbar__search {\n  flex: 1 1 0;\n  max-inline-size: none;\n  contain: inline-size;\n}\n\n.table-toolbar__slot--empty {\n  display: none;\n}\n\n.table-toolbar__leading {\n  flex: 0 0 auto;\n}\n\n.table-toolbar__trailing {\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n}\n\n.table-toolbar__trailing > *,\n.table-toolbar [slot='start'],\n.table-toolbar ds-table-filter,\n.table-toolbar ds-filter-menu,\n.table-toolbar ds-select,\n.table-toolbar ds-table-group,\n.table-toolbar ds-table-sort {\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n  --ds-choice-popup-min-inline-size: var(--dimension-menu-width-xs);\n}\n\n.table-toolbar__trailing > * {\n  flex: 0 0 auto;\n}\n\n.table-toolbar__start slot,\n.table-toolbar__search slot,\n.table-toolbar__leading slot,\n.table-toolbar__trailing slot {\n  display: contents;\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nconst TABLE_TOOLBAR_SLOT_START = 1 << 0;\nconst TABLE_TOOLBAR_SLOT_SEARCH = 1 << 1;\nconst TABLE_TOOLBAR_SLOT_LEADING = 1 << 2;\nconst TABLE_TOOLBAR_SLOT_TRAILING = 1 << 3;\n\n@Component({\n  tag: 'ds-table-toolbar',\n  styleUrl: 'TableToolbar.css',\n  scoped: true,\n})\nexport class TableToolbar {\n  @Element() el!: HTMLElement;\n\n  /** Accessible name for the grouped table controls. */\n  @Prop() label: string = 'Table controls';\n\n  /** Use separators between regions when composing borderless controls. */\n  @Prop() borderless: boolean = false;\n\n  @State() private slotPresence = 0;\n\n  componentWillLoad(): void {\n    this.syncSlotPresence();\n  }\n\n  private hasOwnedSlot(name: string): boolean {\n    return Array.from(this.el.querySelectorAll<HTMLElement>(`[slot=\"${name}\"]`)).some(\n      element => element.closest('ds-table-toolbar') === this.el\n    );\n  }\n\n  private syncSlotPresence = () => {\n    let presence = 0;\n    if (this.hasOwnedSlot('start')) presence |= TABLE_TOOLBAR_SLOT_START;\n    if (this.hasOwnedSlot('search')) presence |= TABLE_TOOLBAR_SLOT_SEARCH;\n    if (this.hasOwnedSlot('leading')) presence |= TABLE_TOOLBAR_SLOT_LEADING;\n    if (this.hasOwnedSlot('trailing')) presence |= TABLE_TOOLBAR_SLOT_TRAILING;\n    if (presence !== this.slotPresence) this.slotPresence = presence;\n  };\n\n  render() {\n    const hasStart = (this.slotPresence & TABLE_TOOLBAR_SLOT_START) !== 0;\n    const hasSearch = (this.slotPresence & TABLE_TOOLBAR_SLOT_SEARCH) !== 0;\n    const hasLeading = (this.slotPresence & TABLE_TOOLBAR_SLOT_LEADING) !== 0;\n    const hasTrailing = (this.slotPresence & TABLE_TOOLBAR_SLOT_TRAILING) !== 0;\n\n    return (\n      <Host>\n        <div class=\"table-toolbar\" role=\"toolbar\" aria-label={this.label}>\n          <div\n            class={{\n              'table-toolbar__start': true,\n              'table-toolbar__slot--empty': !hasStart,\n            }}\n          >\n            <slot name=\"start\" onSlotchange={this.syncSlotPresence} />\n          </div>\n          <ds-divider\n            class={{\n              'table-toolbar__rule': true,\n              'table-toolbar__slot--empty':\n                !this.borderless || !hasStart || !(hasSearch || hasLeading || hasTrailing),\n            }}\n            orientation=\"vertical\"\n            length=\"var(--dimension-space-250)\"\n          />\n          <div\n            class={{\n              'table-toolbar__search': true,\n              'table-toolbar__slot--empty': !hasSearch,\n            }}\n          >\n            <slot name=\"search\" onSlotchange={this.syncSlotPresence} />\n          </div>\n          <ds-divider\n            class={{\n              'table-toolbar__rule': true,\n              'table-toolbar__slot--empty':\n                !this.borderless || !hasSearch || !(hasLeading || hasTrailing),\n            }}\n            orientation=\"vertical\"\n            length=\"var(--dimension-space-250)\"\n          />\n          <div\n            class={{\n              'table-toolbar__leading': true,\n              'table-toolbar__slot--empty': !hasLeading,\n            }}\n          >\n            <slot name=\"leading\" onSlotchange={this.syncSlotPresence} />\n          </div>\n          <div\n            class={{\n              'table-toolbar__trailing': true,\n              'table-toolbar__slot--empty': !hasTrailing,\n            }}\n          >\n            <slot name=\"trailing\" onSlotchange={this.syncSlotPresence} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAkB,IAAM,0wECE9B,MAAMC,EAA2B,GAAK,EACtC,MAAMC,EAA4B,GAAK,EACvC,MAAMC,EAA6B,GAAK,EACxC,MAAMC,EAA8B,GAAK,E,MAO5BC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,4CASUC,KAAAC,MAAgB,iBAGhBD,KAAAE,WAAsB,MAEbF,KAAAG,aAAe,EAYxBH,KAAAI,iBAAmB,KACzB,IAAIC,EAAW,EACf,GAAIL,KAAKM,aAAa,SAAUD,GAAYd,EAC5C,GAAIS,KAAKM,aAAa,UAAWD,GAAYb,EAC7C,GAAIQ,KAAKM,aAAa,WAAYD,GAAYZ,EAC9C,GAAIO,KAAKM,aAAa,YAAaD,GAAYX,EAC/C,GAAIW,IAAaL,KAAKG,aAAcH,KAAKG,aAAeE,CAAQ,CAkEnE,CAlFC,iBAAAE,GACEP,KAAKI,kB,CAGC,YAAAE,CAAaE,GACnB,OAAOC,MAAMC,KAAKV,KAAKW,GAAGC,iBAA8B,UAAUJ,QAAWK,MAC3EC,GAAWA,EAAQC,QAAQ,sBAAwBf,KAAKW,I,CAa5D,MAAAK,GACE,MAAMC,GAAYjB,KAAKG,aAAeZ,KAA8B,EACpE,MAAM2B,GAAalB,KAAKG,aAAeX,KAA+B,EACtE,MAAM2B,GAAcnB,KAAKG,aAAeV,KAAgC,EACxE,MAAM2B,GAAepB,KAAKG,aAAeT,KAAiC,EAE1E,OACE2B,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBAAgBC,KAAK,UAAS,aAAazB,KAAKC,OACzDoB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,uBAAwB,KACxB,8BAA+BP,IAGjCI,EAAA,QAAAE,IAAA,2CAAMf,KAAK,QAAQkB,aAAc1B,KAAKI,oBAExCiB,EAAA,cAAAE,IAAA,2CACEC,MAAO,CACL,sBAAuB,KACvB,8BACGxB,KAAKE,aAAee,KAAcC,GAAaC,GAAcC,IAElEO,YAAY,WACZC,OAAO,+BAETP,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,wBAAyB,KACzB,8BAA+BN,IAGjCG,EAAA,QAAAE,IAAA,2CAAMf,KAAK,SAASkB,aAAc1B,KAAKI,oBAEzCiB,EAAA,cAAAE,IAAA,2CACEC,MAAO,CACL,sBAAuB,KACvB,8BACGxB,KAAKE,aAAegB,KAAeC,GAAcC,IAEtDO,YAAY,WACZC,OAAO,+BAETP,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,yBAA0B,KAC1B,8BAA+BL,IAGjCE,EAAA,QAAAE,IAAA,2CAAMf,KAAK,UAAUkB,aAAc1B,KAAKI,oBAE1CiB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,0BAA2B,KAC3B,8BAA+BJ,IAGjCC,EAAA,QAAAE,IAAA,2CAAMf,KAAK,WAAWkB,aAAc1B,KAAKI,qB","ignoreList":[]}