@blueprintui/grid 0.0.0 → 0.0.2

package/cell/element.css.js

@@ -1 +1 @@
-const t=new CSSStyleSheet;t.replaceSync(":host{--border-right:var(--cell-border-width) solid var(--bp-object-border-color-100);--border-left:0;--min-width:var(--bp-size-9);--min-height:var(--bp-size-9);--font-size:var(--bp-text-size-200);--justify-content:var(--cell-justify-content, start);--padding-block:var(--bp-size-4);--padding-inline:var(--bp-size-6);--color:var(--bp-text-color-500);display:block;height:100%;outline:0!important;position:sticky}slot{justify-content:var(--justify-content);border-left:var(--border-left);background:var(--background);background-image:linear-gradient(hsla(0deg,0%,0%,var(--bp-interaction-offset))0 0)!important;box-shadow:var(--box-shadow);border-right:var(--border-right);min-width:var(--min-width);min-height:var(--min-height);font-size:var(--font-size);padding-inline:var(--padding-inline);padding-block:var(--padding-block);color:var(--color);text-align:left;display:flex;gap:var(--bp-space-sm);line-height:1em;align-items:center;width:100%;height:100%;position:relative}:host([type='action']){--padding-block:0;--padding-inline-start:0;--padding-inline-end:0}:host([type='action']) slot{justify-content:center;min-width:var(--bp-size-8)}:host([highlight]) slot::after{display:block;position:absolute;inset:0;background:var(--bp-interaction-highlight-background);content:\"\";pointer-events:none}[focusable]{outline-offset:calc(var(--bp-size-2)*-1)!important}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){[focusable]{outline-offset:calc(var(--bp-size-3)*-1)!important}}}:host([type='action']:focus-within) [focusable]{outline:var(--bp-interaction-outline-webkit)!important;outline-offset:calc(var(--bp-size-2)*-1)!important}:host([type='action']:focus-within) ::slotted(*){outline:0!important;--bp-interaction-outline-webkit:none!important;--bp-interaction-outline-offset:none!important}:host(:focus) [focusable]{outline:var(--bp-interaction-outline-webkit);outline-offset:calc(var(--bp-size-2)*-1)!important}:host([role='rowheader']){--bp-interaction-offset:calc(var(--bp-interaction-selected-offset) * 0.9);--cell-border-width:var(--bp-size-1)}");export{t as default};
+const t=new CSSStyleSheet;t.replaceSync(":host{--border-right:var(--cell-border-width) solid var(--bp-object-border-color-100);--border-left:0;--min-width:var(--bp-size-9);--min-height:var(--bp-size-9);--font-size:var(--bp-text-size-200);--justify-content:var(--cell-justify-content, start);--padding-block:var(--bp-size-4);--padding-inline:var(--bp-size-6);--color:var(--bp-text-color-500);display:block;height:100%;outline:0!important;position:sticky}slot{justify-content:var(--justify-content);border-left:var(--border-left);background:var(--background);background-image:linear-gradient(hsla(0deg,0%,0%,var(--bp-interaction-offset))0 0)!important;box-shadow:var(--box-shadow);border-right:var(--border-right);min-width:var(--min-width);min-height:var(--min-height);font-size:var(--font-size);padding-inline:var(--padding-inline);padding-block:var(--padding-block);color:var(--color);text-align:left;display:flex;gap:var(--bp-space-sm);line-height:1em;align-items:center;width:100%;height:100%;position:relative}:host([type='action']){--padding-block:0;--padding-inline-start:0;--padding-inline-end:0}:host([type='action']) slot{justify-content:center;min-width:var(--bp-size-8)}:host([highlight]) slot::after{display:block;position:absolute;inset:0;background:var(--bp-interaction-highlight-background);content:\"\";pointer-events:none}[focusable]{outline-offset:calc(var(--bp-size-2)*-1)!important}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){[focusable]{outline-offset:calc(var(--bp-size-3)*-1)!important}}}:host([type='action']:focus-within) [focusable]{outline:var(--bp-interaction-outline-webkit)!important;outline-offset:calc(var(--bp-size-2)*-1)!important}:host([type='action']:focus-within) ::slotted(*){outline:0!important;--bp-interaction-outline-webkit:none!important;--bp-interaction-outline-offset:none!important}:host(:focus) [focusable]{outline:var(--bp-interaction-outline-webkit);outline-offset:calc(var(--bp-size-2)*-1)!important}:host([role='rowheader']){--bp-interaction-offset:var(--bp-interaction-selected-offset);--cell-border-width:var(--bp-size-1)}");export{t as default};

package/column/element.d.ts

