apex-grid 3.3.0 → 3.5.0

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.
Files changed (132) hide show
  1. package/CHANGELOG.md +143 -0
  2. package/README.md +74 -6
  3. package/components/cell.d.ts +2 -2
  4. package/components/cell.js +30 -2
  5. package/components/cell.js.map +1 -1
  6. package/components/filter-row.js +65 -6
  7. package/components/filter-row.js.map +1 -1
  8. package/components/grid.d.ts +132 -0
  9. package/components/grid.js +59 -2
  10. package/components/grid.js.map +1 -1
  11. package/components/header-row.js +8 -0
  12. package/components/header-row.js.map +1 -1
  13. package/components/header.js +85 -12
  14. package/components/header.js.map +1 -1
  15. package/components/row.js +32 -4
  16. package/components/row.js.map +1 -1
  17. package/components/virtualizer.d.ts +5 -1
  18. package/components/virtualizer.js +72 -2
  19. package/components/virtualizer.js.map +1 -1
  20. package/controllers/expansion.js +4 -4
  21. package/controllers/expansion.js.map +1 -1
  22. package/controllers/filter.js +11 -0
  23. package/controllers/filter.js.map +1 -1
  24. package/controllers/history.js +11 -4
  25. package/controllers/history.js.map +1 -1
  26. package/controllers/navigation.d.ts +35 -2
  27. package/controllers/navigation.js +102 -8
  28. package/controllers/navigation.js.map +1 -1
  29. package/controllers/pagination.js +1 -1
  30. package/controllers/pagination.js.map +1 -1
  31. package/controllers/reorder.js +4 -2
  32. package/controllers/reorder.js.map +1 -1
  33. package/controllers/row-pin.js +2 -2
  34. package/controllers/row-pin.js.map +1 -1
  35. package/controllers/row-reorder.js +6 -6
  36. package/controllers/row-reorder.js.map +1 -1
  37. package/controllers/selection.js +3 -3
  38. package/controllers/selection.js.map +1 -1
  39. package/controllers/sort.js +4 -2
  40. package/controllers/sort.js.map +1 -1
  41. package/controllers/state.d.ts +9 -3
  42. package/controllers/state.js +11 -1
  43. package/controllers/state.js.map +1 -1
  44. package/custom-elements.json +664 -190
  45. package/docs/assets/hierarchy.js +1 -1
  46. package/docs/assets/navigation.js +1 -1
  47. package/docs/assets/search.js +1 -1
  48. package/docs/classes/ApexGrid.html +586 -0
  49. package/docs/classes/ApexGridPaginator.html +36 -0
  50. package/docs/classes/ApexGridToolbar.html +67 -0
  51. package/docs/functions/localize.html +2 -2
  52. package/docs/functions/setup.html +1 -2
  53. package/docs/hierarchy.html +1 -1
  54. package/docs/index.html +94 -6
  55. package/docs/interfaces/ApexCellValidationFailedEvent.html +1 -1
  56. package/docs/interfaces/ApexCellValueChangedEvent.html +1 -1
  57. package/docs/interfaces/ApexCellValueChangingEvent.html +2 -2
  58. package/docs/interfaces/ApexColumnMovedEvent.html +2 -2
  59. package/docs/interfaces/ApexColumnMovingEvent.html +1 -1
  60. package/docs/interfaces/ApexDetailContext.html +2 -2
  61. package/docs/interfaces/ApexGridEventMap.html +5 -5
  62. package/docs/interfaces/ApexRowMovingEvent.html +1 -1
  63. package/docs/interfaces/ApexRowPinningEvent.html +1 -1
  64. package/docs/interfaces/BaseApexCellContext.html +1 -1
  65. package/docs/interfaces/BaseApexEditorContext.html +1 -1
  66. package/docs/interfaces/BaseColumnConfiguration.html +3 -3
  67. package/docs/interfaces/CSVExportOptions.html +2 -2
  68. package/docs/interfaces/DataPipelineConfiguration.html +2 -2
  69. package/docs/interfaces/EditingHistoryConfiguration.html +1 -1
  70. package/docs/interfaces/ExportFormat.html +2 -2
  71. package/docs/interfaces/ExportOptions.html +1 -1
  72. package/docs/interfaces/GridRowPinningConfiguration.html +1 -1
  73. package/docs/interfaces/GridRowReorderingConfiguration.html +2 -2
  74. package/docs/interfaces/PaginationConfiguration.html +1 -1
  75. package/docs/interfaces/PaginationState.html +1 -1
  76. package/docs/media/_tokens.scss +29 -8
  77. package/docs/media/package.json +4 -5
  78. package/docs/media/state-persistence.html +0 -10
  79. package/docs/modules.html +1 -1
  80. package/docs/types/DataPipelineParams.html +2 -2
  81. package/docs/types/EditMode.html +2 -2
  82. package/docs/types/GridLocaleText.html +1 -1
  83. package/docs/types/PaginationMode.html +1 -1
  84. package/docs/variables/EN_LOCALE.html +3 -3
  85. package/docs/variables/esLocale.html +1 -1
  86. package/i18n/en.d.ts +109 -1
  87. package/i18n/en.js +109 -1
  88. package/i18n/en.js.map +1 -1
  89. package/i18n/es.js +109 -1
  90. package/i18n/es.js.map +1 -1
  91. package/index.d.ts +2 -0
  92. package/index.js +2 -0
  93. package/index.js.map +1 -1
  94. package/internal/column-types.js +1 -1
  95. package/internal/column-types.js.map +1 -1
  96. package/internal/feature-module.d.ts +22 -0
  97. package/internal/feature-module.js +5 -0
  98. package/internal/feature-module.js.map +1 -1
  99. package/internal/index.d.ts +2 -2
  100. package/internal/index.js +1 -1
  101. package/internal/index.js.map +1 -1
  102. package/internal/utils.d.ts +14 -0
  103. package/internal/utils.js +5 -0
  104. package/internal/utils.js.map +1 -1
  105. package/package.json +1 -2
  106. package/setup.d.ts +12 -11
  107. package/setup.js +12 -4
  108. package/setup.js.map +1 -1
  109. package/styles/_common.css.js +1 -1
  110. package/styles/_common.css.js.map +1 -1
  111. package/styles/_tokens.css.js +1 -1
  112. package/styles/_tokens.css.js.map +1 -1
  113. package/styles/body-cell/body-cell.css.js +1 -1
  114. package/styles/body-cell/body-cell.css.js.map +1 -1
  115. package/styles/body-row/body-row.css.js +1 -1
  116. package/styles/body-row/body-row.css.js.map +1 -1
  117. package/styles/filter-row/filter-row.css.js +1 -1
  118. package/styles/filter-row/filter-row.css.js.map +1 -1
  119. package/styles/grid/_grid.base.css.js +1 -1
  120. package/styles/grid/_grid.base.css.js.map +1 -1
  121. package/styles/grid/grid.css.js +1 -1
  122. package/styles/grid/grid.css.js.map +1 -1
  123. package/styles/group-header-row/group-header-row.css.js +1 -1
  124. package/styles/group-header-row/group-header-row.css.js.map +1 -1
  125. package/styles/header-cell/header-cell.css.js +1 -1
  126. package/styles/header-cell/header-cell.css.js.map +1 -1
  127. package/styles/header-row/header-row.base.css.js +1 -1
  128. package/styles/header-row/header-row.base.css.js.map +1 -1
  129. package/styles/paginator/paginator.css.js +1 -1
  130. package/styles/paginator/paginator.css.js.map +1 -1
  131. package/styles/toolbar/toolbar.css.js +1 -1
  132. package/styles/toolbar/toolbar.css.js.map +1 -1
