@genesislcap/grid-pro 15.62.0-GENC-1660.2 → 15.63.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +36 -4
- package/dist/dts/column-selection/column-selection.d.ts +11 -2
- package/dist/dts/column-selection/column-selection.d.ts.map +1 -1
- package/dist/dts/column-selection/column-selection.styles.d.ts.map +1 -1
- package/dist/dts/column-selection/column-selection.template.d.ts.map +1 -1
- package/dist/dts/grid-pro.d.ts +1 -1
- package/dist/dts/grid-pro.d.ts.map +1 -1
- package/dist/dts/grid-pro.template.d.ts.map +1 -1
- package/dist/esm/column-selection/column-selection.js +25 -4
- package/dist/esm/column-selection/column-selection.styles.js +197 -11
- package/dist/esm/column-selection/column-selection.template.js +9 -3
- package/dist/esm/grid-pro.js +3 -3
- package/dist/esm/grid-pro.template.js +7 -5
- package/dist/grid-pro.api.json +63 -2
- package/dist/grid-pro.d.ts +12 -3
- package/package.json +12 -12
|
@@ -2166,7 +2166,7 @@
|
|
|
2166
2166
|
"text": "boolean"
|
|
2167
2167
|
},
|
|
2168
2168
|
"default": "false",
|
|
2169
|
-
"description": "Shows a
|
|
2169
|
+
"description": "Shows a Columns side panel on the trailing edge of the grid.",
|
|
2170
2170
|
"privacy": "public"
|
|
2171
2171
|
},
|
|
2172
2172
|
{
|
|
@@ -3175,7 +3175,7 @@
|
|
|
3175
3175
|
"text": "boolean"
|
|
3176
3176
|
},
|
|
3177
3177
|
"default": "false",
|
|
3178
|
-
"description": "Shows a
|
|
3178
|
+
"description": "Shows a Columns side panel on the trailing edge of the grid.",
|
|
3179
3179
|
"fieldName": "enableColumnSelection"
|
|
3180
3180
|
}
|
|
3181
3181
|
],
|
|
@@ -9308,14 +9308,14 @@
|
|
|
9308
9308
|
{
|
|
9309
9309
|
"kind": "variable",
|
|
9310
9310
|
"name": "columnSelectionStyles",
|
|
9311
|
-
"default": "css`\n :host {\n display: inline-flex;\n align-items: center;\n }\n\n .column-selection {\n display: inline-flex;\n align-items: center;\n }\n\n .column-selection-button[data-state='hover'] {\n background: var(--neutral-fill-hover);\n }\n\n .column-selection-panel,\n .column-selection-panel *,\n .column-selection-panel *::before,\n .column-selection-panel *::after {\n box-sizing: border-box;\n }\n\n .column-selection-panel {\n inset: unset;\n margin: 0;\n box-sizing: border-box;\n width: 280px;\n max-width: min(280px, 90vw);\n max-height: 80dvh;\n overflow-y: auto;\n border: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));\n border-radius: calc(var(--control-corner-radius, 4) * 1px);\n background: var(--neutral-layer-floating, var(--neutral-layer-2, #fff));\n box-shadow: 0 8px 24px rgb(0 0 0 / 18%);\n padding: 0;\n position-area: block-end span-inline-start;\n position-try-fallbacks: flip-block, flip-inline;\n margin-block-start: calc(var(--design-unit, 4) * 1px);\n min-width: 200px;\n color: var(--ag-foreground-color, var(--neutral-foreground-rest));\n font-family: var(--ag-font-family, var(--body-font));\n font-size: var(--ag-data-font-size, var(--type-ramp-minus-1-font-size));\n }\n\n .column-selection-panel:popover-open {\n display: flex;\n flex-direction: column;\n }\n\n .grid-pro-columns-toolbar {\n display: flex;\n align-items: center;\n gap: calc(var(--design-unit) * 2px);\n flex: none;\n width: 100%;\n height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);\n min-height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);\n margin: 0;\n padding: 0 calc(var(--design-unit) * 2px);\n border-bottom: var(--ag-borders-secondary, 1px solid)\n var(--ag-secondary-border-color, var(--ag-border-color, var(--neutral-stroke-divider-rest)));\n }\n\n .grid-pro-columns-toolbar .grid-pro-columns-search {\n flex: 1 1 auto;\n min-width: 0;\n width: auto;\n display: block;\n\n --design-unit: 3;\n }\n\n .grid-pro-columns-toolbar > .grid-pro-columns-search {\n flex: 1 1 auto !important;\n height: auto !important;\n min-height: 0 !important;\n }\n\n .grid-pro-columns-select-all {\n flex: 0 0 auto;\n margin: 0;\n\n --design-unit: 3;\n }\n\n .grid-pro-columns-select-all.indeterminate::part(control),\n .grid-pro-columns-select-all[aria-checked='mixed']::part(control) {\n background: var(--neutral-fill-strong-rest, var(--neutral-stroke-rest, #9aa0a6));\n border-color: var(--neutral-fill-strong-rest, var(--neutral-stroke-rest, #9aa0a6));\n }\n\n .grid-pro-columns-select-all.indeterminate:not([disabled]):hover::part(control),\n .grid-pro-columns-select-all[aria-checked='mixed']:not([disabled]):hover::part(control) {\n background: var(--neutral-fill-strong-hover, var(--neutral-stroke-hover, #7d848c));\n border-color: var(--neutral-fill-strong-hover, var(--neutral-stroke-hover, #7d848c));\n }\n\n .grid-pro-columns-select-all.indeterminate::part(checked-indicator),\n .grid-pro-columns-select-all[aria-checked='mixed']::part(checked-indicator) {\n opacity: 0%;\n }\n\n .grid-pro-columns-select-all.indeterminate::part(indeterminate-indicator),\n .grid-pro-columns-select-all[aria-checked='mixed']::part(indeterminate-indicator) {\n width: 10px;\n height: 2px;\n border-radius: 1px;\n background: var(--neutral-fill-input-rest, #fff);\n opacity: 100%;\n }\n\n .grid-pro-columns-select-all.indeterminate:not([disabled]):hover::part(indeterminate-indicator),\n .grid-pro-columns-select-all[aria-checked='mixed']:not([disabled]):hover::part(\n indeterminate-indicator\n ) {\n background: var(--neutral-fill-input-rest, #fff);\n }\n\n .grid-pro-columns-list {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1 1 0;\n min-height: 250px;\n max-height: 400px;\n padding: 8px;\n }\n\n .grid-pro-columns-section {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 0 0 auto;\n }\n\n .grid-pro-columns-item {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n border-radius: 4px;\n cursor: default;\n user-select: none;\n }\n\n .grid-pro-columns-item.dragging {\n opacity: 50%;\n }\n\n .grid-pro-columns-item.drag-over {\n background: var(--ag-row-hover-color, var(--neutral-fill-hover));\n }\n\n .grid-pro-columns-handle {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n min-height: 24px;\n margin: -4px 0;\n padding: 4px 6px;\n box-sizing: border-box;\n opacity: 45%;\n letter-spacing: -1px;\n font-size: 12px;\n line-height: 1;\n touch-action: none;\n }\n\n .grid-pro-columns-handle[draggable='true'],\n .grid-pro-columns-handle.grid-pro-columns-handle-grid-drag,\n .grid-pro-columns-handle.grid-pro-columns-handle-panel-drag {\n cursor: grab;\n opacity: 65%;\n }\n\n .grid-pro-columns-handle[draggable='true']:active,\n .grid-pro-columns-handle.grid-pro-columns-handle-grid-drag:active,\n .grid-pro-columns-handle.grid-pro-columns-handle-panel-drag:active {\n cursor: grabbing;\n }\n\n .grid-pro-columns-checkbox {\n flex: 0 0 auto;\n margin: 0;\n\n --design-unit: 3;\n }\n\n .grid-pro-columns-checkbox[aria-checked='true']:not([disabled]):hover::part(checked-indicator) {\n fill: var(--foreground-on-accent-hover);\n }\n\n .grid-pro-columns-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`",
|
|
9311
|
+
"default": "css`\n :host {\n display: inline-flex;\n align-items: center;\n }\n\n .column-selection {\n display: inline-flex;\n align-items: center;\n }\n\n .column-selection-button[data-state='hover'] {\n background: var(--neutral-fill-hover);\n }\n\n .column-selection-panel,\n .column-selection-panel *,\n .column-selection-panel *::before,\n .column-selection-panel *::after {\n box-sizing: border-box;\n }\n\n .column-selection-panel {\n inset: unset;\n margin: 0;\n box-sizing: border-box;\n width: 280px;\n max-width: min(280px, 90vw);\n max-height: 80dvh;\n overflow-y: auto;\n border: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));\n border-radius: calc(var(--control-corner-radius, 4) * 1px);\n background: var(--neutral-layer-floating, var(--neutral-layer-2, #fff));\n box-shadow: 0 8px 24px rgb(0 0 0 / 18%);\n padding: 0;\n /* stylelint-disable-next-line property-no-unknown -- CSS anchor positioning */\n position-area: block-end span-inline-start;\n /* stylelint-disable-next-line property-no-unknown -- CSS anchor positioning */\n position-try-fallbacks: flip-block, flip-inline;\n margin-block-start: calc(var(--design-unit, 4) * 1px);\n min-width: 200px;\n color: var(--ag-foreground-color, var(--neutral-foreground-rest));\n font-family: var(--ag-font-family, var(--body-font));\n font-size: var(--ag-data-font-size, var(--type-ramp-minus-1-font-size));\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-no-unknown -- Popover API */\n .column-selection-panel:popover-open {\n display: flex;\n flex-direction: column;\n }\n\n .grid-pro-columns-toolbar {\n display: flex;\n align-items: center;\n gap: calc(var(--design-unit) * 2px);\n flex: none;\n width: 100%;\n height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);\n min-height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);\n margin: 0;\n padding: 0 calc(var(--design-unit) * 2px);\n border-bottom: var(--ag-borders-secondary, 1px solid)\n var(--ag-secondary-border-color, var(--ag-border-color, var(--neutral-stroke-divider-rest)));\n }\n\n .grid-pro-columns-toolbar .grid-pro-columns-search {\n flex: 1 1 auto;\n min-width: 0;\n width: auto;\n display: block;\n\n --design-unit: 3;\n }\n\n .grid-pro-columns-toolbar > .grid-pro-columns-search {\n flex: 1 1 auto !important;\n height: auto !important;\n min-height: 0 !important;\n }\n\n .grid-pro-columns-select-all {\n flex: 0 0 auto;\n margin: 0;\n\n --design-unit: 3;\n }\n\n .grid-pro-columns-select-all.indeterminate::part(control),\n .grid-pro-columns-select-all[aria-checked='mixed']::part(control) {\n background: var(--neutral-fill-strong-rest, var(--neutral-stroke-rest, #9aa0a6));\n border-color: var(--neutral-fill-strong-rest, var(--neutral-stroke-rest, #9aa0a6));\n }\n\n .grid-pro-columns-select-all.indeterminate:not([disabled]):hover::part(control),\n .grid-pro-columns-select-all[aria-checked='mixed']:not([disabled]):hover::part(control) {\n background: var(--neutral-fill-strong-hover, var(--neutral-stroke-hover, #7d848c));\n border-color: var(--neutral-fill-strong-hover, var(--neutral-stroke-hover, #7d848c));\n }\n\n .grid-pro-columns-select-all.indeterminate::part(checked-indicator),\n .grid-pro-columns-select-all[aria-checked='mixed']::part(checked-indicator) {\n opacity: 0%;\n }\n\n .grid-pro-columns-select-all.indeterminate::part(indeterminate-indicator),\n .grid-pro-columns-select-all[aria-checked='mixed']::part(indeterminate-indicator) {\n width: 10px;\n height: 2px;\n border-radius: 1px;\n background: var(--neutral-fill-input-rest, #fff);\n opacity: 100%;\n }\n\n .grid-pro-columns-select-all.indeterminate:not([disabled]):hover::part(indeterminate-indicator),\n .grid-pro-columns-select-all[aria-checked='mixed']:not([disabled]):hover::part(\n indeterminate-indicator\n ) {\n background: var(--neutral-fill-input-rest, #fff);\n }\n\n .grid-pro-columns-list {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1 1 0;\n min-height: 250px;\n max-height: 400px;\n padding: 8px;\n scrollbar-color: var(--ag-scrollbar-handle, var(--neutral-layer-1))\n var(--ag-scrollbar-background, var(--neutral-layer-4));\n }\n\n .grid-pro-columns-list:hover {\n scrollbar-color: var(--neutral-fill-rest) var(--ag-scrollbar-background, var(--neutral-layer-4));\n }\n\n .grid-pro-columns-section {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 0 0 auto;\n }\n\n .grid-pro-columns-item {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n border-radius: 4px;\n cursor: default;\n user-select: none;\n }\n\n .grid-pro-columns-item.dragging {\n opacity: 50%;\n }\n\n .grid-pro-columns-item.drag-over {\n background: var(--ag-row-hover-color, var(--neutral-fill-hover));\n }\n\n .grid-pro-columns-handle {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n min-height: 24px;\n margin: -4px 0;\n padding: 4px 6px;\n box-sizing: border-box;\n opacity: 45%;\n letter-spacing: -1px;\n font-size: 12px;\n line-height: 1;\n touch-action: none;\n }\n\n .grid-pro-columns-handle[draggable='true'],\n .grid-pro-columns-handle.grid-pro-columns-handle-grid-drag,\n .grid-pro-columns-handle.grid-pro-columns-handle-panel-drag {\n cursor: grab;\n opacity: 65%;\n }\n\n .grid-pro-columns-handle[draggable='true']:active,\n .grid-pro-columns-handle.grid-pro-columns-handle-grid-drag:active,\n .grid-pro-columns-handle.grid-pro-columns-handle-panel-drag:active {\n cursor: grabbing;\n }\n\n .grid-pro-columns-checkbox {\n flex: 0 0 auto;\n margin: 0;\n\n --design-unit: 3;\n }\n\n .grid-pro-columns-checkbox[aria-checked='true']:not([disabled]):hover::part(checked-indicator) {\n fill: var(--foreground-on-accent-hover);\n }\n\n .grid-pro-columns-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n :host([docked]) {\n --column-selection-tab-width: calc(var(--ag-icon-size, 16px) + var(--ag-grid-size, 4px) * 2);\n\n position: relative;\n display: flex;\n align-self: stretch;\n overflow: visible;\n width: var(--column-selection-tab-width);\n height: 100%;\n min-height: 0;\n background: var(\n --ag-control-panel-background-color,\n var(--ag-header-background-color, var(--neutral-layer-2))\n );\n border-inline-start: 1px solid\n var(--ag-border-color, var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest)));\n }\n\n :host([docked]) .column-selection {\n display: flex;\n flex-direction: row-reverse;\n align-items: flex-start;\n overflow: visible;\n width: 100%;\n height: 100%;\n min-height: 0;\n padding-top: calc(var(--ag-grid-size, 4px) * 4);\n }\n\n :host([docked]) .column-selection-button {\n align-self: flex-start;\n width: var(--column-selection-tab-width);\n min-width: var(--column-selection-tab-width);\n height: auto;\n min-height: 0;\n background: transparent;\n border: none;\n color: var(--ag-foreground-color, var(--neutral-foreground-rest));\n font-size: var(--ag-font-size, 12px);\n font-weight: 400;\n }\n\n :host([docked]) .column-selection-button::part(control) {\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n gap: 7px;\n width: 100%;\n height: auto;\n min-height: calc(var(--ag-grid-size, 4px) * 18);\n border: none;\n border-radius: 0;\n padding: calc(var(--ag-grid-size, 4px) * 2) 0;\n background: transparent;\n box-shadow: none;\n color: inherit;\n font: inherit;\n }\n\n :host([docked]) .column-selection-button::part(start) {\n align-self: center;\n margin: 0;\n }\n\n :host([docked]) .column-selection-button > [slot='start'] {\n width: var(--ag-icon-size, 16px);\n height: var(--ag-icon-size, 16px);\n }\n\n :host([docked]) .column-selection-button[aria-expanded='true']::part(control) {\n background: var(\n --ag-side-button-selected-background-color,\n var(--ag-background-color, var(--neutral-layer-1))\n );\n box-shadow: none;\n }\n\n :host([docked]) .column-selection-button-label {\n position: static;\n width: auto;\n height: auto;\n margin: 0;\n padding: 0;\n overflow: visible;\n clip: auto;\n border: 0;\n writing-mode: vertical-lr;\n white-space: nowrap;\n line-height: 1;\n letter-spacing: 0;\n }\n\n .column-selection-panel-window {\n display: contents;\n }\n\n :host([docked]) .column-selection-panel-window {\n display: flex;\n flex-direction: column;\n position: absolute;\n inset-block: 0 auto;\n inset-inline-end: 100%;\n width: var(--ag-side-bar-panel-width, 250px);\n height: auto;\n min-height: 40%;\n max-height: calc(100% - var(--grid-pro-column-panel-status-offset, 0px));\n overflow: hidden;\n z-index: 2;\n pointer-events: none;\n filter: drop-shadow(-8px 0 16px rgb(0 0 0 / 16%));\n }\n\n :host([docked]) .column-selection-panel {\n display: flex;\n flex-direction: column;\n position: relative;\n inset: auto;\n width: 100%;\n max-width: none;\n max-height: 100%;\n height: auto;\n min-height: 0;\n flex: 1 1 auto;\n margin: 0;\n overflow: hidden;\n border-radius: 0;\n border: 1px solid\n var(--ag-border-color, var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest)));\n background: var(\n --ag-control-panel-background-color,\n var(--ag-header-background-color, var(--neutral-layer-1, #1b2836))\n );\n box-shadow: none;\n transform: translateX(100%);\n visibility: hidden;\n pointer-events: none;\n transition:\n transform 200ms ease,\n visibility 200ms;\n }\n\n :host([docked]:dir(rtl)) .column-selection-panel {\n transform: translateX(-100%);\n }\n\n :host([docked].column-selection-open) .column-selection-panel {\n transform: translateX(0);\n visibility: visible;\n pointer-events: auto;\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([docked]) .column-selection-panel {\n transition: none;\n }\n }\n\n :host([docked]) .grid-pro-columns-list {\n flex: 1 1 auto;\n min-height: 0;\n max-height: none;\n overflow: auto;\n padding-bottom: 0;\n }\n\n :host([docked]) .grid-pro-columns-list-end {\n flex: none;\n height: 40px;\n }\n\n :host([docked]) .grid-pro-columns-toolbar {\n flex: none;\n }\n`",
|
|
9312
9312
|
"description": "Styles for ColumnSelection.",
|
|
9313
9313
|
"privacy": "public"
|
|
9314
9314
|
},
|
|
9315
9315
|
{
|
|
9316
9316
|
"kind": "variable",
|
|
9317
9317
|
"name": "gridProColumnSelectionHostStyles",
|
|
9318
|
-
"default": "css`\n :host(.has-column-selection) {\n display: flex;\n flex-direction:
|
|
9318
|
+
"default": "css`\n :host(.has-column-selection) {\n display: flex;\n flex-direction: row;\n min-height: 0;\n min-width: 0;\n }\n\n :host([with-status-bar].has-column-selection) {\n --grid-pro-column-panel-status-offset: var(--ag-status-bar-height, 32.5px);\n }\n\n :host(.has-column-selection) [part='grid'] {\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n }\n\n .grid-pro-side-bar {\n display: flex;\n position: relative;\n z-index: 2;\n flex: 0 0 auto;\n align-self: stretch;\n overflow: visible;\n min-height: 0;\n }\n`",
|
|
9319
9319
|
"description": "Host layout when the Grid Pro column-selection toolbar is shown.",
|
|
9320
9320
|
"privacy": "public"
|
|
9321
9321
|
}
|
|
@@ -9400,6 +9400,15 @@
|
|
|
9400
9400
|
"default": "'Column Selection'",
|
|
9401
9401
|
"description": "Button label."
|
|
9402
9402
|
},
|
|
9403
|
+
{
|
|
9404
|
+
"kind": "field",
|
|
9405
|
+
"name": "docked",
|
|
9406
|
+
"type": {
|
|
9407
|
+
"text": "boolean"
|
|
9408
|
+
},
|
|
9409
|
+
"default": "false",
|
|
9410
|
+
"description": "Docks the picker beside the grid instead of opening a popover.\nA tab on the trailing edge opens and closes the panel, matching the enterprise side bar."
|
|
9411
|
+
},
|
|
9403
9412
|
{
|
|
9404
9413
|
"kind": "field",
|
|
9405
9414
|
"name": "sort",
|
|
@@ -9646,6 +9655,21 @@
|
|
|
9646
9655
|
"kind": "method",
|
|
9647
9656
|
"name": "panelElChanged"
|
|
9648
9657
|
},
|
|
9658
|
+
{
|
|
9659
|
+
"kind": "method",
|
|
9660
|
+
"name": "dockedChanged"
|
|
9661
|
+
},
|
|
9662
|
+
{
|
|
9663
|
+
"kind": "method",
|
|
9664
|
+
"name": "syncDockedOpenState",
|
|
9665
|
+
"privacy": "private",
|
|
9666
|
+
"return": {
|
|
9667
|
+
"type": {
|
|
9668
|
+
"text": "void"
|
|
9669
|
+
}
|
|
9670
|
+
},
|
|
9671
|
+
"description": "Overlay visibility is a host class so the grid keeps its width while the panel is open."
|
|
9672
|
+
},
|
|
9649
9673
|
{
|
|
9650
9674
|
"kind": "method",
|
|
9651
9675
|
"name": "toggle",
|
|
@@ -10040,6 +10064,14 @@
|
|
|
10040
10064
|
"description": "Button label.",
|
|
10041
10065
|
"fieldName": "label"
|
|
10042
10066
|
},
|
|
10067
|
+
{
|
|
10068
|
+
"type": {
|
|
10069
|
+
"text": "boolean"
|
|
10070
|
+
},
|
|
10071
|
+
"default": "false",
|
|
10072
|
+
"description": "Docks the picker beside the grid instead of opening a popover.\nA tab on the trailing edge opens and closes the panel, matching the enterprise side bar.",
|
|
10073
|
+
"fieldName": "docked"
|
|
10074
|
+
},
|
|
10043
10075
|
{
|
|
10044
10076
|
"name": "sort",
|
|
10045
10077
|
"type": {
|
|
@@ -17,7 +17,7 @@ declare const ColumnSelection_base: (new (...args: any[]) => {
|
|
|
17
17
|
#_tryFindContainingLayout(e: Element): import("@genesislcap/foundation-utils").FoundationLayoutContainer | import("@genesislcap/foundation-utils").LayoutCacheContainer | import("@genesislcap/foundation-utils").DOMContainer;
|
|
18
18
|
connectedCallback(): void;
|
|
19
19
|
readonly $fastController: import("@microsoft/fast-element").Controller;
|
|
20
|
-
$emit(type: string, detail?: any, options
|
|
20
|
+
$emit(type: string, detail?: any, options? /** Query root for picker DOM (shadow panel). */: Omit<CustomEventInit, "detail">): boolean | void;
|
|
21
21
|
disconnectedCallback(): void;
|
|
22
22
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
23
23
|
accessKey: string;
|
|
@@ -380,7 +380,8 @@ declare const ColumnSelection_base: (new (...args: any[]) => {
|
|
|
380
380
|
*
|
|
381
381
|
* The panel uses the Popover API (`popover="manual"`) so it paints in the top layer and is not
|
|
382
382
|
* clipped by layout ancestors with `overflow: hidden`. Placement is pure CSS (anchor positioning
|
|
383
|
-
* via `showPopover({ source })` + `position-area`).
|
|
383
|
+
* via `showPopover({ source })` + `position-area`). Set `docked` to keep the same picker in a
|
|
384
|
+
* side panel beside the grid instead; the tab on the trailing edge opens and closes it.
|
|
384
385
|
*
|
|
385
386
|
* Layout: select-all + search → column list. Ordering via `sort`
|
|
386
387
|
* (`selected-first` default, or `ag-grid`). Checkboxes toggle visibility via
|
|
@@ -393,6 +394,11 @@ declare const ColumnSelection_base: (new (...args: any[]) => {
|
|
|
393
394
|
export declare class ColumnSelection extends ColumnSelection_base {
|
|
394
395
|
/** Button label. */
|
|
395
396
|
label: string;
|
|
397
|
+
/**
|
|
398
|
+
* Docks the picker beside the grid instead of opening a popover.
|
|
399
|
+
* A tab on the trailing edge opens and closes the panel, matching the enterprise side bar.
|
|
400
|
+
*/
|
|
401
|
+
docked: boolean;
|
|
396
402
|
/**
|
|
397
403
|
* Column list ordering.
|
|
398
404
|
* - `selected-first` (default): visible first (grid display order), then hidden A–Z.
|
|
@@ -451,6 +457,9 @@ export declare class ColumnSelection extends ColumnSelection_base {
|
|
|
451
457
|
gridApiChanged(): void;
|
|
452
458
|
gridHostChanged(): void;
|
|
453
459
|
panelElChanged(): void;
|
|
460
|
+
dockedChanged(): void;
|
|
461
|
+
/** Overlay visibility is a host class so the grid keeps its width while the panel is open. */
|
|
462
|
+
private syncDockedOpenState;
|
|
454
463
|
/**
|
|
455
464
|
* Subscribe to grid column events and rebuild picker lists.
|
|
456
465
|
* Called automatically when the popover opens; exposed for tests/hosts that need an early bind.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"column-selection.d.ts","sourceRoot":"","sources":["../../../src/column-selection/column-selection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAQL,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,EAA2B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;;;;;;;;
|
|
1
|
+
{"version":3,"file":"column-selection.d.ts","sourceRoot":"","sources":["../../../src/column-selection/column-selection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAQL,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,EAA2B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;;;;;;;;kBAqE7F,CAAC;;;;;;;;8BA+BwB,CAAC,cAI5B,CADD,CAAC,gDAAgD;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA4BM,CAAC;4IAOzC,CAAC;wFAIP,CAAP;+IAKS,CAAC;2FAKY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAsDf,CAAC;;;;;;;;;;;;;;;;;;;;;;;mBA2EkB,CAAC;;;;;;;;;;;;;6BAiC3B,CAAA;8BAEuC,CAAC;kBAChB,CAAC;;oBACkC,CAAC;;sBAE9C,CAAC;oBACV,CAAC;;;;;;;;gDAkBJ,CAAH;;;;;;;;;;;;;;;;;;uBAiBe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA6IA,CAAC;yBACuB,CAAC;UAGvC,GAAG;WACe,GAAG;;gBAED,GAAG;;;;;;;WAoBnB,GAAG;YAE4B,GAAG;;;;;;;;;;;oBAiDI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgHquH,CAAC;cAA6F,CAAC;eAA8F,CAAC;gBAA+F,CAAC;;;;;;;;;;;;;;SAAulC,CAAC;;;iBAA+E,CAAC;;AApqB7tK;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,eAAgB,SAAQ,oBAAiC;IACpE,oBAAoB;IACd,KAAK,SAAsB;IAEjC;;;OAGG;IACwB,MAAM,UAAS;IAE1C;;;;OAIG;IACG,IAAI,EAAE,gBAAgB,CAA8B;IAE1D,mCAAmC;IACvB,IAAI,UAAS;IAEzB,2CAA2C;IAC/B,OAAO,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE3C,gEAAgE;IACpD,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAQ;IAExD,gBAAgB;IACJ,IAAI,EAAE,WAAW,CAAC;IAE9B,gBAAgB;IACJ,QAAQ,EAAE,WAAW,CAAC;IAElC,gBAAgB;IACJ,OAAO,EAAE,WAAW,CAAC;IAErB,MAAM,SAAM;IACZ,aAAa,EAAE,gBAAgB,EAAE,CAAM;IACvC,eAAe,EAAE,gBAAgB,EAAE,CAAM;IACrD,uEAAuE;IAC3D,gBAAgB,UAAS;IACrC,oFAAoF;IACxE,sBAAsB,UAAS;IAE3C,qDAAqD;IACrD,OAAO,CAAC,YAAY,CAAgD;IACpE,4DAA4D;IAC5D,OAAO,CAAC,SAAS,CAAuB;IACxC,qFAAqF;IACrF,OAAO,CAAC,eAAe,CAA4B;IACnD,oEAAoE;IACpE,OAAO,CAAC,gBAAgB,CAAgC;IACxD,8EAA8E;IAC9E,OAAO,CAAC,cAAc,CAAmC;IACzD,uCAAuC;IACvC,OAAO,CAAC,gBAAgB,CAAwC;IAChE,+DAA+D;IAC/D,OAAO,CAAC,iBAAiB,CAAK;IAC9B,sEAAsE;IACtE,OAAO,CAAC,iBAAiB,CAA8B;IACvD,8EAA8E;IAC9E,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAwB;IAErD,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,SAAS,QAEpB;IAED,gDAAgD;IAChD,OAAO,KAAK,UAAU,GAErB;IAED,4DAA4D;IAC5D,IAAI,iBAAiB,IAAI,OAAO,CAE/B;IAED,0FAA0F;IAC1F,aAAa,CAAC,IAAI,EAAE,gBAAgB,GAAG,OAAO;IAU9C,iFAAiF;IACjF,OAAO,KAAK,eAAe,GAE1B;IAED,WAAW,CAAC,QAAQ,CAAC,EAAE,OAAO;IA6B9B,WAAW;IAOX,cAAc;IAMd,eAAe;IAMf,cAAc;IASd,aAAa;IAIb,8FAA8F;IAC9F,OAAO,CAAC,mBAAmB;IAI3B;;;;OAIG;IACH,aAAa,IAAI,IAAI;IAKrB;;;OAGG;IACH,MAAM,IAAI,IAAI;IAId;;;OAGG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,OAAO,IAAI,IAAI;IAmCf,oBAAoB;IAQpB,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAOjC;IAEF,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,iBAAiB;IAOzB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAmHnB,OAAO,CAAC,uBAAuB;IAkB/B;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC;;OAEG;IACH,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAyBzC;;OAEG;IACH,eAAe,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI;IAMhE;;OAEG;IACH,kBAAkB,CAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI;IASlE;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI;IAarE;;OAEG;IACH,SAAS,IAAI,IAAI;IAQjB;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,GAAG,IAAI;IAepD;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,GAAG,IAAI;IAOrD;;OAEG;IACH,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAS7C,OAAO,CAAC,sBAAsB;IAK9B;;;OAGG;IACH,OAAO,CAAC,eAAe;CAyBxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB;;;;;;;;0BAIpC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"column-selection.styles.d.ts","sourceRoot":"","sources":["../../../src/column-selection/column-selection.styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"column-selection.styles.d.ts","sourceRoot":"","sources":["../../../src/column-selection/column-selection.styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,qBAAqB,iDA8XjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gCAAgC,iDA2B5C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"column-selection.template.d.ts","sourceRoot":"","sources":["../../../src/column-selection/column-selection.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,GAAI,eAAqB,
|
|
1
|
+
{"version":3,"file":"column-selection.template.d.ts","sourceRoot":"","sources":["../../../src/column-selection/column-selection.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,GAAI,eAAqB,yEA+F/D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,sEAA+B,CAAC"}
|
package/dist/dts/grid-pro.d.ts
CHANGED
|
@@ -477,7 +477,7 @@ export declare class GridPro extends GridPro_base {
|
|
|
477
477
|
*/
|
|
478
478
|
withStatusBar: boolean;
|
|
479
479
|
/**
|
|
480
|
-
* Shows a
|
|
480
|
+
* Shows a Columns side panel on the trailing edge of the grid.
|
|
481
481
|
* @public
|
|
482
482
|
*/
|
|
483
483
|
enableColumnSelection: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-pro.d.ts","sourceRoot":"","sources":["../../src/grid-pro.ts"],"names":[],"mappings":"AAOA,OAAO,EAA8B,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EACV,MAAM,EACN,WAAW,EAGX,OAAO,EACP,WAAW,EACX,UAAU,EAEX,MAAM,mBAAmB,CAAC;AAwD3B,OAAO,EAGL,KAAK,uBAAuB,EAC7B,MAAM,gDAAgD,CAAC;AAMxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AA6BrE,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAEhB,yBAAyB,EAG1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAKL,iBAAiB,EAEjB,sBAAsB,EACtB,2BAA2B,EAE5B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;;;;;;;;kBAb7C,CAAC;;;;;;;;8BAuEX,CADG,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA+BjB,CAAA;4IAIiC,CAAC;wFACG,CAAC;+IACyE,CAAA;2FACD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAyB1G,CAAC;;;;;;;;;;;;;;;;;;;;;;;mBAoDJ,CAAC;;;;;;;;;;;;;6BAeY,CAAC;8BACU,CAAC;kBAGE,CAAC;;oBAKnB,CAAC;;sBACF,CAAC;oBAAkE,CAAC;;;;;;;;gDAY7E,CAAD;;;;;;;;;;;;;;;;;;uBAmB0B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"grid-pro.d.ts","sourceRoot":"","sources":["../../src/grid-pro.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-pro.template.d.ts","sourceRoot":"","sources":["../../src/grid-pro.template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,eAAqB,+
|
|
1
|
+
{"version":3,"file":"grid-pro.template.d.ts","sourceRoot":"","sources":["../../src/grid-pro.template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,eAAqB,+BA6BvD,CAAC;AACF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,YAAmC,CAAC"}
|
|
@@ -26,7 +26,8 @@ const pickerApiByElement = new WeakMap();
|
|
|
26
26
|
*
|
|
27
27
|
* The panel uses the Popover API (`popover="manual"`) so it paints in the top layer and is not
|
|
28
28
|
* clipped by layout ancestors with `overflow: hidden`. Placement is pure CSS (anchor positioning
|
|
29
|
-
* via `showPopover({ source })` + `position-area`).
|
|
29
|
+
* via `showPopover({ source })` + `position-area`). Set `docked` to keep the same picker in a
|
|
30
|
+
* side panel beside the grid instead; the tab on the trailing edge opens and closes it.
|
|
30
31
|
*
|
|
31
32
|
* Layout: select-all + search → column list. Ordering via `sort`
|
|
32
33
|
* (`selected-first` default, or `ag-grid`). Checkboxes toggle visibility via
|
|
@@ -41,6 +42,11 @@ export class ColumnSelection extends LifecycleMixin(FoundationElement) {
|
|
|
41
42
|
super(...arguments);
|
|
42
43
|
/** Button label. */
|
|
43
44
|
this.label = 'Column Selection';
|
|
45
|
+
/**
|
|
46
|
+
* Docks the picker beside the grid instead of opening a popover.
|
|
47
|
+
* A tab on the trailing edge opens and closes the panel, matching the enterprise side bar.
|
|
48
|
+
*/
|
|
49
|
+
this.docked = false;
|
|
44
50
|
/**
|
|
45
51
|
* Column list ordering.
|
|
46
52
|
* - `selected-first` (default): visible first (grid display order), then hidden A–Z.
|
|
@@ -79,7 +85,7 @@ export class ColumnSelection extends LifecycleMixin(FoundationElement) {
|
|
|
79
85
|
/** Stable listener refs so close/disconnect can remove the same functions. */
|
|
80
86
|
this.boundRefresh = () => this.refresh();
|
|
81
87
|
this.handleClickOutside = (event) => {
|
|
82
|
-
if (!this.open || !this.root || !event.isTrusted) {
|
|
88
|
+
if (this.docked || !this.open || !this.root || !event.isTrusted) {
|
|
83
89
|
return;
|
|
84
90
|
}
|
|
85
91
|
if (!event.composedPath().includes(this.root)) {
|
|
@@ -122,11 +128,16 @@ export class ColumnSelection extends LifecycleMixin(FoundationElement) {
|
|
|
122
128
|
if (oldValue === undefined || !this.$fastController.isConnected) {
|
|
123
129
|
return;
|
|
124
130
|
}
|
|
131
|
+
this.syncDockedOpenState();
|
|
125
132
|
if (this.open) {
|
|
126
133
|
DOM.queueUpdate(() => {
|
|
127
134
|
this.subscribePicker();
|
|
128
135
|
this.refresh();
|
|
129
136
|
this.showPanel();
|
|
137
|
+
// A docked side panel stays open until its tab is clicked again.
|
|
138
|
+
if (this.docked) {
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
130
141
|
// Defer listener — showPopover can emit a same-turn mousedown outside the root.
|
|
131
142
|
requestAnimationFrame(() => {
|
|
132
143
|
if (this.open) {
|
|
@@ -165,6 +176,13 @@ export class ColumnSelection extends LifecycleMixin(FoundationElement) {
|
|
|
165
176
|
});
|
|
166
177
|
}
|
|
167
178
|
}
|
|
179
|
+
dockedChanged() {
|
|
180
|
+
this.syncDockedOpenState();
|
|
181
|
+
}
|
|
182
|
+
/** Overlay visibility is a host class so the grid keeps its width while the panel is open. */
|
|
183
|
+
syncDockedOpenState() {
|
|
184
|
+
this.classList.toggle('column-selection-open', Boolean(this.open && this.docked));
|
|
185
|
+
}
|
|
168
186
|
/**
|
|
169
187
|
* Subscribe to grid column events and rebuild picker lists.
|
|
170
188
|
* Called automatically when the popover opens; exposed for tests/hosts that need an early bind.
|
|
@@ -230,7 +248,7 @@ export class ColumnSelection extends LifecycleMixin(FoundationElement) {
|
|
|
230
248
|
}
|
|
231
249
|
showPanel() {
|
|
232
250
|
const panel = this.panelEl;
|
|
233
|
-
if (!panel || typeof panel.showPopover !== 'function') {
|
|
251
|
+
if (!panel || this.docked || typeof panel.showPopover !== 'function') {
|
|
234
252
|
return;
|
|
235
253
|
}
|
|
236
254
|
if (panel.matches(':popover-open')) {
|
|
@@ -248,7 +266,7 @@ export class ColumnSelection extends LifecycleMixin(FoundationElement) {
|
|
|
248
266
|
}
|
|
249
267
|
hidePanel() {
|
|
250
268
|
const panel = this.panelEl;
|
|
251
|
-
if (!panel || typeof panel.hidePopover !== 'function') {
|
|
269
|
+
if (!panel || this.docked || typeof panel.hidePopover !== 'function') {
|
|
252
270
|
return;
|
|
253
271
|
}
|
|
254
272
|
if (panel.matches(':popover-open')) {
|
|
@@ -572,6 +590,9 @@ export class ColumnSelection extends LifecycleMixin(FoundationElement) {
|
|
|
572
590
|
__decorate([
|
|
573
591
|
attr
|
|
574
592
|
], ColumnSelection.prototype, "label", void 0);
|
|
593
|
+
__decorate([
|
|
594
|
+
attr({ mode: 'boolean' })
|
|
595
|
+
], ColumnSelection.prototype, "docked", void 0);
|
|
575
596
|
__decorate([
|
|
576
597
|
attr
|
|
577
598
|
], ColumnSelection.prototype, "sort", void 0);
|
|
@@ -38,7 +38,9 @@ export const columnSelectionStyles = css `
|
|
|
38
38
|
background: var(--neutral-layer-floating, var(--neutral-layer-2, #fff));
|
|
39
39
|
box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
|
|
40
40
|
padding: 0;
|
|
41
|
+
/* stylelint-disable-next-line property-no-unknown -- CSS anchor positioning */
|
|
41
42
|
position-area: block-end span-inline-start;
|
|
43
|
+
/* stylelint-disable-next-line property-no-unknown -- CSS anchor positioning */
|
|
42
44
|
position-try-fallbacks: flip-block, flip-inline;
|
|
43
45
|
margin-block-start: calc(var(--design-unit, 4) * 1px);
|
|
44
46
|
min-width: 200px;
|
|
@@ -47,6 +49,7 @@ export const columnSelectionStyles = css `
|
|
|
47
49
|
font-size: var(--ag-data-font-size, var(--type-ramp-minus-1-font-size));
|
|
48
50
|
}
|
|
49
51
|
|
|
52
|
+
/* stylelint-disable-next-line selector-pseudo-class-no-unknown -- Popover API */
|
|
50
53
|
.column-selection-panel:popover-open {
|
|
51
54
|
display: flex;
|
|
52
55
|
flex-direction: column;
|
|
@@ -129,6 +132,12 @@ export const columnSelectionStyles = css `
|
|
|
129
132
|
min-height: 250px;
|
|
130
133
|
max-height: 400px;
|
|
131
134
|
padding: 8px;
|
|
135
|
+
scrollbar-color: var(--ag-scrollbar-handle, var(--neutral-layer-1))
|
|
136
|
+
var(--ag-scrollbar-background, var(--neutral-layer-4));
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.grid-pro-columns-list:hover {
|
|
140
|
+
scrollbar-color: var(--neutral-fill-rest) var(--ag-scrollbar-background, var(--neutral-layer-4));
|
|
132
141
|
}
|
|
133
142
|
|
|
134
143
|
.grid-pro-columns-section {
|
|
@@ -202,6 +211,180 @@ export const columnSelectionStyles = css `
|
|
|
202
211
|
text-overflow: ellipsis;
|
|
203
212
|
white-space: nowrap;
|
|
204
213
|
}
|
|
214
|
+
|
|
215
|
+
:host([docked]) {
|
|
216
|
+
--column-selection-tab-width: calc(var(--ag-icon-size, 16px) + var(--ag-grid-size, 4px) * 2);
|
|
217
|
+
|
|
218
|
+
position: relative;
|
|
219
|
+
display: flex;
|
|
220
|
+
align-self: stretch;
|
|
221
|
+
overflow: visible;
|
|
222
|
+
width: var(--column-selection-tab-width);
|
|
223
|
+
height: 100%;
|
|
224
|
+
min-height: 0;
|
|
225
|
+
background: var(
|
|
226
|
+
--ag-control-panel-background-color,
|
|
227
|
+
var(--ag-header-background-color, var(--neutral-layer-2))
|
|
228
|
+
);
|
|
229
|
+
border-inline-start: 1px solid
|
|
230
|
+
var(--ag-border-color, var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest)));
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
:host([docked]) .column-selection {
|
|
234
|
+
display: flex;
|
|
235
|
+
flex-direction: row-reverse;
|
|
236
|
+
align-items: flex-start;
|
|
237
|
+
overflow: visible;
|
|
238
|
+
width: 100%;
|
|
239
|
+
height: 100%;
|
|
240
|
+
min-height: 0;
|
|
241
|
+
padding-top: calc(var(--ag-grid-size, 4px) * 4);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
:host([docked]) .column-selection-button {
|
|
245
|
+
align-self: flex-start;
|
|
246
|
+
width: var(--column-selection-tab-width);
|
|
247
|
+
min-width: var(--column-selection-tab-width);
|
|
248
|
+
height: auto;
|
|
249
|
+
min-height: 0;
|
|
250
|
+
background: transparent;
|
|
251
|
+
border: none;
|
|
252
|
+
color: var(--ag-foreground-color, var(--neutral-foreground-rest));
|
|
253
|
+
font-size: var(--ag-font-size, 12px);
|
|
254
|
+
font-weight: 400;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
:host([docked]) .column-selection-button::part(control) {
|
|
258
|
+
flex-direction: column;
|
|
259
|
+
align-items: center;
|
|
260
|
+
justify-content: flex-start;
|
|
261
|
+
gap: 7px;
|
|
262
|
+
width: 100%;
|
|
263
|
+
height: auto;
|
|
264
|
+
min-height: calc(var(--ag-grid-size, 4px) * 18);
|
|
265
|
+
border: none;
|
|
266
|
+
border-radius: 0;
|
|
267
|
+
padding: calc(var(--ag-grid-size, 4px) * 2) 0;
|
|
268
|
+
background: transparent;
|
|
269
|
+
box-shadow: none;
|
|
270
|
+
color: inherit;
|
|
271
|
+
font: inherit;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
:host([docked]) .column-selection-button::part(start) {
|
|
275
|
+
align-self: center;
|
|
276
|
+
margin: 0;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
:host([docked]) .column-selection-button > [slot='start'] {
|
|
280
|
+
width: var(--ag-icon-size, 16px);
|
|
281
|
+
height: var(--ag-icon-size, 16px);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
:host([docked]) .column-selection-button[aria-expanded='true']::part(control) {
|
|
285
|
+
background: var(
|
|
286
|
+
--ag-side-button-selected-background-color,
|
|
287
|
+
var(--ag-background-color, var(--neutral-layer-1))
|
|
288
|
+
);
|
|
289
|
+
box-shadow: none;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
:host([docked]) .column-selection-button-label {
|
|
293
|
+
position: static;
|
|
294
|
+
width: auto;
|
|
295
|
+
height: auto;
|
|
296
|
+
margin: 0;
|
|
297
|
+
padding: 0;
|
|
298
|
+
overflow: visible;
|
|
299
|
+
clip: auto;
|
|
300
|
+
border: 0;
|
|
301
|
+
writing-mode: vertical-lr;
|
|
302
|
+
white-space: nowrap;
|
|
303
|
+
line-height: 1;
|
|
304
|
+
letter-spacing: 0;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.column-selection-panel-window {
|
|
308
|
+
display: contents;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
:host([docked]) .column-selection-panel-window {
|
|
312
|
+
display: flex;
|
|
313
|
+
flex-direction: column;
|
|
314
|
+
position: absolute;
|
|
315
|
+
inset-block: 0 auto;
|
|
316
|
+
inset-inline-end: 100%;
|
|
317
|
+
width: var(--ag-side-bar-panel-width, 250px);
|
|
318
|
+
height: auto;
|
|
319
|
+
min-height: 40%;
|
|
320
|
+
max-height: calc(100% - var(--grid-pro-column-panel-status-offset, 0px));
|
|
321
|
+
overflow: hidden;
|
|
322
|
+
z-index: 2;
|
|
323
|
+
pointer-events: none;
|
|
324
|
+
filter: drop-shadow(-8px 0 16px rgb(0 0 0 / 16%));
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
:host([docked]) .column-selection-panel {
|
|
328
|
+
display: flex;
|
|
329
|
+
flex-direction: column;
|
|
330
|
+
position: relative;
|
|
331
|
+
inset: auto;
|
|
332
|
+
width: 100%;
|
|
333
|
+
max-width: none;
|
|
334
|
+
max-height: 100%;
|
|
335
|
+
height: auto;
|
|
336
|
+
min-height: 0;
|
|
337
|
+
flex: 1 1 auto;
|
|
338
|
+
margin: 0;
|
|
339
|
+
overflow: hidden;
|
|
340
|
+
border-radius: 0;
|
|
341
|
+
border: 1px solid
|
|
342
|
+
var(--ag-border-color, var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest)));
|
|
343
|
+
background: var(
|
|
344
|
+
--ag-control-panel-background-color,
|
|
345
|
+
var(--ag-header-background-color, var(--neutral-layer-1, #1b2836))
|
|
346
|
+
);
|
|
347
|
+
box-shadow: none;
|
|
348
|
+
transform: translateX(100%);
|
|
349
|
+
visibility: hidden;
|
|
350
|
+
pointer-events: none;
|
|
351
|
+
transition:
|
|
352
|
+
transform 200ms ease,
|
|
353
|
+
visibility 200ms;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
:host([docked]:dir(rtl)) .column-selection-panel {
|
|
357
|
+
transform: translateX(-100%);
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
:host([docked].column-selection-open) .column-selection-panel {
|
|
361
|
+
transform: translateX(0);
|
|
362
|
+
visibility: visible;
|
|
363
|
+
pointer-events: auto;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
@media (prefers-reduced-motion: reduce) {
|
|
367
|
+
:host([docked]) .column-selection-panel {
|
|
368
|
+
transition: none;
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
:host([docked]) .grid-pro-columns-list {
|
|
373
|
+
flex: 1 1 auto;
|
|
374
|
+
min-height: 0;
|
|
375
|
+
max-height: none;
|
|
376
|
+
overflow: auto;
|
|
377
|
+
padding-bottom: 0;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
:host([docked]) .grid-pro-columns-list-end {
|
|
381
|
+
flex: none;
|
|
382
|
+
height: 40px;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
:host([docked]) .grid-pro-columns-toolbar {
|
|
386
|
+
flex: none;
|
|
387
|
+
}
|
|
205
388
|
`;
|
|
206
389
|
/**
|
|
207
390
|
* Host layout when the Grid Pro column-selection toolbar is shown.
|
|
@@ -210,25 +393,28 @@ export const columnSelectionStyles = css `
|
|
|
210
393
|
export const gridProColumnSelectionHostStyles = css `
|
|
211
394
|
:host(.has-column-selection) {
|
|
212
395
|
display: flex;
|
|
213
|
-
flex-direction:
|
|
396
|
+
flex-direction: row;
|
|
214
397
|
min-height: 0;
|
|
398
|
+
min-width: 0;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
:host([with-status-bar].has-column-selection) {
|
|
402
|
+
--grid-pro-column-panel-status-offset: var(--ag-status-bar-height, 32.5px);
|
|
215
403
|
}
|
|
216
404
|
|
|
217
405
|
:host(.has-column-selection) [part='grid'] {
|
|
218
406
|
flex: 1 1 auto;
|
|
407
|
+
min-width: 0;
|
|
219
408
|
min-height: 0;
|
|
220
409
|
}
|
|
221
410
|
|
|
222
|
-
.grid-pro-
|
|
411
|
+
.grid-pro-side-bar {
|
|
223
412
|
display: flex;
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
padding: calc(var(--design-unit, 4) * 2px);
|
|
231
|
-
border-bottom: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
|
|
232
|
-
background: var(--neutral-layer-1, transparent);
|
|
413
|
+
position: relative;
|
|
414
|
+
z-index: 2;
|
|
415
|
+
flex: 0 0 auto;
|
|
416
|
+
align-self: stretch;
|
|
417
|
+
overflow: visible;
|
|
418
|
+
min-height: 0;
|
|
233
419
|
}
|
|
234
420
|
`;
|
|
@@ -47,18 +47,22 @@ export const getColumnSelectionTemplate = (prefix = 'foundation') => {
|
|
|
47
47
|
class="column-selection-button"
|
|
48
48
|
appearance="neutral"
|
|
49
49
|
data-state="${(x) => (x.open ? 'hover' : undefined)}"
|
|
50
|
-
aria-
|
|
50
|
+
aria-label="${(x) => x.label}"
|
|
51
|
+
aria-expanded="${(x) => (x.open ? 'true' : 'false')}"
|
|
52
|
+
aria-controls="column-selection-panel"
|
|
51
53
|
@click=${(x) => x.toggle()}
|
|
52
54
|
>
|
|
53
55
|
<${prefix}-icon size="lg" name="columns" slot="start"></${prefix}-icon>
|
|
54
|
-
|
|
56
|
+
<span class="column-selection-button-label">${(x) => x.label}</span>
|
|
55
57
|
</${prefix}-button>
|
|
58
|
+
<div class="column-selection-panel-window">
|
|
56
59
|
<div
|
|
57
60
|
${ref('panelEl')}
|
|
61
|
+
id="column-selection-panel"
|
|
58
62
|
class="column-selection-panel"
|
|
59
63
|
part="column-selection-panel"
|
|
60
64
|
data-test-id="column-selection-panel"
|
|
61
|
-
popover="manual"
|
|
65
|
+
popover="${(x) => (x.docked ? null : 'manual')}"
|
|
62
66
|
>
|
|
63
67
|
<div class="grid-pro-columns-toolbar" data-test-id="grid-pro-columns-toolbar">
|
|
64
68
|
<${checkbox}
|
|
@@ -84,8 +88,10 @@ export const getColumnSelectionTemplate = (prefix = 'foundation') => {
|
|
|
84
88
|
<div class="grid-pro-columns-section" data-test-id="grid-pro-columns-unselected">
|
|
85
89
|
${repeat((x) => x.unselectedItems, columnRow, { recycle: false })}
|
|
86
90
|
</div>
|
|
91
|
+
<div class="grid-pro-columns-list-end"></div>
|
|
87
92
|
</div>
|
|
88
93
|
</div>
|
|
94
|
+
</div>
|
|
89
95
|
</div>
|
|
90
96
|
`;
|
|
91
97
|
};
|
package/dist/esm/grid-pro.js
CHANGED
|
@@ -192,7 +192,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
|
|
|
192
192
|
*/
|
|
193
193
|
this.withStatusBar = false;
|
|
194
194
|
/**
|
|
195
|
-
* Shows a
|
|
195
|
+
* Shows a Columns side panel on the trailing edge of the grid.
|
|
196
196
|
* @public
|
|
197
197
|
*/
|
|
198
198
|
this.enableColumnSelection = false;
|
|
@@ -1558,8 +1558,8 @@ __decorate([
|
|
|
1558
1558
|
*/
|
|
1559
1559
|
export const foundationGridPro = GridPro.compose(Object.assign({ baseName: 'grid-pro', template,
|
|
1560
1560
|
// Mirrors what `foundationGridProStyles` gives the legacy grid, minus the AG Grid v29 stock CSS:
|
|
1561
|
-
// the error-handler dialog positions itself against the host, and the column
|
|
1562
|
-
// needs the host to lay out as a
|
|
1561
|
+
// the error-handler dialog positions itself against the host, and the docked column
|
|
1562
|
+
// selection needs the host to lay out as a row (grid, then side bar).
|
|
1563
1563
|
styles: css `
|
|
1564
1564
|
${errorHandlerDialogStyles}
|
|
1565
1565
|
${agDragGhostShadowDomStyles}
|
|
@@ -8,17 +8,19 @@ import { getErrorHandlerDialogTemplate } from './datasource/error-handler.dialog
|
|
|
8
8
|
*/
|
|
9
9
|
export const getGridProTemplate = (prefix = 'foundation') => html `
|
|
10
10
|
<template>
|
|
11
|
+
<span part="grid" data-ag-theme-mode=${(x) => x.themeMode} class="${(x) => x.classNames}">
|
|
12
|
+
<slot name="grid" ${ref('gridSlot')}></slot>
|
|
13
|
+
<slot></slot>
|
|
14
|
+
</span>
|
|
11
15
|
${when((x) => !!x.enableColumnSelection, html `
|
|
12
|
-
<div class="grid-pro-
|
|
16
|
+
<div class="grid-pro-side-bar" part="side-bar">
|
|
13
17
|
<${prefix}-column-selection
|
|
18
|
+
docked
|
|
19
|
+
label="Columns"
|
|
14
20
|
:gridHost="${(x) => x}"
|
|
15
21
|
></${prefix}-column-selection>
|
|
16
22
|
</div>
|
|
17
23
|
`)}
|
|
18
|
-
<span part="grid" data-ag-theme-mode=${(x) => x.themeMode} class="${(x) => x.classNames}">
|
|
19
|
-
<slot name="grid" ${ref('gridSlot')}></slot>
|
|
20
|
-
<slot></slot>
|
|
21
|
-
</span>
|
|
22
24
|
${(x) => x.customErrorHandlerTemplate
|
|
23
25
|
? x.customErrorHandlerTemplate(prefix, x.gridErrorItems.filter(({ type }) => type === 'datasource'))
|
|
24
26
|
: getErrorHandlerDialogTemplate(prefix, x.gridErrorItems.filter(({ type }) => type === 'datasource'))}
|
package/dist/grid-pro.api.json
CHANGED
|
@@ -4039,7 +4039,7 @@
|
|
|
4039
4039
|
{
|
|
4040
4040
|
"kind": "Class",
|
|
4041
4041
|
"canonicalReference": "@genesislcap/grid-pro!ColumnSelection:class",
|
|
4042
|
-
"docComment": "/**\n * Button + popover column picker for Grid Pro (Community).\n *\n * @remarks\n *\n * HTML Element: \\<%%prefix%%-column-selection\\>\n *\n * Provide either `:gridApi` (AG v36) or `:gridHost` (Grid Pro element with `gridApi` / `columnApi`).\n *\n * The panel uses the Popover API (`popover=\"manual\"`) so it paints in the top layer and is not clipped by layout ancestors with `overflow: hidden`. Placement is pure CSS (anchor positioning via `showPopover({ source })` + `position-area`).\n *\n * Layout: select-all + search → column list. Ordering via `sort` (`selected-first` default, or `ag-grid`). Checkboxes toggle visibility via `api.setColumnsVisible`; drag handles on hidden rows use AG native DnD onto the grid (`allowDragFromColumnsToolPanel`) even while search is active; visible-row reorder inside the picker uses HTML5 drag and is disabled during search.\n *\n * @tagname\n *\n * %%prefix%%-column-selection\n *\n * @public\n */\n",
|
|
4042
|
+
"docComment": "/**\n * Button + popover column picker for Grid Pro (Community).\n *\n * @remarks\n *\n * HTML Element: \\<%%prefix%%-column-selection\\>\n *\n * Provide either `:gridApi` (AG v36) or `:gridHost` (Grid Pro element with `gridApi` / `columnApi`).\n *\n * The panel uses the Popover API (`popover=\"manual\"`) so it paints in the top layer and is not clipped by layout ancestors with `overflow: hidden`. Placement is pure CSS (anchor positioning via `showPopover({ source })` + `position-area`). Set `docked` to keep the same picker in a side panel beside the grid instead; the tab on the trailing edge opens and closes it.\n *\n * Layout: select-all + search → column list. Ordering via `sort` (`selected-first` default, or `ag-grid`). Checkboxes toggle visibility via `api.setColumnsVisible`; drag handles on hidden rows use AG native DnD onto the grid (`allowDragFromColumnsToolPanel`) even while search is active; visible-row reorder inside the picker uses HTML5 drag and is disabled during search.\n *\n * @tagname\n *\n * %%prefix%%-column-selection\n *\n * @public\n */\n",
|
|
4043
4043
|
"excerptTokens": [
|
|
4044
4044
|
{
|
|
4045
4045
|
"kind": "Content",
|
|
@@ -4202,6 +4202,67 @@
|
|
|
4202
4202
|
"isAbstract": false,
|
|
4203
4203
|
"name": "disconnectedCallback"
|
|
4204
4204
|
},
|
|
4205
|
+
{
|
|
4206
|
+
"kind": "Property",
|
|
4207
|
+
"canonicalReference": "@genesislcap/grid-pro!ColumnSelection#docked:member",
|
|
4208
|
+
"docComment": "/**\n * Docks the picker beside the grid instead of opening a popover. A tab on the trailing edge opens and closes the panel, matching the enterprise side bar.\n */\n",
|
|
4209
|
+
"excerptTokens": [
|
|
4210
|
+
{
|
|
4211
|
+
"kind": "Content",
|
|
4212
|
+
"text": "docked: "
|
|
4213
|
+
},
|
|
4214
|
+
{
|
|
4215
|
+
"kind": "Content",
|
|
4216
|
+
"text": "boolean"
|
|
4217
|
+
},
|
|
4218
|
+
{
|
|
4219
|
+
"kind": "Content",
|
|
4220
|
+
"text": ";"
|
|
4221
|
+
}
|
|
4222
|
+
],
|
|
4223
|
+
"isReadonly": false,
|
|
4224
|
+
"isOptional": false,
|
|
4225
|
+
"releaseTag": "Public",
|
|
4226
|
+
"name": "docked",
|
|
4227
|
+
"propertyTypeTokenRange": {
|
|
4228
|
+
"startIndex": 1,
|
|
4229
|
+
"endIndex": 2
|
|
4230
|
+
},
|
|
4231
|
+
"isStatic": false,
|
|
4232
|
+
"isProtected": false,
|
|
4233
|
+
"isAbstract": false
|
|
4234
|
+
},
|
|
4235
|
+
{
|
|
4236
|
+
"kind": "Method",
|
|
4237
|
+
"canonicalReference": "@genesislcap/grid-pro!ColumnSelection#dockedChanged:member(1)",
|
|
4238
|
+
"docComment": "",
|
|
4239
|
+
"excerptTokens": [
|
|
4240
|
+
{
|
|
4241
|
+
"kind": "Content",
|
|
4242
|
+
"text": "dockedChanged(): "
|
|
4243
|
+
},
|
|
4244
|
+
{
|
|
4245
|
+
"kind": "Content",
|
|
4246
|
+
"text": "void"
|
|
4247
|
+
},
|
|
4248
|
+
{
|
|
4249
|
+
"kind": "Content",
|
|
4250
|
+
"text": ";"
|
|
4251
|
+
}
|
|
4252
|
+
],
|
|
4253
|
+
"isStatic": false,
|
|
4254
|
+
"returnTypeTokenRange": {
|
|
4255
|
+
"startIndex": 1,
|
|
4256
|
+
"endIndex": 2
|
|
4257
|
+
},
|
|
4258
|
+
"releaseTag": "Public",
|
|
4259
|
+
"isProtected": false,
|
|
4260
|
+
"overloadIndex": 1,
|
|
4261
|
+
"parameters": [],
|
|
4262
|
+
"isOptional": false,
|
|
4263
|
+
"isAbstract": false,
|
|
4264
|
+
"name": "dockedChanged"
|
|
4265
|
+
},
|
|
4205
4266
|
{
|
|
4206
4267
|
"kind": "Property",
|
|
4207
4268
|
"canonicalReference": "@genesislcap/grid-pro!ColumnSelection#gridApi:member",
|
|
@@ -16207,7 +16268,7 @@
|
|
|
16207
16268
|
{
|
|
16208
16269
|
"kind": "Property",
|
|
16209
16270
|
"canonicalReference": "@genesislcap/grid-pro!GridPro#enableColumnSelection:member",
|
|
16210
|
-
"docComment": "/**\n * Shows a
|
|
16271
|
+
"docComment": "/**\n * Shows a Columns side panel on the trailing edge of the grid.\n *\n * @public\n */\n",
|
|
16211
16272
|
"excerptTokens": [
|
|
16212
16273
|
{
|
|
16213
16274
|
"kind": "Content",
|
package/dist/grid-pro.d.ts
CHANGED
|
@@ -720,7 +720,8 @@ export declare type ColumnPickerSort = 'selected-first' | 'ag-grid';
|
|
|
720
720
|
*
|
|
721
721
|
* The panel uses the Popover API (`popover="manual"`) so it paints in the top layer and is not
|
|
722
722
|
* clipped by layout ancestors with `overflow: hidden`. Placement is pure CSS (anchor positioning
|
|
723
|
-
* via `showPopover({ source })` + `position-area`).
|
|
723
|
+
* via `showPopover({ source })` + `position-area`). Set `docked` to keep the same picker in a
|
|
724
|
+
* side panel beside the grid instead; the tab on the trailing edge opens and closes it.
|
|
724
725
|
*
|
|
725
726
|
* Layout: select-all + search → column list. Ordering via `sort`
|
|
726
727
|
* (`selected-first` default, or `ag-grid`). Checkboxes toggle visibility via
|
|
@@ -733,6 +734,11 @@ export declare type ColumnPickerSort = 'selected-first' | 'ag-grid';
|
|
|
733
734
|
export declare class ColumnSelection extends ColumnSelection_base {
|
|
734
735
|
/** Button label. */
|
|
735
736
|
label: string;
|
|
737
|
+
/**
|
|
738
|
+
* Docks the picker beside the grid instead of opening a popover.
|
|
739
|
+
* A tab on the trailing edge opens and closes the panel, matching the enterprise side bar.
|
|
740
|
+
*/
|
|
741
|
+
docked: boolean;
|
|
736
742
|
/**
|
|
737
743
|
* Column list ordering.
|
|
738
744
|
* - `selected-first` (default): visible first (grid display order), then hidden A–Z.
|
|
@@ -791,6 +797,9 @@ export declare class ColumnSelection extends ColumnSelection_base {
|
|
|
791
797
|
gridApiChanged(): void;
|
|
792
798
|
gridHostChanged(): void;
|
|
793
799
|
panelElChanged(): void;
|
|
800
|
+
dockedChanged(): void;
|
|
801
|
+
/** Overlay visibility is a host class so the grid keeps its width while the panel is open. */
|
|
802
|
+
private syncDockedOpenState;
|
|
794
803
|
/**
|
|
795
804
|
* Subscribe to grid column events and rebuild picker lists.
|
|
796
805
|
* Called automatically when the popover opens; exposed for tests/hosts that need an early bind.
|
|
@@ -886,7 +895,7 @@ declare const ColumnSelection_base: (new (...args: any[]) => {
|
|
|
886
895
|
#_tryFindContainingLayout(e: Element): FoundationLayoutContainer | LayoutCacheContainer | DOMContainer;
|
|
887
896
|
connectedCallback(): void;
|
|
888
897
|
readonly $fastController: Controller;
|
|
889
|
-
$emit(type: string, detail?: any, options
|
|
898
|
+
$emit(type: string, detail?: any, options? /** Query root for picker DOM (shadow panel). */: Omit<CustomEventInit, "detail">): boolean | void;
|
|
890
899
|
disconnectedCallback(): void;
|
|
891
900
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
892
901
|
accessKey: string;
|
|
@@ -3676,7 +3685,7 @@ export declare class GridPro extends GridPro_base {
|
|
|
3676
3685
|
*/
|
|
3677
3686
|
withStatusBar: boolean;
|
|
3678
3687
|
/**
|
|
3679
|
-
* Shows a
|
|
3688
|
+
* Shows a Columns side panel on the trailing edge of the grid.
|
|
3680
3689
|
* @public
|
|
3681
3690
|
*/
|
|
3682
3691
|
enableColumnSelection: boolean;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/grid-pro",
|
|
3
3
|
"description": "Genesis Foundation AG Grid",
|
|
4
|
-
"version": "15.
|
|
4
|
+
"version": "15.63.0",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
@@ -38,19 +38,19 @@
|
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@genesislcap/foundation-testing": "15.
|
|
42
|
-
"@genesislcap/genx": "15.
|
|
43
|
-
"@genesislcap/ts-builder": "15.
|
|
44
|
-
"@genesislcap/uvu-playwright-builder": "15.
|
|
45
|
-
"@genesislcap/vite-builder": "15.
|
|
46
|
-
"@genesislcap/webpack-builder": "15.
|
|
41
|
+
"@genesislcap/foundation-testing": "15.63.0",
|
|
42
|
+
"@genesislcap/genx": "15.63.0",
|
|
43
|
+
"@genesislcap/ts-builder": "15.63.0",
|
|
44
|
+
"@genesislcap/uvu-playwright-builder": "15.63.0",
|
|
45
|
+
"@genesislcap/vite-builder": "15.63.0",
|
|
46
|
+
"@genesislcap/webpack-builder": "15.63.0"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@genesislcap/foundation-comms": "15.
|
|
50
|
-
"@genesislcap/foundation-criteria": "15.
|
|
51
|
-
"@genesislcap/foundation-logger": "15.
|
|
52
|
-
"@genesislcap/foundation-ui": "15.
|
|
53
|
-
"@genesislcap/foundation-utils": "15.
|
|
49
|
+
"@genesislcap/foundation-comms": "15.63.0",
|
|
50
|
+
"@genesislcap/foundation-criteria": "15.63.0",
|
|
51
|
+
"@genesislcap/foundation-logger": "15.63.0",
|
|
52
|
+
"@genesislcap/foundation-ui": "15.63.0",
|
|
53
|
+
"@genesislcap/foundation-utils": "15.63.0",
|
|
54
54
|
"@microsoft/fast-colors": "5.3.1",
|
|
55
55
|
"@microsoft/fast-components": "2.30.6",
|
|
56
56
|
"@microsoft/fast-element": "1.14.0",
|