@@ -19,8 +19,11 @@ import { LitElement } from 'lit';
  */
 export declare class BpGridColumn extends LitElement {
     #private;
+    /** control width of grid column via numeric or CSS value types */
     width: string;
+    /** determine if given column type for various action features */
     type: '' | 'action';
+    /** position individual column relative to the grid scroll container */
     position: '' | 'sticky' | 'fixed';
     static styles: CSSStyleSheet[];
     render(): import("lit-html").TemplateResult<1>;

package/custom-elements.json

@@ -141,6 +141,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "control width of grid column via numeric or CSS value types",
               "attribute": "width"
             },
             {
@@ -149,6 +150,7 @@
               "type": {
                 "text": "'' | 'action'"
               },
+              "description": "determine if given column type for various action features",
               "attribute": "type",
               "reflects": true
             },
@@ -159,6 +161,7 @@
                 "text": "'' | 'sticky' | 'fixed'"
               },
               "default": "''",
+              "description": "position individual column relative to the grid scroll container",
               "attribute": "position",
               "reflects": true
             },
@@ -190,6 +193,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "control width of grid column via numeric or CSS value types",
               "fieldName": "width"
             },
             {
@@ -197,6 +201,7 @@
               "type": {
                 "text": "'' | 'action'"
               },
+              "description": "determine if given column type for various action features",
               "fieldName": "type"
             },
             {
@@ -205,6 +210,7 @@
                 "text": "'' | 'sticky' | 'fixed'"
               },
               "default": "''",
+              "description": "position individual column relative to the grid scroll container",
               "fieldName": "position"
             }
           ],
@@ -556,6 +562,7 @@
             {
               "kind": "field",
               "name": "i18n",
+              "description": "i18n string options",
               "attribute": "i18n"
             },
             {
@@ -564,6 +571,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "max height for grid container",
               "attribute": "height",
               "reflects": true
             },
@@ -574,6 +582,7 @@
                 "text": "'fixed' | 'flex'"
               },
               "default": "'fixed'",
+              "description": "column layout determines initial column width calculation",
               "attribute": "column-layout",
               "reflects": true
             },
@@ -584,6 +593,7 @@
                 "text": "'row' | 'cell' | 'column' | 'none' | 'stripe'"
               },
               "default": "'row'",
+              "description": "determines the visual style of grid cells and rows",
               "attribute": "borders",
               "reflects": true
             },
@@ -593,27 +603,29 @@
               "type": {
                 "text": "'multi' | 'single' | null"
               },
+              "description": "initializes grid to appropriate aria/a11y settings for selections",
               "attribute": "selectable",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "rangeSelection",
+              "name": "scrollLock",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "range-selection",
+              "description": "disables scroll container",
+              "attribute": "scroll-lock",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "scrollLock",
+              "name": "rangeSelection",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "scroll-lock",
+              "attribute": "range-selection",
               "reflects": true
             },
             {
@@ -645,28 +657,22 @@
                 "text": "Set<any>"
               },
               "static": true,
