@evotecit/canopyx 0.3.16 → 0.3.20

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 (150) hide show
  1. package/CanopyX.Html/Assets/canopyx-board.css +50 -0
  2. package/CanopyX.Html/Assets/canopyx-board.js +39 -0
  3. package/CanopyX.Html/Assets/canopyx-buckets.js +15 -0
  4. package/CanopyX.Html/Assets/canopyx-calculations.css +7 -0
  5. package/CanopyX.Html/Assets/canopyx-calculations.js +52 -0
  6. package/CanopyX.Html/Assets/canopyx-calendar-edit.js +3 -3
  7. package/CanopyX.Html/Assets/canopyx-calendar.css +74 -80
  8. package/CanopyX.Html/Assets/canopyx-calendar.js +26 -31
  9. package/CanopyX.Html/Assets/canopyx-cell-range.css +4 -4
  10. package/CanopyX.Html/Assets/canopyx-cell-range.js +16 -14
  11. package/CanopyX.Html/Assets/canopyx-changes.css +61 -79
  12. package/CanopyX.Html/Assets/canopyx-changes.js +18 -15
  13. package/CanopyX.Html/Assets/canopyx-column-groups.css +5 -1
  14. package/CanopyX.Html/Assets/canopyx-column-groups.js +15 -9
  15. package/CanopyX.Html/Assets/canopyx-compare.css +37 -0
  16. package/CanopyX.Html/Assets/canopyx-compare.js +12 -0
  17. package/CanopyX.Html/Assets/canopyx-data.js +3 -3
  18. package/CanopyX.Html/Assets/canopyx-detail-rows.css +4 -4
  19. package/CanopyX.Html/Assets/canopyx-detail-rows.js +1 -1
  20. package/CanopyX.Html/Assets/canopyx-editing.css +5 -5
  21. package/CanopyX.Html/Assets/canopyx-editing.js +2 -2
  22. package/CanopyX.Html/Assets/canopyx-enhance.js +5 -5
  23. package/CanopyX.Html/Assets/canopyx-export.js +54 -13
  24. package/CanopyX.Html/Assets/canopyx-facets.css +32 -22
  25. package/CanopyX.Html/Assets/canopyx-facets.js +19 -15
  26. package/CanopyX.Html/Assets/canopyx-filter-editor.css +75 -89
  27. package/CanopyX.Html/Assets/canopyx-filter-editor.js +20 -16
  28. package/CanopyX.Html/Assets/canopyx-flow-checks.css +3 -3
  29. package/CanopyX.Html/Assets/canopyx-flow-checks.js +1 -1
  30. package/CanopyX.Html/Assets/canopyx-flow-command.css +3 -3
  31. package/CanopyX.Html/Assets/canopyx-flow-command.js +1 -1
  32. package/CanopyX.Html/Assets/canopyx-flow-dialog.css +4 -4
  33. package/CanopyX.Html/Assets/canopyx-flow-dialog.js +1 -1
  34. package/CanopyX.Html/Assets/canopyx-flow-drafts.css +2 -2
  35. package/CanopyX.Html/Assets/canopyx-flow-drafts.js +1 -1
  36. package/CanopyX.Html/Assets/canopyx-flow-entry.css +142 -17
  37. package/CanopyX.Html/Assets/canopyx-flow-entry.js +5 -5
  38. package/CanopyX.Html/Assets/canopyx-flow-host.css +2 -2
  39. package/CanopyX.Html/Assets/canopyx-flow-host.js +1 -1
  40. package/CanopyX.Html/Assets/canopyx-flow-module.mjs +5 -5
  41. package/CanopyX.Html/Assets/canopyx-flow-pick.css +4 -4
  42. package/CanopyX.Html/Assets/canopyx-flow-pick.js +1 -1
  43. package/CanopyX.Html/Assets/canopyx-flow-preview.css +1 -1
  44. package/CanopyX.Html/Assets/canopyx-flow-preview.js +1 -1
  45. package/CanopyX.Html/Assets/canopyx-flow-records.css +2 -2
  46. package/CanopyX.Html/Assets/canopyx-flow-records.js +1 -1
  47. package/CanopyX.Html/Assets/canopyx-flow-tasks.css +4 -4
  48. package/CanopyX.Html/Assets/canopyx-flow-tasks.js +1 -1
  49. package/CanopyX.Html/Assets/canopyx-flow.css +41 -41
  50. package/CanopyX.Html/Assets/canopyx-flow.js +1 -1
  51. package/CanopyX.Html/Assets/canopyx-format-editor.css +9 -9
  52. package/CanopyX.Html/Assets/canopyx-format-editor.js +2 -2
  53. package/CanopyX.Html/Assets/canopyx-formatting.css +13 -13
  54. package/CanopyX.Html/Assets/canopyx-formatting.js +12 -11
  55. package/CanopyX.Html/Assets/canopyx-forms.css +3 -3
  56. package/CanopyX.Html/Assets/canopyx-forms.js +1 -1
  57. package/CanopyX.Html/Assets/canopyx-grid-module.mjs +220 -155
  58. package/CanopyX.Html/Assets/canopyx-grid-options.css +8 -8
  59. package/CanopyX.Html/Assets/canopyx-grid-options.js +9 -2
  60. package/CanopyX.Html/Assets/canopyx-grid.css +285 -150
  61. package/CanopyX.Html/Assets/canopyx-grid.js +220 -155
  62. package/CanopyX.Html/Assets/canopyx-grouping.css +23 -16
  63. package/CanopyX.Html/Assets/canopyx-grouping.js +24 -17
  64. package/CanopyX.Html/Assets/canopyx-highlight.css +10 -10
  65. package/CanopyX.Html/Assets/canopyx-highlight.js +1 -1
  66. package/CanopyX.Html/Assets/canopyx-interactive.css +215 -91
  67. package/CanopyX.Html/Assets/canopyx-interactive.js +47 -52
  68. package/CanopyX.Html/Assets/canopyx-labels-de.js +177 -9
  69. package/CanopyX.Html/Assets/canopyx-labels-es.js +177 -9
  70. package/CanopyX.Html/Assets/canopyx-labels-fr.js +176 -8
  71. package/CanopyX.Html/Assets/canopyx-labels-it.js +176 -8
  72. package/CanopyX.Html/Assets/canopyx-labels-pl.js +176 -8
  73. package/CanopyX.Html/Assets/canopyx-layouts.css +49 -21
  74. package/CanopyX.Html/Assets/canopyx-layouts.js +36 -14
  75. package/CanopyX.Html/Assets/canopyx-link.css +3 -3
  76. package/CanopyX.Html/Assets/canopyx-link.js +4 -4
  77. package/CanopyX.Html/Assets/canopyx-links.js +2 -2
  78. package/CanopyX.Html/Assets/canopyx-live.css +3 -5
  79. package/CanopyX.Html/Assets/canopyx-live.js +3 -3
  80. package/CanopyX.Html/Assets/canopyx-matrix.css +32 -39
  81. package/CanopyX.Html/Assets/canopyx-matrix.js +11 -11
  82. package/CanopyX.Html/Assets/canopyx-module.mjs +47 -52
  83. package/CanopyX.Html/Assets/canopyx-office-export.js +2936 -0
  84. package/CanopyX.Html/Assets/canopyx-pager.css +1 -1
  85. package/CanopyX.Html/Assets/canopyx-pager.js +1 -1
  86. package/CanopyX.Html/Assets/canopyx-path.css +45 -0
  87. package/CanopyX.Html/Assets/canopyx-path.js +28 -0
  88. package/CanopyX.Html/Assets/canopyx-pivot.css +75 -0
  89. package/CanopyX.Html/Assets/canopyx-pivot.js +72 -0
  90. package/CanopyX.Html/Assets/canopyx-plan.css +63 -0
  91. package/CanopyX.Html/Assets/canopyx-plan.js +71 -0
  92. package/CanopyX.Html/Assets/canopyx-presenters.js +2 -2
  93. package/CanopyX.Html/Assets/canopyx-record-panel.css +51 -45
  94. package/CanopyX.Html/Assets/canopyx-record-panel.js +30 -22
  95. package/CanopyX.Html/Assets/canopyx-reporting-module.mjs +262 -197
  96. package/CanopyX.Html/Assets/canopyx-reporting.css +300 -164
  97. package/CanopyX.Html/Assets/canopyx-reporting.js +262 -197
  98. package/CanopyX.Html/Assets/canopyx-stack.css +35 -0
  99. package/CanopyX.Html/Assets/canopyx-stack.js +24 -0
  100. package/CanopyX.Html/Assets/canopyx-time-slider.css +18 -0
  101. package/CanopyX.Html/Assets/canopyx-time-slider.js +27 -0
  102. package/CanopyX.Html/Assets/canopyx-timeline.css +19 -19
  103. package/CanopyX.Html/Assets/canopyx-timeline.js +6 -5
  104. package/CanopyX.Html/Assets/canopyx-tree-tools.css +47 -46
  105. package/CanopyX.Html/Assets/canopyx-tree-tools.js +15 -12
  106. package/CanopyX.Html/Assets/canopyx-ui-menu.css +41 -0
  107. package/CanopyX.Html/Assets/canopyx-ui-menu.js +64 -0
  108. package/CanopyX.Html/Assets/canopyx-ui-navigation.css +73 -0
  109. package/CanopyX.Html/Assets/canopyx-ui-navigation.js +39 -0
  110. package/CanopyX.Html/Assets/canopyx-ui-overlays.css +79 -0
  111. package/CanopyX.Html/Assets/canopyx-ui-overlays.js +45 -0
  112. package/CanopyX.Html/Assets/canopyx-ui-picker.css +12 -0
  113. package/CanopyX.Html/Assets/canopyx-ui-picker.js +6 -0
  114. package/CanopyX.Html/Assets/canopyx-ui-stepper.css +174 -0
  115. package/CanopyX.Html/Assets/canopyx-ui-stepper.js +48 -0
  116. package/CanopyX.Html/Assets/canopyx-ui-tabs.css +153 -0
  117. package/CanopyX.Html/Assets/canopyx-ui-tabs.js +47 -0
  118. package/CanopyX.Html/Assets/canopyx-values.css +5 -0
  119. package/CanopyX.Html/Assets/canopyx-values.js +13 -0
  120. package/CanopyX.Html/Assets/canopyx-view-intents.css +12 -0
  121. package/CanopyX.Html/Assets/canopyx-view-intents.js +56 -0
  122. package/CanopyX.Html/Assets/canopyx.css +212 -85
  123. package/CanopyX.Html/Assets/canopyx.js +38 -26
  124. package/JavaScript/board.d.ts +30 -0
  125. package/JavaScript/changes.d.ts +4 -1
  126. package/JavaScript/column-groups.d.ts +24 -4
  127. package/JavaScript/facets.d.ts +5 -3
  128. package/JavaScript/grid.d.ts +161 -17
  129. package/JavaScript/hosts.d.ts +16 -1
  130. package/JavaScript/index.d.ts +4 -2
  131. package/JavaScript/locales/de.mjs +177 -9
  132. package/JavaScript/locales/es.mjs +177 -9
  133. package/JavaScript/locales/fr.mjs +176 -8
  134. package/JavaScript/locales/it.mjs +176 -8
  135. package/JavaScript/locales/pl.mjs +176 -8
  136. package/JavaScript/matrix.d.ts +4 -1
  137. package/JavaScript/path.d.ts +33 -0
  138. package/JavaScript/pivot.d.ts +135 -0
  139. package/JavaScript/plan.d.ts +23 -0
  140. package/JavaScript/protocol.d.ts +18 -3
  141. package/JavaScript/records.d.ts +4 -0
  142. package/JavaScript/stack.d.ts +28 -0
  143. package/JavaScript/time-slider.d.ts +58 -0
  144. package/JavaScript/ui.d.ts +261 -0
  145. package/JavaScript/view-intents.d.ts +45 -0
  146. package/README.md +76 -187
  147. package/README.nuget.md +63 -87
  148. package/ThirdParty/OfficeIMO/LICENSE +21 -0
  149. package/ThirdParty/OfficeIMO/README.md +13 -0
  150. package/package.json +76 -3
package/CanopyX.Html/Assets/canopyx-facets.css CHANGED
@@ -5,66 +5,64 @@
5
5
  body.cx-page > .cx-facet-frame,body.cx-page > .cx-main > .cx-facet-frame{box-sizing:border-box;height:100vh;padding:12px 16px;}
6
6
  body.cx-page > .cx-facet-frame > .cx-data-grid,body.cx-page > .cx-main > .cx-facet-frame > .cx-data-grid{height:auto;min-height:0;}
7
7
  body.cx-page > .cx-facet-frame[data-cx-position="side"] > .cx-data-grid,body.cx-page > .cx-main > .cx-facet-frame[data-cx-position="side"] > .cx-data-grid{align-self:stretch;}
8
- .cx-facets.cx-host{height:auto;min-height:0;border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));overflow:hidden;}
8
+ .cx-facets.cx-host{height:auto;min-height:0;border:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));overflow:hidden;}
9
9
  .cx-facets.cx-host[hidden]{display:none;}
10
10
  .cx-facets[data-cx-position="side"]{flex:none;width:var(--cx-facets-w,260px);align-self:flex-start;display:flex;flex-direction:column;}
