jb-select 5.3.2 → 6.0.1

package/lib/jb-option/jb-option.ts

@@ -0,0 +1,136 @@
+import { type JBSelectWebComponent } from '../jb-select';
+import CSS from './jb-option.scss';
+import { renderHTML } from "./render";
+import { JBOptionElements } from "./types";
+
+//TODO: check for filter text to set visibility on mount
+export class JBOptionWebComponent<TValue> extends HTMLElement {
+
+  #elements: JBOptionElements;
+  // it may be empty
+  #SelectElement?: JBSelectWebComponent
+  #value: TValue;
+  get value(): TValue {
+    return this.#value;
+  }
+  set value(value: TValue) {
+    this.#value = value;
+  }
+  #selected = false;
+  set selected(value: boolean) {
+    this.#selected = value;
+    this.#elements.componentWrapper.classList.add("--selected");
+  }
+  get selected() {
+    return this.#selected;
+  }
+  get optionContent():Node[]{
+    const optionNodes = this.#elements.contentWrapper.querySelector("slot").assignedNodes();
+    return optionNodes;
+  }
+  //TODO: add search hidden property for more accurate hidden and more personalized logic
+  #hidden = false;
+  get hidden(){
+    return this.#hidden;
+  }
+  set hidden(value:boolean){
+    this.#hidden = value;
+    if(value){
+      this.#elements.componentWrapper.classList.add('--hidden');
+    }else{
+      this.#elements.componentWrapper.classList.remove('--hidden');
+    }
+  }
+  /**
+   * return text content of option (it used in search by default to filter option)
+   */
+  get optionContentText(){
+    const optionTextContent = this.optionContent.reduce((acc,item)=>{
+      acc += item.textContent;
+      return acc;
+    },"");
+    return optionTextContent;
+  }
+  constructor() {
+    super();
+    this.#initWebComponent();
+    this.#initProp();
+  }
+  connectedCallback() {
+    // standard web component event that called when all of dom is bounded
+    this.#dispatchPlaceEvent();
+
+  }
+  setSelectElement(element: JBSelectWebComponent) {
+    if (element) {
+      this.#SelectElement = element;
+      this.#SelectElement.addEventListener("filter-change", this.#onFilterChange.bind(this));
+    }
+  }
+  #onFilterChange(e: CustomEvent){
+    const {filterText} = e.detail;
+    const optionTextContent = this.optionContentText;
+    if(optionTextContent.includes(filterText)){
+      this.hidden = false;
+    }else{
+      this.hidden = true;
+    }
+  }
+  disconnectedCallback() {
+    this.#SelectElement?.removeEventListener("filter-change", this.#onFilterChange.bind(this));
+    const event = new CustomEvent("jb-option-disconnected",{bubbles:true,composed:true,cancelable:false});
+    this.dispatchEvent(event);
+  }
+  #initWebComponent() {
+    const shadowRoot = this.attachShadow({
+      mode: "open",
+    });
+    const html = `<style>${CSS}</style>` + "\n" + renderHTML();
+    const element = document.createElement("template");
+    element.innerHTML = html;
+    shadowRoot.appendChild(element.content.cloneNode(true));
+    this.#elements = {
+      componentWrapper: shadowRoot.querySelector(".jb-options-web-component")!,
+      contentWrapper: shadowRoot.querySelector(".option-content-wrapper")!,
+    };
+    this.#registerEventListener();
+  }
+  #registerEventListener() {
+    this.#elements.componentWrapper.addEventListener("click", this.#onOptionClick.bind(this));
+  }
+  //this event called on each connectedCallback so select could find it's option
+  #dispatchPlaceEvent() {
+    const event = new CustomEvent("jb-option-connected", { bubbles: true, composed: true });
+    this.dispatchEvent(event);
+  }
+  #initProp() {
+    this.value = this.getAttribute("value") as TValue || null;
+  }
+  static get observedAttributes() {
+    return ["value"];
+  }
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    // do something when an attribute has changed
+    this.#onAttributeChange(name, newValue);
+  }
+  #onAttributeChange(name: string, value: string) {
+    switch (name) {
+      case 'value':
+        this.#value = value as TValue;
+    }
+  }
+  #onOptionClick() {
+    if (!this.#selected) {
+      this.#dispatchSelectEvent();
+    }
+  }
+  #dispatchSelectEvent() {
+    const event = new CustomEvent("select", { bubbles: true, cancelable: false, composed: true });
+    this.dispatchEvent(event);
+  }
+}
+const myElementNotExists = !customElements.get("jb-option");
+if (myElementNotExists) {
+  //prevent duplicate registering
+  window.customElements.define("jb-option", JBOptionWebComponent);
+}

