jb-grid 0.4.1 → 0.5.0

package/web-component/lib/pagination-info/style.css

@@ -0,0 +1,47 @@
+:host {
+  display: block;
+  height: 100%;
+  color: #7b7b7b;
+  font-size: 1rem;
+  container-type: inline-size;
+}
+
+.jb-pagination-info-web-component {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.page-size-section {
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.page-size-select {
+  background-color: transparent;
+  font-family: inherit;
+  color: inherit;
+  font-size: inherit;
+  border: none;
+}
+
+.items-information-section {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  white-space: nowrap;
+}
+
+@container (max-width: 16.25rem) {
+  .page-size-section {
+    display: none;
+  }
+}
+
+@container (max-width: 10rem) {
+  .items-information-section {
+    display: none;
+  }
+}

package/web-component/lib/pagination-info/types.ts

@@ -0,0 +1,12 @@
+export type JBPaginationInfoElements = {
+  pageSizeSelect: HTMLSelectElement,
+  pageSizeSection: HTMLElement,
+  startItemIndex: HTMLSpanElement,
+  endItemIndex: HTMLSpanElement,
+  fromLabel: HTMLSpanElement,
+  totalItemsCount: HTMLSpanElement,
+}
+
+export type JBPaginationInfoPageSizeChangeEventDetail = {
+  pageSize: number
+}

package/web-component/lib/refresh-icon/refresh-icon.ts

@@ -0,0 +1,79 @@
+import { renderHTML } from './render.js';
+import CSS from './style.css';
+import { registerDefaultVariables } from 'jb-core/theme';
+import { i18n } from "jb-core/i18n";
+import { dictionary } from "../i18n";
+
+export class JBRefreshIconWebComponent extends HTMLElement {
+  #internals?: ElementInternals;
+  #icon!: SVGSVGElement;
+  #animation: Animation | null = null;
+  #animationDuration = 400;
+
+  constructor() {
+    super();
+    if (typeof this.attachInternals === "function") {
+      this.#internals = this.attachInternals();
+      this.#internals.role = "img";
+      this.#internals.ariaLabel = dictionary.get(i18n, "refreshData");
+      this.#internals.ariaBusy = "false";
+    }
+    this.#init();
+  }
+
+  #init() {
+    const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true, clonable: true, serializable: true });
+    registerDefaultVariables();
+    this.#render();
+    this.#icon = shadowRoot.querySelector(".refresh-icon")!;
+  }
+
+  #render() {
+    const html = `<style>${CSS}</style>\n${renderHTML()}`;
+    const element = document.createElement("template");
+    element.innerHTML = html;
+    this.shadowRoot!.appendChild(element.content.cloneNode(true));
+  }
+
+  play() {
+    if (this.#internals) this.#internals.ariaBusy = "true";
+    if (!this.#animation) {
+      this.#animation = this.#icon.animate(
+        [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
+        { id: "rotate", duration: this.#animationDuration, direction: "reverse", iterations: Infinity }
+      );
+      return;
+    }
+    this.#animation.effect?.updateTiming({ iterations: Infinity });
+    this.#animation.onfinish = null;
+    this.#animation.play();
+  }
+
+  pause() {
+    this.#animation?.pause();
+  }
+
+  stop() {
+    if (!this.#animation) {
+      return;
+    }
+    const animation = this.#animation;
+    const currentTime = typeof animation.currentTime === "number" ? animation.currentTime : 0;
+    const nextIteration = Math.max(1, Math.floor(currentTime / this.#animationDuration) + 1);
+
+    animation.effect?.updateTiming({ iterations: nextIteration });
+    animation.onfinish = () => {
+      if (this.#animation === animation) {
+        animation.cancel();
+        this.#animation = null;
+        if (this.#internals) this.#internals.ariaBusy = "false";
+      }
+    };
+    animation.play();
+  }
+}
+
+const myElementNotExists = !customElements.get('jb-refresh-icon');
+if (myElementNotExists) {
+  window.customElements.define('jb-refresh-icon', JBRefreshIconWebComponent);
+}

package/web-component/lib/refresh-icon/render.ts

@@ -0,0 +1,10 @@
+export function renderHTML(): string {
+  return /* html */ `
+    <svg class="refresh-icon" x="0px" y="0px" viewBox="0 0 305.836 305.836" part="icon">
+      <title>Refresh Data</title>
+      <g>
+        <path d="M152.924,300.748c84.319,0,152.912-68.6,152.912-152.918c0-39.476-15.312-77.231-42.346-105.564   c0,0,3.938-8.857,8.814-19.783c4.864-10.926-2.138-18.636-15.648-17.228l-79.125,8.289c-13.511,1.411-17.999,11.467-10.021,22.461   l46.741,64.393c7.986,10.992,17.834,12.31,22.008,2.937l7.56-16.964c12.172,18.012,18.976,39.329,18.976,61.459   c0,60.594-49.288,109.875-109.87,109.875c-60.591,0-109.882-49.287-109.882-109.875c0-19.086,4.96-37.878,14.357-54.337   c5.891-10.325,2.3-23.467-8.025-29.357c-10.328-5.896-23.464-2.3-29.36,8.031C6.923,95.107,0,121.27,0,147.829   C0,232.148,68.602,300.748,152.924,300.748z" />
+      </g>
+    </svg>
+      `;
+}

package/web-component/lib/refresh-icon/style.css

@@ -0,0 +1,21 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  color: #7b7b7b;
+}
+
+:host(:hover) {
+  color: #2e3139;
+}
+
+.refresh-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
+  fill: currentColor;
+  transform-box: fill-box;
+  transform-origin: center;
+}

package/web-component/lib/row/render.ts

@@ -1,12 +1,12 @@
 export function renderHTML(): string {
   return /* html */ `
   <div class="jb-row-web-component">
-    <div class="grid-row" part="row">
+    <div class="grid-row" part="row">
       <slot name="cell"></slot>
     </div>
-    <div class="expand-wrapper --hidden">
+    <div class="expand-wrapper --hidden" role="region" aria-hidden="true">
       <slot name="expand"></slot>
     </div>
   </div>
       `;
-}
+}

package/web-component/lib/row/row.ts

@@ -1,11 +1,13 @@
-import { renderHTML } from './render.js';
-import CSS from './style.css';
+import { renderHTML } from './render.js';
+import CSS from './style.css';
+import VariablesCSS from './variables.css';
 import { registerDefaultVariables } from 'jb-core/theme';
 import type { JBRowElements, RowTemplate} from './types.js';
 import { createTemplateStylesheet } from './utils.js';
 
 export * from "./types.js"; 
-export class JBRowWebComponent extends HTMLElement {
+export class JBRowWebComponent extends HTMLElement {
+  #internals?: ElementInternals;
   #elements!: JBRowElements;
   #templateSheet = new CSSStyleSheet();
   #RowTemplate:RowTemplate = []
@@ -13,8 +15,10 @@ export class JBRowWebComponent extends HTMLElement {
   get isOpen(){
     return this.#isOpen;
   }
-  set isOpen(value:boolean){
-    this.#isOpen = value;
+  set isOpen(value:boolean){
+    this.#isOpen = value;
+    if (this.#internals) this.#internals.ariaExpanded = value ? "true" : "false";
+    this.#elements.expandWrapper.setAttribute("aria-hidden", value ? "false" : "true");
     if(value){
       this.#elements.expandWrapper.classList.remove('--hidden');
     }else{
@@ -24,13 +28,20 @@ export class JBRowWebComponent extends HTMLElement {
   get rowTemplate(){
     return this.#RowTemplate
   }
-  set rowTemplate(value:RowTemplate){
-    this.#RowTemplate = value;
-    createTemplateStylesheet(this.#templateSheet,value);
+  set rowTemplate(value:RowTemplate){
+    this.#RowTemplate = value;
+    createTemplateStylesheet(this.#templateSheet, value, {
+      selector: ".grid-row",
+      autoModeVariableName: "--jb-row-grid-mode"
+    });
   }
-  constructor() {
-    super();
-    this.#init();
+  constructor() {
+    super();
+    if (typeof this.attachInternals === "function") {
+      this.#internals = this.attachInternals();
+      this.#internals.role = "row";
+    }
+    this.#init();
   }
   #init() {
     const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true, clonable:true, serializable:true });
@@ -40,11 +51,14 @@ export class JBRowWebComponent extends HTMLElement {
     this.#elements = {
       expandWrapper: shadowRoot.querySelector(".expand-wrapper")!
     }
-    createTemplateStylesheet(this.#templateSheet,null);
+    createTemplateStylesheet(this.#templateSheet, null, {
+      selector: ".grid-row",
+      autoModeVariableName: "--jb-row-grid-mode"
+    });
     this.#registerEventListener();
   }
-  #render() {
-    const html = `<style>${CSS}</style>\n${renderHTML()}`;
+  #render() {
+    const html = `<style>${VariablesCSS} ${CSS}</style>\n${renderHTML()}`;
     const element = document.createElement("template");
     element.innerHTML = html;
     this.shadowRoot!.appendChild(element.content.cloneNode(true));
@@ -58,4 +72,4 @@ export class JBRowWebComponent extends HTMLElement {
 const myElementNotExists = !customElements.get('jb-row');
 if (myElementNotExists) {
   window.customElements.define('jb-row', JBRowWebComponent);
-}
+}

package/web-component/lib/row/style.css

@@ -1,18 +1,18 @@
-@custom-media --tablet-until (max-width: 768px);
-
-:host {
-  width: 100%;
-  background-color: var(--jb-white);
-  display: block;
-}
-
-:host(:nth-of-type(even)) {
-  background: var(--jb-neutral-10);
-
-  @media(--tablet-until) {
-    background: var(--jb-white);
-  }
-}
+@custom-media --tablet-until (max-width: 48rem);
+
+:host {
+  width: 100%;
+  background-color: var(--bg-color);
+  display: block;
+}
+
+:host(:nth-of-type(even)) {
+  background: var(--bg-color-even);
+
+  @media(--tablet-until) {
+    background: var(--bg-color-even-tablet);
+  }
+}
 
 .jb-row-web-component {
   .grid-row {
@@ -20,12 +20,12 @@
     box-sizing: border-box;
     grid-auto-rows: minmax(3rem, auto);
 
-    @media(--tablet-until) {
-      grid-template-columns: auto !important;
-      grid-template-rows: auto;
-      border-radius: var(--jb-radius);
-      box-shadow: 0px 0px 1px 0px #d8d8d8;
-    }
+    @media(--tablet-until) {
+      grid-template-columns: auto !important;
+      grid-template-rows: auto;
+      border-radius: var(--border-radius);
+      box-shadow: 0px 0px 1px 0px var(--shadow-color);
+    }
   }
 
   .expand-wrapper {
@@ -42,14 +42,14 @@
     }
 
     slot[name="expand"]::slotted(*) {
-      width: 100%;
-      min-height: 4rem;
-      padding-block: 1rem;
-      padding-inline: 2rem;
-      border-bottom: 1px solid #ebebeb;
-      box-sizing: border-box;
-      overflow: auto;
-    }
+      width: 100%;
+      min-height: 4rem;
+      padding-block: var(--expand-padding-block);
+      padding-inline: var(--expand-padding-inline);
+      border-bottom: 1px solid var(--expand-border-color);
+      box-sizing: border-box;
+      overflow: auto;
+    }
   }
 
-}
+}

package/web-component/lib/row/types.ts

@@ -1,8 +1,7 @@
-export type JBRowElements = {
-  expandWrapper: HTMLDivElement
-}
-export type RowTemplateItem = {
-  name:string,
-  size?:string|number
-}
-export type RowTemplate = RowTemplateItem[];
+import type { GridTemplate, GridTemplateItem } from "../types.js";
+
+export type JBRowElements = {
+  expandWrapper: HTMLDivElement
+}
+export type RowTemplateItem = GridTemplateItem;
+export type RowTemplate = GridTemplate;

package/web-component/lib/row/utils.ts

@@ -1,40 +1 @@
-import type { RowTemplate } from "./types";
-
-export function createTemplateStylesheet(sheet: CSSStyleSheet, template: RowTemplate | null) {
-  if (template === null) {
-    const css = /* css */ `
-    .grid-row{
-      display:grid;
-      grid-auto-columns: 1fr;
-      grid-auto-flow: column;
-      grid-template-rows: 1fr;
-      --jb-row-grid-mode: auto;
-    }
-  `
-    sheet.replaceSync(css);
-    return sheet;
-  }
-  let gridTemplateColumns = "";
-  const gridTemplateAreas = template.map(t => `${t.name}`).join(" ");
-  template.forEach((item) => {
-    if (item.size != null || item.size != undefined) {
-      if (typeof item.size == "number") {
-        gridTemplateColumns += ` ${item.size}px`;
-      } else {
-        gridTemplateColumns += ` ${item.size}`;
-      }
-
-    } else {
-      gridTemplateColumns += " 1fr";
-    }
-  });
-  const css = /* css */ `
-    .grid-row{
-      display:grid;
-      grid-template-columns: ${gridTemplateColumns};
-      grid-template-areas: "${gridTemplateAreas}"
-    }
-  `
-  sheet.replaceSync(css);
-  return sheet;
-}
+export { createTemplateStylesheet } from "../utils.js";

package/web-component/lib/row/variables.css

@@ -0,0 +1,13 @@
+:host {
+  /* Theme/Color */
+  --bg-color: var(--jb-row-bg-color, var(--jb-white));
+  --bg-color-even: var(--jb-row-bg-color-even, var(--jb-neutral-10));
+  --bg-color-even-tablet: var(--jb-row-bg-color-even-tablet, var(--bg-color));
+  --expand-border-color: var(--jb-row-expand-border-color, #ebebeb);
+  --shadow-color: var(--jb-row-shadow-color, #d8d8d8);
+
+  /* Size */
+  --border-radius: var(--jb-row-border-radius, var(--jb-radius));
+  --expand-padding-block: var(--jb-row-expand-padding-block, 1rem);
+  --expand-padding-inline: var(--jb-row-expand-padding-inline, 2rem);
+}

package/web-component/lib/table-header/render.ts

@@ -0,0 +1,9 @@
+export function renderHTML(): string {
+  return /* html */ `
+  <div class="jb-table-header-web-component">
+    <div class="table-header-row" part="row" role="row">
+      <slot></slot>
+    </div>
+  </div>
+      `;
+}

package/web-component/lib/table-header/style.css

@@ -0,0 +1,29 @@
+@custom-media --tablet-until (max-width: 48rem);
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.jb-table-header-web-component {
+  width: 100%;
+  height: 100%;
+
+  .table-header-row {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    line-height: 2rem;
+
+    @media(--tablet-until) {
+      display: none;
+    }
+  }
+
+  .table-header-row ::slotted(*) {
+    box-sizing: border-box;
+    min-width: 0;
+  }
+}

package/web-component/lib/table-header/table-header.ts

@@ -0,0 +1,50 @@
+import { renderHTML } from './render.js';
+import CSS from './style.css';
+import { registerDefaultVariables } from 'jb-core/theme';
+import type { TableHeaderTemplate } from './types.js';
+import { createTemplateStylesheet } from '../utils.js';
+
+export * from "./types.js";
+
+export class JBTableHeaderWebComponent extends HTMLElement {
+  #templateSheet = new CSSStyleSheet();
+  #headerTemplate: TableHeaderTemplate = [];
+
+  get headerTemplate() {
+    return this.#headerTemplate;
+  }
+
+  set headerTemplate(value: TableHeaderTemplate) {
+    this.#headerTemplate = value;
+    createTemplateStylesheet(this.#templateSheet, value, {
+      selector: ".table-header-row"
+    });
+  }
+
+  constructor() {
+    super();
+    this.#init();
+  }
+
+  #init() {
+    const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true, clonable: true, serializable: true });
+    shadowRoot.adoptedStyleSheets = [this.#templateSheet];
+    registerDefaultVariables();
+    this.#render();
+    createTemplateStylesheet(this.#templateSheet, null, {
+      selector: ".table-header-row"
+    });
+  }
+
+  #render() {
+    const html = `<style>${CSS}</style>\n${renderHTML()}`;
+    const element = document.createElement("template");
+    element.innerHTML = html;
+    this.shadowRoot!.appendChild(element.content.cloneNode(true));
+  }
+}
+
+const myElementNotExists = !customElements.get('jb-table-header');
+if (myElementNotExists) {
+  window.customElements.define('jb-table-header', JBTableHeaderWebComponent);
+}

package/web-component/lib/table-header/types.ts

@@ -0,0 +1,4 @@
+import type { GridTemplate, GridTemplateItem } from "../types.js";
+
+export type TableHeaderTemplateItem = GridTemplateItem;
+export type TableHeaderTemplate = GridTemplate;

package/web-component/lib/toggle/expand-toggle.ts

@@ -1,17 +1,19 @@
 import { renderHTML } from './render.js';
 import CSS from './style.css';
 import { registerDefaultVariables } from 'jb-core/theme';
-import { JBRowWebComponent } from '../row/row.js';
-export class JBExpandToggleWebComponent extends HTMLElement {
-  constructor() {
-    super();
-    this.#init();
+import { JBRowWebComponent } from '../row/row.js';
+export class JBExpandToggleWebComponent extends HTMLElement {
+  #button!: HTMLButtonElement;
+  constructor() {
+    super();
+    this.#init();
   }
   #init() {
     const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true, clonable:true, serializable:true });
-    registerDefaultVariables();
-    this.#render();
-    this.#registerEventListener();
+    registerDefaultVariables();
+    this.#render();
+    this.#button = shadowRoot.querySelector(".toggle-button")!;
+    this.#registerEventListener();
   }
   #render() {
     const html = `<style>${CSS}</style>\n${renderHTML()}`;
@@ -22,8 +24,9 @@ export class JBExpandToggleWebComponent extends HTMLElement {
   #parentRow:JBRowWebComponent|null = null;
   connectedCallback() {
     this.#parentRow = this.#findParentRow(this);
-    if(this.#parentRow?.isOpen){
-      this.setAttribute('open','');
+    if(this.#parentRow?.isOpen){
+      this.setAttribute('open','');
+      this.#button.setAttribute("aria-expanded", "true");
     }
   }
   #findParentRow(element:Element|null):JBRowWebComponent|null{
@@ -37,17 +40,18 @@ export class JBExpandToggleWebComponent extends HTMLElement {
     }
   }
   #registerEventListener() {
-    this.addEventListener('click', ()=>this.toggle(), {passive:true});
+    this.#button.addEventListener('click', ()=>this.toggle());
   }
   toggle(){
     if(this.#parentRow){
       const value = !this.#parentRow?.isOpen;
       this.#parentRow.isOpen = value
-      value?this.setAttribute('open',''):this.removeAttribute('open');
+      value?this.setAttribute('open',''):this.removeAttribute('open');
+      this.#button.setAttribute("aria-expanded", value ? "true" : "false");
     }
   }
 }
 const myElementNotExists = !customElements.get('jb-expand-toggle');
 if (myElementNotExists) {
   window.customElements.define('jb-expand-toggle', JBExpandToggleWebComponent);
-}
+}