11
- .cx-facets-h{display:flex;align-items:center;gap:var(--cx-size-6px);min-height:var(--cx-size-44px);padding:var(--cx-size-6px) var(--cx-size-6px) var(--cx-size-6px) var(--cx-size-12px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
11
+ .cx-facets-h{display:flex;align-items:center;gap:var(--cx-size-6px);min-height:var(--cx-size-44px);padding:var(--cx-size-6px) var(--cx-size-6px) var(--cx-size-6px) var(--cx-size-12px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
12
12
  .cx-facets-title{flex:1;min-width:0;margin:0;font-size:var(--cx-size-14px);font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
13
- .cx-facets .cx-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--cx-size-6px);min-height:var(--cx-size-28px);padding:0 var(--cx-size-8px);border:var(--cx-size-1px) solid transparent;border-radius:var(--hfx-radius-sm,4px);background:transparent;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font:inherit;font-size:var(--cx-size-13px);cursor:pointer;}
14
- .cx-facets .cx-button:hover{background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
13
+ .cx-facets .cx-button{block-size:var(--hfx-control-height-sm,calc(28px - var(--cx-compact,0) * 4px));min-block-size:var(--hfx-control-height-sm,calc(28px - var(--cx-compact,0) * 4px));padding:0 var(--hfx-space-2,0.5rem);border-color:transparent;background:transparent;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
15
14
  .cx-facets .cx-button:focus-visible,.cx-facet-toggle:focus-visible,.cx-facet-val input:focus-visible,.cx-facets .cx-input:focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}
16
15
  .cx-facets-toggle{width:var(--cx-size-28px);padding:0;}
17
16
  .cx-facets-toggle .cx-ico,.cx-facets-open .cx-ico{width:var(--cx-size-16px);height:var(--cx-size-16px);}
18
17
  .cx-data-grid > .cx-facets-open{flex:none;align-self:flex-start;min-height:var(--cx-size-44px);margin:var(--cx-size-8px) var(--cx-size-12px);}
19
18
  .cx-facets-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
20
19
  .cx-facets[data-cx-position="top"] .cx-facets-list{display:flex;flex-wrap:wrap;gap:0;overflow-y:visible;}
21
- .cx-facets[data-cx-position="top"] .cx-facet{flex:1 1 var(--cx-size-210px);min-width:var(--cx-size-180px);max-width:var(--cx-size-320px);border-inline-end:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
20
+ .cx-facets[data-cx-position="top"] .cx-facet{flex:1 1 var(--cx-size-210px);min-width:var(--cx-size-180px);max-width:var(--cx-size-320px);border-inline-end:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
22
21
  .cx-facets.cx-facets-closed[data-cx-position="side"]{width:var(--cx-size-44px);}
23
22
  .cx-facets.cx-facets-closed .cx-facets-list,.cx-facets.cx-facets-closed .cx-facets-clear{display:none;}
24
23
  .cx-facets.cx-facets-closed[data-cx-position="side"] .cx-facets-title{display:none;}
25
24
  .cx-facets.cx-facets-closed[data-cx-position="side"] .cx-facets-h{justify-content:center;padding:var(--cx-size-6px) 0;border-bottom:0;}
26
- .cx-facet{position:relative;border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
25
+ .cx-facet{position:relative;border-bottom:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
27
26
  .cx-facet-h{margin:0;font-size:inherit;font-weight:inherit;}
28
27
  .cx-facet-top{position:relative;}
29
- .cx-facets:not([data-cx-position="top"]) .cx-facet-top,.cx-facets.cx-facets-in-sheet .cx-facet-top{position:sticky;top:0;z-index:1;background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));}
28
+ .cx-facets:not([data-cx-position="top"]) .cx-facet-top,.cx-facets.cx-facets-in-sheet .cx-facet-top{position:sticky;top:0;z-index:1;background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
30
29
  .cx-facets:not([data-cx-position="top"]) .cx-facet-b,.cx-facets.cx-facets-in-sheet .cx-facet-b{position:relative;z-index:0;}
31
- .cx-facet-toggle{display:flex;align-items:center;gap:var(--cx-size-6px);width:100%;min-height:var(--cx-size-36px);padding-block:var(--cx-size-6px);padding-inline:var(--cx-size-12px) var(--cx-size-64px);border:0;background:transparent;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font:inherit;font-size:var(--cx-size-13d5px);font-weight:600;text-align:start;cursor:pointer;}
32
- .cx-facet-toggle::after{content:"";flex:none;width:var(--cx-size-7px);height:var(--cx-size-7px);margin-inline-start:auto;border-right:var(--cx-size-1d5px) solid var(--hfx-color-text-muted,light-dark(#626770,#8f949d));border-bottom:var(--cx-size-1d5px) solid var(--hfx-color-text-muted,light-dark(#626770,#8f949d));transform:translateY(-25%) rotate(45deg);}
30
+ .cx-facet-toggle{display:flex;align-items:center;gap:var(--cx-size-6px);width:100%;min-height:var(--cx-size-36px);padding-block:var(--cx-size-6px);padding-inline:var(--cx-size-12px) var(--cx-size-64px);border:0;background:transparent;color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));font:inherit;font-size:var(--cx-size-13d5px);font-weight:600;text-align:start;cursor:pointer;}
31
+ .cx-facet-toggle::after{content:"";flex:none;width:var(--cx-size-7px);height:var(--cx-size-7px);margin-inline-start:auto;border-right:var(--cx-size-1d5px) solid var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));border-bottom:var(--cx-size-1d5px) solid var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));transform:translateY(-25%) rotate(45deg);}
33
32
  .cx-facet-toggle[aria-expanded="false"]::after{transform:rotate(-45deg);}
34
33
  .cx-facet-toggle:hover{background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));}
35
34
  .cx-facet-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
36
- .cx-facet-badge{flex:none;min-width:var(--cx-size-20px);height:var(--cx-size-20px);padding:0 var(--cx-size-6px);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font-size:var(--cx-size-12px);font-weight:600;line-height:var(--cx-size-20px);text-align:center;}
35
+ .cx-facet-badge{flex:none;min-inline-size:var(--hfx-badge-height,20px);block-size:var(--hfx-badge-height,20px);padding:0 var(--hfx-space-1-5,6px);border-radius:var(--hfx-radius-pill,999px);background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));font-size:var(--hfx-type-caption-size,0.75rem);font-weight:var(--hfx-weight-semibold,600);line-height:var(--hfx-badge-height,20px);text-align:center;}
37
36
  .cx-facet-badge[hidden]{display:none;}
38
37
  .cx-facets .cx-facet-clear{position:absolute;top:var(--cx-size-4px);inset-inline-end:var(--cx-size-30px);width:var(--cx-size-28px);min-height:var(--cx-size-28px);padding:0;}
39
38
  .cx-facets .cx-facet-clear .cx-ico{width:var(--cx-size-14px);height:var(--cx-size-14px);}
40
- .cx-facet-empty{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-style:italic;}
39
+ .cx-facet-empty{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-style:italic;}
41
40
  .cx-facet-b{padding:0 var(--cx-size-12px) var(--cx-size-10px);}
42
41
  .cx-facet-b[hidden]{display:none;}
43
- .cx-facets .cx-facet-search{width:100%;height:var(--cx-size-30px);margin:0 0 var(--cx-size-6px);padding:0 var(--cx-size-8px);border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font:inherit;font-size:var(--cx-size-13px);}
42
+ .cx-facets .cx-facet-search{width:100%;height:var(--cx-size-30px);margin:0 0 var(--cx-size-6px);padding:0 var(--cx-size-8px);border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));font:inherit;font-size:var(--cx-size-13px);}
44
43
  .cx-facet-values{margin:0;padding:0;list-style:none;}
45
44
  .cx-facet-val{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--cx-size-8px);min-height:var(--cx-size-28px);padding:0 var(--cx-size-4px);border-radius:var(--hfx-radius-sm,4px);font-size:var(--cx-size-13d5px);cursor:pointer;}
46
45
  .cx-facet-val:hover{background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));}
47
46
  .cx-facet-val input{width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
48
47
  .cx-facet-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
49
- .cx-facet-n{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-12d5px);font-variant-numeric:tabular-nums;text-align:end;}
50
- .cx-facet-zero .cx-facet-text,.cx-facet-zero .cx-facet-n{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
48
+ .cx-facet-n{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--cx-size-12d5px);font-variant-numeric:tabular-nums;text-align:end;}
49
+ .cx-facet-zero .cx-facet-text,.cx-facet-zero .cx-facet-n{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
51
50
  .cx-facets .cx-facet-more{margin-top:var(--cx-size-2px);padding:0 var(--cx-size-4px);color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
52
- .cx-facet-note{margin:var(--cx-size-6px) 0 0;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-12d5px);}
51
+ .cx-facet-note{margin:var(--cx-size-6px) 0 0;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--cx-size-12d5px);}
53
52
  .cx-facet-note[hidden],.cx-facets [hidden]{display:none;}