-              "default": "new Set()"
-            },
-            {
-              "kind": "field",
-              "name": "keyGridControllerConfig"
-            },
-            {
-              "kind": "field",
-              "name": "gridLayoutControllerConfig"
+              "default": "new Set()",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "gridColumnSizeControllerConfig"
+              "name": "gridLayoutControllerConfig",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#columns",
+              "name": "gridColumnSizeControllerConfig",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#columnRow",
+              "name": "#columns",
               "privacy": "private"
             },
             {
@@ -691,7 +697,16 @@
             },
             {
               "kind": "field",
-              "name": "keyNavGrid"
+              "name": "keyNavGrid",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "grid",
+              "type": {
+                "text": "HTMLElement[][]"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -756,6 +771,7 @@
           "attributes": [
             {
               "name": "i18n",
+              "description": "i18n string options",
               "fieldName": "i18n"
             },
             {
@@ -763,6 +779,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "max height for grid container",
               "fieldName": "height"
             },
             {
@@ -771,6 +788,7 @@
                 "text": "'fixed' | 'flex'"
               },
               "default": "'fixed'",
+              "description": "column layout determines initial column width calculation",
               "fieldName": "columnLayout"
             },
             {
@@ -779,6 +797,7 @@
                 "text": "'row' | 'cell' | 'column' | 'none' | 'stripe'"
               },
               "default": "'row'",
+              "description": "determines the visual style of grid cells and rows",
               "fieldName": "borders"
             },
             {
@@ -786,23 +805,25 @@
               "type": {
                 "text": "'multi' | 'single' | null"
               },
+              "description": "initializes grid to appropriate aria/a11y settings for selections",
               "fieldName": "selectable"
             },
             {
-              "name": "range-selection",
+              "name": "scroll-lock",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "rangeSelection"
+              "description": "disables scroll container",
+              "fieldName": "scrollLock"
             },
             {
-              "name": "scroll-lock",
+              "name": "range-selection",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "scrollLock"
+              "fieldName": "rangeSelection"
             },
             {
               "name": "elevation",
@@ -1147,178 +1168,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "/internals/controllers/key-grid.controller.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "keyGrid",
-          "return": {
-            "type": {
-              "text": "ClassDecorator"
-            }
-          },
-          "description": "https://w3c.github.io/aria-practices/#gridNav_focus"
-        },
-        {
-          "kind": "class",
-          "description": "",
-          "name": "KeyGridController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "#observers",
-              "privacy": "private",
-              "type": {
-                "text": "MutationObserver[]"
-              },
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "#grid",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "#rows",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "#cells",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "#activeCell",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "method",
-              "name": "#clickCell",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "#keynavCell",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "#setActiveCell",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "any"
-                  }
-                },
-                {
-                  "name": "activeCell",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "#updateCellActivation",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "keyGrid",
-          "declaration": {
-            "name": "keyGrid",
-            "module": "/internals/controllers/key-grid.controller.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "KeyGridController",
-          "declaration": {
-            "name": "KeyGridController",
-            "module": "/internals/controllers/key-grid.controller.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "/internals/controllers/key.utils.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "getNextKeyGridItem",
-          "parameters": [
-            {
-              "name": "cells",
-              "type": {
-                "text": "HTMLElement[]"
-              }
-            },
-            {
-              "name": "rows",
-              "type": {
-                "text": "HTMLElement[]"
-              }
-            },
-            {
-              "name": "config",
-              "type": {
-                "text": "{ code: KeyNavigationCode | string; ctrlKey: boolean; dir: string }"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "getNextKeyGridItem",
-          "declaration": {
-            "name": "getNextKeyGridItem",
-            "module": "/internals/controllers/key.utils.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "/internals/index.js",
@@ -1332,22 +1181,6 @@
             "package": "./controllers/interaction-scroll-visibility.controller.js"
           }
         },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./controllers/key-grid.controller.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./utils/dom.js"
-          }
-        },
         {
           "kind": "js",
           "name": "*",
@@ -1358,35 +1191,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "/internals/utils/dom.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "contextMenuClick",
-          "parameters": [
-            {
-              "name": "event",
-              "type": {
-                "text": "MouseEvent"
-              }
-            }
-          ],
-          "description": "right click with context menus & keyboard mouse control https://apple.stackexchange.com/questions/32715/how-do-i-open-the-context-menu-from-a-mac-keyboard"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "contextMenuClick",
-          "declaration": {
-            "name": "contextMenuClick",
-            "module": "/internals/utils/dom.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "/internals/utils/events.js",
@@ -1408,23 +1212,6 @@
               }
             }
           ]
-        },
-        {
-          "kind": "function",
-          "name": "onFirstInteraction",
-          "return": {
-            "type": {
-              "text": "Promise<null>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "element",
-              "type": {
-                "text": "HTMLElement"
-              }
-            }
-          ]
         }
       ],
       "exports": [
@@ -1435,14 +1222,6 @@
             "name": "onChildListMutation",
             "module": "/internals/utils/events.js"
           }
-        },
-        {
-          "kind": "js",
-          "name": "onFirstInteraction",
-          "declaration": {
-            "name": "onFirstInteraction",
-            "module": "/internals/utils/events.js"
-          }
         }
       ]
     },
@@ -1587,34 +1366,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "/internals/utils/keynav.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "validKeyNavigationCode",
-          "parameters": [
-            {
-              "name": "e",
-              "type": {
-                "text": "KeyboardEvent"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "validKeyNavigationCode",
-          "declaration": {
-            "name": "validKeyNavigationCode",
-            "module": "/internals/utils/keynav.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "/internals/utils/traversal.js",
@@ -2015,6 +1766,7 @@
               "type": {
                 "text": "boolean"
               },
+              "description": "selected visual state",
               "attribute": "selected",
               "reflects": true
             },
@@ -2024,6 +1776,7 @@
               "type": {
                 "text": "'fixed' | 'sticky' | ''"
               },
+              "description": "position individual row relative to the grid scroll container",
               "attribute": "position",
               "reflects": true
             },
@@ -2047,6 +1800,7 @@
               "type": {
                 "text": "boolean"
               },
+              "description": "selected visual state",
               "fieldName": "selected"
             },
             {
@@ -2054,6 +1808,7 @@
               "type": {
                 "text": "'fixed' | 'sticky' | ''"
               },
+              "description": "position individual row relative to the grid scroll container",
               "fieldName": "position"
             }
           ],

