jb-select 6.0.5 → 6.1.0

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

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react';
 import 'jb-select';
 import { JBSelectWebComponent } from 'jb-select';
+import { EventProps } from './events-hook.js';
 export type JBSelectEventType<T> = T & {
     target: JBSelectWebComponent;
 };
@@ -19,15 +20,24 @@ declare global {
         }
     }
 }
-export declare const JBSelect: React.ForwardRefExoticComponent<JBSelectProps & React.RefAttributes<unknown>>;
-export type JBSelectProps = {
+export declare const JBSelect: React.ForwardRefExoticComponent<EventProps & {
+    style?: CSSProperties;
+    label?: string;
+    getSelectedValueDOM?: (option: any) => HTMLElement;
+    value?: any;
+    required?: boolean;
+    message?: string;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    className?: string;
+    children?: React.ReactNode;
+    name?: string;
+} & React.RefAttributes<unknown>>;
+export type Props = EventProps & {
     style?: CSSProperties;
     label?: string;
     getSelectedValueDOM?: (option: any) => HTMLElement;
     value?: any;
-    onChange?: (e: JBSelectEventType<Event>) => void;
-    onKeyup?: (e: JBSelectEventType<KeyboardEvent>) => void;
-    onInput?: (e: JBSelectEventType<InputEvent>) => void;
     required?: boolean;
     message?: string;
     placeholder?: string;

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

@@ -0,0 +1,16 @@
+import { RefObject } from "react";
+import type { JBSelectWebComponent, JBSelectEventType } from 'jb-select';
+export type EventProps = {
+    /**
+     * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+     */
+    onLoad?: (e: JBSelectEventType<CustomEvent>) => void;
+    /**
+   * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+   */
+    onInit?: (e: JBSelectEventType<CustomEvent>) => void;
+    onChange?: (e: JBSelectEventType<Event>) => void;
+    onKeyUp?: (e: JBSelectEventType<KeyboardEvent>) => void;
+    onInput?: (e: JBSelectEventType<InputEvent>) => void;
+};
+export declare function useEvents(element: RefObject<JBSelectWebComponent>, props: EventProps): void;

package/react/lib/JBSelect.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/display-name */
 import React, { useEffect, useRef, useState, useImperativeHandle,CSSProperties } from 'react';
 import 'jb-select';
-import { useBindEvent } from '../../../../common/hooks/use-event.js';
 // eslint-disable-next-line no-duplicate-imports
 import { JBSelectWebComponent } from 'jb-select';
+import { EventProps, useEvents } from './events-hook.js';
 export type JBSelectEventType<T> = T & {
     target: JBSelectWebComponent
 }
@@ -25,7 +25,7 @@ declare global {
     }
 }
 
-export const JBSelect = React.forwardRef((props:JBSelectProps, ref) => {
+export const JBSelect = React.forwardRef((props:Props, ref) => {
   const element = useRef<JBSelectWebComponent>(null);
   const [refChangeCount, refChangeCountSetter] = useState(0);
   useImperativeHandle(
@@ -61,24 +61,14 @@ export const JBSelect = React.forwardRef((props:JBSelectProps, ref) => {
       element.current?.setAttribute("search-placeholder", props.searchPlaceholder);
     }
   }, [props.searchPlaceholder]);
-  function onKeyup(e:JBSelectEventType<KeyboardEvent>) {
-    if ( typeof props.onKeyup == "function") {
-      props.onKeyup(e);
-    }
-  }
-  function onChange(e:JBSelectEventType<Event>) {
-    if (typeof props.onChange =="function") {
-      props.onChange(e);
-    }
-  }
-  function onInput(e:JBSelectEventType<InputEvent>) {
-    if (typeof props.onInput == "function") {
-      props.onInput(e);
+  useEffect(() => {
+    if (props.error) {
+      element?.current?.setAttribute('error', props.error);
+    } else {
+      element?.current?.removeAttribute('error');
     }
-  }
-  useBindEvent(element, 'keyup', onKeyup);
-  useBindEvent(element, 'change', onChange);
-  useBindEvent(element, 'input', onInput);
+  }, [props.error]);
+  useEvents(element,props);
   return (
     <jb-select style={props.style?props.style:undefined} class={props.className?props.className:""} label={props.label} ref={element} required={props.required || 'false'} name={props.name??undefined}>
       {props.children}
@@ -86,20 +76,18 @@ export const JBSelect = React.forwardRef((props:JBSelectProps, ref) => {
   );
 });
 
-export type JBSelectProps = {
+export type Props = EventProps & {
     style?:CSSProperties,
     label?: string,
     getSelectedValueDOM?: (option:any)=>HTMLElement,
     value?: any,
-    onChange?: (e:JBSelectEventType<Event>)=>void,
-    onKeyup?: (e:JBSelectEventType<KeyboardEvent>)=>void,
-    onInput?: (e:JBSelectEventType<InputEvent>)=>void,
     required?: boolean,
     message?: string,
     placeholder?: string,
     searchPlaceholder?: string,
     className?: string,
     children?:React.ReactNode,
-    name?:string
+    name?:string,
+    error?:string,
 }
 JBSelect.displayName = 'JBSelect';

package/react/lib/events-hook.ts

@@ -0,0 +1,24 @@
+import { useEvent } from "jb-core/react";
+import { RefObject } from "react";
+import type { JBSelectWebComponent, JBSelectEventType } from 'jb-select';
+
+export type EventProps = {
+  /**
+   * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+   */
+  onLoad?: (e: JBSelectEventType<CustomEvent>) => void,
+  /**
+ * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+ */
+  onInit?: (e: JBSelectEventType<CustomEvent>) => void,
+  onChange?: (e: JBSelectEventType<Event>) => void,
+  onKeyUp?: (e: JBSelectEventType<KeyboardEvent>) => void,
+  onInput?: (e: JBSelectEventType<InputEvent>) => void,
+}
+export function useEvents(element: RefObject<JBSelectWebComponent>, props: EventProps) {
+  useEvent(element, 'load', props.onLoad, true);
+  useEvent(element, 'init', props.onInit, true);
+  useEvent(element, 'keyup', props.onKeyUp);
+  useEvent(element, 'change', props.onChange);
+  useEvent(element, 'input', props.onInput);
+}

package/react/package.json

@@ -22,7 +22,7 @@
     "dist/"
   ],
   "main": "index.js",
-  "types": "./dist/web-component/jb-select/react/lib/index.d.ts",
+  "types": "./dist/index.d.ts",
   "repository": {
 		"type": "git",
 		"url": "git@github.com:javadbat/jb-select.git"

package/react/tsconfig.json

@@ -1,11 +1,10 @@
 {
     "compilerOptions": {
         "baseUrl": ".",
+        "rootDir": "./lib",
+        "declarationDir": "./dist"
     },
     "include": [
-        "../../../common/scripts/**/*.ts",
-        "../../../common/hooks/**/*.ts",
-        "../../../common/hooks/**/*.js",
         "lib/**/*.ts",
         "lib/**/*.tsx",
         "lib/JBOptionList.tsx"
@@ -15,5 +14,5 @@
         "**/*.spec.ts",
         "dist",
     ],
-    "extends":"../../tsconfig-react.json"
+    "extends":"jb-core/configs/tsconfig-react.json"
 }

package/dist/jb-select.cjs.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("jb-validation");function t(e,t,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(e):i?i.value:t.get(e)}function n(e,t,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?s.call(e,n):s?s.value=n:t.set(e,n),n}"function"==typeof SuppressedError&&SuppressedError;var i,s,l,o,r,a,c,d,h,b,p,m,u,v,f,w,g,x,y,j,k,L,E,V,C,M,T,O,z,W,S,A,K,q,D,H,P,B,I,R,N,Z,F,J,U,Y,$,_,G,Q,X;class ee extends HTMLElement{static get formAssociated(){return!0}get value(){return t(this,s,"f")?t(this,i,"m",$).call(this,t(this,s,"f")):null}set value(e){t(this,i,"m",k).call(this,e)}get textValue(){return t(this,l,"f")}set textValue(e){n(this,l,e,"f"),this.elements.input.value=e,t(this,i,"m",H).call(this,e)}get selectedOptionTitle(){return this.value?t(this,i,"m",_).call(this,t(this,s,"f")):""}get optionList(){return t(this,r,"f")||[]}set optionList(e){Array.isArray(e)?(n(this,r,e,"f"),this.displayOptionList=t(this,i,"m",Z).call(this,this.textValue),t(this,i,"m",j).call(this)):console.error("your provided option list to jb-select is not a array. you must provide array value",{value:e})}get placeholder(){return t(this,c,"f")}set placeholder(e){n(this,c,e,"f"),null!==this.value&&void 0!==this.value?this.elements.input.placeholder="":this.elements.input.placeholder=e}get searchPlaceholder(){return t(this,d,"f")}set searchPlaceholder(e){n(this,d,e,"f")}get displayOptionList(){return t(this,a,"f")}set displayOptionList(e){Array.isArray(e)&&0==e.length?this.elements.emptyListPlaceholder.classList.add("--show"):Array.isArray(e)&&this.elements.emptyListPlaceholder.classList.remove("--show"),n(this,a,e,"f"),t(this,i,"m",P).call(this)}get isMobileDevice(){return/Mobi/i.test(window.navigator.userAgent)}get isOpen(){return this.elements.componentWrapper.classList.contains("--focused")}get validation(){return t(this,b,"f")}get disabled(){return t(this,p,"f")}set disabled(e){n(this,p,e,"f"),this.elements.input.disabled=e,e?t(this,u,"f").states?.add("disabled"):t(this,u,"f").states?.delete("disabled")}set required(e){n(this,m,e,"f"),t(this,b,"f").checkValiditySync({showError:!1})}get required(){return t(this,m,"f")}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get name(){return this.getAttribute("name")||""}get isDirty(){return this.value!==this.initialValue}constructor(){super(),i.add(this),s.set(this,void 0),l.set(this,""),o.set(this,null),this.callbacks={getOptionTitle:e=>"string"==typeof e||"number"==typeof e?e.toString():(console.error("title must be string please provide a valid getOptionTitle","provided title:",e),"NOT SUPPORTED TITLE TYPE"),getOptionValue:null,getOptionDOM:null,getSelectedValueDOM:null},r.set(this,[]),a.set(this,[]),c.set(this,""),d.set(this,"search"),b.set(this,new e.ValidationHelper({clearValidationError:this.clearValidationError.bind(this),showValidationError:this.showValidationError.bind(this),getValue:()=>t(this,i,"a",h),getValidations:t(this,i,"m",G).bind(this),getValueString:()=>t(this,l,"f"),setValidationResult:t(this,i,"m",X).bind(this)})),p.set(this,!1),m.set(this,!1),u.set(this,void 0),this.initialValue=null,"function"==typeof this.attachInternals&&n(this,u,this.attachInternals(),"f"),t(this,i,"m",w).call(this),t(this,i,"m",x).call(this)}connectedCallback(){t(this,i,"m",f).call(this),t(this,i,"m",v).call(this)}static get observedAttributes(){return["label","message","value","required","placeholder","search-placeholder"]}attributeChangedCallback(e,n,s){t(this,i,"m",y).call(this,e,s)}focus(){this.elements.input.focus(),t(this,i,"m",q).call(this),this.elements.componentWrapper.classList.add("--focused"),this.isMobileDevice&&(this.elements.input.placeholder=t(this,d,"f"))}blur(){this.elements.componentWrapper.classList.remove("--focused"),this.textValue="",t(this,i,"m",z).call(this,""),t(this,i,"m",D).call(this),t(this,b,"f").checkValidity({showError:!0}),this.isMobileDevice&&(this.value?this.elements.input.placeholder="":this.elements.input.placeholder=this.placeholder),this.elements.input.blur()}showValidationError(e){const t="string"==typeof e?e:e.message;this.elements.messageBox.innerHTML=t,this.elements.messageBox.classList.add("--error")}clearValidationError(){this.elements.messageBox.innerHTML=this.getAttribute("message")||"",this.elements.messageBox.classList.remove("--error")}checkValidity(){const e=t(this,b,"f").checkValiditySync({showError:!1});if(!e.isAllValid){const e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}reportValidity(){const e=t(this,b,"f").checkValiditySync({showError:!0});if(!e.isAllValid){const e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}get validationMessage(){return t(this,u,"f")?.validationMessage||t(this,b,"f").resultSummary.message}}s=new WeakMap,l=new WeakMap,o=new WeakMap,r=new WeakMap,a=new WeakMap,c=new WeakMap,d=new WeakMap,b=new WeakMap,p=new WeakMap,m=new WeakMap,u=new WeakMap,i=new WeakSet,h=function(){return{inputtedText:t(this,l,"f"),selectedOption:t(this,s,"f"),value:this.value}},v=function(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)},f=function(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)},w=function(){const e=this.attachShadow({mode:"open",delegatesFocus:!0}),n=document.createElement("template");n.innerHTML='<style>:host {\n  --p-middle-div-height: var(--jb-select-middle-div-height, 0px);\n  --p-p-color: #1e2832;\n  --p-border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));\n  --p-base-z-index: 1;\n  --p-mobile-modal-z-index: 900;\n  --p-mobile-modal-height:var(--jb-select-mobile-modal-height, 100vh);\n}\n\n.jb-select-web-component {\n  width: var(--jb-select-width, 100%);\n  margin: var(--jb-select-margin, 0 0);\n  position: relative;\n  box-sizing: border-box;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused {\n    position: fixed;\n    bottom: 0;\n    top: initial;\n    left: 0;\n    background-color: var(--jb-select-overlay-bgcolor, rgba(0, 0, 0, 0.5333333333));\n    width: 100vw;\n    height: var(--p-mobile-modal-height);\n    border-radius: var(--jb-select-mobile-modal-border-radius, 0) var(--jb-select-mobile-modal-border-radius, 0) 0 0;\n    margin: 0;\n    padding: 16px 8px;\n    z-index: var(--p-mobile-modal-z-index);\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .select-box {\n    height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));\n    background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);\n    border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));\n    border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));\n    border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));\n    border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));\n    border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px));\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .select-box .front-box .arrow-icon {\n    display: none;\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .select-box .selected-value-wrapper {\n    opacity: 0;\n    transition: none;\n  }\n}\n.jb-select-web-component.--focused .middle-divider {\n  display: block;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .middle-divider {\n    margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0);\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .select-list-wrapper {\n    position: initial;\n    margin: var(--jb-select-mobile-item-list-margin, 16px 0);\n    border-radius: var(--jb-select-mobile-item-list-border-radius, var(--jb-select-border-radius, 16px));\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .label-wrapper {\n    display: flex;\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .label-wrapper label {\n    color: #fff;\n    font-size: 1.5em;\n    display: flex;\n    align-items: center;\n  }\n}\n.jb-select-web-component.--focused .label-wrapper .close-button {\n  display: none;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .label-wrapper .close-button {\n    display: flex;\n    width: 48px;\n    height: 48px;\n    justify-content: center;\n    align-items: center;\n    color: #fff;\n  }\n  .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-bg {\n    opacity: var(--jb-select-close-bg-opacity, 0.4);\n    fill: var(--jb-select-close-bg-color, #1f1735);\n  }\n  .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-path {\n    fill: var(--jb-select-close-x-color, #fff);\n  }\n}\n.jb-select-web-component.--has-value .select-box {\n  border-color: var(--jb-select-border-color-selected, #c3ff14);\n  background-color: var(--jb-select-bgcolor-selected, #f7f6f6);\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--has-value .select-box:focus-within {\n    background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);\n  }\n}\n.jb-select-web-component .label-wrapper label {\n  width: 100%;\n  margin: 4px 0px;\n  display: block;\n  font-size: var(--jb-select-label-font-size, 0.8em);\n  font-weight: var(--jb-select-label-font-weight, normal);\n  color: var(--jb-select-label-color, #1f1735);\n}\n.jb-select-web-component .label-wrapper label.--hide {\n  display: none;\n}\n.jb-select-web-component .label-wrapper .close-button {\n  display: none;\n}\n.jb-select-web-component .select-box {\n  width: 100%;\n  box-sizing: border-box;\n  height: var(--jb-select-height, 2.5rem);\n  border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);\n  border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);\n  border-radius: var(--jb-select-border-radius, 1rem);\n  background-color: var(--jb-select-bgcolor, #f7f6f6);\n  margin: var(--jb-select-select-box-margin, 4px 0px 0px 0px);\n  overflow: hidden;\n  display: flex;\n  padding-inline-end: var(--jb-select-box-padding-end, 1rem);\n  gap: 0.5rem;\n  align-items: center;\n}\n.jb-select-web-component .select-box:focus-within {\n  border-color: var(--jb-select-border-color, var(--p-p-color));\n  border-bottom-color: var(--jb-select-border-color, var(--p-p-color));\n  border-radius: var(--jb-select-border-radius, 1rem) var(--jb-select-border-radius, 1rem) 0 0;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component .select-box:focus-within {\n    border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 1rem));\n  }\n}\n.jb-select-web-component .select-box .start-section {\n  height: 100%;\n  width: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.jb-select-web-component .select-box .middle-section {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  flex: 1;\n}\n.jb-select-web-component .select-box .middle-section .selected-value-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  overflow: hidden;\n  z-index: 1;\n}\n.jb-select-web-component .select-box .middle-section .selected-value-wrapper.--search-typed {\n  opacity: 0;\n}\n.jb-select-web-component .select-box .middle-section .selected-value-wrapper .selected-value {\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: 2px 12px 0 12px;\n  display: block;\n  font-family: inherit;\n  font-size: var(--jb-select-selected-value-font-size, 1.1em);\n  color: var(--jb-select-selected-value-color, #1f1735);\n  margin: 0;\n  border-radius: 0;\n  display: flex;\n  align-items: center;\n}\n.jb-select-web-component .select-box .middle-section .front-box {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  overflow: hidden;\n  z-index: 2;\n}\n.jb-select-web-component .select-box .middle-section .front-box input {\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: 2px 12px 0 12px;\n  display: block;\n  font-family: inherit;\n  font-size: var(--jb-select-value-font-size, 1.1rem);\n  color: var(--jb-select-input-color, #1f1735);\n  margin: 0;\n  border-radius: 0;\n}\n.jb-select-web-component .select-box .middle-section .front-box input:focus {\n  outline: none;\n}\n.jb-select-web-component .select-box .middle-section .front-box input::placeholder {\n  color: var(--jb-select-placeholder-color, initial);\n  font-size: var(--jb-select-placeholder-font-size, 1.1em);\n}\n.jb-select-web-component .select-box .end-section .arrow-icon {\n  margin: var(--jb-select-arrow-icon-margin, 0 0 0 0);\n}\n.jb-select-web-component .select-box:focus-within .selected-value {\n  opacity: 0.7;\n  transition: all 0.3s ease;\n}\n.jb-select-web-component .middle-divider {\n  display: none;\n  position: relative;\n  z-index: calc(var(--p-base-z-index) + 3);\n  width: 100%;\n  height: var(--p-middle-div-height);\n  background-color: var(--jb-select-middle-div-color, var(--p-p-color));\n  margin: var(--jb-select-middle-div-margin, calc(-1 * var(--p-border-bottom-width)) 0);\n  border-radius: var(--jb-select-middle-div-radius, 0px);\n}\n.jb-select-web-component .message-box {\n  font-size: var(--jb-select-message-font-size, 0.7em);\n  font-weight: var(--jb-select-message-font-weight, normal);\n  padding: 4px 8px;\n  color: var(--jb-select-message-color, #929292);\n}\n.jb-select-web-component .message-box:empty {\n  padding: 0;\n}\n.jb-select-web-component .message-box.--error {\n  color: red;\n}\n.jb-select-web-component .select-list-wrapper {\n  display: none;\n  position: absolute;\n  margin: calc(-1 * var(--p-border-bottom-width)) 0;\n  height: auto;\n  overflow: hidden;\n  width: 100%;\n  background-color: var(--jb-select-bgcolor, #f7f6f6);\n  border-radius: 0 0 var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px);\n  border: solid var(--jb-select-list-border-width, 1px) var(--jb-select-border-color, var(--p-p-color));\n  border-top: none;\n  border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, var(--p-p-color));\n  box-shadow: var(--jb-select-list-box-shadow);\n  box-sizing: border-box;\n  z-index: calc(var(--p-base-z-index) + 2);\n}\n.jb-select-web-component .select-list-wrapper.--show {\n  display: block;\n}\n.jb-select-web-component .select-list-wrapper .select-list {\n  width: 100%;\n  max-height: var(--jb-select-list-max-height, 400px);\n  overflow-y: auto;\n  padding: var(--jb-select-list-padding, 16px 0);\n}\n.jb-select-web-component .select-list-wrapper .select-list:empty {\n  padding: 0;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component .select-list-wrapper .select-list {\n    max-height: calc(var(--p-mobile-modal-height) - 240px);\n  }\n}\n.jb-select-web-component .select-list-wrapper .select-list .select-option {\n  min-height: 36px;\n  padding: 4px 16px;\n  display: flex;\n  align-items: center;\n  font-size: 0.9em;\n  color: var(--jb-select-option-color, inherit);\n  background-color: var(--jb-select-option-background-color, transparent);\n}\n.jb-select-web-component .select-list-wrapper .select-list .select-option:hover {\n  background-color: var(--jb-select-option-background-color-hover, #1073db);\n  color: var(--jb-select-option-color-hover, #fff);\n  cursor: pointer;\n}\n.jb-select-web-component .select-list-wrapper .select-list .select-option.--selected-option {\n  font-weight: 900;\n}\n.jb-select-web-component .select-list-wrapper .select-list::-webkit-scrollbar {\n  width: 9px;\n  background-color: transparent;\n}\n.jb-select-web-component .select-list-wrapper .select-list::-webkit-scrollbar-thumb {\n  background-color: var(--jb-select-list-scroll-color, #c3c3c3);\n  border-radius: var(--jb-select-list-scroll-border-radius, 4px);\n}\n.jb-select-web-component .select-list-wrapper .empty-list-placeholder {\n  display: none;\n  text-align: center;\n  color: #838383;\n  font-style: italic;\n  padding: 8px 0;\n}\n.jb-select-web-component .select-list-wrapper .empty-list-placeholder.--show {\n  display: block;\n}</style>\n<div class="jb-select-web-component">\r\n    <div class="label-wrapper">\r\n        <label class="--hide"><span class="label-value"></span></label>\r\n        \x3c!-- close button will be visible on mobile modal --\x3e\r\n        <div class="close-button">\r\n            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">\r\n                <path class="close-btn-svg-bg" opacity="0.4" d="M16.3399 1.9998H7.66988C4.27988 1.9998 1.99988 4.3798 1.99988 7.9198V16.0898C1.99988 19.6198 4.27988 21.9998 7.66988 21.9998H16.3399C19.7299 21.9998 21.9999 19.6198 21.9999 16.0898V7.9198C21.9999 4.3798 19.7299 1.9998 16.3399 1.9998Z"/>\r\n                <path class="close-btn-svg-path" d="M15.0156 13.7703L13.2366 11.9923L15.0146 10.2143C15.3566 9.8733 15.3566 9.3183 15.0146 8.9773C14.6726 8.6333 14.1196 8.6343 13.7776 8.9763L11.9986 10.7543L10.2196 8.9743C9.87758 8.6323 9.32358 8.6343 8.98158 8.9743C8.64058 9.3163 8.64058 9.8713 8.98158 10.2123L10.7616 11.9923L8.98558 13.7673C8.64358 14.1093 8.64358 14.6643 8.98558 15.0043C9.15658 15.1763 9.37958 15.2613 9.60358 15.2613C9.82858 15.2613 10.0516 15.1763 10.2226 15.0053L11.9986 13.2293L13.7786 15.0083C13.9496 15.1793 14.1726 15.2643 14.3966 15.2643C14.6206 15.2643 14.8446 15.1783 15.0156 15.0083C15.3576 14.6663 15.3576 14.1123 15.0156 13.7703Z" fill="#200E32"/>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n    <div class="select-box">\r\n        <div class="start-section">\r\n            <slot name="start-section"></slot>\r\n        </div>\r\n        <div class="middle-section">\r\n            <div class="selected-value-wrapper"></div>\r\n            <div class="front-box">\r\n                <input class="input">\r\n\r\n            </div>\r\n        </div>\r\n        <div class="end-section">\r\n            <div class="arrow-icon" tabindex="-1">\r\n                <slot name="select-arrow-icon">\r\n                    <svg width="8" height="8" id="Layer_1" x="0px" y="0px" viewBox="0 0 494.1 371.1" style="enable-background:new 0 0 494.1 371.1;" xml:space="preserve">\r\n                        <path d="M293,343.8L480.9,69.3c8.7-12.7,13.3-25.4,13.3-36.1c0-20.5-16.5-33.2-44-33.2H44C16.4,0,0,12.7,0,33.2  c0,10.6,4.6,23.2,13.3,35.9l187.9,274.6c12.1,17.7,28.4,27.4,45.9,27.4C264.6,371.1,280.9,361.4,293,343.8z"/>\r\n                    </svg>\r\n                </slot>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class="middle-divider">\r\n        \x3c!-- middle line between input box and list (hidden by default but user may need it sometimes) --\x3e\r\n    </div>\r\n    <div class="select-list-wrapper">\r\n        <div class="select-list" tabindex="-1">\r\n\r\n        </div>\r\n        <div class="empty-list-placeholder">\r\n            <slot name="empty-list-message">no item available</slot>\r\n        </div>\r\n    </div>\r\n    <div class="message-box"></div>\r\n</div>',e.appendChild(n.content.cloneNode(!0)),this.elements={input:e.querySelector(".select-box input"),componentWrapper:e.querySelector(".jb-select-web-component"),selectedValueWrapper:e.querySelector(".selected-value-wrapper"),messageBox:e.querySelector(".message-box"),optionList:e.querySelector(".select-list"),optionListWrapper:e.querySelector(".select-list-wrapper"),arrowIcon:e.querySelector(".arrow-icon"),label:{wrapper:e.querySelector("label"),text:e.querySelector("label .label-value")},emptyListPlaceholder:e.querySelector(".empty-list-placeholder")},t(this,i,"m",g).call(this)},g=function(){this.elements.input.addEventListener("change",(e=>{t(this,i,"m",S).call(this,e)})),this.elements.input.addEventListener("keypress",t(this,i,"m",V).bind(this)),this.elements.input.addEventListener("keyup",t(this,i,"m",O).bind(this)),this.elements.input.addEventListener("beforeinput",t(this,i,"m",C).bind(this)),this.elements.input.addEventListener("input",(e=>{t(this,i,"m",M).call(this,e)})),this.elements.input.addEventListener("focus",t(this,i,"m",A).bind(this)),this.elements.input.addEventListener("blur",t(this,i,"m",K).bind(this)),this.elements.arrowIcon.addEventListener("click",t(this,i,"m",E).bind(this))},x=function(){this.textValue="",this.value=this.getAttribute("value")||null},y=function(e,n){switch(e){case"label":this.elements.label.text.innerHTML=n,null==n||null==n||""==n?this.elements.label.wrapper.classList.add("--hide"):this.elements.label.wrapper.classList.remove("--hide");break;case"message":this.elements.messageBox.innerHTML=n;break;case"value":t(this,i,"m",k).call(this,n);break;case"required":this.required=""===n||"true"==n||"True"==n;break;case"placeholder":this.placeholder=n;break;case"search-placeholder":this.searchPlaceholder=n}},j=function(){if(t(this,o,"f")){t(this,i,"m",k).call(this,t(this,o,"f"))&&n(this,o,null,"f")}else this.value&&t(this,i,"m",k).call(this,this.value)},k=function(e){const s=this.optionList.find((n=>{if(t(this,i,"m",$).call(this,n)==e)return n}));return s||null==e?(t(this,i,"m",L).call(this,s),!0):(n(this,o,e,"f"),!1)},L=function(e){n(this,o,null,"f"),n(this,s,e,"f"),null==e?(this.textValue="",t(this,i,"m",J).call(this,null),this.elements.componentWrapper.classList.remove("--has-value"),this.isMobileDevice&&this.isOpen||(this.elements.input.placeholder=this.placeholder)):(this.textValue="",t(this,i,"m",J).call(this,e),this.elements.componentWrapper.classList.add("--has-value"),this.isMobileDevice&&this.isOpen||(this.elements.input.placeholder="")),t(this,i,"m",H).call(this,"")},E=function(){this.isOpen?this.blur():this.focus()},V=function(e){const t={altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,composed:e.composed,ctrlKey:e.ctrlKey,detail:e.detail,isComposing:e.isComposing,key:e.key,location:e.location,metaKey:e.metaKey,view:e.view,repeat:e.repeat,shiftKey:e.shiftKey},n=new KeyboardEvent("keypress",t);this.dispatchEvent(n)},C=function(e){},M=function(e){const n=e.target.value;this.textValue=n,t(this,i,"m",z).call(this,n),t(this,b,"f").checkValidity({showError:!1}),t(this,i,"m",T).call(this,e)},T=function(e){const t=new InputEvent("input",{bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed,data:e.data,dataTransfer:e.dataTransfer,detail:e.detail,inputType:e.inputType,isComposing:e.isComposing,targetRanges:e.getTargetRanges(),view:e.view});this.dispatchEvent(t)},O=function(e){const n=e.target.value;"Backspace"!==e.key&&"Delete"!==e.key||t(this,i,"m",z).call(this,n),t(this,i,"m",W).call(this,e)},z=function(e){""!==e?this.elements.selectedValueWrapper.classList.add("--search-typed"):this.elements.selectedValueWrapper.classList.remove("--search-typed")},W=function(e){const t=new KeyboardEvent("keyup",{altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,ctrlKey:e.ctrlKey,detail:e.detail,key:e.key,shiftKey:e.shiftKey,charCode:e.charCode,location:e.location,composed:e.composed,isComposing:e.isComposing,metaKey:e.metaKey,repeat:e.repeat,keyCode:e.keyCode,view:e.view});this.dispatchEvent(t)},S=function(e){const t=e.target.value;n(this,l,t,"f")},A=function(){this.focus()},K=function(e){const t=e.relatedTarget;this.elements.optionListWrapper.contains(t)||this.elements.arrowIcon.contains(t)||this.blur()},q=function(){this.elements.optionListWrapper.classList.add("--show")},D=function(){this.elements.optionListWrapper.classList.remove("--show")},H=function(e){this.displayOptionList=t(this,i,"m",Z).call(this,e)},P=function(){const e=[];this.displayOptionList.forEach((n=>{const s=t(this,i,"m",B).call(this,n);e.push(s)})),this.elements.optionList.innerHTML="",e.forEach((e=>{this.elements.optionList.appendChild(e)}))},B=function(e){let n=null;const l=t(this,i,"m",$).call(this,t(this,s,"f"))==t(this,i,"m",$).call(this,e);return n="function"==typeof this.callbacks.getOptionDOM?this.callbacks.getOptionDOM(e,t(this,i,"m",R).bind(this),l):t(this,i,"m",I).call(this,e,l),n.value=e,n},I=function(e,n){const s=document.createElement("div");return s.classList.add("select-option"),n&&s.classList.add("--selected-option"),s.innerHTML=t(this,i,"m",_).call(this,e),s.addEventListener("click",t(this,i,"m",R).bind(this)),s},R=function(e){const n=t(this,s,"f"),l=e.currentTarget.value;t(this,i,"m",N).call(this,l),this.blur();t(this,i,"m",F).call(this).defaultPrevented&&(e.preventDefault(),t(this,i,"m",N).call(this,n))},N=function(e){t(this,i,"m",L).call(this,e),t(this,i,"m",Q).call(this,!0)},Z=function(e){const n=[];return this.optionList.filter((s=>{const l=t(this,i,"m",_).call(this,s),o="string"==typeof l;o&&l.includes(e)&&n.push(s),o||console.warn("the provided values for optionsList is not of type string.",{option:s,title:l})})),n},F=function(){const e=new Event("change",{bubbles:!0,cancelable:!0});return this.dispatchEvent(e),e},J=function(e){if(this.elements.selectedValueWrapper.innerHTML="",null!=e){const n=t(this,i,"m",U).call(this,e);this.elements.selectedValueWrapper.appendChild(n)}},U=function(e){return"function"==typeof this.callbacks.getSelectedValueDOM?this.callbacks.getSelectedValueDOM(e):t(this,i,"m",Y).call(this,e)},Y=function(e){const n=t(this,i,"m",_).call(this,e),s=document.createElement("div");return s.classList.add("selected-value"),s.innerHTML=n,s},$=function(e){this.callbacks.getOptionValue&&"function"!=typeof this.callbacks.getOptionValue&&console.error("getOptionValue callback is not a function");try{return"function"==typeof this.callbacks.getOptionValue?this.callbacks.getOptionValue(e):e}catch(t){console.error("Invalid getOptionValue callback Result, must be a function that returns the value of an option",e)}},_=function(e){"function"!=typeof this.callbacks.getOptionTitle&&console.error("getOptionTitle callback is not a function");try{return this.callbacks.getOptionTitle(e)}catch(t){console.error("Invalid getOptionTitle callback Result, must be a function that returns the value of an option",e)}return""},G=function(){const e=[];if(this.required){const t=`${this.getAttribute("label")||""} حتما باید انتخاب شود`;e.push({validator:({selectedOption:e})=>null!=e,message:t,stateType:"valueMissing"})}return e},Q=function(e){if(!this.isAutoValidationDisabled)return t(this,b,"f").checkValidity({showError:e})},X=function(e){if(e.isAllValid)t(this,u,"f")?.setValidity({},"");else{const n={};let i="";e.validationList.forEach((e=>{e.isValid||(e.validation.stateType?n[e.validation.stateType]=!0:n.customError=!0,""==i&&(i=e.message))})),t(this,u,"f")?.setValidity(n,i)}};!customElements.get("jb-select")&&window.customElements.define("jb-select",ee),exports.JBSelectWebComponent=ee;
-//# sourceMappingURL=jb-select.cjs.js.map

package/dist/jb-select.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"jb-select.cjs.js","sources":["../lib/jb-select.ts","../../../common/scripts/device-detection.ts"],"sourcesContent":["import HTML from \"./jb-select.html\";\r\nimport CSS from \"./jb-select.scss\";\r\nimport {\r\n  JBSelectCallbacks,\r\n  JBSelectElements,\r\n  JBSelectOptionElement,\r\n  ValidationValue,\r\n} from \"./types\";\r\nimport {ShowValidationErrorInput, ValidationHelper, type ValidationItem, type ValidationResult, type WithValidation} from \"jb-validation\";\r\nimport { isMobile } from \"../../../common/scripts/device-detection\";\r\nimport {JBFormInputStandards} from 'jb-form';\r\n//TOption is the type of option, TValue is the type of value we extract from option\r\nexport class JBSelectWebComponent<TOption = any, TValue = TOption> extends HTMLElement implements WithValidation<ValidationValue<TOption,TValue>>, JBFormInputStandards<TValue> {\r\n  static get formAssociated() {\r\n    return true;\r\n  }\r\n  // we keep selected option here by option but we return TValue when user demand\r\n  #value: TOption;\r\n  #textValue = \"\";\r\n  // if user set value and current option list is not contain the option.\r\n  // we hold it in _notFoundedValue and select value when option value get updated\r\n  #notFoundedValue: TValue = null;\r\n  callbacks: JBSelectCallbacks<TOption,TValue> = {\r\n    getOptionTitle: (option) => {\r\n      if(typeof option == \"string\" || typeof option == \"number\"){\r\n        return option.toString();\r\n      }else{\r\n        console.error(\"title must be string please provide a valid getOptionTitle\",\"provided title:\",option);\r\n        return \"NOT SUPPORTED TITLE TYPE\";\r\n      }\r\n    },\r\n    getOptionValue: null,\r\n    getOptionDOM: null,\r\n    getSelectedValueDOM: null,\r\n  };\r\n  elements!: JBSelectElements;\r\n  get value():TValue{\r\n    if (this.#value) {\r\n      return this.#getOptionValue(this.#value);\r\n    } else {\r\n      return null;\r\n    }\r\n  }\r\n  set value(value:TValue) {\r\n    this.#setValueFromOutside(value);\r\n  }\r\n  get textValue() {\r\n    return this.#textValue;\r\n  }\r\n  set textValue(value) {\r\n    this.#textValue = value;\r\n    this.elements.input.value = value;\r\n    this.#updateOptionList(value);\r\n  }\r\n  get selectedOptionTitle() {\r\n    if (this.value) {\r\n      return this.#getOptionTitle(this.#value);\r\n    } else {\r\n      return \"\";\r\n    }\r\n  }\r\n  #optionList: TOption[] = [];\r\n  #displayOptionList: TOption[] = [];\r\n  get optionList() {\r\n    return this.#optionList || [];\r\n  }\r\n  set optionList(value) {\r\n    if (!Array.isArray(value)) {\r\n      console.error(\r\n        \"your provided option list to jb-select is not a array. you must provide array value\",\r\n        { value }\r\n      );\r\n      return;\r\n    }\r\n    this.#optionList = value;\r\n    //every time optionList get updated we set our value base on current option list we use _notFoundedValue in case of value provided to component before optionList\r\n    this.displayOptionList = this.#filterOptionList(this.textValue);\r\n    this.#setValueOnOptionListChanged();\r\n  }\r\n  #placeholder = \"\";\r\n  get placeholder() {\r\n    return this.#placeholder;\r\n  }\r\n  set placeholder(value: string) {\r\n    this.#placeholder = value;\r\n    if (this.value !== null && this.value !== undefined) {\r\n      this.elements.input.placeholder = \"\";\r\n    } else {\r\n      this.elements.input.placeholder = value;\r\n    }\r\n  }\r\n  //on mobile device when search modal open this will appear on search box\r\n  #searchPlaceholder = \"search\";\r\n  get searchPlaceholder() {\r\n    return this.#searchPlaceholder;\r\n  }\r\n  set searchPlaceholder(value) {\r\n    this.#searchPlaceholder = value;\r\n  }\r\n  get displayOptionList() {\r\n    return this.#displayOptionList;\r\n  }\r\n  set displayOptionList(value: TOption[]) {\r\n    if (Array.isArray(value) && value.length == 0) {\r\n      this.elements.emptyListPlaceholder.classList.add(\"--show\");\r\n    } else if (Array.isArray(value)) {\r\n      this.elements.emptyListPlaceholder.classList.remove(\"--show\");\r\n    }\r\n    this.#displayOptionList = value;\r\n    this.#updateOptionListDOM();\r\n  }\r\n  get isMobileDevice() {\r\n    return isMobile();\r\n  }\r\n  get isOpen() {\r\n    return this.elements.componentWrapper.classList.contains(\"--focused\");\r\n  }\r\n  // this value used by validation module to send to validation callbacks\r\n  get #ValidationValue():ValidationValue<TOption,TValue>{\r\n    return {\r\n      inputtedText:this.#textValue,\r\n      selectedOption:this.#value,\r\n      value:this.value\r\n    };\r\n  }\r\n  #validation = new ValidationHelper<ValidationValue<TOption,TValue>>({\r\n    clearValidationError:this.clearValidationError.bind(this),\r\n    showValidationError:this.showValidationError.bind(this),\r\n    getValue:()=>this.#ValidationValue,\r\n    getValidations:this.#getInsideValidation.bind(this),\r\n    getValueString:()=>this.#textValue,\r\n    setValidationResult:this.#setValidationResult.bind(this)\r\n  });\r\n  get validation(){\r\n    return this.#validation;\r\n  }\r\n  #disabled = false;\r\n  get disabled(){\r\n    return this.#disabled;\r\n  }\r\n  set disabled(value:boolean){\r\n    this.#disabled = value;\r\n    this.elements.input.disabled = value;\r\n    if(value){\r\n      //TODO: remove as any when typescript support\r\n      (this.#internals as any).states?.add(\"disabled\");\r\n    }else{\r\n      (this.#internals as any).states?.delete(\"disabled\");\r\n    }\r\n  }\r\n  #required = false;\r\n  set required(value:boolean){\r\n    this.#required = value;\r\n    this.#validation.checkValiditySync({showError:false});\r\n  }\r\n  get required() {\r\n    return this.#required;\r\n  }\r\n  #internals?: ElementInternals;\r\n  /**\r\n * @description will determine if component trigger jb-validation mechanism automatically on user event or it just let user-developer handle validation mechanism by himself\r\n */\r\n  get isAutoValidationDisabled(): boolean {\r\n    //currently we only support disable-validation in attribute and only in initiate time but later we can add support for change of this \r\n    return this.getAttribute('disable-auto-validation') === '' || this.getAttribute('disable-auto-validation') === 'true' ? true : false;\r\n  }\r\n  get name(){\r\n    return this.getAttribute('name') || '';\r\n  }\r\n  initialValue: TValue | null = null;\r\n  get isDirty(): boolean{\r\n    return this.value !== this.initialValue;\r\n  }\r\n  constructor() {\r\n    super();\r\n    if (typeof this.attachInternals == \"function\") {\r\n      //some browser dont support attachInternals\r\n      this.#internals = this.attachInternals();\r\n    }\r\n    this.#initWebComponent();\r\n    this.#initProp();\r\n  }\r\n  connectedCallback() {\r\n    // standard web component event that called when all of dom is binded\r\n    this.#callOnLoadEvent();\r\n    this.#callOnInitEvent();\r\n  }\r\n  #callOnInitEvent() {\r\n    const event = new CustomEvent(\"init\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  #callOnLoadEvent() {\r\n    const event = new CustomEvent(\"load\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  #initWebComponent() {\r\n    const shadowRoot = this.attachShadow({\r\n      mode: \"open\",\r\n      delegatesFocus:true,\r\n    });\r\n    const html = `<style>${CSS}</style>` + \"\\n\" + HTML;\r\n    const element = document.createElement(\"template\");\r\n    element.innerHTML = html;\r\n    shadowRoot.appendChild(element.content.cloneNode(true));\r\n    this.elements = {\r\n      input: shadowRoot.querySelector(\".select-box input\")!,\r\n      componentWrapper: shadowRoot.querySelector(\".jb-select-web-component\")!,\r\n      selectedValueWrapper: shadowRoot.querySelector(\r\n        \".selected-value-wrapper\"\r\n      )!,\r\n      messageBox: shadowRoot.querySelector(\".message-box\")!,\r\n      optionList: shadowRoot.querySelector(\".select-list\")!,\r\n      optionListWrapper: shadowRoot.querySelector(\".select-list-wrapper\")!,\r\n      arrowIcon: shadowRoot.querySelector(\".arrow-icon\")!,\r\n      label: {\r\n        wrapper: shadowRoot.querySelector(\"label\")!,\r\n        text: shadowRoot.querySelector(\"label .label-value\")!,\r\n      },\r\n      emptyListPlaceholder: shadowRoot.querySelector(\r\n        \".empty-list-placeholder\"\r\n      )!,\r\n    };\r\n    this.#registerEventListener();\r\n  }\r\n  #registerEventListener() {\r\n    this.elements.input.addEventListener(\"change\", (e:Event) => {\r\n      this.#onInputChange(e);\r\n    });\r\n    this.elements.input.addEventListener(\r\n      \"keypress\",\r\n      this.#onInputKeyPress.bind(this)\r\n    );\r\n    this.elements.input.addEventListener(\"keyup\", this.#onInputKeyup.bind(this));\r\n    this.elements.input.addEventListener(\r\n      \"beforeinput\",\r\n      this.#onInputBeforeInput.bind(this)\r\n    );\r\n    this.elements.input.addEventListener(\"input\", (e) => {\r\n      this.#onInputInput(e as unknown as InputEvent);\r\n    });\r\n    this.elements.input.addEventListener(\"focus\", this.#onInputFocus.bind(this));\r\n    this.elements.input.addEventListener(\"blur\", this.#onInputBlur.bind(this));\r\n    this.elements.arrowIcon.addEventListener(\r\n      \"click\",\r\n      this.#onArrowKeyClick.bind(this)\r\n    );\r\n  }\r\n  #initProp() {\r\n    this.textValue = \"\";\r\n    this.value = this.getAttribute(\"value\") as TValue || null ;\r\n  }\r\n  static get observedAttributes() {\r\n    return [\r\n      \"label\",\r\n      \"message\",\r\n      \"value\",\r\n      \"required\",\r\n      \"placeholder\",\r\n      \"search-placeholder\",\r\n    ];\r\n  }\r\n  attributeChangedCallback(name:string, oldValue:string, newValue:string) {\r\n    // do something when an attribute has changed\r\n    this.#onAttributeChange(name, newValue);\r\n  }\r\n  #onAttributeChange(name: string, value: string) {\r\n    switch (name) {\r\n      case \"label\":\r\n        this.elements.label.text.innerHTML = value;\r\n        if (value == null || value == undefined || value == \"\") {\r\n          this.elements.label.wrapper.classList.add(\"--hide\");\r\n        } else {\r\n          this.elements.label.wrapper.classList.remove(\"--hide\");\r\n        }\r\n        break;\r\n      case \"message\":\r\n        this.elements.messageBox.innerHTML = value;\r\n        break;\r\n      case \"value\":\r\n        this.#setValueFromOutside(value as TValue);\r\n        break;\r\n      case \"required\":\r\n        if (value === \"\" || value == \"true\" || value == \"True\") {\r\n          this.required = true;\r\n        } else {\r\n          this.required = false;\r\n        }\r\n        break;\r\n      case \"placeholder\":\r\n        this.placeholder = value;\r\n        break;\r\n      case \"search-placeholder\":\r\n        this.searchPlaceholder = value;\r\n        break;\r\n    }\r\n  }\r\n  #setValueOnOptionListChanged() {\r\n    //when option list changed we see if current value is valid for new optionlist we set it if not we reset value to null.\r\n    //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\r\n    if (this.#notFoundedValue) {\r\n      //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\r\n      //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\r\n      const isSetted = this.#setValueFromOutside(this.#notFoundedValue);\r\n      if (isSetted) {\r\n        //after list update and when not founded value is found in new option list we clear old not founded value\r\n        this.#notFoundedValue = null;\r\n      }\r\n    } else if (this.value) {\r\n      this.#setValueFromOutside(this.value);\r\n    }\r\n  }\r\n  #setValueFromOutside(value: TValue): boolean {\r\n    //when user set value by attribute or value prop directly we call this function\r\n    const matchedOption = this.optionList.find((option) => {\r\n      // if we have value mapper we set selected value by object that match mapper\r\n      if (this.#getOptionValue(option) == value) {\r\n        return option;\r\n      }\r\n    });\r\n    if (matchedOption || value === null || value === undefined) {\r\n      this.#setValue(matchedOption);\r\n      return true;\r\n    } else {\r\n      this.#notFoundedValue = value;\r\n      return false;\r\n    }\r\n  }\r\n  #setValue(value: TOption) {\r\n    this.#notFoundedValue = null;\r\n    this.#value = value;\r\n    if (value === null || value === undefined) {\r\n      this.textValue = \"\";\r\n      this.#setSelectedOptionDom(null);\r\n      this.elements.componentWrapper.classList.remove(\"--has-value\");\r\n      //show placeholder when user empty data\r\n      if (!(this.isMobileDevice && this.isOpen)) {\r\n        this.elements.input.placeholder = this.placeholder;\r\n      }\r\n    } else {\r\n      this.textValue = \"\";\r\n      this.#setSelectedOptionDom(value);\r\n      this.elements.componentWrapper.classList.add(\"--has-value\");\r\n      //hide placeholder when user select data\r\n      if (!(this.isMobileDevice && this.isOpen)) {\r\n        this.elements.input.placeholder = \"\";\r\n      }\r\n    }\r\n    //if user select an option we rest filter so user see all option again when open a select\r\n    this.#updateOptionList(\"\");\r\n  }\r\n  #onArrowKeyClick() {\r\n    if (this.isOpen) {\r\n      this.blur();\r\n    } else {\r\n      this.focus();\r\n    }\r\n  }\r\n  #onInputKeyPress(e:KeyboardEvent) {\r\n    const eventOptions:KeyboardEventInit = {\r\n      altKey:e.altKey,\r\n      bubbles:e.bubbles,\r\n      cancelable:e.cancelable,\r\n      code:e.code,\r\n      composed:e.composed,\r\n      ctrlKey:e.ctrlKey,\r\n      detail:e.detail,\r\n      isComposing:e.isComposing,\r\n      key:e.key,\r\n      location:e.location,\r\n      metaKey:e.metaKey,\r\n      view:e.view,\r\n      repeat:e.repeat,\r\n      shiftKey:e.shiftKey \r\n    };\r\n    const event = new KeyboardEvent(\"keypress\",eventOptions);\r\n    this.dispatchEvent(event);\r\n  }\r\n  #onInputBeforeInput(e: InputEvent) {\r\n    // const inputtedText = e.data || \"\";\r\n    //TODO: add cancelable event dispatch here\r\n  }\r\n  #onInputInput(e: InputEvent) {\r\n    const inputtedText = (e.target as HTMLInputElement).value;\r\n    this.textValue = inputtedText;\r\n    this.#handleSelectedValueDisplay(inputtedText);\r\n    this.#validation.checkValidity({showError:false});\r\n    this.#dispatchInputEvent(e);\r\n  }\r\n  #dispatchInputEvent(e: InputEvent) {\r\n    const event = new InputEvent(\"input\", {\r\n      bubbles: e.bubbles,\r\n      cancelable: e.cancelable,\r\n      composed: e.composed,\r\n      data: e.data,\r\n      dataTransfer: e.dataTransfer,\r\n      detail: e.detail,\r\n      inputType: e.inputType,\r\n      isComposing: e.isComposing,\r\n      targetRanges: e.getTargetRanges(),\r\n      view: e.view,\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n  #onInputKeyup(e: KeyboardEvent) {\r\n    const inputText = (e.target as HTMLInputElement).value;\r\n    //here is the rare  time we update #value directly because we want trigger event that may read value directly from dom\r\n    if (e.key === \"Backspace\" || e.key === \"Delete\") {\r\n      //because on keypress dont receive backspace key press\r\n      this.#handleSelectedValueDisplay(inputText);\r\n    }\r\n\r\n    this.#triggerOnInputKeyup(e);\r\n  }\r\n  #handleSelectedValueDisplay(inputValue: string) {\r\n    if (inputValue !== \"\") {\r\n      this.elements.selectedValueWrapper.classList.add(\"--search-typed\");\r\n    } else {\r\n      this.elements.selectedValueWrapper.classList.remove(\"--search-typed\");\r\n    }\r\n  }\r\n  #triggerOnInputKeyup(e: KeyboardEvent) {\r\n    const event = new KeyboardEvent(\"keyup\", {\r\n      altKey: e.altKey,\r\n      bubbles: e.bubbles,\r\n      cancelable: e.cancelable,\r\n      code: e.code,\r\n      ctrlKey: e.ctrlKey,\r\n      detail: e.detail,\r\n      key: e.key,\r\n      shiftKey: e.shiftKey,\r\n      charCode: e.charCode,\r\n      location: e.location,\r\n      composed: e.composed,\r\n      isComposing: e.isComposing,\r\n      metaKey: e.metaKey,\r\n      repeat: e.repeat,\r\n      keyCode: e.keyCode,\r\n      view: e.view,\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n  #onInputChange(e: Event) {\r\n    const inputText = (e.target as HTMLInputElement).value;\r\n    //here is the rare  time we update _text_value directly because we want trigger event that may read value directly from dom\r\n    this.#textValue = inputText;\r\n  }\r\n  #onInputFocus() {\r\n    this.focus();\r\n  }\r\n  #onInputBlur(e: FocusEvent) {\r\n    const focusedElement = <Node>e.relatedTarget;\r\n    if (\r\n      this.elements.optionListWrapper.contains(focusedElement) ||\r\n      this.elements.arrowIcon.contains(focusedElement)\r\n    ) {\r\n      //user click on a menu item\r\n    } else {\r\n      this.blur();\r\n    }\r\n  }\r\n  focus() {\r\n    this.elements.input.focus();\r\n    this.#showOptionList();\r\n    this.elements.componentWrapper.classList.add(\"--focused\");\r\n    if (this.isMobileDevice) {\r\n      this.elements.input.placeholder = this.#searchPlaceholder;\r\n    }\r\n  }\r\n  blur() {\r\n    this.elements.componentWrapper.classList.remove(\"--focused\");\r\n    this.textValue = \"\";\r\n    this.#handleSelectedValueDisplay(\"\");\r\n    this.#hideOptionList();\r\n    this.#validation.checkValidity({showError:true});\r\n    if (this.isMobileDevice) {\r\n      if (this.value) {\r\n        this.elements.input.placeholder = \"\";\r\n      } else {\r\n        this.elements.input.placeholder = this.placeholder;\r\n      }\r\n    }\r\n    this.elements.input.blur();\r\n  }\r\n  #showOptionList() {\r\n    this.elements.optionListWrapper.classList.add(\"--show\");\r\n  }\r\n  #hideOptionList() {\r\n    this.elements.optionListWrapper.classList.remove(\"--show\");\r\n  }\r\n  #updateOptionList(filterText: string) {\r\n    this.displayOptionList = this.#filterOptionList(filterText);\r\n  }\r\n  #updateOptionListDOM() {\r\n    const optionDomList: HTMLElement[] = [];\r\n    this.displayOptionList.forEach((item) => {\r\n      const optionDOM = this.#createOptionDOM(item);\r\n      optionDomList.push(optionDOM);\r\n    });\r\n    this.elements.optionList.innerHTML = \"\";\r\n    optionDomList.forEach((optionElement) => {\r\n      this.elements.optionList.appendChild(optionElement);\r\n    });\r\n  }\r\n  #createOptionDOM(item: TOption): JBSelectOptionElement<TOption> {\r\n    let optionDOM: JBSelectOptionElement<TOption> | null = null;\r\n    const isSelected =\r\n      this.#getOptionValue(this.#value) == this.#getOptionValue(item);\r\n    if (typeof this.callbacks.getOptionDOM == \"function\") {\r\n      optionDOM = this.callbacks.getOptionDOM(\r\n        item,\r\n        this.#onOptionClicked.bind(this),\r\n        isSelected\r\n      );\r\n    } else {\r\n      optionDOM = this.#createDefaultOptionDom(item, isSelected);\r\n    }\r\n    optionDOM.value = item;\r\n    return optionDOM;\r\n  }\r\n\r\n  #createDefaultOptionDom(item: TOption, isSelected: boolean): JBSelectOptionElement<TOption> {\r\n    const optionElement = document.createElement(\"div\");\r\n    optionElement.classList.add(\"select-option\");\r\n    if (isSelected) {\r\n      optionElement.classList.add(\"--selected-option\");\r\n    }\r\n    //it has default function who return exact same input\r\n    optionElement.innerHTML = this.#getOptionTitle(item);\r\n    optionElement.addEventListener(\"click\", this.#onOptionClicked.bind(this));\r\n    return optionElement;\r\n  }\r\n  #onOptionClicked(e: MouseEvent) {\r\n    const prevValue = this.#value;\r\n    const value = (e.currentTarget as JBSelectOptionElement<TOption>).value;\r\n    this.#selectOption(value);\r\n    this.blur();\r\n    const dispatchedEvent = this.#dispatchOnChangeEvent();\r\n    if(dispatchedEvent.defaultPrevented){\r\n      e.preventDefault();\r\n      this.#selectOption(prevValue);\r\n    }\r\n  }\r\n  #selectOption(value: TOption) {\r\n    this.#setValue(value);\r\n    this.#checkValidity(true);\r\n  }\r\n  #filterOptionList(filterString: string): TOption[] {\r\n    const displayOptionList: TOption[] = [];\r\n    this.optionList.filter((option) => {\r\n      const optionTitle = this.#getOptionTitle(option);\r\n      const isString = typeof optionTitle == \"string\";\r\n      if (isString && optionTitle.includes(filterString)) {\r\n        displayOptionList.push(option);\r\n      }\r\n      if (!isString) {\r\n        console.warn(\r\n          \"the provided values for optionsList is not of type string.\",\r\n          { option, title: optionTitle }\r\n        );\r\n      }\r\n    });\r\n    return displayOptionList;\r\n  }\r\n  /**\r\n   * @description show given string as a error in message place\r\n   * @public\r\n   */\r\n  showValidationError(error: ShowValidationErrorInput | string) {\r\n    const message = typeof error == \"string\"?error:error.message;\r\n    this.elements.messageBox.innerHTML = message;\r\n    this.elements.messageBox.classList.add(\"--error\");\r\n  }\r\n  clearValidationError() {\r\n    this.elements.messageBox.innerHTML = this.getAttribute(\"message\") || \"\";\r\n    this.elements.messageBox.classList.remove(\"--error\");\r\n  }\r\n  #dispatchOnChangeEvent() {\r\n    const event = new Event(\"change\",{bubbles:true,cancelable:true});\r\n    this.dispatchEvent(event);\r\n    return event;\r\n  }\r\n  #setSelectedOptionDom(value: TOption) {\r\n    //when user select option or value changed in any condition we set selected option DOM\r\n    this.elements.selectedValueWrapper.innerHTML = \"\";\r\n    //if value was null or undefined it remain empty\r\n    if (value !== null && value !== undefined) {\r\n      const selectedOptionDom = this.#createSelectedValueDom(value);\r\n      this.elements.selectedValueWrapper.appendChild(selectedOptionDom);\r\n    }\r\n  }\r\n  #createSelectedValueDom(value: TOption) {\r\n    if (typeof this.callbacks.getSelectedValueDOM == \"function\") {\r\n      return this.callbacks.getSelectedValueDOM(value);\r\n    } else {\r\n      return this.#createDefaultSelectedValueDom(value);\r\n    }\r\n  }\r\n  #createDefaultSelectedValueDom(value: TOption) {\r\n    const valueText = this.#getOptionTitle(value);\r\n    const selectedOptionDom = document.createElement(\"div\");\r\n    selectedOptionDom.classList.add(\"selected-value\");\r\n    selectedOptionDom.innerHTML = valueText;\r\n    return selectedOptionDom;\r\n  }\r\n  #getOptionValue(option: TOption):TValue{\r\n    if (this.callbacks.getOptionValue && typeof this.callbacks.getOptionValue !== \"function\") {\r\n      console.error(\"getOptionValue callback is not a function\");\r\n    }\r\n    try {\r\n      if(typeof this.callbacks.getOptionValue == \"function\"){\r\n        return this.callbacks.getOptionValue(option);\r\n      }else{\r\n        return option as unknown as TValue;\r\n      }\r\n    } catch (e) {\r\n      console.error(\r\n        `Invalid getOptionValue callback Result, must be a function that returns the value of an option`,\r\n        option\r\n      );\r\n    }\r\n  }\r\n  #getOptionTitle(option: TOption): string {\r\n    if (typeof this.callbacks.getOptionTitle !== \"function\") {\r\n      console.error(\"getOptionTitle callback is not a function\");\r\n    }\r\n    try {\r\n      return this.callbacks.getOptionTitle(option);\r\n    } catch (e) {\r\n      console.error(\r\n        `Invalid getOptionTitle callback Result, must be a function that returns the value of an option`,\r\n        option\r\n      );\r\n    }\r\n    return \"\";\r\n  }\r\n  #getInsideValidation(){\r\n    const ValidationList:ValidationItem<ValidationValue<TOption,TValue>>[] = [];\r\n    if(this.required){\r\n      const label = this.getAttribute(\"label\") || \"\";\r\n      const message = `${label} حتما باید انتخاب شود`;\r\n      ValidationList.push({\r\n        validator:({selectedOption})=>{\r\n          return selectedOption !== null && selectedOption !== undefined;\r\n        },\r\n        message:message,\r\n        stateType:\"valueMissing\"\r\n      });\r\n    }\r\n    return ValidationList;\r\n  }\r\n  //\r\n  #checkValidity(showError: boolean) {\r\n    if (!this.isAutoValidationDisabled) {\r\n      return this.#validation.checkValidity({showError});\r\n    }\r\n  }\r\n  /**\r\n * @public\r\n * @description this method used to check for validity but doesn't show error to user and just return the result\r\n * this method used by #internal of component\r\n */\r\n  checkValidity(): boolean {\r\n    const validationResult = this.#validation.checkValiditySync({showError:false});\r\n    if (!validationResult.isAllValid) {\r\n      const event = new CustomEvent('invalid');\r\n      this.dispatchEvent(event);\r\n    }\r\n    return validationResult.isAllValid;\r\n  }\r\n  /**\r\n  * @public\r\n * @description this method used to check for validity and show error to user\r\n */\r\n  reportValidity(): boolean {\r\n    const validationResult = this.#validation.checkValiditySync({showError:true});\r\n    if (!validationResult.isAllValid) {\r\n      const event = new CustomEvent('invalid');\r\n      this.dispatchEvent(event);\r\n    }\r\n    return validationResult.isAllValid;\r\n  }\r\n  /**\r\n   * @description this method called on every checkValidity calls and update validation result of #internal\r\n   */\r\n  #setValidationResult(result: ValidationResult<ValidationValue<TOption,TValue>>) {\r\n    if (result.isAllValid) {\r\n      this.#internals?.setValidity({}, '');\r\n    } else {\r\n      const states: ValidityStateFlags = {};\r\n      let message = \"\";\r\n      result.validationList.forEach((res) => {\r\n        if (!res.isValid) {\r\n          if (res.validation.stateType) {\r\n            states[res.validation.stateType] = true;\r\n          }else{\r\n            states[\"customError\"] = true;\r\n          }\r\n          if (message == '') { message = res.message; }\r\n\r\n        }\r\n      });\r\n      this.#internals?.setValidity(states, message);\r\n    }\r\n  }\r\n  get validationMessage(){\r\n    return this.#internals?.validationMessage || this.#validation.resultSummary.message;\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-select\");\r\nif (myElementNotExists) {\r\n  //prevent duplicate registering\r\n  window.customElements.define(\"jb-select\", JBSelectWebComponent);\r\n}\r\n","export const isMobile = ()=>{\r\n  return /Mobi/i.test(window.navigator.userAgent);\r\n};"],"names":["JBSelectWebComponent","HTMLElement","formAssociated","value","__classPrivateFieldGet","this","_JBSelectWebComponent_value","_JBSelectWebComponent_instances","_JBSelectWebComponent_getOptionValue","call","_JBSelectWebComponent_setValueFromOutside","textValue","_JBSelectWebComponent_textValue","__classPrivateFieldSet","elements","input","_JBSelectWebComponent_updateOptionList","selectedOptionTitle","_JBSelectWebComponent_getOptionTitle","optionList","_JBSelectWebComponent_optionList","Array","isArray","displayOptionList","_JBSelectWebComponent_filterOptionList","_JBSelectWebComponent_setValueOnOptionListChanged","console","error","placeholder","_JBSelectWebComponent_placeholder","undefined","searchPlaceholder","_JBSelectWebComponent_searchPlaceholder","_JBSelectWebComponent_displayOptionList","length","emptyListPlaceholder","classList","add","remove","_JBSelectWebComponent_updateOptionListDOM","isMobileDevice","test","window","navigator","userAgent","isOpen","componentWrapper","contains","validation","_JBSelectWebComponent_validation","disabled","_JBSelectWebComponent_disabled","states","delete","required","_JBSelectWebComponent_required","checkValiditySync","showError","isAutoValidationDisabled","getAttribute","name","isDirty","initialValue","constructor","super","set","_JBSelectWebComponent_notFoundedValue","callbacks","getOptionTitle","option","toString","getOptionValue","getOptionDOM","getSelectedValueDOM","ValidationHelper","clearValidationError","bind","showValidationError","getValue","_JBSelectWebComponent_ValidationValue_get","getValidations","_JBSelectWebComponent_getInsideValidation","getValueString","setValidationResult","_JBSelectWebComponent_setValidationResult","_JBSelectWebComponent_internals","attachInternals","_JBSelectWebComponent_initWebComponent","_JBSelectWebComponent_initProp","connectedCallback","_JBSelectWebComponent_callOnLoadEvent","_JBSelectWebComponent_callOnInitEvent","observedAttributes","attributeChangedCallback","oldValue","newValue","focus","_JBSelectWebComponent_showOptionList","blur","_JBSelectWebComponent_handleSelectedValueDisplay","_JBSelectWebComponent_hideOptionList","checkValidity","message","messageBox","innerHTML","validationResult","isAllValid","event","CustomEvent","dispatchEvent","reportValidity","validationMessage","resultSummary","inputtedText","selectedOption","bubbles","composed","shadowRoot","attachShadow","mode","delegatesFocus","element","document","createElement","appendChild","content","cloneNode","querySelector","selectedValueWrapper","optionListWrapper","arrowIcon","label","wrapper","text","_JBSelectWebComponent_registerEventListener","addEventListener","e","_JBSelectWebComponent_onInputChange","_JBSelectWebComponent_onInputInput","_JBSelectWebComponent_onAttributeChange","matchedOption","find","_JBSelectWebComponent_setValue","_JBSelectWebComponent_setSelectedOptionDom","_JBSelectWebComponent_onArrowKeyClick","eventOptions","altKey","cancelable","code","ctrlKey","detail","isComposing","key","location","metaKey","view","repeat","shiftKey","KeyboardEvent","target","_JBSelectWebComponent_dispatchInputEvent","InputEvent","data","dataTransfer","inputType","targetRanges","getTargetRanges","inputText","_JBSelectWebComponent_triggerOnInputKeyup","inputValue","charCode","keyCode","_JBSelectWebComponent_onInputFocus","focusedElement","relatedTarget","filterText","optionDomList","forEach","item","optionDOM","_JBSelectWebComponent_createOptionDOM","push","optionElement","isSelected","_JBSelectWebComponent_onOptionClicked","_JBSelectWebComponent_createDefaultOptionDom","prevValue","currentTarget","_JBSelectWebComponent_selectOption","defaultPrevented","preventDefault","_JBSelectWebComponent_checkValidity","filterString","filter","optionTitle","isString","includes","warn","title","_JBSelectWebComponent_dispatchOnChangeEvent","Event","selectedOptionDom","_JBSelectWebComponent_createSelectedValueDom","_JBSelectWebComponent_createDefaultSelectedValueDom","valueText","ValidationList","validator","stateType","result","setValidity","validationList","res","isValid","customElements","get","define"],"mappings":"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"}

package/dist/jb-select.js

@@ -1,2 +0,0 @@
-import{ValidationHelper as e}from"jb-validation";function t(e,t,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(e):i?i.value:t.get(e)}function n(e,t,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?s.call(e,n):s?s.value=n:t.set(e,n),n}"function"==typeof SuppressedError&&SuppressedError;var i,s,l,o,r,a,c,d,h,b,p,m,u,v,f,w,g,x,y,j,k,L,E,V,M,T,C,O,z,W,S,A,K,D,q,H,P,B,I,R,N,Z,F,U,Y,$,_,G,J,Q,X;class ee extends HTMLElement{static get formAssociated(){return!0}get value(){return t(this,s,"f")?t(this,i,"m",_).call(this,t(this,s,"f")):null}set value(e){t(this,i,"m",k).call(this,e)}get textValue(){return t(this,l,"f")}set textValue(e){n(this,l,e,"f"),this.elements.input.value=e,t(this,i,"m",H).call(this,e)}get selectedOptionTitle(){return this.value?t(this,i,"m",G).call(this,t(this,s,"f")):""}get optionList(){return t(this,r,"f")||[]}set optionList(e){Array.isArray(e)?(n(this,r,e,"f"),this.displayOptionList=t(this,i,"m",Z).call(this,this.textValue),t(this,i,"m",j).call(this)):console.error("your provided option list to jb-select is not a array. you must provide array value",{value:e})}get placeholder(){return t(this,c,"f")}set placeholder(e){n(this,c,e,"f"),null!==this.value&&void 0!==this.value?this.elements.input.placeholder="":this.elements.input.placeholder=e}get searchPlaceholder(){return t(this,d,"f")}set searchPlaceholder(e){n(this,d,e,"f")}get displayOptionList(){return t(this,a,"f")}set displayOptionList(e){Array.isArray(e)&&0==e.length?this.elements.emptyListPlaceholder.classList.add("--show"):Array.isArray(e)&&this.elements.emptyListPlaceholder.classList.remove("--show"),n(this,a,e,"f"),t(this,i,"m",P).call(this)}get isMobileDevice(){return/Mobi/i.test(window.navigator.userAgent)}get isOpen(){return this.elements.componentWrapper.classList.contains("--focused")}get validation(){return t(this,b,"f")}get disabled(){return t(this,p,"f")}set disabled(e){n(this,p,e,"f"),this.elements.input.disabled=e,e?t(this,u,"f").states?.add("disabled"):t(this,u,"f").states?.delete("disabled")}set required(e){n(this,m,e,"f"),t(this,b,"f").checkValiditySync({showError:!1})}get required(){return t(this,m,"f")}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get name(){return this.getAttribute("name")||""}get isDirty(){return this.value!==this.initialValue}constructor(){super(),i.add(this),s.set(this,void 0),l.set(this,""),o.set(this,null),this.callbacks={getOptionTitle:e=>"string"==typeof e||"number"==typeof e?e.toString():(console.error("title must be string please provide a valid getOptionTitle","provided title:",e),"NOT SUPPORTED TITLE TYPE"),getOptionValue:null,getOptionDOM:null,getSelectedValueDOM:null},r.set(this,[]),a.set(this,[]),c.set(this,""),d.set(this,"search"),b.set(this,new e({clearValidationError:this.clearValidationError.bind(this),showValidationError:this.showValidationError.bind(this),getValue:()=>t(this,i,"a",h),getValidations:t(this,i,"m",J).bind(this),getValueString:()=>t(this,l,"f"),setValidationResult:t(this,i,"m",X).bind(this)})),p.set(this,!1),m.set(this,!1),u.set(this,void 0),this.initialValue=null,"function"==typeof this.attachInternals&&n(this,u,this.attachInternals(),"f"),t(this,i,"m",w).call(this),t(this,i,"m",x).call(this)}connectedCallback(){t(this,i,"m",f).call(this),t(this,i,"m",v).call(this)}static get observedAttributes(){return["label","message","value","required","placeholder","search-placeholder"]}attributeChangedCallback(e,n,s){t(this,i,"m",y).call(this,e,s)}focus(){this.elements.input.focus(),t(this,i,"m",D).call(this),this.elements.componentWrapper.classList.add("--focused"),this.isMobileDevice&&(this.elements.input.placeholder=t(this,d,"f"))}blur(){this.elements.componentWrapper.classList.remove("--focused"),this.textValue="",t(this,i,"m",z).call(this,""),t(this,i,"m",q).call(this),t(this,b,"f").checkValidity({showError:!0}),this.isMobileDevice&&(this.value?this.elements.input.placeholder="":this.elements.input.placeholder=this.placeholder),this.elements.input.blur()}showValidationError(e){const t="string"==typeof e?e:e.message;this.elements.messageBox.innerHTML=t,this.elements.messageBox.classList.add("--error")}clearValidationError(){this.elements.messageBox.innerHTML=this.getAttribute("message")||"",this.elements.messageBox.classList.remove("--error")}checkValidity(){const e=t(this,b,"f").checkValiditySync({showError:!1});if(!e.isAllValid){const e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}reportValidity(){const e=t(this,b,"f").checkValiditySync({showError:!0});if(!e.isAllValid){const e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}get validationMessage(){return t(this,u,"f")?.validationMessage||t(this,b,"f").resultSummary.message}}s=new WeakMap,l=new WeakMap,o=new WeakMap,r=new WeakMap,a=new WeakMap,c=new WeakMap,d=new WeakMap,b=new WeakMap,p=new WeakMap,m=new WeakMap,u=new WeakMap,i=new WeakSet,h=function(){return{inputtedText:t(this,l,"f"),selectedOption:t(this,s,"f"),value:this.value}},v=function(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)},f=function(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)},w=function(){const e=this.attachShadow({mode:"open",delegatesFocus:!0}),n=document.createElement("template");n.innerHTML='<style>:host {\n  --p-middle-div-height: var(--jb-select-middle-div-height, 0px);\n  --p-p-color: #1e2832;\n  --p-border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));\n  --p-base-z-index: 1;\n  --p-mobile-modal-z-index: 900;\n  --p-mobile-modal-height:var(--jb-select-mobile-modal-height, 100vh);\n}\n\n.jb-select-web-component {\n  width: var(--jb-select-width, 100%);\n  margin: var(--jb-select-margin, 0 0);\n  position: relative;\n  box-sizing: border-box;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused {\n    position: fixed;\n    bottom: 0;\n    top: initial;\n    left: 0;\n    background-color: var(--jb-select-overlay-bgcolor, rgba(0, 0, 0, 0.5333333333));\n    width: 100vw;\n    height: var(--p-mobile-modal-height);\n    border-radius: var(--jb-select-mobile-modal-border-radius, 0) var(--jb-select-mobile-modal-border-radius, 0) 0 0;\n    margin: 0;\n    padding: 16px 8px;\n    z-index: var(--p-mobile-modal-z-index);\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .select-box {\n    height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));\n    background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);\n    border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));\n    border-color: var(--jb-select-mobile-search-border-color, var(--jb-select-border-color, #f7f6f6));\n    border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));\n    border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--jb-select-border-color, #f7f6f6)));\n    border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 16px));\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .select-box .front-box .arrow-icon {\n    display: none;\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .select-box .selected-value-wrapper {\n    opacity: 0;\n    transition: none;\n  }\n}\n.jb-select-web-component.--focused .middle-divider {\n  display: block;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .middle-divider {\n    margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0);\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .select-list-wrapper {\n    position: initial;\n    margin: var(--jb-select-mobile-item-list-margin, 16px 0);\n    border-radius: var(--jb-select-mobile-item-list-border-radius, var(--jb-select-border-radius, 16px));\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .label-wrapper {\n    display: flex;\n  }\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .label-wrapper label {\n    color: #fff;\n    font-size: 1.5em;\n    display: flex;\n    align-items: center;\n  }\n}\n.jb-select-web-component.--focused .label-wrapper .close-button {\n  display: none;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--focused .label-wrapper .close-button {\n    display: flex;\n    width: 48px;\n    height: 48px;\n    justify-content: center;\n    align-items: center;\n    color: #fff;\n  }\n  .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-bg {\n    opacity: var(--jb-select-close-bg-opacity, 0.4);\n    fill: var(--jb-select-close-bg-color, #1f1735);\n  }\n  .jb-select-web-component.--focused .label-wrapper .close-button .close-btn-svg-path {\n    fill: var(--jb-select-close-x-color, #fff);\n  }\n}\n.jb-select-web-component.--has-value .select-box {\n  border-color: var(--jb-select-border-color-selected, #c3ff14);\n  background-color: var(--jb-select-bgcolor-selected, #f7f6f6);\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component.--has-value .select-box:focus-within {\n    background-color: var(--jb-select-mobile-input-bgcolor, #f7f6f6);\n  }\n}\n.jb-select-web-component .label-wrapper label {\n  width: 100%;\n  margin: 4px 0px;\n  display: block;\n  font-size: var(--jb-select-label-font-size, 0.8em);\n  font-weight: var(--jb-select-label-font-weight, normal);\n  color: var(--jb-select-label-color, #1f1735);\n}\n.jb-select-web-component .label-wrapper label.--hide {\n  display: none;\n}\n.jb-select-web-component .label-wrapper .close-button {\n  display: none;\n}\n.jb-select-web-component .select-box {\n  width: 100%;\n  box-sizing: border-box;\n  height: var(--jb-select-height, 2.5rem);\n  border: solid var(--jb-select-border-width, 1px) var(--jb-select-border-color, #f7f6f6);\n  border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, #f7f6f6);\n  border-radius: var(--jb-select-border-radius, 1rem);\n  background-color: var(--jb-select-bgcolor, #f7f6f6);\n  margin: var(--jb-select-select-box-margin, 4px 0px 0px 0px);\n  overflow: hidden;\n  display: flex;\n  padding-inline-end: var(--jb-select-box-padding-end, 1rem);\n  gap: 0.5rem;\n  align-items: center;\n}\n.jb-select-web-component .select-box:focus-within {\n  border-color: var(--jb-select-border-color, var(--p-p-color));\n  border-bottom-color: var(--jb-select-border-color, var(--p-p-color));\n  border-radius: var(--jb-select-border-radius, 1rem) var(--jb-select-border-radius, 1rem) 0 0;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component .select-box:focus-within {\n    border-radius: var(--jb-select-mobile-search-border-radius, var(--jb-select-border-radius, 1rem));\n  }\n}\n.jb-select-web-component .select-box .start-section {\n  height: 100%;\n  width: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.jb-select-web-component .select-box .middle-section {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  flex: 1;\n}\n.jb-select-web-component .select-box .middle-section .selected-value-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  overflow: hidden;\n  z-index: 1;\n}\n.jb-select-web-component .select-box .middle-section .selected-value-wrapper.--search-typed {\n  opacity: 0;\n}\n.jb-select-web-component .select-box .middle-section .selected-value-wrapper .selected-value {\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: 2px 12px 0 12px;\n  display: block;\n  font-family: inherit;\n  font-size: var(--jb-select-selected-value-font-size, 1.1em);\n  color: var(--jb-select-selected-value-color, #1f1735);\n  margin: 0;\n  border-radius: 0;\n  display: flex;\n  align-items: center;\n}\n.jb-select-web-component .select-box .middle-section .front-box {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  overflow: hidden;\n  z-index: 2;\n}\n.jb-select-web-component .select-box .middle-section .front-box input {\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: 2px 12px 0 12px;\n  display: block;\n  font-family: inherit;\n  font-size: var(--jb-select-value-font-size, 1.1rem);\n  color: var(--jb-select-input-color, #1f1735);\n  margin: 0;\n  border-radius: 0;\n}\n.jb-select-web-component .select-box .middle-section .front-box input:focus {\n  outline: none;\n}\n.jb-select-web-component .select-box .middle-section .front-box input::placeholder {\n  color: var(--jb-select-placeholder-color, initial);\n  font-size: var(--jb-select-placeholder-font-size, 1.1em);\n}\n.jb-select-web-component .select-box .end-section .arrow-icon {\n  margin: var(--jb-select-arrow-icon-margin, 0 0 0 0);\n}\n.jb-select-web-component .select-box:focus-within .selected-value {\n  opacity: 0.7;\n  transition: all 0.3s ease;\n}\n.jb-select-web-component .middle-divider {\n  display: none;\n  position: relative;\n  z-index: calc(var(--p-base-z-index) + 3);\n  width: 100%;\n  height: var(--p-middle-div-height);\n  background-color: var(--jb-select-middle-div-color, var(--p-p-color));\n  margin: var(--jb-select-middle-div-margin, calc(-1 * var(--p-border-bottom-width)) 0);\n  border-radius: var(--jb-select-middle-div-radius, 0px);\n}\n.jb-select-web-component .message-box {\n  font-size: var(--jb-select-message-font-size, 0.7em);\n  font-weight: var(--jb-select-message-font-weight, normal);\n  padding: 4px 8px;\n  color: var(--jb-select-message-color, #929292);\n}\n.jb-select-web-component .message-box:empty {\n  padding: 0;\n}\n.jb-select-web-component .message-box.--error {\n  color: red;\n}\n.jb-select-web-component .select-list-wrapper {\n  display: none;\n  position: absolute;\n  margin: calc(-1 * var(--p-border-bottom-width)) 0;\n  height: auto;\n  overflow: hidden;\n  width: 100%;\n  background-color: var(--jb-select-bgcolor, #f7f6f6);\n  border-radius: 0 0 var(--jb-select-border-radius, 16px) var(--jb-select-border-radius, 16px);\n  border: solid var(--jb-select-list-border-width, 1px) var(--jb-select-border-color, var(--p-p-color));\n  border-top: none;\n  border-bottom: solid var(--p-border-bottom-width) var(--jb-select-border-color, var(--p-p-color));\n  box-shadow: var(--jb-select-list-box-shadow);\n  box-sizing: border-box;\n  z-index: calc(var(--p-base-z-index) + 2);\n}\n.jb-select-web-component .select-list-wrapper.--show {\n  display: block;\n}\n.jb-select-web-component .select-list-wrapper .select-list {\n  width: 100%;\n  max-height: var(--jb-select-list-max-height, 400px);\n  overflow-y: auto;\n  padding: var(--jb-select-list-padding, 16px 0);\n}\n.jb-select-web-component .select-list-wrapper .select-list:empty {\n  padding: 0;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-select-web-component .select-list-wrapper .select-list {\n    max-height: calc(var(--p-mobile-modal-height) - 240px);\n  }\n}\n.jb-select-web-component .select-list-wrapper .select-list .select-option {\n  min-height: 36px;\n  padding: 4px 16px;\n  display: flex;\n  align-items: center;\n  font-size: 0.9em;\n  color: var(--jb-select-option-color, inherit);\n  background-color: var(--jb-select-option-background-color, transparent);\n}\n.jb-select-web-component .select-list-wrapper .select-list .select-option:hover {\n  background-color: var(--jb-select-option-background-color-hover, #1073db);\n  color: var(--jb-select-option-color-hover, #fff);\n  cursor: pointer;\n}\n.jb-select-web-component .select-list-wrapper .select-list .select-option.--selected-option {\n  font-weight: 900;\n}\n.jb-select-web-component .select-list-wrapper .select-list::-webkit-scrollbar {\n  width: 9px;\n  background-color: transparent;\n}\n.jb-select-web-component .select-list-wrapper .select-list::-webkit-scrollbar-thumb {\n  background-color: var(--jb-select-list-scroll-color, #c3c3c3);\n  border-radius: var(--jb-select-list-scroll-border-radius, 4px);\n}\n.jb-select-web-component .select-list-wrapper .empty-list-placeholder {\n  display: none;\n  text-align: center;\n  color: #838383;\n  font-style: italic;\n  padding: 8px 0;\n}\n.jb-select-web-component .select-list-wrapper .empty-list-placeholder.--show {\n  display: block;\n}</style>\n<div class="jb-select-web-component">\r\n    <div class="label-wrapper">\r\n        <label class="--hide"><span class="label-value"></span></label>\r\n        \x3c!-- close button will be visible on mobile modal --\x3e\r\n        <div class="close-button">\r\n            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">\r\n                <path class="close-btn-svg-bg" opacity="0.4" d="M16.3399 1.9998H7.66988C4.27988 1.9998 1.99988 4.3798 1.99988 7.9198V16.0898C1.99988 19.6198 4.27988 21.9998 7.66988 21.9998H16.3399C19.7299 21.9998 21.9999 19.6198 21.9999 16.0898V7.9198C21.9999 4.3798 19.7299 1.9998 16.3399 1.9998Z"/>\r\n                <path class="close-btn-svg-path" d="M15.0156 13.7703L13.2366 11.9923L15.0146 10.2143C15.3566 9.8733 15.3566 9.3183 15.0146 8.9773C14.6726 8.6333 14.1196 8.6343 13.7776 8.9763L11.9986 10.7543L10.2196 8.9743C9.87758 8.6323 9.32358 8.6343 8.98158 8.9743C8.64058 9.3163 8.64058 9.8713 8.98158 10.2123L10.7616 11.9923L8.98558 13.7673C8.64358 14.1093 8.64358 14.6643 8.98558 15.0043C9.15658 15.1763 9.37958 15.2613 9.60358 15.2613C9.82858 15.2613 10.0516 15.1763 10.2226 15.0053L11.9986 13.2293L13.7786 15.0083C13.9496 15.1793 14.1726 15.2643 14.3966 15.2643C14.6206 15.2643 14.8446 15.1783 15.0156 15.0083C15.3576 14.6663 15.3576 14.1123 15.0156 13.7703Z" fill="#200E32"/>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n    <div class="select-box">\r\n        <div class="start-section">\r\n            <slot name="start-section"></slot>\r\n        </div>\r\n        <div class="middle-section">\r\n            <div class="selected-value-wrapper"></div>\r\n            <div class="front-box">\r\n                <input class="input">\r\n\r\n            </div>\r\n        </div>\r\n        <div class="end-section">\r\n            <div class="arrow-icon" tabindex="-1">\r\n                <slot name="select-arrow-icon">\r\n                    <svg width="8" height="8" id="Layer_1" x="0px" y="0px" viewBox="0 0 494.1 371.1" style="enable-background:new 0 0 494.1 371.1;" xml:space="preserve">\r\n                        <path d="M293,343.8L480.9,69.3c8.7-12.7,13.3-25.4,13.3-36.1c0-20.5-16.5-33.2-44-33.2H44C16.4,0,0,12.7,0,33.2  c0,10.6,4.6,23.2,13.3,35.9l187.9,274.6c12.1,17.7,28.4,27.4,45.9,27.4C264.6,371.1,280.9,361.4,293,343.8z"/>\r\n                    </svg>\r\n                </slot>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class="middle-divider">\r\n        \x3c!-- middle line between input box and list (hidden by default but user may need it sometimes) --\x3e\r\n    </div>\r\n    <div class="select-list-wrapper">\r\n        <div class="select-list" tabindex="-1">\r\n\r\n        </div>\r\n        <div class="empty-list-placeholder">\r\n            <slot name="empty-list-message">no item available</slot>\r\n        </div>\r\n    </div>\r\n    <div class="message-box"></div>\r\n</div>',e.appendChild(n.content.cloneNode(!0)),this.elements={input:e.querySelector(".select-box input"),componentWrapper:e.querySelector(".jb-select-web-component"),selectedValueWrapper:e.querySelector(".selected-value-wrapper"),messageBox:e.querySelector(".message-box"),optionList:e.querySelector(".select-list"),optionListWrapper:e.querySelector(".select-list-wrapper"),arrowIcon:e.querySelector(".arrow-icon"),label:{wrapper:e.querySelector("label"),text:e.querySelector("label .label-value")},emptyListPlaceholder:e.querySelector(".empty-list-placeholder")},t(this,i,"m",g).call(this)},g=function(){this.elements.input.addEventListener("change",(e=>{t(this,i,"m",S).call(this,e)})),this.elements.input.addEventListener("keypress",t(this,i,"m",V).bind(this)),this.elements.input.addEventListener("keyup",t(this,i,"m",O).bind(this)),this.elements.input.addEventListener("beforeinput",t(this,i,"m",M).bind(this)),this.elements.input.addEventListener("input",(e=>{t(this,i,"m",T).call(this,e)})),this.elements.input.addEventListener("focus",t(this,i,"m",A).bind(this)),this.elements.input.addEventListener("blur",t(this,i,"m",K).bind(this)),this.elements.arrowIcon.addEventListener("click",t(this,i,"m",E).bind(this))},x=function(){this.textValue="",this.value=this.getAttribute("value")||null},y=function(e,n){switch(e){case"label":this.elements.label.text.innerHTML=n,null==n||null==n||""==n?this.elements.label.wrapper.classList.add("--hide"):this.elements.label.wrapper.classList.remove("--hide");break;case"message":this.elements.messageBox.innerHTML=n;break;case"value":t(this,i,"m",k).call(this,n);break;case"required":this.required=""===n||"true"==n||"True"==n;break;case"placeholder":this.placeholder=n;break;case"search-placeholder":this.searchPlaceholder=n}},j=function(){if(t(this,o,"f")){t(this,i,"m",k).call(this,t(this,o,"f"))&&n(this,o,null,"f")}else this.value&&t(this,i,"m",k).call(this,this.value)},k=function(e){const s=this.optionList.find((n=>{if(t(this,i,"m",_).call(this,n)==e)return n}));return s||null==e?(t(this,i,"m",L).call(this,s),!0):(n(this,o,e,"f"),!1)},L=function(e){n(this,o,null,"f"),n(this,s,e,"f"),null==e?(this.textValue="",t(this,i,"m",U).call(this,null),this.elements.componentWrapper.classList.remove("--has-value"),this.isMobileDevice&&this.isOpen||(this.elements.input.placeholder=this.placeholder)):(this.textValue="",t(this,i,"m",U).call(this,e),this.elements.componentWrapper.classList.add("--has-value"),this.isMobileDevice&&this.isOpen||(this.elements.input.placeholder="")),t(this,i,"m",H).call(this,"")},E=function(){this.isOpen?this.blur():this.focus()},V=function(e){const t={altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,composed:e.composed,ctrlKey:e.ctrlKey,detail:e.detail,isComposing:e.isComposing,key:e.key,location:e.location,metaKey:e.metaKey,view:e.view,repeat:e.repeat,shiftKey:e.shiftKey},n=new KeyboardEvent("keypress",t);this.dispatchEvent(n)},M=function(e){},T=function(e){const n=e.target.value;this.textValue=n,t(this,i,"m",z).call(this,n),t(this,b,"f").checkValidity({showError:!1}),t(this,i,"m",C).call(this,e)},C=function(e){const t=new InputEvent("input",{bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed,data:e.data,dataTransfer:e.dataTransfer,detail:e.detail,inputType:e.inputType,isComposing:e.isComposing,targetRanges:e.getTargetRanges(),view:e.view});this.dispatchEvent(t)},O=function(e){const n=e.target.value;"Backspace"!==e.key&&"Delete"!==e.key||t(this,i,"m",z).call(this,n),t(this,i,"m",W).call(this,e)},z=function(e){""!==e?this.elements.selectedValueWrapper.classList.add("--search-typed"):this.elements.selectedValueWrapper.classList.remove("--search-typed")},W=function(e){const t=new KeyboardEvent("keyup",{altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,ctrlKey:e.ctrlKey,detail:e.detail,key:e.key,shiftKey:e.shiftKey,charCode:e.charCode,location:e.location,composed:e.composed,isComposing:e.isComposing,metaKey:e.metaKey,repeat:e.repeat,keyCode:e.keyCode,view:e.view});this.dispatchEvent(t)},S=function(e){const t=e.target.value;n(this,l,t,"f")},A=function(){this.focus()},K=function(e){const t=e.relatedTarget;this.elements.optionListWrapper.contains(t)||this.elements.arrowIcon.contains(t)||this.blur()},D=function(){this.elements.optionListWrapper.classList.add("--show")},q=function(){this.elements.optionListWrapper.classList.remove("--show")},H=function(e){this.displayOptionList=t(this,i,"m",Z).call(this,e)},P=function(){const e=[];this.displayOptionList.forEach((n=>{const s=t(this,i,"m",B).call(this,n);e.push(s)})),this.elements.optionList.innerHTML="",e.forEach((e=>{this.elements.optionList.appendChild(e)}))},B=function(e){let n=null;const l=t(this,i,"m",_).call(this,t(this,s,"f"))==t(this,i,"m",_).call(this,e);return n="function"==typeof this.callbacks.getOptionDOM?this.callbacks.getOptionDOM(e,t(this,i,"m",R).bind(this),l):t(this,i,"m",I).call(this,e,l),n.value=e,n},I=function(e,n){const s=document.createElement("div");return s.classList.add("select-option"),n&&s.classList.add("--selected-option"),s.innerHTML=t(this,i,"m",G).call(this,e),s.addEventListener("click",t(this,i,"m",R).bind(this)),s},R=function(e){const n=t(this,s,"f"),l=e.currentTarget.value;t(this,i,"m",N).call(this,l),this.blur();t(this,i,"m",F).call(this).defaultPrevented&&(e.preventDefault(),t(this,i,"m",N).call(this,n))},N=function(e){t(this,i,"m",L).call(this,e),t(this,i,"m",Q).call(this,!0)},Z=function(e){const n=[];return this.optionList.filter((s=>{const l=t(this,i,"m",G).call(this,s),o="string"==typeof l;o&&l.includes(e)&&n.push(s),o||console.warn("the provided values for optionsList is not of type string.",{option:s,title:l})})),n},F=function(){const e=new Event("change",{bubbles:!0,cancelable:!0});return this.dispatchEvent(e),e},U=function(e){if(this.elements.selectedValueWrapper.innerHTML="",null!=e){const n=t(this,i,"m",Y).call(this,e);this.elements.selectedValueWrapper.appendChild(n)}},Y=function(e){return"function"==typeof this.callbacks.getSelectedValueDOM?this.callbacks.getSelectedValueDOM(e):t(this,i,"m",$).call(this,e)},$=function(e){const n=t(this,i,"m",G).call(this,e),s=document.createElement("div");return s.classList.add("selected-value"),s.innerHTML=n,s},_=function(e){this.callbacks.getOptionValue&&"function"!=typeof this.callbacks.getOptionValue&&console.error("getOptionValue callback is not a function");try{return"function"==typeof this.callbacks.getOptionValue?this.callbacks.getOptionValue(e):e}catch(t){console.error("Invalid getOptionValue callback Result, must be a function that returns the value of an option",e)}},G=function(e){"function"!=typeof this.callbacks.getOptionTitle&&console.error("getOptionTitle callback is not a function");try{return this.callbacks.getOptionTitle(e)}catch(t){console.error("Invalid getOptionTitle callback Result, must be a function that returns the value of an option",e)}return""},J=function(){const e=[];if(this.required){const t=`${this.getAttribute("label")||""} حتما باید انتخاب شود`;e.push({validator:({selectedOption:e})=>null!=e,message:t,stateType:"valueMissing"})}return e},Q=function(e){if(!this.isAutoValidationDisabled)return t(this,b,"f").checkValidity({showError:e})},X=function(e){if(e.isAllValid)t(this,u,"f")?.setValidity({},"");else{const n={};let i="";e.validationList.forEach((e=>{e.isValid||(e.validation.stateType?n[e.validation.stateType]=!0:n.customError=!0,""==i&&(i=e.message))})),t(this,u,"f")?.setValidity(n,i)}};!customElements.get("jb-select")&&window.customElements.define("jb-select",ee);export{ee as JBSelectWebComponent};
-//# sourceMappingURL=jb-select.js.map

package/dist/jb-select.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"jb-select.js","sources":["../lib/jb-select.ts","../../../common/scripts/device-detection.ts"],"sourcesContent":["import HTML from \"./jb-select.html\";\r\nimport CSS from \"./jb-select.scss\";\r\nimport {\r\n  JBSelectCallbacks,\r\n  JBSelectElements,\r\n  JBSelectOptionElement,\r\n  ValidationValue,\r\n} from \"./types\";\r\nimport {ShowValidationErrorInput, ValidationHelper, type ValidationItem, type ValidationResult, type WithValidation} from \"jb-validation\";\r\nimport { isMobile } from \"../../../common/scripts/device-detection\";\r\nimport {JBFormInputStandards} from 'jb-form';\r\n//TOption is the type of option, TValue is the type of value we extract from option\r\nexport class JBSelectWebComponent<TOption = any, TValue = TOption> extends HTMLElement implements WithValidation<ValidationValue<TOption,TValue>>, JBFormInputStandards<TValue> {\r\n  static get formAssociated() {\r\n    return true;\r\n  }\r\n  // we keep selected option here by option but we return TValue when user demand\r\n  #value: TOption;\r\n  #textValue = \"\";\r\n  // if user set value and current option list is not contain the option.\r\n  // we hold it in _notFoundedValue and select value when option value get updated\r\n  #notFoundedValue: TValue = null;\r\n  callbacks: JBSelectCallbacks<TOption,TValue> = {\r\n    getOptionTitle: (option) => {\r\n      if(typeof option == \"string\" || typeof option == \"number\"){\r\n        return option.toString();\r\n      }else{\r\n        console.error(\"title must be string please provide a valid getOptionTitle\",\"provided title:\",option);\r\n        return \"NOT SUPPORTED TITLE TYPE\";\r\n      }\r\n    },\r\n    getOptionValue: null,\r\n    getOptionDOM: null,\r\n    getSelectedValueDOM: null,\r\n  };\r\n  elements!: JBSelectElements;\r\n  get value():TValue{\r\n    if (this.#value) {\r\n      return this.#getOptionValue(this.#value);\r\n    } else {\r\n      return null;\r\n    }\r\n  }\r\n  set value(value:TValue) {\r\n    this.#setValueFromOutside(value);\r\n  }\r\n  get textValue() {\r\n    return this.#textValue;\r\n  }\r\n  set textValue(value) {\r\n    this.#textValue = value;\r\n    this.elements.input.value = value;\r\n    this.#updateOptionList(value);\r\n  }\r\n  get selectedOptionTitle() {\r\n    if (this.value) {\r\n      return this.#getOptionTitle(this.#value);\r\n    } else {\r\n      return \"\";\r\n    }\r\n  }\r\n  #optionList: TOption[] = [];\r\n  #displayOptionList: TOption[] = [];\r\n  get optionList() {\r\n    return this.#optionList || [];\r\n  }\r\n  set optionList(value) {\r\n    if (!Array.isArray(value)) {\r\n      console.error(\r\n        \"your provided option list to jb-select is not a array. you must provide array value\",\r\n        { value }\r\n      );\r\n      return;\r\n    }\r\n    this.#optionList = value;\r\n    //every time optionList get updated we set our value base on current option list we use _notFoundedValue in case of value provided to component before optionList\r\n    this.displayOptionList = this.#filterOptionList(this.textValue);\r\n    this.#setValueOnOptionListChanged();\r\n  }\r\n  #placeholder = \"\";\r\n  get placeholder() {\r\n    return this.#placeholder;\r\n  }\r\n  set placeholder(value: string) {\r\n    this.#placeholder = value;\r\n    if (this.value !== null && this.value !== undefined) {\r\n      this.elements.input.placeholder = \"\";\r\n    } else {\r\n      this.elements.input.placeholder = value;\r\n    }\r\n  }\r\n  //on mobile device when search modal open this will appear on search box\r\n  #searchPlaceholder = \"search\";\r\n  get searchPlaceholder() {\r\n    return this.#searchPlaceholder;\r\n  }\r\n  set searchPlaceholder(value) {\r\n    this.#searchPlaceholder = value;\r\n  }\r\n  get displayOptionList() {\r\n    return this.#displayOptionList;\r\n  }\r\n  set displayOptionList(value: TOption[]) {\r\n    if (Array.isArray(value) && value.length == 0) {\r\n      this.elements.emptyListPlaceholder.classList.add(\"--show\");\r\n    } else if (Array.isArray(value)) {\r\n      this.elements.emptyListPlaceholder.classList.remove(\"--show\");\r\n    }\r\n    this.#displayOptionList = value;\r\n    this.#updateOptionListDOM();\r\n  }\r\n  get isMobileDevice() {\r\n    return isMobile();\r\n  }\r\n  get isOpen() {\r\n    return this.elements.componentWrapper.classList.contains(\"--focused\");\r\n  }\r\n  // this value used by validation module to send to validation callbacks\r\n  get #ValidationValue():ValidationValue<TOption,TValue>{\r\n    return {\r\n      inputtedText:this.#textValue,\r\n      selectedOption:this.#value,\r\n      value:this.value\r\n    };\r\n  }\r\n  #validation = new ValidationHelper<ValidationValue<TOption,TValue>>({\r\n    clearValidationError:this.clearValidationError.bind(this),\r\n    showValidationError:this.showValidationError.bind(this),\r\n    getValue:()=>this.#ValidationValue,\r\n    getValidations:this.#getInsideValidation.bind(this),\r\n    getValueString:()=>this.#textValue,\r\n    setValidationResult:this.#setValidationResult.bind(this)\r\n  });\r\n  get validation(){\r\n    return this.#validation;\r\n  }\r\n  #disabled = false;\r\n  get disabled(){\r\n    return this.#disabled;\r\n  }\r\n  set disabled(value:boolean){\r\n    this.#disabled = value;\r\n    this.elements.input.disabled = value;\r\n    if(value){\r\n      //TODO: remove as any when typescript support\r\n      (this.#internals as any).states?.add(\"disabled\");\r\n    }else{\r\n      (this.#internals as any).states?.delete(\"disabled\");\r\n    }\r\n  }\r\n  #required = false;\r\n  set required(value:boolean){\r\n    this.#required = value;\r\n    this.#validation.checkValiditySync({showError:false});\r\n  }\r\n  get required() {\r\n    return this.#required;\r\n  }\r\n  #internals?: ElementInternals;\r\n  /**\r\n * @description will determine if component trigger jb-validation mechanism automatically on user event or it just let user-developer handle validation mechanism by himself\r\n */\r\n  get isAutoValidationDisabled(): boolean {\r\n    //currently we only support disable-validation in attribute and only in initiate time but later we can add support for change of this \r\n    return this.getAttribute('disable-auto-validation') === '' || this.getAttribute('disable-auto-validation') === 'true' ? true : false;\r\n  }\r\n  get name(){\r\n    return this.getAttribute('name') || '';\r\n  }\r\n  initialValue: TValue | null = null;\r\n  get isDirty(): boolean{\r\n    return this.value !== this.initialValue;\r\n  }\r\n  constructor() {\r\n    super();\r\n    if (typeof this.attachInternals == \"function\") {\r\n      //some browser dont support attachInternals\r\n      this.#internals = this.attachInternals();\r\n    }\r\n    this.#initWebComponent();\r\n    this.#initProp();\r\n  }\r\n  connectedCallback() {\r\n    // standard web component event that called when all of dom is binded\r\n    this.#callOnLoadEvent();\r\n    this.#callOnInitEvent();\r\n  }\r\n  #callOnInitEvent() {\r\n    const event = new CustomEvent(\"init\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  #callOnLoadEvent() {\r\n    const event = new CustomEvent(\"load\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  #initWebComponent() {\r\n    const shadowRoot = this.attachShadow({\r\n      mode: \"open\",\r\n      delegatesFocus:true,\r\n    });\r\n    const html = `<style>${CSS}</style>` + \"\\n\" + HTML;\r\n    const element = document.createElement(\"template\");\r\n    element.innerHTML = html;\r\n    shadowRoot.appendChild(element.content.cloneNode(true));\r\n    this.elements = {\r\n      input: shadowRoot.querySelector(\".select-box input\")!,\r\n      componentWrapper: shadowRoot.querySelector(\".jb-select-web-component\")!,\r\n      selectedValueWrapper: shadowRoot.querySelector(\r\n        \".selected-value-wrapper\"\r\n      )!,\r\n      messageBox: shadowRoot.querySelector(\".message-box\")!,\r\n      optionList: shadowRoot.querySelector(\".select-list\")!,\r\n      optionListWrapper: shadowRoot.querySelector(\".select-list-wrapper\")!,\r\n      arrowIcon: shadowRoot.querySelector(\".arrow-icon\")!,\r\n      label: {\r\n        wrapper: shadowRoot.querySelector(\"label\")!,\r\n        text: shadowRoot.querySelector(\"label .label-value\")!,\r\n      },\r\n      emptyListPlaceholder: shadowRoot.querySelector(\r\n        \".empty-list-placeholder\"\r\n      )!,\r\n    };\r\n    this.#registerEventListener();\r\n  }\r\n  #registerEventListener() {\r\n    this.elements.input.addEventListener(\"change\", (e:Event) => {\r\n      this.#onInputChange(e);\r\n    });\r\n    this.elements.input.addEventListener(\r\n      \"keypress\",\r\n      this.#onInputKeyPress.bind(this)\r\n    );\r\n    this.elements.input.addEventListener(\"keyup\", this.#onInputKeyup.bind(this));\r\n    this.elements.input.addEventListener(\r\n      \"beforeinput\",\r\n      this.#onInputBeforeInput.bind(this)\r\n    );\r\n    this.elements.input.addEventListener(\"input\", (e) => {\r\n      this.#onInputInput(e as unknown as InputEvent);\r\n    });\r\n    this.elements.input.addEventListener(\"focus\", this.#onInputFocus.bind(this));\r\n    this.elements.input.addEventListener(\"blur\", this.#onInputBlur.bind(this));\r\n    this.elements.arrowIcon.addEventListener(\r\n      \"click\",\r\n      this.#onArrowKeyClick.bind(this)\r\n    );\r\n  }\r\n  #initProp() {\r\n    this.textValue = \"\";\r\n    this.value = this.getAttribute(\"value\") as TValue || null ;\r\n  }\r\n  static get observedAttributes() {\r\n    return [\r\n      \"label\",\r\n      \"message\",\r\n      \"value\",\r\n      \"required\",\r\n      \"placeholder\",\r\n      \"search-placeholder\",\r\n    ];\r\n  }\r\n  attributeChangedCallback(name:string, oldValue:string, newValue:string) {\r\n    // do something when an attribute has changed\r\n    this.#onAttributeChange(name, newValue);\r\n  }\r\n  #onAttributeChange(name: string, value: string) {\r\n    switch (name) {\r\n      case \"label\":\r\n        this.elements.label.text.innerHTML = value;\r\n        if (value == null || value == undefined || value == \"\") {\r\n          this.elements.label.wrapper.classList.add(\"--hide\");\r\n        } else {\r\n          this.elements.label.wrapper.classList.remove(\"--hide\");\r\n        }\r\n        break;\r\n      case \"message\":\r\n        this.elements.messageBox.innerHTML = value;\r\n        break;\r\n      case \"value\":\r\n        this.#setValueFromOutside(value as TValue);\r\n        break;\r\n      case \"required\":\r\n        if (value === \"\" || value == \"true\" || value == \"True\") {\r\n          this.required = true;\r\n        } else {\r\n          this.required = false;\r\n        }\r\n        break;\r\n      case \"placeholder\":\r\n        this.placeholder = value;\r\n        break;\r\n      case \"search-placeholder\":\r\n        this.searchPlaceholder = value;\r\n        break;\r\n    }\r\n  }\r\n  #setValueOnOptionListChanged() {\r\n    //when option list changed we see if current value is valid for new optionlist we set it if not we reset value to null.\r\n    //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\r\n    if (this.#notFoundedValue) {\r\n      //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\r\n      //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\r\n      const isSetted = this.#setValueFromOutside(this.#notFoundedValue);\r\n      if (isSetted) {\r\n        //after list update and when not founded value is found in new option list we clear old not founded value\r\n        this.#notFoundedValue = null;\r\n      }\r\n    } else if (this.value) {\r\n      this.#setValueFromOutside(this.value);\r\n    }\r\n  }\r\n  #setValueFromOutside(value: TValue): boolean {\r\n    //when user set value by attribute or value prop directly we call this function\r\n    const matchedOption = this.optionList.find((option) => {\r\n      // if we have value mapper we set selected value by object that match mapper\r\n      if (this.#getOptionValue(option) == value) {\r\n        return option;\r\n      }\r\n    });\r\n    if (matchedOption || value === null || value === undefined) {\r\n      this.#setValue(matchedOption);\r\n      return true;\r\n    } else {\r\n      this.#notFoundedValue = value;\r\n      return false;\r\n    }\r\n  }\r\n  #setValue(value: TOption) {\r\n    this.#notFoundedValue = null;\r\n    this.#value = value;\r\n    if (value === null || value === undefined) {\r\n      this.textValue = \"\";\r\n      this.#setSelectedOptionDom(null);\r\n      this.elements.componentWrapper.classList.remove(\"--has-value\");\r\n      //show placeholder when user empty data\r\n      if (!(this.isMobileDevice && this.isOpen)) {\r\n        this.elements.input.placeholder = this.placeholder;\r\n      }\r\n    } else {\r\n      this.textValue = \"\";\r\n      this.#setSelectedOptionDom(value);\r\n      this.elements.componentWrapper.classList.add(\"--has-value\");\r\n      //hide placeholder when user select data\r\n      if (!(this.isMobileDevice && this.isOpen)) {\r\n        this.elements.input.placeholder = \"\";\r\n      }\r\n    }\r\n    //if user select an option we rest filter so user see all option again when open a select\r\n    this.#updateOptionList(\"\");\r\n  }\r\n  #onArrowKeyClick() {\r\n    if (this.isOpen) {\r\n      this.blur();\r\n    } else {\r\n      this.focus();\r\n    }\r\n  }\r\n  #onInputKeyPress(e:KeyboardEvent) {\r\n    const eventOptions:KeyboardEventInit = {\r\n      altKey:e.altKey,\r\n      bubbles:e.bubbles,\r\n      cancelable:e.cancelable,\r\n      code:e.code,\r\n      composed:e.composed,\r\n      ctrlKey:e.ctrlKey,\r\n      detail:e.detail,\r\n      isComposing:e.isComposing,\r\n      key:e.key,\r\n      location:e.location,\r\n      metaKey:e.metaKey,\r\n      view:e.view,\r\n      repeat:e.repeat,\r\n      shiftKey:e.shiftKey \r\n    };\r\n    const event = new KeyboardEvent(\"keypress\",eventOptions);\r\n    this.dispatchEvent(event);\r\n  }\r\n  #onInputBeforeInput(e: InputEvent) {\r\n    // const inputtedText = e.data || \"\";\r\n    //TODO: add cancelable event dispatch here\r\n  }\r\n  #onInputInput(e: InputEvent) {\r\n    const inputtedText = (e.target as HTMLInputElement).value;\r\n    this.textValue = inputtedText;\r\n    this.#handleSelectedValueDisplay(inputtedText);\r\n    this.#validation.checkValidity({showError:false});\r\n    this.#dispatchInputEvent(e);\r\n  }\r\n  #dispatchInputEvent(e: InputEvent) {\r\n    const event = new InputEvent(\"input\", {\r\n      bubbles: e.bubbles,\r\n      cancelable: e.cancelable,\r\n      composed: e.composed,\r\n      data: e.data,\r\n      dataTransfer: e.dataTransfer,\r\n      detail: e.detail,\r\n      inputType: e.inputType,\r\n      isComposing: e.isComposing,\r\n      targetRanges: e.getTargetRanges(),\r\n      view: e.view,\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n  #onInputKeyup(e: KeyboardEvent) {\r\n    const inputText = (e.target as HTMLInputElement).value;\r\n    //here is the rare  time we update #value directly because we want trigger event that may read value directly from dom\r\n    if (e.key === \"Backspace\" || e.key === \"Delete\") {\r\n      //because on keypress dont receive backspace key press\r\n      this.#handleSelectedValueDisplay(inputText);\r\n    }\r\n\r\n    this.#triggerOnInputKeyup(e);\r\n  }\r\n  #handleSelectedValueDisplay(inputValue: string) {\r\n    if (inputValue !== \"\") {\r\n      this.elements.selectedValueWrapper.classList.add(\"--search-typed\");\r\n    } else {\r\n      this.elements.selectedValueWrapper.classList.remove(\"--search-typed\");\r\n    }\r\n  }\r\n  #triggerOnInputKeyup(e: KeyboardEvent) {\r\n    const event = new KeyboardEvent(\"keyup\", {\r\n      altKey: e.altKey,\r\n      bubbles: e.bubbles,\r\n      cancelable: e.cancelable,\r\n      code: e.code,\r\n      ctrlKey: e.ctrlKey,\r\n      detail: e.detail,\r\n      key: e.key,\r\n      shiftKey: e.shiftKey,\r\n      charCode: e.charCode,\r\n      location: e.location,\r\n      composed: e.composed,\r\n      isComposing: e.isComposing,\r\n      metaKey: e.metaKey,\r\n      repeat: e.repeat,\r\n      keyCode: e.keyCode,\r\n      view: e.view,\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n  #onInputChange(e: Event) {\r\n    const inputText = (e.target as HTMLInputElement).value;\r\n    //here is the rare  time we update _text_value directly because we want trigger event that may read value directly from dom\r\n    this.#textValue = inputText;\r\n  }\r\n  #onInputFocus() {\r\n    this.focus();\r\n  }\r\n  #onInputBlur(e: FocusEvent) {\r\n    const focusedElement = <Node>e.relatedTarget;\r\n    if (\r\n      this.elements.optionListWrapper.contains(focusedElement) ||\r\n      this.elements.arrowIcon.contains(focusedElement)\r\n    ) {\r\n      //user click on a menu item\r\n    } else {\r\n      this.blur();\r\n    }\r\n  }\r\n  focus() {\r\n    this.elements.input.focus();\r\n    this.#showOptionList();\r\n    this.elements.componentWrapper.classList.add(\"--focused\");\r\n    if (this.isMobileDevice) {\r\n      this.elements.input.placeholder = this.#searchPlaceholder;\r\n    }\r\n  }\r\n  blur() {\r\n    this.elements.componentWrapper.classList.remove(\"--focused\");\r\n    this.textValue = \"\";\r\n    this.#handleSelectedValueDisplay(\"\");\r\n    this.#hideOptionList();\r\n    this.#validation.checkValidity({showError:true});\r\n    if (this.isMobileDevice) {\r\n      if (this.value) {\r\n        this.elements.input.placeholder = \"\";\r\n      } else {\r\n        this.elements.input.placeholder = this.placeholder;\r\n      }\r\n    }\r\n    this.elements.input.blur();\r\n  }\r\n  #showOptionList() {\r\n    this.elements.optionListWrapper.classList.add(\"--show\");\r\n  }\r\n  #hideOptionList() {\r\n    this.elements.optionListWrapper.classList.remove(\"--show\");\r\n  }\r\n  #updateOptionList(filterText: string) {\r\n    this.displayOptionList = this.#filterOptionList(filterText);\r\n  }\r\n  #updateOptionListDOM() {\r\n    const optionDomList: HTMLElement[] = [];\r\n    this.displayOptionList.forEach((item) => {\r\n      const optionDOM = this.#createOptionDOM(item);\r\n      optionDomList.push(optionDOM);\r\n    });\r\n    this.elements.optionList.innerHTML = \"\";\r\n    optionDomList.forEach((optionElement) => {\r\n      this.elements.optionList.appendChild(optionElement);\r\n    });\r\n  }\r\n  #createOptionDOM(item: TOption): JBSelectOptionElement<TOption> {\r\n    let optionDOM: JBSelectOptionElement<TOption> | null = null;\r\n    const isSelected =\r\n      this.#getOptionValue(this.#value) == this.#getOptionValue(item);\r\n    if (typeof this.callbacks.getOptionDOM == \"function\") {\r\n      optionDOM = this.callbacks.getOptionDOM(\r\n        item,\r\n        this.#onOptionClicked.bind(this),\r\n        isSelected\r\n      );\r\n    } else {\r\n      optionDOM = this.#createDefaultOptionDom(item, isSelected);\r\n    }\r\n    optionDOM.value = item;\r\n    return optionDOM;\r\n  }\r\n\r\n  #createDefaultOptionDom(item: TOption, isSelected: boolean): JBSelectOptionElement<TOption> {\r\n    const optionElement = document.createElement(\"div\");\r\n    optionElement.classList.add(\"select-option\");\r\n    if (isSelected) {\r\n      optionElement.classList.add(\"--selected-option\");\r\n    }\r\n    //it has default function who return exact same input\r\n    optionElement.innerHTML = this.#getOptionTitle(item);\r\n    optionElement.addEventListener(\"click\", this.#onOptionClicked.bind(this));\r\n    return optionElement;\r\n  }\r\n  #onOptionClicked(e: MouseEvent) {\r\n    const prevValue = this.#value;\r\n    const value = (e.currentTarget as JBSelectOptionElement<TOption>).value;\r\n    this.#selectOption(value);\r\n    this.blur();\r\n    const dispatchedEvent = this.#dispatchOnChangeEvent();\r\n    if(dispatchedEvent.defaultPrevented){\r\n      e.preventDefault();\r\n      this.#selectOption(prevValue);\r\n    }\r\n  }\r\n  #selectOption(value: TOption) {\r\n    this.#setValue(value);\r\n    this.#checkValidity(true);\r\n  }\r\n  #filterOptionList(filterString: string): TOption[] {\r\n    const displayOptionList: TOption[] = [];\r\n    this.optionList.filter((option) => {\r\n      const optionTitle = this.#getOptionTitle(option);\r\n      const isString = typeof optionTitle == \"string\";\r\n      if (isString && optionTitle.includes(filterString)) {\r\n        displayOptionList.push(option);\r\n      }\r\n      if (!isString) {\r\n        console.warn(\r\n          \"the provided values for optionsList is not of type string.\",\r\n          { option, title: optionTitle }\r\n        );\r\n      }\r\n    });\r\n    return displayOptionList;\r\n  }\r\n  /**\r\n   * @description show given string as a error in message place\r\n   * @public\r\n   */\r\n  showValidationError(error: ShowValidationErrorInput | string) {\r\n    const message = typeof error == \"string\"?error:error.message;\r\n    this.elements.messageBox.innerHTML = message;\r\n    this.elements.messageBox.classList.add(\"--error\");\r\n  }\r\n  clearValidationError() {\r\n    this.elements.messageBox.innerHTML = this.getAttribute(\"message\") || \"\";\r\n    this.elements.messageBox.classList.remove(\"--error\");\r\n  }\r\n  #dispatchOnChangeEvent() {\r\n    const event = new Event(\"change\",{bubbles:true,cancelable:true});\r\n    this.dispatchEvent(event);\r\n    return event;\r\n  }\r\n  #setSelectedOptionDom(value: TOption) {\r\n    //when user select option or value changed in any condition we set selected option DOM\r\n    this.elements.selectedValueWrapper.innerHTML = \"\";\r\n    //if value was null or undefined it remain empty\r\n    if (value !== null && value !== undefined) {\r\n      const selectedOptionDom = this.#createSelectedValueDom(value);\r\n      this.elements.selectedValueWrapper.appendChild(selectedOptionDom);\r\n    }\r\n  }\r\n  #createSelectedValueDom(value: TOption) {\r\n    if (typeof this.callbacks.getSelectedValueDOM == \"function\") {\r\n      return this.callbacks.getSelectedValueDOM(value);\r\n    } else {\r\n      return this.#createDefaultSelectedValueDom(value);\r\n    }\r\n  }\r\n  #createDefaultSelectedValueDom(value: TOption) {\r\n    const valueText = this.#getOptionTitle(value);\r\n    const selectedOptionDom = document.createElement(\"div\");\r\n    selectedOptionDom.classList.add(\"selected-value\");\r\n    selectedOptionDom.innerHTML = valueText;\r\n    return selectedOptionDom;\r\n  }\r\n  #getOptionValue(option: TOption):TValue{\r\n    if (this.callbacks.getOptionValue && typeof this.callbacks.getOptionValue !== \"function\") {\r\n      console.error(\"getOptionValue callback is not a function\");\r\n    }\r\n    try {\r\n      if(typeof this.callbacks.getOptionValue == \"function\"){\r\n        return this.callbacks.getOptionValue(option);\r\n      }else{\r\n        return option as unknown as TValue;\r\n      }\r\n    } catch (e) {\r\n      console.error(\r\n        `Invalid getOptionValue callback Result, must be a function that returns the value of an option`,\r\n        option\r\n      );\r\n    }\r\n  }\r\n  #getOptionTitle(option: TOption): string {\r\n    if (typeof this.callbacks.getOptionTitle !== \"function\") {\r\n      console.error(\"getOptionTitle callback is not a function\");\r\n    }\r\n    try {\r\n      return this.callbacks.getOptionTitle(option);\r\n    } catch (e) {\r\n      console.error(\r\n        `Invalid getOptionTitle callback Result, must be a function that returns the value of an option`,\r\n        option\r\n      );\r\n    }\r\n    return \"\";\r\n  }\r\n  #getInsideValidation(){\r\n    const ValidationList:ValidationItem<ValidationValue<TOption,TValue>>[] = [];\r\n    if(this.required){\r\n      const label = this.getAttribute(\"label\") || \"\";\r\n      const message = `${label} حتما باید انتخاب شود`;\r\n      ValidationList.push({\r\n        validator:({selectedOption})=>{\r\n          return selectedOption !== null && selectedOption !== undefined;\r\n        },\r\n        message:message,\r\n        stateType:\"valueMissing\"\r\n      });\r\n    }\r\n    return ValidationList;\r\n  }\r\n  //\r\n  #checkValidity(showError: boolean) {\r\n    if (!this.isAutoValidationDisabled) {\r\n      return this.#validation.checkValidity({showError});\r\n    }\r\n  }\r\n  /**\r\n * @public\r\n * @description this method used to check for validity but doesn't show error to user and just return the result\r\n * this method used by #internal of component\r\n */\r\n  checkValidity(): boolean {\r\n    const validationResult = this.#validation.checkValiditySync({showError:false});\r\n    if (!validationResult.isAllValid) {\r\n      const event = new CustomEvent('invalid');\r\n      this.dispatchEvent(event);\r\n    }\r\n    return validationResult.isAllValid;\r\n  }\r\n  /**\r\n  * @public\r\n * @description this method used to check for validity and show error to user\r\n */\r\n  reportValidity(): boolean {\r\n    const validationResult = this.#validation.checkValiditySync({showError:true});\r\n    if (!validationResult.isAllValid) {\r\n      const event = new CustomEvent('invalid');\r\n      this.dispatchEvent(event);\r\n    }\r\n    return validationResult.isAllValid;\r\n  }\r\n  /**\r\n   * @description this method called on every checkValidity calls and update validation result of #internal\r\n   */\r\n  #setValidationResult(result: ValidationResult<ValidationValue<TOption,TValue>>) {\r\n    if (result.isAllValid) {\r\n      this.#internals?.setValidity({}, '');\r\n    } else {\r\n      const states: ValidityStateFlags = {};\r\n      let message = \"\";\r\n      result.validationList.forEach((res) => {\r\n        if (!res.isValid) {\r\n          if (res.validation.stateType) {\r\n            states[res.validation.stateType] = true;\r\n          }else{\r\n            states[\"customError\"] = true;\r\n          }\r\n          if (message == '') { message = res.message; }\r\n\r\n        }\r\n      });\r\n      this.#internals?.setValidity(states, message);\r\n    }\r\n  }\r\n  get validationMessage(){\r\n    return this.#internals?.validationMessage || this.#validation.resultSummary.message;\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-select\");\r\nif (myElementNotExists) {\r\n  //prevent duplicate registering\r\n  window.customElements.define(\"jb-select\", JBSelectWebComponent);\r\n}\r\n","export const isMobile = ()=>{\r\n  return /Mobi/i.test(window.navigator.userAgent);\r\n};"],"names":["JBSelectWebComponent","HTMLElement","formAssociated","value","__classPrivateFieldGet","this","_JBSelectWebComponent_value","_JBSelectWebComponent_instances","_JBSelectWebComponent_getOptionValue","call","_JBSelectWebComponent_setValueFromOutside","textValue","_JBSelectWebComponent_textValue","__classPrivateFieldSet","elements","input","_JBSelectWebComponent_updateOptionList","selectedOptionTitle","_JBSelectWebComponent_getOptionTitle","optionList","_JBSelectWebComponent_optionList","Array","isArray","displayOptionList","_JBSelectWebComponent_filterOptionList","_JBSelectWebComponent_setValueOnOptionListChanged","console","error","placeholder","_JBSelectWebComponent_placeholder","undefined","searchPlaceholder","_JBSelectWebComponent_searchPlaceholder","_JBSelectWebComponent_displayOptionList","length","emptyListPlaceholder","classList","add","remove","_JBSelectWebComponent_updateOptionListDOM","isMobileDevice","test","window","navigator","userAgent","isOpen","componentWrapper","contains","validation","_JBSelectWebComponent_validation","disabled","_JBSelectWebComponent_disabled","states","delete","required","_JBSelectWebComponent_required","checkValiditySync","showError","isAutoValidationDisabled","getAttribute","name","isDirty","initialValue","constructor","super","set","_JBSelectWebComponent_notFoundedValue","callbacks","getOptionTitle","option","toString","getOptionValue","getOptionDOM","getSelectedValueDOM","ValidationHelper","clearValidationError","bind","showValidationError","getValue","_JBSelectWebComponent_ValidationValue_get","getValidations","_JBSelectWebComponent_getInsideValidation","getValueString","setValidationResult","_JBSelectWebComponent_setValidationResult","_JBSelectWebComponent_internals","attachInternals","_JBSelectWebComponent_initWebComponent","_JBSelectWebComponent_initProp","connectedCallback","_JBSelectWebComponent_callOnLoadEvent","_JBSelectWebComponent_callOnInitEvent","observedAttributes","attributeChangedCallback","oldValue","newValue","focus","_JBSelectWebComponent_showOptionList","blur","_JBSelectWebComponent_handleSelectedValueDisplay","_JBSelectWebComponent_hideOptionList","checkValidity","message","messageBox","innerHTML","validationResult","isAllValid","event","CustomEvent","dispatchEvent","reportValidity","validationMessage","resultSummary","inputtedText","selectedOption","bubbles","composed","shadowRoot","attachShadow","mode","delegatesFocus","element","document","createElement","appendChild","content","cloneNode","querySelector","selectedValueWrapper","optionListWrapper","arrowIcon","label","wrapper","text","_JBSelectWebComponent_registerEventListener","addEventListener","e","_JBSelectWebComponent_onInputChange","_JBSelectWebComponent_onInputInput","_JBSelectWebComponent_onAttributeChange","matchedOption","find","_JBSelectWebComponent_setValue","_JBSelectWebComponent_setSelectedOptionDom","_JBSelectWebComponent_onArrowKeyClick","eventOptions","altKey","cancelable","code","ctrlKey","detail","isComposing","key","location","metaKey","view","repeat","shiftKey","KeyboardEvent","target","_JBSelectWebComponent_dispatchInputEvent","InputEvent","data","dataTransfer","inputType","targetRanges","getTargetRanges","inputText","_JBSelectWebComponent_triggerOnInputKeyup","inputValue","charCode","keyCode","_JBSelectWebComponent_onInputFocus","focusedElement","relatedTarget","filterText","optionDomList","forEach","item","optionDOM","_JBSelectWebComponent_createOptionDOM","push","optionElement","isSelected","_JBSelectWebComponent_onOptionClicked","_JBSelectWebComponent_createDefaultOptionDom","prevValue","currentTarget","_JBSelectWebComponent_selectOption","defaultPrevented","preventDefault","_JBSelectWebComponent_checkValidity","filterString","filter","optionTitle","isString","includes","warn","title","_JBSelectWebComponent_dispatchOnChangeEvent","Event","selectedOptionDom","_JBSelectWebComponent_createSelectedValueDom","_JBSelectWebComponent_createDefaultSelectedValueDom","valueText","ValidationList","validator","stateType","result","setValidity","validationList","res","isValid","customElements","get","define"],"mappings":"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"}