jb-select 5.3.2 → 6.0.0

package/lib/types.ts

@@ -1,11 +1,9 @@
-export type JBSelectCallbacks<TOption,TValue> = {
-    getOptionTitle: (option:TOption) => string;
-    getOptionValue?: (option:TOption) => TValue;
-    getOptionDOM: null | ((option:TOption, onSelectCallback:(e:MouseEvent)=>void, isSelected:boolean) => HTMLElement);
-    getSelectedValueDOM: null | ((option:TOption) => HTMLElement);
+import { type JBOptionWebComponent } from "./jb-option/jb-option";
+
+export type JBSelectCallbacks<TValue> = {
+    getSelectedValueDOM?:(value:TValue,content:HTMLElement) => HTMLElement;
 }
-//TODO: create real custom element for select options
-export type JBSelectOptionElement<TOption> = HTMLElement & {value?: TOption};
+
 export type JBSelectElements = {
     input: HTMLInputElement,
     componentWrapper: HTMLDivElement,
@@ -13,6 +11,7 @@ export type JBSelectElements = {
     messageBox:HTMLDivElement,
     optionList: HTMLDivElement,
     optionListWrapper: HTMLDivElement,
+    optionListSlot:HTMLSlotElement,
     arrowIcon: HTMLDivElement,
     label:{
         wrapper: HTMLLabelElement,
@@ -20,8 +19,8 @@ export type JBSelectElements = {
     },
     emptyListPlaceholder: HTMLDivElement,
 }
-export type ValidationValue<TOption,TValue> = {
-    selectedOption:TOption | null,
+export type ValidationValue<TValue> = {
+    selectedOption:JBOptionWebComponent<TValue> | null,
     value:TValue | null,
     inputtedText:string
 }

package/package.json

@@ -12,16 +12,18 @@
     "select",
     "web component"
   ],
-  "version": "5.3.2",
+  "version": "6.0.0",
   "bugs": "https://github.com/javadbat/jb-select/issues",
   "license": "MIT",
   "files": [
     "LICENSE",
     "README.md",
     "lib/",
-    "dist/"
+    "dist/",
+    "react/",
+    "react/dist/"
   ],
-  "types": "./dist/web-component/jb-select/lib/jb-select.d.ts",
+  "types": "./dist/web-component/jb-select/lib/index.d.ts",
   "main": "index.js",
   "repository": {
 		"type": "git",

package/react/README.md

@@ -0,0 +1,188 @@
+# jb-select-react
+
+select component for react 
+
+> this component is a react wrapper for [jb-select](https://github.com/javadbat/jb-select)
+
+## installation
+
+run `npm install jb-select` to install package with npm
+
+## usage
+
+use below syntax in your render function.
+```jsx
+import {JBSelect} from 'jb-select/react';
+
+<JBSelect></JBSelect>
+```
+
+### label
+use label property to describe your select component.
+
+```jsx
+<JBSelect label='your label name' ></JBSelect>
+```
+
+## option list
+if you want to add option to jb-select, you have 2 way:
+
+- use `<JBOption>`
+- use `<jbOptionList>`
+
+### using `JBOption`:
+
+using `JBOption` is quite an easy job:
+
+```jsx
+import {JBSelect,JBOption} from 'jb-select/react';
+
+  <JBSelect label="gender">
+      <JBOption value="male">Male</JBOption>
+      <JBOption value="female">Female</JBOption>
+      <JBOption value="0">Other</JBOption>
+  </JBSelect>
+  //or
+  const optionList = ["1","2","3"]
+  <JBSelect { ...args}>
+    {
+      optionList.map((option)=>(<JBOption key={option} value={option}>{option}</JBOption>))
+    }
+  </JBSelect>
+```
+you can also set object or any other data type as an value
+```jsx
+const [colorList] = useState([
+    {
+      id: 1,
+      name: "Red",
+      value: "#f00",
+    },
+    {
+      id: 2,
+      name: "Green",
+      value: "#0f0",
+    },
+    {
+      id: 3,
+      name: "Blue",
+      value: "#00f",
+    },
+    {
+      id: 4,
+      name: "Yellow",
+      value: "#ff0",
+    },
+  ]);
+  //this function is used to create selected value dom and can be styled using jb-select::part.
+function getSelectedValueDOM(option) {
+    const optionElement = document.createElement("div");
+    optionElement.classList.add("selected-value");
+    optionElement.innerHTML =
+      '<span part="color-box" style="background-color:' + option.value +
+      ';width:16px;height:16px;display:inline-block;"></span>' + "&nbsp;" +
+      option.name;
+    return optionElement;
+}
+return(
+    <JBSelect label="normal" getSelectedValueDOM={getSelectedValueDOM}>
+        {
+          colorList.map((color)=>{
+            return (<JBOption key={color.value} value={color}><span className="color-circle" style={{backgroundColor:color.value}}></span>{color.name}</JBOption>);
+          })
+        }
+    </JBSelect>
+)
+```
+### using `jbOptionList`:
+`JBOptionList` will create options for you and it's good for when you want some easy to use options without complexity of update & manage JSX and it's a little faster for high performance app
+
+example:
+
+```jsx
+import {JBSelect,JBOptionList} from 'jb-select/react';
+
+render(){
+    const list = [{name:'reza',family:'asadi',userId:1},{name:'peter',family:'peterson',userId:2}];
+    getOptionTitle:(option)=>{
+        return `${option.name} ${option.family}`;
+    },
+    getOptionValue:(option)=>{
+        return option.userId;
+    }
+    return(
+        <JBSelect label='your label name' >
+            <JBOptionList optionList={list} getTitle={getOptionTitle} getValue={getOptionValue}/>
+        </JBSelect>;
+    );
+}
+```
+
+### Add Icon or Any Element into box
+
+sometimes you want to add icon into the select box before value box.
+you can customize this entire section by adding a div or any other Tag with the `slot="start-section"`
+
+like the example the below:
+
+```jsx
+<JBSelect>
+    <div slot="start-section">
+        <img class="your-custom-icon" src="./path/to/file.svg">
+    </div>
+</JBSelect>
+```
+
+### set custom style
+
+in some cases in your project you need to change defualt style of the component for example you need zero margin or different border-radius and etc.    
+if you want to set a custom style to this component all you need is to set css variable.
+| css variable name                         | description                                                                                   |
+| -------------                             | -------------                                                                                 |
+| --jb-select-margin                        | web-component margin default is `0 0`                                                      |
+| --jb-select-width                         | change the select component width default is `100%`                                           |
+| --jb-select-border-radius                 | web-component border-radius defualt is `16px`                                                 |
+| --jb-select-border-color                  | border color of select in normal mode                                                         |
+| --jb-select-border-color-selected         | border color when user select a value from list                                               |
+| --jb-select-bgcolor                       | background color of input                                                                     |
+| --jb-select-overlay-bgcolor               | background of select overlay when open in mobile and tablet screen                            |
+| --jb-select-list-max-height               | max height of option list                                                                     |
+| --jb-select-border-bottom-width           | width of border bottom                                                                        |
+| --jb-select-border-width                  | width of border                                                                               |
+| --jb-select-label-color                   | color of label default is `#1f1735`                                                           |
+| --jb-input-label-font-size                | label font size default is `0.8em`                                                            |
+| --jb-input-label-font-weight              | color of label defualt is `#1f1735`                                                           |
+| --jb-select-option-color                  | change option text color                                                                      |
+| --jb-select-option-color-hover            | change option text color on hover                                                             |
+| --jb-select-option-background-color       | background of options default is `transparent`                                                |
+| --jb-select-option-background-color-hover | background of options on mouse hover default is `#1073db`                                     |
+| --jb-select-input-color                   | color of input value                                                                          |
+| --jb-select-bgcolor-selected              | set background color for selected status                                                      |
+| --jb-select-selected-value-color          | selected value text color default is `#1f1735`                                                |
+| --jb-select-selected-value-font-size      | font-size of selected value default is `1.1rem`                                               |
+| --jb-select-message-color                 | message text color default is `#929292`                                                       |
+| --jb-select-message-font-size             | font size of message default is `0.7em`                                                       |
+| --jb-select-message-font-weight           | font weight of message box default is `normal`                                                |
+| --jb-select-placeholder-color             | placeholder color default is `initial`                                                        |
+| --jb-select-placeholder-font-size         | placeholder font-size default is `1.1em`                                                      |
+| --jb-select-height                        | jb-select box height                                                                          |
+| --jb-select-mobile-search-input-height    | when user open select on mobile there is a search box input this var will set its height      |
+| --jb-select-mobile-item-list-margin       | when user open select on mobile there is gap between search box & list that can be customized |
+| --jb-select-list-padding                  | padding of opened list box default is `16px 0`                                                |
+| --jb-select-close-bg-color                | close button bg-color default is `#1f1735`                                                    |
+| --jb-select-close-x-color                 | close button x color default is `#fff`                                                        |
+| --jb-select-close-bg-opacity              | close button bg opacity default is `0.4`                                                      |
+| --jb-select-mobile-input-bgcolor          | background color search input when open in mobile                                             |
+| --jb-select-mobile-search-border-width    | when user open select on mobile, search box can have its own border width config              |
+| --jb-select-mobile-search-border-color    | when user open select on mobile, search box can have its own border color config              |
+| --jb-select-mobile-search-border-bottom-width | when user open select on mobile, search box can have its own border bottom width config   |
+| --jb-select-mobile-search-border-bottom-color | when user open select on mobile, search box can have its own border bottom color config   |
+| --jb-select-mobile-search-border-radius    | when user open select on mobile, search box can have its own border radius                   |
+| --jb-select-middle-div-height              | separator line between input and list default is `0px` and hidden but you can cahange it     | 
+| --jb-select-middle-div-color               | change separator line color                                                                  |
+| --jb-select-middle-div-margin              | change seprator line margin                                                                  |
+| --jb-select-middle-div-mobile-margin       | change separator line margin in mobile modal                                                  |
+| --jb-select-middle-div-radius              | change separator line border-radius                                                          |
+| --jb-select-list-scroll-color              | list item scroll color  default is `#c3c3c3`                                                 |
+| --jb-select-list-scroll-border-radius      | list item scroll border-radius default is `4px`                                              |
+| --jb-select-select-box-margin              | margin of internal element called select box that wrapper display element of form in one box |

package/react/dist/common/hooks/use-event.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function useEvent(dom: HTMLElement, event: any, handler: any, passive?: boolean): void;
+export declare function useBindEvent<TRef extends React.MutableRefObject<any | null>, TEvent>(ref: TRef, event: string, handler: (e: TEvent) => void, passive?: boolean): void;

package/react/dist/common/hooks/useLazyRef.d.ts

@@ -0,0 +1,4 @@
+import { MutableRefObject } from "react";
+type InitFunc<T> = () => T;
+export declare const useLazyRef: <T>(initValFunc: InitFunc<T>) => MutableRefObject<any>;
+export {};

package/react/dist/common/hooks/useMobx.d.ts

@@ -0,0 +1,4 @@
+type Initializers = any[];
+type Constructor<T extends object = object> = new (...args: any[]) => T;
+export declare const useMobx: <T extends object>(Store: Constructor<T>, initializers: Initializers) => T;
+export {};

package/react/dist/common/scripts/device-detection.d.ts

@@ -0,0 +1 @@
+export declare const isMobile: () => boolean;

package/react/dist/common/scripts/persian-helper.d.ts

@@ -0,0 +1,3 @@
+declare function faToEnDigits(input: string | number): string;
+declare function enToFaDigits(input: string | number): string;
+export { enToFaDigits, faToEnDigits };

package/react/dist/index.cjs.js

@@ -0,0 +1,122 @@
+'use strict';
+
+var React = require('react');
+require('jb-select');
+
+/* 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.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.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":"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"}

package/react/dist/index.js

@@ -0,0 +1,118 @@
+import React, { useRef, useImperativeHandle, useEffect, useState } from 'react';
+import 'jb-select';
+
+/* eslint-disable react/display-name */
+const JBOptionList = React.forwardRef((props, ref) => {
+    const element = useRef(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 (React.createElement("jb-option-list", { ref: element }));
+});
+JBOptionList.displayName = 'JBOptionList';
+
+function useBindEvent(ref, event, handler, passive = false) {
+    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 = useRef(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) {
+        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 = useRef(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 (React.createElement("jb-option", { class: className, ref: element, ...rest }, children));
+});
+JBOption.displayName = 'JBOption';
+
+export { JBOption, JBOptionList, JBSelect };
+//# sourceMappingURL=index.js.map

package/react/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.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":[],"mappings":";;;AAAA;AAmBO,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAwC,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,OAAO,GAAG,MAAM,CAA4C,IAAI,CAAC,CAAC;IACxE,mBAAmB,CACjB,GAAG,EACH,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC,EAC7C,CAAC,OAAO,CAAC,CACV,CAAC;IACF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,OAAO,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;YACtD,OAAO,CAAC,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;AAC/C,SAAA;KACF,EAAE,CAAC,KAAK,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAChC,SAAS,CAAC,MAAK;QACb,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,KAAK,CAAC,QAAQ,IAAI,UAAU,EAAE;YAC1D,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AACxD,SAAA;KACF,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9B,SAAS,CAAC,MAAK;QACb,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,KAAK,CAAC,QAAQ,IAAI,UAAU,EAAE;YAC1D,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AACxD,SAAA;KACF,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9B,SAAS,CAAC,MAAK;QACb,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,KAAK,CAAC,aAAa,IAAI,UAAU,EAAE;YAC/D,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,eAAe,EAAC,KAAK,CAAC,aAAa,CAAC,CAAC;AAClE,SAAA;KACF,EAAE,CAAC,KAAK,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;AACnC,IAAA,QACE,KAAgB,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAA,GAAG,EAAE,OAAO,EAAA,CACX,EACjB;AACJ,CAAC,EAAE;AAQH,YAAY,CAAC,WAAW,GAAG,cAAc;;AC1CnC,SAAU,YAAY,CAAuD,GAAQ,EAAE,KAAY,EAAE,OAAwB,EAAE,OAAO,GAAG,KAAK,EAAA;IAClJ,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;AACxB,QAAA,IAAI,GAAG,EAAE;;YAEP,GAAG,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAC/C,SAAA;;AAED,QAAA,OAAO,SAAS,OAAO,GAAA;AACrB,YAAA,IAAG,GAAG,EAAC;gBACL,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAClD,aAAA;AACH,SAAC,CAAC;KACH,EAAC,CAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,CAAC,CAAC,CAAC;AACjC;;AC9BA;AA2BO,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAmB,EAAE,GAAG,KAAI;AACpE,IAAA,MAAM,OAAO,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IACnD,MAAM,CAAC,cAAc,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC3D,mBAAmB,CACjB,GAAG,EACH,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,GAAG,EAAE,CAAC,EACtC,CAAC,OAAO,CAAC,CACV,CAAC;IACF,SAAS,CAAC,MAAK;AACb,QAAA,oBAAoB,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;AAC3C,KAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACtB,SAAS,CAAC,MAAK;QACb,IAAG,OAAO,CAAC,OAAO,EAAC;YACjB,OAAO,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;AACrC,SAAA;AACH,KAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAClB,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,OAAO,KAAK,CAAC,mBAAmB,IAAI,UAAU,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;YACxF,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,mBAAmB,GAAG,KAAK,CAAC,mBAAmB,CAAC;AAC3E,SAAA;AACH,KAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAChC,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,EAAG;YAC1D,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;AACzD,SAAA;AACH,KAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACpB,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,WAAW,KAAK,IAAI,IAAI,KAAK,CAAC,WAAW,KAAK,SAAS,EAAE;YACjE,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;AACjE,SAAA;AACH,KAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IACxB,SAAS,CAAC,MAAK;QACb,IAAI,KAAK,CAAC,iBAAiB,KAAK,IAAI,IAAI,KAAK,CAAC,iBAAiB,KAAK,SAAS,EAAE;YAC7E,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,oBAAoB,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAC9E,SAAA;AACH,KAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC9B,SAAS,OAAO,CAAC,CAAkC,EAAA;AACjD,QAAA,IAAK,OAAO,KAAK,CAAC,OAAO,IAAI,UAAU,EAAE;AACvC,YAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAClB,SAAA;KACF;IACD,SAAS,QAAQ,CAAC,CAA0B,EAAA;AAC1C,QAAA,IAAI,OAAO,KAAK,CAAC,QAAQ,IAAG,UAAU,EAAE;AACtC,YAAA,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AACnB,SAAA;KACF;IACD,SAAS,OAAO,CAAC,CAA+B,EAAA;AAC9C,QAAA,IAAI,OAAO,KAAK,CAAC,OAAO,IAAI,UAAU,EAAE;AACtC,YAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAClB,SAAA;KACF;AACD,IAAA,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AACxC,IAAA,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC1C,IAAA,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AACxC,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;AACJ,CAAC,EAAE;AAkBH,QAAQ,CAAC,WAAW,GAAG,UAAU;;ACxGjC;AAiBO,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAA4B,EAAE,GAAG,KAAI;AAC7E,IAAA,MAAM,OAAO,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAC;AAC3D,IAAA,MAAM,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,GAAG,IAAI,EAAC,GAAG,KAAK,CAAC;IAClD,mBAAmB,CACjB,GAAG,EACH,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC,EAC7C,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,OAAO,CAAC,OAAO,IAAI,KAAK,KAAK,SAAS,EAAE;AAC1C,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;AAC/B,SAAA;AACH,KAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;AAErB,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAW,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,KAAM,IAAI,EAAA,EAChD,QAAQ,CACC,EACZ;AACJ,CAAC,EAAE;AAOH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}