54
- .cx-facet-hist{display:flex;align-items:flex-end;gap:var(--cx-size-2px);height:var(--cx-size-52px);margin:var(--cx-size-4px) 0 var(--cx-size-2px);padding-bottom:var(--cx-size-1px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
55
- .cx-facet-bar{flex:1;min-width:var(--cx-size-2px);border-radius:var(--cx-size-2px) var(--cx-size-2px) 0 0;background:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 22%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));cursor:pointer;}
56
- .cx-facet-bar:hover{background:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 40%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
53
+ .cx-facet-hist{display:flex;align-items:flex-end;gap:var(--cx-size-2px);height:var(--cx-size-52px);margin:var(--cx-size-4px) 0 var(--cx-size-2px);padding-bottom:var(--cx-size-1px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
54
+ .cx-facet-bar{flex:1;min-width:var(--cx-size-2px);border-radius:var(--cx-size-2px) var(--cx-size-2px) 0 0;background:color-mix(in srgb,var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5))) 22%,var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c))));cursor:pointer;}
55
+ .cx-facet-bar:hover{background:color-mix(in srgb,var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5))) 40%,var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c))));}
57
56
  .cx-facet-bar.cx-facet-in{background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
58
- .cx-facet-axis{display:flex;justify-content:space-between;gap:var(--cx-size-8px);margin:0 0 var(--cx-size-6px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-12px);font-variant-numeric:tabular-nums;}
57
+ .cx-facet-axis{display:flex;justify-content:space-between;gap:var(--cx-size-8px);margin:0 0 var(--cx-size-6px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--cx-size-12px);font-variant-numeric:tabular-nums;}
59
58
  .cx-facet-range{display:grid;grid-template-columns:1fr 1fr;gap:var(--cx-size-8px);}
60
59
  .cx-facet-field{display:flex;flex-direction:column;gap:var(--cx-size-2px);min-width:0;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font-size:var(--cx-size-12d5px);}
61
- .cx-facet-field .cx-input{width:100%;min-width:0;height:var(--cx-size-30px);padding:0 var(--cx-size-6px);border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font:inherit;font-size:var(--cx-size-13px);color-scheme:inherit;}
60
+ .cx-facet-field .cx-input{inline-size:100%;block-size:var(--hfx-control-height-sm,calc(28px - var(--cx-compact,0) * 4px));padding:0 var(--hfx-space-1-5,6px);color-scheme:inherit;}
62
61
  .cx-data-grid .cx-facets-open[hidden]{display:none;}
63
- .cx-data-grid .cx-facets-open .badge{min-width:var(--cx-size-18px);height:var(--cx-size-18px);padding:0 var(--cx-size-5px);border-radius:var(--hfx-radius-badge,var(--hfx-radius-sm,4px));background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-surface,light-dark(#ffffff,#16181c));font-size:var(--cx-size-11px);line-height:var(--cx-size-18px);}
64
62
  .cx-facet-sheet.cx-host{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;flex-direction:column;}
65
63
  .cx-facet-sheet.cx-host[open]{display:flex;}
66
64
  .cx-facet-sheet::backdrop{background:var(--hfx-color-overlay,light-dark(rgba(22,24,28,0.42),rgba(0,0,0,0.66)));}
67
- .cx-facet-sheet-h{display:flex;align-items:center;gap:var(--cx-size-8px);min-height:var(--cx-size-56px);padding:var(--cx-size-6px) var(--cx-size-12px) var(--cx-size-6px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
65
+ .cx-facet-sheet-h{display:flex;align-items:center;gap:var(--cx-size-8px);min-height:var(--cx-size-56px);padding:var(--cx-size-6px) var(--cx-size-12px) var(--cx-size-6px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
68
66
  .cx-facet-sheet-h h2{flex:1;margin:0;font-size:var(--cx-size-16px);}
69
67
  .cx-facet-sheet-h .cx-button{min-height:var(--cx-size-44px);padding:0 var(--cx-size-16px);}
70
68
  .cx-facets.cx-facets-in-sheet{flex:1;align-self:stretch;width:auto;min-height:0;border:0;border-radius:0;}
@@ -84,3 +82,15 @@ body.cx-page > .cx-facet-frame[data-cx-position="side"] > .cx-data-grid,body.cx-
84
82
  .cx-facet-top{background:Canvas;}
85
83
  }
86
84
  @media print{.cx-facets,.cx-data-grid .cx-facets-open{display:none;}}
85
+ .cx-facet-frame[data-cx-position="top"]{gap:0;border:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));overflow:hidden;}
86
+ .cx-facet-frame[data-cx-position="top"] > .cx-host{border:0;border-radius:0;}
87
+ .cx-facets[data-cx-position="top"] .cx-facet{max-width:none;}
88
+ .cx-facets[data-cx-position="top"] .cx-facet-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--hfx-space-6,2rem)*6)),1fr));}
89
+ .cx-facets[data-cx-position="top"] .cx-facet-val{grid-template-columns:auto minmax(0,max-content) auto;justify-content:start;}
90
+ .cx-grid-facet > .cx-grid-panel{display:block;max-height:calc(var(--hfx-space-6,2rem) * 15);overflow:auto;}
91
+ .cx-chrome .cx-grid-facet > summary::after{display:block;}
92
+ .cx-grid-facet .cx-facet{border:0;}
93
+ .cx-grid-facet .cx-facet-h{display:none;}
94
+ .cx-grid-facet .cx-facet-top{min-height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));}
95
+ .cx-grid-facet .cx-facet-top:has(.cx-facet-clear[hidden]){display:none;}
96
+ .cx-grid-facet > summary.cx-facet-active{border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
package/CanopyX.Html/Assets/canopyx-facets.js CHANGED
@@ -1,17 +1,17 @@
1
- (function(global){"use strict";const installed=new WeakSet();const part={version:"2ffa91f40c9b9b21",install(context){if(installed.has(context.DataGrid.prototype))return;const{DataGrid,h,setText,fill,gridButton,gridIcon,gridQueryStart,gridQueryRows,gridColumnProjection,gridScalar,gridOrder,gridKeyCompare,gridFacetKey,cellText,foldText,numberFormat,gridCellRenderer,gridFreeze,overlayTheme,watchOverlayTheme}=context;function gridColumnGroup(operator,items){const filters=[],groups=[];for(const item of items){if(typeof item==="boolean"){if(item===(operator==="or"))return item;continue}
1
+ (function(global){"use strict";const installed=new WeakSet();const part={version:"e78c2340a96fa802",install(context){if(installed.has(context.DataGrid.prototype))return;const{DataGrid,h,setText,fill,gridButton,gridIcon,gridQueryStart,gridQueryRows,gridColumnProjection,gridScalar,gridOrder,gridKeyCompare,gridFacetKey,cellText,foldText,numberFormat,gridCellRenderer,gridFreeze,overlayTheme,watchOverlayTheme,GRID_BUCKETS,gridBucketDefinition}=context;function gridColumnGroup(operator,items){const filters=[],groups=[];for(const item of items){if(typeof item==="boolean"){if(item===(operator==="or"))return item;continue}
2
2
  if(item.operator===operator){filters.push(...item.filters);groups.push(...item.groups)}
3
3
  else(item.groups?groups:filters).push(item)}
4
4
  return!filters.length&&!groups.length?operator==="and":!filters.length&&groups.length===1?groups[0]:{operator,filters,groups}}
5
- function gridColumnClauses(query,id){const clauses=[],has=group=>group.filters.some(item=>item.column===id)||group.groups.some(has),only=group=>group.filters.every(item=>item.column===id)&&group.groups.every(only);const remove=group=>{if(!group)return undefined;if(only(group)){clauses.push(group);return undefined}
5
+ function gridColumnClauses(query,id){if(query.tupleFilters?.some(tuple=>tuple.columns.some(field=>field.column===id)))throw new Error("complex");const clauses=[],has=group=>group.filters.some(item=>item.column===id)||group.groups.some(has),only=group=>group.filters.every(item=>item.column===id)&&group.groups.every(only);const remove=group=>{if(!group)return undefined;if(only(group)){clauses.push(group);return undefined}
6
6
  if(group.operator==="or"&&has(group))throw new Error("complex");const filters=group.filters.filter(item=>{if(item.column!==id)return true;clauses.push(item);return false}),groups=group.groups.map(remove).filter(Boolean);if(!filters.length&&!groups.length)return undefined;return gridColumnGroup(group.operator,[...filters,...groups])};const filters=(query.filters||[]).filter(item=>{if(item.column!==id)return true;clauses.push(item);return false}),filterGroup=remove(query.filterGroup);return{clauses,query:{...query,filters,filterGroup}}}
7
7
  function gridInstallColumnClause(query,id,clause){const base=gridColumnClauses(query,id).query;if(!clause)return gridQueryStart(base);if(!clause.groups)return gridQueryStart(base,{filters:[...base.filters,clause]});return gridQueryStart(base,{filterGroup:base.filterGroup?gridColumnGroup("and",[base.filterGroup,clause]):clause})}
8
- const FACET_KEYS=new Set(["columns","position","open","collapsible","width","label","target"]);const FACET_COLUMN_KEYS=new Set(["column","kind","label","limit","bins","sort","collapsed"]);const FACET_VALUES=200;function facetOptions(grid){const read=value=>{if(value===undefined)return{};if(!value||typeof value!=="object"||Array.isArray(value)||Object.keys(value).some(key=>!FACET_KEYS.has(key)))
8
+ const FACET_KEYS=new Set(["columns","position","open","collapsible","width","label","target"]);const FACET_COLUMN_KEYS=new Set(["column","kind","label","limit","bins","sort","collapsed","bucket"]);const FACET_VALUES=200;function facetOptions(grid){const read=value=>{if(value===undefined)return{};if(!value||typeof value!=="object"||Array.isArray(value)||Object.keys(value).some(key=>!FACET_KEYS.has(key)))
9
9
  throw new Error("CanopyX: facets takes columns, position, open, collapsible, width, label and target.");return value};const merged={...read(grid.view.facets),...read(grid.opts.facets)},columns=new Map(grid.view.columns.map(column=>[column.id,column]));if(!Array.isArray(merged.columns)||!merged.columns.length||merged.columns.length>24)throw new Error("CanopyX: facets need 1 to 24 columns.");const seen=new Set();const facets=merged.columns.map(entry=>{const facet=typeof entry==="string"?{column:entry}:entry;if(!facet||typeof facet!=="object"||Object.keys(facet).some(key=>!FACET_COLUMN_KEYS.has(key))||!columns.has(facet.column)||seen.has(facet.column)||
10
10
  facet.kind!==undefined&&!["list","range"].includes(facet.kind)||facet.label!==undefined&&(typeof facet.label!=="string"||!facet.label.trim()||facet.label.length>256)||
11
11
  facet.limit!==undefined&&(!Number.isInteger(facet.limit)||facet.limit<1||facet.limit>FACET_VALUES)||
12
12
  facet.bins!==undefined&&(!Number.isInteger(facet.bins)||facet.bins<2||facet.bins>60)||facet.sort!==undefined&&!["count","value"].includes(facet.sort)||
13
13
  facet.collapsed!==undefined&&typeof facet.collapsed!=="boolean")
14
- throw new Error("CanopyX: invalid or duplicate facet column " +(facet&&facet.column));seen.add(facet.column);const column=columns.get(facet.column),kind=facet.kind||(column.kind==="text"?"list":"range");if(kind==="range"&&column.kind==="text")throw new Error("CanopyX: range facets need number or date columns.");const order=kind==="list"?facetDeclaredOrder(grid,column):null;return{column:facet.column,def:column,kind,label:facet.label||column.title,limit:facet.limit||8,bins:facet.bins||16,sort:facet.sort||(kind==="list"&&!order?"count":"value"),order,collapsed:!!facet.collapsed}});if(merged.position!==undefined&&!["side","top"].includes(merged.position)||["open","collapsible"].some(key=>merged[key]!==undefined&&typeof merged[key]!=="boolean")||
14
+ throw new Error("CanopyX: invalid or duplicate facet column " +(facet&&facet.column));seen.add(facet.column);const sourceDef=columns.get(facet.column),bucket=facet.bucket===undefined?null:gridBucketDefinition(facet.bucket,sourceDef);const column=bucket?{...sourceDef,kind:"number",presenter:undefined,valueOrder:undefined,valueLabels:undefined}:sourceDef,kind=facet.kind||(bucket||column.kind==="text"?"list":"range");if(bucket&&kind!=="list")throw new Error("CanopyX: a bucket facet uses a value list.");if(kind==="range"&&column.kind==="text")throw new Error("CanopyX: range facets need number or date columns.");const order=kind==="list"?facetDeclaredOrder(grid,column):null;return{column:facet.column,def:column,sourceDef,bucket,kind,label:facet.label||column.title,limit:facet.limit||8,bins:facet.bins||16,sort:bucket?"value":facet.sort||(kind==="list"&&!order?"count":"value"),order,collapsed:!!facet.collapsed}});if(merged.position!==undefined&&!["side","top","toolbar"].includes(merged.position)||["open","collapsible"].some(key=>merged[key]!==undefined&&typeof merged[key]!=="boolean")||
15
15
  merged.width!==undefined&&(!Number.isInteger(merged.width)||merged.width<180||merged.width>480)||
16
16
  merged.label!==undefined&&(typeof merged.label!=="string"||!merged.label.trim()||merged.label.length>256)||
17
17
  merged.target!==undefined&&!(merged.target instanceof HTMLElement))
@@ -20,26 +20,27 @@ throw new Error("CanopyX: a hosted grid's facets must be declared reporting face
20
20
  function facetDeclaredOrder(grid,column){const presenter=column.presenter,values=column.valueOrder||grid.view.reporting?.ordering?.[column.id]?.categories||
21
21
  (presenter&&(presenter.kind==="enum"||presenter.kind==="state")&&presenter.tones?Object.keys(presenter.tones):null);return values&&values.length?new Map(values.map((value,index)=>[gridFacetKey(value,column),index])):null}
22
22
  function facetSelection(query,facet){let clauses;try{({clauses}=gridColumnClauses(query,facet.column))}catch(_){return{custom:true,locked:true}}
23
- if(!clauses.length)return{none:true};if(facet.kind==="list"){const listed=clause=>["in","eq","isNull"].includes(clause.operator)&&!clause.groups;const items=clauses.length!==1?null:clauses[0].groups?clauses[0].operator==="or"&&!clauses[0].groups.length&&clauses[0].filters.every(listed)?clauses[0].filters:null:listed(clauses[0])?clauses:null;return items?{values:items.flatMap(clause=>clause.operator==="isNull"?[null]:clause.values)}:{custom:true}}
23
+ if(!clauses.length)return{none:true};if(facet.kind==="list"){const listed=clause=>["in","eq","isNull"].includes(clause.operator)&&!clause.groups&&JSON.stringify(clause.bucket||null)===JSON.stringify(facet.bucket||null);const items=clauses.length!==1?null:clauses[0].groups?clauses[0].operator==="or"&&!clauses[0].groups.length&&clauses[0].filters.every(listed)?clauses[0].filters:null:listed(clauses[0])?clauses:null;return items?{values:items.flatMap(clause=>clause.operator==="isNull"?[null]:clause.values)}:{custom:true}}
24
24
  let low=null,high=null,lowOpen=false,open=false;for(const clause of clauses){if(clause.groups||clauses.length>2)return{custom:true};if((clause.operator==="ge"||clause.operator==="gt")&&low===null){low=clause.values[0];lowOpen=clause.operator==="gt"}
25
25
  else if((clause.operator==="le"||clause.operator==="lt")&&high===null){high=clause.values[0];if(clause.operator==="lt")open=true}
26
26
  else return{custom:true}}
27
27
  return{low,high,lowOpen,open}}
28
- function facetQuery(query,facet,choice){const predicate=(operator,values=[])=>({column:facet.column,operator,values});try{if(facet.kind==="range"){const base=gridColumnClauses(query,facet.column).query;const bounds=[choice.low!=null&&predicate(choice.lowOpen?"gt":"ge",[choice.low]),choice.high!=null&&predicate(choice.open?"lt":"le",[choice.high])].filter(Boolean);return gridQueryStart(base,{filters:[...base.filters,...bounds]})}
28
+ function facetQuery(query,facet,choice){const predicate=(operator,values=[])=>({column:facet.column,operator,values,...(facet.bucket?{bucket:facet.bucket}:{})});try{if(facet.kind==="range"){const base=gridColumnClauses(query,facet.column).query;const bounds=[choice.low!=null&&predicate(choice.lowOpen?"gt":"ge",[choice.low]),choice.high!=null&&predicate(choice.open?"lt":"le",[choice.high])].filter(Boolean);return gridQueryStart(base,{filters:[...base.filters,...bounds]})}
29
29
  const raw=choice.filter(value=>value!==null),empty=raw.length<choice.length;const items=[raw.length&&predicate("in",raw),empty&&predicate("isNull")].filter(Boolean);return gridInstallColumnClause(query,facet.column,!items.length?null:items.length===1?items[0]:{operator:"or",filters:items,groups:[]})}catch(_){return query}}
30
- const facetShape=query=>query?JSON.stringify([query.search,query.searchMode,query.filters,query.filterGroup,query.revision]):"";const facetKey=gridFacetKey;function facetInlineCounts(grid,facet,query){const projection=gridColumnProjection(query,facet.column),columns=new Map(grid.view.columns.map(column=>[column.id,column]));const rows=gridQueryRows(grid.view,projection,columns,false),column=facet.def;if(facet.kind==="range"){const values=[];for(const row of rows){const value=gridScalar(row.cells[column.id],column);if(value!==null)values.push(value)}
30
+ const facetShape=query=>query?JSON.stringify([query.search,query.searchMode,query.filters,query.filterGroup,query.tupleFilters,query.revision]):"";const facetKey=gridFacetKey;function facetInlineCounts(grid,facet,query){const projection=gridColumnProjection(query,facet.column),columns=new Map(grid.view.columns.map(column=>[column.id,column]));const rows=gridQueryRows(grid.view,projection,columns,false),column=facet.def;if(facet.kind==="range"){const values=[];for(const row of rows){const value=gridScalar(row.cells[column.id],column);if(value!==null)values.push(value)}
31
31
  return{matched:rows.length,values,complete:true}}
32
- const buckets=new Map();for(const row of rows){const raw=gridScalar(row.cells[column.id],column),value=column.kind==="datetime"&&raw!==null?new Date(raw).toISOString():raw,key=facetKey(value,column);const bucket=buckets.get(key);if(bucket){bucket.count++;if(typeof value==="string"&&value<bucket.value)bucket.value=value}else buckets.set(key,{value,count:1})}
32
+ const buckets=new Map();for(const row of rows){const raw=gridScalar(row.cells[column.id],facet.sourceDef),value=facet.bucket?GRID_BUCKETS.key(facet.bucket,raw):column.kind==="datetime"&&raw!==null?new Date(raw).toISOString():raw,key=facetKey(value,column);const bucket=buckets.get(key);if(bucket){bucket.count++;if(typeof value==="string"&&value<bucket.value)bucket.value=value}else buckets.set(key,{value,count:1})}
33
33
  const items=[...buckets.values()];return{matched:rows.length,items,totalValues:items.length,truncated:false}}
34
- async function facetHostedCounts(grid,facet,search,signal){const page=await grid.getFacets(facet.column,{search:search||"",includeCurrentFilter:false,limit:FACET_VALUES,signal});const column=facet.def;if(facet.kind==="range")
34
+ async function facetHostedCounts(grid,facet,search,signal){const page=await grid.getFacets(facet.column,{search:search||"",includeCurrentFilter:false,limit:FACET_VALUES,signal,...(facet.bucket?{bucket:facet.bucket}:{})});const column=facet.def;if(facet.kind==="range")
35
35
  return{matched:page.matched,buckets:page.items.filter(item=>item.value!==null).map(item=>({value:gridScalar(item.value,column),count:item.count})),complete:!page.truncated};return{matched:page.matched,items:page.items.map(item=>({value:item.value,count:item.count})),totalValues:page.totalValues,truncated:page.truncated}}
36
- const FACET_SEARCH_FROM=12;function facetListBody(panel,facet,body){const grid=panel.grid,search=h("input","cx-input cx-facet-search"),list=h("ul","cx-facet-values"),more=gridButton("",()=>{state.expanded=!state.expanded;draw()});const note=h("p","cx-facet-note"),state={expanded:false,search:"",counts:null,timer:0};search.type="search";search.placeholder=grid.labels.gridFacetSearch;search.setAttribute("aria-label",fill(grid.labels.gridFacetSearch,{})+ ": "+facet.label);search.hidden=true;more.classList.add("cx-facet-more");more.hidden=true;note.hidden=true;list.setAttribute("aria-label",facet.label);body.append(search,list,more,note);search.addEventListener("input",()=>{state.search=search.value;clearTimeout(state.timer);state.timer=setTimeout(()=>facet.hosted?panel.refresh([facet]):draw(),facet.hosted?250:0)});list.addEventListener("keydown",event=>{const boxes=[...list.querySelectorAll("input")],at=boxes.indexOf(document.activeElement);const next={ArrowDown:at+1,ArrowUp:at-1,Home:0,End:boxes.length-1}[event.key];if(at<0||next===undefined||!boxes[next])return;event.preventDefault();boxes.forEach(box=>{box.tabIndex=-1});boxes[next].tabIndex=0;boxes[next].focus()});const choose=(item,checked)=>{const chosen=new Map((state.chosen||[]).map(value=>[facetKey(value,facet.def),value]));if(checked)chosen.set(facetKey(item.value,facet.def),item.value);else chosen.delete(facetKey(item.value,facet.def));state.chosen=[...chosen.values()];panel.apply(facet,state.chosen)};function draw(){const counts=state.counts,selection=panel.selection(facet);if(!counts)return;state.chosen=selection.values||[];const chosen=new Set(state.chosen.map(value=>facetKey(value,facet.def))),focused=list.contains(document.activeElement)?document.activeElement:null;const focusKey=focused?.getAttribute("data-cx-key"),focusPosition=focused?[...list.querySelectorAll("input")].indexOf(focused):0;const needle=facet.hosted?"":foldText(state.search),locked=!!selection.locked;let items=counts.items.filter(item=>!needle||item.value!==null&&foldText(cellText(item.value,facet.def,grid.fmt)).includes(needle));if(!(facet.hosted&&state.search))for(const value of state.chosen)if(!items.some(item=>facetKey(item.value,facet.def)===facetKey(value,facet.def)))items.push({value,count:0});items.sort(facet.sort==="count"?(a,b)=>b.count-a.count||facetValueOrder(a.value,b.value,facet):(a,b)=>facetValueOrder(a.value,b.value,facet));const shown=state.expanded?items.filter((item,index)=>index<FACET_VALUES||chosen.has(facetKey(item.value,facet.def))):items.filter((item,index)=>index<facet.limit||chosen.has(facetKey(item.value,facet.def)));const retainedIndex=shown.findIndex(item=>facetKey(item.value,facet.def)===focusKey);const focusIndex=retainedIndex>=0?retainedIndex:Math.min(Math.max(0,focusPosition),Math.max(0,shown.length-1));const numbers=numberFormat(grid.lang);list.replaceChildren(...shown.map((item,index)=>{const row=h("li"),label=h("label","cx-facet-val"),box=h("input"),text=h("span","cx-facet-text"),count=h("span","cx-facet-n"),key=facetKey(item.value,facet.def);box.type="checkbox";box.checked=chosen.has(key);box.disabled=locked;box.setAttribute("data-cx-key",key);box.tabIndex=index===focusIndex?0:-1;const empty=item.value===null||item.value==="",display=empty?grid.labels.gridFacetEmptyValue:facetValueText(grid,facet,item.value,text);if(empty){setText(text,display);text.classList.add("cx-facet-empty")}
36
+ const FACET_SEARCH_FROM=12;function facetListBody(panel,facet,body){const grid=panel.grid,search=h("input","cx-input cx-facet-search"),list=h("ul","cx-facet-values"),more=gridButton("",()=>{state.expanded=!state.expanded;draw()});const note=h("p","cx-facet-note"),state={expanded:false,search:"",counts:null,timer:0};search.type="search";search.placeholder=grid.labels.gridFacetSearch;search.setAttribute("aria-label",fill(grid.labels.gridFacetSearch,{})+ ": "+facet.label);search.hidden=true;more.classList.add("cx-facet-more");more.hidden=true;note.hidden=true;list.setAttribute("aria-label",facet.label);body.append(search,list,more,note);search.addEventListener("input",()=>{state.search=search.value;clearTimeout(state.timer);state.timer=setTimeout(()=>facet.hosted?panel.refresh([facet]):draw(),facet.hosted?250:0)});list.addEventListener("keydown",event=>{const boxes=[...list.querySelectorAll("input")],at=boxes.indexOf(document.activeElement);const next={ArrowDown:at+1,ArrowUp:at-1,Home:0,End:boxes.length-1}[event.key];if(at<0||next===undefined||!boxes[next])return;event.preventDefault();boxes.forEach(box=>{box.tabIndex=-1});boxes[next].tabIndex=0;boxes[next].focus()});const choose=(item,checked)=>{const chosen=new Map((state.chosen||[]).map(value=>[facetKey(value,facet.def),value]));if(checked)chosen.set(facetKey(item.value,facet.def),item.value);else chosen.delete(facetKey(item.value,facet.def));state.chosen=[...chosen.values()];panel.apply(facet,state.chosen)};function draw(){const counts=state.counts,selection=panel.selection(facet);if(!counts)return;state.chosen=selection.values||[];const chosen=new Set(state.chosen.map(value=>facetKey(value,facet.def))),focused=list.contains(document.activeElement)?document.activeElement:null;const focusKey=focused?.getAttribute("data-cx-key"),focusPosition=focused?[...list.querySelectorAll("input")].indexOf(focused):0;const needle=facet.hosted?"":foldText(state.search),locked=!!selection.locked;let items=counts.items.filter(item=>!needle||item.value!==null&&foldText(facet.bucket?GRID_BUCKETS.label(facet.bucket,item.value,grid.lang):cellText(item.value,facet.def,grid.fmt)).includes(needle));if(!(facet.hosted&&state.search))for(const value of state.chosen)if(!items.some(item=>facetKey(item.value,facet.def)===facetKey(value,facet.def)))items.push({value,count:0});items.sort(facet.sort==="count"?(a,b)=>b.count-a.count||facetValueOrder(a.value,b.value,facet):(a,b)=>facetValueOrder(a.value,b.value,facet));const shown=state.expanded?items.filter((item,index)=>index<FACET_VALUES||chosen.has(facetKey(item.value,facet.def))):items.filter((item,index)=>index<facet.limit||chosen.has(facetKey(item.value,facet.def)));const retainedIndex=shown.findIndex(item=>facetKey(item.value,facet.def)===focusKey);const focusIndex=retainedIndex>=0?retainedIndex:Math.min(Math.max(0,focusPosition),Math.max(0,shown.length-1));const numbers=numberFormat(grid.lang);list.replaceChildren(...shown.map((item,index)=>{const row=h("li"),label=h("label","cx-facet-val"),box=h("input"),text=h("span","cx-facet-text"),count=h("span","cx-facet-n"),key=facetKey(item.value,facet.def);box.type="checkbox";box.checked=chosen.has(key);box.disabled=locked;box.setAttribute("data-cx-key",key);box.tabIndex=index===focusIndex?0:-1;const empty=item.value===null||item.value==="",display=empty?grid.labels.gridFacetEmptyValue:facetValueText(grid,facet,item.value,text);if(empty){setText(text,display);text.classList.add("cx-facet-empty")}
37
37
  box.setAttribute("aria-label",fill(grid.labels.gridFacetValueCount,{value:display,count:numbers.format(item.count)}));setText(count,numbers.format(item.count));count.setAttribute("aria-hidden","true");if(!item.count)label.classList.add("cx-facet-zero");box.addEventListener("change",()=>choose(item,box.checked));label.append(box,text,count);row.appendChild(label);return row}));if(focusKey){const target=!locked&&list.querySelector('input[tabindex="0"]')||body.closest(".cx-facet")?.querySelector(".cx-facet-toggle");target?.focus({preventScroll:!locked&&retainedIndex>=0})}
38
38
  const hidden=items.length-shown.length,capped=state.expanded&&hidden>0;more.hidden=!hidden&&!state.expanded||items.length<=facet.limit;setText(more,state.expanded?grid.labels.gridFacetShowFewer:fill(grid.labels.gridFacetShowMore,{count:numbers.format(Math.min(hidden,Math.max(1,FACET_VALUES-shown.length)))}));search.hidden=!state.search&&document.activeElement!==search&&counts.totalValues<=FACET_SEARCH_FROM;search.disabled=locked;note.hidden=!counts.truncated&&!capped;if(!note.hidden)setText(note,fill(grid.labels.gridFacetCounts,{count:numbers.format(counts.matched),shown:numbers.format(counts.truncated?counts.items.length:shown.length),total:numbers.format(counts.totalValues)}))}
39
39
  return{draw,search:()=>state.search,update(counts){state.counts=counts;draw()}}}
40
40
  function facetValueOrder(a,b,facet){const column=facet.def;if(column.valueOrder?.length)return gridKeyCompare(a,b,column,"asc");if(a===null||b===null)return a===b?0:a===null?1:-1;if(facet.order){const at=facet.order.get(facetKey(a,column))??Infinity,bt=facet.order.get(facetKey(b,column))??Infinity;if(at!==bt)return at<bt?-1:1}
41
41
  if(column.kind!=="text")return gridOrder(gridScalar(a,column),gridScalar(b,column));if(typeof a!==typeof b)return typeof a==="boolean"?-1:1;return gridOrder(typeof a==="string"?foldText(a):a,typeof b==="string"?foldText(b):b)}
42
- function facetValueText(grid,facet,value,element){const column=facet.def,options=column.presenter,text=cellText(value,column,grid.fmt)||String(value);if(options&&!["statusStrip","sparklineBars","sparklineLine","change","identifier","longText","list","tags","structured"].includes(options.kind)){try{gridCellRenderer(grid,column,options)({id:"facet",cells:{[column.id]:value}},element);return text}catch(_){element.replaceChildren()}}
42
+ function facetValueText(grid,facet,value,element){if(facet.bucket){const text=GRID_BUCKETS.label(facet.bucket,value,grid.lang);setText(element,text);return text}
43
+ const column=facet.def,options=column.presenter,text=cellText(value,column,grid.fmt)||String(value);if(options&&!["statusStrip","sparklineBars","sparklineLine","change","identifier","longText","list","tags","structured"].includes(options.kind)){try{gridCellRenderer(grid,column,options)({id:"facet",cells:{[column.id]:value}},element);return text}catch(_){element.replaceChildren()}}
43
44
  setText(element,text);return text}
44
45
  function facetRangeBody(panel,facet,body){const grid=panel.grid,column=facet.def,date=column.kind==="datetime",numbers=numberFormat(grid.lang);const chart=h("div","cx-facet-hist"),axis=h("p","cx-facet-axis"),low=h("span"),high=h("span"),fields=h("div","cx-facet-range"),note=h("p","cx-facet-note");const field=(text,edge)=>{const label=h("label","cx-facet-field"),input=h("input","cx-input");input.type=date?"date":"number";if(!date)input.step="any";label.append(document.createTextNode(text),input);input.addEventListener("change",()=>submit(edge));input.addEventListener("keydown",event=>{if(event.key==="Enter"){event.preventDefault();submit(edge)}});return{label,input}};const from=field(grid.labels.gridFacetFrom,"low"),to=field(grid.labels.gridFacetTo,"high");chart.setAttribute("role","img");chart.setAttribute("aria-label",fill(grid.labels.gridFacetHistogram,{column:facet.label}));axis.append(low,high);axis.setAttribute("aria-hidden","true");fields.append(from.label,to.label);note.hidden=true;note.setAttribute("role","status");body.append(chart,axis,fields,note);const state={counts:null,bins:[]};const toInput=value=>{if(value==null)return "";if(!date)return String(value);const day=new Date(value),pad=part=>String(part).padStart(2,"0");return grid.local?day.getFullYear()+ "-"+pad(day.getMonth()+ 1)+ "-"+pad(day.getDate()):day.toISOString().slice(0,10)};const fromInput=(text,edge)=>{if(text==="")return null;if(!date){const value=Number(text);return Number.isFinite(value)?value:undefined}
45
46
  const[year,month,day]=text.split("-").map(Number),end=edge==="high";const time=grid.local?new Date(year,month-1,day,end?23:0,end?59:0,end?59:0,end?999:0).getTime():Date.UTC(year,month-1,day,end?23:0,end?59:0,end?59:0,end?999:0);return Number.isFinite(time)?time:undefined};const wire=value=>value==null?null:date?new Date(value).toISOString():value;const current=(selection=panel.selection(facet))=>{return{low:selection.low==null?null:date?Date.parse(selection.low):selection.low,high:selection.high==null?null:date?Date.parse(selection.high):selection.high,lowOpen:!!selection.lowOpen,open:!!selection.open,locked:!!selection.locked}};const binChoice=index=>{const bin=state.bins[index],last=index===state.bins.length-1;if(date)return{low:Math.ceil(bin.start),high:last?bin.end:Math.ceil(bin.end)- 1,open:false};return{low:bin.start,high:bin.end,open:!last}};function submit(edge){const selection=panel.selection(facet),range=current(selection);const lowChanged=edge==="low"||from.input.value!==toInput(range.low),highChanged=edge==="high"||to.input.value!==toInput(range.high);const low=lowChanged?fromInput(from.input.value,"low"):range.low,high=highChanged?fromInput(to.input.value,"high"):range.high;if(low===undefined||high===undefined){setText(note,grid.labels.gridFacetInvalid);note.hidden=false;return}
@@ -54,11 +55,14 @@ const place=value=>Math.min(count-1,Math.floor((value-min)/ width));
54
55
  for(const value of counts.values||[])tallies[place(value)]++;for(const pair of pairs||[])tallies[place(pair.value)]+=pair.count;const highest=Math.max(1,...tallies);const bins=tallies.map((tally,index)=>({start:min+index*width,end:index===count-1?max:min +(index+1)*width,count:tally}));const sameBins=bins.length===state.bins.length&&bins.every((bin,index)=>bin.start===state.bins[index].start&&bin.end===state.bins[index].end);state.bins=bins;const bars=sameBins?Array.from(chart.children):bins.map(()=>h("span","cx-facet-bar"));bins.forEach((bin,index)=>{const last=index===count-1,bar=bars[index];const inside=(range.low==null||(last&&!range.lowOpen?bin.end>=range.low:bin.end>range.low))&&(range.high==null||(range.open?bin.start<range.high:bin.start<=range.high));bar.setAttribute("data-cx-bin",String(index));bar.style.height=Math.max(bin.count?6:0,Math.round(bin.count / highest * 100)) + "%";
55
56
  bar.classList.toggle("cx-facet-in",inside&&(range.low!=null||range.high!=null));bar.title=fill(grid.labels.gridFacetBin,{from:label(bin.start),to:label(bin.end),count:numbers.format(bin.count)})});if(!sameBins)chart.replaceChildren(...bars);setText(low,label(min));setText(high,label(max))}
56
57
  return{draw,search:()=>"",update(counts){state.counts=counts;draw()}}}
57
- let facetSeq=0;const FACET_ICON='<path d="M4 6h16M7 12h10M10 18h4"/>';Object.assign(DataGrid.prototype,{startFacets(){if(this.facetPanel)return;const options=this.facetOptions=facetOptions(this),id=this.id+"-facets-" + ++facetSeq,signal=this.lifetime.signal;this.facetColumns=options.facets.map(facet=>Object.assign(facet,{hosted:options.hosted}));this.facetOpen??=options.open;if(this.defaultState)this.defaultState.facets={open:options.open};const panel=this.facetPanel=h("aside","cx-host cx-chrome cx-facets"),head=h("div","cx-facets-h"),title=h("h2","cx-facets-title");const clear=gridButton(this.labels.gridClearAll,()=>this.facetClearAll()),toggle=gridButton("",()=>this.setFacetPanelOpen(!this.facetOpen));const list=h("div","cx-facets-list"),live=this.facetLive=h("p","cx-sr-only");panel.id=id;panel.setAttribute("aria-labelledby",id+"-title");title.id=id+"-title";setText(title,options.label||this.labels.gridFacetPanel);live.setAttribute("aria-live","polite");toggle.classList.add("cx-facets-toggle");toggle.setAttribute("aria-controls",id+"-list");list.id=id+"-list";toggle.appendChild(gridIcon(null,FACET_ICON));clear.classList.add("cx-facets-clear");this.facetClear=clear;toggle.hidden=!options.collapsible;head.append(title,clear,toggle);panel.append(head,list,live);panel.setAttribute("data-cx-position",options.position);panel.style.setProperty("--cx-facets-w",options.width+"px");this.facetSections=this.facetColumns.map(facet=>this.facetSection(facet,list));if(options.target)options.target.appendChild(panel);else{const frame=this.facetFrame=h("div","cx-facet-frame");frame.setAttribute("data-cx-position",options.position);this.host.before(frame);frame.append(panel,this.host)}
58
- this.facetTheme=watchOverlayTheme(this.host,panel,signal);const sheetButton=this.facetSheetButton=gridButton(this.labels.gridFacetPanel,()=>this.openFacetSheet());sheetButton.classList.add("cx-btn","cx-facets-open");sheetButton.prepend(gridIcon(null,FACET_ICON));sheetButton.hidden=true;sheetButton.setAttribute("aria-haspopup","dialog");const anchor=this.toolbar.querySelector(".cx-grid-filters")||this.toolbar.querySelector(".cx-grid-columns")||this.spacer;if(this.opts.toolbar===false)this.host.prepend(sheetButton);else if(anchor?.parentNode===this.toolbar)anchor.before(sheetButton);else this.toolbar.prepend(sheetButton);this.facetResize=new ResizeObserver(()=>requestAnimationFrame(()=>this.destroyed||this.facetFit()));this.facetResize.observe(this.facetFrame||this.host);if(this.facetFrame)this.facetResize.observe(this.host);this.host.addEventListener("canopyx:query",()=>{if(facetShape(this.acceptedQuery)!==this.facetCounted)this.facetRefresh()},{signal});this.host.addEventListener("canopyx:rowsChanged",()=>{clearTimeout(this.facetLiveTimer);this.facetLiveTimer=setTimeout(()=>this.facetRefresh(),300)},{signal});signal.addEventListener("abort",()=>this.facetDestroy(),{once:true});this.facetSync();this.facetFit();if(this.acceptedQuery)this.facetRefresh()},facetSection(facet,list){const section=h("section","cx-facet"),head=h("h3","cx-facet-h"),toggle=h("button","cx-facet-toggle"),name=h("span","cx-facet-name"),badge=h("span","cx-facet-badge");const clear=gridButton("",()=>this.facetApply(facet,facet.kind==="list"?[]:{low:null,high:null})),body=h("div","cx-facet-b"),custom=h("p","cx-facet-note cx-facet-custom");const failure=h("p","cx-facet-note cx-facet-error"),spoken=h("span","cx-sr-only");const bodyId=this.facetPanel.id+"-"+facet.column;section.setAttribute("data-cx-facet",facet.column);toggle.type="button";toggle.setAttribute("aria-controls",bodyId);body.id=bodyId;badge.setAttribute("aria-hidden","true");setText(name,facet.label);toggle.append(name,badge,spoken);head.appendChild(toggle);clear.classList.add("cx-facet-clear");clear.appendChild(gridIcon("close"));clear.setAttribute("aria-label",fill(this.labels.gridFacetClear,{column:facet.label}));clear.title=clear.getAttribute("aria-label");custom.hidden=true;custom.setAttribute("role","status");failure.hidden=true;failure.setAttribute("role","status");const facetView={grid:this,selection:target=>facetSelection(this.queryForChange(),target),apply:(target,choice)=>this.facetApply(target,choice),refresh:targets=>this.facetRefresh(targets)};const content=facet.kind==="list"?facetListBody(facetView,facet,body):facetRangeBody(facetView,facet,body);body.prepend(custom,failure);const collapsed=()=>{const closed=facet.collapsed;toggle.setAttribute("aria-expanded",String(!closed));body.hidden=closed;toggle.title=fill(this.labels[closed?"gridFacetExpand":"gridFacetCollapse"],{column:facet.label})};toggle.addEventListener("click",()=>{facet.collapsed=!facet.collapsed;collapsed()});collapsed();const top=h("div","cx-facet-top");top.append(head,clear);section.append(top,body);list.appendChild(section);return{facet,section,badge,spoken,clear,custom,failure,content,generation:0,controller:null}},facetApply(facet,choice){this.facetPending||=new Map();this.facetPending.set(facet.column,{facet,choice});clearTimeout(this.facetTimer);this.facetTimer=setTimeout(()=>this.facetFlush(),150)},facetFlush(){clearTimeout(this.facetTimer);this.facetTimer=0;const pending=this.facetPending;this.facetPending=null;if(!pending||this.destroyed)return Promise.resolve();let query=this.queryForChange(true);for(const{facet,choice}of pending.values())query=facetQuery(query,facet,choice);return this.setQuery(query).then(()=>this.facetAnnounce(),()=>{})},facetClearAll(){clearTimeout(this.facetTimer);this.facetPending=null;let query=this.queryForChange(true);for(const facet of this.facetColumns)query=facetQuery(query,facet,facet.kind==="list"?[]:{low:null,high:null});return this.setQuery(query).then(()=>this.facetAnnounce(),()=>{})},facetAnnounce(){const numbers=numberFormat(this.lang);setText(this.facetLive,"");setText(this.facetLive,fill(this.labels.gridFacetResult,{count:numbers.format(this.snapshot?.matched??0)}))},async facetRefresh(targets){if(!this.facetPanel||!this.acceptedQuery||this.destroyed)return;const query=this.acceptedQuery,run=targets?this.facetRun:this.facetRun=(this.facetRun||0)+ 1;if(!targets)this.facetCounted=facetShape(query);for(const section of this.facetSections){if(targets&&!targets.includes(section.facet))continue;section.controller?.abort();const controller=section.controller=new AbortController(),generation=++section.generation;const current=()=>!this.destroyed&&run===this.facetRun&&generation===section.generation;try{const counts=section.facet.hosted?await facetHostedCounts(this,section.facet,section.content.search(),controller.signal):facetInlineCounts(this,section.facet,query);if(current()){section.failure.hidden=true;section.content.update(counts)}}catch(error){if(current()&&error?.name!=="AbortError"){setText(section.failure,fill(this.labels.queryFailed,{error:error.message}));section.failure.hidden=false}}finally{if(section.controller===controller)section.controller=null;controller.abort()}
58
+ let facetSeq=0;const FACET_ICON='<path d="M4 6h16M7 12h10M10 18h4"/>';Object.assign(DataGrid.prototype,{startFacets(){if(this.facetPanel)return;const options=this.facetOptions=facetOptions(this),id=this.id+"-facets-" + ++facetSeq,signal=this.lifetime.signal;this.facetColumns=options.facets.map(facet=>Object.assign(facet,{hosted:options.hosted}));this.facetOpen??=options.open;if(this.defaultState)this.defaultState.facets={open:options.open};const panel=this.facetPanel=h("aside","cx-host cx-chrome cx-facets"),head=h("div","cx-facets-h"),title=h("h2","cx-facets-title");const clear=gridButton(this.labels.gridClearAll,()=>this.facetClearAll()),toggle=gridButton("",()=>this.setFacetPanelOpen(!this.facetOpen));const list=h("div","cx-facets-list"),live=this.facetLive=h("p","cx-sr-only");panel.id=id;panel.setAttribute("aria-labelledby",id+"-title");title.id=id+"-title";setText(title,options.label||this.labels.gridFacetPanel);live.setAttribute("aria-live","polite");toggle.classList.add("cx-facets-toggle");toggle.setAttribute("aria-controls",id+"-list");list.id=id+"-list";toggle.appendChild(gridIcon(null,FACET_ICON));clear.classList.add("cx-facets-clear");this.facetClear=clear;toggle.hidden=!options.collapsible;head.append(title,clear,toggle);panel.append(head,list,live);panel.setAttribute("data-cx-position",options.position);panel.style.setProperty("--cx-facets-w",options.width+"px");this.facetSections=this.facetColumns.map(facet=>this.facetSection(facet,list));if(options.position==="toolbar"&&!options.target)this.host.appendChild(panel);else if(options.target)options.target.appendChild(panel);else{const frame=this.facetFrame=h("div","cx-facet-frame");frame.setAttribute("data-cx-position",options.position);this.host.before(frame);frame.append(panel,this.host)}
59
+ this.facetTheme=watchOverlayTheme(this.host,panel,signal);const sheetButton=this.facetSheetButton=gridButton(this.labels.gridFacetPanel,()=>this.openFacetSheet());sheetButton.classList.add("cx-btn","cx-facets-open");sheetButton.prepend(gridIcon(null,FACET_ICON));sheetButton.hidden=true;sheetButton.setAttribute("aria-haspopup","dialog");const anchor=this.toolbar.querySelector(".cx-grid-filters")||this.toolbar.querySelector(".cx-grid-columns")||this.spacer;if(this.opts.toolbar===false)this.host.prepend(sheetButton);else if(anchor?.parentNode===this.toolbar)anchor.before(sheetButton);else this.toolbar.prepend(sheetButton);if(options.position==="toolbar"&&!options.target&&this.opts.toolbar!==false){this.facetToolbarControls=this.facetSections.map(section=>{const control=this.controlPanel(section.facet.label,"cx-grid-facet");control.panel.classList.add("cx-facets");control.panel.appendChild(section.section);section.facet.collapsed=false;section.section.querySelector(".cx-facet-b").hidden=false;section.section.querySelector(".cx-facet-toggle").setAttribute("aria-expanded","true");const summary=control.details.querySelector("summary");summary.classList.remove("ghost");summary.querySelector(".cx-ico")?.remove();if(anchor?.parentNode===this.toolbar)anchor.before(control.details);return{...control,summary,section}})}
60
+ this.facetResize=new ResizeObserver(()=>requestAnimationFrame(()=>this.destroyed||this.facetFit()));this.facetResize.observe(this.facetFrame||this.host);if(this.facetFrame)this.facetResize.observe(this.host);this.host.addEventListener("canopyx:query",()=>{if(facetShape(this.acceptedQuery)!==this.facetCounted)this.facetRefresh()},{signal});this.host.addEventListener("canopyx:rowsChanged",()=>{clearTimeout(this.facetLiveTimer);this.facetLiveTimer=setTimeout(()=>this.facetRefresh(),300)},{signal});signal.addEventListener("abort",()=>this.facetDestroy(),{once:true});this.facetSync();this.facetFit();if(this.acceptedQuery)this.facetRefresh()},facetSection(facet,list){const section=h("section","cx-facet"),head=h("h3","cx-facet-h"),toggle=h("button","cx-facet-toggle"),name=h("span","cx-facet-name"),badge=h("span","cx-facet-badge");const clear=gridButton("",()=>this.facetApply(facet,facet.kind==="list"?[]:{low:null,high:null})),body=h("div","cx-facet-b"),custom=h("p","cx-facet-note cx-facet-custom");const failure=h("p","cx-facet-note cx-facet-error"),spoken=h("span","cx-sr-only");const bodyId=this.facetPanel.id+"-"+facet.column;section.setAttribute("data-cx-facet",facet.column);toggle.type="button";toggle.setAttribute("aria-controls",bodyId);body.id=bodyId;badge.setAttribute("aria-hidden","true");setText(name,facet.label);toggle.append(name,badge,spoken);head.appendChild(toggle);clear.classList.add("cx-facet-clear");clear.appendChild(gridIcon("close"));clear.setAttribute("aria-label",fill(this.labels.gridFacetClear,{column:facet.label}));clear.title=clear.getAttribute("aria-label");custom.hidden=true;custom.setAttribute("role","status");failure.hidden=true;failure.setAttribute("role","status");const facetView={grid:this,selection:target=>facetSelection(this.queryForChange(),target),apply:(target,choice)=>this.facetApply(target,choice),refresh:targets=>this.facetRefresh(targets)};const content=facet.kind==="list"?facetListBody(facetView,facet,body):facetRangeBody(facetView,facet,body);body.prepend(custom,failure);const collapsed=()=>{const closed=facet.collapsed;toggle.setAttribute("aria-expanded",String(!closed));body.hidden=closed;toggle.title=fill(this.labels[closed?"gridFacetExpand":"gridFacetCollapse"],{column:facet.label})};toggle.addEventListener("click",()=>{facet.collapsed=!facet.collapsed;collapsed()});collapsed();const top=h("div","cx-facet-top");top.append(head,clear);section.append(top,body);list.appendChild(section);return{facet,section,badge,spoken,clear,custom,failure,content,generation:0,controller:null}},facetApply(facet,choice){this.facetPending||=new Map();this.facetPending.set(facet.column,{facet,choice});clearTimeout(this.facetTimer);this.facetTimer=setTimeout(()=>this.facetFlush(),150)},facetFlush(){clearTimeout(this.facetTimer);this.facetTimer=0;const pending=this.facetPending;this.facetPending=null;if(!pending||this.destroyed)return Promise.resolve();let query=this.queryForChange(true);for(const{facet,choice}of pending.values())query=facetQuery(query,facet,choice);return this.setQuery(query).then(()=>this.facetAnnounce(),()=>{})},facetClearAll(){clearTimeout(this.facetTimer);this.facetPending=null;let query=this.queryForChange(true);for(const facet of this.facetColumns)query=facetQuery(query,facet,facet.kind==="list"?[]:{low:null,high:null});return this.setQuery(query).then(()=>this.facetAnnounce(),()=>{})},facetAnnounce(){const numbers=numberFormat(this.lang);setText(this.facetLive,"");setText(this.facetLive,fill(this.labels.gridFacetResult,{count:numbers.format(this.snapshot?.matched??0)}))},async facetRefresh(targets){if(!this.facetPanel||!this.acceptedQuery||this.destroyed)return;const query=this.acceptedQuery,run=targets?this.facetRun:this.facetRun=(this.facetRun||0)+ 1;if(!targets)this.facetCounted=facetShape(query);for(const section of this.facetSections){if(targets&&!targets.includes(section.facet))continue;section.controller?.abort();const controller=section.controller=new AbortController(),generation=++section.generation;const current=()=>!this.destroyed&&run===this.facetRun&&generation===section.generation;try{const counts=section.facet.hosted?await facetHostedCounts(this,section.facet,section.content.search(),controller.signal):facetInlineCounts(this,section.facet,query);if(current()){section.failure.hidden=true;section.content.update(counts)}}catch(error){if(current()&&error?.name!=="AbortError"){setText(section.failure,fill(this.labels.queryFailed,{error:error.message}));section.failure.hidden=false}}finally{if(section.controller===controller)section.controller=null;controller.abort()}
59
61
  if(!section.facet.hosted)await new Promise(resolve=>setTimeout(resolve,0));if(this.destroyed||run!==this.facetRun)return}},facetSync(){if(!this.facetPanel)return;const query=this.queryForChange(),numbers=numberFormat(this.lang);let active=0;for(const section of this.facetSections||[]){const selection=facetSelection(query,section.facet),count=selection.values?selection.values.length:selection.custom||selection.low!=null||selection.high!=null?1:0;active +=count?1:0;setText(section.badge,selection.values?numbers.format(count):"");section.badge.hidden=!selection.values||!count;setText(section.spoken,section.badge.hidden?"":", "+fill(this.labels.gridFacetSelected,{count:numbers.format(count)}));section.clear.hidden=!count||!!selection.locked;section.section.classList.toggle("cx-facet-active",!!count);if(selection.custom){setText(section.custom,this.labels.gridFacetCustom);section.custom.hidden=false}
60
62
  else if(section.custom.textContent===this.labels.gridFacetCustom)section.custom.hidden=true;section.content.draw()}
61
- this.facetClear.hidden=!active;this.facetActive=active;if(this.facetSheetButton){this.facetSheetButton.querySelector(".badge")?.remove();if(active){const badge=h("span","badge");setText(badge,numbers.format(active));this.facetSheetButton.appendChild(badge)}}},facetFit(){const panel=this.facetPanel,options=this.facetOptions;if(!panel||this.facetSheet)return;const width=(this.facetFrame||this.host).clientWidth,fits=options.target?true:options.position==="side"?width>=options.width+480:width>640;this.facetFits=fits;panel.hidden=!fits;this.facetSheetButton.hidden=fits;this.facetFrame?.toggleAttribute("data-cx-sheet",!fits);panel.classList.toggle("cx-facets-closed",!this.facetOpen);panel.style.height=options.position==="side"&&this.facetFrame&&this.facetOpen?Math.max(360,this.host.offsetHeight)+ "px":"";const toggle=panel.querySelector(".cx-facets-toggle");toggle.setAttribute("aria-expanded",String(!!this.facetOpen));toggle.setAttribute("aria-label",this.labels[this.facetOpen?"gridFacetPanelHide":"gridFacetPanelShow"]);toggle.title=toggle.getAttribute("aria-label")},setFacetPanelOpen(open){if(typeof open!=="boolean")return Promise.reject(new Error("CanopyX: the facet panel's open state is a boolean."));if(open!==this.facetOpen){this.facetOpen=open;this.facetFit();this.stateChanged();this.emit("facetPanel",{open})}
63
+ this.facetClear.hidden=!active;this.facetActive=active;for(const control of this.facetToolbarControls||[]){const selection=facetSelection(query,control.section.facet),count=selection.values?.length||0;const value=count===1?cellText(selection.values[0],control.section.facet.def,this.fmt):count?numbers.format(count):"";setText(control.summary,control.section.facet.label +(value?": "+value:""));control.summary.classList.toggle("cx-facet-active",!!count||!!selection.custom||selection.low!=null||selection.high!=null)}
64
+ if(this.facetSheetButton){this.facetSheetButton.querySelector(".badge")?.remove();if(active){const badge=h("span","badge");setText(badge,numbers.format(active));this.facetSheetButton.appendChild(badge)}}},facetFit(){const panel=this.facetPanel,options=this.facetOptions;if(!panel||this.facetSheet)return;if(options.position==="toolbar"&&!options.target){panel.hidden=true;this.facetSheetButton.hidden=this.opts.toolbar!==false;return}
65
+ const width=(this.facetFrame||this.host).clientWidth,fits=options.target?true:options.position==="side"?width>=options.width+480:width>640;this.facetFits=fits;panel.hidden=!fits;this.facetSheetButton.hidden=fits;this.facetFrame?.toggleAttribute("data-cx-sheet",!fits);panel.classList.toggle("cx-facets-closed",!this.facetOpen);panel.style.height=options.position==="side"&&this.facetFrame&&this.facetOpen?Math.max(360,this.host.offsetHeight)+ "px":"";const toggle=panel.querySelector(".cx-facets-toggle");toggle.setAttribute("aria-expanded",String(!!this.facetOpen));toggle.setAttribute("aria-label",this.labels[this.facetOpen?"gridFacetPanelHide":"gridFacetPanelShow"]);toggle.title=toggle.getAttribute("aria-label")},setFacetPanelOpen(open){if(typeof open!=="boolean")return Promise.reject(new Error("CanopyX: the facet panel's open state is a boolean."));if(open!==this.facetOpen){this.facetOpen=open;this.facetFit();this.stateChanged();this.emit("facetPanel",{open})}
62
66
  return Promise.resolve(this.getFacetPanel())},getFacetPanel(){if(!this.facetPanel)return gridFreeze({open:this.facetOpen??null,columns:(this.facetColumns||[]).map(facet=>facet.column)});return gridFreeze({open:!!this.facetOpen,columns:this.facetColumns.map(facet=>facet.column),active:this.facetActive||0})},openFacetSheet(){if(this.facetSheet||!this.facetPanel)return;const sheet=this.facetSheet=h("dialog","cx-host cx-chrome cx-grid-overlay cx-facet-sheet"),head=h("div","cx-facet-sheet-h"),title=h("h2"),done=gridButton(this.labels.gridDone,()=>sheet.close());const panel=this.facetPanel,home=panel.parentNode,next=panel.nextSibling,returnFocus=document.activeElement;const disposeTheme=watchOverlayTheme(this.host,sheet,this.lifetime.signal);sheet.addEventListener("close",disposeTheme,{once:true});title.id=this.id+"-facet-sheet";sheet.setAttribute("aria-labelledby",title.id);setText(title,this.facetOptions.label||this.labels.gridFacetPanel);const clear=this.facetClear,clearHome=clear.parentNode,clearNext=clear.nextSibling;done.classList.add("cx-btn");head.append(title,clear,done);sheet.append(head,panel);panel.hidden=false;panel.classList.remove("cx-facets-closed");panel.classList.add("cx-facets-in-sheet");document.body.appendChild(sheet);this.facetTheme.refresh();sheet.addEventListener("close",()=>{if(this.facetPanel!==panel){sheet.remove();return}// The grid was destroyed meanwhile; the panel is gone.
63
- panel.classList.remove("cx-facets-in-sheet");home?.insertBefore(panel,next);this.facetTheme.refresh();clearHome.insertBefore(clear,clearNext);sheet.remove();this.facetSheet=null;this.facetFit();if(returnFocus?.isConnected)returnFocus.focus({preventScroll:true})},{once:true});sheet.showModal();done.focus()},facetDestroy(){clearTimeout(this.facetTimer);clearTimeout(this.facetLiveTimer);this.facetResize?.disconnect();this.facetTheme?.();this.facetTheme=null;for(const section of this.facetSections||[])section.controller?.abort();const sheet=this.facetSheet;this.facetSheet=null;this.facetPanel?.remove();this.facetSheetButton?.remove();this.facetPanel=null;if(sheet){sheet.close();sheet.remove()}
67
+ panel.classList.remove("cx-facets-in-sheet");home?.insertBefore(panel,next);this.facetTheme.refresh();clearHome.insertBefore(clear,clearNext);sheet.remove();this.facetSheet=null;this.facetFit();if(returnFocus?.isConnected)returnFocus.focus({preventScroll:true})},{once:true});sheet.showModal();done.focus()},facetDestroy(){clearTimeout(this.facetTimer);clearTimeout(this.facetLiveTimer);this.facetResize?.disconnect();this.facetTheme?.();this.facetTheme=null;for(const section of this.facetSections||[])section.controller?.abort();const sheet=this.facetSheet;this.facetSheet=null;this.facetPanel?.remove();this.facetSheetButton?.remove();this.facetPanel=null;for(const control of this.facetToolbarControls||[])control.details.remove();this.facetToolbarControls=null;if(sheet){sheet.close();sheet.remove()}
64
68
  if(this.facetFrame){this.facetFrame.replaceWith(this.host);this.facetFrame=null}}});const FACET_SUMMARY=DataGrid.prototype.syncQuerySummary;DataGrid.prototype.syncQuerySummary=function(){FACET_SUMMARY.call(this);if(this.facetPanel)this.facetSync()};const FACET_ZONE=DataGrid.prototype.setTimeZone;DataGrid.prototype.setTimeZone=function(zone){const result=FACET_ZONE.call(this,zone);if(this.facetPanel)this.facetSync();return result};installed.add(context.DataGrid.prototype)}};(global.CanopyXParts||=[]).push(["facets",part])})(typeof window!=="undefined"?window:globalThis);
package/CanopyX.Html/Assets/canopyx-filter-editor.css CHANGED
@@ -1,81 +1,72 @@
1
- .cx-pop-h{display:flex;align-items:center;justify-content:space-between;padding:var(--cx-size-10px) var(--cx-size-12px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));font-weight:700;}
2
- .cx-pop-h span{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-weight:400;}
3
- .cx-pop-b{padding:var(--cx-size-10px) var(--cx-size-12px);display:grid;gap:var(--cx-size-8px);}
4
- .cx-pop-f{display:flex;justify-content:space-between;align-items:center;padding:var(--cx-size-8px) var(--cx-size-12px);border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
5
- .cx-mi{display:flex;align-items:center;gap:var(--cx-size-10px);height:var(--hfx-menu-item-height,calc(32px - var(--cx-compact,0) * 4px));padding:0 var(--cx-size-10px);border-radius:var(--hfx-radius-sm,4px);color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));cursor:pointer;}
1
+ .cx-pop-h{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--hfx-space-1,0.25rem)*2.5) var(--hfx-space-3,0.75rem);border-bottom:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));font-weight:700;}
2
+ .cx-pop-h span{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-weight:400;}
3
+ .cx-pop-b{padding:calc(var(--hfx-space-1,0.25rem)*2.5) var(--hfx-space-3,0.75rem);display:grid;gap:var(--hfx-space-2,0.5rem);}
4
+ .cx-pop-f{display:flex;justify-content:space-between;align-items:center;padding:var(--hfx-space-2,0.5rem) var(--hfx-space-3,0.75rem);border-top:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
5
+ .cx-mi{display:flex;align-items:center;gap:calc(var(--hfx-space-1,0.25rem)*2.5);height:var(--hfx-menu-item-height,calc(32px - var(--cx-compact,0) * 4px));padding:0 calc(var(--hfx-space-1,0.25rem)*2.5);border-radius:var(--hfx-radius-sm,4px);color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));cursor:pointer;}
6
6
  .cx-mi:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
7
- .cx-mi .ico{width:var(--cx-size-16px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));display:inline-grid;place-items:center;}
7
+ .cx-mi .ico{width:var(--hfx-space-4,1rem);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));display:inline-grid;place-items:center;}
8
8
  .cx-mi.on .ico{color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
9
- .cx-input{height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));width:100%;border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));padding:0 var(--cx-size-10px);background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem)) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);display:flex;align-items:center;gap:var(--cx-size-8px);}
10
- .cx-input.sel::after{content:"";margin-left:auto;width:var(--cx-size-7px);height:var(--cx-size-7px);border-right:var(--cx-size-1d5px) solid var(--hfx-color-text-muted,light-dark(#626770,#8f949d));border-bottom:var(--cx-size-1d5px) solid var(--hfx-color-text-muted,light-dark(#626770,#8f949d));transform:rotate(45deg) translateY(var(--cx-size-neg-2px));}
11
- .cx-input .ph{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
12
- .cx-seg{display:inline-flex;border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));overflow:hidden;}
9
+ .cx-input{width:100%;display:flex;align-items:center;gap:var(--hfx-space-2,0.5rem);}
10
+ .cx-input.sel::after{content:"";margin-left:auto;width:calc(var(--hfx-space-1,0.25rem)*1.75);height:calc(var(--hfx-space-1,0.25rem)*1.75);border-right:calc(var(--hfx-border-width,1px)*1.5) solid var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));border-bottom:calc(var(--hfx-border-width,1px)*1.5) solid var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));transform:rotate(45deg) translateY(calc(var(--hfx-space-0-5,2px)*-1));}
11
+ .cx-input .ph{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
13
12
  .cx-grid-overlay.cx-phone{border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px)) var(--hfx-radius-control,var(--hfx-radius-md,6px)) 0 0;max-width:100%;}
14
- .cx-grid-overlay.cx-phone .cx-mi,.cx-grid-overlay.cx-phone .cx-val,.cx-grid-overlay.cx-phone .cx-input{min-height:var(--cx-size-44px);}
15
- .cx-grid-overlay.cx-phone .cx-button{min-height:var(--cx-size-44px);min-width:var(--cx-size-44px);}
16
- .cx-grid-overlay.cx-phone.cx-pop::before{content:"";display:block;width:var(--cx-size-32px);height:var(--cx-size-4px);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));margin:var(--cx-size-8px) auto;}
17
- .cx-data-grid.cx-phone .cx-cond,.cx-data-grid.cx-phone .cx-grid-filter-group .cx-cond{grid-template-columns:1fr 1fr var(--cx-size-32px)!important;}
13
+ .cx-grid-overlay.cx-phone .cx-mi,.cx-grid-overlay.cx-phone .cx-val,.cx-grid-overlay.cx-phone .cx-input{min-height:calc(var(--hfx-space-1,0.25rem)*11);}
14
+ .cx-grid-overlay.cx-phone .cx-button{min-height:calc(var(--hfx-space-1,0.25rem)*11);min-width:calc(var(--hfx-space-1,0.25rem)*11);}
15
+ .cx-grid-overlay.cx-phone.cx-pop::before{content:"";display:block;width:var(--hfx-space-6,2rem);height:var(--hfx-space-1,0.25rem);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));margin:var(--hfx-space-2,0.5rem) auto;}
16
+ .cx-data-grid.cx-phone .cx-cond,.cx-data-grid.cx-phone .cx-grid-filter-group .cx-cond{grid-template-columns:1fr 1fr var(--hfx-space-6,2rem)!important;}
18
17
  .cx-data-grid.cx-phone .cx-cond .w{grid-column:1/-1;text-align:left;}
19
- .cx-data-grid.cx-phone .cx-grid-filter > button.icon{grid-column:3;grid-row:2;min-height:var(--cx-size-44px);}
18
+ .cx-data-grid.cx-phone .cx-grid-filter > button.icon{grid-column:3;grid-row:2;min-height:calc(var(--hfx-space-1,0.25rem)*11);}
20
19
  .cx-data-grid.cx-phone .cx-adds{padding-left:0;}
21
- .cx-data-grid.cx-phone .cx-grid-filter-group{margin-left:var(--cx-size-4px);}
22
- .cx-fb{width:100%;max-width:var(--cx-size-640px);}
23
- .cx-fb .cx-pop-b{gap:var(--cx-size-10px);}
24
- .cx-cond{display:grid;grid-template-columns:var(--cx-size-56px) 1.2fr 1fr 1.2fr var(--cx-size-32px);gap:var(--cx-size-8px);align-items:start;}
25
- .cx-cond .w{font-size:var(--cx-size-13px);line-height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));text-align:right;}
26
- .cx-grid-filter-group{border-left:var(--cx-size-2px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));padding:var(--cx-size-8px) 0 var(--cx-size-8px) var(--cx-size-12px);margin-left:var(--cx-size-20px);display:grid;gap:var(--cx-size-8px);}
27
- .cx-group-h{display:flex;align-items:center;gap:var(--cx-size-8px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
28
- .cx-adds{display:flex;gap:var(--cx-size-14px);padding-left:var(--cx-size-64px);}
29
- .cx-grid-overlay.cx-pop{position:fixed;z-index:var(--hfx-z-popover,1000);margin:0;min-height:0;height:auto;padding:0;overflow:auto;display:block;border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));background:var(--hfx-color-surface-raised,light-dark(#ffffff,#1e2126));}
30
- .cx-grid-overlay.cx-column-menu{width:var(--cx-size-244px);padding:var(--cx-size-4px);}
20
+ .cx-data-grid.cx-phone .cx-grid-filter-group{margin-left:var(--hfx-space-1,0.25rem);}
21
+ .cx-fb{width:100%;max-width:640px;}
22
+ .cx-fb .cx-pop-b{gap:calc(var(--hfx-space-1,0.25rem)*2.5);}
23
+ .cx-cond{display:grid;grid-template-columns:calc(var(--hfx-space-1,0.25rem)*14) 1.2fr 1fr 1.2fr var(--hfx-space-6,2rem);gap:var(--hfx-space-2,0.5rem);align-items:start;}
24
+ .cx-cond .w{font-size:var(--hfx-type-small-size,0.8125rem);line-height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));text-align:right;}
25
+ .cx-grid-filter-group{border-left:calc(var(--hfx-border-width,1px)*2) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));padding:var(--hfx-space-2,0.5rem) 0 var(--hfx-space-2,0.5rem) var(--hfx-space-3,0.75rem);margin-left:calc(var(--hfx-space-1,0.25rem)*5);display:grid;gap:var(--hfx-space-2,0.5rem);}
26
+ .cx-group-h{display:flex;align-items:center;gap:var(--hfx-space-2,0.5rem);font-size:var(--hfx-type-small-size,0.8125rem);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
27
+ .cx-adds{display:flex;gap:calc(var(--hfx-space-1,0.25rem)*3.5);padding-left:calc(var(--hfx-space-1,0.25rem)*16);}
28
+ .cx-grid-overlay.cx-column-menu{width:244px;padding:var(--hfx-space-1,0.25rem);}
31
29
  .cx-grid-overlay.cx-column-menu .cx-mi{width:100%;border:0;background:transparent;font:inherit;text-align:left;}
32
30
  .cx-column-menu .cx-mi:hover,.cx-column-menu .cx-mi:focus-visible{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
33
- .cx-column-menu .cx-mi:disabled{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));cursor:default;}
34
- .cx-menu-rule{border:0;height:var(--cx-size-1px);background:var(--hfx-color-border,light-dark(#e2e4e7,#272a30));margin:var(--cx-size-4px) var(--cx-size-6px);}
35
- .cx-grid-overlay .cx-grid-field{display:flex;gap:var(--cx-size-9px);align-items:center;font:inherit;}
36
- .cx-grid-overlay input[type="checkbox"]{width:var(--cx-size-16px);height:var(--cx-size-16px);accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
37
- .cx-val-list{max-height:var(--cx-size-210px);overflow:auto;display:grid;gap:var(--cx-size-1px);margin-inline:var(--cx-size-neg-4px);}
38
- .cx-val,.cx-val-all{display:flex;align-items:center;gap:var(--cx-size-9px);min-height:var(--cx-size-30px);padding:0 var(--cx-size-4px);border-radius:var(--hfx-radius-sm,4px);}
31
+ .cx-column-menu .cx-mi:disabled{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));cursor:default;}
32
+ .cx-menu-rule{border:0;height:var(--hfx-border-width,1px);background:var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));margin:var(--hfx-space-1,0.25rem) var(--hfx-space-1-5,6px);}
33
+ .cx-grid-overlay .cx-grid-field{display:flex;gap:calc(var(--hfx-space-1,0.25rem)*2.25);align-items:center;font:inherit;}
34
+ .cx-grid-overlay input[type="checkbox"]{width:var(--hfx-space-4,1rem);height:var(--hfx-space-4,1rem);accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
35
+ .cx-val-list{max-height:210px;overflow:auto;display:grid;gap:var(--hfx-border-width,1px);margin-inline:calc(var(--hfx-space-1,0.25rem)*-1);}
36
+ .cx-val,.cx-val-all{display:flex;align-items:center;gap:calc(var(--hfx-space-1,0.25rem)*2.25);min-height:calc(var(--hfx-space-1,0.25rem)*7.5);padding:0 var(--hfx-space-1,0.25rem);border-radius:var(--hfx-radius-sm,4px);}
39
37
  .cx-val:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
40
- .cx-val-all{border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:0;margin:0 var(--cx-size-neg-4px) var(--cx-size-2px);}
41
- .cx-val-n{margin-left:auto;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-12d5px);font-variant-numeric:tabular-nums;}
38
+ .cx-val-all{border-bottom:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:0;margin:0 calc(var(--hfx-space-1,0.25rem)*-1) var(--hfx-space-0-5,2px);}
39
+ .cx-val-n{margin-left:auto;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:calc(var(--hfx-type-caption-size,0.75rem)*1.0417);font-variant-numeric:tabular-nums;}
42
40
  .cx-facet-value{min-width:0;overflow:hidden;text-overflow:ellipsis;}