package/lib/jb-option/render.ts

@@ -0,0 +1,9 @@
+export function renderHTML(): string {
+  return /* html */ `
+    <div class="jb-options-web-component">
+      <div class="option-content-wrapper">
+        <slot></slot>
+      </div>
+    </div>
+  `;
+}

package/lib/jb-option/types.ts

@@ -0,0 +1,4 @@
+export type JBOptionElements = {
+  componentWrapper:HTMLDivElement,
+  contentWrapper:HTMLDivElement,
+}

package/lib/jb-option-list/jb-option-list.ts

@@ -0,0 +1,125 @@
+import { JBOptionWebComponent } from "../jb-option/jb-option";
+import { type OptionListCallbacks } from "./types";
+
+//TOption is the type of option, TValue is the type of value we extract from option
+export class JBOptionListWebComponent<TOption, TValue> extends HTMLElement {
+  #callbacks: OptionListCallbacks<TOption, TValue> = {};
+  get callbacks() {
+    return this.#callbacks;
+  }
+  #optionList: TOption[] = [];
+  #optionPairMap: Map<TOption, JBOptionWebComponent<TValue>> = new Map();
+  get optionList() {
+    return this.#optionList || [];
+  }
+  set optionList(value) {
+    if (!Array.isArray(value)) {
+      console.error(
+        "your provided option list to jb-option-list is not a array. you must provide array value",
+        { value }
+      );
+      return;
+    }
+    this.#optionList = value;
+    this.#initOptionList(value);
+  }
+  constructor() {
+    super();
+    this.#initWebComponent();
+  }
+  connectedCallback() {
+    // standard web component event that called when all of dom is bounded
+  }
+  setCallback<T extends keyof OptionListCallbacks<TOption, TValue>>(key: T, callbackFn: OptionListCallbacks<TOption, TValue>[T]) {
+    this.#callbacks[key] = callbackFn;
+    switch (key) {
+      case 'getContentDOM':
+      case 'getTitle':
+        this.#updateOptionsContent();
+        break;
+      case 'getValue':
+        this.#updateOptionsValue();
+    }
+  }
+  #updateOptionsContent() {
+    this.#optionPairMap.forEach((dom, option) => {
+      this.#fillOptionContent(option, dom);
+    });
+  }
+  #updateOptionsValue() {
+    this.#optionPairMap.forEach((dom, option) => {
+      dom.value = this.#getOptionValue(option);
+    });
+  }
+  #initWebComponent() {
+    const shadowRoot = this.attachShadow({
+      mode: "open",
+    });
+    const element = document.createElement("template");
+
+    shadowRoot.appendChild(element.content.cloneNode(true));
+  }
+  //
+  #initOptionList(optionList: TOption[]) {
+    this.shadowRoot.innerHTML = "";
+    optionList.forEach((option) => {
+      const dom = this.#createOptionDOM(option);
+      this.shadowRoot.appendChild(dom);
+      this.#optionPairMap.set(option, dom);
+    });
+  }
+  #getOptionValue(option: TOption): TValue {
+    if (this.callbacks.getValue && typeof this.callbacks.getValue !== "function") {
+      console.error("getOptionValue callback is not a function");
+    }
+    try {
+      if (typeof this.#callbacks.getValue == "function") {
+        return this.#callbacks.getValue(option);
+      } else {
+        return option as unknown as TValue;
+      }
+    } catch (e) {
+      console.error(
+        `Invalid getOptionValue callback Result, must be a function that returns the value of an option`,
+        option
+      );
+    }
+  }
+  #getOptionTitle(option: TOption): string {
+    if (typeof this.#callbacks.getTitle == "function") {
+      try {
+        return this.#callbacks.getTitle(option);
+      } catch (e) {
+        console.error(
+          `Invalid getOptionTitle callback Result, must be a function that returns the value of an option`,
+          option
+        );
+      }
+    } else {
+      return String(option);
+    }
+    return "";
+  }
+  #fillOptionContent(option: TOption, element: JBOptionWebComponent<TValue>) {
+    element.innerHTML = "";
+    if (typeof this.#callbacks.getContentDOM == "function") {
+      element.appendChild(this.#callbacks.getContentDOM(option));
+    } else {
+      element.innerHTML = this.#getOptionTitle(option);
+    }
+  }
+  #createOptionDOM(item: TOption): JBOptionWebComponent<TValue> {
+    // const optionElement = document.createElement("jb-option") as JBOptionWebComponent<TValue>;
+    const optionElement = new JBOptionWebComponent<TValue>();
+    //it has default function who return exact same input
+    this.#fillOptionContent(item, optionElement);
+    optionElement.value = this.#getOptionValue(item);
+    return optionElement;
+  }
+
+}
+const myElementNotExists = !customElements.get("jb-option-list");
+if (myElementNotExists) {
+  //prevent duplicate registering
+  window.customElements.define("jb-option-list", JBOptionListWebComponent);
+}

