jb-select 5.3.2 → 6.0.1

package/react/dist/index.umd.js

@@ -0,0 +1,125 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('jb-select')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'jb-select'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.index = {}, global.React));
+})(this, (function (exports, React) { 'use strict';
+
+  /* eslint-disable react/display-name */
+  const JBOptionList = React.forwardRef((props, ref) => {
+      const element = React.useRef(null);
+      React.useImperativeHandle(ref, () => (element ? element.current : undefined), [element]);
+      React.useEffect(() => {
+          if (element.current && Array.isArray(props.optionList)) {
+              element.current.optionList = props.optionList;
+          }
+      }, [props.optionList, element]);
+      React.useEffect(() => {
+          if (element.current && typeof props.getTitle == "function") {
+              element.current.setCallback("getTitle", props.getTitle);
+          }
+      }, [props.getTitle, element]);
+      React.useEffect(() => {
+          if (element.current && typeof props.getValue == "function") {
+              element.current.setCallback("getValue", props.getValue);
+          }
+      }, [props.getValue, element]);
+      React.useEffect(() => {
+          if (element.current && typeof props.getContentDOM == "function") {
+              element.current.setCallback("getContentDOM", props.getContentDOM);
+          }
+      }, [props.getContentDOM, element]);
+      return (React.createElement("jb-option-list", { ref: element }));
+  });
+  JBOptionList.displayName = 'JBOptionList';
+
+  function useBindEvent(ref, event, handler, passive = false) {
+      React.useEffect(() => {
+          const dom = ref.current;
+          if (dom) {
+              // initiate the event handler
+              dom.addEventListener(event, handler, passive);
+          }
+          // this will clean up the event every time the component is re-rendered
+          return function cleanup() {
+              if (dom) {
+                  dom.removeEventListener(event, handler, passive);
+              }
+          };
+      }, [ref, event, handler, passive]);
+  }
+
+  /* eslint-disable react/display-name */
+  const JBSelect = React.forwardRef((props, ref) => {
+      const element = React.useRef(null);
+      const [refChangeCount, refChangeCountSetter] = React.useState(0);
+      React.useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
+      React.useEffect(() => {
+          refChangeCountSetter(refChangeCount + 1);
+      }, [element.current]);
+      React.useEffect(() => {
+          if (element.current) {
+              element.current.value = props.value;
+          }
+      }, [props.value]);
+      React.useEffect(() => {
+          if (typeof props.getSelectedValueDOM == "function" && element.current && element.current) {
+              element.current.callbacks.getSelectedValueDOM = props.getSelectedValueDOM;
+          }
+      }, [props.getSelectedValueDOM]);
+      React.useEffect(() => {
+          if (props.message !== null && props.message !== undefined) {
+              element.current?.setAttribute("message", props.message);
+          }
+      }, [props.message]);
+      React.useEffect(() => {
+          if (props.placeholder !== null && props.placeholder !== undefined) {
+              element.current?.setAttribute("placeholder", props.placeholder);
+          }
+      }, [props.placeholder]);
+      React.useEffect(() => {
+          if (props.searchPlaceholder !== null && props.searchPlaceholder !== undefined) {
+              element.current?.setAttribute("search-placeholder", props.searchPlaceholder);
+          }
+      }, [props.searchPlaceholder]);
+      function onKeyup(e) {
+          if (typeof props.onKeyup == "function") {
+              props.onKeyup(e);
+          }
+      }
+      function onChange(e) {
+          if (typeof props.onChange == "function") {
+              props.onChange(e);
+          }
+      }
+      function onInput(e) {
+          if (typeof props.onInput == "function") {
+              props.onInput(e);
+          }
+      }
+      useBindEvent(element, 'keyup', onKeyup);
+      useBindEvent(element, 'change', onChange);
+      useBindEvent(element, 'input', onInput);
+      return (React.createElement("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));
+  });
+  JBSelect.displayName = 'JBSelect';
+
+  /* eslint-disable react/display-name */
+  const JBOption = React.forwardRef((props, ref) => {
+      const element = React.useRef(null);
+      const { value, children, className, ...rest } = props;
+      React.useImperativeHandle(ref, () => (element ? element.current : undefined), [element]);
+      React.useEffect(() => {
+          if (element.current && value !== undefined) {
+              element.current.value = value;
+          }
+      }, [value, element]);
+      return (React.createElement("jb-option", { class: className, ref: element, ...rest }, children));
+  });
+  JBOption.displayName = 'JBOption';
+
+  exports.JBOption = JBOption;
+  exports.JBOptionList = JBOptionList;
+  exports.JBSelect = JBSelect;
+
+}));
+//# sourceMappingURL=index.umd.js.map

package/react/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../lib/JBOptionList.tsx","../../../../common/hooks/use-event.ts","../lib/JBSelect.tsx","../lib/JBOption.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\r\nimport React, { useEffect, useRef, useImperativeHandle } from 'react';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBOptionListWebComponent } from 'jb-select';\r\ntype TOption = any;\r\ntype TValue = any;\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-option-list': JBOptionListType;\r\n    }\r\n    interface JBOptionListType extends React.DetailedHTMLProps<React.HTMLAttributes<JBOptionListWebComponent<TOption, TValue>>, JBOptionListWebComponent<TOption, TValue>> {\r\n      class?: string,\r\n      // ref:React.RefObject<JBDateInputWebComponent>,\r\n    }\r\n  }\r\n}\r\nexport const JBOptionList = React.forwardRef((props: JBOptionListProps<TOption,TValue>, ref) => {\r\n  const element = useRef<JBOptionListWebComponent<TOption, TValue>>(null);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : undefined),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    if (element.current && Array.isArray(props.optionList)) {\r\n      element.current.optionList = props.optionList;\r\n    }\r\n  }, [props.optionList, element]);\r\n  useEffect(() => {\r\n    if (element.current && typeof props.getTitle == \"function\") {\r\n      element.current.setCallback(\"getTitle\",props.getTitle);\r\n    }\r\n  }, [props.getTitle, element]);\r\n  useEffect(() => {\r\n    if (element.current && typeof props.getValue == \"function\") {\r\n      element.current.setCallback(\"getValue\",props.getValue);\r\n    }\r\n  }, [props.getValue, element]);\r\n  useEffect(() => {\r\n    if (element.current && typeof props.getContentDOM == \"function\") {\r\n      element.current.setCallback(\"getContentDOM\",props.getContentDOM);\r\n    }\r\n  }, [props.getContentDOM, element]);\r\n  return (\r\n    <jb-option-list ref={element}>\r\n    </jb-option-list>\r\n  );\r\n});\r\n\r\nexport type JBOptionListProps<TOption,TValue> = {\r\n  optionList: TOption[],\r\n  getTitle?: (option: TOption) => string,\r\n  getValue?: (option: TOption) => TValue,\r\n  getContentDOM?: (option: TOption) => HTMLElement,\r\n}\r\nJBOptionList.displayName = 'JBOptionList';","import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","/* eslint-disable react/display-name */\r\nimport React, { useEffect, useRef, useState, useImperativeHandle,CSSProperties } from 'react';\r\nimport 'jb-select';\r\nimport { useBindEvent } from '../../../../common/hooks/use-event.js';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBSelectWebComponent } from 'jb-select';\r\nexport type JBSelectEventType<T> = T & {\r\n    target: JBSelectWebComponent\r\n}\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-select': JBSelectType;\r\n      }\r\n      interface JBSelectType extends React.DetailedHTMLProps<React.HTMLAttributes<JBSelectWebComponent>, JBSelectWebComponent> {\r\n        class?:string,\r\n        label?: string,\r\n        name?:string,\r\n        required?:string | boolean,\r\n        message?:string,\r\n        tabindex?:string,\r\n        // ref:React.RefObject<JBDateInputWebComponent>,\r\n      }\r\n    }\r\n}\r\n\r\nexport const JBSelect = React.forwardRef((props:JBSelectProps, ref) => {\r\n  const element = useRef<JBSelectWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : {}),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n  useEffect(() => {\r\n    if(element.current){\r\n      element.current.value = props.value;\r\n    }\r\n  }, [props.value]);\r\n  useEffect(() => {\r\n    if (typeof props.getSelectedValueDOM == \"function\" && element.current && element.current) {\r\n      element.current.callbacks.getSelectedValueDOM = props.getSelectedValueDOM;\r\n    }\r\n  }, [props.getSelectedValueDOM]);\r\n  useEffect(() => {\r\n    if (props.message !== null && props.message !== undefined ) {\r\n      element.current?.setAttribute(\"message\", props.message);\r\n    }\r\n  }, [props.message]);\r\n  useEffect(() => {\r\n    if (props.placeholder !== null && props.placeholder !== undefined) {\r\n      element.current?.setAttribute(\"placeholder\", props.placeholder);\r\n    }\r\n  }, [props.placeholder]);\r\n  useEffect(() => {\r\n    if (props.searchPlaceholder !== null && props.searchPlaceholder !== undefined) {\r\n      element.current?.setAttribute(\"search-placeholder\", props.searchPlaceholder);\r\n    }\r\n  }, [props.searchPlaceholder]);\r\n  function onKeyup(e:JBSelectEventType<KeyboardEvent>) {\r\n    if ( typeof props.onKeyup == \"function\") {\r\n      props.onKeyup(e);\r\n    }\r\n  }\r\n  function onChange(e:JBSelectEventType<Event>) {\r\n    if (typeof props.onChange ==\"function\") {\r\n      props.onChange(e);\r\n    }\r\n  }\r\n  function onInput(e:JBSelectEventType<InputEvent>) {\r\n    if (typeof props.onInput == \"function\") {\r\n      props.onInput(e);\r\n    }\r\n  }\r\n  useBindEvent(element, 'keyup', onKeyup);\r\n  useBindEvent(element, 'change', onChange);\r\n  useBindEvent(element, 'input', onInput);\r\n  return (\r\n    <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}>\r\n      {props.children}\r\n    </jb-select>\r\n  );\r\n});\r\n\r\nexport type JBSelectProps = {\r\n    style?:CSSProperties,\r\n    label?: string,\r\n    getSelectedValueDOM?: (option:any)=>HTMLElement,\r\n    value?: any,\r\n    onChange?: (e:JBSelectEventType<Event>)=>void,\r\n    onKeyup?: (e:JBSelectEventType<KeyboardEvent>)=>void,\r\n    onInput?: (e:JBSelectEventType<InputEvent>)=>void,\r\n    required?: boolean,\r\n    message?: string,\r\n    placeholder?: string,\r\n    searchPlaceholder?: string,\r\n    className?: string,\r\n    children?:React.ReactNode,\r\n    name?:string\r\n}\r\nJBSelect.displayName = 'JBSelect';","/* eslint-disable react/display-name */\r\nimport React, { useEffect, useRef, useImperativeHandle, PropsWithChildren, ComponentProps } from 'react';\r\nimport { JBOptionWebComponent } from 'jb-select';\r\n//TODO: make it generic when remove forward ref\r\ntype TValue = any;\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-option': JBOptionType;\r\n    }\r\n    interface JBOptionType extends React.DetailedHTMLProps<React.HTMLAttributes<JBOptionWebComponent<TValue>>, JBOptionWebComponent<TValue>> {\r\n      class?: string,\r\n    }\r\n  }\r\n}\r\nexport const JBOption = React.forwardRef((props: JBOptionProps<TValue>, ref) => {\r\n  const element = useRef<JBOptionWebComponent<TValue>>(null);\r\n  const {value,children,className, ...rest} = props;\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : undefined),\r\n    [element],\r\n  );\r\n  \r\n  useEffect(() => {\r\n    if (element.current && value !== undefined) {\r\n      element.current.value = value;\r\n    }\r\n  }, [value, element]);\r\n\r\n  return (\r\n    <jb-option class={className} ref={element} {...rest}>\r\n      {children}\r\n    </jb-option>\r\n  );\r\n});\r\n\r\ntype Props<TValue> = {\r\n  value:TValue\r\n}\r\n\r\nexport type JBOptionProps<TValue> = PropsWithChildren<JSX.JBOptionType & Props<TValue>>\r\nJBOption.displayName = 'JBOption';"],"names":["useRef","useImperativeHandle","useEffect","useState"],"mappings":";;;;;;EAAA;AAmBO,QAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAwC,EAAE,GAAG,KAAI;EAC7F,IAAA,MAAM,OAAO,GAAGA,YAAM,CAA4C,IAAI,CAAC,CAAC;MACxEC,yBAAmB,CACjB,GAAG,EACH,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC,EAC7C,CAAC,OAAO,CAAC,CACV,CAAC;MACFC,eAAS,CAAC,MAAK;EACb,QAAA,IAAI,OAAO,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;cACtD,OAAO,CAAC,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;EAC/C,SAAA;OACF,EAAE,CAAC,KAAK,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;MAChCA,eAAS,CAAC,MAAK;UACb,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,KAAK,CAAC,QAAQ,IAAI,UAAU,EAAE;cAC1D,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;EACxD,SAAA;OACF,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;MAC9BA,eAAS,CAAC,MAAK;UACb,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,KAAK,CAAC,QAAQ,IAAI,UAAU,EAAE;cAC1D,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;EACxD,SAAA;OACF,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;MAC9BA,eAAS,CAAC,MAAK;UACb,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,KAAK,CAAC,aAAa,IAAI,UAAU,EAAE;cAC/D,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,eAAe,EAAC,KAAK,CAAC,aAAa,CAAC,CAAC;EAClE,SAAA;OACF,EAAE,CAAC,KAAK,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;EACnC,IAAA,QACE,KAAgB,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAA,GAAG,EAAE,OAAO,EAAA,CACX,EACjB;EACJ,CAAC,EAAE;EAQH,YAAY,CAAC,WAAW,GAAG,cAAc;;EC1CnC,SAAU,YAAY,CAAuD,GAAQ,EAAE,KAAY,EAAE,OAAwB,EAAE,OAAO,GAAG,KAAK,EAAA;MAClJA,eAAS,CAAC,MAAK;EACb,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;EACxB,QAAA,IAAI,GAAG,EAAE;;cAEP,GAAG,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;EAC/C,SAAA;;EAED,QAAA,OAAO,SAAS,OAAO,GAAA;EACrB,YAAA,IAAG,GAAG,EAAC;kBACL,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;EAClD,aAAA;EACH,SAAC,CAAC;OACH,EAAC,CAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,CAAC,CAAC,CAAC;EACjC;;EC9BA;AA2BO,QAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAmB,EAAE,GAAG,KAAI;EACpE,IAAA,MAAM,OAAO,GAAGF,YAAM,CAAuB,IAAI,CAAC,CAAC;MACnD,MAAM,CAAC,cAAc,EAAE,oBAAoB,CAAC,GAAGG,cAAQ,CAAC,CAAC,CAAC,CAAC;MAC3DF,yBAAmB,CACjB,GAAG,EACH,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,GAAG,EAAE,CAAC,EACtC,CAAC,OAAO,CAAC,CACV,CAAC;MACFC,eAAS,CAAC,MAAK;EACb,QAAA,oBAAoB,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;EAC3C,KAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;MACtBA,eAAS,CAAC,MAAK;UACb,IAAG,OAAO,CAAC,OAAO,EAAC;cACjB,OAAO,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;EACrC,SAAA;EACH,KAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;MAClBA,eAAS,CAAC,MAAK;EACb,QAAA,IAAI,OAAO,KAAK,CAAC,mBAAmB,IAAI,UAAU,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;cACxF,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,mBAAmB,GAAG,KAAK,CAAC,mBAAmB,CAAC;EAC3E,SAAA;EACH,KAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC;MAChCA,eAAS,CAAC,MAAK;UACb,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,EAAG;cAC1D,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;EACzD,SAAA;EACH,KAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;MACpBA,eAAS,CAAC,MAAK;UACb,IAAI,KAAK,CAAC,WAAW,KAAK,IAAI,IAAI,KAAK,CAAC,WAAW,KAAK,SAAS,EAAE;cACjE,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;EACjE,SAAA;EACH,KAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;MACxBA,eAAS,CAAC,MAAK;UACb,IAAI,KAAK,CAAC,iBAAiB,KAAK,IAAI,IAAI,KAAK,CAAC,iBAAiB,KAAK,SAAS,EAAE;cAC7E,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,oBAAoB,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;EAC9E,SAAA;EACH,KAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC;MAC9B,SAAS,OAAO,CAAC,CAAkC,EAAA;EACjD,QAAA,IAAK,OAAO,KAAK,CAAC,OAAO,IAAI,UAAU,EAAE;EACvC,YAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;EAClB,SAAA;OACF;MACD,SAAS,QAAQ,CAAC,CAA0B,EAAA;EAC1C,QAAA,IAAI,OAAO,KAAK,CAAC,QAAQ,IAAG,UAAU,EAAE;EACtC,YAAA,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;EACnB,SAAA;OACF;MACD,SAAS,OAAO,CAAC,CAA+B,EAAA;EAC9C,QAAA,IAAI,OAAO,KAAK,CAAC,OAAO,IAAI,UAAU,EAAE;EACtC,YAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;EAClB,SAAA;OACF;EACD,IAAA,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;EACxC,IAAA,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;EAC1C,IAAA,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;EACxC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAW,KAAK,EAAE,KAAK,CAAC,KAAK,GAAC,KAAK,CAAC,KAAK,GAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,GAAC,KAAK,CAAC,SAAS,GAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAE,SAAS,EAAA,EAC/L,KAAK,CAAC,QAAQ,CACL,EACZ;EACJ,CAAC,EAAE;EAkBH,QAAQ,CAAC,WAAW,GAAG,UAAU;;ECxGjC;AAiBO,QAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAA4B,EAAE,GAAG,KAAI;EAC7E,IAAA,MAAM,OAAO,GAAGF,YAAM,CAA+B,IAAI,CAAC,CAAC;EAC3D,IAAA,MAAM,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,GAAG,IAAI,EAAC,GAAG,KAAK,CAAC;MAClDC,yBAAmB,CACjB,GAAG,EACH,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC,EAC7C,CAAC,OAAO,CAAC,CACV,CAAC;MAEFC,eAAS,CAAC,MAAK;EACb,QAAA,IAAI,OAAO,CAAC,OAAO,IAAI,KAAK,KAAK,SAAS,EAAE;EAC1C,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;EAC/B,SAAA;EACH,KAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;EAErB,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAW,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,KAAM,IAAI,EAAA,EAChD,QAAQ,CACC,EACZ;EACJ,CAAC,EAAE;EAOH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;;;;;;;"}

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

@@ -0,0 +1,19 @@
+import React, { PropsWithChildren } from 'react';
+import { JBOptionWebComponent } from 'jb-select';
+type TValue = any;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-option': JBOptionType;
+        }
+        interface JBOptionType extends React.DetailedHTMLProps<React.HTMLAttributes<JBOptionWebComponent<TValue>>, JBOptionWebComponent<TValue>> {
+            class?: string;
+        }
+    }
+}
+export declare const JBOption: React.ForwardRefExoticComponent<Omit<JBOptionProps<any>, "ref"> & React.RefAttributes<unknown>>;
+type Props<TValue> = {
+    value: TValue;
+};
+export type JBOptionProps<TValue> = PropsWithChildren<JSX.JBOptionType & Props<TValue>>;
+export {};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { JBOptionListWebComponent } from 'jb-select';
+type TOption = any;
+type TValue = any;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-option-list': JBOptionListType;
+        }
+        interface JBOptionListType extends React.DetailedHTMLProps<React.HTMLAttributes<JBOptionListWebComponent<TOption, TValue>>, JBOptionListWebComponent<TOption, TValue>> {
+            class?: string;
+        }
+    }
+}
+export declare const JBOptionList: React.ForwardRefExoticComponent<JBOptionListProps<any, any> & React.RefAttributes<unknown>>;
+export type JBOptionListProps<TOption, TValue> = {
+    optionList: TOption[];
+    getTitle?: (option: TOption) => string;
+    getValue?: (option: TOption) => TValue;
+    getContentDOM?: (option: TOption) => HTMLElement;
+};
+export {};

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