package/docs/classes/ApexGridPaginator.html ADDED
@@ -0,0 +1,36 @@
1
+ <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>ApexGridPaginator | apex-grid</title><meta name="description" content="Documentation for apex-grid"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">apex-grid</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">ApexGridPaginator</a></li></ul><h1>Class ApexGridPaginator&lt;T&gt;</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Pagination toolbar rendered beneath the grid body.</p>
2
+ </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks">Remarks<a href="#remarks" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Drives PaginationController on the host grid. The component is purely
3
+ presentational — page transitions go through the controller so they emit the
4
+ cancellable <code>pageChanging</code> event and the post-update <code>pageChanged</code> event.</p>
5
+ </div><div class="tsd-tag-element"><h4 class="tsd-anchor-link" id="element">Element<a href="#element" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>apex-grid-paginator</p>
6
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart">Csspart<a href="#csspart" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>paginator - The root container.</p>
7
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-1">Csspart<a href="#csspart-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>paginator-size - The page-size selector wrapper.</p>
8
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-2">Csspart<a href="#csspart-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>paginator-info - The &quot;1–25 of 100&quot; status label.</p>
9
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-3">Csspart<a href="#csspart-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>paginator-controls - The first/prev/next/last button cluster.</p>
10
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-4">Csspart<a href="#csspart-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>paginator-page - The &quot;Page X of N&quot; status label.</p>
11
+ </div></div></section><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="t"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span></li></ul></section><section class="tsd-panel tsd-hierarchy" data-refl="504"><h4>Hierarchy</h4><ul class="tsd-hierarchy"><li class="tsd-hierarchy-item"><span class="tsd-signature-type">LitElement</span><ul class="tsd-hierarchy"><li class="tsd-hierarchy-item"><span class="tsd-hierarchy-target">ApexGridPaginator</span></li></ul></li></ul></section><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h5 class="tsd-index-heading uppercase">Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Other</h3><div class="tsd-index-list"><a href="#pagesizelabel" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>page<wbr/>Size<wbr/>Label?</span></a>
12
+ <a href="#pagesizeoptions" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>page<wbr/>Size<wbr/>Options</span></a>
13
+ <a href="#register" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>register</span></a>
14
+ </div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">styles</h3><div class="tsd-index-list"><a href="#styles" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>styles</span></a>
15
+ </div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Other"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Other</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="pagesizelabel"><code class="tsd-tag">Optional</code><span>page<wbr/>Size<wbr/>Label</span><a href="#pagesizelabel" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">pageSizeLabel</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>Accessible label for the rows-per-page selector.</p>
16
+ </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-1">Remarks<a href="#remarks-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>When unset, falls back to the grid's localized <code>pagination.rowsPerPage</code>
17
+ text (see <a href="ApexGrid.html#localetext" class="tsd-kind-property">ApexGrid.localeText</a>).</p>
18
+ </div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="pagesizeoptions"><span>page<wbr/>Size<wbr/>Options</span><a href="#pagesizeoptions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">pageSizeOptions</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> = ...</span></div><div class="tsd-comment tsd-typography"><p>The page-size choices rendered in the rows-per-page selector.</p>
19
+ </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-2">Remarks<a href="#remarks-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Defaults to <code>[10, 25, 50, 100]</code>.</p>
20
+ </div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="register"><code class="tsd-tag">Static</code><span>register</span><a href="#register" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="register-1"><span class="tsd-kind-call-signature">register</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#register-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Registers the <code>&lt;apex-grid-paginator&gt;</code> element and its dependencies. Idempotent.</p>
21
+ </div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></div></li></ul></section></section></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-styles"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>styles</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="styles"><code class="tsd-tag">Static</code><span>styles</span><a href="#styles" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">styles</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CSSResult</span><span class="tsd-signature-symbol"> = styles</span></div><div class="tsd-comment tsd-typography"><p>Array of styles to apply to the element. The styles should be defined
22
+ using the css tag function, via constructible stylesheets, or
23
+ imported from native CSS module scripts.</p>
24
+ <p>Note on Content Security Policy:</p>
25
+ <p>Element styles are implemented with <code>&lt;style&gt;</code> tags when the browser doesn't
26
+ support adopted StyleSheets. To use such <code>&lt;style&gt;</code> tags with the style-src
27
+ CSP directive, the style-src value must either include 'unsafe-inline' or
28
+ <code>nonce-&lt;base64-value&gt;</code> with <code>&lt;base64-value&gt;</code> replaced be a server-generated
29
+ nonce.</p>
30
+ <p>To provide a nonce to use on generated <code>&lt;style&gt;</code> elements, set
31
+ <code>window.litNonce</code> to a server-generated nonce in your page's HTML, before
32
+ loading application code:</p>
33
+ <pre><code class="html"><span class="hl-9">&lt;</span><span class="hl-10">script</span><span class="hl-9">&gt;</span><br/><span class="hl-11"> </span><span class="hl-15">// Generated and unique per request:</span><br/><span class="hl-11"> </span><span class="hl-2">window</span><span class="hl-11">.</span><span class="hl-2">litNonce</span><span class="hl-11"> </span><span class="hl-1">=</span><span class="hl-11"> </span><span class="hl-3">&#39;a1b2c3d4&#39;</span><span class="hl-11">;</span><br/><span class="hl-9">&lt;/</span><span class="hl-10">script</span><span class="hl-9">&gt;</span>
34
+ </code><button type="button">Copy</button></pre>
35
+
36
+ </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-nocollapse"><h4 class="tsd-anchor-link" id="nocollapse">Nocollapse<a href="#nocollapse" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4></div></div><aside class="tsd-sources"><p>Overrides LitElement.styles</p></aside></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Other"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Other</summary><div><a href="#pagesizelabel"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>page<wbr/>Size<wbr/>Label</span></a><a href="#pagesizeoptions"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>page<wbr/>Size<wbr/>Options</span></a><a href="#register"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>register</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-styles"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>styles</summary><div><a href="#styles"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>styles</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">apex-grid</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
package/docs/classes/ApexGridToolbar.html ADDED
@@ -0,0 +1,67 @@
1
+ <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>ApexGridToolbar | apex-grid</title><meta name="description" content="Documentation for apex-grid"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">apex-grid</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">ApexGridToolbar</a></li></ul><h1>Class ApexGridToolbar&lt;T&gt;</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Toolbar shown above the grid's header row. Hosts opt-in toolbar features
2
+ such as the quick-filter (global search) input and the export menu.</p>
3
+ </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-element"><h4 class="tsd-anchor-link" id="element">Element<a href="#element" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>apex-grid-toolbar</p>
4
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart">Csspart<a href="#csspart" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>toolbar - The toolbar's container element.</p>
5
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-1">Csspart<a href="#csspart-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>toolbar-search - The quick-filter input wrapper.</p>
6
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-2">Csspart<a href="#csspart-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>search-field - The bordered field containing the icon + input.</p>
7
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-3">Csspart<a href="#csspart-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>search-icon - The leading search icon.</p>
8
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-4">Csspart<a href="#csspart-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>search-input - The text input itself.</p>
9
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-5">Csspart<a href="#csspart-5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>toolbar-actions - The trailing actions area (right side).</p>
10
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-6">Csspart<a href="#csspart-6" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>toolbar-action - A custom host-contributed action button (e.g. &quot;Create chart&quot;).</p>
11
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-7">Csspart<a href="#csspart-7" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>export-trigger - The export menu trigger button.</p>
12
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-8">Csspart<a href="#csspart-8" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>export-menu - The dropdown menu containing export options.</p>
13
+ </div><div class="tsd-tag-csspart"><h4 class="tsd-anchor-link" id="csspart-9">Csspart<a href="#csspart-9" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>export-menu-item - A single menu item inside the export dropdown.</p>
14
+ </div></div></section><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="t"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span></li></ul></section><section class="tsd-panel tsd-hierarchy" data-refl="546"><h4>Hierarchy</h4><ul class="tsd-hierarchy"><li class="tsd-hierarchy-item"><span class="tsd-signature-type">LitElement</span><ul class="tsd-hierarchy"><li class="tsd-hierarchy-item"><span class="tsd-hierarchy-target">ApexGridToolbar</span></li></ul></li></ul></section><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h5 class="tsd-index-heading uppercase">Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Other</h3><div class="tsd-index-list"><a href="#debounce" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>debounce</span></a>
15
+ <a href="#exportfilename" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>export<wbr/>Filename</span></a>
16
+ <a href="#placeholder" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>placeholder</span></a>
17
+ <a href="#showexport" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>show<wbr/>Export</span></a>
18
+ <a href="#showquickfilter" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>show<wbr/>Quick<wbr/>Filter</span></a>
19
+ <a href="#value" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>value</span></a>
20
+ <a href="#register" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>register</span></a>
21
+ </div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">lifecycle</h3><div class="tsd-index-list"><a href="#connectedcallback" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>connected<wbr/>Callback</span></a>
22
+ <a href="#disconnectedcallback" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>disconnected<wbr/>Callback</span></a>
23
+ </div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">styles</h3><div class="tsd-index-list"><a href="#styles" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>styles</span></a>
24
+ </div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Other"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Other</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="debounce"><span>debounce</span><a href="#debounce" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">debounce</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = 200</span></div><div class="tsd-comment tsd-typography"><p>Debounce window (ms) before <a href="ApexGrid.html#quickfilter" class="tsd-kind-property">ApexGrid.quickFilter</a> updates.</p>
25
+ </div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="exportfilename"><span>export<wbr/>Filename</span><a href="#exportfilename" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">exportFilename</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = &#39;data&#39;</span></div><div class="tsd-comment tsd-typography"><p>Optional override filename (without extension) for exports.</p>
26
+ </div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="placeholder"><span>placeholder</span><a href="#placeholder" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">placeholder</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = &#39;&#39;</span></div><div class="tsd-comment tsd-typography"><p>The placeholder rendered in the search input.</p>
27
+ </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks">Remarks<a href="#remarks" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>When unset, falls back to the grid's localized <code>toolbar.searchPlaceholder</code>
28
+ text (see <a href="ApexGrid.html#localetext" class="tsd-kind-property">ApexGrid.localeText</a>).</p>
29
+ </div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="showexport"><span>show<wbr/>Export</span><a href="#showexport" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">showExport</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></div><div class="tsd-comment tsd-typography"><p>Whether to render the export menu trigger. Driven by the parent grid.</p>
30
+ </div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="showquickfilter"><span>show<wbr/>Quick<wbr/>Filter</span><a href="#showquickfilter" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">showQuickFilter</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = true</span></div><div class="tsd-comment tsd-typography"><p>Whether to render the quick-filter input. Driven by the parent grid.</p>
31
+ </div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="value"><span>value</span><a href="#value" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">value</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = &#39;&#39;</span></div><div class="tsd-comment tsd-typography"><p>The current quick-filter value, mirrored from <a href="ApexGrid.html#quickfilter" class="tsd-kind-property">ApexGrid.quickFilter</a>.</p>
32
+ </div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="register"><code class="tsd-tag">Static</code><span>register</span><a href="#register" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="register-1"><span class="tsd-kind-call-signature">register</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#register-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Registers the <code>&lt;apex-grid-toolbar&gt;</code> element. Idempotent.</p>
33
+ </div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></div></li></ul></section></section></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-lifecycle"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>lifecycle</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="connectedcallback"><span>connected<wbr/>Callback</span><a href="#connectedcallback" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="connectedcallback-1"><span class="tsd-kind-call-signature">connectedCallback</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#connectedcallback-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Invoked when the component is added to the document's DOM.</p>
34
+ <p>In <code>connectedCallback()</code> you should setup tasks that should only occur when
35
+ the element is connected to the document. The most common of these is
36
+ adding event listeners to nodes external to the element, like a keydown
37
+ event handler added to the window.</p>
38
+ <pre><code class="ts"><span class="hl-4">connectedCallback</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-5">super</span><span class="hl-1">.</span><span class="hl-4">connectedCallback</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-4">addEventListener</span><span class="hl-1">(</span><span class="hl-3">&#39;keydown&#39;</span><span class="hl-1">, </span><span class="hl-5">this</span><span class="hl-1">.</span><span class="hl-2">_handleKeydown</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
39
+ </code><button type="button">Copy</button></pre>
40
+
41
+ <p>Typically, anything done in <code>connectedCallback()</code> should be undone when the
42
+ element is disconnected, in <code>disconnectedCallback()</code>.</p>
43
+ </div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources"><p>Overrides LitElement.connectedCallback</p></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="disconnectedcallback"><span>disconnected<wbr/>Callback</span><a href="#disconnectedcallback" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="disconnectedcallback-1"><span class="tsd-kind-call-signature">disconnectedCallback</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#disconnectedcallback-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Invoked when the component is removed from the document's DOM.</p>
44
+ <p>This callback is the main signal to the element that it may no longer be
45
+ used. <code>disconnectedCallback()</code> should ensure that nothing is holding a
46
+ reference to the element (such as event listeners added to nodes external
47
+ to the element), so that it is free to be garbage collected.</p>
48
+ <pre><code class="ts"><span class="hl-4">disconnectedCallback</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-5">super</span><span class="hl-1">.</span><span class="hl-4">disconnectedCallback</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-2">window</span><span class="hl-1">.</span><span class="hl-4">removeEventListener</span><span class="hl-1">(</span><span class="hl-3">&#39;keydown&#39;</span><span class="hl-1">, </span><span class="hl-5">this</span><span class="hl-1">.</span><span class="hl-2">_handleKeydown</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
49
+ </code><button type="button">Copy</button></pre>
50
+
51
+ <p>An element may be re-connected after being disconnected.</p>
52
+ </div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources"><p>Overrides LitElement.disconnectedCallback</p></aside></div></li></ul></section></section></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-styles"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>styles</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="styles"><code class="tsd-tag">Static</code><span>styles</span><a href="#styles" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">styles</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CSSResult</span><span class="tsd-signature-symbol"> = styles</span></div><div class="tsd-comment tsd-typography"><p>Array of styles to apply to the element. The styles should be defined
53
+ using the css tag function, via constructible stylesheets, or
54
+ imported from native CSS module scripts.</p>
55
+ <p>Note on Content Security Policy:</p>
56
+ <p>Element styles are implemented with <code>&lt;style&gt;</code> tags when the browser doesn't
57
+ support adopted StyleSheets. To use such <code>&lt;style&gt;</code> tags with the style-src
58
+ CSP directive, the style-src value must either include 'unsafe-inline' or
59
+ <code>nonce-&lt;base64-value&gt;</code> with <code>&lt;base64-value&gt;</code> replaced be a server-generated
60
+ nonce.</p>
61
+ <p>To provide a nonce to use on generated <code>&lt;style&gt;</code> elements, set
62
+ <code>window.litNonce</code> to a server-generated nonce in your page's HTML, before
63
+ loading application code:</p>
64
+ <pre><code class="html"><span class="hl-9">&lt;</span><span class="hl-10">script</span><span class="hl-9">&gt;</span><br/><span class="hl-11"> </span><span class="hl-15">// Generated and unique per request:</span><br/><span class="hl-11"> </span><span class="hl-2">window</span><span class="hl-11">.</span><span class="hl-2">litNonce</span><span class="hl-11"> </span><span class="hl-1">=</span><span class="hl-11"> </span><span class="hl-3">&#39;a1b2c3d4&#39;</span><span class="hl-11">;</span><br/><span class="hl-9">&lt;/</span><span class="hl-10">script</span><span class="hl-9">&gt;</span>
65
+ </code><button type="button">Copy</button></pre>
66
+
67
+ </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-nocollapse"><h4 class="tsd-anchor-link" id="nocollapse">Nocollapse<a href="#nocollapse" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4></div></div><aside class="tsd-sources"><p>Overrides LitElement.styles</p></aside></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Other"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Other</summary><div><a href="#debounce"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>debounce</span></a><a href="#exportfilename"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>export<wbr/>Filename</span></a><a href="#placeholder"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>placeholder</span></a><a href="#showexport"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>show<wbr/>Export</span></a><a href="#showquickfilter"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>show<wbr/>Quick<wbr/>Filter</span></a><a href="#value"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>value</span></a><a href="#register"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>register</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-lifecycle"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>lifecycle</summary><div><a href="#connectedcallback"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>connected<wbr/>Callback</span></a><a href="#disconnectedcallback"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>disconnected<wbr/>Callback</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-styles"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>styles</summary><div><a href="#styles"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>styles</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">apex-grid</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>