package/lib/jb-option-list/types.ts

@@ -0,0 +1,5 @@
+export type OptionListCallbacks<TOption,TValue> = {
+  getTitle?:(option:TOption)=>string,
+  getValue?:(option:TOption)=>TValue
+  getContentDOM?:((option:TOption) => HTMLElement);
+}

package/lib/jb-select.html

@@ -40,7 +40,7 @@
     </div>
     <div class="select-list-wrapper">
         <div class="select-list" tabindex="-1">
-
+            <slot></slot>
         </div>
         <div class="empty-list-placeholder">
             <slot name="empty-list-message">no item available</slot>

package/lib/jb-select.scss

@@ -7,7 +7,7 @@
     --p-border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));
     --p-base-z-index: 1;
     --p-mobile-modal-z-index: 900;
-    --p-mobile-modal-height:var(--jb-select-mobile-modal-height, 100vh);
+    --p-mobile-modal-height: var(--jb-select-mobile-modal-height, 100vh);
 }
 
 .jb-select-web-component {
@@ -20,7 +20,7 @@
         @include mobile-tablet {
             position: fixed;
             bottom: 0;
-            top:initial;
+            top: initial;
             left: 0;
             background-color: var(--jb-select-overlay-bgcolor, #0008);
             width: 100vw;
@@ -38,10 +38,8 @@
                 border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));
                 border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));
                 border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));
-                border-bottom-color: var(
-                    --jb-select-mobile-search-border-bottom-color,
-                    var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6))
-                );
+                border-bottom-color: var(--jb-select-mobile-search-border-bottom-color,
+                        var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));
                 border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px));
             }
 
@@ -59,8 +57,7 @@
                     transition: none;
                 }
 
-                .selected-value {
-                }
+                .selected-value {}
             }
         }
 
