@blueprintui/grid 0.0.0

package/footer/element.css.js

@@ -0,0 +1 @@
+const a=new CSSStyleSheet;a.replaceSync(":host{--min-height:var(--bp-size-9, var(--bp-interaction-touch-target));--background:var(--bp-layer-container-background);--padding-block:0;--padding-inline:var(--bp-size-6)}[part=internal]{min-height:var(--min-height);display:flex;align-items:center;padding-inline:var(--padding-inline);padding-block:var(--padding-block);border-top:var(--cell-border-width, var(--bp-object-border-width-100)) solid var(--bp-object-border-color-100);color:var(--bp-text-color-500);background:var(--background);font-size:var(--bp-text-size-200);width:100%}::slotted(bp-grid-pagination),::slotted(bp-pagination){margin-left:auto}");export{a as default};

package/footer/element.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Grid Footer
+ *
+ * ```typescript
+ * import '@blueprintui/grid/include/core.js';
+ * ```
+ *
+ * @element bp-grid-footer
+ * @slot - footer content
+ * @cssprop --min-height
+ * @cssprop --background
+ * @cssprop --padding-block
+ * @cssprop --padding-inline
+ */
+export declare class BpGridFooter extends LitElement {
+    #private;
+    static styles: CSSStyleSheet[];
+    _colSpan: string;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+}

package/footer/element.js