43
- .cx-column-condition{display:flex;gap:var(--cx-size-8px);align-items:center;}
41
+ .cx-column-condition{display:flex;gap:var(--hfx-space-2,0.5rem);align-items:center;}
44
42
  .cx-column-condition > *{min-width:0;}
45
43
  .cx-column-condition select{flex:1;}
46
44
  .cx-column-condition input{flex:1.2;}
47
- .cx-column-conditions{display:grid;gap:var(--cx-size-8px);}
48
- .cx-grid-overlay .cx-pop-f .cx-button{border:0;background:transparent;color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));font:inherit;}
49
- .cx-grid-overlay .cx-pop-f .cx-button:last-child{color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
50
- .cx-data-grid .cx-grid-filters .cx-fb{width:var(--cx-size-640px);max-width:calc(var(--cx-size-100vw) - var(--cx-size-32px));}
45
+ .cx-column-conditions{display:grid;gap:var(--hfx-space-2,0.5rem);}
46
+ .cx-data-grid .cx-grid-filters .cx-fb{width:640px;max-width:calc(100vw - var(--hfx-space-6,2rem));}
51
47
  .cx-fb .cx-grid-filter{margin:0;padding:0;border:0;min-width:0;}
52
- .cx-fb .cx-grid-filter.cx-cond{display:grid;grid-template-columns:var(--cx-size-56px) 1.2fr 1fr 1.2fr var(--cx-size-32px);gap:var(--cx-size-8px);}
48
+ .cx-fb .cx-grid-filter.cx-cond{display:grid;grid-template-columns:calc(var(--hfx-space-1,0.25rem)*14) 1.2fr 1fr 1.2fr var(--hfx-space-6,2rem);gap:var(--hfx-space-2,0.5rem);}
53
49
  .cx-fb .cx-grid-filter > .cx-grid-field{display:block;min-width:0;padding:0;font-size:0;}
54
- .cx-fb .cx-grid-filter > .cx-grid-field > :is(input,select){width:100%;min-width:0;height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0 var(--cx-size-10px);font:var(--cx-size-14px) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
55
- .cx-fb .cx-condition-rows,.cx-fb .cx-grid-filter-group-children{display:grid;gap:var(--cx-size-8px);}
56
- .cx-fb .cx-seg button{padding:var(--cx-size-3px) var(--cx-size-10px);font-size:var(--cx-size-12d5px);font-weight:700;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));border:0;background:transparent;text-transform:lowercase;}
57
- .cx-fb .cx-seg button.on{background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
58
- .cx-column-menu .cx-mi{justify-content:flex-start;gap:var(--cx-size-10px);}
59
- .cx-fb .cx-seg button + button{border-left:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));}
50
+ .cx-fb .cx-grid-filter > .cx-grid-field > :is(input,select){width:100%;min-width:0;height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0 calc(var(--hfx-space-1,0.25rem)*2.5);font:var(--hfx-type-body-size,0.875rem) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);border:var(--hfx-border-width,1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
51
+ .cx-fb .cx-condition-rows,.cx-fb .cx-grid-filter-group-children{display:grid;gap:var(--hfx-space-2,0.5rem);}
52
+ .cx-column-menu .cx-mi{justify-content:flex-start;gap:calc(var(--hfx-space-1,0.25rem)*2.5);}
60
53
  .cx-fb .cx-group-h .icon{margin-left:auto;}
61
54
  .cx-fb .cx-grid-filter > button.icon{grid-column:5;grid-row:1;padding:0;}
62
- .cx-ms{font-size:var(--cx-size-14px);}
55
+ .cx-ms{font-size:var(--hfx-type-body-size,0.875rem);}
63
56
  .cx-ms > summary{list-style:none;cursor:pointer;}
64
57
  .cx-ms > summary::-webkit-details-marker{display:none;}
65
58
  .cx-ms > summary > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
66
- .cx-ms-list{margin-top:var(--cx-size-4px);padding:var(--cx-size-6px);display:grid;gap:var(--cx-size-6px);border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
59
+ .cx-ms-list{margin-top:var(--hfx-space-1,0.25rem);padding:var(--hfx-space-1-5,6px);display:grid;gap:var(--hfx-space-1-5,6px);border:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
67
60
  .cx-ms-list > .cx-input{width:100%;height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));}
68
- .cx-fb .cx-filter-text{width:100%;min-height:var(--cx-size-160px);font:var(--cx-size-12d5px) var(--hfx-font-mono,"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace);color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));}
69
- .cx-grid-overlay.cx-column-filter{width:var(--cx-size-280px);}
61
+ .cx-fb .cx-filter-text{width:100%;min-height:160px;font:calc(var(--hfx-type-caption-size,0.75rem)*1.0417) var(--hfx-font-mono,"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace);color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));border:var(--hfx-border-width,1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));}
62
+ .cx-grid-overlay.cx-column-filter{width:280px;}
70
63
  .cx-grid-overlay .cx-grid-control-error:empty{display:none;}
71
- .cx-grid-overlay .cx-button{min-height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0 var(--cx-size-10px);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));font:inherit;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));cursor:pointer;}
72
- .cx-grid-overlay .cx-button.icon{width:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0;}
73
64
  .cx-data-grid .cx-grid-filters > .cx-fb{position:fixed;display:flex;flex-flow:column nowrap;gap:0;padding:0;overflow:hidden;}
74
65
  .cx-data-grid.cx-phone .cx-grid-filters > .cx-fb{inset:0!important;max-height:none!important;border-radius:0;}
75
66
  .cx-data-grid.cx-phone .cx-grid-filters > .cx-fb::before{display:none;}
76
67
  .cx-data-grid .cx-fb .cx-grid-filter-form{display:flex;flex-direction:column;flex:1;min-height:0;gap:0;}
77
- .cx-data-grid .cx-fb .cx-grid-filter-form > .cx-pop-b{display:grid;padding:var(--cx-size-14px) var(--cx-size-16px);flex:1;min-height:0;overflow:auto;}
78
- .cx-data-grid .cx-fb .cx-grid-filter-form > .cx-pop-f{display:flex;flex-direction:row;justify-content:space-between;padding:var(--cx-size-8px) var(--cx-size-12px);}
68
+ .cx-data-grid .cx-fb .cx-grid-filter-form > .cx-pop-b{display:grid;padding:calc(var(--hfx-space-1,0.25rem)*3.5) var(--hfx-space-4,1rem);flex:1;min-height:0;overflow:auto;}
69
+ .cx-data-grid .cx-fb .cx-grid-filter-form > .cx-pop-f{display:flex;flex-direction:row;justify-content:space-between;padding:var(--hfx-space-2,0.5rem) var(--hfx-space-3,0.75rem);}
79
70
  .cx-data-grid .cx-fb .cx-grid-filter{border:0;padding:0;}
80
71
  .cx-data-grid .cx-fb .cx-grid-filter .cx-grid-field{min-width:0;font-size:0;}
81
72
  .cx-data-grid .cx-fb .cx-grid-filter .cx-condition-column{grid-column:2;grid-row:1;}
@@ -86,47 +77,42 @@
86
77
  .cx-data-grid.cx-phone .cx-fb .cx-cond .cx-condition-operator{grid-column:2;grid-row:2;}
87
78
  .cx-data-grid.cx-phone .cx-fb .cx-cond .cx-condition-value{grid-column:1/3;grid-row:3;}
88
79
  .cx-data-grid.cx-phone .cx-fb .cx-cond .cx-condition-type{grid-column:1;grid-row:4;}
89
- .cx-data-grid .cx-fb .cx-pop-f > .cx-button{border:0;background:transparent;color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
90
- .cx-data-grid .cx-fb .cx-pop-f > .cx-button:last-child{background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));}
91
- .cx-text-dialog{width:calc(100% - var(--cx-size-32px));max-width:var(--cx-size-640px);max-height:var(--cx-size-80vh);padding:0;border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));}
92
- .cx-text-dialog .cx-drawer-h{display:flex;align-items:center;gap:var(--cx-size-12px);padding:var(--cx-size-14px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
93
- .cx-text-dialog h4{margin:0;font-size:var(--cx-size-17px);flex:1;}
94
- .cx-text-dialog pre{padding:var(--cx-size-16px);margin:0;max-height:var(--cx-size-60vh);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;}
80
+ .cx-text-dialog pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;}
95
81
  .cx-text-dialog pre.p-mono{font-family:var(--hfx-font-mono,"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace);}
96
- .cx-text-dialog::backdrop{background:var(--hfx-color-overlay,light-dark(rgba(22,24,28,0.42),rgba(0,0,0,0.66)));}
97
- .cx-data-grid .cx-grid-filter-form,.cx-data-grid .cx-grid-filter-form > div,.cx-data-grid .cx-grid-filter{display:flex;flex-direction:column;gap:var(--cx-size-8px);width:100%;min-width:0;}
98
- .cx-data-grid .cx-grid-filter{border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));padding:var(--cx-size-8px);}
82
+ .cx-data-grid .cx-grid-filter-form,.cx-data-grid .cx-grid-filter-form > div,.cx-data-grid .cx-grid-filter{display:flex;flex-direction:column;gap:var(--hfx-space-2,0.5rem);width:100%;min-width:0;}
83
+ .cx-data-grid .cx-grid-filter{border:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));padding:var(--hfx-space-2,0.5rem);}
84
+ .cx-reporting-text [data-hfx-part="footer"] > button{min-inline-size:calc(var(--hfx-space-6,2rem)*3);}
85
+ .cx-reporting-text[data-phone="true"] [data-hfx-part="footer"] > button{flex:1;}
86
+ @media (max-height:360px){
87
+ .cx-reporting-text [data-hfx-part="header"]{min-block-size:0;padding-block:var(--hfx-space-2,0.5rem);}
88
+ .cx-reporting-text [data-hfx-part="body"],.cx-reporting-text [data-hfx-part="footer"]{padding-block:var(--hfx-space-2,0.5rem);}
89
+ }
99
90
  .cx-grid-column-choice{display:flex;align-items:center;border-radius:var(--hfx-radius-sm,4px);}
