jb-select 6.1.0 → 6.3.0

package/lib/jb-select.scss

@@ -1,13 +1,8 @@
 @use "~jb-core/styles/medias.scss" as *;
+@use './variables.css';
 
 :host {
-    //define private variable here
-    --p-middle-div-height: var(--jb-select-middle-div-height, 0px);
-    --p-p-color: #1e2832;
-    --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);
+
 }
 
 .jb-select-web-component {
@@ -22,24 +17,24 @@
             bottom: 0;
             top: initial;
             left: 0;
-            background-color: var(--jb-select-overlay-bgcolor, #0008);
+            background-color: var(--overlay-bg-color);
             width: 100vw;
-            height: var(--p-mobile-modal-height);
+            height: var(--mobile-modal-height);
             border-radius: var(--jb-select-mobile-modal-border-radius, 0) var(--jb-select-mobile-modal-border-radius, 0) 0 0;
             margin: 0;
             padding: 16px 8px;
-            z-index: var(--p-mobile-modal-z-index);
+            z-index: var(--mobile-modal-z-index);
         }
 
         .select-box {
             @include mobile-tablet {
                 height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));
-                background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);
+                background-color: var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color));
                 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-color: var(--jb-select-mobile-search-border-color, var(--border-color));
                 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)));
+                        var(--jb-select-border-bottom-color, var(--border-color)));
                 border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px));
             }
 