@@ -0,0 +1 @@
+import{LitElement as t,html as e}from"lit";import{baseStyles as r}from"@blueprintui/components/internals";import s from"./element.css.js";class n extends t{static properties={_colSpan:{state:!0}};static styles=[r,s];constructor(){super();this._colSpan=""}#t=this.attachInternals();render(){return e`<slot role="gridcell" part="internal" .ariaColSpan="${this._colSpan}"></slot>`}connectedCallback(){super.connectedCallback(),this.slot="footer",this.#t.role="row"}}export{n as BpGridFooter};

package/grid/element.css.js

@@ -0,0 +1 @@
+const o=new CSSStyleSheet;o.replaceSync("@keyframes fadein{0%{opacity:0}to{opacity:1}}[hidden]{display:none!important}:host{--background:var(--bp-layer-container-background);--body-height:auto;--body-min-height:auto;--scrollbar-background:var(--background);--scrollbar-thumb-background:var(--bp-object-border-color-100);--column-height:48px;--row-height:48px;--scroll-padding-top:var(--column-height);--row-content-visibility:auto;--column-text-align:left;--cell-text-algin:left;--border:0;width:100%;display:block;position:relative}:host([range-selection]){user-select:none}:host([borders*='cell']) ::slotted(bp-grid-row),:host([borders*='column']) ::slotted(bp-grid-row){--cell-border-width:var(--bp-object-border-width-100)}:host([borders*='column']) ::slotted(bp-grid-row){--border-top:0;--border-bottom:0}:host([borders*='none']) ::slotted(bp-grid-row),:host([borders*='stripe']) ::slotted(bp-grid-row){--border-top:0;--border-bottom:0}::slotted(bp-grid-row:first-of-type){--border-top:0}::slotted(bp-grid-row:last-of-type){--border-bottom:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100)}:host([borders*='stripe']) ::slotted(bp-grid-row:nth-child(even)){--bp-interaction-offset:var(--bp-interaction-hover-offset)}:host([column-align*='center']){--column-justify-content:center;--cell-justify-content:center}:host([column-align*='end']){--column-justify-content:flex-end;--cell-justify-content:flex-end}[part=internal]{border:var(--border);border-radius:var(--bp-object-border-radius-100);background:var(--background);position:relative}.scroll-container{overflow:auto;height:var(--body-height, 100%);min-height:var(--body-min-height, auto);width:100%;display:flex;flex-direction:column;scroll-padding-top:var(--scroll-padding-top);background:var(--bp-layer-container-background)}:host([scroll-lock]) .scroll-container{overflow:hidden}.body-row-group{display:flex;flex-direction:column;flex:1 1 0%;min-width:fit-content;margin-top:var(--bp-size-2)}.body-row-group:first-child,.column-row-group:first-child{display:contents}.column-row{display:grid;top:0;position:sticky;z-index:99;min-width:fit-content;grid-template-columns:var(--ch-grid);box-shadow:0 var(--bp-object-border-width-100)0 var(--bp-object-border-color-100)}::slotted(bp-grid-row:not([bp-draggable=target]):first-of-type){--box-shadow:var(--bp-object-border-width-100) solid transparent}::-webkit-scrollbar{width:var(--bp-size-5);height:var(--bp-size-5);background:0 0}::-webkit-scrollbar-track{margin-top:var(--bp-interaction-touch-target);box-shadow:inset 0 0 var(--bp-size-5) var(--scrollbar-background)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-background);border-radius:var(--bp-object-border-radius-100);border:var(--bp-size-2) solid var(--scrollbar-background)}::-webkit-scrollbar-corner{background:rgba(0 0 0 0%)}");export{o as default};

package/grid/element.d.ts

@@ -0,0 +1,85 @@
+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';
+/**
+ * Grid
+ *
+ * ```typescript
+ * import '@blueprintui/grid/include/core.js';
+ * ```
+ *
+ * @element bp-grid
+ * @cssprop --background
+ * @cssprop --body-height
+ * @cssprop --scrollbar-background
+ * @cssprop --scrollbar-thumb-background
+ * @cssprop --column-height
+ * @cssprop --row-height
+ * @cssprop --scroll-padding-top
+ * @cssprop --row-content-visibility
+ * @cssprop --column-text-align
+ * @cssprop --cell-text-algin
+ */
+export declare class BpGrid extends LitElement {
+    #private;
+    i18n: {
+        sort: string;
+        expand: string;
+        close: string;
+        resize: string;
+        filter: string;
+        loading: string;
+        show: string;
+        hide: string;
+        previous: string;
+        next: string;
+        first: string;
+        last: string;
+        today: string;
+        browse: string;
+        removeFile: string;
+        files: string;
+        resizeColumn: string;
+        closeDetails: string;
+        noData: string;
+        action: string;
+        dropTarget: string;
+        firstPage: string;
+        previousPage: string;
+        nextPage: string;
+        lastPage: string;
+        pageSize: string;
+    };
+    height: string;
+    columnLayout: 'fixed' | 'flex';
+    borders: 'row' | 'cell' | 'column' | 'none' | 'stripe';
+    selectable: 'multi' | 'single' | null;
+    rangeSelection: boolean;
+    scrollLock: boolean;
+    elevation: 'raised' | 'flat';
+    protected _id: string;
+    protected gridLayoutController: GridLayoutController;
+    static styles: CSSStyleSheet[];
+    static controllers: Set<any>;
+    get keyGridControllerConfig(): {
+        grid: HTMLElement;
+        rows: HTMLElement[];
+        cells: (BpGridCell | BpGridColumn)[];
+    };
+    get gridLayoutControllerConfig(): {
+        columns: BpGridColumn[];
+        columnLayout: "fixed" | "flex";
+        height: string;
+    };
+    get gridColumnSizeControllerConfig(): {
+        columns: BpGridColumn[];
+        rows: BpGridRow[];
+    };
+    get keyNavGrid(): HTMLElement;
+    _internals: ElementInternals;
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+    connectedCallback(): Promise<void>;
+}

package/grid/element.js

@@ -0,0 +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};

package/grid/global.css.js

@@ -0,0 +1 @@
+const e=new CSSStyleSheet;e.replaceSync("bp-grid-row:has(bp-checkbox:--checked),bp-grid-row:has(bp-radio:--checked){--bp-interaction-offset:var(--bp-interaction-selected-offset)}");export{e as default};

package/grid/layout.controller.d.ts

@@ -0,0 +1,21 @@
+import { ReactiveControllerHost } from 'lit';
+export declare type Column = HTMLElement & {
+    width: string;
+    type: string;
+};
+declare type Grid = HTMLElement & {
+    gridLayoutControllerConfig: {
+        columns: NodeListOf<Column> | Column[];
+        columnLayout: 'fixed' | 'flex';
+        height?: string;
+    };
+};
+export declare class GridLayoutController {
+    #private;
+    private host;
+    constructor(host: ReactiveControllerHost & Grid);
+    hostConnected(): Promise<void>;
+    hostUpdated(): void;
+    hostDisconnected(): void;
+}
+export {};