@@ -0,0 +1,38 @@
+import React, { CSSProperties } from 'react';
+import 'jb-select';
+import { JBSelectWebComponent } from 'jb-select';
+export type JBSelectEventType<T> = T & {
+    target: JBSelectWebComponent;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-select': JBSelectType;
+        }
+        interface JBSelectType extends React.DetailedHTMLProps<React.HTMLAttributes<JBSelectWebComponent>, JBSelectWebComponent> {
+            class?: string;
+            label?: string;
+            name?: string;
+            required?: string | boolean;
+            message?: string;
+            tabindex?: string;
+        }
+    }
+}
+export declare const JBSelect: React.ForwardRefExoticComponent<JBSelectProps & React.RefAttributes<unknown>>;
+export type JBSelectProps = {
+    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;
+};

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

@@ -0,0 +1,3 @@
+export * from './JBOptionList.js';
+export * from './JBSelect.js';
+export * from './JBOption.js';

package/react/index.js

@@ -0,0 +1 @@
+export * from './dist/index.js';

package/react/lib/JBOption.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable react/display-name */
+import React, { useEffect, useRef, useImperativeHandle, PropsWithChildren, ComponentProps } from 'react';
+import { JBOptionWebComponent } from 'jb-select';
+//TODO: make it generic when remove forward ref
+type TValue = any;
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'jb-option': JBOptionType;
+    }
+    interface JBOptionType extends React.DetailedHTMLProps<React.HTMLAttributes<JBOptionWebComponent<TValue>>, JBOptionWebComponent<TValue>> {
+      class?: string,
+    }
+  }
+}
+export const JBOption = React.forwardRef((props: JBOptionProps<TValue>, ref) => {
+  const element = useRef<JBOptionWebComponent<TValue>>(null);
+  const {value,children,className, ...rest} = props;
+  useImperativeHandle(
+    ref,
+    () => (element ? element.current : undefined),
+    [element],
+  );
+  
+  useEffect(() => {
+    if (element.current && value !== undefined) {
+      element.current.value = value;
+    }
+  }, [value, element]);
+
+  return (
+    <jb-option class={className} ref={element} {...rest}>
+      {children}
+    </jb-option>
+  );
+});
+
+type Props<TValue> = {
+  value:TValue
+}
+
+export type JBOptionProps<TValue> = PropsWithChildren<JSX.JBOptionType & Props<TValue>>
+JBOption.displayName = 'JBOption';

