@blueprintui/grid 0.0.0 → 0.0.1

package/custom-elements.json

@@ -556,6 +556,7 @@
             {
               "kind": "field",
               "name": "i18n",
+              "description": "i18n string options",
               "attribute": "i18n"
             },
             {
@@ -564,6 +565,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "max height for grid container",
               "attribute": "height",
               "reflects": true
             },
@@ -574,6 +576,7 @@
                 "text": "'fixed' | 'flex'"
               },
               "default": "'fixed'",
+              "description": "column layout determines initial column width calculation",
               "attribute": "column-layout",
               "reflects": true
             },
@@ -584,6 +587,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 +597,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,19 +651,23 @@
                 "text": "Set<any>"
               },
               "static": true,
-              "default": "new Set()"
+              "default": "new Set()",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "keyGridControllerConfig"
+              "name": "keyGridControllerConfig",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "gridLayoutControllerConfig"
+              "name": "gridLayoutControllerConfig",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "gridColumnSizeControllerConfig"
+              "name": "gridColumnSizeControllerConfig",
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -756,6 +766,7 @@
           "attributes": [
             {
               "name": "i18n",
+              "description": "i18n string options",
               "fieldName": "i18n"
             },
             {
@@ -763,6 +774,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "max height for grid container",
               "fieldName": "height"
             },
             {
@@ -771,6 +783,7 @@
                 "text": "'fixed' | 'flex'"
               },
               "default": "'fixed'",
+              "description": "column layout determines initial column width calculation",
               "fieldName": "columnLayout"
             },
             {
@@ -779,6 +792,7 @@
                 "text": "'row' | 'cell' | 'column' | 'none' | 'stripe'"
               },
               "default": "'row'",
+              "description": "determines the visual style of grid cells and rows",
               "fieldName": "borders"
             },
             {
@@ -786,23 +800,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",
@@ -2015,6 +2031,7 @@
               "type": {
                 "text": "boolean"
               },
+              "description": "selected visual state",
               "attribute": "selected",
               "reflects": true
             },
@@ -2024,6 +2041,7 @@
               "type": {
                 "text": "'fixed' | 'sticky' | ''"
               },
+              "description": "position individual row relative to the grid scroll container",
               "attribute": "position",
               "reflects": true
             },
@@ -2047,6 +2065,7 @@
               "type": {
                 "text": "boolean"
               },
+              "description": "selected visual state",
               "fieldName": "selected"
             },
             {
@@ -2054,6 +2073,7 @@
               "type": {
                 "text": "'fixed' | 'sticky' | ''"
               },
+              "description": "position individual row relative to the grid scroll container",
               "fieldName": "position"
             }
           ],

package/grid/element.d.ts

@@ -24,6 +24,7 @@ import { GridLayoutController } from './layout.controller.js';
  */
 export declare class BpGrid extends LitElement {
     #private;
+    /** i18n string options */
     i18n: {
         sort: string;
         expand: string;
@@ -52,27 +53,36 @@ 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>;
+    /** @private */
     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[];

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 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},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=[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.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.#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};

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{KeyGridController as e}from"../internals/controllers/key-grid.controller.js";await customElements.whenDefined("bp-grid"),customElements.get("bp-grid").controllers.add(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprintui/grid",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "main": "./index.js",
   "module": "./index.js",
   "typings": "./index.d.ts",
@@ -38,7 +38,10 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@blueprintui/components": "^0.0.31",
-    "lit": "^2.5.0"
+    "@blueprintui/components": "^0.0.33",
+    "@blueprintui/icons": "^0.0.22",
+    "@blueprintui/themes": "^0.0.12",
+    "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>;