package/grid/layout.controller.js

@@ -0,0 +1 @@
+import{listenForAttributeListChange as t,isNumericString as i}from"@blueprintui/components/internals";import{onChildListMutation as s}from"../internals/utils/events.js";class e{host;#t=[];#i;get#s(){return Array.from(this.#i??[])}get#e(){return this.host.gridLayoutControllerConfig}get#o(){return this.#s.filter((t=>!t.hidden))}get#h(){return this.#o["rtl"===this.host.getAttribute("dir")?0:this.#o.length-1]}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#r(),this.host.addEventListener("resizeChange",(()=>this.#n()),{once:!0,capture:!0}),this.#t.push(s(this.host,(async t=>{await this.host.updateComplete,t&&this.#l(t)&&this.#r()}))),this.#t.push(t(this.host,["hidden"],(()=>this.#r())))}hostUpdated(){this.#e.height&&this.host.style.setProperty("--body-height",i(this.#e.height)?this.#e.height+"px":this.#e.height)}hostDisconnected(){this.#t.forEach((t=>t.disconnect()))}#l(t){return[...Array.from(t.removedNodes),...Array.from(t.addedNodes)].find((t=>"BP-GRID-COLUMN"===t.tagName))}#n(){"fixed"===this.#e.columnLayout&&(this.#o.filter((t=>t.width)).forEach((t=>this.host.style.setProperty("--ch"+t.ariaColIndex,i(t.width)?t.width+"px":t.width))),this.#o.filter((t=>!t.width&&parseInt(t.ariaColIndex)!==this.#s.length)).forEach((t=>this.host.style.setProperty("--ch"+t.ariaColIndex,parseInt(getComputedStyle(t).width)+"px"))),this.host.style.setProperty("--ch"+this.#h.ariaColIndex,`minmax(${this.#d()??parseInt(getComputedStyle(this.#h).width)+"px"}, 100%)`))}#d(){return i(this.#h.width)?this.#h.width+"px":this.#h.width?this.#h.width:null}#r(){this.#i=this.#e.columns,this.#a(),this.#u()}#a(){const t=this.#s.filter((t=>!t.hidden)).reduce(((t,s,e)=>`${t} var(--ch${e+1}, ${(i(s.width)?s.width+"px":s.width)||"1fr"})`),"");this.host.style.setProperty("--ch-grid",t)}#u(){this.#o.forEach(((t,i)=>{t.removeAttribute("draggable-hidden"),"action"===t.type&&"action"===this.#o[i+1]?.type&&t.setAttribute("draggable-hidden","")})),this.#h?.setAttribute("draggable-hidden","")}}export{e as GridLayoutController};

package/include/core.d.ts

@@ -0,0 +1,13 @@
+import '@blueprintui/components/include/button-icon.js';
+import { BpGrid } from '../grid/element.js';
+import { BpGridRow } from '../row/element.js';
+import { BpGridCell } from '../cell/element.js';
+import { BpGridColumn } from '../column/element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'bp-grid': BpGrid;
+        'bp-grid-row': BpGridRow;
+        'bp-grid-cell': BpGridCell;
+        'bp-grid-column': BpGridColumn;
+    }
+}

package/include/core.js

@@ -0,0 +1 @@
+import"@blueprintui/components/include/button-icon.js";import{BpGrid as e}from"../grid/element.js";import{BpGridRow as m}from"../row/element.js";import{BpGridCell as t}from"../cell/element.js";import{BpGridColumn as o}from"../column/element.js";customElements.get("bp-grid")||customElements.define("bp-grid",e),customElements.get("bp-grid-row")||customElements.define("bp-grid-row",m),customElements.get("bp-grid-cell")||customElements.define("bp-grid-cell",t),customElements.get("bp-grid-column")||customElements.define("bp-grid-column",o);

package/include/footer.d.ts

