jb-select 6.4.2 → 7.0.0

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

@@ -1,5 +1,5 @@
 import { type JBSelectWebComponent } from '../jb-select';
-import CSS from './jb-option.scss';
+import CSS from './jb-option.css';
 import { renderHTML } from "./render";
 import { JBOptionElements } from "./types";
 
@@ -12,6 +12,7 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
   // it may be empty
   #SelectElement?: JBSelectWebComponent
   #value: TValue;
+  #internals?: ElementInternals;
   get value(): TValue {
     return this.#value;
   }
@@ -21,30 +22,30 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
   #selected = false;
   set selected(value: boolean) {
     this.#selected = value;
-    if(value){
+    if (value) {
       this.#elements.componentWrapper.classList.add("--selected");
-    }else{
+    } else {
       this.#elements.componentWrapper.classList.remove("--selected");
     }
   }
   get selected() {
     return this.#selected;
   }
-  get optionContent():Node[]{
+  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(){
+  get hidden() {
     return this.#hidden;
   }
-  set hidden(value:boolean){
+  set hidden(value: boolean) {
     this.#hidden = value;
-    if(value){
+    if (value) {
       this.#elements.componentWrapper.classList.add('--hidden');
-      this.setAttribute("inert","");
-    }else{
+      this.setAttribute("inert", "");
+    } else {
       this.#elements.componentWrapper.classList.remove('--hidden');
       this.removeAttribute("inert");
     }
@@ -52,15 +53,20 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
   /**
    * return text content of option (it used in search by default to filter option)
    */
-  get optionContentText(){
-    const optionTextContent = this.optionContent.reduce((acc,item)=>{
+  get optionContentText() {
+    const optionTextContent = this.optionContent.reduce((acc, item) => {
       acc += item.textContent;
       return acc;
-    },"");
+    }, "");
     return optionTextContent;
   }
   constructor() {
     super();
+    if (typeof this.attachInternals == "function") {
+      //some browser don't support attachInternals
+      this.#internals = this.attachInternals();
+      this.#internals.role = "option";
+    }
     this.#initWebComponent();
     this.#initProp();
   }
@@ -75,18 +81,18 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
       this.#SelectElement.addEventListener("filter-change", this.#onFilterChange.bind(this));
     }
   }
-  #onFilterChange(e: CustomEvent){
-    const {filterText} = e.detail;
+  #onFilterChange(e: CustomEvent) {
+    const { filterText } = e.detail;
     const optionTextContent = this.optionContentText.toLowerCase();
-    if(optionTextContent.includes(filterText.toLowerCase())){
+    if (optionTextContent.includes(filterText.toLowerCase())) {
       this.hidden = false;
-    }else{
+    } 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});
+    const event = new CustomEvent("jb-option-disconnected", { bubbles: true, composed: true, cancelable: false });
     this.dispatchEvent(event);
   }
   #initWebComponent() {

package/lib/jb-select.css

@@ -0,0 +1,279 @@
+/* @use "~jb-core/styles/medias.scss" as *; */
+
+@custom-media --tablet-until (max-width: 768px);
+@custom-media --tablet-from (min-width: 769px);
+
+.jb-select-web-component {
+    width: var(--jb-select-width, 100%);
+    margin: var(--jb-select-margin, 0 0);
+    box-sizing: border-box;
+
+    &.--has-value {
+
+        /*if user select a option and value is set and not null*/
+        .select-box {
+            border-color: var(--jb-select-border-color-selected, var(--border-color));
+            background-color: var(--jb-select-bgcolor-selected, var(--select-box-bg-color));
+        }
+
+        .select-box .end-section .clear-button {
+            display: block;
+        }
+    }
+
+    .label-wrapper {
+        label {
+            width: 100%;
+            margin: 4px 0px;
+            display: block;
+            font-size: var(--jb-select-label-font-size, 0.8em);
+            font-weight: var(--jb-select-label-font-weight, normal);
+            color: var(--label-color);
+
+            &.--hide {
+                display: none;
+            }
+        }
+    }
+
+    &:focus-within .select-box {
+
+        @media(--tablet-from) {
+            /*when there is focus on whole select means menu is open so we change select styles*/
+            border-color: var(--border-color);
+            border-bottom-color: transparent;
+            border-radius: var(--rounded) var(--rounded) 0 0;
+        }
+    }
+
+    .select-box {
+        width: 100%;
+        box-sizing: border-box;
+        height: var(--height);
+        border: solid var(--border-width) var(--border-color);
+        border-bottom: solid var(--border-bottom-width) var(--border-color);
+        border-radius: var(--box-border-radius);
+        background-color: var(--select-box-bg-color);
+        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;
+
+        .start-section {
+            height: 100%;
+            width: auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .middle-section {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            flex: 1;
+
+            .selected-value-wrapper {
+                position: absolute;
+                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;
+                    height: 100%;
+                    background-color: transparent;
+                    padding: 2px 12px 0 12px;
+                    display: block;
+                    font-family: inherit;
+                    font-size: var(--jb-select-selected-value-font-size, 1.1em);
+                    color: var(--value-color);
+                    margin: 0;
+                    border-radius: 0;
+                    display: flex;
+                    align-items: center;
+                }
+            }
+
+            .front-box {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: inherit;
+                overflow: hidden;
+                z-index: 2;
+
+                .search-input {
+                    height: 100%;
+                    background-color: transparent;
+                    padding: 2px 12px 0 12px;
+                    display: block;
+                    margin: 0;
+                    border-radius: 0;
+
+                    &:focus {
+                        outline: none;
+                    }
+
+                    &::placeholder {
+                        color: var(--placeholder-color);
+                        font-size: var(--jb-select-placeholder-font-size, 1.1em);
+                    }
+                }
+            }
+        }
+
+        .end-section {
+            display: flex;
+            gap: 1.5rem;
+            align-items: center;
+
+            .arrow-icon {
+                margin: var(--jb-select-arrow-icon-margin, 0 0 0 0);
+            }
+
+            .clear-button {
+                /*show when there is value*/
+                display: none;
+                --jb-button-padding-xs: 0;
+                --jb-button-height-xs: 1rem;
+            }
+        }
+
+
+        &:focus-within .selected-value {
+            opacity: 0.7;
+            transition: all 0.3s ease;
+        }
+
+
+    }
+
+    .message-box {
+        font-size: var(--jb-select-message-font-size, 0.7em);
+        font-weight: var(--jb-select-message-font-weight, normal);
+        padding: 4px 8px;
+        color: var(--message-color);
+
+        &:empty {
+            padding: 0;
+        }
+
+        &.--error {
+            color: red;
+        }
+    }
+
+    .popover-wrapper {
+        position: relative;
+        .select-list-wrapper {
+            @media(--tablet-from) {
+                width: 100%;
+                --jb-popover-border-radius: var(--list-border-radius);
+                --jb-popover-bg-color: var(--select-box-bg-color);
+                --jb-popover-top: 0;
+            }
+
+            &::part(content) {
+
+                @media(--tablet-from) {
+                    /*in desktop*/
+                    border: solid var(--border-width) var(--border-color);
+                    border-bottom: solid var(--border-bottom-width) var(--border-color);
+                    border-top: none;
+                }
+            }
+
+            .mobile-search-input-wrapper {
+                display: none;
+
+                @media(--tablet-until) {
+                    display: block;
+                    margin-block-end: 1rem;
+                    margin-inline: 0.75rem;
+
+                    .search-input {
+                        background-color: var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color));
+                        border-radius: var(--box-border-radius);
+                        width: 100%;
+                        height: var(--height);
+                    }
+                }
+
+            }
+
+
+            .select-list {
+                width: 100%;
+                max-height: var(--jb-select-list-max-height, 400px);
+                overflow-y: auto;
+
+                slot {
+                    padding: var(--jb-select-list-padding, 16px 0);
+
+                    &:empty {
+                        padding: 0;
+                    }
+                }
+
+                /* option style places */
+
+                &::-webkit-scrollbar {
+                    width: 9px;
+                    background-color: transparent;
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    background-color: var(--list-scroll-color);
+                    border-radius: var(--jb-select-list-scroll-border-radius, 4px);
+                }
+            }
+
+            .empty-list-placeholder {
+                display: none;
+                text-align: center;
+                color: var(--empty-list-placeholder-color);
+                font-style: italic;
+                padding: 8px 0;
+
+                &.--show {
+                    display: block;
+                }
+            }
+
+        }
+    }
+
+    .search-input {
+        border: none;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 2px 12px 0 12px;
+        display: block;
+        font-family: inherit;
+        font-size: var(--jb-select-value-font-size, 1.1rem);
+        color: var(--value-color);
+
+        &:focus {
+            outline: none;
+        }
+
+        &::placeholder {
+            color: var(--placeholder-color);
+            font-size: var(--jb-select-placeholder-font-size, 1.1em);
+        }
+    }
+}

package/lib/jb-select.ts

@@ -1,22 +1,31 @@
-import CSS from "./jb-select.scss";
-import {
+import "jb-button";
+import "jb-popover";
+import CSS from "./jb-select.css";
+import VariablesCSS from "./variables.css";
+import type {
   JBSelectCallbacks,
   JBSelectElements,
   ValidationValue,
 } from "./types";
-import { ShowValidationErrorParameters, ValidationHelper, type ValidationItem, type ValidationResult, type WithValidation } from "jb-validation";
+import { type ShowValidationErrorParameters, ValidationHelper, type ValidationItem, type ValidationResult, type WithValidation } from "jb-validation";
 import { isMobile } from "jb-core";
-import { JBFormInputStandards } from 'jb-form';
+import type { JBFormInputStandards } from 'jb-form';
 // eslint-disable-next-line no-duplicate-imports
 import { JBOptionWebComponent } from "./jb-option/jb-option";
 import { registerDefaultVariables } from 'jb-core/theme';
 import { renderHTML } from "./render";
+import { dictionary } from "./i18n";
+import { i18n } from "jb-core/i18n";
+import type { JBButtonWebComponent } from "jb-button";
 
+//TODO: add clean button to empty the select box after value selection
 //TODO: add IncludeInputInList or freeSolo so user can select item that he wrote without even it exist in select list
 //TODO: handleHomeEndKeys to move focus inside the popup with the Home and End keys.
 /**
  *  TValue is the type of value we extract from option
  */
+
+// biome-ignore lint/suspicious/noExplicitAny: <we support any type of value and there is no limitation on value type>
 export class JBSelectWebComponent<TValue = any> extends HTMLElement implements WithValidation<ValidationValue<TValue>>, JBFormInputStandards<TValue> {
   static get formAssociated() {
     return true;
@@ -63,6 +72,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   }
   set placeholder(value: string) {
     this.#placeholder = value;
+    this.#internals.ariaPlaceholder = value;
     if (this.value !== null && this.value !== undefined) {
       this.elements.input.placeholder = "";
     } else {
@@ -111,13 +121,16 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     this.elements.input.disabled = value;
     if (value) {
       (this.#internals as any).states?.add("disabled");
+      this.#internals.ariaDisabled = "true";
     } else {
       (this.#internals as any).states?.delete("disabled");
+      this.#internals.ariaDisabled = "false";
     }
   }
   #required = false;
   set required(value: boolean) {
     this.#required = value;
+    this.#internals.ariaRequired = value ? "true" : "false";
     this.#validation.checkValiditySync({ showError: false });
   }
   get required() {
@@ -143,6 +156,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     if (typeof this.attachInternals == "function") {
       //some browser dont support attachInternals
       this.#internals = this.attachInternals();
+      this.#internals.role = "combobox"
     }
     this.#initWebComponent();
     this.#initProp();
@@ -166,29 +180,45 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       delegatesFocus: true,
     });
     registerDefaultVariables();
-    const html = `<style>${CSS}</style>` + "\n" + renderHTML();
+    const html = `<style>${CSS} ${VariablesCSS}</style>\n${renderHTML()}`;
     const element = document.createElement("template");
     element.innerHTML = html;
     shadowRoot.appendChild(element.content.cloneNode(true));
     this.elements = {
-      input: shadowRoot.querySelector(".select-box input")!,
+      input: shadowRoot.querySelector(".search-input")!,
       componentWrapper: shadowRoot.querySelector(".jb-select-web-component")!,
-      selectedValueWrapper: shadowRoot.querySelector(
-        ".selected-value-wrapper"
-      )!,
+      selectedValueWrapper: shadowRoot.querySelector(".selected-value-wrapper")!,
       messageBox: shadowRoot.querySelector(".message-box")!,
       optionList: shadowRoot.querySelector(".select-list")!,
       optionListWrapper: shadowRoot.querySelector(".select-list-wrapper")!,
       optionListSlot: shadowRoot.querySelector(".select-list-wrapper .select-list slot")!,
       arrowIcon: shadowRoot.querySelector(".arrow-icon")!,
+      clearButton: shadowRoot.querySelector(".clear-button") as JBButtonWebComponent,
       label: {
         wrapper: shadowRoot.querySelector("label")!,
         text: shadowRoot.querySelector("label .label-value")!,
       },
       emptyListPlaceholder: shadowRoot.querySelector(".empty-list-placeholder")!,
+      mobileSearchInputWrapper: shadowRoot.querySelector(".mobile-search-input-wrapper"),
+      frontBox: shadowRoot.querySelector(".front-box"),
     };
     this.#registerEventListener();
     this.#updateListEmptyPlaceholder();
+    this.#setupDeviceRelates();
+  }
+  /**
+   * place code that change on select resize between mobile & desktop
+   */
+  #setupDeviceRelates() {
+    const onResize = ()=> {
+      if (isMobile()) {
+        this.elements.mobileSearchInputWrapper.appendChild(this.elements.input)
+      } else {
+        this.elements.frontBox.appendChild(this.elements.input);
+      }
+    }
+    addEventListener("resize", onResize);
+    onResize();
   }
   #registerEventListener() {
     this.elements.input.addEventListener("change", (e: Event) => {
@@ -198,9 +228,10 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     this.elements.input.addEventListener("keyup", this.#onInputKeyup.bind(this));
     this.elements.input.addEventListener("beforeinput", this.#onInputBeforeInput.bind(this));
     this.elements.input.addEventListener("input", (e) => { this.#onInputInput(e as unknown as InputEvent); });
-    this.elements.input.addEventListener("focus", this.#onInputFocus.bind(this));
+    this.addEventListener("focus", this.#onSelectFocus.bind(this));
     this.elements.input.addEventListener("blur", this.#onInputBlur.bind(this));
     this.elements.arrowIcon.addEventListener("click", this.#onArrowKeyClick.bind(this));
+    this.elements.clearButton.addEventListener("click", this.#onClearButtonClick.bind(this));
     //events to work with options
     this.addEventListener("select", this.#onOptionSelect.bind(this));
     this.addEventListener("jb-option-connected", this.#onOptionConnected.bind(this));
@@ -223,7 +254,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       "error",
     ];
   }
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+  attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
     // do something when an attribute has changed
     this.#onAttributeChange(name, newValue);
   }
@@ -231,6 +262,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     switch (name) {
       case "label":
         this.elements.label.text.innerHTML = value;
+        this.#internals.ariaLabel = value;
         if (value == null || value == undefined || value == "") {
           this.elements.label.wrapper.classList.add("--hide");
         } else {
@@ -238,6 +270,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
         }
         break;
       case "message":
+        this.#internals.ariaDescription = value;
         this.elements.messageBox.innerHTML = value;
         break;
       case "value":
@@ -252,6 +285,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
         break;
       case "placeholder":
         this.placeholder = value;
+        this.#internals.ariaPlaceholder = value;
         break;
       case "search-placeholder":
         this.searchPlaceholder = value;
@@ -278,12 +312,12 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   }
   #setValueOnOptionListChanged() {
     //when option list changed we see if current value is valid for new optionlist we set it if not we reset value to null.
-    //in some scenario value is setted before optionList attached so we store it on this.#notFoundedValue and after option list setted we set value from this.#notFoundedValue
+    //in some scenario value is set before optionList attached so we store it on this.#notFoundedValue and after option list set we set value from this.#notFoundedValue
     if (this.#notFoundedValue) {
       //if select has no prev value or pending not found value we don't set it because user may input some search terms in input box and developer-user update list base on that value
       //if we set it to null the search term and this.textValue will become null and empty too and it make impossible for user to search in dynamic back-end provided searchable list so we put this condition to prevent it
-      const isSetted = this.#setValueFromOutside(this.#notFoundedValue);
-      if (isSetted) {
+      const isSet = this.#setValueFromOutside(this.#notFoundedValue);
+      if (isSet) {
         //after list update and when not founded value is found in new option list we clear old not founded value
         this.#notFoundedValue = null;
       }
@@ -314,7 +348,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   }
   //null option mean deselect all
   #changeSelectedOption(option: JBOptionWebComponent<TValue> | null) {
-    this.#optionList.forEach((x) => x.selected = false);
+    this.#optionList.forEach((x) => { x.selected = false });
     if (option) {
       option.selected = true;
       this.#selectedOption = option;
@@ -353,6 +387,13 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       this.focus();
     }
   }
+  #onClearButtonClick(e:MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.#setValue(null,null);
+    this.#checkValidity(true);
+    this.#dispatchOnChangeEvent();
+  }
   #onInputKeyPress(e: KeyboardEvent) {
     const eventOptions: KeyboardEventInit = {
       altKey: e.altKey,
@@ -373,7 +414,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     const event = new KeyboardEvent("keypress", eventOptions);
     this.dispatchEvent(event);
   }
-  #onInputBeforeInput(e: InputEvent) {
+  #onInputBeforeInput(_e: InputEvent) {
     // const inputtedText = e.data || "";
     //TODO: add cancelable event dispatch here
   }
@@ -443,6 +484,9 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     //here is the rare  time we update _text_value directly because we want trigger event that may read value directly from dom
     this.#textValue = inputText;
   }
+  #onSelectFocus() {
+    this.focus();
+  }
   #onInputFocus() {
     this.focus();
   }
@@ -460,13 +504,14 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   focus() {
     this.elements.input.focus();
     this.#showOptionList();
-    this.elements.componentWrapper.classList.add("--focused");
+    this.elements.optionListWrapper.open();
     if (this.isMobileDevice) {
       this.elements.input.placeholder = this.#searchPlaceholder;
     }
   }
   blur() {
-    this.elements.componentWrapper.classList.remove("--focused");
+    // this.elements.componentWrapper.classList.remove("--focused");
+    this.elements.optionListWrapper.close();
     this.textValue = "";
     this.#handleSelectedValueDisplay("");
     this.#hideOptionList();
@@ -589,7 +634,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     }
     if (this.required) {
       const label = this.getAttribute("label") || "";
-      const message = `${label} حتما باید انتخاب شود`;
+      const message = dictionary.get(i18n, "requireMessage")(label || null);
       validationList.push({
         validator: ({ value }) => {
           return value !== null && value !== undefined;