package Ġui . components . options . menu Ċ Ċ import Ġcss . const .* Ċ import Ġcss . text . TextStyle Ċ import Ġkotlinx . browser . document Ċ import Ġkotlinx . css .* Ċ import Ġkotlinx . css . properties . border Ċ import Ġkotlinx . css . properties . border Bottom Ċ import Ġkotlinx . html . id Ċ import Ġkotlinx . html . js . onClick Function Ċ import Ġkotlinx . html . js . on KeyUp Function Ċ import Ġkotlinx . html . js . on Mouse Out Function Ċ import Ġkotlinx . html . js . on Mouse Over Function Ċ import Ġorg . w 3 c . dom . HTML InputElement Ċ import Ġreact .* Ċ import Ġstyled .* Ċ Ċ external Ġinterface ĠDrop Down Multi Choice Props Ġ: ĠR Props Ġ{ ĊĠĠĠ Ġ/* ĊĠĠĠĠ Ġ* ĠCallback Ġfor Ġwhen Ġitem Ġin Ġlist Ġis Ġselected . ĠReturns Ġnewly Ġselected Ġitem , Ġas Ġwell Ġas ĊĠĠĠĠ Ġ* Ġlist Ġof Ġall Ġselected Ġoptions Ġcurrently ĊĠĠĠĠ Ġ*/ ĊĠĠĠ Ġvar Ġon Selected : Ġ( String ) Ġ-> ĠUnit ĊĊĠĠĠ Ġ// ĠInitial Ġlist Ġof Ġchoices Ġto Ġpopulate Ġthe Ġlist Ġwith . ĠSelected Ġlabels Ġare Ġpaired Ġwith Ġtrue . ĊĠĠĠ Ġvar Ġchoices : ĠMutable List < Pair < String , ĠBoolean >> ĊĊĠĠĠ Ġ// ĠDefault Ġlabel Ġfor Ġbutton , Ġwill Ġbe Ġreplaced Ġwith Ġthe Ġselected ĠString Ġoption , Ġonce Ġa Ġselection Ġis Ġmade . ĊĠĠĠ Ġvar Ġbutton Label : ĠString ĊĊĠĠĠ Ġ// ĠIndicates Ġif Ġthis Ġis Ġa Ġdropdown Ġsupporting Ġmultiple Ġselections , Ġor Ġa Ġsingle Ġselection ĊĠĠĠ Ġvar Ġmult ich oice : ĠBoolean ĊĊĠĠĠ Ġ// ĠEnable Ġsearch Ġentry Ġfield Ġon Ġthis Ġmenu ĊĠĠĠ Ġvar Ġsearch Enabled : ĠBoolean ĊĊĠĠĠ Ġ// ĠSearch Ġfield Ġhint Ġtext Ġ( if Ġenabled ) ĊĠĠĠ Ġvar Ġsearch Hint : ĠString Ċ } Ċ Ċ class ĠDrop Down Multi Choice State Ġ: ĠR State Ġ{ ĊĠĠĠ Ġvar Ġdrop Down Multi Choice Displayed Ġ= Ġfalse ĊĠĠĠ Ġvar Ġcurrent Filter String Ġ= Ġ"" Ċ } Ċ Ċ /** Ċ Ġ* ĠA Ġdropdown Ġmenu , Ġcontaining Ġa Ġlist Ġof Ġchoices Ġ( Strings ). ĠMultiple Ġchoices Ġcan Ġbe Ġselected Ġat Ġany Ġtime . ĠOnce Ġan Ġitem Ċ Ġ* Ġis Ġselected , Ġit Ġis Ġno Ġlonger Ġdisplayed Ġin Ġthe Ġlist Ġof Ġavailable Ġoptions . ĠDrop Ġdown Ġmenu Ġis Ġopen / closed Ġby Ġclicking Ċ Ġ* Ġon Ġthe Ġbutton . ĠAdditionally , Ġthe Ġmenu Ġwill Ġclose Ġautomatically Ġon Ġmouse Ġout Ġevent Ġfrom Ġthe Ġlist Ġof Ġoptions . Ċ Ġ*/ Ċ class ĠDrop Down Multi Choice Ġ: ĠR Component < DropDown Multi Choice Props , ĠDrop Down Multi Choice State >() Ġ{ ĊĠĠĠ Ġprivate Ġval Ġsearch Area Id Ġ= Ġ" search _ entry _ field " ĊĊĠĠĠ Ġinit Ġ{ ĊĠĠĠĠĠĠĠ Ġstate Ġ= ĠDrop Down Multi Choice State () ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun ĠR Builder . render () Ġ{ ĊĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ DropDown Multi Choice Style . main Div ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ DropDown Multi Choice Style . button Layout ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonClick Function Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdrop Down Multi Choice Displayed Ġ= Ġ! dropDown Multi Choice Displayed ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ DropDown Multi Choice Style . dropDown Label ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ TextStyle . dropDown Label ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ(! props . mult ich oice Ġ&& Ġprops . choices . any Ġ{ Ġit . second Ġ}) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ props . choices . first Ġ{ Ġit . second Ġ}. first ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġelse Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ props . button Label ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Img Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ DropDown Multi Choice Style . dropDown Arrow Icon ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsrc Ġ= Ġif Ġ( state . dropDown Multi Choice Displayed ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" images / arrow _ up . svg " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġelse Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" images / arrow _ down . svg " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( state . dropDown Multi Choice Displayed ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ DropDown Multi Choice Style . dropDown Active ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġelse Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ DropDown Multi Choice Style . dropDown Hidden ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonMouse Over Function Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠsetState Ġ{ Ġdrop Down Multi Choice Displayed Ġ= Ġtrue Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonMouse Out Function Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠsetState Ġ{ Ġdrop Down Multi Choice Displayed Ġ= Ġfalse Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( props . search Enabled ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ DropDown Multi Choice Style . search Field Div ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Img Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ DropDown Multi Choice Style . search Field Image ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsrc Ġ= Ġ" images / search _ black . png " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Input Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ DropDown Multi Choice Style . dropdown Search Field ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġid Ġ= Ġsearch Area Id ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġplaceholder Ġ= Ġprops . search Hint ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon KeyUp Function Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcurrent Filter String Ġ= ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ( document . getElementById ( search Area Id ) Ġas ĠHTML InputElement ). value ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ DropDown Multi Choice Style . dropDown List Container ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġentry List Ġ= Ġprops . choices ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. filter Not Ġ{ Ġit . second Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. filter Ġ{ Ġit . first . indexOf ( state . current Filter String ) Ġ> Ġ- 1 Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. map Ġ{ Ġit . first Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. iterator () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwhile Ġ( entry List . hasNext ()) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġchoice Ġ= Ġentry List . next () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Span Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ DropDown Multi Choice Style . dropdown Choice ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonClick Function Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon Choice Selected ( choice ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ(! props . mult ich oice ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠsetState Ġ{ Ġdrop Down Multi Choice Displayed Ġ= Ġfalse Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ choice ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( entry List . hasNext ()) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ DropDown Multi Choice Style . dropDown Divider ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġ/** ĊĠĠĠĠ Ġ* ĠWhen Ġa Ġgiven Ġchoice Ġis Ġselected Ġfrom Ġthe Ġlist , Ġwe Ġneed Ġto Ġupdate Ġthe Ġlist Ġsuch Ġthat Ġthe Ġchoice Ġis Ġno Ġlonger ĊĠĠĠĠ Ġ* Ġdisplayed Ġas Ġan Ġavailable Ġoption . ĊĠĠĠĠ Ġ*/ ĊĠĠĠ Ġprivate Ġfun Ġon Choice Selected ( choice : ĠString ) Ġ{ ĊĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġprops . on Selected ( choice ) ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ /** Ċ Ġ* ĠConvenience Ġmethod Ġfor Ġinstanti ating Ġthe Ġcomponent . Ċ Ġ*/ Ċ fun ĠR Builder . dropDown Multi Choice ( handler : ĠDrop Down Multi Choice Props . () Ġ-> ĠUnit ): ĠReact Element Ġ{ ĊĠĠĠ Ġreturn Ġchild ( DropDown Multi Choice :: class ) Ġ{ ĊĠĠĠĠĠĠĠ Ġthis . attrs ( handler ) ĊĠĠĠ Ġ} Ċ } Ċ Ċ /** Ċ Ġ* ĠCSS Ċ Ġ*/ Ċ object ĠDrop Down Multi Choice Style Ġ: ĠStyleSheet (" DropDown Multi Choice ", Ġis Static Ġ= Ġtrue ) Ġ{ ĊĠĠĠ Ġval Ġmain Div Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ Ġcursor Ġ= ĠCursor . pointer ĊĠĠĠĠĠĠĠ Ġposition Ġ= ĠPosition . relative ĊĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . inline Block ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġbutton Layout Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . flex ĊĠĠĠĠĠĠĠ ĠflexDirection Ġ= ĠFlex Direction . row ĊĠĠĠĠĠĠĠ Ġwidth Ġ= ĠLinear Dimension . fit Content ĊĠĠĠĠĠĠĠ Ġborder ( width Ġ= Ġ 1 . px , Ġcolor Ġ= ĠBORDER _ GRAY , Ġstyle Ġ= ĠBorder Style . solid ) ĊĠĠĠĠĠĠĠ Ġpadding ( horizontal Ġ= Ġ 1 6 . px , Ġvertical Ġ= Ġ 8 . px ) ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġdrop Down Label Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠWH ITE ĊĠĠĠĠĠĠĠ Ġflex Grow Ġ= Ġ 1 . 0 ĊĠĠĠĠĠĠĠ Ġpadding Right Ġ= Ġ 4 8 . px ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġdrop Down Arrow Icon Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 2 4 . px ĊĠĠĠĠĠĠĠ Ġheight Ġ= Ġ 2 4 . px ĊĠĠĠĠĠĠĠ Ġalign Self Ġ= ĠAlign . center ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġdrop Down Content Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ Ġposition Ġ= ĠPosition . absolute ĊĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠWH ITE Ċ // ĠĠĠĠĠĠĠ Ġoverflow Y Ġ= ĠOverflow . scroll Ċ // ĠĠĠĠĠĠĠ Ġoverflow X Ġ= ĠOverflow . hidden ĊĠĠĠĠĠĠĠ Ġborder ( width Ġ= Ġ 1 . px , Ġcolor Ġ= ĠBORDER _ GRAY , Ġstyle Ġ= ĠBorder Style . solid ) ĊĠĠĠĠĠĠĠ ĠminWidth Ġ= Ġ 1 4 8 . px ĊĠĠĠĠĠĠĠ ĠmaxHeight Ġ= Ġ 4 0 0 . px ĊĠĠĠĠĠĠĠ Ġz Index Ġ= Ġ 1 ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġdrop Down List Container Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ Ġoverflow Y Ġ= ĠOverflow . scroll ĊĠĠĠĠĠĠĠ Ġoverflow X Ġ= ĠOverflow . hidden ĊĠĠĠĠĠĠĠ ĠmaxHeight Ġ= Ġ 4 0 0 . px ĊĠĠĠĠĠĠĠ Ġz Index Ġ= Ġ 1 ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġdrop Down Active Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ Ġ+ dropDown Content ĊĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . flex ĊĠĠĠĠĠĠĠ ĠflexDirection Ġ= ĠFlex Direction . column ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġdrop Down Hidden Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ Ġ+ dropDown Content ĊĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . none ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġsearch Field Div Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . flex ĊĠĠĠĠĠĠĠ ĠflexDirection Ġ= ĠFlex Direction . row ĊĠĠĠĠĠĠĠ ĠalignItems Ġ= ĠAlign . center ĊĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠWH ITE ĊĠĠĠĠĠĠĠ Ġmargin ( horizontal Ġ= Ġ 8 . px ) ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġsearch Field Image Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ Ġheight Ġ= Ġ 2 4 . px ĊĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 2 4 . px ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġdropdown Search Field Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ Ġpadding ( vertical Ġ= Ġ 1 2 . px , Ġhorizontal Ġ= Ġ 1 6 . px ) ĊĠĠĠĠĠĠĠ ĠfontFamily Ġ= ĠTextStyle . FONT _ FAMILY _ MAIN ĊĠĠĠĠĠĠĠ ĠfontSize Ġ= Ġ 1 2 . pt ĊĠĠĠĠĠĠĠ ĠfontWeight Ġ= ĠFontWeight . w 2 0 0 ĊĠĠĠĠĠĠĠ Ġcolor Ġ= ĠTEXT _ BLACK ĊĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . block ĊĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 0 0 . pct ĊĠĠĠĠĠĠĠ Ġborder Ġ= Ġ" none " ĊĠĠĠĠĠĠĠ Ġresize Ġ= ĠResize . none ĊĠĠĠĠĠĠĠ Ġoutline Ġ= ĠOut line . none ĊĠĠĠĠĠĠĠ Ġborder Bottom ( width Ġ= Ġ 1 . px , Ġstyle Ġ= ĠBorder Style . solid , Ġcolor Ġ= ĠBORDER _ GRAY ) ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġdropdown Choice Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ Ġpadding ( vertical Ġ= Ġ 1 2 . px , Ġhorizontal Ġ= Ġ 1 6 . px ) ĊĠĠĠĠĠĠĠ ĠfontFamily Ġ= ĠTextStyle . FONT _ FAMILY _ MAIN ĊĠĠĠĠĠĠĠ ĠfontSize Ġ= Ġ 1 2 . pt ĊĠĠĠĠĠĠĠ ĠfontWeight Ġ= ĠFontWeight . w 2 0 0 ĊĠĠĠĠĠĠĠ Ġcolor Ġ= ĠTEXT _ BLACK ĊĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . block ĊĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 0 0 . pct ĊĠĠĠĠĠĠĠ Ġhover Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠIN ACTIVE _ GRAY ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġactive Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠH IG HL IGHT _ GRAY ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġdrop Down Divider Ġby Ġcss Ġ{ ĊĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 0 0 . pct ĊĠĠĠĠĠĠĠ Ġheight Ġ= Ġ 1 . px ĊĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠH IG HL IGHT _ GRAY ĊĠĠĠ Ġ} Ċ } Ċ