@@ -0,0 +1,6 @@
+import { BpGridFooter } from '../footer/element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'bp-grid-footer': BpGridFooter;
+    }
+}

package/include/footer.js

@@ -0,0 +1 @@
+import{BpGridFooter as e}from"../footer/element.js";customElements.get("bp-grid-footer")||customElements.define("bp-grid-footer",e);

package/include/keynav.d.ts

@@ -0,0 +1 @@
+export {};

package/include/keynav.js

@@ -0,0 +1 @@
+import{BpGrid as r}from"../grid/element.js";import{KeyGridController as o}from"../internals/controllers/key-grid.controller.js";r.controllers.add(o);

package/include/pagination.d.ts

@@ -0,0 +1,10 @@
+import { BpGridPagination } from '../pagination/element.js';
+import '@blueprintui/components/include/button-icon.js';
+import '@blueprintui/components/include/pagination.js';
+import '@blueprintui/components/include/select.js';
+import '@blueprintui/components/include/input.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'bp-grid-pagination': BpGridPagination;
+    }
+}

package/include/pagination.js

@@ -0,0 +1 @@
+import{BpGridPagination as n}from"../pagination/element.js";import"@blueprintui/components/include/button-icon.js";import"@blueprintui/components/include/pagination.js";import"@blueprintui/components/include/select.js";import"@blueprintui/components/include/input.js";customElements.get("bp-grid-pagination")||customElements.define("bp-grid-pagination",n);

package/include/placeholder.d.ts

@@ -0,0 +1,6 @@
+import { BpGridPlaceholder } from '../placeholder/element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'bp-grid-placeholder': BpGridPlaceholder;
+    }
+}

package/include/placeholder.js

@@ -0,0 +1 @@
+import{BpGridPlaceholder as e}from"../placeholder/element.js";customElements.get("bp-grid-placeholder")||customElements.define("bp-grid-placeholder",e);

package/index.d.ts

@@ -0,0 +1,7 @@
+export * from './cell/element.js';
+export * from './column/element.js';
+export * from './footer/element.js';
+export * from './pagination/element.js';
+export * from './placeholder/element.js';
+export * from './row/element.js';
+export * from './grid/element.js';

package/index.js

@@ -0,0 +1 @@
+export{BpGridCell}from"./cell/element.js";export{BpGridColumn}from"./column/element.js";export{BpGridFooter}from"./footer/element.js";export{BpGridPagination}from"./pagination/element.js";export{BpGridPlaceholder}from"./placeholder/element.js";export{BpGridRow}from"./row/element.js";export{BpGrid}from"./grid/element.js";

package/internals/controllers/interaction-scroll-visibility.controller.d.ts

@@ -0,0 +1,12 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+/**
+ * Default to `content-visibility: auto` for lazy render, on scroll set all row items to `content-visibility: visible` for eager render
+ * Enables fast initial render and smooth eager rendering anytime after for items within a bounded scroll box.
+ */
+export declare function interactionScrollVisibility<T extends ReactiveElement>(): ClassDecorator;
+export declare class InteractionScrollVisibilityController<T extends ReactiveElement> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): Promise<void>;
+}

package/internals/controllers/interaction-scroll-visibility.controller.js

