diff --git a/404.html b/404.html index 67a988182..f06afc15e 100644 --- a/404.html +++ b/404.html @@ -13,7 +13,7 @@ - + diff --git a/assets/js/2abf1b13.74f37f73.js b/assets/js/2abf1b13.74f37f73.js deleted file mode 100644 index 19ac54d8a..000000000 --- a/assets/js/2abf1b13.74f37f73.js +++ /dev/null @@ -1,100 +0,0 @@ -"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[4373],{6672:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>b,frontMatter:()=>c,metadata:()=>h,toc:()=>p});var s=n(5893),i=n(1151),o=n(6957),r=n(7796),a=n(3273),l=n(2665);const c={sidebar_position:3,title:"ListBox",slug:"listbox"},d=void 0,h={id:"components/list-components/list-box",title:"ListBox",description:"The ListBox component is a user interface element designed to display a scrollable list of objects and allows users to select single or multiple items from the list. Users can also interact with the ListBox with the arrow keys.",source:"@site/docs/components/list-components/list-box.md",sourceDirName:"components/list-components",slug:"/components/list-components/listbox",permalink:"/docs/components/list-components/listbox",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/list-components/list-box.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"ListBox",slug:"listbox"},sidebar:"documentationSidebar",previous:{title:"ComboBox",permalink:"/docs/components/list-components/combobox"},next:{title:"ProgressBar",permalink:"/docs/components/progress-bar"}},u={},p=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Selection Options",id:"selection-options",level:2},{value:"Events",id:"events",level:2},{value:"Adding Events",id:"adding-events",level:3},{value:"Removing Events",id:"removing-events",level:3},{value:"Styling",id:"styling",level:2},{value:"Expanses",id:"expanses",level:3},{value:"Shadow Parts",id:"shadow-parts",level:3},{value:"CSS Properties",id:"css-properties",level:3},{value:"Reflected Attributes",id:"reflected-attributes",level:3},{value:"Dependencies",id:"dependencies",level:3},{value:"Best Practices",id:"best-practices",level:2}];function m(e){const t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l.Z,{tooltipText:"This component will render with a shadow DOM, an API built into the browser that facilitates encapsulation.",label:"Shadow",component:"a",href:"../../glossary#shadow-dom",target:"_blank",clickable:!0,iconName:"shadow"}),"\n",(0,s.jsx)(l.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-list-box",href:"https://basishub.github.io/basis-next/#/web-components/bbj-list-box",clickable:!1,iconName:"code"}),"\n",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/button/Button",top:"true"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ListBox"})," component is a user interface element designed to display a scrollable list of objects and allows users to select single or multiple items from the list. Users can also interact with the ",(0,s.jsx)(t.code,{children:"ListBox"})," with the arrow keys."]}),"\n",(0,s.jsx)(o.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.listboxdemos.ListboxDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/listboxdemos/ListboxDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/listboxstyles/listbox_demo.css",height:"250px"}),"\n",(0,s.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"User Role Assignment"}),": In applications with user access control, administrators can use a ",(0,s.jsx)(t.code,{children:"ListBox"})," to assign roles and permissions to users. Users are selected from a list, and the roles or permissions are assigned based on their selection. This ensures precise and controlled access to different features and data within the application."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Project Task Assignment"}),": In project management software, ",(0,s.jsx)(t.code,{children:"ListBox"})," components are useful for assigning tasks to team members. Users can select tasks from a list and assign them to different team members. This simplifies task delegation and ensures that responsibilities are clearly defined within the team."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Multi-Category Filtering"}),": In a search application, users often need to filter search results based on multiple criteria. A ",(0,s.jsx)(t.code,{children:"ListBox"})," can display various filter options, such as"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Product features"}),"\n",(0,s.jsx)(t.li,{children:"Price ranges"}),"\n",(0,s.jsx)(t.li,{children:"Brands."}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Users can select items from each filter category, allowing them to refine search results and find exactly what they're looking for."}),"\n",(0,s.jsxs)(t.ol,{start:"4",children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Content Categorization"}),": In content management systems, ",(0,s.jsx)(t.code,{children:"ListBox"})," components assist in categorizing articles, images, or files. Users can select one or more categories to associate with their content, making it easier to organize and search for content items in the system."]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ListBox()"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ListBox"})," without a label."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ListBox(String label)"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ListBox"})," with the specified label."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ListBox(String label, ComponentEventListener selectListener)"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ListBox"})," with the given label and a listener to handle item selection events."]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"selection-options",children:"Selection Options"}),"\n",(0,s.jsxs)(t.p,{children:["By default, the list box is configured to allow selection of a single item at a time. However, this can be easily configured with a built-in method which allows users to select multiple items ",(0,s.jsx)(t.em,{children:(0,s.jsxs)(t.strong,{children:["using the ",(0,s.jsx)(t.code,{children:"Shift"})," key"]})})," for contiguous entry selection and ",(0,s.jsx)(t.em,{children:(0,s.jsxs)(t.strong,{children:[(0,s.jsx)(t.code,{children:"Control"})," (Windows) or ",(0,s.jsx)(t.code,{children:"Command"})," (Mac) key"]})})," for separate, multiple item selection. Use the ",(0,s.jsx)(t.code,{children:"setMultipleSelection()"})," function to change this property. True will enable multiple selection, false disables it."]}),"\n",(0,s.jsxs)(t.p,{children:["Additionally, the arrow keys can be used to navigate the ",(0,s.jsx)(t.code,{children:"ListBox"}),", and typing a letter key while the ",(0,s.jsx)(t.code,{children:"ListBox"})," has focus will select the option that begins with that letter, or cycle through the options beginning with that letter should multiple options exist."]}),"\n",(0,s.jsx)(o.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.listboxdemos.ListboxMultipleSelection",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/listboxdemos/ListboxMultipleSelection.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/listbox/MultipleSelection.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/listboxstyles/multiple_selection.css",height:"250px"}),"\n",(0,s.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ListBox"})," class provides methods to add and remove event listeners for the events common to all list components."]}),"\n",(0,s.jsx)(t.admonition,{title:"Notice",type:"caution",children:(0,s.jsxs)(t.p,{children:["For a list of events supported by the ",(0,s.jsx)(t.code,{children:"ListBox"}),", see ",(0,s.jsx)(t.a,{href:"/docs/components/list-components/lists#shared-events",children:"this section"})," which outlines shared events amongst list components."]})}),"\n",(0,s.jsx)(t.h3,{id:"adding-events",children:"Adding Events"}),"\n",(0,s.jsx)(t.p,{children:"To add an event listener, use one of the following patterns:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"listBox.addSelectListener(e -> {\r\n //Executed when the event fires\r\n});\r\n\r\n//OR\r\n\r\nlistBox.addSelectListener(new ComponentEventListener() {\r\n @Override\r\n public void onComponentEvent(ComponentEvent e){\r\n //Executed when the event fires\r\n }\r\n});\r\n\r\n//OR\r\n\r\nlistBox.addSelectListener(this::propertyChangeMethod);\n"})}),"\n",(0,s.jsxs)(t.p,{children:["Additional syntactic sugar methods, or aliases, have been added to allow for alternative addition of events by using the ",(0,s.jsx)(t.code,{children:"on"})," prefix followed by the event, such as:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"listBox.onSelect(e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,s.jsx)(t.h3,{id:"removing-events",children:"Removing Events"}),"\n",(0,s.jsx)(t.p,{children:"To remove an event listener, use the appropriate method:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"listBox.removeSelectListener(listener);\n"})}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["When adding an event listener, a ",(0,s.jsx)(t.code,{children:"ListenerRegistration"})," object will be returned. This can be used, among other things, to remove the event later on."]})}),"\n",(0,s.jsx)(t.h2,{id:"styling",children:"Styling"}),"\n",(0,s.jsx)(t.h3,{id:"expanses",children:"Expanses"}),"\n",(0,s.jsxs)(t.p,{children:["There are five ",(0,s.jsx)(t.code,{children:"ListBox"})," expanses that are supported which allow for quick styling without using CSS. Expanses are supported by use of a built-in enum class. ",(0,s.jsx)("br",{})]}),"\n",(0,s.jsx)(o.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.listboxdemos.ListboxExpanses",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/listboxdemos/ListboxExpanses.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/listbox/Expanses.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/listboxstyles/expanse_styles.css",height:"300px"}),"\n",(0,s.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,s.jsxs)(t.p,{children:["These are the various parts of the ",(0,s.jsx)(t.a,{href:"../../glossary#shadow-dom",children:"shadow DOM"})," for the ",(0,s.jsx)(t.code,{children:"ListBox"})," component, which will be required when styling via CSS is desired."]}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).wb,table:"parts",exclusions:""}),"\n",(0,s.jsx)(t.h3,{id:"css-properties",children:"CSS Properties"}),"\n",(0,s.jsx)(t.p,{children:"These are the various CSS properties that are used in the component, with a short description of their use."}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).wb,exclusions:"",table:"properties"}),"\n",(0,s.jsx)(t.h3,{id:"reflected-attributes",children:"Reflected Attributes"}),"\n",(0,s.jsx)(t.p,{children:"The reflected attributes of a component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes."}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).wb,table:"reflects",exclusions:""}),"\n",(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsx)(t.p,{children:"This component relies on the following components - see the related article for more detailed styling information:"}),"\n",(0,s.jsx)(r.Z,{tag:"bbj-list",table:"dependencies"}),"\n",(0,s.jsx)(t.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,s.jsxs)(t.p,{children:["To ensure an optimal user experience when using the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," component, consider the following best practices:"]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Prioritize Information Hierarchy"}),": When using a ",(0,s.jsx)(t.code,{children:"ListBox"}),", ensure that the items are organized in a logical and hierarchical order. Place the most important and commonly used options at the top of the list. This makes it easier for users to find what they need without excessive scrolling."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Limit List Length"}),": Avoid overwhelming users with an excessively long ",(0,s.jsx)(t.code,{children:"ListBox"}),". If there are a large number of items to display, consider implementing pagination, search, or filtering options to help users locate items quickly. Alternatively, you can group items into categories to reduce list length."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Clear and Descriptive Labels"}),": Provide clear and descriptive labels for each item in the ",(0,s.jsx)(t.code,{children:"ListBox"}),". Users should be able to understand the purpose of each option without ambiguity. Use concise and meaningful item labels."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Multi-Selection Feedback"}),": If your ",(0,s.jsx)(t.code,{children:"ListBox"})," allows for multiple selections, provide visual or textual feedback indicating that multiple items can be selected from the list."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Default Selection"}),": Consider setting a default selection for the ",(0,s.jsx)(t.code,{children:"ListBox"}),", especially if one option is more commonly used than others. This can streamline the user experience by pre-selecting the most likely choice."]}),"\n"]}),"\n"]})]})}function b(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>r});n(7294);var s=n(6010);const i={tabItem:"tabItem_Ymn6"};var o=n(5893);function r(e){let{children:t,hidden:n,className:r}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.Z)(i.tabItem,r),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>j});var s=n(7294),i=n(6010),o=n(2466),r=n(6550),a=n(469),l=n(1980),c=n(7392),d=n(12);function h(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function u(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:i}}=e;return{value:t,label:n,attributes:s,default:i}}))}(n);return function(e){const t=(0,c.l)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const i=(0,r.k6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l._X)(o),(0,s.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(i.location.search);t.set(o,e),i.replace({...i.location,search:t.toString()})}),[o,i])]}function b(e){const{defaultValue:t,queryString:n=!1,groupId:i}=e,o=u(e),[r,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:o}))),[c,h]=m({queryString:n,groupId:i}),[b,x]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[i,o]=(0,d.Nk)(n);return[i,(0,s.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:i}),g=(()=>{const e=c??b;return p({value:e,tabValues:o})?e:null})();(0,a.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:r,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),h(e),x(e)}),[h,x,o]),tabValues:o}}var x=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function A(e){let{className:t,block:n,selectedValue:s,selectValue:r,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),i=a[n].value;i!==s&&(c(t),r(i))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>l.push(e),onKeyDown:h,onClick:d,...o,className:(0,i.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function w(e){let{lazy:t,children:n,selectedValue:i}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===i));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==i})))})}function f(e){const t=b(e);return(0,v.jsxs)("div",{className:(0,i.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(A,{...e,...t}),(0,v.jsx)(w,{...e,...t})]})}function j(e){const t=(0,x.Z)();return(0,v.jsx)(f,{...e,children:h(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>x});var s=n(7294),i=n(917),o=n(4866),r=n(5162),a=n(4673),l=n(1750);const c="data:image/png;base64,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",d=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",h="data:image/png;base64,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";var u=n(2949),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const s=i.iv` - display: flex; - justify-content: end; - margin-bottom: -30px; - background-color: transparent; - `,o=i.iv` - position: relative; - cursor: pointer; - z-index: 10; - height: 35px; - width: 35px; - border: none; - background-color: none; - justify-self: flex-end; - margin-right: 5px; - background-color: transparent; - `,r=i.iv` - filter: invert(var(--inversion-percentage)); - `;return(0,p.tZ)("div",{css:s,children:(0,p.tZ)("button",{css:o,onClick:()=>{n(!t)},children:t?(0,p.tZ)("img",{css:r,src:d,className:"icon-tabler-arrow-bar-up"}):(0,p.tZ)("img",{css:r,src:c,className:"icon-tabler-arrow-bar-down"})})})}function b(e){let{url:t}=e;const n=i.iv` - position: relative; - cursor: pointer; - z-index: 10; - height: 35px; - width: 35px; - border: none; - background-color: none; - justify-self: flex-end; - /* margin-right: 5px; */ - margin-top: -5px; - margin-bottom: -20px; - background-color: transparent; - - - `,s=i.iv` - filter: invert(var(--inversion-percentage)); - ::before{ - mix-blend-mode: lighten; /* The blend mode determines how the overlay interacts with the image */ - opacity: 0.5; - } - `;return(0,p.tZ)("button",{css:n,onClick:()=>{window.open(t,"_blank")},children:(0,p.tZ)("img",{css:s,src:h})})}function x(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:h,height:x,frame:g,tabs:v}=e;const[A,w]=(0,s.useState)(""),[f,j]=(0,s.useState)(""),[y,B]=(0,s.useState)(""),[L,D]=(0,s.useState)(!(!n||!c)),[S,k]=(0,s.useState)(!1),[C,Z]=(0,s.useState)({});(0,s.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];Z((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{w(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{B(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];Z((e=>({...e,cssFile:n})))}))}),[]);const E=i.iv` - display: flex; - flex-direction: column; - background-color: var(--code-display-color); - width: 100%; - margin-bottom: 16px; - padding: ${"hidden"==g?"0 15px 0 15px;":"7px 15px 0 15px;"}; - box-shadow: var(--ifm-global-shadow-lw); - `,T=i.iv` - min-height: 100px; - height: 100%; - width: 100%; - height: ${x}; - `,N=i.iv` - border: none; - box-shadow: none; - background-color: var(--code-display-color); - margin-bottom: 0px; - padding: 10px; - - .tabs{ - margin-top: 20px; - } - - summary{ - display: flex; - width: 100%; - justify-content: center; - margin: 0; - font-weight: bold; - ::before{ - left: auto; - margin-left: -100px; - } - } - - `,O=i.iv` - width: 100%; - `,M=i.iv` - display: flex; - justify-content: flex-end; - opacity: 0; - transition: opacity 0.3s ease-in-out; - ${S&&"opacity: 1;"}; - - `;return(0,p.BX)("div",{css:E,children:["hidden"!=g?(0,p.BX)("div",{onMouseEnter:()=>{k(!0)},onMouseLeave:()=>k(!1),css:O,children:[(0,p.tZ)("div",{css:M,children:(0,p.tZ)(b,{url:t})}),(0,p.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,u.I)().colorMode?"dark":"light"),css:T})]}):null,(0,p.BX)(a.Z,{css:N,summary:(0,p.tZ)("summary",{children:"Show Code"}),children:[n&&c?(0,p.tZ)(m,{collapse:L,setCollapse:D}):null,d?(0,p.BX)(o.Z,{children:[(0,p.tZ)(r.Z,{value:v?v[0]:"Java",label:v?v[0]:C.javaFile,default:!0,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:L?A:f})}),(0,p.tZ)(r.Z,{value:v?v[1]:"CSS",label:v?v[1]:C.cssFile,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,p.tZ)(o.Z,{children:(0,p.tZ)(r.Z,{value:v?v[0]:"Java",label:v?v[0]:C.javaFile,default:!0,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:L?A:f})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>u});var s=n(7294),i=n(917),o=n(8230),r=n(4387),a=n(6770);let l=null,c=null;const d={getLatestTag:async function(){return l&&c&&Date.now()-c<36e5?l:async function(){try{const e=await fetch("https://api.github.com/repos/DwcJava/engine/tags"),t=await e.json();return l=t[0].name,c=Date.now(),l}catch(e){return console.error("Error fetching latest tag:",e),null}}()}};var h=n(5944);function u(e){let{type:t,location:n,top:l,children:c,code:u,suffix:p}=e;const[m,b]=(0,s.useState)("");(0,s.useEffect)((()=>{(async()=>{try{let e=await d.getLatestTag();p||(p=""),e||(e="23.04"),b("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/"+e+"/"+n+".html"+p)}catch(e){console.error("Error fetching latest release:",e)}})()}),[]);const x=i.iv` - display: inline; - - ${l&&i.iv` - width: 100%; - display: flex; - justify-content: flex-end; - margin-top: -33px; - margin-bottom: 25px; - `} - `,g=i.iv` - background-color: #0063CC; - :hover{ - color: white; - } - `;return(0,h.BX)(h.HY,{children:["true"===l&&(0,h.tZ)("div",{css:x,children:(0,h.tZ)(o.Z,{title:"JavaDoc",arrow:!0,children:(0,h.tZ)(r.Z,{css:g,label:"Java API",component:"a",href:m,icon:(0,h.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==l&&!u&&(0,h.tZ)("div",{css:x,children:(0,h.tZ)("a",{href:m,target:"_blank",children:c})}),"true"!==l&&u&&(0,h.tZ)("div",{css:x,children:(0,h.tZ)("code",{children:(0,h.tZ)("a",{href:m,target:"_blank",children:c})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var s=n(8397),i=n(5893);function o(e){return(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.Z,{...e})})}},5731:e=>{e.exports=JSON.parse('{"LN":"bbj-app-layout","zx":"bbj-button","Kx":"bbj-cedit","XZ":"bbj-checkbox","gN":"bbj-editbox","iR":"bbj-slider","wb":"bbj-list","Z":"bbj-list-button","Ct":"bbj-list-edit","ko":"bbj-progressbar","EU":"bbj-radio","dy":"bbj-drawer","Vq":"bbj-dialog","JO":"bbj-icon"}')}}]); \ No newline at end of file diff --git a/assets/js/2abf1b13.d193eb50.js b/assets/js/2abf1b13.d193eb50.js new file mode 100644 index 000000000..de25e955d --- /dev/null +++ b/assets/js/2abf1b13.d193eb50.js @@ -0,0 +1,100 @@ +"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[4373],{6672:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>b,frontMatter:()=>c,metadata:()=>h,toc:()=>p});var s=n(5893),i=n(1151),o=n(6957),r=n(7796),a=n(3273),l=n(2665);const c={sidebar_position:3,title:"ListBox",slug:"listbox"},d=void 0,h={id:"components/list-components/list-box",title:"ListBox",description:"The ListBox component is a user interface element designed to display a scrollable list of objects and allows users to select single or multiple items from the list. Users can also interact with the ListBox with the arrow keys.",source:"@site/docs/components/list-components/list-box.md",sourceDirName:"components/list-components",slug:"/components/list-components/listbox",permalink:"/docs/components/list-components/listbox",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/list-components/list-box.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"ListBox",slug:"listbox"},sidebar:"documentationSidebar",previous:{title:"ComboBox",permalink:"/docs/components/list-components/combobox"},next:{title:"ProgressBar",permalink:"/docs/components/progress-bar"}},u={},p=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Selection Options",id:"selection-options",level:2},{value:"Events",id:"events",level:2},{value:"Adding Events",id:"adding-events",level:3},{value:"Removing Events",id:"removing-events",level:3},{value:"Styling",id:"styling",level:2},{value:"Expanses",id:"expanses",level:3},{value:"Shadow Parts",id:"shadow-parts",level:3},{value:"CSS Properties",id:"css-properties",level:3},{value:"Reflected Attributes",id:"reflected-attributes",level:3},{value:"Dependencies",id:"dependencies",level:3},{value:"Best Practices",id:"best-practices",level:2}];function m(e){const t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l.Z,{tooltipText:"This component will render with a shadow DOM, an API built into the browser that facilitates encapsulation.",label:"Shadow",component:"a",href:"../../glossary#shadow-dom",target:"_blank",clickable:!0,iconName:"shadow"}),"\n",(0,s.jsx)(l.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-list-box",href:"https://basishub.github.io/basis-next/#/web-components/bbj-list-box",clickable:!1,iconName:"code"}),"\n",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/button/Button",top:"true"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ListBox"})," component is a user interface element designed to display a scrollable list of objects and allows users to select single or multiple items from the list. Users can also interact with the ",(0,s.jsx)(t.code,{children:"ListBox"})," with the arrow keys."]}),"\n",(0,s.jsx)(o.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.listboxdemos.ListboxDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/listboxdemos/ListboxDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/listboxstyles/listbox_demo.css",height:"250px"}),"\n",(0,s.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"User Role Assignment"}),": In applications with user access control, administrators can use a ",(0,s.jsx)(t.code,{children:"ListBox"})," to assign roles and permissions to users. Users are selected from a list, and the roles or permissions are assigned based on their selection. This ensures precise and controlled access to different features and data within the application."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Project Task Assignment"}),": In project management software, ",(0,s.jsx)(t.code,{children:"ListBox"})," components are useful for assigning tasks to team members. Users can select tasks from a list and assign them to different team members. This simplifies task delegation and ensures that responsibilities are clearly defined within the team."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Multi-Category Filtering"}),": In a search application, users often need to filter search results based on multiple criteria. A ",(0,s.jsx)(t.code,{children:"ListBox"})," can display various filter options, such as"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Product features"}),"\n",(0,s.jsx)(t.li,{children:"Price ranges"}),"\n",(0,s.jsx)(t.li,{children:"Brands."}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Users can select items from each filter category, allowing them to refine search results and find exactly what they're looking for."}),"\n",(0,s.jsxs)(t.ol,{start:"4",children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Content Categorization"}),": In content management systems, ",(0,s.jsx)(t.code,{children:"ListBox"})," components assist in categorizing articles, images, or files. Users can select one or more categories to associate with their content, making it easier to organize and search for content items in the system."]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ListBox()"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ListBox"})," without a label."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ListBox(String label)"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ListBox"})," with the specified label."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ListBox(String label, ComponentEventListener selectListener)"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ListBox"})," with the given label and a listener to handle item selection events."]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"selection-options",children:"Selection Options"}),"\n",(0,s.jsxs)(t.p,{children:["By default, the list box is configured to allow selection of a single item at a time. However, this can be easily configured with a built-in method which allows users to select multiple items ",(0,s.jsx)(t.em,{children:(0,s.jsxs)(t.strong,{children:["using the ",(0,s.jsx)(t.code,{children:"Shift"})," key"]})})," for contiguous entry selection and ",(0,s.jsx)(t.em,{children:(0,s.jsxs)(t.strong,{children:[(0,s.jsx)(t.code,{children:"Control"})," (Windows) or ",(0,s.jsx)(t.code,{children:"Command"})," (Mac) key"]})})," for separate, multiple item selection. Use the ",(0,s.jsx)(t.code,{children:"setMultipleSelection()"})," function to change this property. True will enable multiple selection, false disables it."]}),"\n",(0,s.jsxs)(t.p,{children:["Additionally, the arrow keys can be used to navigate the ",(0,s.jsx)(t.code,{children:"ListBox"}),", and typing a letter key while the ",(0,s.jsx)(t.code,{children:"ListBox"})," has focus will select the option that begins with that letter, or cycle through the options beginning with that letter should multiple options exist."]}),"\n",(0,s.jsx)(o.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.listboxdemos.ListboxMultipleSelection",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/listboxdemos/ListboxMultipleSelection.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/listbox/MultipleSelection.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/listboxstyles/multiple_selection.css",height:"250px"}),"\n",(0,s.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ListBox"})," class provides methods to add and remove event listeners for the events common to all list components."]}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["For a list of events supported by the ",(0,s.jsx)(t.code,{children:"ListBox"}),", see ",(0,s.jsx)(t.a,{href:"/docs/components/list-components/lists#shared-events",children:"this section"})," which outlines shared events amongst list components."]})}),"\n",(0,s.jsx)(t.h3,{id:"adding-events",children:"Adding Events"}),"\n",(0,s.jsx)(t.p,{children:"To add an event listener, use one of the following patterns:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"listBox.addSelectListener(e -> {\r\n //Executed when the event fires\r\n});\r\n\r\n//OR\r\n\r\nlistBox.addSelectListener(new ComponentEventListener() {\r\n @Override\r\n public void onComponentEvent(ComponentEvent e){\r\n //Executed when the event fires\r\n }\r\n});\r\n\r\n//OR\r\n\r\nlistBox.addSelectListener(this::propertyChangeMethod);\n"})}),"\n",(0,s.jsxs)(t.p,{children:["Additional syntactic sugar methods, or aliases, have been added to allow for alternative addition of events by using the ",(0,s.jsx)(t.code,{children:"on"})," prefix followed by the event, such as:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"listBox.onSelect(e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,s.jsx)(t.h3,{id:"removing-events",children:"Removing Events"}),"\n",(0,s.jsx)(t.p,{children:"To remove an event listener, use the appropriate method:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"listBox.removeSelectListener(listener);\n"})}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["When adding an event listener, a ",(0,s.jsx)(t.code,{children:"ListenerRegistration"})," object will be returned. This can be used, among other things, to remove the event later on."]})}),"\n",(0,s.jsx)(t.h2,{id:"styling",children:"Styling"}),"\n",(0,s.jsx)(t.h3,{id:"expanses",children:"Expanses"}),"\n",(0,s.jsxs)(t.p,{children:["There are five ",(0,s.jsx)(t.code,{children:"ListBox"})," expanses that are supported which allow for quick styling without using CSS. Expanses are supported by use of a built-in enum class. ",(0,s.jsx)("br",{})]}),"\n",(0,s.jsx)(o.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.listboxdemos.ListboxExpanses",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/listboxdemos/ListboxExpanses.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/listbox/Expanses.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/listboxstyles/expanse_styles.css",height:"300px"}),"\n",(0,s.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,s.jsxs)(t.p,{children:["These are the various parts of the ",(0,s.jsx)(t.a,{href:"../../glossary#shadow-dom",children:"shadow DOM"})," for the ",(0,s.jsx)(t.code,{children:"ListBox"})," component, which will be required when styling via CSS is desired."]}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).wb,table:"parts",exclusions:""}),"\n",(0,s.jsx)(t.h3,{id:"css-properties",children:"CSS Properties"}),"\n",(0,s.jsx)(t.p,{children:"These are the various CSS properties that are used in the component, with a short description of their use."}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).wb,exclusions:"",table:"properties"}),"\n",(0,s.jsx)(t.h3,{id:"reflected-attributes",children:"Reflected Attributes"}),"\n",(0,s.jsx)(t.p,{children:"The reflected attributes of a component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes."}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).wb,table:"reflects",exclusions:""}),"\n",(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsx)(t.p,{children:"This component relies on the following components - see the related article for more detailed styling information:"}),"\n",(0,s.jsx)(r.Z,{tag:"bbj-list",table:"dependencies"}),"\n",(0,s.jsx)(t.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,s.jsxs)(t.p,{children:["To ensure an optimal user experience when using the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," component, consider the following best practices:"]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Prioritize Information Hierarchy"}),": When using a ",(0,s.jsx)(t.code,{children:"ListBox"}),", ensure that the items are organized in a logical and hierarchical order. Place the most important and commonly used options at the top of the list. This makes it easier for users to find what they need without excessive scrolling."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Limit List Length"}),": Avoid overwhelming users with an excessively long ",(0,s.jsx)(t.code,{children:"ListBox"}),". If there are a large number of items to display, consider implementing pagination, search, or filtering options to help users locate items quickly. Alternatively, you can group items into categories to reduce list length."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Clear and Descriptive Labels"}),": Provide clear and descriptive labels for each item in the ",(0,s.jsx)(t.code,{children:"ListBox"}),". Users should be able to understand the purpose of each option without ambiguity. Use concise and meaningful item labels."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Multi-Selection Feedback"}),": If your ",(0,s.jsx)(t.code,{children:"ListBox"})," allows for multiple selections, provide visual or textual feedback indicating that multiple items can be selected from the list."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Default Selection"}),": Consider setting a default selection for the ",(0,s.jsx)(t.code,{children:"ListBox"}),", especially if one option is more commonly used than others. This can streamline the user experience by pre-selecting the most likely choice."]}),"\n"]}),"\n"]})]})}function b(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>r});n(7294);var s=n(6010);const i={tabItem:"tabItem_Ymn6"};var o=n(5893);function r(e){let{children:t,hidden:n,className:r}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.Z)(i.tabItem,r),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>j});var s=n(7294),i=n(6010),o=n(2466),r=n(6550),a=n(469),l=n(1980),c=n(7392),d=n(12);function h(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function u(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:i}}=e;return{value:t,label:n,attributes:s,default:i}}))}(n);return function(e){const t=(0,c.l)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const i=(0,r.k6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l._X)(o),(0,s.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(i.location.search);t.set(o,e),i.replace({...i.location,search:t.toString()})}),[o,i])]}function b(e){const{defaultValue:t,queryString:n=!1,groupId:i}=e,o=u(e),[r,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:o}))),[c,h]=m({queryString:n,groupId:i}),[b,x]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[i,o]=(0,d.Nk)(n);return[i,(0,s.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:i}),g=(()=>{const e=c??b;return p({value:e,tabValues:o})?e:null})();(0,a.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:r,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),h(e),x(e)}),[h,x,o]),tabValues:o}}var x=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function A(e){let{className:t,block:n,selectedValue:s,selectValue:r,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),i=a[n].value;i!==s&&(c(t),r(i))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>l.push(e),onKeyDown:h,onClick:d,...o,className:(0,i.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function w(e){let{lazy:t,children:n,selectedValue:i}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===i));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==i})))})}function f(e){const t=b(e);return(0,v.jsxs)("div",{className:(0,i.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(A,{...e,...t}),(0,v.jsx)(w,{...e,...t})]})}function j(e){const t=(0,x.Z)();return(0,v.jsx)(f,{...e,children:h(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>x});var s=n(7294),i=n(917),o=n(4866),r=n(5162),a=n(4673),l=n(1750);const c="data:image/png;base64,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",d=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",h="data:image/png;base64,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";var u=n(2949),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const s=i.iv` + display: flex; + justify-content: end; + margin-bottom: -30px; + background-color: transparent; + `,o=i.iv` + position: relative; + cursor: pointer; + z-index: 10; + height: 35px; + width: 35px; + border: none; + background-color: none; + justify-self: flex-end; + margin-right: 5px; + background-color: transparent; + `,r=i.iv` + filter: invert(var(--inversion-percentage)); + `;return(0,p.tZ)("div",{css:s,children:(0,p.tZ)("button",{css:o,onClick:()=>{n(!t)},children:t?(0,p.tZ)("img",{css:r,src:d,className:"icon-tabler-arrow-bar-up"}):(0,p.tZ)("img",{css:r,src:c,className:"icon-tabler-arrow-bar-down"})})})}function b(e){let{url:t}=e;const n=i.iv` + position: relative; + cursor: pointer; + z-index: 10; + height: 35px; + width: 35px; + border: none; + background-color: none; + justify-self: flex-end; + /* margin-right: 5px; */ + margin-top: -5px; + margin-bottom: -20px; + background-color: transparent; + + + `,s=i.iv` + filter: invert(var(--inversion-percentage)); + ::before{ + mix-blend-mode: lighten; /* The blend mode determines how the overlay interacts with the image */ + opacity: 0.5; + } + `;return(0,p.tZ)("button",{css:n,onClick:()=>{window.open(t,"_blank")},children:(0,p.tZ)("img",{css:s,src:h})})}function x(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:h,height:x,frame:g,tabs:v}=e;const[A,w]=(0,s.useState)(""),[f,j]=(0,s.useState)(""),[y,B]=(0,s.useState)(""),[L,D]=(0,s.useState)(!(!n||!c)),[S,k]=(0,s.useState)(!1),[C,Z]=(0,s.useState)({});(0,s.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];Z((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{w(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{B(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];Z((e=>({...e,cssFile:n})))}))}),[]);const E=i.iv` + display: flex; + flex-direction: column; + background-color: var(--code-display-color); + width: 100%; + margin-bottom: 16px; + padding: ${"hidden"==g?"0 15px 0 15px;":"7px 15px 0 15px;"}; + box-shadow: var(--ifm-global-shadow-lw); + `,T=i.iv` + min-height: 100px; + height: 100%; + width: 100%; + height: ${x}; + `,N=i.iv` + border: none; + box-shadow: none; + background-color: var(--code-display-color); + margin-bottom: 0px; + padding: 10px; + + .tabs{ + margin-top: 20px; + } + + summary{ + display: flex; + width: 100%; + justify-content: center; + margin: 0; + font-weight: bold; + ::before{ + left: auto; + margin-left: -100px; + } + } + + `,O=i.iv` + width: 100%; + `,M=i.iv` + display: flex; + justify-content: flex-end; + opacity: 0; + transition: opacity 0.3s ease-in-out; + ${S&&"opacity: 1;"}; + + `;return(0,p.BX)("div",{css:E,children:["hidden"!=g?(0,p.BX)("div",{onMouseEnter:()=>{k(!0)},onMouseLeave:()=>k(!1),css:O,children:[(0,p.tZ)("div",{css:M,children:(0,p.tZ)(b,{url:t})}),(0,p.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,u.I)().colorMode?"dark":"light"),css:T})]}):null,(0,p.BX)(a.Z,{css:N,summary:(0,p.tZ)("summary",{children:"Show Code"}),children:[n&&c?(0,p.tZ)(m,{collapse:L,setCollapse:D}):null,d?(0,p.BX)(o.Z,{children:[(0,p.tZ)(r.Z,{value:v?v[0]:"Java",label:v?v[0]:C.javaFile,default:!0,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:L?A:f})}),(0,p.tZ)(r.Z,{value:v?v[1]:"CSS",label:v?v[1]:C.cssFile,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,p.tZ)(o.Z,{children:(0,p.tZ)(r.Z,{value:v?v[0]:"Java",label:v?v[0]:C.javaFile,default:!0,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:L?A:f})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>u});var s=n(7294),i=n(917),o=n(8230),r=n(4387),a=n(6770);let l=null,c=null;const d={getLatestTag:async function(){return l&&c&&Date.now()-c<36e5?l:async function(){try{const e=await fetch("https://api.github.com/repos/DwcJava/engine/tags"),t=await e.json();return l=t[0].name,c=Date.now(),l}catch(e){return console.error("Error fetching latest tag:",e),null}}()}};var h=n(5944);function u(e){let{type:t,location:n,top:l,children:c,code:u,suffix:p}=e;const[m,b]=(0,s.useState)("");(0,s.useEffect)((()=>{(async()=>{try{let e=await d.getLatestTag();p||(p=""),e||(e="23.04"),b("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/"+e+"/"+n+".html"+p)}catch(e){console.error("Error fetching latest release:",e)}})()}),[]);const x=i.iv` + display: inline; + + ${l&&i.iv` + width: 100%; + display: flex; + justify-content: flex-end; + margin-top: -33px; + margin-bottom: 25px; + `} + `,g=i.iv` + background-color: #0063CC; + :hover{ + color: white; + } + `;return(0,h.BX)(h.HY,{children:["true"===l&&(0,h.tZ)("div",{css:x,children:(0,h.tZ)(o.Z,{title:"JavaDoc",arrow:!0,children:(0,h.tZ)(r.Z,{css:g,label:"Java API",component:"a",href:m,icon:(0,h.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==l&&!u&&(0,h.tZ)("div",{css:x,children:(0,h.tZ)("a",{href:m,target:"_blank",children:c})}),"true"!==l&&u&&(0,h.tZ)("div",{css:x,children:(0,h.tZ)("code",{children:(0,h.tZ)("a",{href:m,target:"_blank",children:c})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var s=n(8397),i=n(5893);function o(e){return(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.Z,{...e})})}},5731:e=>{e.exports=JSON.parse('{"LN":"bbj-app-layout","zx":"bbj-button","Kx":"bbj-cedit","XZ":"bbj-checkbox","gN":"bbj-editbox","iR":"bbj-slider","wb":"bbj-list","Z":"bbj-list-button","Ct":"bbj-list-edit","ko":"bbj-progressbar","EU":"bbj-radio","dy":"bbj-drawer","Vq":"bbj-dialog","JO":"bbj-icon"}')}}]); \ No newline at end of file diff --git a/assets/js/4eb8144b.8d286d44.js b/assets/js/4eb8144b.6f555175.js similarity index 50% rename from assets/js/4eb8144b.8d286d44.js rename to assets/js/4eb8144b.6f555175.js index 9afa675a4..493c310d7 100644 --- a/assets/js/4eb8144b.8d286d44.js +++ b/assets/js/4eb8144b.6f555175.js @@ -1,4 +1,4 @@ -"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[2498],{8306:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>b,frontMatter:()=>c,metadata:()=>h,toc:()=>p});var s=n(5893),o=n(1151),i=n(6957),r=n(7796),a=n(3273),l=n(2665);const c={sidebar_position:1,title:"ChoiceBox",slug:"choicebox"},d=void 0,h={id:"components/list-components/choice-box",title:"ChoiceBox",description:"The ChoiceBox component is a user interface element designed to present users with a list of options or choices. Users can select a single option from this list, typically by clicking the ChoiceBox, which triggers the display of a dropdown list containing available choices. Users can also interact with the ChoiceBox with the arrow keys. When a user makes a selection, the chosen option is then displayed in the ChoiceBox button.",source:"@site/docs/components/list-components/choice-box.md",sourceDirName:"components/list-components",slug:"/components/list-components/choicebox",permalink:"/docs/components/list-components/choicebox",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/list-components/choice-box.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1,title:"ChoiceBox",slug:"choicebox"},sidebar:"documentationSidebar",previous:{title:"Lists",permalink:"/docs/components/list-components/lists"},next:{title:"ComboBox",permalink:"/docs/components/list-components/combobox"}},u={},p=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Dropdown Type",id:"dropdown-type",level:2},{value:"Max Row Count",id:"max-row-count",level:2},{value:"Opening Dimensions",id:"opening-dimensions",level:2},{value:"Events",id:"events",level:2},{value:"Adding Events",id:"adding-events",level:3},{value:"Removing Events",id:"removing-events",level:3},{value:"Styling",id:"styling",level:2},{value:"Expanses",id:"expanses",level:3},{value:"Themes",id:"themes",level:3},{value:"Shadow Parts",id:"shadow-parts",level:3},{value:"CSS Properties",id:"css-properties",level:3},{value:"Reflected Attributes",id:"reflected-attributes",level:3},{value:"Dependencies",id:"dependencies",level:3},{value:"Best Practices",id:"best-practices",level:2}];function m(e){const t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l.Z,{tooltipText:"This component will render with a shadow DOM, an API built into the browser that facilitates encapsulation.",label:"Shadow",component:"a",href:"../../glossary#shadow-dom",target:"_blank",clickable:!0,iconName:"shadow"}),"\n",(0,s.jsx)(l.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-list-button",href:"https://basishub.github.io/basis-next/#/web-components/bbj-list-button",clickable:!1,iconName:"code"}),"\n",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/button/Button",top:"true"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," component is a user interface element designed to present users with a list of options or choices. Users can select a single option from this list, typically by clicking the ",(0,s.jsx)(t.code,{children:"ChoiceBox"}),", which triggers the display of a dropdown list containing available choices. Users can also interact with the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," with the arrow keys. When a user makes a selection, the chosen option is then displayed in the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," button."]}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.comboboxdemos.ChoiceBoxDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ChoiceBoxDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/comboboxstyles/demo_styles.css",height:"250px"}),"\n",(0,s.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"ChoiceBox"})," components are used for various purposes, such as selecting items from a menu, choosing from a list of categories, or picking options from predefined sets. They provide an organized and visually pleasing way for users to make selections, particularly when there are multiple options available. Common usages include:"]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"User Selection of Options"}),": The primary purpose of a ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," is to allow users to select a single option from a list. This is valuable in applications that require users to make choices, such as:"]}),"\n"]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Selecting items from a list"}),"\n",(0,s.jsx)(t.li,{children:"Choosing from a list of categories"}),"\n",(0,s.jsx)(t.li,{children:"Picking options from predefined sets"}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.ol,{start:"2",children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Form Inputs"}),": When designing forms that require users to input specific options, the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," simplifies the selection process. Whether it's selecting a country, state, or any other option from a predefined list, the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," streamlines the input process."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Filtering and Sorting"}),": ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," can be employed for filtering and sorting tasks in applications. Users can choose filter criteria or sorting preferences from a list, facilitating the organization and navigation of data."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Configuration and Settings"}),": When your application includes settings or configuration options, the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," provides an intuitive way for users to adjust preferences. Users can pick settings from a list, making it easy to tailor the application to their needs."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," is intended for use when a preset number of options are available, and custom options should not be allowed or included. If allowing users to enter custom values is desired, use a ",(0,s.jsx)(t.a,{href:"/docs/components/list-components/combobox",children:(0,s.jsx)(t.code,{children:"ComboBox"})})," instead"]})}),"\n",(0,s.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ChoiceBox()"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," without a label."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ChoiceBox(String label)"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," with the specified label."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ChoiceBox(String label, ComponentEventListener selectListener)"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," with the given label and a listener to handle item selection events."]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"dropdown-type",children:"Dropdown Type"}),"\n",(0,s.jsxs)(t.p,{children:["Using the ",(0,s.jsx)(t.code,{children:"setDropdownType()"})," method will assign a value to the ",(0,s.jsx)(t.code,{children:"type"})," attribute of a ",(0,s.jsx)(t.code,{children:"ChoiceBox"}),", and a corresponding value for the ",(0,s.jsx)(t.code,{children:"data-dropdown-for"})," attribute in the dropdown of the ",(0,s.jsx)(t.code,{children:"ChoiceBox"}),". This is helpful for styling, as the dropdown is taken out of its current position in the DOM and relocated to the end of the page body when opened."]}),"\n",(0,s.jsx)(t.p,{children:"This detachment creates a situation where directly targeting the\r\ndropdown using CSS or shadow part selectors from the parent component becomes challenging, unless you make use of the dropdown type attribute."}),"\n",(0,s.jsx)(t.p,{children:"In the demo below, the Dropdown type is set and used in the CSS file to select the dropdown and change the background color."}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.comboboxdemos.ChoiceBoxDropdownType",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ChoiceBoxDropdownType.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/comboboxstyles/dropdown_styles.css",height:"100px"}),"\n",(0,s.jsx)(t.h2,{id:"max-row-count",children:"Max Row Count"}),"\n",(0,s.jsxs)(t.p,{children:["By default, the number of rows displayed in the dropdown of a ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," will be increased to fit the content. However, using the ",(0,s.jsx)(t.code,{children:"setMaxRowCount()"})," method allows for control over how many items are displayed."]}),"\n",(0,s.jsx)(t.admonition,{type:"caution",children:(0,s.jsx)(t.p,{children:"Using a number that is less than or equal to 0 will result in unsetting this property."})}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.comboboxdemos.ChoiceBoxMaxRowDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ChoiceBoxMaxRowDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/comboboxstyles/demo_styles.css",height:"250px"}),"\n",(0,s.jsx)(t.h2,{id:"opening-dimensions",children:"Opening Dimensions"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," component has methods that allow manipulation of the dropdown dimensions. The ",(0,s.jsx)(t.strong,{children:"maximum height"})," and ",(0,s.jsx)(t.strong,{children:"minimum width"})," of the dropdown can be set using the ",(0,s.jsx)(t.code,{children:"setOpenHeight()"})," and ",(0,s.jsx)(t.code,{children:"setOpenWidth()"})," methods, respectively."]}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["Passing a ",(0,s.jsx)(t.code,{children:"String"})," value to either of these methods will allow for ",(0,s.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units",children:"any valid CSS unit"})," to be applied, such as pixels, viewport dimensions, or other valid rules. Passing an ",(0,s.jsx)(t.code,{children:"int"})," will set the value passed in pixels."]})}),"\n",(0,s.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," class provides methods to add and remove event listeners for the following events, as well as events common to all list components:"]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"center"},children:"Events"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/event/ListOpenEvent",code:"true",children:"ListOpenEvent"})}),(0,s.jsx)(t.td,{children:"An event which is fired when a list dropdown is opened."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/event/ListCloseEvent",code:"true",children:"ListCloseEvent"})}),(0,s.jsx)(t.td,{children:"An event which is fired when a list dropdown is closed."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/event/ListClickEvent",code:"true",children:"ListClickEvent"})}),(0,s.jsx)(t.td,{children:"This event is triggered when the user clicks an item from a List-based component."})]})]})]}),"\n",(0,s.jsx)(t.admonition,{title:"Notice",type:"caution",children:(0,s.jsxs)(t.p,{children:["For a list of additional events supported by the ",(0,s.jsx)(t.code,{children:"ChoiceBox"}),", see ",(0,s.jsx)(t.a,{href:"/docs/components/list-components/lists#shared-events",children:"this section"})," which outlines shared events amongst list components."]})}),"\n",(0,s.jsx)(t.h3,{id:"adding-events",children:"Adding Events"}),"\n",(0,s.jsx)(t.p,{children:"To add an event listener, use one of the following patterns:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"choiceBox.addOpenListener(e -> {\r\n //Executed when the event fires\r\n});\r\n\r\n//OR\r\n\r\nchoiceBox.addOpenListener(new ComponentEventListener() {\r\n @Override\r\n public void onComponentEvent(ComponentEvent e){\r\n //Executed when the event fires\r\n }\r\n});\r\n\r\n//OR\r\n\r\nchoiceBox.addOpenListener(this::listOpenMethod);\n"})}),"\n",(0,s.jsxs)(t.p,{children:["Additional syntactic sugar methods, or aliases, have been added to allow for alternative addition of events by using the ",(0,s.jsx)(t.code,{children:"on"})," prefix followed by the event, such as:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"choiceBox.onOpen(e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,s.jsx)(t.h3,{id:"removing-events",children:"Removing Events"}),"\n",(0,s.jsx)(t.p,{children:"To remove an event listener, use the appropriate method:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"choiceBox.removeOpenListener(listener);\n"})}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["When adding an event listener, a ",(0,s.jsx)(t.code,{children:"ListenerRegistration"})," object will be returned. This can be used, among other things, to remove the event later on."]})}),"\n",(0,s.jsx)(t.h2,{id:"styling",children:"Styling"}),"\n",(0,s.jsx)(t.h3,{id:"expanses",children:"Expanses"}),"\n",(0,s.jsxs)(t.p,{children:["There are five ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," expanses that are supported which allow for quick styling without using CSS. Expanses are supported by use of a built-in enum class. ",(0,s.jsx)("br",{})]}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.comboboxdemos.ComboboxExpanseDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ComboboxExpanseDemo.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/combobox/Expanse.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/comboboxstyles/expanse_styles.css",height:"150px"}),"\n",(0,s.jsx)(t.h3,{id:"themes",children:"Themes"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," component comes with 14 themes built in for quick styling without the use of CSS. Theming is supported by use of a built-in enum class."]}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.comboboxdemos.ComboboxThemeDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ComboboxThemeDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/comboboxstyles/theme_styles.css",height:"170px"}),"\n",(0,s.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,s.jsxs)(t.p,{children:["These are the various parts of the ",(0,s.jsx)(t.a,{href:"../../glossary#shadow-dom",children:"shadow DOM"})," for the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," component, which will be required when styling via CSS is desired."]}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).Z,table:"parts",exclusions:""}),"\n",(0,s.jsx)(t.h3,{id:"css-properties",children:"CSS Properties"}),"\n",(0,s.jsx)(t.p,{children:"These are the various CSS properties that are used in the component, with a short description of their use."}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).Z,exclusions:"",table:"properties"}),"\n",(0,s.jsx)(t.h3,{id:"reflected-attributes",children:"Reflected Attributes"}),"\n",(0,s.jsx)(t.p,{children:"The reflected attributes of a component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes."}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).Z,table:"reflects",exclusions:""}),"\n",(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsx)(t.p,{children:"This component relies on the following components - see the related article for more detailed styling information:"}),"\n",(0,s.jsx)(r.Z,{tag:"bbj-list-button",table:"dependencies"}),"\n",(0,s.jsx)(t.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,s.jsxs)(t.p,{children:["To ensure an optimal user experience when using the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," component, consider the following best practices:"]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Clear and Limited Options"}),": Keep the list of choices concise where possible, and relevant to the user's task. A ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," is ideal for presenting a clear list of options."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"User-Friendly Labels"}),": Ensure that the displayed labels for each option are user-friendly and self-explanatory. Make sure users can easily understand the purpose of each choice."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Default Selection"}),": Set a default selection when the ChoiceBox is initially displayed. This ensures a pre-selected option, reducing the number of interactions required to make a choice."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"ChoiceBox vs. Other List Components"}),": A ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," should be used over other List components in the following situations:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Multiple Selection is not needed or required, and all items do not need to be displayed at once."}),"\n",(0,s.jsx)(t.li,{children:"A selection of predefined choices is desired, preventing users from entering custom or unexpected data."}),"\n"]}),"\n"]})]})}function b(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>r});n(7294);var s=n(6010);const o={tabItem:"tabItem_Ymn6"};var i=n(5893);function r(e){let{children:t,hidden:n,className:r}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,s.Z)(o.tabItem,r),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>j});var s=n(7294),o=n(6010),i=n(2466),r=n(6550),a=n(469),l=n(1980),c=n(7392),d=n(12);function h(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function u(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:o}}=e;return{value:t,label:n,attributes:s,default:o}}))}(n);return function(e){const t=(0,c.l)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const o=(0,r.k6)(),i=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l._X)(i),(0,s.useCallback)((e=>{if(!i)return;const t=new URLSearchParams(o.location.search);t.set(i,e),o.replace({...o.location,search:t.toString()})}),[i,o])]}function b(e){const{defaultValue:t,queryString:n=!1,groupId:o}=e,i=u(e),[r,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:i}))),[c,h]=m({queryString:n,groupId:o}),[b,x]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[o,i]=(0,d.Nk)(n);return[o,(0,s.useCallback)((e=>{n&&i.set(e)}),[n,i])]}({groupId:o}),g=(()=>{const e=c??b;return p({value:e,tabValues:i})?e:null})();(0,a.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:r,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);l(e),h(e),x(e)}),[h,x,i]),tabValues:i}}var x=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function w(e){let{className:t,block:n,selectedValue:s,selectValue:r,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),o=a[n].value;o!==s&&(c(t),r(o))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:i}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>l.push(e),onKeyDown:h,onClick:d,...i,className:(0,o.Z)("tabs__item",g.tabItem,i?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function f(e){let{lazy:t,children:n,selectedValue:o}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function A(e){const t=b(e);return(0,v.jsxs)("div",{className:(0,o.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(w,{...e,...t}),(0,v.jsx)(f,{...e,...t})]})}function j(e){const t=(0,x.Z)();return(0,v.jsx)(A,{...e,children:h(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>x});var s=n(7294),o=n(917),i=n(4866),r=n(5162),a=n(4673),l=n(1750);const c="data:image/png;base64,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",d=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",h="data:image/png;base64,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";var u=n(2949),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const s=o.iv` +"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[2498],{8306:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>b,frontMatter:()=>c,metadata:()=>h,toc:()=>p});var s=n(5893),o=n(1151),i=n(6957),r=n(7796),a=n(3273),l=n(2665);const c={sidebar_position:1,title:"ChoiceBox",slug:"choicebox"},d=void 0,h={id:"components/list-components/choice-box",title:"ChoiceBox",description:"The ChoiceBox component is a user interface element designed to present users with a list of options or choices. Users can select a single option from this list, typically by clicking the ChoiceBox, which triggers the display of a dropdown list containing available choices. Users can also interact with the ChoiceBox with the arrow keys. When a user makes a selection, the chosen option is then displayed in the ChoiceBox button.",source:"@site/docs/components/list-components/choice-box.md",sourceDirName:"components/list-components",slug:"/components/list-components/choicebox",permalink:"/docs/components/list-components/choicebox",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/list-components/choice-box.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1,title:"ChoiceBox",slug:"choicebox"},sidebar:"documentationSidebar",previous:{title:"Lists",permalink:"/docs/components/list-components/lists"},next:{title:"ComboBox",permalink:"/docs/components/list-components/combobox"}},u={},p=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Dropdown Type",id:"dropdown-type",level:2},{value:"Max Row Count",id:"max-row-count",level:2},{value:"Opening Dimensions",id:"opening-dimensions",level:2},{value:"Events",id:"events",level:2},{value:"Adding Events",id:"adding-events",level:3},{value:"Removing Events",id:"removing-events",level:3},{value:"Styling",id:"styling",level:2},{value:"Expanses",id:"expanses",level:3},{value:"Themes",id:"themes",level:3},{value:"Shadow Parts",id:"shadow-parts",level:3},{value:"CSS Properties",id:"css-properties",level:3},{value:"Reflected Attributes",id:"reflected-attributes",level:3},{value:"Dependencies",id:"dependencies",level:3},{value:"Best Practices",id:"best-practices",level:2}];function m(e){const t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l.Z,{tooltipText:"This component will render with a shadow DOM, an API built into the browser that facilitates encapsulation.",label:"Shadow",component:"a",href:"../../glossary#shadow-dom",target:"_blank",clickable:!0,iconName:"shadow"}),"\n",(0,s.jsx)(l.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-list-button",href:"https://basishub.github.io/basis-next/#/web-components/bbj-list-button",clickable:!1,iconName:"code"}),"\n",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/button/Button",top:"true"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," component is a user interface element designed to present users with a list of options or choices. Users can select a single option from this list, typically by clicking the ",(0,s.jsx)(t.code,{children:"ChoiceBox"}),", which triggers the display of a dropdown list containing available choices. Users can also interact with the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," with the arrow keys. When a user makes a selection, the chosen option is then displayed in the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," button."]}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.comboboxdemos.ChoiceBoxDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ChoiceBoxDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/comboboxstyles/demo_styles.css",height:"250px"}),"\n",(0,s.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"ChoiceBox"})," components are used for various purposes, such as selecting items from a menu, choosing from a list of categories, or picking options from predefined sets. They provide an organized and visually pleasing way for users to make selections, particularly when there are multiple options available. Common usages include:"]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"User Selection of Options"}),": The primary purpose of a ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," is to allow users to select a single option from a list. This is valuable in applications that require users to make choices, such as:"]}),"\n"]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Selecting items from a list"}),"\n",(0,s.jsx)(t.li,{children:"Choosing from a list of categories"}),"\n",(0,s.jsx)(t.li,{children:"Picking options from predefined sets"}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.ol,{start:"2",children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Form Inputs"}),": When designing forms that require users to input specific options, the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," simplifies the selection process. Whether it's selecting a country, state, or any other option from a predefined list, the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," streamlines the input process."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Filtering and Sorting"}),": ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," can be employed for filtering and sorting tasks in applications. Users can choose filter criteria or sorting preferences from a list, facilitating the organization and navigation of data."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Configuration and Settings"}),": When your application includes settings or configuration options, the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," provides an intuitive way for users to adjust preferences. Users can pick settings from a list, making it easy to tailor the application to their needs."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," is intended for use when a preset number of options are available, and custom options should not be allowed or included. If allowing users to enter custom values is desired, use a ",(0,s.jsx)(t.a,{href:"/docs/components/list-components/combobox",children:(0,s.jsx)(t.code,{children:"ComboBox"})})," instead"]})}),"\n",(0,s.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ChoiceBox()"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," without a label."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ChoiceBox(String label)"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," with the specified label."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ChoiceBox(String label, ComponentEventListener selectListener)"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," with the given label and a listener to handle item selection events."]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"dropdown-type",children:"Dropdown Type"}),"\n",(0,s.jsxs)(t.p,{children:["Using the ",(0,s.jsx)(t.code,{children:"setDropdownType()"})," method will assign a value to the ",(0,s.jsx)(t.code,{children:"type"})," attribute of a ",(0,s.jsx)(t.code,{children:"ChoiceBox"}),", and a corresponding value for the ",(0,s.jsx)(t.code,{children:"data-dropdown-for"})," attribute in the dropdown of the ",(0,s.jsx)(t.code,{children:"ChoiceBox"}),". This is helpful for styling, as the dropdown is taken out of its current position in the DOM and relocated to the end of the page body when opened."]}),"\n",(0,s.jsx)(t.p,{children:"This detachment creates a situation where directly targeting the\r\ndropdown using CSS or shadow part selectors from the parent component becomes challenging, unless you make use of the dropdown type attribute."}),"\n",(0,s.jsx)(t.p,{children:"In the demo below, the Dropdown type is set and used in the CSS file to select the dropdown and change the background color."}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.comboboxdemos.ChoiceBoxDropdownType",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ChoiceBoxDropdownType.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/comboboxstyles/dropdown_styles.css",height:"100px"}),"\n",(0,s.jsx)(t.h2,{id:"max-row-count",children:"Max Row Count"}),"\n",(0,s.jsxs)(t.p,{children:["By default, the number of rows displayed in the dropdown of a ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," will be increased to fit the content. However, using the ",(0,s.jsx)(t.code,{children:"setMaxRowCount()"})," method allows for control over how many items are displayed."]}),"\n",(0,s.jsx)(t.admonition,{type:"caution",children:(0,s.jsx)(t.p,{children:"Using a number that is less than or equal to 0 will result in unsetting this property."})}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.comboboxdemos.ChoiceBoxMaxRowDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ChoiceBoxMaxRowDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/comboboxstyles/demo_styles.css",height:"250px"}),"\n",(0,s.jsx)(t.h2,{id:"opening-dimensions",children:"Opening Dimensions"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," component has methods that allow manipulation of the dropdown dimensions. The ",(0,s.jsx)(t.strong,{children:"maximum height"})," and ",(0,s.jsx)(t.strong,{children:"minimum width"})," of the dropdown can be set using the ",(0,s.jsx)(t.code,{children:"setOpenHeight()"})," and ",(0,s.jsx)(t.code,{children:"setOpenWidth()"})," methods, respectively."]}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["Passing a ",(0,s.jsx)(t.code,{children:"String"})," value to either of these methods will allow for ",(0,s.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units",children:"any valid CSS unit"})," to be applied, such as pixels, viewport dimensions, or other valid rules. Passing an ",(0,s.jsx)(t.code,{children:"int"})," will set the value passed in pixels."]})}),"\n",(0,s.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," class provides methods to add and remove event listeners for the following events, as well as events common to all list components:"]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"center"},children:"Events"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/event/ListOpenEvent",code:"true",children:"ListOpenEvent"})}),(0,s.jsx)(t.td,{children:"An event which is fired when a list dropdown is opened."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/event/ListCloseEvent",code:"true",children:"ListCloseEvent"})}),(0,s.jsx)(t.td,{children:"An event which is fired when a list dropdown is closed."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/event/ListClickEvent",code:"true",children:"ListClickEvent"})}),(0,s.jsx)(t.td,{children:"This event is triggered when the user clicks an item from a List-based component."})]})]})]}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["For a list of additional events supported by the ",(0,s.jsx)(t.code,{children:"ChoiceBox"}),", see ",(0,s.jsx)(t.a,{href:"/docs/components/list-components/lists#shared-events",children:"this section"})," which outlines shared events amongst list components."]})}),"\n",(0,s.jsx)(t.h3,{id:"adding-events",children:"Adding Events"}),"\n",(0,s.jsx)(t.p,{children:"To add an event listener, use one of the following patterns:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"choiceBox.addOpenListener(e -> {\r\n //Executed when the event fires\r\n});\r\n\r\n//OR\r\n\r\nchoiceBox.addOpenListener(new ComponentEventListener() {\r\n @Override\r\n public void onComponentEvent(ComponentEvent e){\r\n //Executed when the event fires\r\n }\r\n});\r\n\r\n//OR\r\n\r\nchoiceBox.addOpenListener(this::listOpenMethod);\n"})}),"\n",(0,s.jsxs)(t.p,{children:["Additional syntactic sugar methods, or aliases, have been added to allow for alternative addition of events by using the ",(0,s.jsx)(t.code,{children:"on"})," prefix followed by the event, such as:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"choiceBox.onOpen(e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,s.jsx)(t.h3,{id:"removing-events",children:"Removing Events"}),"\n",(0,s.jsx)(t.p,{children:"To remove an event listener, use the appropriate method:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"choiceBox.removeOpenListener(listener);\n"})}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["When adding an event listener, a ",(0,s.jsx)(t.code,{children:"ListenerRegistration"})," object will be returned. This can be used, among other things, to remove the event later on."]})}),"\n",(0,s.jsx)(t.h2,{id:"styling",children:"Styling"}),"\n",(0,s.jsx)(t.h3,{id:"expanses",children:"Expanses"}),"\n",(0,s.jsxs)(t.p,{children:["There are five ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," expanses that are supported which allow for quick styling without using CSS. Expanses are supported by use of a built-in enum class. ",(0,s.jsx)("br",{})]}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.comboboxdemos.ComboboxExpanseDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ComboboxExpanseDemo.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/combobox/Expanse.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/comboboxstyles/expanse_styles.css",height:"150px"}),"\n",(0,s.jsx)(t.h3,{id:"themes",children:"Themes"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," component comes with 14 themes built in for quick styling without the use of CSS. Theming is supported by use of a built-in enum class."]}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.comboboxdemos.ComboboxThemeDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ComboboxThemeDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/comboboxstyles/theme_styles.css",height:"170px"}),"\n",(0,s.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,s.jsxs)(t.p,{children:["These are the various parts of the ",(0,s.jsx)(t.a,{href:"../../glossary#shadow-dom",children:"shadow DOM"})," for the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," component, which will be required when styling via CSS is desired."]}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).Z,table:"parts",exclusions:""}),"\n",(0,s.jsx)(t.h3,{id:"css-properties",children:"CSS Properties"}),"\n",(0,s.jsx)(t.p,{children:"These are the various CSS properties that are used in the component, with a short description of their use."}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).Z,exclusions:"",table:"properties"}),"\n",(0,s.jsx)(t.h3,{id:"reflected-attributes",children:"Reflected Attributes"}),"\n",(0,s.jsx)(t.p,{children:"The reflected attributes of a component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes."}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).Z,table:"reflects",exclusions:""}),"\n",(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsx)(t.p,{children:"This component relies on the following components - see the related article for more detailed styling information:"}),"\n",(0,s.jsx)(r.Z,{tag:"bbj-list-button",table:"dependencies"}),"\n",(0,s.jsx)(t.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,s.jsxs)(t.p,{children:["To ensure an optimal user experience when using the ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," component, consider the following best practices:"]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Clear and Limited Options"}),": Keep the list of choices concise where possible, and relevant to the user's task. A ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," is ideal for presenting a clear list of options."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"User-Friendly Labels"}),": Ensure that the displayed labels for each option are user-friendly and self-explanatory. Make sure users can easily understand the purpose of each choice."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Default Selection"}),": Set a default selection when the ChoiceBox is initially displayed. This ensures a pre-selected option, reducing the number of interactions required to make a choice."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"ChoiceBox vs. Other List Components"}),": A ",(0,s.jsx)(t.code,{children:"ChoiceBox"})," should be used over other List components in the following situations:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Multiple Selection is not needed or required, and all items do not need to be displayed at once."}),"\n",(0,s.jsx)(t.li,{children:"A selection of predefined choices is desired, preventing users from entering custom or unexpected data."}),"\n"]}),"\n"]})]})}function b(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>r});n(7294);var s=n(6010);const o={tabItem:"tabItem_Ymn6"};var i=n(5893);function r(e){let{children:t,hidden:n,className:r}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,s.Z)(o.tabItem,r),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>j});var s=n(7294),o=n(6010),i=n(2466),r=n(6550),a=n(469),l=n(1980),c=n(7392),d=n(12);function h(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function u(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:o}}=e;return{value:t,label:n,attributes:s,default:o}}))}(n);return function(e){const t=(0,c.l)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const o=(0,r.k6)(),i=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l._X)(i),(0,s.useCallback)((e=>{if(!i)return;const t=new URLSearchParams(o.location.search);t.set(i,e),o.replace({...o.location,search:t.toString()})}),[i,o])]}function b(e){const{defaultValue:t,queryString:n=!1,groupId:o}=e,i=u(e),[r,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:i}))),[c,h]=m({queryString:n,groupId:o}),[b,x]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[o,i]=(0,d.Nk)(n);return[o,(0,s.useCallback)((e=>{n&&i.set(e)}),[n,i])]}({groupId:o}),g=(()=>{const e=c??b;return p({value:e,tabValues:i})?e:null})();(0,a.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:r,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);l(e),h(e),x(e)}),[h,x,i]),tabValues:i}}var x=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function w(e){let{className:t,block:n,selectedValue:s,selectValue:r,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),o=a[n].value;o!==s&&(c(t),r(o))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:i}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>l.push(e),onKeyDown:h,onClick:d,...i,className:(0,o.Z)("tabs__item",g.tabItem,i?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function f(e){let{lazy:t,children:n,selectedValue:o}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function A(e){const t=b(e);return(0,v.jsxs)("div",{className:(0,o.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(w,{...e,...t}),(0,v.jsx)(f,{...e,...t})]})}function j(e){const t=(0,x.Z)();return(0,v.jsx)(A,{...e,children:h(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>x});var s=n(7294),o=n(917),i=n(4866),r=n(5162),a=n(4673),l=n(1750);const c="data:image/png;base64,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",d=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",h="data:image/png;base64,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";var u=n(2949),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const s=o.iv` display: flex; justify-content: end; margin-bottom: -30px; diff --git a/assets/js/899bab7c.b4fb8853.js b/assets/js/899bab7c.c6146799.js similarity index 55% rename from assets/js/899bab7c.b4fb8853.js rename to assets/js/899bab7c.c6146799.js index 30f02b0b8..530a271e4 100644 --- a/assets/js/899bab7c.b4fb8853.js +++ b/assets/js/899bab7c.c6146799.js @@ -1,4 +1,4 @@ -"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[3074],{1172:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>b,frontMatter:()=>c,metadata:()=>h,toc:()=>m});var o=n(5893),s=n(1151),i=n(6957),r=n(7796),a=n(3273),l=n(2665);const c={sidebar_position:2,title:"ComboBox",slug:"combobox"},d=void 0,h={id:"components/list-components/combo-box",title:"ComboBox",description:"The ComboBox component is a user interface element designed to present users with a list of options or choices, as well as a field for entering their own custom values. Users can select a single option from this list, typically by clicking the ComboBox, which triggers the display of a dropdown list containing available choices, or type in a custom value. Users can also interact with the ComboBox with the arrow keys. When a user makes a selection, the chosen option is then displayed in the ComboBox.",source:"@site/docs/components/list-components/combo-box.md",sourceDirName:"components/list-components",slug:"/components/list-components/combobox",permalink:"/docs/components/list-components/combobox",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/list-components/combo-box.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2,title:"ComboBox",slug:"combobox"},sidebar:"documentationSidebar",previous:{title:"ChoiceBox",permalink:"/docs/components/list-components/choicebox"},next:{title:"ListBox",permalink:"/docs/components/list-components/listbox"}},u={},m=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Custom Value",id:"custom-value",level:2},{value:"Placeholder",id:"placeholder",level:2},{value:"Dropdown Type",id:"dropdown-type",level:2},{value:"Max Row Count",id:"max-row-count",level:2},{value:"Opening Dimensions",id:"opening-dimensions",level:2},{value:"Events",id:"events",level:2},{value:"Adding Events",id:"adding-events",level:3},{value:"Removing Events",id:"removing-events",level:3},{value:"Styling",id:"styling",level:2},{value:"Expanses",id:"expanses",level:3},{value:"Shadow Parts",id:"shadow-parts",level:3},{value:"Reflected Attributes",id:"reflected-attributes",level:3},{value:"Dependencies",id:"dependencies",level:3},{value:"Best Practices",id:"best-practices",level:2}];function p(e){const t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(l.Z,{tooltipText:"This component will render with a shadow DOM, an API built into the browser that facilitates encapsulation.",label:"Shadow",component:"a",href:"../../glossary#shadow-dom",target:"_blank",clickable:!0,iconName:"shadow"}),"\n",(0,o.jsx)(l.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-list-button",href:"https://basishub.github.io/basis-next/#/web-components/bbj-list-button",clickable:!1,iconName:"code"}),"\n",(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/button/Button",top:"true"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ComboBox"})," component is a user interface element designed to present users with a list of options or choices, as well as a field for entering their own custom values. Users can select a single option from this list, typically by clicking the ",(0,o.jsx)(t.code,{children:"ComboBox"}),", which triggers the display of a dropdown list containing available choices, or type in a custom value. Users can also interact with the ",(0,o.jsx)(t.code,{children:"ComboBox"})," with the arrow keys. When a user makes a selection, the chosen option is then displayed in the ",(0,o.jsx)(t.code,{children:"ComboBox"}),"."]}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.ComboBoxDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textcomboboxdemos/ComboBoxDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textcomboboxstyles/demo_styles.css",height:"200px"}),"\n",(0,o.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,o.jsx)(t.p,{children:"The ComboBox component is a versatile input element that combines the features of both a dropdown list and a text input field. It allows users to select items from a predefined list or enter custom values as needed. This section explores common usages of the ComboBox component in various scenarios:"}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Product Search and Entry"}),": Use a ComboBox to implement a product search and entry feature. Users can either select a product from a predefined list or type in a custom product name. This is helpful for applications like e-commerce sites where products are vast and diverse."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Tag Selection and Entry"}),": In applications involving content tagging, a ComboBox can serve as an excellent choice. Users can select from a list of existing tags or add custom tags by typing them. This is useful for organizing and categorizing content. Examples of such tags include:"]}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.em,{children:(0,o.jsx)(t.strong,{children:"Project Labels"})}),': In a project management tool, users can select labels or tags (e.g., "Urgent," "In Progress," "Completed") to categorize tasks or projects, and they can create custom labels as needed.']}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.em,{children:(0,o.jsx)(t.strong,{children:"Recipe Ingredients"})}),': In a cooking or recipe app, users can select ingredients from a list (e.g., "Tomatoes," "Onions," "Chicken") or add their own ingredients for custom recipes.']}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.em,{children:(0,o.jsx)(t.strong,{children:"Location Tags"})}),': In a mapping or geotagging application, users can choose predefined location tags (e.g., "Beach," "City," "Park") or create custom tags to mark specific places on a map.']}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(t.ol,{start:"3",children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:"Data Entry with Suggested Values"}),": In data entry forms, a ComboBox can be used to speed up input by providing a list of suggested values based on user input. This helps users enter data accurately and efficiently."]}),"\n"]}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ComboBox"})," should be used when users are allowed to enter custom values. If only preset values are desired, use a ",(0,o.jsx)(t.a,{href:"/docs/components/list-components/choicebox",children:(0,o.jsx)(t.code,{children:"ChoiceBox"})})," instead."]})}),"\n",(0,o.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.code,{children:"ComboBox()"})}),": Constructs a new ",(0,o.jsx)(t.code,{children:"ComboBox"})," without a label."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.code,{children:"ComboBox(String label)"})}),": Constructs a new ",(0,o.jsx)(t.code,{children:"ComboBox"})," with the specified label."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.code,{children:"ComboBox(String label, ComponentEventListener selectListener)"})}),": Constructs a new ",(0,o.jsx)(t.code,{children:"ComboBox"})," with the given label and a listener to handle item selection events."]}),"\n"]}),"\n",(0,o.jsx)(t.h2,{id:"custom-value",children:"Custom Value"}),"\n",(0,o.jsxs)(t.p,{children:["Changing the custom value property allows control over whether or not a user is able to change the value in the ",(0,o.jsx)(t.code,{children:"ComboBox"})," component's input field. If ",(0,o.jsx)(t.code,{children:"true"}),", which is the default, then a user can change the value. If set to ",(0,o.jsx)(t.code,{children:"false"}),", the user won't be able to change the value. This can be set using the ",(0,o.jsx)(t.code,{children:"setAllowCustomValue()"})," method."]}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.ComboBoxCustomValue",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textcomboboxdemos/ComboBoxCustomValue.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textcomboboxstyles/demo_styles.css",height:"200px"}),"\n",(0,o.jsx)(t.h2,{id:"placeholder",children:"Placeholder"}),"\n",(0,o.jsxs)(t.p,{children:["A placeholder can be set for a ",(0,o.jsx)(t.code,{children:"ComboBox"})," which will display in the text field of the component when it is empty to prompt users for the desired entry in the field. This can be done using the ",(0,o.jsx)(t.code,{children:"setPlaceholder()"})," method."]}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.TextComboBoxPlaceholder",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textcomboboxdemos/TextComboBoxPlaceholder.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/textcombobox/Placeholder.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textcomboboxstyles/text_combo_styles.css",height:"200px"}),"\n",(0,o.jsx)(t.h2,{id:"dropdown-type",children:"Dropdown Type"}),"\n",(0,o.jsxs)(t.p,{children:["Using the ",(0,o.jsx)(t.code,{children:"setDropdownType()"})," method will assign a value to the ",(0,o.jsx)(t.code,{children:"type"})," attribute of a ",(0,o.jsx)(t.code,{children:"ComboBox"}),", and a corresponding value for the ",(0,o.jsx)(t.code,{children:"data-dropdown-for"})," attribute in the dropdown of the ",(0,o.jsx)(t.code,{children:"ComboBox"}),". This is helpful for styling, as the dropdown is taken out of its current position in the DOM and relocated to the end of the page body when opened."]}),"\n",(0,o.jsx)(t.p,{children:"This detachment creates a situation where directly targeting the\r\ndropdown using CSS or shadow part selectors from the parent component becomes challenging, unless you make use of the dropdown type attribute."}),"\n",(0,o.jsx)(t.p,{children:"In the demo below, the Dropdown type is set and used in the CSS file to select the dropdown and change the background color."}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.ComboBoxDropdownType",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textcomboboxdemos/ComboBoxDropdownType.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textcomboboxstyles/dropdown_styles.css",height:"100px"}),"\n",(0,o.jsx)(t.h2,{id:"max-row-count",children:"Max Row Count"}),"\n",(0,o.jsxs)(t.p,{children:["By default, the number of rows displayed in the dropdown of a ",(0,o.jsx)(t.code,{children:"ComboBox"})," will be increased to fit the content. However, using the ",(0,o.jsx)(t.code,{children:"setMaxRowCount()"})," method allows for control over how many items are displayed."]}),"\n",(0,o.jsx)(t.admonition,{type:"caution",children:(0,o.jsx)(t.p,{children:"Using a number that is less than or equal to 0 will result in unsetting this property."})}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.ComboBoxMaxRowDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ComboBoxMaxRowDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/comboboxstyles/demo_styles.css",height:"250px"}),"\n",(0,o.jsx)(t.h2,{id:"opening-dimensions",children:"Opening Dimensions"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ComboBox"})," component has methods that allow manipulation of the dropdown dimensions. The ",(0,o.jsx)(t.strong,{children:"maximum height"})," and ",(0,o.jsx)(t.strong,{children:"minimum width"})," of the dropdown can be set using the ",(0,o.jsx)(t.code,{children:"setOpenHeight()"})," and ",(0,o.jsx)(t.code,{children:"setOpenWidth()"})," methods, respectively."]}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["Passing a ",(0,o.jsx)(t.code,{children:"String"})," value to either of these methods will allow for ",(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units",children:"any valid CSS unit"})," to be applied, such as pixels, viewport dimensions, or other valid rules. Passing an ",(0,o.jsx)(t.code,{children:"int"})," will set the value passed in pixels."]})}),"\n",(0,o.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ComboBox"})," class provides methods to add and remove event listeners for the following events, as well as events common to all list components:"]}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{style:{textAlign:"center"},children:"Events"}),(0,o.jsx)(t.th,{children:"Description"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{style:{textAlign:"center"},children:(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/event/ListOpenEvent",code:"true",children:"ListOpenEvent"})}),(0,o.jsx)(t.td,{children:"An event which is fired when a list dropdown is opened."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{style:{textAlign:"center"},children:(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/event/ListCloseEvent",code:"true",children:"ListCloseEvent"})}),(0,o.jsx)(t.td,{children:"An event which is fired when a list dropdown is closed."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{style:{textAlign:"center"},children:(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/event/ListClickEvent",code:"true",children:"ListClickEvent"})}),(0,o.jsx)(t.td,{children:"This event is triggered when the user clicks an item from a List-based component."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{style:{textAlign:"center"},children:(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/event/ModifyEvent",code:"true",children:"ModifyEvent"})}),(0,o.jsx)(t.td,{children:"An event that is fired when a component is edited or modified."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{style:{textAlign:"center"},children:(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/event/KeypressEvent",code:"true",children:"KeypressEvent"})}),(0,o.jsx)(t.td,{children:"A Keypress event is fired when a user presses a specific key on the keyboard while an element has focus. This event is commonly used to capture and respond to user keyboard interactions. When a Keypress event is triggered,the key that was pressed can be determine using the key code, and a specific action or actions can be performed based on the user's input. For example, it can be used to validate user input in form fields, implement keyboard shortcuts, or trigger certain actions based on specific key combinations."})]})]})]}),"\n",(0,o.jsx)(t.admonition,{title:"Notice",type:"caution",children:(0,o.jsxs)(t.p,{children:["For a list of additional events supported by the ",(0,o.jsx)(t.code,{children:"ComboBox"}),", see ",(0,o.jsx)(t.a,{href:"/docs/components/list-components/lists#shared-events",children:"this section"})," which outlines shared events amongst list components."]})}),"\n",(0,o.jsx)(t.h3,{id:"adding-events",children:"Adding Events"}),"\n",(0,o.jsx)(t.p,{children:"To add an event listener, use one of the following patterns:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-java",children:"comboBox.addKeypressEvent(e -> {\r\n //Executed when the event fires\r\n});\r\n\r\n//OR\r\n\r\ncomboBox.addKeypressEvent(new ComponentEventListener() {\r\n @Override\r\n public void onComponentEvent(ComponentEvent e){\r\n //Executed when the event fires\r\n }\r\n});\r\n\r\n//OR\r\n\r\ncomboBox.addKeypressEvent(this::keypressMethod);\n"})}),"\n",(0,o.jsxs)(t.p,{children:["Additional syntactic sugar methods, or aliases, have been added to allow for alternative addition of events by using the ",(0,o.jsx)(t.code,{children:"on"})," prefix followed by the event, such as:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-java",children:"ComboBox.onOpen(e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,o.jsx)(t.h3,{id:"removing-events",children:"Removing Events"}),"\n",(0,o.jsx)(t.p,{children:"To remove an event listener, use the appropriate method:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-java",children:"comboBox.removeKeypressEvent(listener);\n"})}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["When adding an event listener, a ",(0,o.jsx)(t.code,{children:"ListenerRegistration"})," object will be returned. This can be used, among other things, to remove the event later on."]})}),"\n",(0,o.jsx)(t.h2,{id:"styling",children:"Styling"}),"\n",(0,o.jsx)(t.h3,{id:"expanses",children:"Expanses"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ComboBox"})," component comes with 5 expanses for quick styling without the use of CSS. Expanses are supported by use of a built-in enum class."]}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.TextComboBoxExpanses",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textcomboboxdemos/TextComboBoxExpanses.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/textcombobox/Expanses.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textcomboboxstyles/expanse_styles.css",javaHighlight:"{24,27,30,33,36}",height:"350px"}),"\n",(0,o.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,o.jsxs)(t.p,{children:["These are the various parts of the ",(0,o.jsx)(t.a,{href:"../../glossary#shadow-dom",children:"shadow DOM"})," for the ",(0,o.jsx)(t.code,{children:"ComboBox"})," component, which will be required when styling via CSS is desired."]}),"\n",(0,o.jsx)(r.Z,{tag:n(5731).Ct,table:"parts",exclusions:""}),"\n",(0,o.jsx)(t.h3,{id:"reflected-attributes",children:"Reflected Attributes"}),"\n",(0,o.jsx)(t.p,{children:"The reflected attributes of a component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes."}),"\n",(0,o.jsx)(r.Z,{tag:n(5731).Ct,table:"reflects",exclusions:""}),"\n",(0,o.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,o.jsx)(t.p,{children:"This component relies on the following components - see the related article for more detailed styling information:"}),"\n",(0,o.jsx)(r.Z,{tag:"bbj-list-edit",table:"dependencies"}),"\n",(0,o.jsx)(t.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,o.jsxs)(t.p,{children:["To ensure an optimal user experience when using the ",(0,o.jsx)(t.code,{children:"ComboBox"})," component, consider the following best practices:"]}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Preload Common Values"}),": If there are common or frequently used items, preload them in the ",(0,o.jsx)(t.code,{children:"ComboBox"})," list. This speeds up selection for commonly chosen items and encourages consistency."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"User-Friendly Labels"}),": Ensure that the displayed labels for each option are user-friendly and self-explanatory. Make sure users can easily understand the purpose of each choice."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Validation"}),": Implement input validation to handle custom entries. Check for data accuracy and consistency. You may want to suggest corrections or confirmations for ambiguous entries."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Default Selection"}),": Set a default selection, especially if there is a common or recommended choice. This enhances the user experience by reducing the need for extra clicks."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"ComboBox vs. Other List Components"}),": A ",(0,o.jsx)(t.code,{children:"ComboBox"})," should be used over other List components in the following situations:"]}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"Multiple Selection is not needed or required, and all items do not need to be displayed at once."}),"\n",(0,o.jsxs)(t.li,{children:["A selection of predefined choices, ",(0,o.jsx)(t.em,{children:(0,o.jsx)(t.strong,{children:"as well as custom entry"})})," is desired, allowing users to enter custom or data or select predetermined, often commonly used items."]}),"\n"]}),"\n"]})]})}function b(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>r});n(7294);var o=n(6010);const s={tabItem:"tabItem_Ymn6"};var i=n(5893);function r(e){let{children:t,hidden:n,className:r}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,o.Z)(s.tabItem,r),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>A});var o=n(7294),s=n(6010),i=n(2466),r=n(6550),a=n(469),l=n(1980),c=n(7392),d=n(12);function h(e){return o.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,o.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function u(e){const{values:t,children:n}=e;return(0,o.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:o,default:s}}=e;return{value:t,label:n,attributes:o,default:s}}))}(n);return function(e){const t=(0,c.l)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function p(e){let{queryString:t=!1,groupId:n}=e;const s=(0,r.k6)(),i=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l._X)(i),(0,o.useCallback)((e=>{if(!i)return;const t=new URLSearchParams(s.location.search);t.set(i,e),s.replace({...s.location,search:t.toString()})}),[i,s])]}function b(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,i=u(e),[r,l]=(0,o.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const o=n.find((e=>e.default))??n[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:t,tabValues:i}))),[c,h]=p({queryString:n,groupId:s}),[b,x]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,i]=(0,d.Nk)(n);return[s,(0,o.useCallback)((e=>{n&&i.set(e)}),[n,i])]}({groupId:s}),g=(()=>{const e=c??b;return m({value:e,tabValues:i})?e:null})();(0,a.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:r,selectValue:(0,o.useCallback)((e=>{if(!m({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);l(e),h(e),x(e)}),[h,x,i]),tabValues:i}}var x=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function w(e){let{className:t,block:n,selectedValue:o,selectValue:r,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),s=a[n].value;s!==o&&(c(t),r(s))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:i}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:o===t?0:-1,"aria-selected":o===t,ref:e=>l.push(e),onKeyDown:h,onClick:d,...i,className:(0,s.Z)("tabs__item",g.tabItem,i?.className,{"tabs__item--active":o===t}),children:n??t},t)}))})}function j(e){let{lazy:t,children:n,selectedValue:s}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===s));return e?(0,o.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function f(e){const t=b(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(w,{...e,...t}),(0,v.jsx)(j,{...e,...t})]})}function A(e){const t=(0,x.Z)();return(0,v.jsx)(f,{...e,children:h(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>x});var o=n(7294),s=n(917),i=n(4866),r=n(5162),a=n(4673),l=n(1750);const c="data:image/png;base64,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",d=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",h="data:image/png;base64,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";var u=n(2949),m=n(5944);function p(e){let{collapse:t,setCollapse:n}=e;const o=s.iv` +"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[3074],{1172:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>b,frontMatter:()=>c,metadata:()=>h,toc:()=>m});var o=n(5893),s=n(1151),i=n(6957),r=n(7796),a=n(3273),l=n(2665);const c={sidebar_position:2,title:"ComboBox",slug:"combobox"},d=void 0,h={id:"components/list-components/combo-box",title:"ComboBox",description:"The ComboBox component is a user interface element designed to present users with a list of options or choices, as well as a field for entering their own custom values. Users can select a single option from this list, typically by clicking the ComboBox, which triggers the display of a dropdown list containing available choices, or type in a custom value. Users can also interact with the ComboBox with the arrow keys. When a user makes a selection, the chosen option is then displayed in the ComboBox.",source:"@site/docs/components/list-components/combo-box.md",sourceDirName:"components/list-components",slug:"/components/list-components/combobox",permalink:"/docs/components/list-components/combobox",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/list-components/combo-box.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2,title:"ComboBox",slug:"combobox"},sidebar:"documentationSidebar",previous:{title:"ChoiceBox",permalink:"/docs/components/list-components/choicebox"},next:{title:"ListBox",permalink:"/docs/components/list-components/listbox"}},u={},m=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Custom Value",id:"custom-value",level:2},{value:"Placeholder",id:"placeholder",level:2},{value:"Dropdown Type",id:"dropdown-type",level:2},{value:"Max Row Count",id:"max-row-count",level:2},{value:"Opening Dimensions",id:"opening-dimensions",level:2},{value:"Events",id:"events",level:2},{value:"Adding Events",id:"adding-events",level:3},{value:"Removing Events",id:"removing-events",level:3},{value:"Styling",id:"styling",level:2},{value:"Expanses",id:"expanses",level:3},{value:"Shadow Parts",id:"shadow-parts",level:3},{value:"Reflected Attributes",id:"reflected-attributes",level:3},{value:"Dependencies",id:"dependencies",level:3},{value:"Best Practices",id:"best-practices",level:2}];function p(e){const t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(l.Z,{tooltipText:"This component will render with a shadow DOM, an API built into the browser that facilitates encapsulation.",label:"Shadow",component:"a",href:"../../glossary#shadow-dom",target:"_blank",clickable:!0,iconName:"shadow"}),"\n",(0,o.jsx)(l.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-list-button",href:"https://basishub.github.io/basis-next/#/web-components/bbj-list-button",clickable:!1,iconName:"code"}),"\n",(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/button/Button",top:"true"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ComboBox"})," component is a user interface element designed to present users with a list of options or choices, as well as a field for entering their own custom values. Users can select a single option from this list, typically by clicking the ",(0,o.jsx)(t.code,{children:"ComboBox"}),", which triggers the display of a dropdown list containing available choices, or type in a custom value. Users can also interact with the ",(0,o.jsx)(t.code,{children:"ComboBox"})," with the arrow keys. When a user makes a selection, the chosen option is then displayed in the ",(0,o.jsx)(t.code,{children:"ComboBox"}),"."]}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.ComboBoxDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textcomboboxdemos/ComboBoxDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textcomboboxstyles/demo_styles.css",height:"200px"}),"\n",(0,o.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,o.jsx)(t.p,{children:"The ComboBox component is a versatile input element that combines the features of both a dropdown list and a text input field. It allows users to select items from a predefined list or enter custom values as needed. This section explores common usages of the ComboBox component in various scenarios:"}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Product Search and Entry"}),": Use a ComboBox to implement a product search and entry feature. Users can either select a product from a predefined list or type in a custom product name. This is helpful for applications like e-commerce sites where products are vast and diverse."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Tag Selection and Entry"}),": In applications involving content tagging, a ComboBox can serve as an excellent choice. Users can select from a list of existing tags or add custom tags by typing them. This is useful for organizing and categorizing content. Examples of such tags include:"]}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.em,{children:(0,o.jsx)(t.strong,{children:"Project Labels"})}),': In a project management tool, users can select labels or tags (e.g., "Urgent," "In Progress," "Completed") to categorize tasks or projects, and they can create custom labels as needed.']}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.em,{children:(0,o.jsx)(t.strong,{children:"Recipe Ingredients"})}),': In a cooking or recipe app, users can select ingredients from a list (e.g., "Tomatoes," "Onions," "Chicken") or add their own ingredients for custom recipes.']}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.em,{children:(0,o.jsx)(t.strong,{children:"Location Tags"})}),': In a mapping or geotagging application, users can choose predefined location tags (e.g., "Beach," "City," "Park") or create custom tags to mark specific places on a map.']}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(t.ol,{start:"3",children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:"Data Entry with Suggested Values"}),": In data entry forms, a ComboBox can be used to speed up input by providing a list of suggested values based on user input. This helps users enter data accurately and efficiently."]}),"\n"]}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ComboBox"})," should be used when users are allowed to enter custom values. If only preset values are desired, use a ",(0,o.jsx)(t.a,{href:"/docs/components/list-components/choicebox",children:(0,o.jsx)(t.code,{children:"ChoiceBox"})})," instead."]})}),"\n",(0,o.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.code,{children:"ComboBox()"})}),": Constructs a new ",(0,o.jsx)(t.code,{children:"ComboBox"})," without a label."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.code,{children:"ComboBox(String label)"})}),": Constructs a new ",(0,o.jsx)(t.code,{children:"ComboBox"})," with the specified label."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:(0,o.jsx)(t.code,{children:"ComboBox(String label, ComponentEventListener selectListener)"})}),": Constructs a new ",(0,o.jsx)(t.code,{children:"ComboBox"})," with the given label and a listener to handle item selection events."]}),"\n"]}),"\n",(0,o.jsx)(t.h2,{id:"custom-value",children:"Custom Value"}),"\n",(0,o.jsxs)(t.p,{children:["Changing the custom value property allows control over whether or not a user is able to change the value in the ",(0,o.jsx)(t.code,{children:"ComboBox"})," component's input field. If ",(0,o.jsx)(t.code,{children:"true"}),", which is the default, then a user can change the value. If set to ",(0,o.jsx)(t.code,{children:"false"}),", the user won't be able to change the value. This can be set using the ",(0,o.jsx)(t.code,{children:"setAllowCustomValue()"})," method."]}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.ComboBoxCustomValue",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textcomboboxdemos/ComboBoxCustomValue.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textcomboboxstyles/demo_styles.css",height:"200px"}),"\n",(0,o.jsx)(t.h2,{id:"placeholder",children:"Placeholder"}),"\n",(0,o.jsxs)(t.p,{children:["A placeholder can be set for a ",(0,o.jsx)(t.code,{children:"ComboBox"})," which will display in the text field of the component when it is empty to prompt users for the desired entry in the field. This can be done using the ",(0,o.jsx)(t.code,{children:"setPlaceholder()"})," method."]}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.TextComboBoxPlaceholder",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textcomboboxdemos/TextComboBoxPlaceholder.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/textcombobox/Placeholder.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textcomboboxstyles/text_combo_styles.css",height:"200px"}),"\n",(0,o.jsx)(t.h2,{id:"dropdown-type",children:"Dropdown Type"}),"\n",(0,o.jsxs)(t.p,{children:["Using the ",(0,o.jsx)(t.code,{children:"setDropdownType()"})," method will assign a value to the ",(0,o.jsx)(t.code,{children:"type"})," attribute of a ",(0,o.jsx)(t.code,{children:"ComboBox"}),", and a corresponding value for the ",(0,o.jsx)(t.code,{children:"data-dropdown-for"})," attribute in the dropdown of the ",(0,o.jsx)(t.code,{children:"ComboBox"}),". This is helpful for styling, as the dropdown is taken out of its current position in the DOM and relocated to the end of the page body when opened."]}),"\n",(0,o.jsx)(t.p,{children:"This detachment creates a situation where directly targeting the\r\ndropdown using CSS or shadow part selectors from the parent component becomes challenging, unless you make use of the dropdown type attribute."}),"\n",(0,o.jsx)(t.p,{children:"In the demo below, the Dropdown type is set and used in the CSS file to select the dropdown and change the background color."}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.ComboBoxDropdownType",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textcomboboxdemos/ComboBoxDropdownType.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textcomboboxstyles/dropdown_styles.css",height:"100px"}),"\n",(0,o.jsx)(t.h2,{id:"max-row-count",children:"Max Row Count"}),"\n",(0,o.jsxs)(t.p,{children:["By default, the number of rows displayed in the dropdown of a ",(0,o.jsx)(t.code,{children:"ComboBox"})," will be increased to fit the content. However, using the ",(0,o.jsx)(t.code,{children:"setMaxRowCount()"})," method allows for control over how many items are displayed."]}),"\n",(0,o.jsx)(t.admonition,{type:"caution",children:(0,o.jsx)(t.p,{children:"Using a number that is less than or equal to 0 will result in unsetting this property."})}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.ComboBoxMaxRowDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ComboBoxMaxRowDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/comboboxstyles/demo_styles.css",height:"250px"}),"\n",(0,o.jsx)(t.h2,{id:"opening-dimensions",children:"Opening Dimensions"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ComboBox"})," component has methods that allow manipulation of the dropdown dimensions. The ",(0,o.jsx)(t.strong,{children:"maximum height"})," and ",(0,o.jsx)(t.strong,{children:"minimum width"})," of the dropdown can be set using the ",(0,o.jsx)(t.code,{children:"setOpenHeight()"})," and ",(0,o.jsx)(t.code,{children:"setOpenWidth()"})," methods, respectively."]}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["Passing a ",(0,o.jsx)(t.code,{children:"String"})," value to either of these methods will allow for ",(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units",children:"any valid CSS unit"})," to be applied, such as pixels, viewport dimensions, or other valid rules. Passing an ",(0,o.jsx)(t.code,{children:"int"})," will set the value passed in pixels."]})}),"\n",(0,o.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ComboBox"})," class provides methods to add and remove event listeners for the following events, as well as events common to all list components:"]}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{style:{textAlign:"center"},children:"Events"}),(0,o.jsx)(t.th,{children:"Description"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{style:{textAlign:"center"},children:(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/event/ListOpenEvent",code:"true",children:"ListOpenEvent"})}),(0,o.jsx)(t.td,{children:"An event which is fired when a list dropdown is opened."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{style:{textAlign:"center"},children:(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/event/ListCloseEvent",code:"true",children:"ListCloseEvent"})}),(0,o.jsx)(t.td,{children:"An event which is fired when a list dropdown is closed."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{style:{textAlign:"center"},children:(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/event/ListClickEvent",code:"true",children:"ListClickEvent"})}),(0,o.jsx)(t.td,{children:"This event is triggered when the user clicks an item from a List-based component."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{style:{textAlign:"center"},children:(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/event/ModifyEvent",code:"true",children:"ModifyEvent"})}),(0,o.jsx)(t.td,{children:"An event that is fired when a component is edited or modified."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{style:{textAlign:"center"},children:(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/event/KeypressEvent",code:"true",children:"KeypressEvent"})}),(0,o.jsx)(t.td,{children:"A Keypress event is fired when a user presses a specific key on the keyboard while an element has focus. This event is commonly used to capture and respond to user keyboard interactions. When a Keypress event is triggered,the key that was pressed can be determine using the key code, and a specific action or actions can be performed based on the user's input. For example, it can be used to validate user input in form fields, implement keyboard shortcuts, or trigger certain actions based on specific key combinations."})]})]})]}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["For a list of additional events supported by the ",(0,o.jsx)(t.code,{children:"ComboBox"}),", see ",(0,o.jsx)(t.a,{href:"/docs/components/list-components/lists#shared-events",children:"this section"})," which outlines shared events amongst list components."]})}),"\n",(0,o.jsx)(t.h3,{id:"adding-events",children:"Adding Events"}),"\n",(0,o.jsx)(t.p,{children:"To add an event listener, use one of the following patterns:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-java",children:"comboBox.addKeypressEvent(e -> {\r\n //Executed when the event fires\r\n});\r\n\r\n//OR\r\n\r\ncomboBox.addKeypressEvent(new ComponentEventListener() {\r\n @Override\r\n public void onComponentEvent(ComponentEvent e){\r\n //Executed when the event fires\r\n }\r\n});\r\n\r\n//OR\r\n\r\ncomboBox.addKeypressEvent(this::keypressMethod);\n"})}),"\n",(0,o.jsxs)(t.p,{children:["Additional syntactic sugar methods, or aliases, have been added to allow for alternative addition of events by using the ",(0,o.jsx)(t.code,{children:"on"})," prefix followed by the event, such as:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-java",children:"ComboBox.onOpen(e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,o.jsx)(t.h3,{id:"removing-events",children:"Removing Events"}),"\n",(0,o.jsx)(t.p,{children:"To remove an event listener, use the appropriate method:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-java",children:"comboBox.removeKeypressEvent(listener);\n"})}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["When adding an event listener, a ",(0,o.jsx)(t.code,{children:"ListenerRegistration"})," object will be returned. This can be used, among other things, to remove the event later on."]})}),"\n",(0,o.jsx)(t.h2,{id:"styling",children:"Styling"}),"\n",(0,o.jsx)(t.h3,{id:"expanses",children:"Expanses"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ComboBox"})," component comes with 5 expanses for quick styling without the use of CSS. Expanses are supported by use of a built-in enum class."]}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.TextComboBoxExpanses",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textcomboboxdemos/TextComboBoxExpanses.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/textcombobox/Expanses.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textcomboboxstyles/expanse_styles.css",javaHighlight:"{24,27,30,33,36}",height:"350px"}),"\n",(0,o.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,o.jsxs)(t.p,{children:["These are the various parts of the ",(0,o.jsx)(t.a,{href:"../../glossary#shadow-dom",children:"shadow DOM"})," for the ",(0,o.jsx)(t.code,{children:"ComboBox"})," component, which will be required when styling via CSS is desired."]}),"\n",(0,o.jsx)(r.Z,{tag:n(5731).Ct,table:"parts",exclusions:""}),"\n",(0,o.jsx)(t.h3,{id:"reflected-attributes",children:"Reflected Attributes"}),"\n",(0,o.jsx)(t.p,{children:"The reflected attributes of a component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes."}),"\n",(0,o.jsx)(r.Z,{tag:n(5731).Ct,table:"reflects",exclusions:""}),"\n",(0,o.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,o.jsx)(t.p,{children:"This component relies on the following components - see the related article for more detailed styling information:"}),"\n",(0,o.jsx)(r.Z,{tag:"bbj-list-edit",table:"dependencies"}),"\n",(0,o.jsx)(t.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,o.jsxs)(t.p,{children:["To ensure an optimal user experience when using the ",(0,o.jsx)(t.code,{children:"ComboBox"})," component, consider the following best practices:"]}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Preload Common Values"}),": If there are common or frequently used items, preload them in the ",(0,o.jsx)(t.code,{children:"ComboBox"})," list. This speeds up selection for commonly chosen items and encourages consistency."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"User-Friendly Labels"}),": Ensure that the displayed labels for each option are user-friendly and self-explanatory. Make sure users can easily understand the purpose of each choice."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Validation"}),": Implement input validation to handle custom entries. Check for data accuracy and consistency. You may want to suggest corrections or confirmations for ambiguous entries."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Default Selection"}),": Set a default selection, especially if there is a common or recommended choice. This enhances the user experience by reducing the need for extra clicks."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"ComboBox vs. Other List Components"}),": A ",(0,o.jsx)(t.code,{children:"ComboBox"})," should be used over other List components in the following situations:"]}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"Multiple Selection is not needed or required, and all items do not need to be displayed at once."}),"\n",(0,o.jsxs)(t.li,{children:["A selection of predefined choices, ",(0,o.jsx)(t.em,{children:(0,o.jsx)(t.strong,{children:"as well as custom entry"})})," is desired, allowing users to enter custom or data or select predetermined, often commonly used items."]}),"\n"]}),"\n"]})]})}function b(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>r});n(7294);var o=n(6010);const s={tabItem:"tabItem_Ymn6"};var i=n(5893);function r(e){let{children:t,hidden:n,className:r}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,o.Z)(s.tabItem,r),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>A});var o=n(7294),s=n(6010),i=n(2466),r=n(6550),a=n(469),l=n(1980),c=n(7392),d=n(12);function h(e){return o.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,o.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function u(e){const{values:t,children:n}=e;return(0,o.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:o,default:s}}=e;return{value:t,label:n,attributes:o,default:s}}))}(n);return function(e){const t=(0,c.l)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function p(e){let{queryString:t=!1,groupId:n}=e;const s=(0,r.k6)(),i=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l._X)(i),(0,o.useCallback)((e=>{if(!i)return;const t=new URLSearchParams(s.location.search);t.set(i,e),s.replace({...s.location,search:t.toString()})}),[i,s])]}function b(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,i=u(e),[r,l]=(0,o.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const o=n.find((e=>e.default))??n[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:t,tabValues:i}))),[c,h]=p({queryString:n,groupId:s}),[b,x]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,i]=(0,d.Nk)(n);return[s,(0,o.useCallback)((e=>{n&&i.set(e)}),[n,i])]}({groupId:s}),g=(()=>{const e=c??b;return m({value:e,tabValues:i})?e:null})();(0,a.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:r,selectValue:(0,o.useCallback)((e=>{if(!m({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);l(e),h(e),x(e)}),[h,x,i]),tabValues:i}}var x=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function w(e){let{className:t,block:n,selectedValue:o,selectValue:r,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),s=a[n].value;s!==o&&(c(t),r(s))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:i}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:o===t?0:-1,"aria-selected":o===t,ref:e=>l.push(e),onKeyDown:h,onClick:d,...i,className:(0,s.Z)("tabs__item",g.tabItem,i?.className,{"tabs__item--active":o===t}),children:n??t},t)}))})}function j(e){let{lazy:t,children:n,selectedValue:s}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===s));return e?(0,o.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function f(e){const t=b(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(w,{...e,...t}),(0,v.jsx)(j,{...e,...t})]})}function A(e){const t=(0,x.Z)();return(0,v.jsx)(f,{...e,children:h(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>x});var o=n(7294),s=n(917),i=n(4866),r=n(5162),a=n(4673),l=n(1750);const c="data:image/png;base64,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",d=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",h="data:image/png;base64,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";var u=n(2949),m=n(5944);function p(e){let{collapse:t,setCollapse:n}=e;const o=s.iv` display: flex; justify-content: end; margin-bottom: -30px; diff --git a/assets/js/runtime~main.a2b4e0cb.js b/assets/js/runtime~main.47cb2380.js similarity index 96% rename from assets/js/runtime~main.a2b4e0cb.js rename to assets/js/runtime~main.47cb2380.js index e2fb9e658..3da50bab8 100644 --- a/assets/js/runtime~main.a2b4e0cb.js +++ b/assets/js/runtime~main.47cb2380.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,f,c,b,d={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={exports:{}};return d[e].call(f.exports,f,f.exports,r),f.exports}r.m=d,e=[],r.O=(a,f,c,b)=>{if(!f){var d=1/0;for(i=0;i=b)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,b0&&e[i-1][2]>b;i--)e[i]=e[i-1];e[i]=[f,c,b]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var b=Object.create(null);r.r(b);var d={};a=a||[null,f({}),f([]),f(f)];for(var t=2&c&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>d[a]=()=>e[a]));return d.default=()=>e,r.d(b,d),b},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({18:"dd91dd19",53:"935f2afb",377:"559b7fc6",591:"bedc8a73",662:"2180a3af",815:"272fe341",994:"27a8c9d3",1030:"f3918844",1142:"3d14ec9a",1192:"48bbfb2a",1205:"a980013d",1226:"60ac4983",1303:"47f3d74a",1368:"9df0fb54",1385:"eca5a6fe",1432:"98567d22",1517:"c58736f6",1588:"79697695",1776:"8f54fd02",1869:"20f7e9b5",1878:"9807f789",1898:"b330cd6c",2048:"ff8293ff",2084:"0577d7e9",2115:"e5003ac9",2163:"85d08387",2264:"0375db59",2276:"e6d01527",2283:"a1ac9222",2291:"e747ec83",2498:"4eb8144b",2517:"4a332b92",2529:"ff6d8346",2565:"56ad8461",2616:"7f7b6a5a",2699:"175f4414",2755:"367e3965",2800:"4d281b1f",2820:"0fb4d328",2941:"f1ecfa8c",3021:"c548088a",3074:"899bab7c",3085:"1f391b9e",3150:"b914e798",3317:"a74b0825",3574:"7c7204eb",3588:"dee26f84",3779:"693028f3",3782:"abb5f9c4",3850:"3202e975",4007:"b512792d",4020:"700cec1a",4085:"3b023488",4125:"a4ec1fc0",4193:"c4f5d8e4",4195:"245d481f",4305:"add51b50",4368:"a94703ab",4373:"2abf1b13",4383:"8cb88c1d",4384:"23e38187",4418:"e89ff0bb",4718:"76eefc0f",4751:"dc93842a",4922:"567b6912",5090:"6eb7f153",5148:"9eb89d33",5289:"b6fc7147",5430:"a9bfb29e",5597:"69802c4b",5772:"1dab32d6",5800:"6a3d3763",5858:"37046ed3",5993:"7eb55c50",6020:"5510d6bc",6027:"ac555a8a",6088:"3360d290",6094:"7dbfa287",6266:"b8ef75ed",6389:"548c55b7",6405:"af08f1ee",6450:"a113490b",6558:"a2f6c742",6582:"48f5576d",6628:"c90035ea",6811:"3f60750a",6918:"ee6c8bca",6929:"017e1775",6949:"71b4e446",7100:"2df7d063",7199:"66843aff",7303:"4b46da1c",7312:"b3adb49b",7414:"393be207",7448:"e4104523",7610:"47feae6f",7637:"104c62f0",7711:"e71a10cb",7802:"7b2f26a3",7918:"17896441",7920:"1a4e3797",7956:"32daff60",7964:"977f47c1",8045:"a4de130a",8402:"33b18326",8499:"44a2ffa8",8518:"a7bd4aaa",8524:"9774bb5c",8592:"common",8608:"ae2bfb5e",8614:"1e924268",8699:"c4ecc0ec",8730:"e2c97c51",8794:"aad6d339",9047:"87878b99",9058:"7f80ed3d",9234:"e9df50f6",9243:"e5a16701",9486:"6f3f7b75",9580:"ba4df261",9583:"6da97851",9608:"14a0872a",9635:"cb648109",9661:"5e95c892",9666:"ac18fad6",9671:"0e384e19",9729:"e97f9a74",9810:"c57ca45f",9817:"14eb3368"}[e]||e)+"."+{13:"fbba57c8",18:"3ba7a294",53:"0e00b0a7",377:"b89ccf6c",591:"f6f6d930",662:"def90570",815:"9e8707fe",994:"a30e47bb",1030:"ba31dde3",1142:"3bc892c9",1192:"13fe832f",1205:"6f60b5f2",1226:"4db49808",1303:"2253c326",1368:"96703875",1385:"4b18219a",1426:"31d26666",1432:"f8847f28",1517:"d941f243",1588:"cbb99ff7",1772:"9cdcc2b7",1776:"101c9eca",1869:"3cb38693",1878:"3393294f",1898:"a0a5144c",2048:"8011fa1a",2084:"2c508bc5",2115:"4c68bf42",2163:"63cbd448",2264:"9d7a646b",2276:"8845c8c1",2283:"235fcd57",2291:"6a9ca3c9",2498:"8d286d44",2517:"2f86f7e1",2529:"a2fb5735",2565:"56b2bc8c",2616:"d0ae2b5a",2699:"60d7509f",2755:"ea2cc609",2800:"f2d17e47",2820:"a4077d8f",2941:"c7cf6265",3021:"b1dac98f",3074:"b4fb8853",3085:"6aba5b69",3150:"fc6d8092",3317:"29bb64a8",3574:"1796a6c6",3588:"8ed85500",3779:"4bc9b993",3782:"d8dec52b",3850:"a30fed30",4007:"998ced63",4020:"4dd50b7b",4085:"5ad7ed32",4125:"302b7db3",4193:"03fcae25",4195:"54e9defa",4305:"c12dde5f",4368:"9ec33ef1",4373:"74f37f73",4383:"3b06c56a",4384:"18897774",4418:"edf07155",4718:"68fbc33e",4751:"c502f27c",4922:"43179ff4",5090:"ab6da685",5148:"15f89b54",5289:"b700cdb3",5430:"ae0a24a4",5597:"0bb46755",5772:"740e2298",5800:"0919acfa",5858:"7cdc1765",5993:"fd2b9c1a",6020:"83db8251",6027:"23189a74",6088:"b1fb8298",6094:"81c7af93",6266:"c8d1c8ab",6389:"b11f30c4",6405:"c3dcb2d5",6450:"4c09ba85",6558:"a74be2d3",6582:"fb68430b",6628:"5e58840b",6811:"d81a436b",6918:"95515491",6929:"e6908a14",6945:"eae52f61",6949:"627ec556",7100:"f34e521b",7199:"64cf0ae9",7303:"01d55b1e",7312:"d2850d5e",7414:"d64e83a4",7448:"4726b8f5",7610:"004bede9",7637:"03938523",7711:"16d4549a",7802:"94e9eee6",7918:"aaa35f54",7920:"26f05081",7956:"dac8475e",7964:"8ca73885",8045:"403a436b",8402:"fd6a9711",8499:"813d45b6",8518:"a7c9eaa9",8524:"8943cc0b",8537:"4b25d96f",8592:"5ab8b7db",8608:"03c8b9cc",8614:"016ce831",8660:"c1e51b6e",8699:"9d460b8d",8730:"b9bb3e5b",8794:"ec2d4610",8894:"a745351b",9047:"75e49dbc",9058:"1d5b7ec4",9234:"621286db",9243:"1f1fbf74",9486:"b702c7ae",9580:"e9916290",9583:"8cf95b27",9608:"a5ca5ac9",9635:"b9bbad2e",9661:"9a1b48e7",9666:"ef2b7356",9671:"72267ca5",9729:"019b145d",9810:"5a8741a6",9817:"c37f899d"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),c={},b="dwcj-documentation:",r.l=(e,a,f,d)=>{if(c[e])c[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var b=c[e];if(delete c[e],t.parentNode&&t.parentNode.removeChild(t),b&&b.forEach((e=>e(f))),a)return a(f)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={17896441:"7918",79697695:"1588",dd91dd19:"18","935f2afb":"53","559b7fc6":"377",bedc8a73:"591","2180a3af":"662","272fe341":"815","27a8c9d3":"994",f3918844:"1030","3d14ec9a":"1142","48bbfb2a":"1192",a980013d:"1205","60ac4983":"1226","47f3d74a":"1303","9df0fb54":"1368",eca5a6fe:"1385","98567d22":"1432",c58736f6:"1517","8f54fd02":"1776","20f7e9b5":"1869","9807f789":"1878",b330cd6c:"1898",ff8293ff:"2048","0577d7e9":"2084",e5003ac9:"2115","85d08387":"2163","0375db59":"2264",e6d01527:"2276",a1ac9222:"2283",e747ec83:"2291","4eb8144b":"2498","4a332b92":"2517",ff6d8346:"2529","56ad8461":"2565","7f7b6a5a":"2616","175f4414":"2699","367e3965":"2755","4d281b1f":"2800","0fb4d328":"2820",f1ecfa8c:"2941",c548088a:"3021","899bab7c":"3074","1f391b9e":"3085",b914e798:"3150",a74b0825:"3317","7c7204eb":"3574",dee26f84:"3588","693028f3":"3779",abb5f9c4:"3782","3202e975":"3850",b512792d:"4007","700cec1a":"4020","3b023488":"4085",a4ec1fc0:"4125",c4f5d8e4:"4193","245d481f":"4195",add51b50:"4305",a94703ab:"4368","2abf1b13":"4373","8cb88c1d":"4383","23e38187":"4384",e89ff0bb:"4418","76eefc0f":"4718",dc93842a:"4751","567b6912":"4922","6eb7f153":"5090","9eb89d33":"5148",b6fc7147:"5289",a9bfb29e:"5430","69802c4b":"5597","1dab32d6":"5772","6a3d3763":"5800","37046ed3":"5858","7eb55c50":"5993","5510d6bc":"6020",ac555a8a:"6027","3360d290":"6088","7dbfa287":"6094",b8ef75ed:"6266","548c55b7":"6389",af08f1ee:"6405",a113490b:"6450",a2f6c742:"6558","48f5576d":"6582",c90035ea:"6628","3f60750a":"6811",ee6c8bca:"6918","017e1775":"6929","71b4e446":"6949","2df7d063":"7100","66843aff":"7199","4b46da1c":"7303",b3adb49b:"7312","393be207":"7414",e4104523:"7448","47feae6f":"7610","104c62f0":"7637",e71a10cb:"7711","7b2f26a3":"7802","1a4e3797":"7920","32daff60":"7956","977f47c1":"7964",a4de130a:"8045","33b18326":"8402","44a2ffa8":"8499",a7bd4aaa:"8518","9774bb5c":"8524",common:"8592",ae2bfb5e:"8608","1e924268":"8614",c4ecc0ec:"8699",e2c97c51:"8730",aad6d339:"8794","87878b99":"9047","7f80ed3d":"9058",e9df50f6:"9234",e5a16701:"9243","6f3f7b75":"9486",ba4df261:"9580","6da97851":"9583","14a0872a":"9608",cb648109:"9635","5e95c892":"9661",ac18fad6:"9666","0e384e19":"9671",e97f9a74:"9729",c57ca45f:"9810","14eb3368":"9817"}[e]||e,r.p+r.u(e)},(()=>{var e={6552:0,532:0};r.f.j=(a,f)=>{var c=r.o(e,a)?e[a]:void 0;if(0!==c)if(c)f.push(c[2]);else if(/^(53|655)2$/.test(a))e[a]=0;else{var b=new Promise(((f,b)=>c=e[a]=[f,b]));f.push(c[2]=b);var d=r.p+r.u(a),t=new Error;r.l(d,(f=>{if(r.o(e,a)&&(0!==(c=e[a])&&(e[a]=void 0),c)){var b=f&&("load"===f.type?"missing":f.type),d=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+b+": "+d+")",t.name="ChunkLoadError",t.type=b,t.request=d,c[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var c,b,d=f[0],t=f[1],o=f[2],n=0;if(d.some((a=>0!==e[a]))){for(c in t)r.o(t,c)&&(r.m[c]=t[c]);if(o)var i=o(r)}for(a&&a(f);n{"use strict";var e,a,f,c,b,d={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={exports:{}};return d[e].call(f.exports,f,f.exports,r),f.exports}r.m=d,e=[],r.O=(a,f,c,b)=>{if(!f){var d=1/0;for(i=0;i=b)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,b0&&e[i-1][2]>b;i--)e[i]=e[i-1];e[i]=[f,c,b]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var b=Object.create(null);r.r(b);var d={};a=a||[null,f({}),f([]),f(f)];for(var t=2&c&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>d[a]=()=>e[a]));return d.default=()=>e,r.d(b,d),b},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({18:"dd91dd19",53:"935f2afb",377:"559b7fc6",591:"bedc8a73",662:"2180a3af",815:"272fe341",994:"27a8c9d3",1030:"f3918844",1142:"3d14ec9a",1192:"48bbfb2a",1205:"a980013d",1226:"60ac4983",1303:"47f3d74a",1368:"9df0fb54",1385:"eca5a6fe",1432:"98567d22",1517:"c58736f6",1588:"79697695",1776:"8f54fd02",1869:"20f7e9b5",1878:"9807f789",1898:"b330cd6c",2048:"ff8293ff",2084:"0577d7e9",2115:"e5003ac9",2163:"85d08387",2264:"0375db59",2276:"e6d01527",2283:"a1ac9222",2291:"e747ec83",2498:"4eb8144b",2517:"4a332b92",2529:"ff6d8346",2565:"56ad8461",2616:"7f7b6a5a",2699:"175f4414",2755:"367e3965",2800:"4d281b1f",2820:"0fb4d328",2941:"f1ecfa8c",3021:"c548088a",3074:"899bab7c",3085:"1f391b9e",3150:"b914e798",3317:"a74b0825",3574:"7c7204eb",3588:"dee26f84",3779:"693028f3",3782:"abb5f9c4",3850:"3202e975",4007:"b512792d",4020:"700cec1a",4085:"3b023488",4125:"a4ec1fc0",4193:"c4f5d8e4",4195:"245d481f",4305:"add51b50",4368:"a94703ab",4373:"2abf1b13",4383:"8cb88c1d",4384:"23e38187",4418:"e89ff0bb",4718:"76eefc0f",4751:"dc93842a",4922:"567b6912",5090:"6eb7f153",5148:"9eb89d33",5289:"b6fc7147",5430:"a9bfb29e",5597:"69802c4b",5772:"1dab32d6",5800:"6a3d3763",5858:"37046ed3",5993:"7eb55c50",6020:"5510d6bc",6027:"ac555a8a",6088:"3360d290",6094:"7dbfa287",6266:"b8ef75ed",6389:"548c55b7",6405:"af08f1ee",6450:"a113490b",6558:"a2f6c742",6582:"48f5576d",6628:"c90035ea",6811:"3f60750a",6918:"ee6c8bca",6929:"017e1775",6949:"71b4e446",7100:"2df7d063",7199:"66843aff",7303:"4b46da1c",7312:"b3adb49b",7414:"393be207",7448:"e4104523",7610:"47feae6f",7637:"104c62f0",7711:"e71a10cb",7802:"7b2f26a3",7918:"17896441",7920:"1a4e3797",7956:"32daff60",7964:"977f47c1",8045:"a4de130a",8402:"33b18326",8499:"44a2ffa8",8518:"a7bd4aaa",8524:"9774bb5c",8592:"common",8608:"ae2bfb5e",8614:"1e924268",8699:"c4ecc0ec",8730:"e2c97c51",8794:"aad6d339",9047:"87878b99",9058:"7f80ed3d",9234:"e9df50f6",9243:"e5a16701",9486:"6f3f7b75",9580:"ba4df261",9583:"6da97851",9608:"14a0872a",9635:"cb648109",9661:"5e95c892",9666:"ac18fad6",9671:"0e384e19",9729:"e97f9a74",9810:"c57ca45f",9817:"14eb3368"}[e]||e)+"."+{13:"fbba57c8",18:"3ba7a294",53:"0e00b0a7",377:"b89ccf6c",591:"f6f6d930",662:"def90570",815:"9e8707fe",994:"a30e47bb",1030:"ba31dde3",1142:"3bc892c9",1192:"13fe832f",1205:"6f60b5f2",1226:"4db49808",1303:"2253c326",1368:"96703875",1385:"4b18219a",1426:"31d26666",1432:"f8847f28",1517:"d941f243",1588:"cbb99ff7",1772:"9cdcc2b7",1776:"101c9eca",1869:"3cb38693",1878:"3393294f",1898:"a0a5144c",2048:"8011fa1a",2084:"2c508bc5",2115:"4c68bf42",2163:"63cbd448",2264:"9d7a646b",2276:"8845c8c1",2283:"235fcd57",2291:"6a9ca3c9",2498:"6f555175",2517:"2f86f7e1",2529:"a2fb5735",2565:"56b2bc8c",2616:"d0ae2b5a",2699:"60d7509f",2755:"ea2cc609",2800:"f2d17e47",2820:"a4077d8f",2941:"c7cf6265",3021:"b1dac98f",3074:"c6146799",3085:"6aba5b69",3150:"fc6d8092",3317:"29bb64a8",3574:"1796a6c6",3588:"8ed85500",3779:"4bc9b993",3782:"d8dec52b",3850:"a30fed30",4007:"998ced63",4020:"4dd50b7b",4085:"5ad7ed32",4125:"302b7db3",4193:"03fcae25",4195:"54e9defa",4305:"c12dde5f",4368:"9ec33ef1",4373:"d193eb50",4383:"3b06c56a",4384:"18897774",4418:"edf07155",4718:"68fbc33e",4751:"c502f27c",4922:"43179ff4",5090:"ab6da685",5148:"15f89b54",5289:"b700cdb3",5430:"ae0a24a4",5597:"0bb46755",5772:"740e2298",5800:"0919acfa",5858:"7cdc1765",5993:"fd2b9c1a",6020:"83db8251",6027:"23189a74",6088:"b1fb8298",6094:"81c7af93",6266:"c8d1c8ab",6389:"b11f30c4",6405:"c3dcb2d5",6450:"4c09ba85",6558:"a74be2d3",6582:"fb68430b",6628:"5e58840b",6811:"d81a436b",6918:"95515491",6929:"e6908a14",6945:"eae52f61",6949:"627ec556",7100:"f34e521b",7199:"64cf0ae9",7303:"01d55b1e",7312:"d2850d5e",7414:"d64e83a4",7448:"4726b8f5",7610:"004bede9",7637:"03938523",7711:"16d4549a",7802:"94e9eee6",7918:"aaa35f54",7920:"26f05081",7956:"dac8475e",7964:"8ca73885",8045:"403a436b",8402:"fd6a9711",8499:"813d45b6",8518:"a7c9eaa9",8524:"8943cc0b",8537:"4b25d96f",8592:"5ab8b7db",8608:"03c8b9cc",8614:"016ce831",8660:"c1e51b6e",8699:"9d460b8d",8730:"b9bb3e5b",8794:"ec2d4610",8894:"a745351b",9047:"75e49dbc",9058:"1d5b7ec4",9234:"621286db",9243:"1f1fbf74",9486:"b702c7ae",9580:"e9916290",9583:"8cf95b27",9608:"a5ca5ac9",9635:"b9bbad2e",9661:"9a1b48e7",9666:"ef2b7356",9671:"72267ca5",9729:"019b145d",9810:"5a8741a6",9817:"c37f899d"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),c={},b="dwcj-documentation:",r.l=(e,a,f,d)=>{if(c[e])c[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var b=c[e];if(delete c[e],t.parentNode&&t.parentNode.removeChild(t),b&&b.forEach((e=>e(f))),a)return a(f)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={17896441:"7918",79697695:"1588",dd91dd19:"18","935f2afb":"53","559b7fc6":"377",bedc8a73:"591","2180a3af":"662","272fe341":"815","27a8c9d3":"994",f3918844:"1030","3d14ec9a":"1142","48bbfb2a":"1192",a980013d:"1205","60ac4983":"1226","47f3d74a":"1303","9df0fb54":"1368",eca5a6fe:"1385","98567d22":"1432",c58736f6:"1517","8f54fd02":"1776","20f7e9b5":"1869","9807f789":"1878",b330cd6c:"1898",ff8293ff:"2048","0577d7e9":"2084",e5003ac9:"2115","85d08387":"2163","0375db59":"2264",e6d01527:"2276",a1ac9222:"2283",e747ec83:"2291","4eb8144b":"2498","4a332b92":"2517",ff6d8346:"2529","56ad8461":"2565","7f7b6a5a":"2616","175f4414":"2699","367e3965":"2755","4d281b1f":"2800","0fb4d328":"2820",f1ecfa8c:"2941",c548088a:"3021","899bab7c":"3074","1f391b9e":"3085",b914e798:"3150",a74b0825:"3317","7c7204eb":"3574",dee26f84:"3588","693028f3":"3779",abb5f9c4:"3782","3202e975":"3850",b512792d:"4007","700cec1a":"4020","3b023488":"4085",a4ec1fc0:"4125",c4f5d8e4:"4193","245d481f":"4195",add51b50:"4305",a94703ab:"4368","2abf1b13":"4373","8cb88c1d":"4383","23e38187":"4384",e89ff0bb:"4418","76eefc0f":"4718",dc93842a:"4751","567b6912":"4922","6eb7f153":"5090","9eb89d33":"5148",b6fc7147:"5289",a9bfb29e:"5430","69802c4b":"5597","1dab32d6":"5772","6a3d3763":"5800","37046ed3":"5858","7eb55c50":"5993","5510d6bc":"6020",ac555a8a:"6027","3360d290":"6088","7dbfa287":"6094",b8ef75ed:"6266","548c55b7":"6389",af08f1ee:"6405",a113490b:"6450",a2f6c742:"6558","48f5576d":"6582",c90035ea:"6628","3f60750a":"6811",ee6c8bca:"6918","017e1775":"6929","71b4e446":"6949","2df7d063":"7100","66843aff":"7199","4b46da1c":"7303",b3adb49b:"7312","393be207":"7414",e4104523:"7448","47feae6f":"7610","104c62f0":"7637",e71a10cb:"7711","7b2f26a3":"7802","1a4e3797":"7920","32daff60":"7956","977f47c1":"7964",a4de130a:"8045","33b18326":"8402","44a2ffa8":"8499",a7bd4aaa:"8518","9774bb5c":"8524",common:"8592",ae2bfb5e:"8608","1e924268":"8614",c4ecc0ec:"8699",e2c97c51:"8730",aad6d339:"8794","87878b99":"9047","7f80ed3d":"9058",e9df50f6:"9234",e5a16701:"9243","6f3f7b75":"9486",ba4df261:"9580","6da97851":"9583","14a0872a":"9608",cb648109:"9635","5e95c892":"9661",ac18fad6:"9666","0e384e19":"9671",e97f9a74:"9729",c57ca45f:"9810","14eb3368":"9817"}[e]||e,r.p+r.u(e)},(()=>{var e={6552:0,532:0};r.f.j=(a,f)=>{var c=r.o(e,a)?e[a]:void 0;if(0!==c)if(c)f.push(c[2]);else if(/^(53|655)2$/.test(a))e[a]=0;else{var b=new Promise(((f,b)=>c=e[a]=[f,b]));f.push(c[2]=b);var d=r.p+r.u(a),t=new Error;r.l(d,(f=>{if(r.o(e,a)&&(0!==(c=e[a])&&(e[a]=void 0),c)){var b=f&&("load"===f.type?"missing":f.type),d=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+b+": "+d+")",t.name="ChunkLoadError",t.type=b,t.request=d,c[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var c,b,d=f[0],t=f[1],o=f[2],n=0;if(d.some((a=>0!==e[a]))){for(c in t)r.o(t,c)&&(r.m[c]=t[c]);if(o)var i=o(r)}for(a&&a(f);n