100
91
  .cx-grid-column-choice label{flex:1;min-width:0;white-space:nowrap;}
101
92
  .cx-grid-column-name{flex:1;overflow:hidden;text-overflow:ellipsis;}
102
- :is(.cx-grid-column-note,.cx-grid-column-handle){flex:none;padding:0 var(--cx-size-6px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-12px);white-space:nowrap;}
103
- .cx-grid-column-handle{height:var(--cx-size-28px);border:0;background:none;cursor:grab;touch-action:none;}
104
- .cx-grid-column-choice.cx-drop-before{box-shadow:inset 0 var(--cx-size-2px) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
105
- .cx-grid-column-choice.cx-drop-after{box-shadow:inset 0 var(--cx-size-neg-2px) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
106
- .cx-grid-column-actions{display:flex;justify-content:space-between;margin-top:var(--cx-size-4px);padding-top:var(--cx-size-4px);border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
93
+ :is(.cx-grid-column-note,.cx-grid-column-handle){flex:none;padding:0 var(--hfx-space-1-5,6px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--hfx-type-caption-size,0.75rem);white-space:nowrap;}
94
+ .cx-grid-column-handle{height:calc(var(--hfx-space-1,0.25rem)*7);border:0;background:none;cursor:grab;touch-action:none;}
95
+ .cx-grid-column-choice.cx-drop-before{box-shadow:inset 0 var(--hfx-space-0-5,2px) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
96
+ .cx-grid-column-choice.cx-drop-after{box-shadow:inset 0 calc(var(--hfx-space-0-5,2px)*-1) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
97
+ .cx-grid-column-actions{display:flex;justify-content:space-between;margin-top:var(--hfx-space-1,0.25rem);padding-top:var(--hfx-space-1,0.25rem);border-top:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
107
98
  .cx-grid-column-actions .cx-button{border:0;color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));background:none;}
108
- .cx-drawer{width:100%;max-width:var(--cx-size-440px);background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));font:var(--cx-size-14px)/1.45 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));overflow:hidden;}
109
- .cx-drawer-h{display:flex;align-items:flex-start;gap:var(--cx-size-12px);padding:var(--cx-size-14px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
110
- .cx-drawer-h h4{margin:0;font-size:var(--cx-size-17px);width:fit-content;}
111
- .cx-drawer-h p{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-13px);}
112
- .cx-drawer-h .cx-btn{margin-left:auto;}
113
- .cx-dl{display:grid;grid-template-columns:var(--cx-size-140px) 1fr;gap:var(--cx-size-8px) var(--cx-size-16px);padding:var(--cx-size-14px) var(--cx-size-16px);margin:0;}
114
- .cx-dl dt{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-13px);padding-top:var(--cx-size-1px);}
99
+ @layer hfx.components{
100
+ .cx-drawer-h h4{width:fit-content;}
101
+ .cx-drawer-h p{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--hfx-type-small-size,0.8125rem);}
102
+ .cx-drawer-h .cx-btn{margin-inline-start:auto;}
103
+ .cx-dl{display:grid;grid-template-columns:calc(var(--hfx-space-1,0.25rem)*35) 1fr;gap:var(--hfx-space-2,0.5rem) var(--hfx-space-4,1rem);padding:calc(var(--hfx-space-1,0.25rem)*3.5) 0;margin:0;}
104
+ .cx-dl dt{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--hfx-type-small-size,0.8125rem);padding-block-start:var(--hfx-border-width,1px);}
115
105
  .cx-dl dd{margin:0;}