@@ -0,0 +1 @@
+function t(){return t=>t.addInitializer((t=>new i(t)))}class i{host;constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.host.renderRoot.addEventListener("scroll",(()=>this.#t()),{once:!0,capture:!0}),this.host.renderRoot.addEventListener("pointerdown",(()=>this.#t()),{once:!0,capture:!0})}#t(){this.host.style.setProperty("--row-content-visibility","visibile")}}export{i as InteractionScrollVisibilityController,t as interactionScrollVisibility};

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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1 @@
+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/index.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +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";

package/internals/utils/dom.d.ts

@@ -0,0 +1,2 @@
+/** 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

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

package/internals/utils/events.d.ts

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

package/internals/utils/events.js

@@ -0,0 +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};

package/internals/utils/focus.d.ts

@@ -0,0 +1,7 @@
+export declare function focusable(element: Element): boolean;
+/** focus primitives, any interactive element does not requiring advanced keyboard interactions like arrow/navigation */
+export declare function simpleFocusable(element: Element): boolean;
+export declare function getActiveElement(root?: Document | ShadowRoot): Element | null;
+export declare function focusElement(element: HTMLElement): void;
+export declare function setActiveKeyListItem(items: NodeListOf<HTMLElement> | HTMLElement[], item: HTMLElement): void;
+export declare function initializeKeyListItems(items: NodeListOf<HTMLElement> | HTMLElement[]): void;

package/internals/utils/focus.js

@@ -0,0 +1 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1 @@
+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.d.ts

@@ -0,0 +1,5 @@
+export declare function getFlattenedFocusableItems(element: Node, depth?: number): HTMLElement[];
+export declare function getFlattenedDOMTree(node: Node, depth?: number): HTMLElement[];
+export declare function getChildren(node: any): any;
+export declare function isObject(val: any): boolean;
+export declare function mergeObjects(...objs: object[]): object;

package/internals/utils/traversal.js

@@ -0,0 +1 @@
+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};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@blueprintui/grid",
+  "version": "0.0.0",
+  "main": "./index.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts",
+  "type": "module",
+  "files": [
+    "*"
+  ],
+  "customElements": "./custom-elements.json",
+  "keywords": [
+    "web component",
+    "datagrid",
+    "datatable",
+    "ui"
+  ],
+  "description": "",
+  "homepage": "https://blueprintui.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://blueprintui.dev"
+  },
+  "bugs": {
+    "url": "https://blueprintui.dev"
+  },
+  "author": "Crylan Software",
+  "license": "MIT",
+  "sideEffects": [
+    "./include/*.js"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./custom-elements.json": "./custom-elements.json",
+    ".": "./index.js",
+    "./include/*": "./include/*",
+    "./internals": "./internals/index.js",
+    "./*": "./*/index.js"
+  },
+  "dependencies": {
+    "@blueprintui/components": "^0.0.31",
+    "lit": "^2.5.0"
+  }
+}

package/pagination/element.css.js

@@ -0,0 +1 @@
+const e=new CSSStyleSheet;e.replaceSync('@import "./../../styles/module.tokens";[part=internal]{display:flex;gap:var(--bp-space-sm)}button{background:0 0;border:0;cursor:pointer}button[disabled]{cursor:not-allowed}');export{e as default};