package/react/lib/JBOptionList.tsx

@@ -0,0 +1,59 @@
+/* eslint-disable react/display-name */
+import React, { useEffect, useRef, useImperativeHandle } from 'react';
+// eslint-disable-next-line no-duplicate-imports
+import { JBOptionListWebComponent } from 'jb-select';
+type TOption = any;
+type TValue = any;
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'jb-option-list': JBOptionListType;
+    }
+    interface JBOptionListType extends React.DetailedHTMLProps<React.HTMLAttributes<JBOptionListWebComponent<TOption, TValue>>, JBOptionListWebComponent<TOption, TValue>> {
+      class?: string,
+      // ref:React.RefObject<JBDateInputWebComponent>,
+    }
+  }
+}
+export const JBOptionList = React.forwardRef((props: JBOptionListProps<TOption,TValue>, ref) => {
+  const element = useRef<JBOptionListWebComponent<TOption, TValue>>(null);
+  useImperativeHandle(
+    ref,
+    () => (element ? element.current : undefined),
+    [element],
+  );
+  useEffect(() => {
+    if (element.current && Array.isArray(props.optionList)) {
+      element.current.optionList = props.optionList;
+    }
+  }, [props.optionList, element]);
+  useEffect(() => {
+    if (element.current && typeof props.getTitle == "function") {
+      element.current.setCallback("getTitle",props.getTitle);
+    }
+  }, [props.getTitle, element]);
+  useEffect(() => {
+    if (element.current && typeof props.getValue == "function") {
+      element.current.setCallback("getValue",props.getValue);
+    }
+  }, [props.getValue, element]);
+  useEffect(() => {
+    if (element.current && typeof props.getContentDOM == "function") {
+      element.current.setCallback("getContentDOM",props.getContentDOM);
+    }
+  }, [props.getContentDOM, element]);
+  return (
+    <jb-option-list ref={element}>
+    </jb-option-list>
+  );
+});
+
+export type JBOptionListProps<TOption,TValue> = {
+  optionList: TOption[],
+  getTitle?: (option: TOption) => string,
+  getValue?: (option: TOption) => TValue,
+  getContentDOM?: (option: TOption) => HTMLElement,
+}
+JBOptionList.displayName = 'JBOptionList';