116
- .cx-drawer-s{padding:var(--cx-size-4px) var(--cx-size-16px) 0;font-size:var(--cx-size-11d5px);letter-spacing:var(--cx-size-d06em);text-transform:uppercase;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-weight:700;}
117
- body .cx-host.cx-drawer{position:fixed;left:auto;right:var(--cx-size-12px);top:var(--cx-size-12px);bottom:var(--cx-size-12px);margin:0;width:calc(100% - var(--cx-size-24px));max-width:var(--cx-size-440px);height:calc(100% - var(--cx-size-24px));padding:0;display:flex;flex-direction:column;z-index:1000;}
118
- .cx-drawer-body{overflow:auto;flex:1;}
119
- .cx-drawer .cx-drawer-h > div{flex:1;min-width:0;}
120
- .cx-drawer .cx-drawer-h{flex:none;}
121
- .cx-drawer .cx-drawer-h p{margin:var(--cx-size-4px) 0 0;overflow-wrap:anywhere;}
122
- .cx-drawer dd{overflow-wrap:anywhere;min-width:0;}
106
+ .cx-drawer-s{padding:var(--hfx-space-1,0.25rem) 0 0;font-size:calc(var(--hfx-type-caption-size,0.75rem)*.9583);letter-spacing:.06em;text-transform:uppercase;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-weight:700;}
107
+ .cx-drawer .cx-drawer-h > div{flex:1;min-inline-size:0;}
108
+ .cx-drawer .cx-drawer-h p{margin:var(--hfx-space-1,0.25rem) 0 0;overflow-wrap:anywhere;}
109
+ .cx-drawer dd{overflow-wrap:anywhere;min-inline-size:0;}
123
110
  .cx-drawer .cx-button{flex:none;}
