jb-grid 0.3.1 → 0.3.3

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

@@ -0,0 +1,53 @@
+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();
+  }
+  #init() {
+    const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true, clonable:true, serializable:true });
+    registerDefaultVariables();
+    this.#render();
+    this.#registerEventListener();
+  }
+  #render() {
+    const html = `<style>${CSS}</style>\n${renderHTML()}`;
+    const element = document.createElement("template");
+    element.innerHTML = html;
+    this.shadowRoot!.appendChild(element.content.cloneNode(true));
+  }
+  #parentRow:JBRowWebComponent|null = null;
+  connectedCallback() {
+    this.#parentRow = this.#findParentRow(this);
+    if(this.#parentRow?.isOpen){
+      this.setAttribute('open','');
+    }
+  }
+  #findParentRow(element:Element|null):JBRowWebComponent|null{
+    if(!element || !element.parentElement){
+      return null;
+    }
+    if(element.parentElement instanceof JBRowWebComponent){
+      return element.parentElement
+    }else{
+      return this.#findParentRow(this.parentElement!);
+    }
+  }
+  #registerEventListener() {
+    this.addEventListener('click', ()=>this.toggle());
+  }
+  toggle(){
+    if(this.#parentRow){
+      const value = !this.#parentRow?.isOpen;
+      this.#parentRow.isOpen = value
+      value?this.setAttribute('open',''):this.removeAttribute('open');
+    }
+  }
+}
+const myElementNotExists = !customElements.get('jb-expand-toggle');
+if (myElementNotExists) {
+  window.customElements.define('jb-expand-toggle', JBExpandToggleWebComponent);
+}

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

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

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

@@ -0,0 +1,25 @@
+:host {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: block;
+  cursor: pointer;
+}
+
+:host([open]) {
+  .arrow-icon {
+    rotate: -90deg;
+    &:dir(ltr) {
+     rotate: 90deg;
+    }
+  }
+}
+
+.arrow-icon {
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s 0s ease;
+
+  &:dir(ltr) {
+    transform: rotateY(180deg)
+  }
+}

package/web-component/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        
+        "rootDir": "./lib",
+        "declarationDir": "./dist",
+    },
+    "include": [
+        "lib/global.d.ts",
+        "lib/**/*.ts",
+    ],
+    "exclude": [
+        "node_modules",
+        "**/*.spec.ts",
+        "dist",
+    ],
+    "extends":"jb-core/configs/tsconfig-web-component.json"
+}