@@ -119,6 +116,7 @@
     }
 
     &.--has-value {
+
         //if user select a option and value is setted and not null
         .select-box {
             border-color: var(--jb-select-border-color-selected, #c3ff14);
@@ -159,46 +157,51 @@
         border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);
         border-radius: var(--jb-select-border-radius, 1rem);
         background-color: var(--jb-select-bgcolor, #f7f6f6);
-        margin:var(--jb-select-select-box-margin, 4px 0px 0px 0px);
+        margin: var(--jb-select-select-box-margin, 4px 0px 0px 0px);
         overflow: hidden;
         display: flex;
         padding-inline-end: var(--jb-select-box-padding-end, 1rem);
         gap: 0.5rem;
         align-items: center;
+
         &:focus-within {
             border-color: var(--jb-select-border-color, var(--p-p-color));
             border-bottom-color: var(--jb-select-border-color, var(--p-p-color));
             border-radius: var(--jb-select-border-radius, 1rem) var(--jb-select-border-radius, 1rem) 0 0;
+
             @include mobile-tablet {
                 border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 1rem));
             }
         }
-        .start-section{
+
+        .start-section {
             height: 100%;
             width: auto;
             display: flex;
             justify-content: center;
             align-items: center;
         }
-        .middle-section{
+
+        .middle-section {
             position: relative;
             width: 100%;
             height: 100%;
-            flex:1;
+            flex: 1;
+
             .selected-value-wrapper {
                 position: absolute;
-                top:0;
+                top: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
                 border-radius: inherit;
                 overflow: hidden;
                 z-index: 1;
-    
+
                 &.--search-typed {
                     opacity: 0;
                 }
-    
+
                 .selected-value {
                     width: 100%;
                     box-sizing: border-box;
@@ -215,15 +218,17 @@
                     align-items: center;
                 }
             }
+
             .front-box {
                 position: absolute;
-                top:0;
+                top: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
                 border-radius: inherit;
                 overflow: hidden;
                 z-index: 2;
+
                 input {
                     border: none;
                     width: 100%;
@@ -233,15 +238,15 @@
                     padding: 2px 12px 0 12px;
                     display: block;
                     font-family: inherit;
-                    font-size: var(--jb-select-value-font-size,1.1rem);
+                    font-size: var(--jb-select-value-font-size, 1.1rem);
                     color: var(--jb-select-input-color, #1f1735);
                     margin: 0;
                     border-radius: 0;
-    
+
                     &:focus {
                         outline: none;
                     }
-    
+
                     &::placeholder {
                         color: var(--jb-select-placeholder-color, initial);
                         font-size: var(--jb-select-placeholder-font-size, 1.1em);
@@ -249,12 +254,13 @@
                 }
             }
         }
-        .end-section{
+
+        .end-section {
             .arrow-icon {
                 margin: var(--jb-select-arrow-icon-margin, 0 0 0 0);
             }
         }
-        
+
 
         &:focus-within .selected-value {
             opacity: 0.7;
@@ -314,40 +320,25 @@
             width: 100%;
             max-height: var(--jb-select-list-max-height, 400px);
             overflow-y: auto;
-            padding: var(--jb-select-list-padding, 16px 0);
-
-            &:empty {
-                padding: 0;
+            slot {
+                padding: var(--jb-select-list-padding, 16px 0);
+                &:empty {
+                    padding: 0;
+                }
             }
 
+
             @include mobile-tablet {
                 max-height: calc(var(--p-mobile-modal-height) - 240px);
             }
 
-            .select-option {
-                min-height: 36px;
-                padding: 4px 16px;
-                display: flex;
-                align-items: center;
-                font-size: 0.9em;
-                color: var(--jb-select-option-color, inherit);
-                background-color: var(--jb-select-option-background-color, transparent);
-
-                &:hover {
-                    background-color: var(--jb-select-option-background-color-hover, #1073db);
-                    color: var(--jb-select-option-color-hover, #fff);
-                    cursor: pointer;
-                }
+            /* option style places */
 
-                &.--selected-option {
-                    font-weight: 900;
-                }
-            }
             &::-webkit-scrollbar {
                 width: 9px;
                 background-color: transparent;
             }
-    
+
             &::-webkit-scrollbar-thumb {
                 background-color: var(--jb-select-list-scroll-color, #c3c3c3);
                 border-radius: var(--jb-select-list-scroll-border-radius, 4px);
@@ -367,4 +358,4 @@
         }
 
     }
-}
+}