124
- .cx-drawer :is(.p-strip,.p-spark,.p-line){max-width:100%;}
125
- body .cx-host.cx-drawer.cx-phone{inset:0;width:100%;max-width:none;height:100%;max-height:none;border-radius:var(--hfx-radius-none,0);}
126
- .cx-drawer.cx-phone .cx-dl{grid-template-columns:1fr;gap:var(--cx-size-2px) 0;}
127
- .cx-drawer.cx-phone dd{margin-bottom:var(--cx-size-8px);}
128
- .cx-drawer.cx-phone .cx-button{min-height:var(--cx-size-44px);min-width:var(--cx-size-44px);}
129
- .cx-drawer::backdrop{background:var(--hfx-color-overlay,light-dark(rgba(22,24,28,0.42),rgba(0,0,0,0.66)));}
130
- .cx-grid-overlay{color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem))/1.45 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);}
131
- body .cx-host.cx-grid-overlay{height:auto;min-height:0;padding:0;}
111
+ .cx-drawer :is(.p-strip,.p-spark,.p-line){max-inline-size:100%;}
112
+ .cx-drawer[data-phone="true"] .cx-dl{grid-template-columns:1fr;gap:var(--hfx-space-0-5,2px) 0;}
113
+ .cx-drawer[data-phone="true"] dd{margin-block-end:var(--hfx-space-2,0.5rem);}
114
+ .cx-drawer[data-phone="true"] .cx-button{min-block-size:calc(var(--hfx-space-1,0.25rem)*11);min-inline-size:calc(var(--hfx-space-1,0.25rem)*11);}
115
+ }
116
+ .cx-grid-overlay{color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));font:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem))/1.45 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);}
117
+ body .cx-host.cx-grid-overlay:not(.cx-drawer){height:auto;min-height:0;padding:0;}
132
118
  .cx-grid-overlay [hidden]{display:none!important;}