jb-select 6.0.5 → 6.2.0

package/dist/lib/index.d.ts

@@ -0,0 +1,7 @@
+import "./jb-option/jb-option.js";
+import "./jb-option-list/jb-option-list.js";
+import "./jb-select.js";
+export * from './jb-select.js';
+export * from './types.js';
+export * from "./jb-option-list/jb-option-list.js";
+export * from "./jb-option/jb-option.js";

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

@@ -0,0 +1,21 @@
+import { type JBSelectWebComponent } from '../jb-select';
+export declare class JBOptionWebComponent<TValue> extends HTMLElement {
+    #private;
+    get value(): TValue;
+    set value(value: TValue);
+    set selected(value: boolean);
+    get selected(): boolean;
+    get optionContent(): Node[];
+    get hidden(): boolean;
+    set hidden(value: boolean);
+    /**
+     * return text content of option (it used in search by default to filter option)
+     */
+    get optionContentText(): string;
+    constructor();
+    connectedCallback(): void;
+    setSelectElement(element: JBSelectWebComponent): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/lib/jb-option/render.d.ts

@@ -0,0 +1 @@
+export declare function renderHTML(): string;

package/dist/lib/jb-option/types.d.ts

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

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

@@ -0,0 +1,10 @@
+import { type OptionListCallbacks } from "./types";
+export declare class JBOptionListWebComponent<TOption, TValue> extends HTMLElement {
+    #private;
+    get callbacks(): OptionListCallbacks<TOption, TValue>;
+    get optionList(): TOption[];
+    set optionList(value: TOption[]);
+    constructor();
+    connectedCallback(): void;
+    setCallback<T extends keyof OptionListCallbacks<TOption, TValue>>(key: T, callbackFn: OptionListCallbacks<TOption, TValue>[T]): void;
+}

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

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

package/dist/lib/jb-select.d.ts

@@ -0,0 +1,59 @@
+import { JBSelectCallbacks, JBSelectElements, ValidationValue } from "./types";
+import { ShowValidationErrorInput, ValidationHelper, type WithValidation } from "jb-validation";
+import { JBFormInputStandards } from 'jb-form';
+/**
+ *  TValue is the type of value we extract from option
+ */
+export declare class JBSelectWebComponent<TValue = any> extends HTMLElement implements WithValidation<ValidationValue<TValue>>, JBFormInputStandards<TValue> {
+    #private;
+    static get formAssociated(): boolean;
+    callbacks: JBSelectCallbacks<TValue>;
+    elements: JBSelectElements;
+    get value(): TValue;
+    set value(value: TValue);
+    get textValue(): string;
+    set textValue(value: string);
+    get selectedOptionTitle(): string;
+    get placeholder(): string;
+    set placeholder(value: string);
+    get searchPlaceholder(): string;
+    set searchPlaceholder(value: string);
+    get isMobileDevice(): boolean;
+    get isOpen(): boolean;
+    get validation(): ValidationHelper<ValidationValue<TValue>>;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    set required(value: boolean);
+    get required(): boolean;
+    /**
+   * @description will determine if component trigger jb-validation mechanism automatically on user event or it just let user-developer handle validation mechanism by himself
+   */
+    get isAutoValidationDisabled(): boolean;
+    get name(): string;
+    initialValue: TValue | null;
+    get isDirty(): boolean;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    focus(): void;
+    blur(): void;
+    /**
+     * @description show given string as a error in message place
+     * @public
+     */
+    showValidationError(error: ShowValidationErrorInput | string): void;
+    clearValidationError(): void;
+    /**
+   * @public
+   * @description this method used to check for validity but doesn't show error to user and just return the result
+   * this method used by #internal of component
+   */
+    checkValidity(): boolean;
+    /**
+    * @public
+   * @description this method used to check for validity and show error to user
+   */
+    reportValidity(): boolean;
+    get validationMessage(): string;
+}

package/dist/lib/types.d.ts

@@ -0,0 +1,27 @@
+import type { JBOptionWebComponent } from "./jb-option/jb-option";
+import type { EventTypeWithTarget } from "jb-core";
+import type { JBSelectWebComponent } from "./jb-select";
+export type JBSelectCallbacks<TValue> = {
+    getSelectedValueDOM?: (value: TValue, content: HTMLElement) => HTMLElement;
+};
+export type JBSelectElements = {
+    input: HTMLInputElement;
+    componentWrapper: HTMLDivElement;
+    selectedValueWrapper: HTMLDivElement;
+    messageBox: HTMLDivElement;
+    optionList: HTMLDivElement;
+    optionListWrapper: HTMLDivElement;
+    optionListSlot: HTMLSlotElement;
+    arrowIcon: HTMLDivElement;
+    label: {
+        wrapper: HTMLLabelElement;
+        text: HTMLSpanElement;
+    };
+    emptyListPlaceholder: HTMLDivElement;
+};
+export type ValidationValue<TValue> = {
+    selectedOption: JBOptionWebComponent<TValue> | null;
+    value: TValue | null;
+    inputtedText: string;
+};
+export type JBSelectEventType<TEvent> = EventTypeWithTarget<TEvent, JBSelectWebComponent>;

package/dist/types.d.ts

@@ -0,0 +1,28 @@
+import type { JBOptionWebComponent } from "./jb-option/jb-option";
+import type { EventTypeWithTarget } from "jb-core";
+import type { JBSelectWebComponent } from "./jb-select";
+export type JBSelectCallbacks<TValue> = {
+    getSelectedValueDOM?: (value: TValue, content: HTMLElement) => HTMLElement;
+};
+export type JBSelectElements = {
+    input: HTMLInputElement;
+    componentWrapper: HTMLDivElement;
+    selectedValueWrapper: HTMLDivElement;
+    messageBox: HTMLDivElement;
+    optionList: HTMLDivElement;
+    optionListWrapper: HTMLDivElement;
+    optionListSlot: HTMLSlotElement;
+    arrowIcon: HTMLDivElement;
+    label: {
+        wrapper: HTMLLabelElement;
+        text: HTMLSpanElement;
+    };
+    emptyListPlaceholder: HTMLDivElement;
+};
+export type ValidationValue<TValue> = {
+    selectedOption: JBOptionWebComponent<TValue> | null;
+    value: TValue | null;
+    inputtedText: string;
+};
+export type JBSelectEventType<TEvent> = EventTypeWithTarget<TEvent, JBSelectWebComponent>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AACjD,OAAO,KAAI,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACvD,MAAM,MAAM,iBAAiB,CAAC,MAAM,IAAI;IACpC,mBAAmB,CAAC,EAAC,CAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,KAAK,WAAW,CAAC;CAC1E,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,cAAc,CAAC;IACjC,oBAAoB,EAAE,cAAc,CAAC;IACrC,UAAU,EAAC,cAAc,CAAC;IAC1B,UAAU,EAAE,cAAc,CAAC;IAC3B,iBAAiB,EAAE,cAAc,CAAC;IAClC,cAAc,EAAC,eAAe,CAAC;IAC/B,SAAS,EAAE,cAAc,CAAC;IAC1B,KAAK,EAAC;QACF,OAAO,EAAE,gBAAgB,CAAC;QAC1B,IAAI,EAAE,eAAe,CAAA;KACxB,CAAC;IACF,oBAAoB,EAAE,cAAc,CAAC;CACxC,CAAA;AACD,MAAM,MAAM,eAAe,CAAC,MAAM,IAAI;IAClC,cAAc,EAAC,oBAAoB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IACnD,KAAK,EAAC,MAAM,GAAG,IAAI,CAAC;IACpB,YAAY,EAAC,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,MAAM,IAAI,mBAAmB,CAAC,MAAM,EAAC,oBAAoB,CAAC,CAAA"}

package/dist/web-component/jb-select/lib/jb-select.d.ts

@@ -1,6 +1,9 @@
 import { JBSelectCallbacks, JBSelectElements, ValidationValue } from "./types";
 import { ShowValidationErrorInput, ValidationHelper, type WithValidation } from "jb-validation";
 import { JBFormInputStandards } from 'jb-form';
+/**
+ *  TValue is the type of value we extract from option
+ */
 export declare class JBSelectWebComponent<TValue = any> extends HTMLElement implements WithValidation<ValidationValue<TValue>>, JBFormInputStandards<TValue> {
     #private;
     static get formAssociated(): boolean;

package/dist/web-component/jb-select/lib/types.d.ts

@@ -1,4 +1,6 @@
-import { type JBOptionWebComponent } from "./jb-option/jb-option";
+import type { JBOptionWebComponent } from "./jb-option/jb-option";
+import type { EventTypeWithTarget } from "jb-core";
+import type { JBSelectWebComponent } from "./jb-select";
 export type JBSelectCallbacks<TValue> = {
     getSelectedValueDOM?: (value: TValue, content: HTMLElement) => HTMLElement;
 };
@@ -22,3 +24,4 @@ export type ValidationValue<TValue> = {
     value: TValue | null;
     inputtedText: string;
 };
+export type JBSelectEventType<TEvent> = EventTypeWithTarget<TEvent, JBSelectWebComponent>;

package/lib/global.d.ts

@@ -0,0 +1,15 @@
+type FileStringModules = {
+    readonly default: string;
+}
+declare module '*.scss' {
+    const value: FileStringModules;
+    export default value;
+}
+declare module '*.html' {
+    const value: FileStringModules;
+    export default value.default;
+}
+declare module '*.svg' {
+    const value: string;
+    export default value;
+}

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

@@ -4,6 +4,8 @@ import { renderHTML } from "./render";
 import { JBOptionElements } from "./types";
 
 //TODO: check for filter text to set visibility on mount
+//TODO: add disable option (will be displayed but can not be select)
+//TODO: add highlight to highlight the searched value
 export class JBOptionWebComponent<TValue> extends HTMLElement {
 
   #elements: JBOptionElements;
@@ -41,8 +43,10 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
     this.#hidden = value;
     if(value){
       this.#elements.componentWrapper.classList.add('--hidden');
+      this.setAttribute("inert","");
     }else{
       this.#elements.componentWrapper.classList.remove('--hidden');
+      this.removeAttribute("inert");
     }
   }
   /**

package/lib/jb-select.scss

@@ -1,13 +1,8 @@
-@use "../../../common/scss/Medias.scss" as *;
+@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,7 +17,7 @@
             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);
             border-radius: var(--jb-select-mobile-modal-border-radius, 0) var(--jb-select-mobile-modal-border-radius, 0) 0 0;
@@ -34,12 +29,12 @@
         .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;
 
@@ -276,7 +270,7 @@
         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));
+        background-color: var(--jb-select-middle-div-color, var(--border-color));
         margin: var(--jb-select-middle-div-margin, calc(-1 * var(--p-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,11 +297,11 @@
         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);
@@ -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

@@ -5,13 +5,18 @@ import {
   JBSelectElements,
   ValidationValue,
 } from "./types";
-import { ShowValidationErrorInput, ValidationHelper, type ValidationItem, type ValidationResult, type WithValidation } from "jb-validation";
-import { isMobile } from "../../../common/scripts/device-detection";
+import { ShowValidationErrorParameters, ValidationHelper, type ValidationItem, type ValidationResult, type WithValidation } from "jb-validation";
+import { isMobile } from "jb-core";
 import { JBFormInputStandards } from 'jb-form';
 // eslint-disable-next-line no-duplicate-imports
 import { JBOptionWebComponent } from "./jb-option/jb-option";
-// eslint-disable-next-line no-duplicate-imports
-//TOption is the type of option, TValue is the type of value we extract from 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.
+/**
+ *  TValue is the type of value we extract from option
+ */
 export class JBSelectWebComponent<TValue = any> extends HTMLElement implements WithValidation<ValidationValue<TValue>>, JBFormInputStandards<TValue> {
   static get formAssociated() {
     return true;
@@ -160,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;
@@ -198,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));
 
   }
 
@@ -214,6 +220,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       "required",
       "placeholder",
       "search-placeholder",
+      "error",
     ];
   }
   attributeChangedCallback(name: string, oldValue: string, newValue: string) {
@@ -249,20 +256,23 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       case "search-placeholder":
         this.searchPlaceholder = value;
         break;
+      case "error":
+        this.reportValidity();
+        break;
     }
   }
   /**
    * 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();
   }
@@ -283,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) {
@@ -295,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;
@@ -303,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) {
@@ -487,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);
       }
     }
 
@@ -501,33 +511,33 @@ 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);
   }
   /**
    * @description show given string as a error in message place
    * @public
    */
-  showValidationError(error: ShowValidationErrorInput | string) {
+  showValidationError(error: ShowValidationErrorParameters | string) {
     const message = typeof error == "string" ? error : error.message;
     this.elements.messageBox.innerHTML = message;
     this.elements.messageBox.classList.add("--error");
@@ -552,28 +562,35 @@ 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>>[] = [];
+    const validationList: ValidationItem<ValidationValue<TValue>>[] = [];
+    if (this.getAttribute("error") !== null && this.getAttribute("error").trim().length > 0) {
+      validationList.push({
+        validator: undefined,
+        message: this.getAttribute("error"),
+        stateType: "customError"
+      });
+    }
     if (this.required) {
       const label = this.getAttribute("label") || "";
       const message = `${label} حتما باید انتخاب شود`;
-      ValidationList.push({
+      validationList.push({
         validator: ({ value }) => {
           return value !== null && value !== undefined;
         },
@@ -581,7 +598,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
         stateType: "valueMissing"
       });
     }
-    return ValidationList;
+    return validationList;
   }
   //
   #checkValidity(showError: boolean) {