package/react/lib/JBSelect.tsx

@@ -0,0 +1,105 @@
+/* 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';
+export type JBSelectEventType<T> = T & {
+    target: JBSelectWebComponent
+}
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+      interface IntrinsicElements {
+        'jb-select': JBSelectType;
+      }
+      interface JBSelectType extends React.DetailedHTMLProps<React.HTMLAttributes<JBSelectWebComponent>, JBSelectWebComponent> {
+        class?:string,
+        label?: string,
+        name?:string,
+        required?:string | boolean,
+        message?:string,
+        tabindex?:string,
+        // ref:React.RefObject<JBDateInputWebComponent>,
+      }
+    }
+}
+
+export const JBSelect = React.forwardRef((props:JBSelectProps, ref) => {
+  const element = useRef<JBSelectWebComponent>(null);
+  const [refChangeCount, refChangeCountSetter] = useState(0);
+  useImperativeHandle(
+    ref,
+    () => (element ? element.current : {}),
+    [element],
+  );
+  useEffect(() => {
+    refChangeCountSetter(refChangeCount + 1);
+  }, [element.current]);
+  useEffect(() => {
+    if(element.current){
+      element.current.value = props.value;
+    }
+  }, [props.value]);
+  useEffect(() => {
+    if (typeof props.getSelectedValueDOM == "function" && element.current && element.current) {
+      element.current.callbacks.getSelectedValueDOM = props.getSelectedValueDOM;
+    }
+  }, [props.getSelectedValueDOM]);
+  useEffect(() => {
+    if (props.message !== null && props.message !== undefined ) {
+      element.current?.setAttribute("message", props.message);
+    }
+  }, [props.message]);
+  useEffect(() => {
+    if (props.placeholder !== null && props.placeholder !== undefined) {
+      element.current?.setAttribute("placeholder", props.placeholder);
+    }
+  }, [props.placeholder]);
+  useEffect(() => {
+    if (props.searchPlaceholder !== null && props.searchPlaceholder !== undefined) {
+      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);
+    }
+  }
+  useBindEvent(element, 'keyup', onKeyup);
+  useBindEvent(element, 'change', onChange);
+  useBindEvent(element, 'input', onInput);
+  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}
+    </jb-select>
+  );
+});
+
+export type JBSelectProps = {
+    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
+}
+JBSelect.displayName = 'JBSelect';

package/react/lib/index.tsx

@@ -0,0 +1,3 @@
+export * from './JBOptionList.js';
+export * from './JBSelect.js';
+export * from './JBOption.js';

package/react/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "jb-select-react",
+  "description": "select react component",
+  "type": "module",
+  "author": {
+		"name": "mohammad javad bathaei",
+		"email": "javadbat@gmail.com"
+	},
+  "keywords": [
+    "jb",
+    "jb-select",
+    "select",
+    "react component"
+  ],
+  "version": "6.0.1",
+  "bugs": "https://github.com/javadbat/jb-select/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "lib/",
+    "dist/"
+  ],
+  "main": "index.js",
+  "types": "./dist/web-component/jb-select/react/lib/index.d.ts",
+  "repository": {
+		"type": "git",
+		"url": "git@github.com:javadbat/jb-select.git"
+  },
+  "dependencies": {
+    "jb-select": ">=5.0.0"
+  }
+}

package/react/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+    },
+    "include": [
+        "../../../common/scripts/**/*.ts",
+        "../../../common/hooks/**/*.ts",
+        "../../../common/hooks/**/*.js",
+        "lib/**/*.ts",
+        "lib/**/*.tsx",
+        "lib/JBOptionList.tsx"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/*.spec.ts",
+        "dist",
+    ],
+    "extends":"../../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