package/pagination/element.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+/**
+ * Grid Pagination
+ *
+ * ```typescript
+ * import '@blueprintui/grid/include/core.js';
+ * ```
+ *
+ * ```html
+ * <bp-grid-pagination></bp-grid-pagination>
+ * ```
+ *
+ * @element bp-grid-pagination
+ * @event page
+ * @event size
+ */
+export declare class BpGridPagination extends LitElement {
+    #private;
+    i18n: {
+        sort: string;
+        expand: string;
+        close: string;
+        resize: string;
+        filter: string;
+        loading: string;
+        show: string;
+        hide: string;
+        previous: string;
+        next: string;
+        first: string;
+        last: string;
+        today: string;
+        browse: string;
+        removeFile: string;
+        files: string;
+        resizeColumn: string;
+        closeDetails: string;
+        noData: string;
+        action: string;
+        dropTarget: string;
+        firstPage: string;
+        previousPage: string;
+        nextPage: string;
+        lastPage: string;
+        pageSize: string;
+    };
+    page: number;
+    pageSize: number;
+    pageCount: number;
+    pageSizeOptions: number[];
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/pagination/element.js

@@ -0,0 +1 @@
+import{__decorate as e}from"tslib";import{LitElement as t,html as i}from"lit";import{I18nService as a,baseStyles as s,i18n as p}from"@blueprintui/components/internals";import n from"./element.css.js";let g=class extends t{static properties={i18n:{type:Object},page:{type:Number},pageSize:{type:Number,attribute:"page-size"},pageCount:{type:Number,attribute:"page-count"},pageSizeOptions:{type:Array,attribute:"page-size-options"}};constructor(){super(...arguments);this.i18n=a.keys.actions,this.page=1,this.pageSize=10,this.pageCount=1,this.pageSizeOptions=[]}static styles=[s,n];render(){return i`<section part="internal"><bp-pagination aria-label="pagination">${this.pageSizeOptions.length?i`<bp-select .value="${this.pageSize.toString()}" .ariaLabel="${this.i18n.pageSize}" @input="${e=>this.#e(parseInt(e.target.value))}">${this.pageSizeOptions.map((e=>i`<bp-option value="${e}" ?selected="${e===this.pageSize}">${e}</bp-option>`))}</bp-select>`:""}<bp-button-icon slot="first" .ariaLabel="${this.i18n.firstPage}" .disabled="${1===this.page}" @click="${this.#t}"></bp-button-icon><bp-button-icon slot="prev" .ariaLabel="${this.i18n.previousPage}" .disabled="${1===this.page}" @click="${this.#i}"></bp-button-icon><bp-field novalidate><bp-input type="number" size="${e=this.page,1+(0|Math.log10((e^e>>31)-(e>>31)))}" min="1" value="${this.page}" max="${this.pageCount}" .ariaLabel="${`${this.page} of ${this.pageCount}`}" @input="${this.#a}"></bp-input><bp-field-message>/ ${this.pageCount}</bp-field-message></bp-field><bp-button-icon slot="next" .ariaLabel="${this.i18n.nextPage}" ?disabled="${this.page===this.pageCount}" @click="${this.#s}"></bp-button-icon><bp-button-icon slot="last" .ariaLabel="${this.i18n.lastPage}" ?disabled="${this.page===this.pageCount}" @click="${this.#p}"></bp-button-icon></bp-pagination></section>`;var e}#a(e){this.#n(e.target.valueAsNumber)}#s(){this.#n(this.page+1)}#i(){this.#n(this.page-1)}#t(){this.#n(1)}#p(){this.#n(this.pageCount)}#n(e){this.dispatchEvent(new CustomEvent("page",{detail:e}))}#e(e){this.dispatchEvent(new CustomEvent("size",{detail:e}))}};g=e([p({key:"actions"})],g);export{g as BpGridPagination};

package/placeholder/element.css.js

@@ -0,0 +1 @@
+const a=new CSSStyleSheet;a.replaceSync(":host{--background:var(--bp-layer-container-background);--box-shadow:none;--color:var(--bp-text-color-500);--padding:var(--bp-size-4);--gap:var(--bp-space-md);content-visibility:var(--row-content-visibility, auto);flex:1}[part=internal]{box-shadow:var(--box-shadow);padding:var(--padding);min-height:var(--bp-size-8);background:var(--background);width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--gap);position:relative;grid-column:1/-1;color:var(--color);text-align:center}:host([draggable='false']) [part=internal]{min-height:var(--bp-size-10)}:host([bp-draggable*='target']){--box-shadow:inset 0 var(--bp-object-border-width-300) 0 calc(var(--bp-size-1) * -1) var(--bp-interaction-accent-background)}");export{a as default};

package/placeholder/element.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+/**
+ * Grid Placeholder
+ *
+ * ```typescript
+ * import '@blueprintui/grid/include/core.js';
+ * ```
+ *
+ * @element bp-grid-placeholder
+ */
+export declare class BpGridPlaceholder extends LitElement {
+    #private;
+    i18n: {
+        sort: string;
+        expand: string;
+        close: string;
+        resize: string;
+        filter: string;
+        loading: string;
+        show: string;
+        hide: string;
+        previous: string;
+        next: string;
+        first: string;
+        last: string;
+        today: string;
+        browse: string;
+        removeFile: string;
+        files: string;
+        resizeColumn: string;
+        closeDetails: string;
+        noData: string;
+        action: string;
+        dropTarget: string;
+        firstPage: string;
+        previousPage: string;
+        nextPage: string;
+        lastPage: string;
+        pageSize: string;
+    };
+    _colSpan: string;
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+}

package/placeholder/element.js

@@ -0,0 +1 @@
+import{__decorate as t}from"tslib";import{LitElement as e,html as r}from"lit";import{I18nService as s,baseStyles as n,i18n as i}from"@blueprintui/components/internals";import a from"./element.css.js";let o=class extends e{static properties={i18n:{type:Object},_colSpan:{state:!0}};constructor(){super(...arguments);this.i18n=s.keys.actions,this._colSpan="0"}static styles=[n,a];#t=this.attachInternals();render(){return r`<slot role="gridcell" part="internal" .ariaColSpan="${this._colSpan}">${"false"!==this.getAttribute("draggable")?r`<p>${this.i18n.noData}</p>`:r`<p sr-only>${this.i18n.dropTarget}</p>`}</slot>`}connectedCallback(){super.connectedCallback(),this.#t.role="row"}};o=t([i({key:"actions"})],o);export{o as BpGridPlaceholder};

package/row/element.css.js

@@ -0,0 +1 @@
+const o=new CSSStyleSheet;o.replaceSync(":host{--background:var(--bp-layer-container-background);--min-height:var(--row-height);--border-top:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100);--border-bottom:0;--box-shadow:none;content-visibility:var(--row-content-visibility, auto);contain-intrinsic-size:auto var(--min-height)}:host(:hover) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-hover-offset)}:host([selected]) ::slotted(bp-grid-cell){--bp-interaction-offset:var(--bp-interaction-selected-offset)}slot{display:grid;grid-template-columns:var(--ch-grid);box-shadow:var(--box-shadow);background:var(--background);min-height:var(--min-height);border-top:var(--border-top);border-bottom:var(--border-bottom)}:host([position='fixed']),:host([position='sticky']){--row-content-visibility:visible;--background:var(--bp-layer-container-background);--bp-interaction-offset:var(--bp-interaction-selected-offset);--border-bottom:var(--bp-object-border-width-100) solid var(--bp-object-border-color-100);z-index:99;--border-bottom:0;--box-shadow:0 var(--bp-object-border-width-200) var(--bp-object-border-width-100) -1px var(--bp-object-border-color-100);position:sticky;top:calc(var(--min-height) + var(--bp-size-1))}:host([draggable='true']){-webkit-user-drag:element;user-select:none}:host([bp-draggable*='target']){--box-shadow:inset 0 var(--bp-object-border-width-300) 0 calc(var(--bp-size-1) * -1) var(--bp-interaction-accent-background)}");export{o as default};

package/row/element.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Grid Row
+ *
+ * ```typescript
+ * import '@blueprintui/grid/include/core.js';
+ * ```
+ *
+ * @element bp-grid-row
+ * @cssprop --border-top
+ * @cssprop --border-bottom
+ * @cssprop --background
+ * @cssprop --min-height
+ */
+export declare class BpGridRow extends LitElement {
+    #private;
+    selected: boolean;
+    position: 'fixed' | 'sticky' | '';
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+}

package/row/element.js

@@ -0,0 +1 @@
+import{LitElement as t,html as e}from"lit";import{baseStyles as r,interactionStyles as s}from"@blueprintui/components/internals";import{GridRowPositionController as o}from"./position.controller.js";import n from"./element.css.js";class i extends t{static properties={selected:{type:Boolean,reflect:!0},position:{type:String,reflect:!0}};static styles=[r,s,n];#t=this.attachInternals();render(){return e`<slot></slot>`}constructor(){super();new o(this),this.#t.role="row"}}export{i as BpGridRow};

package/row/position.controller.d.ts

@@ -0,0 +1,9 @@
+import { ReactiveControllerHost } from 'lit';
+export declare type GridRowPosition = ReactiveControllerHost & HTMLElement & {
+    position: '' | 'fixed' | 'sticky';
+};
+export declare class GridRowPositionController {
+    private host;
+    constructor(host: GridRowPosition);
+    hostUpdated(): void;
+}

package/row/position.controller.js

@@ -0,0 +1 @@
+class t{host;constructor(t){this.host=t,this.host.addController(this)}hostUpdated(){"fixed"!==this.host.position&&"sticky"!==this.host.position||this.host.parentElement?.style.setProperty("--scroll-padding-top","calc(var(--row-height) * 2)")}}export{t as GridRowPositionController};