package/grid/element.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { BpGridRow } from '../row/element.js';
-import { BpGridCell } from '../cell/element.js';
 import { BpGridColumn } from '../column/element.js';
 import { GridLayoutController } from './layout.controller.js';
 /**
@@ -24,6 +23,7 @@ import { GridLayoutController } from './layout.controller.js';
  */
 export declare class BpGrid extends LitElement {
     #private;
+    /** i18n string options */
     i18n: {
         sort: string;
         expand: string;
@@ -52,32 +52,38 @@ export declare class BpGrid extends LitElement {
         lastPage: string;
         pageSize: string;
     };
+    /** max height for grid container */
     height: string;
+    /** column layout determines initial column width calculation */
     columnLayout: 'fixed' | 'flex';
+    /** determines the visual style of grid cells and rows */
     borders: 'row' | 'cell' | 'column' | 'none' | 'stripe';
+    /** initializes grid to appropriate aria/a11y settings for selections */
     selectable: 'multi' | 'single' | null;
-    rangeSelection: boolean;
+    /** disables scroll container */
     scrollLock: boolean;
+    rangeSelection: boolean;
     elevation: 'raised' | 'flat';
     protected _id: string;
     protected gridLayoutController: GridLayoutController;
     static styles: CSSStyleSheet[];
+    /** @private */
     static controllers: Set<any>;
-    get keyGridControllerConfig(): {
-        grid: HTMLElement;
-        rows: HTMLElement[];
-        cells: (BpGridCell | BpGridColumn)[];
-    };
+    /** @private */
     get gridLayoutControllerConfig(): {
         columns: BpGridColumn[];
         columnLayout: "fixed" | "flex";
         height: string;
     };
+    /** @private */
     get gridColumnSizeControllerConfig(): {
         columns: BpGridColumn[];
         rows: BpGridRow[];
     };
+    /** @private */
     get keyNavGrid(): HTMLElement;
+    /** @private */
+    get grid(): HTMLElement[][];
     _internals: ElementInternals;
     render(): import("lit-html").TemplateResult<1>;
     constructor();

package/grid/element.js

@@ -1 +1 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as o}from"lit";import{baseStyles as i,elevationStyles as r,I18nService as l,createId as s,attachRootNodeStyles as n,i18n as a,ariaMultiSelectable as c}from"@blueprintui/components/internals";import{interactionScrollVisibility as h}from"../internals/controllers/interaction-scroll-visibility.controller.js";import{GridLayoutController as u}from"./layout.controller.js";import d from"./element.css.js";import p from"./global.css.js";var m;let g=m=class extends e{static properties={i18n:{type:Object},height:{type:String,reflect:!0},columnLayout:{type:String,reflect:!0,attribute:"column-layout"},borders:{type:String,reflect:!0},selectable:{type:String,reflect:!0},rangeSelection:{type:Boolean,reflect:!0,attribute:"range-selection"},scrollLock:{type:Boolean,reflect:!0,attribute:"scroll-lock"},elevation:{type:String,reflect:!0},_id:{type:String,reflect:!0}};gridLayoutController=new u(this);static styles=[i,r,d];static controllers=new Set;get keyGridControllerConfig(){return{grid:this.keyNavGrid,rows:[this.#t,...Array.from(this.#e)],cells:[...Array.from(this.#o),...Array.from(this.#i)]}}get gridLayoutControllerConfig(){return{columns:Array.from(this.#o),columnLayout:this.columnLayout,height:this.height}}get gridColumnSizeControllerConfig(){return{columns:Array.from(this.#o),rows:Array.from(this.#e)}}get#o(){return this.querySelectorAll("bp-grid-column")}get#t(){return this.shadowRoot.querySelector(".column-row-group")}get#e(){return this.querySelectorAll("bp-grid-row")}get#i(){return this.querySelectorAll("bp-grid-cell")}get#r(){return this.querySelector("bp-grid-placeholder")}get#l(){return this.querySelector("bp-grid-footer")}get keyNavGrid(){return this.shadowRoot.querySelector(".scroll-container")}_internals=this.attachInternals();render(){return o`<div role="presentation" elevation part="internal"><div role="presentation" class="scroll-container"><div role="presentation" class="column-row-group"><div role="row" aria-rowindex="1" class="column-row"><slot name="columns"><bp-grid-column draggable-hidden><span sr-only>${this.i18n.noData}</span></bp-grid-column></slot></div></div><slot role="presentation" class="body-row-group"></slot></div><slot name="footer"></slot><slot name="detail"></slot></div>`}constructor(){super();this._internals.role="grid",this.#s(),this.i18n=l.keys.actions,this.columnLayout="fixed",this.borders="row",this.rangeSelection=!1,this.scrollLock=!1,this._id=s()}async connectedCallback(){super.connectedCallback(),n(this.parentNode,[p]),await this.updateComplete,m.controllers.forEach((t=>new t(this))),this.#n(),this.shadowRoot.addEventListener("slotchange",(()=>this.updateComplete.then((()=>this.#n()))))}#s(){this.addEventListener("sort",(t=>{const e=t.composedPath().find((t=>"BP-GRID-COLUMN"===t.tagName));e&&(e.ariaSort=t.detail)}))}#a=0;get#c(){return this.#a++,1===this.#a&&!this.rangeSelection&&!Array.from(this.#o).find((t=>""!==t.position||void 0!==t.type))}async#n(){this.#c||(this.#h(),this.#u(),this.#d(),this.#p(),this.#m(),this.#g())}#h(){const t=Math.max(this.#e?.length,1),e=this.#l?1:0;this._internals.ariaRowCount=""+(1+t+e),this._internals.ariaColCount=""+this.#o.length}#u(){this.#o.forEach(((t,e)=>t.ariaColIndex=""+(e+1)))}#d(){this.#e?.forEach(((t,e)=>t.ariaRowIndex=""+(e+2)))}#p(){this.#i?.forEach(((t,e)=>t.ariaColIndex=""+(e%this.#o.length+1)))}#m(){this.#r&&(this.#r.ariaRowCount=""+(this.#e.length+1),this.#r._colSpan=this._internals.ariaColCount)}#g(){this.#l&&(this.#l.ariaRowCount=""+(this.#e.length+2),this.#l._colSpan=this._internals.ariaColCount)}};g=m=t([a({key:"actions"}),c(),h()],g);export{g as BpGrid};
+import{__decorate as t}from"tslib";import{LitElement as e,html as i}from"lit";import{baseStyles as o,elevationStyles as r,I18nService as l,createId as s,attachRootNodeStyles as n,i18n as a,ariaMultiSelectable as c}from"@blueprintui/components/internals";import{interactionScrollVisibility as h}from"../internals/controllers/interaction-scroll-visibility.controller.js";import{GridLayoutController as u}from"./layout.controller.js";import d from"./element.css.js";import p from"./global.css.js";var m;let g=m=class extends e{static properties={i18n:{type:Object},height:{type:String,reflect:!0},columnLayout:{type:String,reflect:!0,attribute:"column-layout"},borders:{type:String,reflect:!0},selectable:{type:String,reflect:!0},scrollLock:{type:Boolean,reflect:!0,attribute:"scroll-lock"},rangeSelection:{type:Boolean,reflect:!0,attribute:"range-selection"},elevation:{type:String,reflect:!0},_id:{type:String,reflect:!0}};gridLayoutController=new u(this);static styles=[o,r,d];static controllers=new Set;get gridLayoutControllerConfig(){return{columns:Array.from(this.#t),columnLayout:this.columnLayout,height:this.height}}get gridColumnSizeControllerConfig(){return{columns:Array.from(this.#t),rows:Array.from(this.#e)}}get#t(){return this.querySelectorAll("bp-grid-column")}get#e(){return this.querySelectorAll("bp-grid-row")}get#i(){return this.querySelectorAll("bp-grid-cell")}get#o(){return this.querySelector("bp-grid-placeholder")}get#r(){return this.querySelector("bp-grid-footer")}get keyNavGrid(){return this.shadowRoot.querySelector(".scroll-container")}get grid(){const t=[...Array.from(this.#t),...Array.from(this.#i)],e=this.#t.length,i=[];for(;t.length;)i.push(t.splice(0,e));return i}_internals=this.attachInternals();render(){return i`<div role="presentation" elevation part="internal"><div role="presentation" class="scroll-container"><div role="presentation" class="column-row-group"><div role="row" aria-rowindex="1" class="column-row"><slot name="columns"><bp-grid-column draggable-hidden><span sr-only>${this.i18n.noData}</span></bp-grid-column></slot></div></div><slot role="presentation" class="body-row-group"></slot></div><slot name="footer"></slot><slot name="detail"></slot></div>`}constructor(){super();this._internals.role="grid",this.#l(),this.i18n=l.keys.actions,this.columnLayout="fixed",this.borders="row",this.scrollLock=!1,this.rangeSelection=!1,this._id=s()}async connectedCallback(){super.connectedCallback(),n(this.parentNode,[p]),await this.updateComplete,m.controllers.forEach((t=>new t(this))),this.#s(),this.shadowRoot.addEventListener("slotchange",(()=>this.updateComplete.then((()=>this.#s()))))}#l(){this.addEventListener("sort",(t=>{const e=t.composedPath().find((t=>"BP-GRID-COLUMN"===t.tagName));e&&(e.ariaSort=t.detail)}))}#n=0;get#a(){return this.#n++,1===this.#n&&!this.rangeSelection&&!Array.from(this.#t).find((t=>""!==t.position||void 0!==t.type))}async#s(){this.#a||(this.#c(),this.#h(),this.#u(),this.#d(),this.#p(),this.#m())}#c(){const t=Math.max(this.#e?.length,1),e=this.#r?1:0;this._internals.ariaRowCount=""+(1+t+e),this._internals.ariaColCount=""+this.#t.length}#h(){this.#t.forEach(((t,e)=>t.ariaColIndex=""+(e+1)))}#u(){this.#e?.forEach(((t,e)=>t.ariaRowIndex=""+(e+2)))}#d(){this.#i?.forEach(((t,e)=>t.ariaColIndex=""+(e%this.#t.length+1)))}#p(){this.#o&&(this.#o.ariaRowCount=""+(this.#e.length+1),this.#o._colSpan=this._internals.ariaColCount)}#m(){this.#r&&(this.#r.ariaRowCount=""+(this.#e.length+2),this.#r._colSpan=this._internals.ariaColCount)}};g=m=t([a({key:"actions"}),c(),h()],g);export{g as BpGrid};

package/include/keynav.js

@@ -1 +1 @@
-import{BpGrid as r}from"../grid/element.js";import{KeyGridController as o}from"../internals/controllers/key-grid.controller.js";r.controllers.add(o);
+import{KeynavController as e}from"@blueprintui/typewriter";await customElements.whenDefined("bp-grid"),customElements.get("bp-grid").controllers.add(class extends e{constructor(e){super(e,(()=>({host:e.keyNavGrid,grid:e.grid})))}});

package/internals/index.d.ts

@@ -1,4 +1,2 @@
 export * from './controllers/interaction-scroll-visibility.controller.js';
-export * from './controllers/key-grid.controller.js';
-export * from './utils/dom.js';
 export * from './utils/events.js';

package/internals/index.js

@@ -1 +1 @@
-export{InteractionScrollVisibilityController,interactionScrollVisibility}from"./controllers/interaction-scroll-visibility.controller.js";export{KeyGridController,keyGrid}from"./controllers/key-grid.controller.js";export{contextMenuClick}from"./utils/dom.js";export{onChildListMutation,onFirstInteraction}from"./utils/events.js";
+export{InteractionScrollVisibilityController,interactionScrollVisibility}from"./controllers/interaction-scroll-visibility.controller.js";export{onChildListMutation}from"./utils/events.js";

package/internals/utils/events.d.ts

@@ -1,2 +1 @@
 export declare function onChildListMutation(element: HTMLElement, fn: (mutation?: MutationRecord) => void): MutationObserver;
-export declare function onFirstInteraction(element: HTMLElement): Promise<null>;

package/internals/utils/events.js

@@ -1 +1 @@
-function e(e,n){const t=new MutationObserver((e=>{for(const t of e)"childList"===t.type&&n(t)}));return t.observe(e,{childList:!0}),t}function n(e){return new Promise((n=>{const t=()=>{n(null),e.__bpTouched=!0};e.__bpTouched&&n(null),e.addEventListener("touchstart",t,{once:!0,passive:!0}),e.addEventListener("mouseover",t,{once:!0,passive:!0}),e.addEventListener("keydown",t,{once:!0,passive:!0}),e.addEventListener("focus",t,{once:!0,passive:!0})}))}export{e as onChildListMutation,n as onFirstInteraction};
+function t(t,e){const o=new MutationObserver((t=>{for(const o of t)"childList"===o.type&&e(o)}));return o.observe(t,{childList:!0}),o}export{t as onChildListMutation};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprintui/grid",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "main": "./index.js",
   "module": "./index.js",
   "typings": "./index.d.ts",
@@ -38,7 +38,11 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@blueprintui/components": "^0.0.31",
-    "lit": "^2.5.0"
+    "@blueprintui/components": "^0.0.34",
+    "@blueprintui/icons": "^0.0.23",
+    "@blueprintui/themes": "^0.0.14",
+    "@blueprintui/typwriter": "^0.0.1",
+    "lit": "^2.5.0",
+    "tslib": "^2.4.1"
   }
 }

package/row/element.d.ts

@@ -14,7 +14,9 @@ import { LitElement } from 'lit';
  */
 export declare class BpGridRow extends LitElement {
     #private;
+    /** selected visual state */
     selected: boolean;
+    /** position individual row relative to the grid scroll container */
     position: 'fixed' | 'sticky' | '';
     static styles: CSSStyleSheet[];
     render(): import("lit-html").TemplateResult<1>;

package/internals/controllers/key-grid.controller.d.ts

@@ -1,19 +0,0 @@
-import { ReactiveController, ReactiveElement } from 'lit';
-export interface KeyGridConfig {
-    keyGridControllerConfig: {
-        grid?: HTMLElement;
-        rows: NodeListOf<HTMLElement> | HTMLElement[];
-        cells: NodeListOf<HTMLElement> | HTMLElement[];
-    };
-}
-/**
- * https://w3c.github.io/aria-practices/#gridNav_focus
- */
-export declare function keyGrid<T extends ReactiveElement & KeyGridConfig>(): ClassDecorator;
-export declare class KeyGridController<T extends ReactiveElement & KeyGridConfig> implements ReactiveController {
-    #private;
-    private host;
-    constructor(host: T);
-    hostConnected(): Promise<void>;
-    hostDisconnected(): void;
-}

package/internals/controllers/key-grid.controller.js

@@ -1 +0,0 @@
-import{onFirstInteraction as t,onChildListMutation as e}from"../utils/events.js";import{getFlattenedDOMTree as s,getFlattenedFocusableItems as i}from"../utils/traversal.js";import{contextMenuClick as r}from"../utils/dom.js";import{validKeyNavigationCode as o}from"../utils/keynav.js";import{initializeKeyListItems as l,simpleFocusable as n,getActiveElement as h,setActiveKeyListItem as c,focusElement as d}from"../utils/focus.js";import{getNextKeyGridItem as a}from"./key.utils.js";function f(){return t=>t.addInitializer((t=>new u(t)))}class u{host;#t=[];get#e(){return this.host.keyGridControllerConfig.grid}get#s(){return Array.from(this.host.keyGridControllerConfig.rows)}get#i(){return Array.from(this.host.keyGridControllerConfig.cells)}get#r(){return Array.from(this.#i).find((t=>0===t.tabIndex))}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,await t(this.host),l(this.#i),this.#e.addEventListener("mouseup",(t=>this.#o(t))),this.#e.addEventListener("keydown",(t=>this.#l(t))),this.#e.addEventListener("keyup",(t=>this.#n(t))),this.#t.push(e(this.#e,(()=>l(this.#i))))}hostDisconnected(){this.#t.forEach((t=>t.disconnect()))}#o(t){if(!r(t)){const e=t.composedPath().find((t=>this.#i.find((e=>e===t))));e&&this.#h(t,e)}}#l(t){if(o(t)&&n(h())){const{x:e,y:i}=a(this.#i,this.#s,{code:t.code,ctrlKey:t.ctrlKey,dir:this.host.dir}),r=Array.from(s(this.#s[i])).filter((t=>!!this.#i.find((e=>e===t))))[e];this.#h(t,r),t.preventDefault()}}#h(t,e){c(this.#i,e);const s=i(e).filter((t=>!t.hidden&&!t.ariaHidden)),r=s.filter((t=>n(t)));1===r.length&&1===s.length?d(r[0]):d(e),e.dispatchEvent(new CustomEvent("bpKeyChange",{bubbles:!0,detail:{code:t.code,shiftKey:t.shiftKey,activeItem:e}}))}#n(t){"Escape"===t.code&&this.#r?.focus(),"Enter"===t.code&&this.#r===t.composedPath()[0]&&i(this.#r)[0]?.focus()}}export{u as KeyGridController,f as keyGrid};

package/internals/controllers/key.utils.d.ts

@@ -1,9 +0,0 @@
-import { KeyNavigationCode } from '../utils/keynav.js';
-export declare function getNextKeyGridItem(cells: HTMLElement[], rows: HTMLElement[], config: {
-    code: KeyNavigationCode | string;
-    ctrlKey: boolean;
-    dir: string;
-}): {
-    x: number;
-    y: number;
-};

package/internals/controllers/key.utils.js

@@ -1 +0,0 @@
-import{KeyNavigationCode as r}from"../utils/keynav.js";import{getFlattenedDOMTree as t}from"../utils/traversal.js";function o(o,e,n){const i=o.find((r=>0===r.tabIndex)),f=e.find((r=>t(r).find((r=>r===i)))),d=Array.from(t(f)).filter((r=>!!o.find((t=>t===r)))),l=e.length-1,w=d.length-1,{code:a,ctrlKey:s,dir:A}=n;let g=d.indexOf(i),m=e.indexOf(f);const c="rtl"===A?r.ArrowRight:r.ArrowLeft,p="rtl"===A?r.ArrowLeft:r.ArrowRight;return a===r.ArrowUp&&0!==m?m-=1:a===r.ArrowDown&&m<l?m+=1:a===c&&0!==g?g-=1:a===p&&g<w?g+=1:a===r.End?(g=w,s&&(m=l)):a===r.Home?(g=0,s&&(m=0)):a===r.PageUp?m=m-4>0?m-4:0:a===r.PageDown&&(m=m+4<l?m+4:l),{x:g,y:m}}export{o as getNextKeyGridItem};

package/internals/utils/dom.d.ts

@@ -1,2 +0,0 @@
-/** right click with context menus & keyboard mouse control https://apple.stackexchange.com/questions/32715/how-do-i-open-the-context-menu-from-a-mac-keyboard */
-export declare function contextMenuClick(event: MouseEvent): boolean;

package/internals/utils/dom.js

@@ -1 +0,0 @@
-function t(t){return 2===t.buttons&&!t.ctrlKey||1===t.buttons&&t.ctrlKey}export{t as contextMenuClick};

package/internals/utils/focus.js

@@ -1 +0,0 @@
-function t(t){return t.matches("a[href],area[href],input:not([disabled]),button:not([disabled]),select:not([disabled]),textarea:not([disabled]),iframe,object,embed,*[tabindex],*[contenteditable=true],[role=button]:not([disabled])")}function e(t){return t.matches("a[href],button:not([disabled]),input[type=checkbox],input[type=radio],object,embed,*[tabindex],[role=button]:not([disabled])")}function n(t=document){return t.activeElement&&t.activeElement.shadowRoot?n(t.activeElement.shadowRoot)??t.activeElement:t.activeElement}function o(e){e&&!t(e)?(e.setAttribute("tabindex","-1"),e.focus(),e.addEventListener("blur",(()=>e.removeAttribute("tabindex")),{once:!0})):e?.focus()}function a(t,e){t.forEach((t=>t.tabIndex=-1)),e.tabIndex=0}function d(t){t.forEach((t=>t.tabIndex=-1)),t[0].tabIndex=0}export{o as focusElement,t as focusable,n as getActiveElement,d as initializeKeyListItems,a as setActiveKeyListItem,e as simpleFocusable};

package/internals/utils/keynav.d.ts

@@ -1,11 +0,0 @@
-export declare function validKeyNavigationCode(e: KeyboardEvent): boolean;
-export declare enum KeyNavigationCode {
-    ArrowUp = "ArrowUp",
-    ArrowDown = "ArrowDown",
-    ArrowLeft = "ArrowLeft",
-    ArrowRight = "ArrowRight",
-    End = "End",
-    Home = "Home",
-    PageUp = "PageUp",
-    PageDown = "PageDown"
-}

package/internals/utils/keynav.js

@@ -1 +0,0 @@
-function o(o){return o.code===r.ArrowUp||o.code===r.ArrowDown||o.code===r.ArrowLeft||o.code===r.ArrowRight||o.code===r.End||o.code===r.Home||o.code===r.PageUp||o.code===r.PageDown}var r;!function(o){o.ArrowUp="ArrowUp",o.ArrowDown="ArrowDown",o.ArrowLeft="ArrowLeft",o.ArrowRight="ArrowRight",o.End="End",o.Home="Home",o.PageUp="PageUp",o.PageDown="PageDown"}(r||(r={}));export{r as KeyNavigationCode,o as validKeyNavigationCode};

package/internals/utils/traversal.js

@@ -1 +0,0 @@
-import{focusable as r}from"./focus.js";function n(n,e=10){return t(n,e).filter((n=>r(n)))}function t(r,n=10){return Array.from(e(r)).reduce(((r,o)=>[...r,[o,[...Array.from(e(o)).map((r=>[r,t(r,n)]))]]]),[]).flat(n)}function e(r){if(r.documentElement)return r.documentElement.children;if(r.shadowRoot)return r.shadowRoot.children;if(r.assignedElements){const n=r.assignedElements();return n.length?n:r.children}return r.children}function o(r){return r?.constructor===Object}function c(...r){const n={};return r.map((r=>o(r)?{...r}:{})).forEach((r=>{Object.keys(r).forEach((t=>{const e=r[t];Array.isArray(e)?n[t]=Array.from(e):o(e)?n[t]=c(n[t]||{},e):n[t]=e}))})),n}export{e as getChildren,t as getFlattenedDOMTree,n as getFlattenedFocusableItems,o as isObject,c as mergeObjects};