package/web-component/lib/toggle/render.ts

@@ -1,13 +1,18 @@
-export function renderHTML(): string {
-  return /* html */ `
-    <slot>
-      <svg class="arrow-icon" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
-         <path d="M35,10 L15,25 L35,40 Z" 
-        fill="currentColor" 
-        stroke="currentColor" 
-        stroke-width="6" 
-        stroke-linejoin="round" />
-      </svg>
-    </slot>
-      `;
-}
+import { dictionary } from "../i18n";
+import { i18n } from "jb-core/i18n";
+
+export function renderHTML(): string {
+  return /* html */ `
+    <button class="toggle-button" type="button" aria-label="${dictionary.get(i18n, "toggleRowDetails")}" aria-expanded="false">
+      <slot>
+        <svg class="arrow-icon" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path d="M35,10 L15,25 L35,40 Z"
+          fill="currentColor"
+          stroke="currentColor"
+          stroke-width="6"
+          stroke-linejoin="round" />
+        </svg>
+      </slot>
+    </button>
+      `;
+}

package/web-component/lib/toggle/style.css

@@ -1,9 +1,22 @@
 :host {
   width: 1.5rem;
-  height: 1.5rem;
-  display: block;
-  cursor: pointer;
-}
+  height: 1.5rem;
+  display: block;
+}
+
+.toggle-button {
+  all: unset;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--jb-grid-focus-ring-color, Highlight);
+    outline-offset: 2px;
+  }
+}
 
 :host([open]) {
   .arrow-icon {
@@ -22,4 +35,4 @@
   &:dir(ltr) {
     transform: rotateY(180deg)
   }
-}
+}

package/web-component/lib/types.ts

@@ -0,0 +1,6 @@
+export type GridTemplateItem = {
+  name: string,
+  size?: string | number
+}
+
+export type GridTemplate = GridTemplateItem[];