@@ -84,7 +79,7 @@
 
             label {
                 @include mobile-tablet {
-                    color: #fff;
+                    color: var(--modal-label-color);
                     font-size: 1.5em;
                     display: flex;
                     align-items: center;
@@ -100,15 +95,15 @@
                     height: 48px;
                     justify-content: center;
                     align-items: center;
-                    color: #fff;
+                    color: var(--modal-close-color);
 
                     .close-btn-svg-bg {
                         opacity: var(--jb-select-close-bg-opacity, 0.4);
-                        fill: var(--jb-select-close-bg-color, #1f1735);
+                        fill: var(--close-bg-color);
                     }
 
                     .close-btn-svg-path {
-                        fill: var(--jb-select-close-x-color, #fff);
+                        fill: var(--modal-close-color);
                     }
                 }
             }
@@ -119,12 +114,11 @@
 
         //if user select a option and value is setted and not null
         .select-box {
-            border-color: var(--jb-select-border-color-selected, #c3ff14);
-            background-color: var(--jb-select-bgcolor-selected, #f7f6f6);
-
+            border-color: var(--jb-select-border-color-selected, var(--border-color));
+            background-color: var(--jb-select-bgcolor-selected, var(--select-box-bg-color));
             @include mobile-tablet {
                 &:focus-within {
-                    background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);
+                    background-color: var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color));
                 }
             }
         }
@@ -137,7 +131,7 @@
             display: block;
             font-size: var(--jb-select-label-font-size, 0.8em);
             font-weight: var(--jb-select-label-font-weight, normal);
-            color: var(--jb-select-label-color, #1f1735);
+            color: var(--label-color);
 
             &.--hide {
                 display: none;
@@ -153,10 +147,10 @@
         width: 100%;
         box-sizing: border-box;
         height: var(--jb-select-height, 2.5rem);
-        border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);
-        border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);
+        border: solid var(--jb-select-border-width, 1px) var(--border-color);
+        border-bottom: solid var(--p-border-bottom-width) var(--border-color);
         border-radius: var(--jb-select-border-radius, 1rem);
-        background-color: var(--jb-select-bgcolor, #f7f6f6);
+        background-color: var(--select-box-bg-color);
         margin: var(--jb-select-select-box-margin, 4px 0px 0px 0px);
         overflow: hidden;
         display: flex;
@@ -165,8 +159,8 @@
         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-color: var(--jb-select-border-color, var(--border-color));
+            border-bottom-color: var(--jb-select-border-color, var(--border-color));
             border-radius: var(--jb-select-border-radius, 1rem) var(--jb-select-border-radius, 1rem) 0 0;
 
             @include mobile-tablet {
@@ -211,7 +205,7 @@
                     display: block;
                     font-family: inherit;
                     font-size: var(--jb-select-selected-value-font-size, 1.1em);
-                    color: var(--jb-select-selected-value-color, #1f1735);
+                    color: var(--value-color);
                     margin: 0;
                     border-radius: 0;
                     display: flex;
@@ -239,7 +233,7 @@
                     display: block;
                     font-family: inherit;
                     font-size: var(--jb-select-value-font-size, 1.1rem);
-                    color: var(--jb-select-input-color, #1f1735);
+                    color: var(--value-color);
                     margin: 0;
                     border-radius: 0;
 
@@ -248,7 +242,7 @@
                     }
 
                     &::placeholder {
-                        color: var(--jb-select-placeholder-color, initial);
+                        color: var(--placeholder-color);
                         font-size: var(--jb-select-placeholder-font-size, 1.1em);
                     }
                 }
@@ -275,9 +269,9 @@
         position: relative;
         z-index: calc(var(--p-base-z-index) + 3);
         width: 100%;
-        height: var(--p-middle-div-height);
-        background-color: var(--jb-select-middle-div-color, var(--p-p-color));
-        margin: var(--jb-select-middle-div-margin, calc(-1 * var(--p-border-bottom-width)) 0);
+        height: var(--middle-div-height);
+        background-color: var(--jb-select-middle-div-color, var(--border-color));
+        margin: var(--jb-select-middle-div-margin, calc(-1 * var(--border-bottom-width)) 0);
         border-radius: var(--jb-select-middle-div-radius, 0px);
     }
 
@@ -285,7 +279,7 @@
         font-size: var(--jb-select-message-font-size, 0.7em);
         font-weight: var(--jb-select-message-font-weight, normal);
         padding: 4px 8px;
-        color: var(--jb-select-message-color, #929292);
+        color: var(--message-color);
 
         &:empty {
             padding: 0;
@@ -303,14 +297,14 @@
         height: auto;
         overflow: hidden;
         width: 100%;
-        background-color: var(--jb-select-bgcolor, #f7f6f6);
+        background-color: var(--select-box-bg-color);
         border-radius: 0 0 var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px);
-        border: solid var(--jb-select-list-border-width, 1px) var(--jb-select-border-color, var(--p-p-color));
+        border: solid var(--jb-select-list-border-width, 1px) var(--border-color);
         border-top: none;
-        border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, var(--p-p-color));
+        border-bottom: solid var(--p-border-bottom-width) var(--border-color);
         box-shadow: var(--jb-select-list-box-shadow);
         box-sizing: border-box;
-        z-index: calc(var(--p-base-z-index) + 2);
+        z-index: calc(var(--base-z-index) + 2);
 
         &.--show {
             display: block;
@@ -329,7 +323,7 @@
 
 
             @include mobile-tablet {
-                max-height: calc(var(--p-mobile-modal-height) - 240px);
+                max-height: calc(var(--p-mobile-modal-height) - 15rem);
             }
 
             /* option style places */
@@ -340,7 +334,7 @@
             }
 
             &::-webkit-scrollbar-thumb {
-                background-color: var(--jb-select-list-scroll-color, #c3c3c3);
+                background-color: var(--list-scroll-color);
                 border-radius: var(--jb-select-list-scroll-border-radius, 4px);
             }
         }
@@ -348,7 +342,7 @@
         .empty-list-placeholder {
             display: none;
             text-align: center;
-            color: #838383;
+            color: var(--empty-list-placeholder-color);
             font-style: italic;
             padding: 8px 0;
 

package/lib/jb-select.ts

@@ -10,6 +10,7 @@ import { isMobile } from "jb-core";
 import { JBFormInputStandards } from 'jb-form';
 // eslint-disable-next-line no-duplicate-imports
 import { JBOptionWebComponent } from "./jb-option/jb-option";
+import { defineColors } from 'jb-core/theme';
 
 //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.
@@ -164,6 +165,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       mode: "open",
       delegatesFocus: true,
     });
+    defineColors();
     const html = `<style>${CSS}</style>` + "\n" + HTML;
     const element = document.createElement("template");
     element.innerHTML = html;
@@ -202,7 +204,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     //events to work with options
     this.addEventListener("select", this.#onOptionSelect.bind(this));
     this.addEventListener("jb-option-connected", this.#onOptionConnected.bind(this));
-    this.elements.optionListSlot.addEventListener("slotchange",this.#onOptionSlotChange.bind(this));
+    this.elements.optionListSlot.addEventListener("slotchange", this.#onOptionSlotChange.bind(this));
 
   }
 
@@ -262,15 +264,15 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   /**
    * will check option list and if select has no option it will show empty list placeholder
    */
-  #updateListEmptyPlaceholder(){
-    const isAnyOptionVisible = Array.from(this.#optionList).some(x=>x.hidden==false);
-    if(isAnyOptionVisible){
+  #updateListEmptyPlaceholder() {
+    const isAnyOptionVisible = Array.from(this.#optionList).some(x => x.hidden == false);
+    if (isAnyOptionVisible) {
       this.elements.emptyListPlaceholder.classList.remove("--show");
-    }else{
+    } else {
       this.elements.emptyListPlaceholder.classList.add("--show");
     }
   }
-  #onOptionSlotChange(e:Event){
+  #onOptionSlotChange(e: Event) {
     this.#setValueOnOptionListChanged();
     this.#updateListEmptyPlaceholder();
   }
@@ -291,11 +293,11 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   }
   //when user set value by attribute or value prop directly we call this function
   #setValueFromOutside(value: TValue): boolean {
-    if(value === null || value === undefined){
-      this.#setValue(null,null);
+    if (value === null || value === undefined) {
+      this.#setValue(null, null);
       return true;
     }
-    let matchedOption:JBOptionWebComponent<TValue>| null = null; 
+    let matchedOption: JBOptionWebComponent<TValue> | null = null;
     this.#optionList.forEach((option) => {
       // if we have value mapper we set selected value by object that match mapper
       if (option.value == value) {
@@ -303,7 +305,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       }
     });
     if (matchedOption) {
-      this.#setValue(matchedOption.value,matchedOption);
+      this.#setValue(matchedOption.value, matchedOption);
       return true;
     } else {
       this.#notFoundedValue = value;
@@ -311,14 +313,14 @@ 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);
-    if(option){
+  #changeSelectedOption(option: JBOptionWebComponent<TValue> | null) {
+    this.#optionList.forEach((x) => x.selected = false);
+    if (option) {
       option.selected = true;
       this.#selectedOption = option;
     }
   }
-  #setValue(value: TValue,option:JBOptionWebComponent<TValue>|null) {
+  #setValue(value: TValue, option: JBOptionWebComponent<TValue> | null) {
     this.#notFoundedValue = null;
     this.#value = value;
     if (value === null || value === undefined) {
@@ -495,12 +497,12 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     const target = (e.composedPath()[0] as JBOptionWebComponent<TValue>);
     if (target instanceof JBOptionWebComponent) {
       const value = target.value;
-      this.#selectOption(value,target);
+      this.#selectOption(value, target);
       this.blur();
       const dispatchedEvent = this.#dispatchOnChangeEvent();
       if (dispatchedEvent.defaultPrevented) {
         e.preventDefault();
-        this.#selectOption(prevValue,prevOption);
+        this.#selectOption(prevValue, prevOption);
       }
     }
 
@@ -509,26 +511,26 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   #onOptionConnected(e: CustomEvent) {
     e.stopPropagation();
     const target = (e.composedPath()[0] as JBOptionWebComponent<TValue>);
-    target.addEventListener("jb-option-disconnected",this.#onOptionDisconnected.bind(this),{once:true,passive:true});
+    target.addEventListener("jb-option-disconnected", this.#onOptionDisconnected.bind(this), { once: true, passive: true });
     target.setSelectElement(this);
     this.#optionList.add(target);
-    if(this.#notFoundedValue){
+    if (this.#notFoundedValue) {
       this.#setValueOnOptionListChanged();
     }
     this.#updateListEmptyPlaceholder();
   }
-  #onOptionDisconnected(e:CustomEvent){
+  #onOptionDisconnected(e: CustomEvent) {
     e.stopPropagation();
     const target = e.target as JBOptionWebComponent<TValue>;
     this.#optionList.delete(target);
     this.#updateListEmptyPlaceholder();
-    if(target.value == this.#value){
+    if (target.value == this.#value) {
       this.#setValueOnOptionListChanged();
     }
   }
 
-  #selectOption(value: TValue, optionDom:JBOptionWebComponent<TValue>) {
-    this.#setValue(value,optionDom);
+  #selectOption(value: TValue, optionDom: JBOptionWebComponent<TValue>) {
+    this.#setValue(value, optionDom);
     this.#checkValidity(true);
   }
   /**
@@ -560,25 +562,25 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   }
   #createSelectedValueDom(value: TValue) {
     if (typeof this.callbacks.getSelectedValueDOM == "function") {
-      return this.callbacks.getSelectedValueDOM(value,this.#selectedOption);
+      return this.callbacks.getSelectedValueDOM(value, this.#selectedOption);
     } else {
       return this.#createDefaultSelectedValueDom();
     }
   }
   #createDefaultSelectedValueDom() {
     //TODO: put some backup way for when we have value but no option provided
-    let contentNodes:Node[] = [];
-    if(this.#selectedOption){
+    let contentNodes: Node[] = [];
+    if (this.#selectedOption) {
       contentNodes = this.#selectedOption.optionContent;
     }
     const selectedOptionDom = document.createElement("div");
     selectedOptionDom.classList.add("selected-value");
-    selectedOptionDom.append(...contentNodes.map(n=>n.cloneNode()));
+    selectedOptionDom.append(...contentNodes.map(n => n.cloneNode()));
     return selectedOptionDom;
   }
   #getInsideValidation() {
     const validationList: ValidationItem<ValidationValue<TValue>>[] = [];
-    if(this.getAttribute("error") !== null && this.getAttribute("error").trim().length > 0){
+    if (this.getAttribute("error") !== null && this.getAttribute("error").trim().length > 0) {
       validationList.push({
         validator: undefined,
         message: this.getAttribute("error"),

package/lib/variables.css

@@ -0,0 +1,28 @@
+:host {
+  --middle-div-height: var(--jb-select-middle-div-height, 0px);
+  --border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));
+  --base-z-index: 1;
+  --mobile-modal-z-index: 900;
+  --mobile-modal-height: var(--jb-select-mobile-modal-height, 100vh);
+  /**/
+  --border-color: var(--jb-select-border-color, var(--jb-neutral-10));
+  --message-color: var(--jb-select-message-color, var(--jb-text-secondary));
+  --label-color: var(--jb-select-label-color, var(--jb-text-primary));
+  --value-color: var(--jb-select-value-color, var(--jb-text-primary));
+  --placeholder-color: var(--jb-select-placeholder-color, var(--jb-neutral-6));
+  --select-box-bg-color: var(--jb-select-bgcolor, var(--jb-neutral-10));
+  --overlay-bg-color:var(--jb-select-overlay-bg-color, oklch(from var(--jb-neutral) l c h / calc(alpha - 0.5)));
+  --modal-label-color:var(--jb-select-modal-label-color, var(--jb-text-contrast));
+  --modal-close-color:var(--jb-select-modal-close-color, var(--jb-white));
+  --close-bg-color:var(--jb-select-close-bg-color, var(--jb-neutral-2));
+  --list-scroll-color:var(--jb-select-list-scroll-color, oklch(from var(--select-box-bg-color) calc(l - 0.2) c h));
+  --empty-list-placeholder-color:var(--jb-select-empty-list-placeholder-color, var(--jb-text-secondary))
+}
+
+:host(:state(invalid)) {
+  --message-color: var(--jb-select-message-error-color, var(--jb-red));
+}
+
+:host(:focus-within) {
+  --border-color: var(--jb-select-border-color-focus, var(--jb-neutral));
+}

package/package.json

@@ -12,10 +12,11 @@
     "select",
     "autocomplete",
     "dropdown",
+    "select box",
     "web component",
     "react component"
   ],
-  "version": "6.1.0",
+  "version": "6.3.0",
   "bugs": "https://github.com/javadbat/jb-select/issues",
   "license": "MIT",
   "files": [
@@ -34,7 +35,7 @@
   },
   "dependencies": {
     "jb-validation": ">=0.4.0",
-    "jb-core":">=0.4.0"
+    "jb-core":">=0.8.0"
   },
   "devDependencies": {
     "jb-form":">=0.6.10"