@blueprintui/grid 0.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Crylan Software
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# BlueprintUI Grid
+
+[![npm version](https://badge.fury.io/js/@blueprintui%2Fgrid.svg)](https://badge.fury.io/js/@blueprintui%2Fgrid)

package/cell/element.css.js

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

package/cell/element.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * Grid Cell
+ *
+ * ```typescript
+ * import '@blueprintui/grid/include/core.js';
+ * ```
+ *
+ * @element bp-grid-cell
+ * @slot - cell content
+ * @cssprop --border-right
+ * @cssprop --border-left
+ * @cssprop --min-height
+ * @cssprop --min-width
+ * @cssprop --font-size
+ * @cssprop --justify-content
+ * @cssprop --padding-block
+ * @cssprop --padding-inline-start
+ * @cssprop --padding-inline-end
+ * @cssprop --color
+ */
+export declare class BpGridCell extends LitElement {
+    #private;
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+}

package/cell/element.js

@@ -0,0 +1 @@
+import{LitElement as t,html as r}from"lit";import{baseStyles as s}from"@blueprintui/components/internals";import e from"./element.css.js";class n extends t{static styles=[s,e];#t=this.attachInternals();render(){return r`<slot focusable></slot>`}constructor(){super();this.#t.role="gridcell"}}export{n as BpGridCell};

package/column/element.css.js

@@ -0,0 +1 @@
+const t=new CSSStyleSheet;t.replaceSync(":host{--min-height:var(--column-height, var(--bp-interaction-touch-target));--min-width:fit-content;--justify-content:var(--column-justify-content, start);--padding-block:calc(var(--bp-size-6) + var(--bp-size-1));--padding-inline:var(--bp-size-6);--background:var(--bp-layer-container-background);--font-size:var(--bp-text-size-200);--color:var(--bp-text-color-500);top:0;z-index:998;position:sticky;min-height:var(--min-height);min-width:var(--min-width);display:flex;align-items:center;outline:0!important}[part=internal]{min-height:var(--min-height);justify-content:var(--justify-content);background:var(--background);padding-inline:var(--padding-inline);padding-block:var(--padding-block);font-size:var(--font-size);text-align:left;border:0;font-weight:500;color:var(--color);white-space:nowrap;overflow:visible;text-overflow:ellipsis;line-height:1em;margin:0;display:flex;gap:var(--bp-size-sm);align-items:center;height:100%;width:100%;position:sticky!important;box-shadow:0 var(--bp-object-border-width-100)0 var(--bp-object-border-color-100)}:host([type='action']){--padding-block:0;--padding-inline-start:0;--padding-inline-end:0;--min-width:var(--bp-interaction-touch-target)}:host([type='action']) [part=internal]{justify-content:center}:host([position='fixed']),:host([position='sticky']){z-index:999}[part=internal]::after{background:var(--bp-object-border-color-100);width:var(--bp-object-border-width-100);right:0;height:50%;position:absolute;content:\"\";display:none}[focused]+[part=internal]::after{background:var(--bp-interaction-accent-background);height:100vh;right:0}:host([bp-draggable*='target']) [part=internal]::after{background:var(--bp-interaction-accent-background);height:100vh;left:0}:host([bp-draggable*='active']) [part=internal]{box-shadow:0 var(--bp-size-2)0 var(--bp-interaction-accent-background)}[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(*){--bp-interaction-outline-webkit:none!important;--bp-interaction-outline-offset:none!important;outline:0!important}:host(:focus) [focusable]{outline:var(--bp-interaction-outline-webkit);outline-offset:calc(var(--bp-size-2)*-1)!important}::slotted([tabindex=\"0\"]),::slotted(button){margin-left:auto}::slotted(bp-button-sort){position:absolute;right:8px;--icon-height:14px;outline:0!important;--bp-interaction-outline-webkit:none!important;--bp-interaction-outline-offset:none!important}");export{t as default};

package/column/element.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+/**
+ * Grid Column
+ *
+ * ```typescript
+ * import '@blueprintui/grid/include/core.js';
+ * ```
+ *
+ * @element bp-grid-column
+ * @slot - column content
+ * @cssprop --min-height
+ * @cssprop --min-width
+ * @cssprop --justify-content
+ * @cssprop --padding-block
+ * @cssprop --padding-inline
+ * @cssprop --background
+ * @cssprop --font-size
+ * @cssprop --color
+ */
+export declare class BpGridColumn extends LitElement {
+    #private;
+    width: string;
+    type: '' | 'action';
+    position: '' | 'sticky' | 'fixed';
+    static styles: CSSStyleSheet[];
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+    connectedCallback(): void;
+}

package/column/element.js

@@ -0,0 +1 @@
+import{LitElement as t,html as e}from"lit";import{baseStyles as r}from"@blueprintui/components/internals";import{GridColumnSizeController as o}from"./size.controller.js";import{GridColumnPositionController as n}from"./position.controller.js";import s from"./element.css.js";class i extends t{static properties={width:{type:String},type:{type:String,reflect:!0},position:{type:String,reflect:!0}};static styles=[r,s];#t=this.attachInternals();render(){return e`<slot role="group" part="internal" focusable> </slot>`}constructor(){super();new o(this),new n(this),this.#t.role="columnheader",this.#t.ariaSort="none",this.position=""}connectedCallback(){super.connectedCallback(),this.slot="columns"}}export{i as BpGridColumn};

package/column/position.controller.d.ts

@@ -0,0 +1,10 @@
+import { ReactiveControllerHost } from 'lit';
+export declare type GridColumnPosition = ReactiveControllerHost & HTMLElement & {
+    position: '' | 'sticky' | 'fixed';
+};
+export declare class GridColumnPositionController {
+    #private;
+    private host;
+    constructor(host: GridColumnPosition);
+    hostUpdated(): Promise<void>;
+}

package/column/position.controller.js

@@ -0,0 +1 @@
+class t{host;#t;#i="";get#s(){return this.host.parentElement}constructor(t){this.host=t,this.host.addController(this)}async hostUpdated(){await this.host.updateComplete,this.host.ariaColIndex&&this.host.position!==this.#i&&(this.#i=this.host.position,this.#t||(this.#t=document.createElement("style"),this.#s.append(this.#t)),this.#o())}#o(){const t=this.#s.getBoundingClientRect(),i=this.host.offsetLeft<t.width/2?"left":"right";this.#t.innerHTML=`${this.#e(i,t)}\n${this.#h(i)}`}#e(t,i){const s=this.host.getBoundingClientRect(),o="fixed"===this.host.position?s.left-i.left-1+"px":"initial",e="fixed"===this.host.position?s.right-s.left-s.width+"px":"initial";return`\n    [_id='${this.#s._id}'] [aria-colindex="${this.host.ariaColIndex}"] {\n      ${"left"===t?`left: ${o};`:""}\n      ${"right"===t?`right: ${e};`:""}\n      ${"sticky"===this.host.position?"left: 0px;":""}\n    }\n\n    [_id='${this.#s._id}'] bp-grid-cell[aria-colindex="${this.host.ariaColIndex}"] {\n      z-index: 98;\n    }`}#h(t){const i="left"===t&&this.host.nextElementSibling.position!==this.host.position,s="right"===t&&this.host.previousElementSibling.position!==this.host.position;return""!==this.host.position&&(i||s)?`\n      [_id='${this.#s._id}'] bp-grid-cell[aria-colindex="${this.host.ariaColIndex}"] {\n        --border-${"left"===t?"right":"left"}: var(--bp-object-border-width-100, 1px) solid var(--bp-object-border-color-100, hsl(0, 0%, 91%));\n      }`:""}}export{t as GridColumnPositionController};

package/column/size.controller.d.ts

@@ -0,0 +1,13 @@
+import { ReactiveControllerHost } from 'lit';
+export declare type GridColumnSize = ReactiveControllerHost & HTMLElement & {
+    width: string;
+    type: string;
+};
+export declare class GridColumnSizeController {
+    #private;
+    private host;
+    constructor(host: GridColumnSize);
+    hostConnected(): Promise<void>;
+    hostUpdated(): Promise<void>;
+    hostDisconnected(): void;
+}

package/column/size.controller.js

@@ -0,0 +1 @@
+import{listenForAttributeListChange as t,onFirstInteraction as s,isNumericString as h}from"@blueprintui/components/internals";class e{host;#t=[];get#s(){return this.host.parentElement}get#h(){return this.host.shadowRoot?.querySelector("bp-split-handle input")}constructor(t){this.host=t,this.host.addController(this)}async hostConnected(){await this.host.updateComplete,this.#e(),this.#s.shadowRoot?.addEventListener("slotchange",(()=>this.#e())),this.#t.push(t(this.host,["type"],(()=>this.#e()))),await s(this.#s),this.#h&&(this.#h.max=""+parseInt(getComputedStyle(this.#s).width),this.#h.value=""+parseInt(getComputedStyle(this.host).width),this.#h.addEventListener("input",(t=>this.#i(t.target.valueAsNumber))),this.#h.addEventListener("change",(t=>this.#i(t.target.valueAsNumber))))}async hostUpdated(){await this.host.updateComplete,this.#o()}hostDisconnected(){this.#t.forEach((t=>t.disconnect()))}#e(){if("action"===this.host.type||"action"===this.host.getAttribute("type")){this.host.width="48px";const{columns:t,rows:s}=this.#s.gridColumnSizeControllerConfig,h=Array.from(t).indexOf(this.host);s.forEach((t=>{t.querySelectorAll("bp-grid-cell")[h].setAttribute("type","action")}))}}#o(){this.host.width&&null!==this.host.ariaColIndex&&(this.#s.style.setProperty("--ch"+this.host.ariaColIndex,h(this.host.width)?this.host.width+"px":this.host.width),this.#h&&(this.#h.min=""+parseInt(this.host.width)??"",this.#h.value=this.host.width))}#i(t){this.host.dispatchEvent(new CustomEvent("resizeChange",{detail:t,bubbles:!0}));const s=Math.max(h(this.host.width)||this.host.width?.includes("px")?parseInt(this.host.width):36,t);this.#s.style.setProperty("--ch"+this.host.ariaColIndex,s+"px")}}export{e as GridColumnSizeController};